update

src/components/Editors.vue

@@ -68,11 +68,20 @@
     </n-tab-pane>
     <template #suffix>
       <n-flex align="center" class="suffix">
-        <span>{{ username }}</span>
-        <n-button v-if="!authed" @click="handleLogin" secondary type="primary">
+        <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-button v-else @click="handleLogout">退出</n-button>
       </n-flex>
     </template>
   </n-tabs>
@@ -81,9 +90,46 @@
 import { Icon } from "@iconify/vue"
 import Editor from "./Editor.vue"
 import { html, css, js, tab, size, reset } from "../store/editors"
-import { username, authed } from "../store/user"
+import { user, authed, roleNormal } from "../store/user"
 import { loginModal } from "../store/modal"
 import { logout } 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: "dashboard" })
+      break
+    case "logout":
+      handleLogout()
+      break
+  }
+}
 
 function changeTab(name: string) {
   tab.value = name
@@ -99,7 +145,12 @@ function handleLogin() {
 
 async function handleLogout() {
   await logout()
-  username.value = ""
+  user.username = ""
+  user.role = Role.Normal
+}
+
+function submit() {
+  message.error("未实装")
 }
 </script>
 <style scoped>

src/components/Login.vue

@@ -32,7 +32,7 @@
 import { ref } from "vue"
 import { login } from "../api"
 import { loginModal } from "../store/modal"
-import { username } from "../store/user"
+import { user } from "../store/user"
 
 const name = ref("")
 const password = ref("")
@@ -42,7 +42,9 @@ const showMeesage = ref(false)
 async function submit() {
   try {
     const data = await login(name.value, password.value)
-    username.value = data
+    user.username = data.username
+    user.role = data.role
+    user.loaded = true
     loginModal.value = false
   } catch (err) {
     showMeesage.value = true

src/components/Preview.vue

@@ -4,9 +4,6 @@
       <Icon icon="noto:eyes" :width="20"></Icon>
       <n-text class="titleText">预览</n-text>
     </n-flex>
-    <n-flex>
-      <!-- <n-button>提交</n-button> -->
-    </n-flex>
   </n-flex>
   <iframe class="iframe" ref="iframe"></iframe>
 </template>