update

src/App.vue

@@ -4,6 +4,7 @@ import Login from "./components/Login.vue"
 import { onMounted, watch } from "vue"
 import { Account } from "./api"
 import { authed, user } from "./store/user"
+import { STORAGE_KEY } from "./utils/const"
 
 onMounted(async () => {
   const data = await Account.getMyProfile()
@@ -14,9 +15,9 @@ onMounted(async () => {
 
 watch(authed, (v) => {
   if (v) {
-    localStorage.setItem("web-isloggedin", "true")
+    localStorage.setItem(STORAGE_KEY.LOGIN, "true")
   } else {
-    localStorage.removeItem("web-isloggedin")
+    localStorage.removeItem(STORAGE_KEY.LOGIN)
   }
 })
 </script>

src/api.ts

@@ -1,6 +1,7 @@
 import axios from "axios"
 import { router } from "./router"
 import type { TutorialIn } from "./utils/type"
+import { STORAGE_KEY } from "./utils/const"
 
 const http = axios.create({
   baseURL:
@@ -20,8 +21,7 @@ http.interceptors.response.use(
     if (err.response) {
       switch (err.response.status) {
         case 401: // 未授权
-          localStorage.removeItem("web-isloggedin")
-          alert("未登录")
+          localStorage.removeItem(STORAGE_KEY.LOGIN)
           router.push("/")
           break
         case 403: // 禁止访问

src/components/Login.vue

@@ -20,7 +20,7 @@
         type="error"
         v-if="showMeesage"
         class="message"
-        title="登录失败"
+        title="登录失败，请检查用户名和密码"
       ></n-alert>
       <n-flex>
         <n-button block @click="submit" type="primary">登录</n-button>

src/components/Tutorial.vue

@@ -22,8 +22,9 @@ import { computed, onMounted, ref, useTemplateRef, watch } from "vue"
 import { marked } from "marked"
 import { useStorage } from "@vueuse/core"
 import { Tutorial } from "../api"
+import { STORAGE_KEY } from "../utils/const"
 
-const step = useStorage("web-turtorial-step", 1)
+const step = useStorage(STORAGE_KEY.STEP, 1)
 const displays = ref<number[]>([])
 const content = ref("")
 const $content = useTemplateRef("$content")

src/pages/Markdown.vue

@@ -73,13 +73,14 @@ import { useStorage } from "@vueuse/core"
 import { Tutorial } from "../api"
 import type { TutorialSlim } from "../utils/type"
 import { useDialog, useMessage } from "naive-ui"
+import { STORAGE_KEY } from "../utils/const"
 
 const message = useMessage()
 const confirm = useDialog()
 
 const list = ref<TutorialSlim[]>([])
 const content = ref("")
-const tutorial = useStorage("web-tutorial", {
+const tutorial = useStorage(STORAGE_KEY.TUTORIAL, {
   display: 0,
   title: "",
   content: "",

src/router.ts

@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from "vue-router"
 import { loginModal } from "./store/modal"
 
 import Home from "./pages/Home.vue"
+import { STORAGE_KEY } from "./utils/const"
 
 const routes = [
   { path: "/", name: "home", component: Home },
@@ -26,7 +27,7 @@ export const router = createRouter({
 })
 
 router.beforeEach((to, from, next) => {
-  const isLoggedIn = localStorage.getItem("web-isloggedin") === "true"
+  const isLoggedIn = localStorage.getItem(STORAGE_KEY.LOGIN) === "true"
   if (to.meta.auth && !isLoggedIn) {
     loginModal.value = true
     next(false)

src/store/editors.ts

@@ -1,4 +1,5 @@
 import { useStorage } from "@vueuse/core"
+import { STORAGE_KEY } from "../utils/const"
 
 const defaultHTML = `<div class="welcome">黄岩一职</div>`
 const defaultCSS = `.welcome {
@@ -6,12 +7,12 @@ const defaultCSS = `.welcome {
     font-size: 24px;
 }`
 
-export const html = useStorage("web-html", defaultHTML)
-export const css = useStorage("web-css", defaultCSS)
-export const js = useStorage("web-js", "")
+export const html = useStorage(STORAGE_KEY.HTML, defaultHTML)
+export const css = useStorage(STORAGE_KEY.CSS, defaultCSS)
+export const js = useStorage(STORAGE_KEY.JS, "")
 
-export const tab = useStorage("web-tab", "html")
-export const size = useStorage("web-fontsize", 24)
+export const tab = useStorage(STORAGE_KEY.TAB, "html")
+export const size = useStorage(STORAGE_KEY.FONTSIZE, 24)
 
 export function reset(lang: "html" | "css" | "js") {
   if (lang === "html") {

src/utils/const.ts

@@ -25,3 +25,14 @@ export const alertVariants = [
     title: "小心",
   },
 ]
+
+export const STORAGE_KEY = {
+  LOGIN: "web-isloggedin",
+  STEP: "web-turtorial-step",
+  TUTORIAL: "web-tutorial",
+  HTML: "web-html",
+  CSS: "web-css",
+  JS: "web-js",
+  TAB: "web-tab",
+  FONTSIZE: "web-fontsize",
+}