update

src/App.vue

@@ -1,30 +1,15 @@
 <script setup lang="ts">
 import { dateZhCN, zhCN } from "naive-ui"
-import { useMagicKeys, whenever } from "@vueuse/core"
 import Login from "./components/Login.vue"
 import { onMounted, watch } from "vue"
 import { getMyProfile } from "./api"
-import { authed, username } from "./store/user"
-
-const { ctrl_s } = useMagicKeys({
-  passive: false,
-  onEventFired(e) {
-    if (e.ctrlKey && e.key === "s" && e.type === "keydown") e.preventDefault()
-  },
-})
-
-const { ctrl_r } = useMagicKeys({
-  passive: false,
-  onEventFired(e) {
-    if (e.ctrlKey && e.key === "r" && e.type === "keydown") e.preventDefault()
-  },
-})
-whenever(ctrl_s, () => {})
-whenever(ctrl_r, () => {})
+import { authed, user } from "./store/user"
 
 onMounted(async () => {
   const data = await getMyProfile()
-  username.value = data
+  user.loaded = true
+  user.username = data.username
+  user.role = data.role
 })
 
 watch(authed, (v) => {
@@ -39,8 +24,10 @@ watch(authed, (v) => {
 <template>
   <n-config-provider class="myContainer" :locale="zhCN" :date-locale="dateZhCN">
     <n-modal-provider>
-      <router-view></router-view>
-      <Login />
+      <n-message-provider>
+        <router-view></router-view>
+        <Login />
+      </n-message-provider>
     </n-modal-provider>
   </n-config-provider>
 </template>

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>

src/main.ts

@@ -11,7 +11,7 @@ import { marked } from "marked"
 import alert from "marked-alert"
 import { markedHighlight } from "marked-highlight"
 import preview from "marked-code-preview"
-import { alertVariants } from "./utils"
+import { alertVariants } from "./utils/const"
 
 import hljs from "highlight.js/lib/core"
 import xml from "highlight.js/lib/languages/xml"

src/pages/Admin.vue

@@ -1 +0,0 @@
-<template>秘密花园</template>

src/pages/Dashboard.vue

@@ -0,0 +1 @@
+<template>秘密花园</template>

src/pages/Home.vue

@@ -1,22 +1,39 @@
 <template>
-    <n-split :default-size="1 / 3" min="300px" max="800px">
-      <template #1>
-        <Tutorial />
-      </template>
-      <template #2>
-        <n-split direction="vertical" min="200px">
-          <template #1>
-            <Editors />
-          </template>
-          <template #2>
-            <Preview />
-          </template>
-        </n-split>
-      </template>
-    </n-split>
+  <n-split :default-size="1 / 3" min="300px" max="800px">
+    <template #1>
+      <Tutorial />
+    </template>
+    <template #2>
+      <n-split direction="vertical" min="200px">
+        <template #1>
+          <Editors />
+        </template>
+        <template #2>
+          <Preview />
+        </template>
+      </n-split>
+    </template>
+  </n-split>
 </template>
 <script lang="ts" setup>
+import { useMagicKeys, whenever } from "@vueuse/core"
 import Editors from "../components/Editors.vue"
 import Preview from "../components/Preview.vue"
 import Tutorial from "../components/Tutorial.vue"
-</script>
+
+const { ctrl_s } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.ctrlKey && e.key === "s" && e.type === "keydown") e.preventDefault()
+  },
+})
+
+const { ctrl_r } = useMagicKeys({
+  passive: false,
+  onEventFired(e) {
+    if (e.ctrlKey && e.key === "r" && e.type === "keydown") e.preventDefault()
+  },
+})
+whenever(ctrl_s, () => {})
+whenever(ctrl_r, () => {})
+</script>

src/router.ts

@@ -2,15 +2,14 @@ import { createWebHistory, createRouter } from "vue-router"
 import { loginModal } from "./store/modal"
 
 import Home from "./pages/Home.vue"
-import Protected from "./pages/Protected.vue"
 
 const routes = [
   { path: "/", component: Home },
   {
-    path: "/protected",
-    name: "protected",
-    component: Protected,
-    meta: { requiresAuth: true },
+    path: "/dashboard",
+    name: "dashboard",
+    component: () => import("./pages/Dashboard.vue"),
+    meta: { auth: true },
   },
 ]
 
@@ -21,10 +20,10 @@ export const router = createRouter({
 
 router.beforeEach((to, from, next) => {
   const isLoggedIn = localStorage.getItem("web-isloggedin") === "true"
-  if (to.meta.requiresAuth && !isLoggedIn) {
+  if (to.meta.auth && !isLoggedIn) {
     loginModal.value = true
     next(false)
   } else {
-    next() // 允许访问
+    next()
   }
 })

src/store/modal.ts

@@ -1,3 +1,3 @@
-import { ref } from "vue";
+import { ref } from "vue"
 
-export const loginModal = ref(false)
+export const loginModal = ref(false)

src/store/user.ts

@@ -1,4 +1,12 @@
-import { computed, ref } from "vue"
+import { computed, reactive } from "vue"
+import { Role } from "../utils/type"
 
-export const username = ref("")
-export const authed = computed(() => !!username.value)
+export const user = reactive({
+  loaded: false,
+  username: "",
+  role: Role.Normal,
+})
+export const authed = computed(() => !!user.username)
+export const roleNormal = computed(() => user.role === Role.Normal)
+export const roleAdmin = computed(() => user.role === Role.Admin)
+export const roleSuper = computed(() => user.role !== Role.Super)

src/utils/type.ts

@@ -0,0 +1,5 @@
+export enum Role {
+  Super = "super",
+  Admin = "admin",
+  Normal = "normal",
+}