从服务器获取教程

components.d.ts

@@ -15,7 +15,6 @@ declare module 'vue' {
     NButton: typeof import('naive-ui')['NButton']
     NCard: typeof import('naive-ui')['NCard']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDialog: typeof import('naive-ui')['NDialog']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDropdown: typeof import('naive-ui')['NDropdown']
     NFlex: typeof import('naive-ui')['NFlex']
@@ -23,14 +22,11 @@ declare module 'vue' {
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']
-    NIcon: typeof import('naive-ui')['NIcon']
     NInput: typeof import('naive-ui')['NInput']
-    NInputNu: typeof import('naive-ui')['NInputNu']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NMessageProvider: typeof import('naive-ui')['NMessageProvider']
     NModal: typeof import('naive-ui')['NModal']
     NModalProvider: typeof import('naive-ui')['NModalProvider']
-    NS: typeof import('naive-ui')['NS']
     NSplit: typeof import('naive-ui')['NSplit']
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTabPane: typeof import('naive-ui')['NTabPane']

public/turtorial/01/README.md

@@ -1,126 +0,0 @@
-# HTML 基本标签 —— 标题和段落
-
-> [!NOTE]
-> 这是测试的版本
-
-## 标题
-
-`h1` 到 `h6`，一共六级标题。
-
-```html
-<h1>标题 1</h1>
-<h2>标题 2</h2>
-<h3>标题 3</h3>
-<h4>标题 4</h4>
-<h5>标题 5</h5>
-<h6>标题 6</h6>
-```
-
-给六个标题字体颜色换一下，注意：`color` 表示**字体颜色**。
-
-```css
-h1 {
-    color: red;
-}
-
-h2 {
-    color: orange;
-}
-
-h3 {
-    color: yellow;
-}
-
-h4 {
-    color: green;
-}
-
-h5 {
-    color: blue;
-}
-
-h6 {
-    color: purple;
-}
-```
-
-颜色的表示可以是英文，也可以是十六进制（注意前面有个井号），也可以是 RGB。
-
-比如
-
-```css
-h1 {
-    color: #333333;
-}
-h2 {
-    color: rgb(163, 174, 46);
-}
-```
-
-## 段落
-
-`p` 表示段落
-
-```html
-<p>
-  月光如流水一般，静静地泻在这一片叶子和花上。薄薄的青雾浮起在荷塘里。叶子和花仿佛在牛乳中洗过一样；又像笼着轻纱的梦。虽然是满月，天上却有一层淡淡的云，所以不能朗照；但我以为这恰是到了好处——酣眠固不可少，小睡也别有风味的。月光是隔了树照过来的，高处丛生的灌木，落下参差的斑驳的黑影，峭楞楞如鬼一般；弯弯的杨柳的稀疏的倩影，却又像是画在荷叶上。塘中的月色并不均匀；但光与影有着和谐的旋律，如梵婀玲上奏着的名曲。
-</p>
-```
-
-用 `font-size` 改变字体大小，`line-height` 改变行高。注意单位是 px（像素）
-
-```css
-p {
-    font-size: 24px;
-    line-height: 48px;
-    text-indent: 2em;
-}
-```
-
-`text-indent: 2em;` 表示首行缩进 2 个字符（单位不是 px，而是 em）
-
-## 任务
-
-标题和段落的简单美化。
-
-### 要求
-
-完成下面《白鹭》散文（节选）的排版：
-
-- 标题：使用 `h1` 标签，设置字号 32px，颜色黑色;
-- 每个段落：设置字号 28px，颜色（#333），行间距 40px，首行缩进两字符；
-
-### 文字材料
-
-白鹭
-
-白鹭是一首精巧的诗。
-
-色素的配合，身段的大小，一切都很适宜。
-
-白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。
-
-然而白鹭却因为它的常见，而被人忘却了它的美。
-
-那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。
-
-### 效果
-```html preview
-<h1 style="font-size: 32px; color: black;">白鹭</h1>
-<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹭是一首精巧的诗。</p>
-<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">色素的配合，身段的大小，一切都很适宜。</p>
-<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">白鹤太大而嫌生硬，即如粉红的朱鹭或灰色的苍鹭，也觉得大了一些，而且太不寻常了。</p>
-<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">然而白鹭却因为它的常见，而被人忘却了它的美。</p>
-<p style="font-size: 28px; color: #333; line-height: 40px; text-indent: 2em">那雪白的蓑毛，那全身的流线型结构，那铁色的长喙，那青色的脚，增之一分则嫌长，减之一分则嫌短，素之一忽则嫌白，黛之一忽则嫌黑。</p>
-```
-
-## 总结
-### HTML
-标题：h1 到 h6  
-段落：p
-
-### CSS
-color 字体颜色  
-font-size 字体大小  
-line-height 行间距  
-text-indent: 2em; 表示首行缩进2字符  

public/turtorial/02/README.md

@@ -1 +0,0 @@
-未完待续...

public/turtorial/03/README.md

@@ -1 +0,0 @@
-全部结束

src/api.ts

@@ -73,4 +73,9 @@ export class Tutorial {
     const res = await http.get(`/tutorial/${display}`)
     return res.data
   }
+
+  static async listDisplay() {
+    const res = await http.get("/tutorial/display")
+    return res.data
+  }
 }

src/components/Tutorial.vue

@@ -4,10 +4,10 @@
       <n-flex align="center">
         <Icon icon="twemoji:open-book" :width="20"></Icon>
         <n-text class="preview">教程(测试版)</n-text>
-        <n-button text @click="prev" :disabled="step === '01'">
+        <n-button text @click="prev" :disabled="prevDisabled">
           <Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
         </n-button>
-        <n-button text @click="next" :disabled="last">
+        <n-button text @click="next" :disabled="nextDisabled">
           <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
         </n-button>
       </n-flex>
@@ -18,30 +18,43 @@
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
 import { html, css, js, tab } from "../store/editors"
-import { onMounted, ref, useTemplateRef, watch } from "vue"
+import { computed, onMounted, ref, useTemplateRef, watch } from "vue"
 import { marked } from "marked"
 import { useStorage } from "@vueuse/core"
+import { Tutorial } from "../api"
 
-const step = useStorage("web-turtorial-step", "01")
+const step = useStorage("web-turtorial-step", 1)
-const last = ref(false)
+const displays = ref<number[]>([])
 const content = ref("")
 const $content = useTemplateRef("$content")
 
+const prevDisabled = computed(() => {
+  const i = displays.value.indexOf(step.value)
+  return i === 0
+})
+const nextDisabled = computed(() => {
+  const i = displays.value.indexOf(step.value)
+  return i === displays.value.length - 1
+})
+
 function prev() {
-  let num = parseInt(step.value) - 1
+  const i = displays.value.indexOf(step.value)
-  step.value = num.toString().padStart(2, "0")
+  step.value = displays.value[i - 1]
 }
 
 function next() {
-  let num = parseInt(step.value) + 1
+  const i = displays.value.indexOf(step.value)
-  step.value = num.toString().padStart(2, "0")
+  step.value = displays.value[i + 1]
 }
 
 async function getContent() {
-  const res = await fetch(`/turtorial/${step.value}/README.md`)
+  const res = await Tutorial.listDisplay()
-  const data = await res.text()
+  displays.value = res
-  content.value = await marked.parse(data, { async: true })
+  if (!displays.value.includes(step.value)) {
-  last.value = data == "全部结束"
+    step.value = displays.value[0]
+  }
+  const data = await Tutorial.get(step.value)
+  content.value = await marked.parse(data.content, { async: true })
 }
 
 // 用 js 来写的，可以换成 vue 的方式