添加教程隐藏

src/components/Corner.vue

@@ -1,5 +1,6 @@
 <template>
   <n-flex align="center" class="corner">
+    <n-button secondary v-if="!show" @click="showTutorial">教程</n-button>
     <template v-if="user.loaded && authed">
       <n-button type="primary" secondary @click="submit">提交</n-button>
       <n-dropdown :options="menu" @select="clickMenu">
@@ -20,9 +21,9 @@
 import { computed, h } from "vue"
 import { useMessage } from "naive-ui"
 import { Icon } from "@iconify/vue"
-import { user, authed, roleNormal, roleSuper } from "../store/user"
+import { authed, roleNormal, roleSuper, user } from "../store/user"
 import { loginModal } from "../store/modal"
-import { step } from "../store/tutorial"
+import { show, step, tutorialSize } from "../store/tutorial"
 import { Account } from "../api"
 import { Role } from "../utils/type"
 import { router } from "../router"
@@ -59,6 +60,11 @@ const menu = computed(() => [
   },
 ])
 
+function showTutorial() {
+  show.value = true
+  tutorialSize.value = 2 / 5
+}
+
 function clickMenu(name: string) {
   switch (name) {
     case "dashboard":

src/components/Login.vue

@@ -14,6 +14,7 @@
           type="password"
           v-model:value="password"
           name="password"
+          @change="submit"
         ></n-input>
       </n-form-item>
       <n-alert

src/components/Tutorial.vue

@@ -11,20 +11,23 @@
           <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
         </n-button>
       </n-flex>
-      <n-button
+      <n-flex>
-        v-if="authed && roleSuper"
+        <n-button
-        quaternary
+          v-if="authed && roleSuper"
-        @click="$router.push({ name: 'tutorial', params: { display: step } })"
+          quaternary
-      >
+          @click="$router.push({ name: 'tutorial', params: { display: step } })"
-        修改
+        >
-      </n-button>
+          编辑
+        </n-button>
+        <n-button quaternary @click="$emit('hide')">隐藏</n-button>
+      </n-flex>
     </n-flex>
     <div class="markdown-body" v-html="content" ref="$content"></div>
   </div>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
-import { html, css, js, tab } from "../store/editors"
+import { css, html, js, tab } from "../store/editors"
 import { computed, onMounted, ref, useTemplateRef, watch } from "vue"
 import { marked } from "marked"
 import { Tutorial } from "../api"
@@ -35,6 +38,8 @@ const displays = ref<number[]>([])
 const content = ref("")
 const $content = useTemplateRef("$content")
 
+defineEmits(["hide"])
+
 const hideNav = computed(() => displays.value.length <= 1)
 
 const prevDisabled = computed(() => {
@@ -58,8 +63,7 @@ function next() {
 }
 
 async function getContent() {
-  const res = await Tutorial.listDisplay()
+  displays.value = await Tutorial.listDisplay()
-  displays.value = res
   if (!displays.value.length) {
     content.value = "暂无教程"
     return

src/pages/Home.vue

@@ -1,7 +1,12 @@
 <template>
-  <n-split :default-size="2 / 5" min="300px" max="800px">
+  <n-split
+    :size="tutorialSize"
+    @update-size="changeSize"
+    min="400px"
+    max="900px"
+  >
     <template #1>
-      <Tutorial />
+      <Tutorial @hide="hide" />
     </template>
     <template #2>
       <n-split direction="vertical" min="200px">
@@ -20,6 +25,7 @@ import { useMagicKeys, whenever } from "@vueuse/core"
 import Editors from "../components/Editors.vue"
 import Preview from "../components/Preview.vue"
 import Tutorial from "../components/Tutorial.vue"
+import { show, tutorialSize } from "../store/tutorial"
 
 const { ctrl_s } = useMagicKeys({
   passive: false,
@@ -34,6 +40,17 @@ const { ctrl_r } = useMagicKeys({
     if (e.ctrlKey && e.key === "r" && e.type === "keydown") e.preventDefault()
   },
 })
+
+function changeSize(n: number) {
+  tutorialSize.value = n
+  if (n > 0) show.value = true
+}
+
+function hide() {
+  tutorialSize.value = 0
+  show.value = false
+}
+
 whenever(ctrl_s, () => {})
 whenever(ctrl_r, () => {})
 </script>

src/store/tutorial.ts

@@ -1,4 +1,8 @@
+import { ref } from "vue"
 import { useStorage } from "@vueuse/core"
 import { STORAGE_KEY } from "../utils/const"
 
 export const step = useStorage(STORAGE_KEY.STEP, 1)
+
+export const show = ref(true)
+export const tutorialSize = ref(2 / 5)