feat: 添加pageTitle路由守卫，支持动态修改页面title

README.md

@@ -76,3 +76,20 @@ npm run lint:fix
 # 预览发布包效果（需先执行构建指令）
 npm run preview
 ```
+
+## Git 提交规范
+
+- `feat` 增加新功能
+- `fix` 修复问题/BUG
+- `style` 代码风格相关无影响运行结果的
+- `perf` 优化/性能提升
+- `refactor` 重构
+- `revert` 撤销修改
+- `test` 测试相关
+- `docs` 文档/注释
+- `chore` 依赖更新/脚手架配置修改等
+- `workflow` 工作流改进
+- `ci` 持续集成
+- `types` 类型定义文件更改
+- `wip` 开发中
+- `mod` 不确定分类的修改

src/layout/components/header/index.vue

@@ -12,7 +12,7 @@ import HeaderAction from './HeaderAction.vue'
 
 <style lang="scss" scoped>
 .header {
-  padding: 0 35px;
+  padding: 0 24px;
   height: 100%;
   display: flex;
   justify-content: space-between;

src/layout/index.vue

@@ -11,18 +11,22 @@ import AppMain from './components/AppMain.vue'
         <side-menu />
       </n-layout-sider>
       <n-layout>
-        <n-layout-header style="height: 100px; background-color: #f5f6fb">
+        <n-layout-header>
           <app-header />
         </n-layout-header>
-        <n-layout
+        <n-layout position="absolute" style="top: 60px; background-color: #f5f6fb" :native-scrollbar="false">
-          position="absolute"
-          content-style="padding: 0 35px 35px;height: 100%;"
-          style="top: 100px; background-color: #f5f6fb"
-          :native-scrollbar="false"
-        >
           <app-main />
         </n-layout>
       </n-layout>
     </n-layout>
   </div>
 </template>
+
+<style lang="scss" scoped>
+.n-layout-header {
+  height: 60px;
+  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  border-left: 1px solid #eee;
+}
+</style>

src/router/guard/index.js

@@ -1,7 +1,9 @@
 import { createPageLoadingGuard } from './pageLoadingGuard'
+import { createPageTitleGuard } from './pageTitleGuard'
 import { createPermissionGuard } from './permissionGuard'
 
 export function setupRouterGuard(router) {
   createPageLoadingGuard(router)
   createPermissionGuard(router)
+  createPageTitleGuard(router)
 }

src/router/guard/pageTitleGuard.js

@@ -0,0 +1,12 @@
+const baseTitle = import.meta.env.VITE_APP_TITLE
+
+export function createPageTitleGuard(router) {
+  router.afterEach((to) => {
+    const pageTitle = to.meta?.title
+    if (pageTitle) {
+      document.title = `${pageTitle} | ${baseTitle}`
+    } else {
+      document.title = baseTitle
+    }
+  })
+}

src/views/dashboard/index.vue

@@ -1,3 +1,68 @@
 <template>
-  <h1>首页</h1>
+  <div>
+    <n-card>
+      <div flex items-center>
+        <img width="60" style="border-radius: 50%" :src="userStore.avatar" />
+        <div ml20>
+          <p text-16>Hello, {{ userStore.name }}</p>
+          <p op80 text-12 mt5>今天又是元气满满的一天</p>
+        </div>
+        <div flex ml-auto>
+          <n-statistic label="待办" :value="4">
+            <template #suffix> / 10 </template>
+          </n-statistic>
+          <n-statistic ml80 label="Stars">
+            <n-number-animation ref="starsNumberRef" show-separator :from="0" :to="999" />
+          </n-statistic>
+          <n-statistic ml80 label="Forks">
+            <n-number-animation ref="starsNumberRef" show-separator :from="0" :to="299" />
+          </n-statistic>
+        </div>
+      </div>
+    </n-card>
+
+    <div p15 flex>
+      <n-card title="项目" size="small" :segmented="true">
+        <template #header-extra>
+          <n-button text type="primary">更多</n-button>
+        </template>
+        <div class="card-list">
+          <n-card v-for="i in 10" :key="i" title="Vue Naive Admin" size="small">
+            <p op60>一个基于 Vue3.0、Vite、Naive UI 的轻量级后台管理模板</p>
+          </n-card>
+          <div class="blank"></div>
+          <div class="blank"></div>
+          <div class="blank"></div>
+          <div class="blank"></div>
+        </div>
+      </n-card>
+    </div>
+  </div>
 </template>
+
+<script setup>
+import { useUserStore } from '@/store/modules/user'
+
+const userStore = useUserStore()
+</script>
+
+<style lang="scss" scoped>
+.card-list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  .n-card {
+    width: 300px;
+    flex-shrink: 0;
+    margin: 10px 0;
+    cursor: pointer;
+    &:hover {
+      box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
+    }
+  }
+  .blank {
+    width: 300px;
+    height: 0;
+  }
+}
+</style>

src/views/error-page/404.vue

@@ -10,7 +10,7 @@ const { replace } = useRouter()
         <img src="@/assets/imgs/404/404.png" width="500" />
       </template>
       <template #footer>
-        <n-button @click="replace('/')">返回首页</n-button>
+        <n-button color="#002d6f" @click="replace('/')">返回首页</n-button>
       </template>
     </n-result>
   </div>
@@ -19,6 +19,7 @@ const { replace } = useRouter()
 <style lang="scss" scoped>
 .page-404 {
   height: 100%;
+  min-height: calc(100vh - 60px);
   display: flex;
   align-items: center;
   justify-content: center;

src/views/examples/table/post/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div p24>
     <div class="action-btns">
       <n-button size="small" type="primary" @click="handleCreate">新建文章</n-button>
     </div>
@@ -11,7 +11,7 @@
       :columns="columns"
       :pagination="pagination"
       :row-key="(row) => row.id"
-      max-height="calc(100vh - 260px)"
+      max-height="calc(100vh - 250px)"
       @update:checked-row-keys="handleCheck"
     />
   </div>

src/views/examples/table/post/post-create.vue

@@ -4,7 +4,7 @@
       <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
       <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
     </div>
-    <md-editor v-model="post.content" style="height: calc(100vh - 180px)" />
+    <md-editor v-model="post.content" style="height: calc(100vh - 140px)" />
   </div>
 </template>
 

src/views/test-page/TestDialog.vue

@@ -13,5 +13,7 @@ const handleDelete = function () {
 </script>
 
 <template>
-  <n-button @click="handleDelete">删除</n-button>
+  <div p24>
+    <n-button type="error" @click="handleDelete">删除</n-button>
+  </div>
 </template>

src/views/test-page/TestKeepAlive.vue

@@ -16,5 +16,7 @@ onDeactivated(() => {
 </script>
 
 <template>
-  <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
+  <div p24>
+    <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
+  </div>
 </template>

src/views/test-page/TestMessage.vue

@@ -12,5 +12,7 @@ function handleLogin() {
 </script>
 
 <template>
-  <n-button @click="handleLogin">点击登陆</n-button>
+  <div p24>
+    <n-button type="primary" @click="handleLogin">点击登陆</n-button>
+  </div>
 </template>

src/views/test-page/TestUnocss.vue

@@ -1,6 +1,6 @@
 <template>
-  <div>
+  <div p24>
-    <div class="content-box">
+    <div p20 bg="#fff">
       <p text-12>测试12px</p>
       <p text-13>测试13px</p>
       <p text-14>测试14px</p>
@@ -13,11 +13,3 @@
     </div>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.content-box {
-  background-color: #fff;
-  border-radius: 15px;
-  padding: 20px;
-}
-</style>