fix

src/App.vue

@@ -23,7 +23,12 @@ whenever(ctrl_r, () => {})
 </script>
 
 <template>
-  <n-config-provider class="myContainer" :locale="zhCN" :date-locale="dateZhCN" inline-theme-disabled>
+  <n-config-provider
+    class="myContainer"
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    inline-theme-disabled
+  >
     <n-split :default-size="1 / 3" min="300px" max="700px">
       <template #1><Tutorial /></template>
       <template #2>

src/components/Tutorial.vue

@@ -12,31 +12,29 @@
         </n-button>
       </n-flex>
     </n-flex>
-    <div class="markdown-body" v-html="markdownContent"></div>
+    <div class="markdown-body" v-html="content"></div>
   </div>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { step, prev, next, content } from "../store"
+import { step, prev, next } from "../store"
 import { onMounted, ref, shallowRef, watch } from "vue"
 import { marked } from "marked"
 import { markedHighlight } from "marked-highlight"
 import hljs from "highlight.js"
 
 const end = ref(false)
-const markdownContent = shallowRef("")
+const content = shallowRef("")
 
 async function getContent() {
   const res = await fetch(`/turtorial/${step.value}/README.md`)
   const data = await res.text()
   if (!!data) {
-    content.value = data
+    const html = await marked.parse(data, { async: true })
-    const html = await marked.parse(content.value, { async: true })
+    content.value = html
-    markdownContent.value = html
     end.value = false
   } else {
     end.value = true
-    content.value = ""
   }
 }
 

src/store.ts

@@ -25,7 +25,6 @@ export function changeSize(num: number) {
 }
 
 export const step = useStorage("web-turtorial-step", "01")
-export const content = useStorage("web-turtorial-content", "")
 export function prev() {
   let num = parseInt(step.value) - 1
   step.value = num.toString().padStart(2, "0")