重新布局，添加教程

src/App.vue

@@ -2,6 +2,7 @@
 import { dateZhCN, zhCN } from "naive-ui"
 import Editors from "./components/Editors.vue"
 import Preview from "./components/Preview.vue"
+import Tutorial from "./components/Tutorial.vue"
 import { useMagicKeys, whenever } from "@vueuse/core"
 
 const { ctrl_s } = useMagicKeys({
@@ -22,14 +23,25 @@ whenever(ctrl_r, () => {})
 </script>
 
 <template>
-  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
-    <n-split :min="0.25" :max="0.75">
-      <template #1>
-        <Editors />
-      </template>
+  <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>
-        <Preview />
+        <n-split direction="vertical">
+          <template #1>
+            <Editors />
+          </template>
+          <template #2>
+            <Preview />
+          </template>
+        </n-split>
       </template>
     </n-split>
   </n-config-provider>
 </template>
+<style scoped>
+.myContainer {
+  height: 100vh;
+  width: 100vw;
+}
+</style>

src/components/Editors.vue

@@ -1,7 +1,8 @@
 <template>
   <n-tabs
-    size="large"
+    style="height: 100%"
     pane-class="pane"
+    size="large"
     :default-value="currentTab"
     type="segment"
     @update:value="changeTab"
@@ -9,7 +10,7 @@
     <n-tab-pane name="html" tab="HTML">
       <template #tab>
         <n-flex align="center">
-          <Icon icon="skill-icons:html" :width="20" :height="20"></Icon>
+          <Icon icon="skill-icons:html" :width="20"></Icon>
           <span>HTML</span>
         </n-flex>
       </template>
@@ -18,7 +19,7 @@
     <n-tab-pane name="css" tab="CSS">
       <template #tab>
         <n-flex align="center">
-          <Icon icon="skill-icons:css" :width="20" :height="20"></Icon>
+          <Icon icon="skill-icons:css" :width="20"></Icon>
           <span>CSS</span>
         </n-flex>
       </template>
@@ -27,7 +28,7 @@
     <n-tab-pane name="js" tab="JavaScript">
       <template #tab>
         <n-flex align="center">
-          <Icon icon="skill-icons:javascript" :width="20" :height="20"></Icon>
+          <Icon icon="skill-icons:javascript" :width="20"></Icon>
           <span>JavaScript</span>
         </n-flex>
       </template>
@@ -36,7 +37,7 @@
     <n-tab-pane name="actions" tab="选项">
       <template #tab>
         <n-flex align="center">
-          <Icon icon="solar:settings-bold" :width="20" :height="20"></Icon>
+          <Icon icon="skill-icons:actix-dark" :width="20"></Icon>
           <span>选项</span>
         </n-flex>
       </template>
@@ -72,7 +73,7 @@
 import { Icon } from "@iconify/vue"
 import Editor from "./Editor.vue"
 import { useStorage } from "@vueuse/core"
-import { html, css, js, reset, size, changeSize } from "../store.ts"
+import { html, css, js, reset, size, changeSize } from "../store"
 
 const currentTab = useStorage("web-tab", "html")
 
@@ -83,7 +84,8 @@ function changeTab(tab: "html" | "css" | "js" | "actions") {
 </script>
 <style scoped>
 .pane {
-  height: calc(100vh - 62px);
+  height: 100%;
+  overflow: scroll;
 }
 .wrapper {
   padding-left: 16px;

src/components/Preview.vue

@@ -1,8 +1,11 @@
 <template>
-  <n-flex align="center" justify="space-between" class="pane">
-    <n-text class="preview">预览</n-text>
+  <n-flex align="center" justify="space-between" class="title">
+    <n-flex align="center">
+      <Icon icon="noto:eyes" :width="20"></Icon>
+      <n-text class="titleText">预览</n-text>
+    </n-flex>
     <n-flex>
-      <n-button>提交</n-button>
+      <!-- <n-button>提交</n-button> -->
     </n-flex>
   </n-flex>
   <iframe class="iframe" ref="iframe"></iframe>
@@ -10,16 +13,16 @@
 
 <script lang="ts" setup>
 import { watchDebounced } from "@vueuse/core"
-import { html, css, js } from "../store.ts"
+import { html, css, js } from "../store"
 import { onMounted, useTemplateRef } from "vue"
+import { Icon } from "@iconify/vue"
 
 const iframe = useTemplateRef<HTMLIFrameElement>("iframe")
 
 function preview() {
   if (!iframe.value) return
   const doc = iframe.value.contentDocument!
-  doc.open()
-  doc.write(`<!DOCTYPE html>
+  const content = `<!DOCTYPE html>
 <html lang="zh-Hans-CN">
   <head>
     <meta charset="UTF-8" />
@@ -33,19 +36,21 @@ function preview() {
     ${html.value}
     <script type="module">${js.value}<\/script>
   </body>
-</html>`)
+</html>`
+  doc.open()
+  doc.write(content)
   doc.close()
 }
 watchDebounced([html, css, js], preview, { debounce: 500, maxWait: 1000 })
 onMounted(preview)
 </script>
 <style scoped>
-.pane {
+.title {
   height: 46px;
   background-color: rgb(247, 247, 250);
   padding: 0 20px;
 }
-.preview {
+.titleText {
   font-size: 16px;
 }
 .iframe {

src/components/Tutorial.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <n-flex align="center" class="title">
+      <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'">
+          <Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
+        </n-button>
+        <n-button text @click="next" :disabled="end">
+          <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
+        </n-button>
+      </n-flex>
+    </n-flex>
+    <div class="markdown-body" v-html="marked(content)"></div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { Icon } from "@iconify/vue"
+import { step, prev, next, content } from "../store"
+import { onMounted, ref, watch } from "vue"
+import { marked } from "marked"
+
+const end = ref(false)
+
+async function getContent() {
+  const res = await fetch(`/turtorial/${step.value}/README.md`)
+  const data = await res.text()
+  if (!!data) {
+    content.value = data
+    end.value = false
+  } else {
+    end.value = true
+    content.value = ""
+  }
+}
+
+onMounted(getContent)
+watch(step, getContent)
+</script>
+<style scoped>
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.title {
+  height: 46px;
+  background-color: rgb(247, 247, 250);
+  padding: 0 20px;
+  flex-shrink: 0;
+}
+.preview {
+  font-size: 16px;
+}
+.markdown-body {
+  padding: 16px;
+  box-sizing: border-box;
+  overflow: scroll;
+}
+</style>

src/main.ts

@@ -1,6 +1,7 @@
 import { createApp } from "vue"
 import { create } from "naive-ui"
 import "normalize.css"
+import "github-markdown-css/github-markdown-light.css"
 import App from "./App.vue"
 
 const app = createApp(App)

src/store.ts

@@ -23,3 +23,14 @@ export const size = useStorage("web-fontsize", 24)
 export function changeSize(num: number) {
   size.value = num
 }
+
+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")
+}
+export function next() {
+  let num = parseInt(step.value) + 1
+  step.value = num.toString().padStart(2, "0")
+}

src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />