补充页头

vblog/logs/vblog.log

@@ -221,3 +221,16 @@
 {"level":"info","component":"server","time":"2025-01-12T09:32:52+08:00","caller":"ioc/server/server.go:77","message":"loaded defaults: []"}
 {"level":"info","component":"http","time":"2025-01-12T09:32:52+08:00","caller":"config/http/http.go:144","message":"HTTP服务启动成功, 监听地址: 127.0.0.1:8080"}
 {"level":"debug","time":"2025-01-12T09:33:34+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:00:05+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:01:23+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:01:24+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:01:33+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:01:36+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:02:57+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:03:31+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:03:48+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:17:11+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:17:18+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:19:41+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:25:37+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}
+{"level":"debug","time":"2025-01-12T11:44:07+08:00","caller":"token/api/api.go:57","message":"cookie domain: 127.0.0.1"}

vblog/web/README.md

@@ -322,3 +322,88 @@ const routes = [
   },
 ]
 ```
+
+```js
+// <a-menu-item key="backend_blog_list">文章管理</a-menu-item>
+// <a-menu-item key="backend_tag_list">标签管理</a-menu-item>
+const handleMenuItemClick = (key) => {
+  // https://router.vuejs.org/zh/guide/essentials/navigation.html
+  router.push({ name: key })
+}
+```
+
+## 登录与退出
+
+```js
+const summitLoading = ref(false)
+const handleSubmit = async (data) => {
+  if (data.errors === undefined) {
+    try {
+      summitLoading.value = true
+      const tk = await LOGIN(data.values)
+      // 保存当前用户的登录状态
+      token.value.access_token = tk.access_token
+      token.value.ref_user_name = tk.ref_user_name
+      token.value.refresh_token = tk.refresh_token
+
+      // 需要把用户重定向到Home页面去了
+      router.push({ name: 'blog_management' })
+    } catch (error) {
+      console.log(error)
+    } finally {
+      summitLoading.value = false
+    }
+  }
+}
+```
+
+```js
+const logout = () => {
+  // 需要调用Logout接口的, 自己添加下退出接口
+  // 之前的登录状态给清理掉, store
+  token.value = undefined
+  // 需要重定向到登录页面
+  router.push({ name: 'login' })
+}
+```
+
+## 导航守卫
+
+https://router.vuejs.org/zh/guide/advanced/navigation-guards.html
+
+```js
+const router = createRouter({ ... })
+
+router.beforeEach((to, from) => {
+  // ...
+  // 返回 false 以取消导航
+  return false
+})
+```
+
+```js
+router.beforeEach((to, from) => {
+  const whiteList = ['login']
+  if (!whiteList.includes(to.name)) {
+    // 需要做权限判断
+    if (isLogin()) {
+      return true
+    }
+    // 返回跳转后的页面
+    return { name: 'login' }
+  }
+})
+```
+
+## 覆盖UI的默认样式
+
+css, :deep(), 用于选择需要覆盖的class进行覆盖
+
+:deep 选择器并不是一个通用的 CSS 选择器，而是特定于某些框架（如 Vue.js 和 Svelte）中用于 Scoped CSS 的一个特性。它的主要目的是允许开发者在使用 Scoped CSS 的情况下，能够针对子组件或外部组件的样式进行覆盖。
+
+```js
+<style lang="css" scoped>
+:deep(.page-header .arco-page-header-wrapper) {
+  padding-left: 0px;
+}
+```

vblog/web/src/router/index.js

@@ -1,3 +1,4 @@
+import { isLogin } from '@/stores/token'
 import { createRouter, createWebHistory } from 'vue-router'
 
 const router = createRouter({
@@ -32,11 +33,17 @@ const router = createRouter({
           path: 'blog',
           name: 'blog_management',
           redirect: '/backend/blog/list',
+          meta: {
+            lable: '文章管理',
+          },
           children: [
             {
               path: 'list',
               name: 'backend_blog_list',
               component: () => import('../views/backend/blog/ListPage.vue'),
+              meta: {
+                lable: '文章列表',
+              },
             },
             {
               path: 'tag_list',
@@ -61,4 +68,16 @@ const router = createRouter({
   ],
 })
 
+router.beforeEach((to, from) => {
+  const whiteList = ['login']
+  if (!whiteList.includes(to.name)) {
+    // 需要做权限判断
+    if (isLogin()) {
+      return true
+    }
+    // 返回跳转后的页面
+    return { name: 'login' }
+  }
+})
+
 export default router

vblog/web/src/stores/token.js

@@ -12,3 +12,7 @@ export const token = useStorage(
     mergeDefaults: true,
   },
 )
+
+export const isLogin = () => {
+  return token.value.access_token !== ''
+}

vblog/web/src/views/backend/BackendLayout.vue

@@ -2,7 +2,17 @@
   <a-layout class="layout">
     <!-- 顶部导航 -->
     <a-layout-header class="header">
-      <div>顶部导航</div>
+      <div style="font-size: 16px;font-weight: 500;">
+        博客管理系统
+      </div>
+      <div>
+        <a-button @click="logout">
+          <span style="margin-right: 12px;">
+            退出登录
+          </span>
+          <icon-export />
+        </a-button>
+      </div>
     </a-layout-header>
     <a-layout class="body">
       <!-- 侧边栏 -->
@@ -28,7 +38,7 @@
         </a-menu>
       </a-layout-sider>
       <!-- 内容区域 -->
-      <a-layout-content>
+      <a-layout-content style="padding: 8px;">
         <RouterView></RouterView>
       </a-layout-content>
     </a-layout>
@@ -37,13 +47,22 @@
 
 <script setup>
 
+import { token } from '@/stores/token';
 import { useRouter } from 'vue-router';
 
 const router = useRouter()
 
 const handleMenuItemClick = (key) => {
+  // https://router.vuejs.org/zh/guide/essentials/navigation.html
   router.push({ name: key })
 }
+const logout = () => {
+  // 需要调用Logout接口的, 自己添加下退出接口
+  // 之前的登录状态给清理掉, store
+  token.value = undefined
+  // 需要重定向到登录页面
+  router.push({ name: 'login' })
+}
 
 </script>
 
@@ -57,6 +76,7 @@ const handleMenuItemClick = (key) => {
   box-sizing: border-box;
   min-height: 60px;
   max-height: 60px;
+  padding: 12px;
   display: flex;
   justify-content: space-between;
   position: fixed;
@@ -66,6 +86,7 @@ const handleMenuItemClick = (key) => {
   z-index: 999;
   border-bottom: 1px solid var(--color-border);
   background-color: var(--color-bg-2);
+  align-items: center;
 }
 
 .body {

vblog/web/src/views/backend/blog/ListPage.vue

@@ -1,11 +1,25 @@
 <template>
   <div>
-    博客列表页面
+    <div class="page-header">
+      <a-page-header title="ArcoDesign" subtitle="ArcoDesign Vue 2.0">
+      </a-page-header>
+    </div>
+    <div>
+      搜索框
+    </div>
+    <div>
+      表格数据
+    </div>
   </div>
 </template>
 
 <script setup>
 
+import { isLogin } from '@/stores/token';
 </script>
 
-<style lang="css" scoped></style>
+<style lang="css" scoped>
+:deep(.page-header .arco-page-header-wrapper) {
+  padding-left: 0px;
+}
+</style>

vblog/web/src/views/common/LoginPage.vue

@@ -37,6 +37,9 @@
 import { reactive, ref } from 'vue';
 import { LOGIN } from '@/api/token.js'
 import { token } from '@/stores/token'
+import { useRouter } from 'vue-router';
+
+const router = useRouter()
 
 const loginForm = reactive({
   username: '',
@@ -56,6 +59,7 @@ const handleSubmit = async (data) => {
       token.value.refresh_token = tk.refresh_token
 
       // 需要把用户重定向到Home页面去了
+      router.push({ name: 'blog_management' })
     } catch (error) {
       console.log(error)
     } finally {