update

src/components/Corner.vue

@@ -0,0 +1,80 @@
+<template>
+  <n-flex align="center" class="corner">
+    <template v-if="user.loaded && authed">
+      <n-button type="primary" secondary @click="submit">提交</n-button>
+      <n-dropdown :options="menu" @select="clickMenu">
+        <n-button>{{ user.username }}</n-button>
+      </n-dropdown>
+    </template>
+    <n-button
+      v-if="user.loaded && !authed"
+      @click="handleLogin"
+      secondary
+      type="primary"
+    >
+      登录
+    </n-button>
+  </n-flex>
+</template>
+<script lang="ts" setup>
+import { computed, h } from "vue"
+import { useMessage } from "naive-ui"
+import { Icon } from "@iconify/vue"
+import { user, authed, roleNormal } from "../store/user"
+import { loginModal } from "../store/modal"
+import { Account } from "../api"
+import { Role } from "../utils/type"
+import { router } from "../router"
+
+const message = useMessage()
+
+const menu = computed(() => [
+  {
+    label: "后台",
+    key: "dashboard",
+    show: !roleNormal.value,
+    icon: () =>
+      h(Icon, {
+        icon: "streamline-emojis:robot-face-1",
+      }),
+  },
+  {
+    label: "退出",
+    key: "logout",
+    icon: () =>
+      h(Icon, {
+        icon: "streamline-emojis:hot-beverage-2",
+      }),
+  },
+])
+
+function clickMenu(name: string) {
+  switch (name) {
+    case "dashboard":
+      router.push({ name: "tutorial" })
+      break
+    case "logout":
+      handleLogout()
+      break
+  }
+}
+
+function handleLogin() {
+  loginModal.value = true
+}
+
+async function handleLogout() {
+  await Account.logout()
+  user.username = ""
+  user.role = Role.Normal
+}
+
+function submit() {
+  message.error("未实装")
+}
+</script>
+<style scoped>
+.corner {
+  margin-right: 20px;
+}
+</style>

src/components/Editors.vue

@@ -67,69 +67,15 @@
       </n-flex>
     </n-tab-pane>
     <template #suffix>
-      <n-flex align="center" class="suffix">
-        <template v-if="user.loaded && authed">
-          <n-button type="primary" secondary @click="submit">提交</n-button>
-          <n-dropdown :options="menu" @select="clickMenu">
-            <n-button>{{ user.username }}</n-button>
-          </n-dropdown>
-        </template>
-        <n-button
-          v-if="user.loaded && !authed"
-          @click="handleLogin"
-          secondary
-          type="primary"
-        >
-          登录
-        </n-button>
-      </n-flex>
+      <Corner />
     </template>
   </n-tabs>
 </template>
 <script lang="ts" setup>
 import { Icon } from "@iconify/vue"
 import Editor from "./Editor.vue"
+import Corner from "./Corner.vue"
 import { html, css, js, tab, size, reset } from "../store/editors"
-import { user, authed, roleNormal } from "../store/user"
-import { loginModal } from "../store/modal"
-import { Account } from "../api"
-import { Role } from "../utils/type"
-import { router } from "../router"
-import { computed, h } from "vue"
-import { useMessage } from "naive-ui"
-
-const message = useMessage()
-
-const menu = computed(() => [
-  {
-    label: "后台",
-    key: "dashboard",
-    show: !roleNormal.value,
-    icon: () =>
-      h(Icon, {
-        icon: "streamline-emojis:robot-face-1",
-      }),
-  },
-  {
-    label: "退出",
-    key: "logout",
-    icon: () =>
-      h(Icon, {
-        icon: "streamline-emojis:hot-beverage-2",
-      }),
-  },
-])
-
-function clickMenu(name: string) {
-  switch (name) {
-    case "dashboard":
-      router.push({ name: "tutorial" })
-      break
-    case "logout":
-      handleLogout()
-      break
-  }
-}
 
 function changeTab(name: string) {
   tab.value = name
@@ -138,20 +84,6 @@ function changeTab(name: string) {
 function changeSize(num: number) {
   size.value = num
 }
-
-function handleLogin() {
-  loginModal.value = true
-}
-
-async function handleLogout() {
-  await Account.logout()
-  user.username = ""
-  user.role = Role.Normal
-}
-
-function submit() {
-  message.error("未实装")
-}
 </script>
 <style scoped>
 .pane {
@@ -166,8 +98,4 @@ function submit() {
 .label {
   font-size: 16px;
 }
-
-.suffix {
-  margin-right: 20px;
-}
 </style>

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="prevDisabled">
+        <n-button text @click="prev" v-if="!hideNav" :disabled="prevDisabled">
           <Icon :width="24" icon="pepicons-pencil:arrow-left"></Icon>
         </n-button>
-        <n-button text @click="next" :disabled="nextDisabled">
+        <n-button text @click="next" v-if="!hideNav" :disabled="nextDisabled">
           <Icon :width="24" icon="pepicons-pencil:arrow-right"></Icon>
         </n-button>
       </n-flex>
@@ -29,10 +29,13 @@ const displays = ref<number[]>([])
 const content = ref("")
 const $content = useTemplateRef("$content")
 
+const hideNav = computed(() => displays.value.length <= 1)
+
 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