From 382222314ddcccf2c578438bc2f369e8c8ad9764 Mon Sep 17 00:00:00 2001
From: yuetsh <517252939@qq.com>
Date: Wed, 26 Feb 2025 01:09:48 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E6=9B=BF=E6=8D=A2=E6=8C=89?=
 =?UTF-8?q?=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                    |  2 +-
 public/turtorial/01/README.md | 61 ++++++++++++++++++++++--------
 public/turtorial/02/README.md |  8 +---
 public/turtorial/03/README.md |  1 +
 src/components/Editor.vue     |  2 +-
 src/components/Editors.vue    |  9 +++++
 src/components/Tutorial.vue   | 70 +++++++++++++++++------------------
 7 files changed, 93 insertions(+), 60 deletions(-)

diff --git a/index.html b/index.html
index 93d1191..97158b9 100644
--- a/index.html
+++ b/index.html
@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <link rel="shortcut icon" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>前端开发预览网站</title>
+    <title>前端开发学习平台</title>
     <link rel="stylesheet" href="/style.css" />
     <script>
       window.localStorage.setItem("maxkbMaskTip", true)
diff --git a/public/turtorial/01/README.md b/public/turtorial/01/README.md
index f474ea2..2946b78 100644
--- a/public/turtorial/01/README.md
+++ b/public/turtorial/01/README.md
@@ -1,30 +1,59 @@
-# 测试
+# HTML 基本标签
 
-## 什么是 HTML
+## 标题
+
+h1到h6，一共六级标题。
 
 ```html
-<div>hello</div>
+<h1>标题 1</h1>
+<h2>标题 2</h2>
+<h3>标题 3</h3>
+<h4>标题 4</h4>
+<h5>标题 5</h5>
+<h6>标题 6</h6>
 ```
 
+给六个标题字体颜色换一下，注意：`color` 表示字体颜色。
+
 ```css
-.welcome {
+h1 {
   color: red;
 }
-```
-```js
-console.log("122")
+
+h2 {
+  color: orange;
+}
+
+h3 {
+  color: yellow;
+}
+
+h4 {
+  color: green;
+}
+
+h5 {
+  color: blue;
+}
+
+h6 {
+  color: purple;
+}
 ```
 
-## 什么是 HTML
+## 段落
 
-## 什么是 HTML
+`<p></p>`表示段落
 
-## 什么是 HTML
+```html
+<p>月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。</p>
+```
 
-## 什么是 HTML
+用`font-size`改变字体大小，`line-height`改变行高。注意单位是 px（像素）
 
-## 什么是 HTML
-
-## 什么是 HTML
-
-## 什么是 HTML
+```css
+p {
+  font-size: 24px;
+  line-height: 48px;
+}
+```
\ No newline at end of file
diff --git a/public/turtorial/02/README.md b/public/turtorial/02/README.md
index 4452c6a..d64b021 100644
--- a/public/turtorial/02/README.md
+++ b/public/turtorial/02/README.md
@@ -1,7 +1 @@
-# 什么是 CSS
-
-```css
-.greeting {
-    color: red;
-}
-```
\ No newline at end of file
+未完待续...
\ No newline at end of file
diff --git a/public/turtorial/03/README.md b/public/turtorial/03/README.md
index e69de29..2f50dc0 100644
--- a/public/turtorial/03/README.md
+++ b/public/turtorial/03/README.md
@@ -0,0 +1 @@
+全部结束
\ No newline at end of file
diff --git a/src/components/Editor.vue b/src/components/Editor.vue
index 87c2175..149c90e 100644
--- a/src/components/Editor.vue
+++ b/src/components/Editor.vue
@@ -45,7 +45,7 @@ const lang = computed(() => {
   <Codemirror
     v-model="code"
     indentWithTab
-    :extensions="[styleTheme, lang, githubLight]"
+    :extensions="[EditorView.lineWrapping, styleTheme, lang, githubLight]"
     :tabSize="4"
     :style="{ height: '100%', fontSize: props.fontSize + 'px' }"
   />
diff --git a/src/components/Editors.vue b/src/components/Editors.vue
index 6cd9408..a1043f1 100644
--- a/src/components/Editors.vue
+++ b/src/components/Editors.vue
@@ -66,6 +66,11 @@
         </n-flex>
       </n-flex>
     </n-tab-pane>
+    <template #suffix>
+      <n-flex class="suffix">
+        <!-- <n-button>登录</n-button> -->
+      </n-flex>
+    </template>
   </n-tabs>
 </template>
 <script lang="ts" setup>
@@ -94,4 +99,8 @@ function changeSize(num: number) {
 .label {
   font-size: 16px;
 }
+
+.suffix {
+  margin-right: 20px;
+}
 </style>
diff --git a/src/components/Tutorial.vue b/src/components/Tutorial.vue
index f99b716..1794829 100644
--- a/src/components/Tutorial.vue
+++ b/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>