add copy

package-lock.json

@@ -15,6 +15,7 @@
         "@vueuse/core": "^12.8.2",
         "axios": "^1.8.1",
         "codemirror": "^6.0.1",
+        "copy-text-to-clipboard": "^3.2.0",
         "github-markdown-css": "^5.8.1",
         "highlight.js": "^11.11.1",
         "marked": "^15.0.7",
@@ -1432,6 +1433,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/copy-text-to-clipboard/-/copy-text-to-clipboard-3.2.0.tgz",
+      "integrity": "sha512-RnJFp1XR/LOBDckxTib5Qjr/PMfkatD0MUCQgdpqS8MdKiNUzBjAQBEN6oUy+jW7LI93BBG3DtMB2KOOKpGs2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.40.0",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.40.0.tgz",

package.json

@@ -16,6 +16,7 @@
     "@vueuse/core": "^12.8.2",
     "axios": "^1.8.1",
     "codemirror": "^6.0.1",
+    "copy-text-to-clipboard": "^3.2.0",
     "github-markdown-css": "^5.8.1",
     "highlight.js": "^11.11.1",
     "marked": "^15.0.7",

src/components/Tutorial.vue

@@ -27,9 +27,10 @@
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { css, html, js, tab } from "../store/editors"
 import { computed, onMounted, ref, useTemplateRef, watch } from "vue"
 import { marked } from "marked"
+import copyFn from "copy-text-to-clipboard"
+import { css, html, js, tab } from "../store/editors"
 import { Tutorial } from "../api"
 import { step } from "../store/tutorial"
 import { authed, roleSuper } from "../store/user"
@@ -85,14 +86,16 @@ function addButton() {
     let copyTimer = 0
     const actions = action.cloneNode() as HTMLDivElement
     pre.insertBefore(actions, pre.children[0])
-    const code = pre.childNodes[1] as HTMLPreElement
-    const match = code.className.match(/-(.*)/)
+    const $code = pre.childNodes[1] as HTMLPreElement
+    const match = $code.className.match(/-(.*)/)
     let lang = "html"
     if (match) lang = match[1].toLowerCase()
     actions.innerHTML = `<span class="lang">${lang.toUpperCase()}</span><div><div class="btn copy">复制</div><div class="btn">替换</div></div>`
     const $copy = actions.children[1].children[0] as HTMLDivElement
     const $replace = actions.children[1].children[1] as HTMLDivElement
     $copy.onclick = () => {
+      const content = pre.children[1].textContent
+      copyFn(content ?? "")
       $copy.innerHTML = "已复制"
       clearTimeout(copyTimer)
       copyTimer = setTimeout(() => {