NEZ-2878 feat：集成配置页面代码块增加 复制按钮

nezha-fronted/src/components/common/copy-code/copy-code.css

@@ -0,0 +1,49 @@
+.v-md-pre-wrapper.copy-code-mode .v-md-copy-code-btn {
+  position: absolute;
+  top: 0.4em;
+  right: 0.4em;
+  z-index: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 24px;
+  padding: 0;
+  color: #ddd;
+  font-size: 14px;
+  background-color: #666;
+  border: none;
+  border-radius: 6px;
+  outline: none;
+  box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.2);
+  visibility: hidden;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  user-select: none;
+}
+
+.v-md-pre-wrapper.copy-code-mode .v-md-copy-code-btn i {
+  display: inline-block;
+  color: inherit;
+  font-style: normal;
+  line-height: 0;
+  text-align: center;
+  text-transform: none;
+  vertical-align: -0.125em;
+  text-rendering: optimizeLegibility;
+  pointer-events: none;
+}
+
+.v-md-pre-wrapper.copy-code-mode::before {
+  transition: 0.3s;
+}
+
+.v-md-pre-wrapper.copy-code-mode:hover .v-md-copy-code-btn {
+  visibility: visible;
+  opacity: 1;
+}
+
+.v-md-pre-wrapper.copy-code-mode:hover::before {
+  display: none;
+}

nezha-fronted/src/components/common/copy-code/index.js

@@ -0,0 +1,21 @@
+'use strict'
+
+const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault')
+
+exports.__esModule = true
+exports.default = createCopyCodePlugin
+
+const _markdownItCopyCode = _interopRequireDefault(require('./utils/markdown-it-copy-code'))
+
+const _preview = _interopRequireDefault(require('./preview'))
+
+function createCopyCodePlugin () {
+  return {
+    install: function install (VMdEditor) {
+      VMdEditor.extendMarkdown(function (mdParser) {
+        mdParser.use(_markdownItCopyCode.default)
+      })
+      VMdEditor.use((0, _preview.default)())
+    }
+  }
+}

nezha-fronted/src/components/common/copy-code/preview.js

@@ -0,0 +1,63 @@
+'use strict'
+
+const _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault')
+
+exports.__esModule = true
+exports.default = createCopyCodePreview
+
+const _copyToClipboard = _interopRequireDefault(require('copy-to-clipboard'))
+
+function isCopyButton (el) {
+  return el.classList.contains('v-md-copy-code-btn')
+}
+
+function findCodeWrapperEl (el) {
+  if (el.classList.contains('v-md-pre-wrapper')) {
+    return el
+  }
+
+  return findCodeWrapperEl(el.parentNode)
+}
+
+function getPreviewEl (el) {
+  const previewElClass = 'v-md-editor-preview'
+  return el.classList.contains(previewElClass) ? el : el.querySelector('.' + previewElClass)
+}
+
+function createCopyCodePreview () {
+  return {
+    install: function install (VMdEditor) {
+      if (!VMdEditor.mixins) VMdEditor.mixins = []
+      VMdEditor.mixins.push({
+        mounted: function mounted () {
+          const _this = this
+
+          this.$nextTick(function () {
+            const previewEl = getPreviewEl(_this.$el)
+            previewEl.addEventListener('click', _this.handleCopyCodeClick)
+          })
+        },
+        beforeDestroy: function beforeDestroy () {
+          const previewEl = getPreviewEl(this.$el)
+          previewEl.removeEventListener('click', this.handleCopyCodeClick)
+        },
+        methods: {
+          handleCopyCodeClick: function handleCopyCodeClick (_ref) {
+            const target = _ref.target
+
+            if (isCopyButton(target)) {
+              const codeWrapper = findCodeWrapperEl(target.parentNode)
+
+              if (codeWrapper) {
+                const code = codeWrapper.querySelector('code').innerText;
+                // Set the MIME type of what you want to copy as. Use text/html to copy as HTML, text/plain to avoid inherited styles showing when pasted into rich text editor.
+                (0, _copyToClipboard.default)(code, { format: 'text/plain' })
+                this.$emit('copy-code-success', code)
+              }
+            }
+          }
+        }
+      })
+    }
+  }
+}

nezha-fronted/src/components/common/copy-code/utils/markdown-it-copy-code.js

@@ -0,0 +1,21 @@
+'use strict'
+
+// markdown-it plugin for generating copy code button.
+// It depends on preWrapper plugin.
+
+/* eslint-disable max-len */
+module.exports = function (md) {
+  // === Start: 防止复制按钮不断被创建 ===
+  if (!md.renderer.rules.originalFence) {
+    md.renderer.rules.originalFence = md.renderer.rules.fence
+  }
+  // === End: Patch ===
+  const fence = md.renderer.rules.originalFence
+
+  md.renderer.rules.fence = function () {
+    const rawCode = fence.apply(void 0, arguments)
+    const button = '\n    <button class="v-md-copy-code-btn" type="button">\n      <i class="nz-icon nz-icon-override"></i>\n    </button>'
+    const finalCode = rawCode.replace('<!--beforeend-->', button + '<!--beforeend-->').replace('v-md-pre-wrapper', 'v-md-pre-wrapper copy-code-mode')
+    return finalCode
+  }
+}