增加替换按钮

src/components/Tutorial.vue

@@ -40,39 +40,36 @@ function next() {
 async function getContent() {
   const res = await fetch(`/turtorial/${step.value}/README.md`)
   const data = await res.text()
-  if (!!data) {
-    content.value = await marked.parse(data, { async: true })
-    last.value = false
-  } else {
-    content.value = ""
-    last.value = true
-  }
+  content.value = await marked.parse(data, { async: true })
+  last.value = data == "全部结束"
 }
 
 // 用 js 来写的，可以换成 vue 的方式
-function addCopyButton() {
-  const div = document.createElement("div")
-  div.className = "my-action-btn"
+function addButton() {
+  const action = document.createElement("div")
+  action.className = "codeblock-action"
   const pres = $content.value!.querySelectorAll("pre")
   pres.forEach((pre) => {
     let timer = 0
-    const copy = div.cloneNode(true) as HTMLDivElement
-    pre.appendChild(copy)
-    copy.onclick = () => {
-      // 功能
-      const outer = pre.childNodes[0] as HTMLPreElement
-      const match = outer.className.match(/-(.*)/)
-      let lang = "html"
-      if (match) lang = match[1].toLowerCase()
+    const copy = action.cloneNode() as HTMLDivElement
+    pre.insertBefore(copy, pre.children[0])
+    const code = pre.childNodes[1] as HTMLPreElement
+    const match = code.className.match(/-(.*)/)
+    let lang = "html"
+    if (match) lang = match[1].toLowerCase()
+    copy.innerHTML = `<span class="lang">${lang}</span><div class="btn">替换<div>`
+    const btn = copy.children[1] as HTMLDivElement
+    btn.onclick = () => {
       tab.value = lang
-      if (lang === "html") html.value = pre.textContent
-      if (lang === "css") css.value = pre.textContent
-      if (lang === "js") js.value = pre.textContent
+      const content = pre.children[1].textContent
+      if (lang === "html") html.value = content
+      if (lang === "css") css.value = content
+      if (lang === "js") js.value = content
       // 样式
-      copy.classList.add("click")
+      btn.innerHTML = "已替换"
       clearTimeout(timer)
       timer = setTimeout(() => {
-        copy.classList.remove("click")
+        btn.innerHTML = "替换"
       }, 1000)
     }
   })
@@ -80,7 +77,7 @@ function addCopyButton() {
 
 async function render() {
   await getContent()
-  addCopyButton()
+  addButton()
 }
 
 onMounted(render)
@@ -116,13 +113,11 @@ watch(step, render)
   position: relative;
 }
 
-.my-action-btn {
-  position: absolute;
-  top: 0;
-  right: 0;
-  padding: 1rem;
-  cursor: pointer;
-  border-radius: 0.4rem;
+.markdown-body pre code {
+  text-wrap: auto;
+}
+
+.codeblock-action {
   font-family:
     v-sans,
     system-ui,
@@ -135,11 +130,16 @@ watch(step, render)
     "Segoe UI Symbol";
 }
 
-.my-action-btn::before {
-  content: "替换";
+.codeblock-action .lang {
+  font-size: 1.2rem;
 }
 
-.my-action-btn.click::before {
-  content: "已替换";
+.codeblock-action .btn {
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 1rem;
+  cursor: pointer;
+  border-radius: 0.4rem;
 }
 </style>