update

src/App.vue

@@ -30,7 +30,9 @@ whenever(ctrl_r, () => {})
     inline-theme-disabled
   >
     <n-split :default-size="1 / 3" min="300px" max="800px">
-      <template #1><Tutorial /></template>
+      <template #1>
+        <Tutorial />
+      </template>
       <template #2>
         <n-split direction="vertical" min="200px">
           <template #1>

src/components/Editors.vue

@@ -1,46 +1,46 @@
 <template>
   <n-tabs
-    style="height: 100%"
-    pane-class="pane"
     :value="tab"
+    pane-class="pane"
+    style="height: 100%"
     type="card"
     @update:value="changeTab"
   >
     <n-tab-pane name="html" tab="HTML">
       <template #tab>
         <n-flex align="center">
-          <Icon icon="skill-icons:html" :width="20"></Icon>
+          <Icon :width="20" icon="skill-icons:html"></Icon>
           <span>HTML</span>
         </n-flex>
       </template>
-      <Editor language="html" :font-size="size" v-model:value="html" />
+      <Editor v-model:value="html" :font-size="size" language="html" />
     </n-tab-pane>
     <n-tab-pane name="css" tab="CSS">
       <template #tab>
         <n-flex align="center">
-          <Icon icon="skill-icons:css" :width="20"></Icon>
+          <Icon :width="20" icon="skill-icons:css"></Icon>
           <span>CSS</span>
         </n-flex>
       </template>
-      <Editor language="css" :font-size="size" v-model:value="css" />
+      <Editor v-model:value="css" :font-size="size" language="css" />
     </n-tab-pane>
     <n-tab-pane name="js" tab="JS">
       <template #tab>
         <n-flex align="center">
-          <Icon icon="skill-icons:javascript" :width="20"></Icon>
+          <Icon :width="20" icon="skill-icons:javascript"></Icon>
           <span>JS</span>
         </n-flex>
       </template>
-      <Editor language="js" :font-size="size" v-model:value="js" />
+      <Editor v-model:value="js" :font-size="size" language="js" />
     </n-tab-pane>
     <n-tab-pane name="actions" tab="选项">
       <template #tab>
         <n-flex align="center">
-          <Icon icon="skill-icons:actix-dark" :width="20"></Icon>
+          <Icon :width="20" icon="skill-icons:actix-dark"></Icon>
           <span>选项</span>
         </n-flex>
       </template>
-      <n-flex vertical class="wrapper">
+      <n-flex class="wrapper" vertical>
         <n-flex align="center">
           <span class="label">重置</span>
           <n-button @click="reset('html')">HTML</n-button>
@@ -51,10 +51,10 @@
           <span class="label">字号</span>
           <n-flex align="center">
             <span :style="{ 'font-size': size + 'px' }">{{ size }}</span>
-            <n-button @click="changeSize(size - 2)" :disabled="size === 20">
+            <n-button :disabled="size === 20" @click="changeSize(size - 2)">
               调小
             </n-button>
-            <n-button @click="changeSize(size + 2)" :disabled="size === 40">
+            <n-button :disabled="size === 40" @click="changeSize(size + 2)">
               调大
             </n-button>
           </n-flex>
@@ -71,11 +71,12 @@
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
 import Editor from "./Editor.vue"
-import { html, css, js, reset, tab, size } from "../store"
+import { css, html, js, reset, size, tab } from "../store"
 
 function changeTab(name: string) {
   tab.value = name
 }
+
 function changeSize(num: number) {
   size.value = num
 }
@@ -85,9 +86,11 @@ function changeSize(num: number) {
   height: 100%;
   overflow: auto;
 }
+
 .wrapper {
   padding-left: 16px;
 }
+
 .label {
   font-size: 16px;
 }

src/components/Preview.vue

@@ -13,7 +13,7 @@
 
 <script lang="ts" setup>
 import { watchDebounced } from "@vueuse/core"
-import { html, css, js } from "../store"
+import { css, html, js } from "../store"
 import { onMounted, useTemplateRef } from "vue"
 import { Icon } from "@iconify/vue"
 
@@ -41,6 +41,7 @@ function preview() {
   doc.write(content)
   doc.close()
 }
+
 watchDebounced([html, css, js], preview, { debounce: 500, maxWait: 1000 })
 onMounted(preview)
 </script>
@@ -51,9 +52,11 @@ onMounted(preview)
   border-bottom: 1px solid rgb(239, 239, 245);
   box-sizing: border-box;
 }
+
 .titleText {
   font-size: 16px;
 }
+
 .iframe {
   width: 100%;
   height: 100%;

src/components/Tutorial.vue

@@ -17,7 +17,7 @@
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { tab, html, js, css } from "../store"
+import { css, html, js, tab } from "../store"
 import { onMounted, ref, useTemplateRef, watch } from "vue"
 import { marked } from "marked"
 import { useStorage } from "@vueuse/core"
@@ -41,8 +41,7 @@ async function getContent() {
   const res = await fetch(`/turtorial/${step.value}/README.md`)
   const data = await res.text()
   if (!!data) {
-    const html = await marked.parse(data, { async: true })
+    content.value = await marked.parse(data, { async: true })
-    content.value = html
     last.value = false
   } else {
     content.value = ""
@@ -93,6 +92,7 @@ watch(step, render)
   flex-direction: column;
   height: 100%;
 }
+
 .title {
   height: 43px;
   padding: 0 20px;
@@ -100,9 +100,11 @@ watch(step, render)
   border-bottom: 1px solid rgb(239, 239, 245);
   box-sizing: border-box;
 }
+
 .preview {
   font-size: 16px;
 }
+
 .markdown-body {
   padding: 16px;
   box-sizing: border-box;
@@ -113,6 +115,7 @@ watch(step, render)
 .markdown-body pre {
   position: relative;
 }
+
 .my-action-btn {
   position: absolute;
   top: 0;
@@ -121,9 +124,11 @@ watch(step, render)
   cursor: pointer;
   border-radius: 0.4rem;
 }
+
 .my-action-btn::before {
   content: "替换";
 }
+
 .my-action-btn.click::before {
   content: "已替换";
 }

src/main.ts

@@ -1,8 +1,11 @@
 import { createApp } from "vue"
 import { create } from "naive-ui"
 import { marked } from "marked"
+//@ts-ignore
 import "normalize.css"
+//@ts-ignore
 import "github-markdown-css/github-markdown-light.css"
+//@ts-ignore
 import "highlight.js/styles/github.min.css"
 import App from "./App.vue"