style: 增加vscode插件推荐列表

fix: $dialog对话框可以异步

.env

@@ -3,4 +3,4 @@ VITE_APP_TITLE = 'Vue Naive Admin'
 VITE_PORT = 3100
 
 # 打包时自动生成CNAME文件，用于配置github pages自定义域名，如不需要可注释或者直接删除
-VITE_APP_GLOB_CNAME = 'template.qszone.com'
+# VITE_APP_GLOB_CNAME = 'template.qszone.com'

.vscode/extensions.json

@@ -1,12 +1,13 @@
 {
   "recommendations": [
     "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
     "johnsoncodehk.volar",
     "hollowtree.vue-snippets",
     "esbenp.prettier-vscode",
     "mikestead.dotenv",
     "wayou.vscode-todo-highlight",
-    "wayou.vscode-todo-highlight",
-    "aaron-bond.better-comments"
+    "aaron-bond.better-comments",
+    "antfu.iconify"
   ]
 }

.vscode/settings.json

@@ -8,7 +8,7 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[html]": {
-    "editor.defaultFormatter": "vscode.html-language-features"
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -19,8 +19,12 @@
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
+  "[markdown]": {
+    "editor.defaultFormatter": "yzhang.markdown-all-in-one"
+  },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript"],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
   },
-  "eslint.validate": ["javascript", "javascriptreact", "typescript"]
+  "editor.formatOnSave": true
 }

README.md

@@ -1,30 +1,35 @@
-# VUE NAIVE ADMIN
+## VUE NAIVE ADMIN
 
-## 简介
+### 简介
 
-Vue Naive Admin，一个基于 Vue3.0、Vite、Naive UI 的后台管理模板，相较于其他比较流行的后台管理模板，此项目相对简洁、轻量，没有集成 TypeScript，没有集成国际化，没有集成复杂的主题配置，学习成本非常低，对新手极其友好。不过麻雀虽小五脏俱全，权限、Mock、菜单、axios 封装、pinia、项目配置、样式配置、环境配置，以及一些经常用的基础组件封装等等这些该有的都有，经过参考多个 vue3 后台管理模板后以最简洁优雅的方式实现，非常适用于中小型项目或者个人项目，当然，以此模板进行二次封装改造用于大型项目也未尝不可。
+[Vue Naive Admin](https://github.com/zclzone/vue-naive-admin)，一个基于 Vue3.0、Vite、Naive UI 的后台管理模板，相较于其他比较流行的后台管理模板，此项目相对简洁、轻量，学习成本非常低，对新手极其友好。不过麻雀虽小五脏俱全，权限、Mock、菜单、axios 封装、pinia、项目配置、样式配置、环境配置，以及一些经常用的基础组件封装等等这些该有的都有，非常适用于中小型项目或者个人项目，也可此模板进行二次封装改造用于大型项目。
 
-## 为什么要开发这个模板
+### 为什么要开发这个模板
 
-1. Vue3 和 Vite 已经趋于成熟，学习 vite 和 vue3 非常有必要，通过开发模板进行学习是一个很好的方式，事实也证明我确实从中获益良多
-2. 目前主流的 Vue3+Vite 后台管理模板都相对复杂，甚至感觉有点花里胡哨（没有贬低的意思，大部分的架构设计都很优秀，只是觉得集成了太多不实用的东西）
-3. 自己搭的模板开发起来才最顺手。本人很反感拿别人的模板直接上手开发，如果非要拿别人的模板开发也会尽量先吃透再用，不吃透就没有代码的掌控感和安全感
+- Vue3 和 Vite 已经趋于成熟，学习 vite 和 vue3 非常有必要，通过开发模板进行学习是一个很好的方式，事实也证明我确实从中获益良多
+- 目前主流的 Vue3+Vite 后台管理模板都相对复杂，甚至感觉有点花里胡哨（没有贬低的意思，大部分的架构设计都很优秀，只是觉得集成了太多不实用的东西）
 
-## 功能
+### 功能
 
-- 🍒 集成 Naive UI，尤大推荐的 UI 组件库，很香，https://www.naiveui.com
-- 🍑 集成登陆、注销及权限验证（暂只支持角色页面权限，后续考虑添加按钮权限）
+- 🍒 集成 Naive UI，尤大推荐的 UI 组件库，[https://www.naiveui.com](https://www.naiveui.com)
+- 🍑 集成登陆、注销及权限验证
 - 🍐 集成多环境配置，dev、测试、预发布和生产
-- 🍎 集成 eslint + prettier，代码约束和格式化统一
+- 🍎 集成 Eslint + Prettier，代码约束和格式化统一
 - 🍉 集成 Mock 接口服务，dev 环境和发布环境都支持，可动态配置是否启用 mock 服务，不启用时不会加载 mock 包，减少打包体积
-- 🍇 集成 unocss，antfu 大神开源的原子化 css 解决方案，非常轻量，目前我是自己写 scss 样式搭配着 unocss 使用的，很香
-- 🍍 集成 pinia，Vuex 的替代方案，轻量、简单、易用，很香
-- 🍏 集成 axios，支持多 axios 实例，支持线上环境免重新打包修改 baseURL
+- 🍇 集成 unocss，antfu 大神开源的原子化 css 解决方案，非常轻量，目前我是自己写 scss 样式搭配着 unocss 使用的
+- 🍍 集成 Pinia，Vuex 的替代方案，轻量、简单、易用（尤大已表示不会有Vuex5，或者说pinia就是Vuex5）
+- 📦 集成 Vite 自动导入插件unplugin-vue-components，解放双手，开发效率直接起飞
+- 🍏 二次封装 Axios，支持多 axios 实例，支持线上环境免重新打包修改 baseURL
 - 🍌 二次封装全局 Dialog、Message、LoadingBar 组件
 - 🍋 二次封装 localStorage 和 sessionStorage，支持设置过期时间
 
+## 预览
+
+[template.qszone.com](https://template.qszone.com)
+
 ## 文档
 
+[Vue Naive Admin Docs](https://zclzone.github.io/vue-naive-admin-docs)
 [羽雀文档：Vue Naive Admin](https://www.yuque.com/qszone/vue-naive-admin)
 
 ## 构建步骤
@@ -40,8 +45,8 @@ git clone https://github.com/zclzone/vue-naive-admin.git
 # 进入项目目录
 cd vue-naive-admin
 
-# 安装依赖
-npm i
+# 安装依赖(建议使用pnpm: https://pnpm.io/zh/installation)
+pnpm i # 或者 npm i
 
 # 启动
 npm run dev
@@ -72,3 +77,20 @@ npm run lint:fix
 # 预览发布包效果（需先执行构建指令）
 npm run preview
 ```
+
+## Git 提交规范
+
+- `feat` 增加新功能
+- `fix` 修复问题/BUG
+- `style` 代码风格相关无影响运行结果的
+- `perf` 优化/性能提升
+- `refactor` 重构
+- `revert` 撤销修改
+- `test` 测试相关
+- `docs` 文档/注释
+- `chore` 依赖更新/脚手架配置修改等
+- `workflow` 工作流改进
+- `ci` 持续集成
+- `types` 类型定义文件更改
+- `wip` 开发中
+- `mod` 不确定分类的修改

build/vite/plugin/index.js

@@ -1,11 +1,40 @@
 import vue from '@vitejs/plugin-vue'
+
+/**
+ * * 扩展setup插件，支持在script标签中使用name属性
+ * usage: <script setup name="MyComp"></script>
+ */
 import VueSetupExtend from 'vite-plugin-vue-setup-extend'
+
+/**
+ * * 组件库按需引入插件
+ * usage: 直接使用组件,无需在任何地方导入组件
+ */
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+
+/**
+ * * unplugin-icons插件，自动引入iconify图标
+ * usage: https://github.com/antfu/unplugin-icons
+ * 图标库: https://icones.js.org/
+ */
+import Icons from 'unplugin-icons/vite'
+
 import { unocss } from './unocss'
 import { configHtmlPlugin } from './html'
 import { configMockPlugin } from './mock'
 
 export function createVitePlugins(viteEnv, isBuild) {
-  const plugins = [vue(), VueSetupExtend(), unocss(), configHtmlPlugin(viteEnv, isBuild)]
+  const plugins = [
+    vue(),
+    VueSetupExtend(),
+    Components({
+      resolvers: [NaiveUiResolver()],
+    }),
+    Icons({ compiler: 'vue3', autoInstall: true }),
+    unocss(),
+    configHtmlPlugin(viteEnv, isBuild),
+  ]
 
   viteEnv?.VITE_APP_USE_MOCK && plugins.push(configMockPlugin(isBuild))
 

build/vite/plugin/mock.js

@@ -7,7 +7,7 @@ export function configMockPlugin(isBuild) {
     localEnabled: !isBuild,
     prodEnabled: isBuild,
     injectCode: `
-      import { setupProdMockServer } from '../mock/_createProdServer';
+      import { setupProdMockServer } from '../mock/_create-prod-server';
       setupProdMockServer();
     `,
   })

index.html

@@ -1,6 +1,5 @@
 <!DOCTYPE html>
 <html lang="cn">
-
   <head>
     <meta charset="UTF-8" />
     <meta http-equiv="Expires" content="0" />
@@ -8,15 +7,12 @@
     <meta http-equiv="Cache-control" content="no-cache" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <link rel="icon" href="/favicon.ico" />
-  <title>
-    <%= title %>
-  </title>
+    <link rel="icon" href="/favicon.svg" />
+    <title><%= title %></title>
   </head>
 
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
-
 </html>

mock/user/index.js

@@ -4,21 +4,21 @@ const users = {
   admin: {
     id: 1,
     name: '大脸怪(admin)',
-    avatar: 'https://gitee.com/zclzone/res/raw/master/qs-zone/blob/img/lADPDiQ3QDTwsz3NAarNAaw_428_426.jpg',
+    avatar: 'https://assets.qszone.com/images/avatar.jpg',
     email: 'Ronnie@123.com',
     role: ['admin'],
   },
   editor: {
     id: 2,
     name: '大脸怪(editor)',
-    avatar: 'https://gitee.com/zclzone/res/raw/master/qs-zone/blob/img/lADPDiQ3QDTwsz3NAarNAaw_428_426.jpg',
+    avatar: 'https://assets.qszone.com/images/avatar.jpg',
     email: 'Ronnie@123.com',
     role: ['editor'],
   },
   guest: {
     id: 3,
     name: '访客(guest)',
-    avatar: 'https://gitee.com/zclzone/res/raw/master/qs-zone/blob/img/lADPDiQ3QDTwsz3NAarNAaw_428_426.jpg',
+    avatar: 'https://assets.qszone.com/images/avatar.jpg',
     role: [],
   },
 }

package.json

@@ -11,36 +11,39 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@vicons/fa": "^0.11.0",
     "axios": "^0.21.4",
-    "dayjs": "^1.10.7",
-    "js-cookie": "^3.0.1",
+    "dayjs": "^1.11.0",
     "lodash-es": "^4.17.21",
+    "md-editor-v3": "^1.11.4",
     "mockjs": "^1.1.0",
-    "pinia": "^2.0.9",
-    "vue": "^3.2.6",
-    "vue-router": "^4.0.12"
+    "pinia": "^2.0.13",
+    "vue": "^3.2.31",
+    "vue-router": "^4.0.14"
   },
   "devDependencies": {
-    "@unocss/preset-attributify": "^0.16.3",
-    "@unocss/preset-icons": "^0.16.3",
-    "@unocss/preset-uno": "^0.16.3",
-    "@vitejs/plugin-vue": "^1.6.0",
-    "@vue/compiler-sfc": "^3.0.5",
-    "chalk": "^5.0.0",
+    "@iconify-json/mdi": "^1.1.9",
+    "@iconify-json/simple-icons": "^1.1.7",
+    "@unocss/preset-attributify": "^0.16.4",
+    "@unocss/preset-icons": "^0.16.4",
+    "@unocss/preset-uno": "^0.16.4",
+    "@vitejs/plugin-vue": "^1.10.2",
+    "@vue/compiler-sfc": "^3.2.31",
+    "chalk": "^5.0.1",
     "dotenv": "^10.0.0",
-    "eslint": "^8.6.0",
-    "eslint-config-prettier": "^8.3.0",
+    "eslint": "^8.12.0",
+    "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-prettier": "^4.0.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^8.5.0",
     "esno": "^0.13.0",
-    "fs-extra": "^10.0.0",
-    "naive-ui": "^2.19.1",
-    "prettier": "^2.5.1",
-    "sass": "^1.38.1",
-    "unocss": "^0.16.3",
-    "vite": "^2.7.6",
-    "vite-plugin-html": "^2.1.1",
+    "fs-extra": "^10.0.1",
+    "naive-ui": "^2.27.0",
+    "prettier": "^2.6.1",
+    "sass": "^1.49.10",
+    "unocss": "^0.16.4",
+    "unplugin-icons": "^0.14.1",
+    "unplugin-vue-components": "^0.17.21",
+    "vite": "^2.9.1",
+    "vite-plugin-html": "^2.1.2",
     "vite-plugin-mock": "^2.9.6",
     "vite-plugin-vue-setup-extend": "^0.3.0"
   }

public/favicon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512" data-v-fba6e5d0=""><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-92.2 312.9c-63.4 0-85.4-28.6-97.1-64.1c-16.3-51-21.5-84.3-63-84.3c-22.4 0-45.1 16.1-45.1 61.2c0 35.2 18 57.2 43.3 57.2c28.6 0 47.6-21.3 47.6-21.3l11.7 31.9s-19.8 19.4-61.2 19.4c-51.3 0-79.9-30.1-79.9-85.8c0-57.9 28.6-92 82.5-92c73.5 0 80.8 41.4 100.8 101.9c8.8 26.8 24.2 46.2 61.2 46.2c24.9 0 38.1-5.5 38.1-19.1c0-19.9-21.8-22-49.9-28.6c-30.4-7.3-42.5-23.1-42.5-48c0-40 32.3-52.4 65.2-52.4c37.4 0 60.1 13.6 63 46.6l-36.7 4.4c-1.5-15.8-11-22.4-28.6-22.4c-16.1 0-26 7.3-26 19.8c0 11 4.8 17.6 20.9 21.3c32.7 7.1 71.8 12 71.8 57.5c.1 36.7-30.7 50.6-76.1 50.6z" fill="#316c72"></path></svg>

src/App.vue

@@ -1,20 +1,15 @@
+<template>
+  <AppProvider>
+    <router-view v-slot="{ Component }">
+      <component :is="Component" />
+    </router-view>
+  </AppProvider>
+</template>
+
 <script setup>
 import AppProvider from '@/components/AppProvider/index.vue'
 </script>
 
-<template>
-  <router-view>
-    <template #default="{ Component, route }">
-      <app-provider>
-        <keep-alive v-if="route.meta && route.meta.keepAlive">
-          <component :is="Component" :key="route.fullPath" />
-        </keep-alive>
-        <component :is="Component" v-else :key="route.fullPath" />
-      </app-provider>
-    </template>
-  </router-view>
-</template>
-
 <style lang="scss">
 #app {
   height: 100%;

src/api/auth/index.js

@@ -1,7 +1,7 @@
-import { defAxios } from '@/utils/http'
+import { defAxios as request } from '@/utils/http'
 
 export const login = (data) => {
-  return defAxios({
+  return request({
     url: '/auth/login',
     method: 'post',
     data,
@@ -9,7 +9,7 @@ export const login = (data) => {
 }
 
 export const refreshToken = () => {
-  return defAxios({
+  return request({
     url: '/auth/refreshToken',
     method: 'post',
   })

src/api/post/index.js

@@ -0,0 +1,39 @@
+import { defAxios as request } from '@/utils/http'
+
+export function getPosts(data = {}) {
+  return request({
+    url: '/posts',
+    method: 'get',
+    data,
+  })
+}
+
+export function getPostById({ id }) {
+  return request({
+    url: `/post/${id}`,
+    method: 'get',
+  })
+}
+
+export function savePost(id, data = {}) {
+  if (id) {
+    return request({
+      url: `/post/${id}`,
+      method: 'put',
+      data,
+    })
+  }
+
+  return request({
+    url: '/post',
+    method: 'post',
+    data,
+  })
+}
+
+export function deletePost(id) {
+  return request({
+    url: `/post/${id}`,
+    method: 'delete',
+  })
+}

src/api/user/index.js

@@ -1,7 +1,7 @@
-import { defAxios } from '@/utils/http'
+import { defAxios as request } from '@/utils/http'
 
 export function getUsers(data = {}) {
-  return defAxios({
+  return request({
     url: '/users',
     method: 'get',
     data,
@@ -10,12 +10,12 @@ export function getUsers(data = {}) {
 
 export function getUser(id) {
   if (id) {
-    return defAxios({
+    return request({
       url: `/user/${id}`,
       method: 'get',
     })
   }
-  return defAxios({
+  return request({
     url: '/user',
     method: 'get',
   })
@@ -23,14 +23,14 @@ export function getUser(id) {
 
 export function saveUser(data = {}, id) {
   if (id) {
-    return defAxios({
+    return request({
       url: '/user',
       method: 'put',
       data,
     })
   }
 
-  return defAxios({
+  return request({
     url: `/user/${id}`,
     method: 'put',
     data,

src/assets/images/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512" data-v-fba6e5d0=""><path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-92.2 312.9c-63.4 0-85.4-28.6-97.1-64.1c-16.3-51-21.5-84.3-63-84.3c-22.4 0-45.1 16.1-45.1 61.2c0 35.2 18 57.2 43.3 57.2c28.6 0 47.6-21.3 47.6-21.3l11.7 31.9s-19.8 19.4-61.2 19.4c-51.3 0-79.9-30.1-79.9-85.8c0-57.9 28.6-92 82.5-92c73.5 0 80.8 41.4 100.8 101.9c8.8 26.8 24.2 46.2 61.2 46.2c24.9 0 38.1-5.5 38.1-19.1c0-19.9-21.8-22-49.9-28.6c-30.4-7.3-42.5-23.1-42.5-48c0-40 32.3-52.4 65.2-52.4c37.4 0 60.1 13.6 63 46.6l-36.7 4.4c-1.5-15.8-11-22.4-28.6-22.4c-16.1 0-26 7.3-26 19.8c0 11 4.8 17.6 20.9 21.3c32.7 7.1 71.8 12 71.8 57.5c.1 36.7-30.7 50.6-76.1 50.6z" fill="#316c72"></path></svg>

src/components/AppIcons/IconLogo.vue

@@ -0,0 +1,9 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 448 512">
+    <path
+      d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-92.2 312.9c-63.4 0-85.4-28.6-97.1-64.1c-16.3-51-21.5-84.3-63-84.3c-22.4 0-45.1 16.1-45.1 61.2c0 35.2 18 57.2 43.3 57.2c28.6 0 47.6-21.3 47.6-21.3l11.7 31.9s-19.8 19.4-61.2 19.4c-51.3 0-79.9-30.1-79.9-85.8c0-57.9 28.6-92 82.5-92c73.5 0 80.8 41.4 100.8 101.9c8.8 26.8 24.2 46.2 61.2 46.2c24.9 0 38.1-5.5 38.1-19.1c0-19.9-21.8-22-49.9-28.6c-30.4-7.3-42.5-23.1-42.5-48c0-40 32.3-52.4 65.2-52.4c37.4 0 60.1 13.6 63 46.6l-36.7 4.4c-1.5-15.8-11-22.4-28.6-22.4c-16.1 0-26 7.3-26 19.8c0 11 4.8 17.6 20.9 21.3c32.7 7.1 71.8 12 71.8 57.5c.1 36.7-30.7 50.6-76.1 50.6z"
+    ></path>
+  </svg>
+</template>
+
+<script setup name="IconLogo"></script>

src/components/AppIcons/index.js

@@ -0,0 +1,12 @@
+export { default as IconGitee } from '~icons/simple-icons/gitee'
+
+export { default as IconChart } from '~icons/mdi/chart-bar'
+export { default as IconGithub } from '~icons/mdi/github'
+export { default as IconVue } from '~icons/mdi/vuejs'
+export { default as IconHome } from '~icons/mdi/home'
+export { default as IconLink } from '~icons/mdi/link-variant'
+export { default as IconAlert } from '~icons/mdi/alert-circle-outline'
+export { default as IconCircle } from '~icons/mdi/circle-outline'
+export { default as IconMenu } from '~icons/mdi/menu'
+
+export { default as IconLogo } from './IconLogo.vue'

src/components/AppProvider/DialogContent.vue

@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { isNullOrUndef } from '@/utils/is'
 import { useDialog } from 'naive-ui'
@@ -6,15 +8,15 @@ const NDialog = useDialog()
 
 class Dialog {
   success(title, option) {
-    this.showDialog('success', { title, ...option })
+    return this.showDialog('success', { title, ...option })
   }
 
   warning(title, option) {
-    this.showDialog('warning', { title, ...option })
+    return this.showDialog('warning', { title, ...option })
   }
 
   error(title, option) {
-    this.showDialog('error', { title, ...option })
+    return this.showDialog('error', { title, ...option })
   }
 
   showDialog(type = 'success', option) {
@@ -22,7 +24,7 @@ class Dialog {
       // ! 没有title的情况
       option.showIcon = false
     }
-    NDialog[type]({
+    return NDialog[type]({
       positiveText: 'OK',
       closable: false,
       ...option,
@@ -30,7 +32,7 @@ class Dialog {
   }
 
   confirm(option = {}) {
-    this.showDialog(option.type || 'error', {
+    return this.showDialog(option.type || 'error', {
       positiveText: '确定',
       negativeText: '取消',
       onPositiveClick: option.confirm,
@@ -48,5 +50,3 @@ Object.defineProperty(window, '$dialog', {
   writable: false,
 })
 </script>
-
-<template></template>

src/components/AppProvider/LoadingBar.vue

@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { useLoadingBar } from 'naive-ui'
 window['$loadingBar'] = useLoadingBar()
@@ -6,5 +8,3 @@ Object.defineProperty(window, '$loadingBar', {
   writable: false,
 })
 </script>
-
-<template></template>

src/components/AppProvider/MessageContent.vue

@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { useMessage } from 'naive-ui'
 
@@ -8,9 +10,8 @@ let loadingMessage = null
 class Message {
   /**
    * 规则：
-   * * 同一Message实例只显示一个loading message，如果需要显示多个可以创建多个Message实例
-   * * 新的message会替换正在显示的loading message
-   * * 默认已创建一个Message实例$message挂载到window，同时也将Message类挂载到了window
+   * * loading message只显示一个，新的message会替换正在显示的loading message
+   * * loading message不会自动清除，除非被替换成非loading message，非loading message默认2秒后自动清除
    */
 
   removeMessage(message, duration = 2000) {
@@ -23,20 +24,20 @@ class Message {
   }
 
   showMessage(type, content, option = {}) {
-    if (this.loadingMessage && this.loadingMessage.type === 'loading') {
+    if (loadingMessage && loadingMessage.type === 'loading') {
       // 如果存在则替换正在显示的loading message
-      this.loadingMessage.type = type
-      this.loadingMessage.content = content
+      loadingMessage.type = type
+      loadingMessage.content = content
 
       if (type !== 'loading') {
         // 非loading message需设置自动清除
-        this.removeMessage(this.loadingMessage, option.duration)
+        this.removeMessage(loadingMessage, option.duration)
       }
     } else {
       // 不存在正在显示的loading则新建一个message,如果新建的message是loading message则将message赋值存储下来
       let message = NMessage[type](content, option)
       if (type === 'loading') {
-        this.loadingMessage = message
+        loadingMessage = message
       }
     }
   }
@@ -69,5 +70,3 @@ Object.defineProperty(window, '$message', {
   writable: false,
 })
 </script>
-
-<template></template>

src/components/AppProvider/index.vue

@@ -1,6 +1,19 @@
-<script setup>
-import { NConfigProvider, NGlobalStyle, NLoadingBarProvider, NMessageProvider, NDialogProvider } from 'naive-ui'
+<template>
+  <n-config-provider :theme-overrides="appStore.themeOverrides">
+    <n-loading-bar-provider>
+      <LoadingBar />
+      <n-dialog-provider>
+        <DialogContent />
+        <n-message-provider>
+          <MessageContent />
+          <slot></slot>
+        </n-message-provider>
+      </n-dialog-provider>
+    </n-loading-bar-provider>
+  </n-config-provider>
+</template>
 
+<script setup>
 import MessageContent from './MessageContent.vue'
 import DialogContent from './DialogContent.vue'
 import LoadingBar from './LoadingBar.vue'
@@ -8,19 +21,3 @@ import LoadingBar from './LoadingBar.vue'
 import { useAppStore } from '@/store/modules/app'
 const appStore = useAppStore()
 </script>
-
-<template>
-  <n-config-provider :theme-overrides="appStore.themeOverrides">
-    <n-global-style />
-    <n-loading-bar-provider>
-      <loading-bar />
-      <n-dialog-provider>
-        <dialog-content />
-        <n-message-provider>
-          <message-content />
-          <slot name="default"></slot>
-        </n-message-provider>
-      </n-dialog-provider>
-    </n-loading-bar-provider>
-  </n-config-provider>
-</template>

src/layout/components/AppMain.vue

@@ -1,9 +1,19 @@
 <template>
-  <router-view>
-    <template #default="{ Component, route }">
+  <router-view v-slot="{ Component, route }">
     <transition name="fade-slide" mode="out-in" appear>
-        <component :is="Component" :key="route.fullPath"></component>
+      <keep-alive :include="keepAliveRouteNames">
+        <component :is="Component" :key="route.path" />
+      </keep-alive>
     </transition>
-    </template>
   </router-view>
 </template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+const router = useRouter()
+const allRoutes = router.getRoutes()
+const keepAliveRouteNames = computed(() => {
+  return allRoutes.filter((route) => route.meta?.keepAlive).map((route) => route.name)
+})
+</script>

src/layout/components/header/BreadCrumb.vue

@@ -1,5 +1,12 @@
+<template>
+  <n-breadcrumb>
+    <n-breadcrumb-item v-for="item in currentRoute.matched" :key="item.path" @click="handleBreadClick(item.path)">
+      {{ item.meta.title }}
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>
+
 <script setup>
-import { NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
 import { useRouter } from 'vue-router'
 const router = useRouter()
 const { currentRoute } = router
@@ -9,11 +16,3 @@ function handleBreadClick(path) {
   router.push(path)
 }
 </script>
-
-<template>
-  <n-breadcrumb>
-    <n-breadcrumb-item v-for="item in currentRoute.matched" :key="item.path" @click="handleBreadClick(item.path)">
-      {{ item.meta.title }}
-    </n-breadcrumb-item>
-  </n-breadcrumb>
-</template>

src/layout/components/header/HeaderAction.vue

@@ -1,27 +1,3 @@
-<script setup>
-import { useUserStore } from '@/store/modules/user'
-import { useRouter } from 'vue-router'
-import { NDropdown } from 'naive-ui'
-
-const userStore = useUserStore()
-const router = useRouter()
-
-const options = [
-  {
-    label: '退出登录',
-    key: 'logout',
-  },
-]
-
-function handleSelect(key) {
-  if (key === 'logout') {
-    userStore.logout()
-    $message.success('已退出登录')
-    router.push({ path: '/login' })
-  }
-}
-</script>
-
 <template>
   <n-dropdown :options="options" @select="handleSelect">
     <div class="avatar">
@@ -31,6 +7,79 @@ function handleSelect(key) {
   </n-dropdown>
 </template>
 
+<script setup>
+import { useUserStore } from '@/store/modules/user'
+import { useRouter } from 'vue-router'
+import { resetRouter } from '@/router'
+import { usePermissionStore } from '@/store/modules/permission'
+import { NOT_FOUND_ROUTE } from '@/router/routes'
+
+const userStore = useUserStore()
+const router = useRouter()
+
+const options = [
+  {
+    label: '切换角色',
+    key: 'switchRole',
+  },
+  {
+    label: '退出登录',
+    key: 'logout',
+  },
+]
+
+function handleSelect(key) {
+  if (key === 'logout') {
+    logout()
+  } else if (key === 'switchRole') {
+    switchRole()
+  }
+}
+
+function logout() {
+  userStore.logout()
+  $message.success('已退出登录')
+  router.push({ path: '/login' })
+}
+
+function switchRole() {
+  const permissionStore = usePermissionStore()
+
+  const users = [
+    {
+      id: 1,
+      name: '大脸怪(admin)',
+      avatar: 'https://assets.qszone.com/images/avatar.jpg',
+      email: 'Ronnie@123.com',
+      role: ['admin'],
+    },
+    {
+      id: 2,
+      name: '大脸怪(editor)',
+      avatar: 'https://assets.qszone.com/images/avatar.jpg',
+      email: 'Ronnie@123.com',
+      role: ['editor'],
+    },
+    {
+      id: 3,
+      name: '访客(guest)',
+      avatar: 'https://assets.qszone.com/images/avatar.jpg',
+      role: [],
+    },
+  ]
+
+  const switchUser = users[+userStore.userId % users.length]
+  resetRouter()
+  userStore.setUserInfo(switchUser)
+  const accessRoutes = permissionStore.generateRoutes(switchUser.role)
+  accessRoutes.forEach((route) => {
+    !router.hasRoute(route.name) && router.addRoute(route)
+  })
+  router.addRoute(NOT_FOUND_ROUTE)
+  $message.success(`${switchUser.name}`)
+}
+</script>
+
 <style lang="scss" scoped>
 .avatar {
   display: flex;

src/layout/components/header/index.vue

@@ -1,18 +1,18 @@
+<template>
+  <header class="header">
+    <BreadCrumb />
+    <HeaderAction />
+  </header>
+</template>
+
 <script setup>
 import BreadCrumb from './BreadCrumb.vue'
 import HeaderAction from './HeaderAction.vue'
 </script>
 
-<template>
-  <header class="header">
-    <bread-crumb />
-    <header-action />
-  </header>
-</template>
-
 <style lang="scss" scoped>
 .header {
-  padding: 0 35px;
+  padding: 0 24px;
   height: 100%;
   display: flex;
   justify-content: space-between;

src/layout/components/sidebar/SideLogo.vue

@@ -1,13 +1,7 @@
-<script setup>
-import { NGradientText, NIcon } from 'naive-ui'
-import { LastfmSquare } from '@vicons/fa'
-const title = import.meta.env.VITE_APP_TITLE
-</script>
-
 <template>
   <div class="logo">
     <n-icon size="36" color="#316c72">
-      <lastfm-square />
+      <IconLogo />
     </n-icon>
     <router-link to="/">
       <n-gradient-text type="primary">{{ title }}</n-gradient-text>
@@ -15,6 +9,11 @@ const title = import.meta.env.VITE_APP_TITLE
   </div>
 </template>
 
+<script setup>
+import { IconLogo } from '@/components/AppIcons'
+const title = import.meta.env.VITE_APP_TITLE
+</script>
+
 <style lang="scss" scoped>
 .logo {
   height: 64px;

src/layout/components/sidebar/SideMenu.vue

@@ -1,29 +1,63 @@
+<template>
+  <n-menu
+    class="side-menu"
+    accordion
+    :indent="12"
+    :root-indent="12"
+    :options="menuOptions"
+    :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
+    @update:value="handleMenuSelect"
+  />
+</template>
+
 <script setup>
-import { NMenu } from 'naive-ui'
 import { useRouter } from 'vue-router'
-import { computed } from 'vue'
+import { computed, h } from 'vue'
 import { usePermissionStore } from '@/store/modules/permission'
 
+import { NIcon } from 'naive-ui'
+import { IconCircle, IconMenu } from '@/components/AppIcons'
+
+import { isExternal } from '@/utils/is'
+
 const router = useRouter()
 const permissionStore = usePermissionStore()
-
 const { currentRoute } = router
-const routes = permissionStore.routes
 
 const menuOptions = computed(() => {
-  return generateOptions(routes, '')
+  return generateOptions(permissionStore.routes, '')
 })
 
-function resolvePath(...pathes) {
+function resolvePath(basePath, path) {
+  if (isExternal(path)) return path
   return (
     '/' +
-    pathes
+    [basePath, path]
       .filter((path) => !!path && path !== '/')
       .map((path) => path.replace(/(^\/)|(\/$)/g, ''))
       .join('/')
   )
 }
 
+function renderIcon(icon, props = { size: 12 }) {
+  return () => h(NIcon, { ...props }, { default: () => h(icon) })
+}
+
+function isSingleRoute(route) {
+  let isSingle = true
+  let curRoute = route
+  while (curRoute.children && curRoute.children.length) {
+    if (curRoute.children.length > 1) {
+      isSingle = false
+      break
+    }
+    if (curRoute.children.length === 1) {
+      curRoute = curRoute.children[0]
+    }
+  }
+  return isSingle
+}
+
 function generateOptions(routes, basePath) {
   let options = []
   routes.forEach((route) => {
@@ -34,13 +68,10 @@ function generateOptions(routes, basePath) {
         path: resolvePath(basePath, route.path),
       }
       if (route.children && route.children.length) {
+        curOption.icon = renderIcon(route.meta?.icon || IconMenu, { size: 16 })
         curOption.children = generateOptions(route.children, resolvePath(basePath, route.path))
-      }
-      if (curOption.children && curOption.children.length <= 1) {
-        if (curOption.children.length === 1) {
-          curOption = { ...curOption.children[0] }
-        }
-        delete curOption.children
+      } else {
+        curOption.icon = (route.meta?.icon && renderIcon(route.meta?.icon)) || renderIcon(IconCircle, { size: 8 })
       }
       options.push(curOption)
     }
@@ -49,7 +80,11 @@ function generateOptions(routes, basePath) {
 }
 
 function handleMenuSelect(key, item) {
+  if (isExternal(item.path)) {
+    window.open(item.path)
+  } else {
     router.push(item.path)
+  }
 
   // 通过path重定向
   // router.push({
@@ -59,32 +94,19 @@ function handleMenuSelect(key, item) {
 }
 </script>
 
-<template>
-  <n-menu
-    class="side-menu"
-    :root-indent="20"
-    :options="menuOptions"
-    :value="(currentRoute.meta && currentRoute.meta.activeMenu) || currentRoute.name"
-    @update:value="handleMenuSelect"
-  />
-</template>
-
 <style lang="scss">
 .n-menu {
   margin-top: 10px;
   padding-left: 10px;
-  .n-menu-item {
-    margin-top: 0;
-    position: relative;
+  .n-menu-item-content {
     &::before {
       left: 0;
       right: 0;
       border-radius: 0;
       background-color: unset !important;
     }
-
     &:hover,
-    &.n-menu-item--selected {
+    &.n-menu-item-content--selected {
       border-radius: 0 !important;
 
       &::before {
@@ -106,55 +128,7 @@ function handleMenuSelect(key, item) {
       font-weight: normal;
       position: relative;
       overflow: visible !important;
-      &::before {
-        content: '';
-        position: absolute;
-        left: -15px;
-        top: 0;
-        bottom: 0;
-        margin: auto;
-        width: 5px;
-        height: 5px;
-        border-radius: 50%;
-        border: 1px solid #333;
     }
   }
 }
-}
-// .side-menu {
-//   // padding-left: 15px;
-//   .n-menu-item-content-header {
-//     color: #fff !important;
-//     font-weight: bold;
-//     font-size: 14px;
-//   }
-
-//   .n-submenu {
-//     .n-menu-item-content-header {
-//       color: #fff !important;
-//       font-weight: bold;
-//       font-size: 14px;
-//     }
-//   }
-//   .n-submenu-children {
-//     .n-menu-item-content-header {
-//       color: #fff !important;
-//       font-weight: normal;
-//       font-size: 12px;
-//     }
-//   }
-//   .n-menu-item {
-//     border-top-left-radius: 5px;
-//     border-bottom-left-radius: 5px;
-//     &:hover,
-//     &.n-menu-item--selected::before {
-//       background-color: #16243a;
-//       right: 0;
-//       left: 0;
-// border-right: 3px solid $primaryColor;
-// background-color: unset !important;
-// background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba($primaryColor, 0.3) 100%);
-//     }
-//   }
-// }
 </style>

src/layout/components/sidebar/index.vue

@@ -4,6 +4,6 @@ import SideMenu from './SideMenu.vue'
 </script>
 
 <template>
-  <side-logo />
-  <side-menu />
+  <SideLogo />
+  <SideMenu />
 </template>

src/layout/index.vue

@@ -1,6 +1,4 @@
 <script setup>
-import { NLayout, NLayoutHeader, NLayoutSider } from 'naive-ui'
-
 import AppHeader from './components/header/index.vue'
 import SideMenu from './components/sidebar/index.vue'
 import AppMain from './components/AppMain.vue'
@@ -10,21 +8,25 @@ import AppMain from './components/AppMain.vue'
   <div class="layout">
     <n-layout has-sider position="absolute">
       <n-layout-sider :width="200" :collapsed-width="0" :native-scrollbar="false">
-        <side-menu />
+        <SideMenu />
       </n-layout-sider>
       <n-layout>
-        <n-layout-header style="height: 100px; background-color: #f5f6fb">
-          <app-header />
+        <n-layout-header>
+          <AppHeader />
         </n-layout-header>
-        <n-layout
-          position="absolute"
-          content-style="padding: 0 35px 35px"
-          style="top: 100px; background-color: #f5f6fb"
-          :native-scrollbar="false"
-        >
-          <app-main />
+        <n-layout position="absolute" style="top: 60px; background-color: #f5f6fb" :native-scrollbar="false">
+          <AppMain />
         </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/main.js

@@ -2,18 +2,18 @@ import '@/styles/index.scss'
 import 'uno.css'
 
 import { createApp } from 'vue'
-import App from './App.vue'
-
 import { setupRouter } from '@/router'
 import { setupStore } from '@/store'
+import App from './App.vue'
 
-async function bootstrap() {
+function setupApp() {
   const app = createApp(App)
 
   setupStore(app)
+
   setupRouter(app)
 
-  app.mount('#app', true)
+  app.mount('#app')
 }
 
-bootstrap()
+setupApp()

src/router/guard/index.js

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

src/router/guard/page-loading-guard.js

@@ -1,15 +1,15 @@
 export function createPageLoadingGuard(router) {
   router.beforeEach(() => {
-    $loadingBar.start()
+    window.$loadingBar?.start()
   })
 
   router.afterEach(() => {
     setTimeout(() => {
-      $loadingBar.finish()
+      window.$loadingBar?.finish()
     }, 200)
   })
 
   router.onError(() => {
-    $loadingBar.error()
+    window.$loadingBar?.error()
   })
 }

src/router/guard/page-title-guard.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/router/index.js

@@ -11,9 +11,10 @@ export const router = createRouter({
 export function resetRouter() {
   router.getRoutes().forEach((route) => {
     const { name } = route
-    if (name && !WHITE_NAME_LIST.includes(name)) {
     router.hasRoute(name) && router.removeRoute(name)
-    }
+  })
+  basicRoutes.forEach((route) => {
+    !router.hasRoute(route.name) && router.addRoute(route)
   })
 }
 

src/router/routes/index.js

@@ -1,5 +1,7 @@
 import Layout from '@/layout/index.vue'
-import Dashboard from '@/views/dashboard/index.vue'
+import Home from '@/views/dashboard/index.vue'
+
+import { IconAlert, IconChart, IconGitee, IconGithub, IconHome, IconLink, IconVue } from '@/components/AppIcons'
 
 export const basicRoutes = [
   {
@@ -8,12 +10,6 @@ export const basicRoutes = [
     component: () => import('@/views/error-page/404.vue'),
     isHidden: true,
   },
-  {
-    name: '401',
-    path: '/401',
-    component: () => import('@/views/error-page/401.vue'),
-    isHidden: true,
-  },
   {
     name: 'REDIRECT',
     path: '/redirect',
@@ -27,7 +23,6 @@ export const basicRoutes = [
       },
     ],
   },
-
   {
     name: 'LOGIN',
     path: '/login',
@@ -39,20 +34,22 @@ export const basicRoutes = [
   },
 
   {
-    name: 'HOME',
+    name: 'DASHBOARD',
     path: '/',
     component: Layout,
-    redirect: '/dashboard',
+    redirect: '/home',
     meta: {
-      title: '首页',
+      title: 'Dashboard',
+      icon: IconChart,
     },
     children: [
       {
-        name: 'DASHBOARD',
-        path: 'dashboard',
-        component: Dashboard,
+        name: 'HOME',
+        path: 'home',
+        component: Home,
         meta: {
-          title: 'Dashboard',
+          title: '首页',
+          icon: IconHome,
         },
       },
     ],
@@ -64,7 +61,7 @@ export const basicRoutes = [
     component: Layout,
     redirect: '/test/unocss',
     meta: {
-      title: '测试',
+      title: '基础功能测试',
     },
     children: [
       {
@@ -91,6 +88,72 @@ export const basicRoutes = [
           title: '测试Dialog',
         },
       },
+      {
+        name: 'TEST-KEEP-ALIVE',
+        path: 'keep-alive',
+        component: () => import('@/views/test-page/TestKeepAlive.vue'),
+        meta: {
+          title: '测试Keep-Alive',
+          keepAlive: true,
+        },
+      },
+    ],
+  },
+
+  {
+    name: 'ERROR-PAGE',
+    path: '/error-page',
+    component: Layout,
+    redirect: '/error-page/404',
+    meta: {
+      title: '错误页',
+      icon: IconAlert,
+    },
+    children: [
+      {
+        name: 'ERROR-404',
+        path: '404',
+        component: () => import('@/views/error-page/404.vue'),
+        meta: {
+          title: '404',
+        },
+      },
+    ],
+  },
+
+  {
+    name: 'EXTERNAL-LINK',
+    path: '/external-link',
+    component: Layout,
+    meta: {
+      title: '外部链接',
+      icon: IconLink,
+    },
+    children: [
+      {
+        name: 'LINK-GITHUB-SRC',
+        path: 'https://github.com/zclzone/vue-naive-admin',
+        meta: {
+          title: '源码 - github',
+          icon: IconGithub,
+        },
+      },
+      {
+        name: 'LINK-GITEE-SRC',
+        path: 'https://gitee.com/zclzone/vue-naive-admin',
+        meta: {
+          title: '源码 - gitee',
+          icon: IconGitee,
+        },
+      },
+      {
+        name: 'LINK-DOCS',
+        path: 'https://zclzone.github.io/vue-naive-admin-docs',
+        meta: {
+          title: '文档 - vuepress',
+          icon: IconVue,
+        },
+      },
     ],
   },
 ]

src/router/routes/modules/example.js

@@ -0,0 +1,46 @@
+import Layout from '@/layout/index.vue'
+
+export default [
+  {
+    name: 'EXAMPLE',
+    path: '/example',
+    component: Layout,
+    redirect: '/example/table',
+    meta: {
+      title: '组件示例',
+      role: ['admin'],
+    },
+    children: [
+      {
+        name: 'EXAMPLE-TABLE',
+        path: 'table',
+        component: () => import('@/views/examples/table/index.vue'),
+        redirect: '/example/table/post',
+        meta: {
+          title: '表格',
+          role: ['admin'],
+        },
+        children: [
+          {
+            name: 'POST-LIST',
+            path: 'post',
+            component: () => import('@/views/examples/table/post/index.vue'),
+            meta: {
+              title: '文章列表',
+              role: ['admin'],
+            },
+          },
+          {
+            name: 'POST-CREATE',
+            path: 'post-create',
+            component: () => import('@/views/examples/table/post/post-create.vue'),
+            meta: {
+              title: '创建文章',
+              role: ['admin'],
+            },
+          },
+        ],
+      },
+    ],
+  },
+]

src/router/routes/modules/user.js

@@ -1,34 +0,0 @@
-import Layout from '@/layout/index.vue'
-
-export default [
-  {
-    name: 'USER_MANAGER',
-    path: '/user',
-    component: Layout,
-    redirect: '/user/management',
-    meta: {
-      title: '用户中心',
-      role: ['admin'],
-    },
-    children: [
-      {
-        name: 'USER',
-        path: 'management',
-        component: () => import('@/views/user/index.vue'),
-        meta: {
-          title: '用户管理',
-          role: ['admin'],
-        },
-      },
-      {
-        name: 'PERMISSION',
-        path: 'permission',
-        component: () => import('@/views/user/UserPermission.vue'),
-        meta: {
-          title: '权限管理',
-          role: ['admin'],
-        },
-      },
-    ],
-  },
-]

src/store/modules/user.js

@@ -42,5 +42,8 @@ export const useUserStore = defineStore('user', {
       removeToken()
       this.userInfo = {}
     },
+    setUserInfo(userInfo = {}) {
+      this.userInfo = { ...this.userInfo, ...userInfo }
+    },
   },
 })

src/utils/cache/index.js

@@ -1,4 +1,4 @@
-import { createWebStorage } from './webStorage'
+import { createWebStorage } from './web-storage'
 
 export const createLocalStorage = function (option = {}) {
   return createWebStorage({ prefixKey: option.prefixKey || '', storage: localStorage })

src/utils/is.js

@@ -97,6 +97,14 @@ export function isUrl(path) {
   return reg.test(path)
 }
 
+/**
+ * @param {string} path
+ * @returns {Boolean}
+ */
+export function isExternal(path) {
+  return /^(https?:|mailto:|tel:)/.test(path)
+}
+
 export const isServer = typeof window === 'undefined'
 
 export const isClient = !isServer

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/401.vue

@@ -1,3 +0,0 @@
-<template>
-  <h1>401</h1>
-</template>

src/views/error-page/404.vue

@@ -1,3 +1,27 @@
 <template>
-  <h1>404</h1>
+  <div class="page-404">
+    <n-result status="404" description="抱歉，您访问的页面不存在。">
+      <template #icon>
+        <img src="@/assets/images/404.png" width="500" />
       </template>
+      <template #footer>
+        <n-button strong secondary type="primary" @click="replace('/')">返回首页</n-button>
+      </template>
+    </n-result>
+  </div>
+</template>
+
+<script setup>
+import { useRouter } from 'vue-router'
+const { replace } = useRouter()
+</script>
+
+<style lang="scss" scoped>
+.page-404 {
+  height: 100%;
+  min-height: calc(100vh - 60px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/views/examples/table/index.vue

@@ -0,0 +1,3 @@
+<template>
+  <router-view></router-view>
+</template>

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

@@ -0,0 +1,98 @@
+<template>
+  <div p24>
+    <div class="action-btns">
+      <n-button size="small" type="primary" @click="handleCreate">新建文章</n-button>
+    </div>
+    <n-data-table
+      mt-20
+      :loading="loading"
+      :scroll-x="1600"
+      :data="tableData"
+      :columns="columns"
+      :pagination="pagination"
+      :row-key="(row) => row.id"
+      max-height="calc(100vh - 250px)"
+      @update:checked-row-keys="handleCheck"
+    />
+  </div>
+</template>
+
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import { useRouter } from 'vue-router'
+
+import { getTableData, createColumns } from './post-table'
+
+const router = useRouter()
+
+// 静态变量
+const columns = createColumns({
+  handleDelete,
+  handleRecommend,
+  handlePublish,
+})
+
+// refs
+let tableData = ref([])
+let pagination = ref({ pageSize: 10 })
+let loading = ref(false)
+
+// 钩子函数
+onBeforeMount(() => {
+  initTableData()
+})
+
+// fns
+async function initTableData() {
+  loading.value = true
+  tableData.value = await getTableData()
+  loading.value = false
+}
+
+function handleCreate() {
+  router.push('/example/table/post-create')
+}
+
+function handleDelete(row) {
+  if (row && row.id) {
+    $dialog.confirm({
+      content: '确定删除？',
+      confirm() {
+        $message.success('删除成功')
+        initTableData()
+      },
+      cancel() {
+        $message.success('已取消')
+      },
+    })
+  }
+}
+
+async function handleRecommend(row) {
+  if (row && row.id) {
+    row.recommending = true
+    setTimeout(() => {
+      $message.success(row.isRecommend ? '已取消推荐' : '已推荐')
+      row.recommending = false
+    }, 800)
+  }
+}
+
+async function handlePublish(row) {
+  if (row && row.id) {
+    row.publishing = true
+    setTimeout(() => {
+      $message.success(row.isPublish ? '已取消推荐' : '已推荐')
+      row.publishing = false
+    }, 800)
+  }
+}
+
+function handleCheck(rowKeys) {}
+</script>
+
+<style lang="scss" scoped>
+.action-btns {
+  display: flex;
+}
+</style>

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

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <div class="header">
+      <input v-model="post.title" type="text" placeholder="输入文章标题..." class="title" />
+      <n-button type="primary" style="width: 80px" :loading="btnLoading" @click="handleSavePost">保存</n-button>
+    </div>
+    <MdEditor v-model="post.content" style="height: calc(100vh - 140px)" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+import MdEditor from 'md-editor-v3'
+import 'md-editor-v3/lib/style.css'
+
+const router = useRouter()
+
+// refs
+let post = ref({})
+let btnLoading = ref(false)
+
+function handleSavePost(e) {
+  btnLoading.value = true
+  $message.loading('正在保存...')
+  setTimeout(() => {
+    $message.success('保存成功')
+    btnLoading.value = false
+    router.push('/example/table/post')
+  }, 2000)
+}
+</script>
+
+<style lang="scss">
+.md-preview {
+  ul,
+  ol {
+    list-style: revert;
+  }
+}
+</style>
+
+<style lang="scss" scoped>
+.header {
+  background-color: #fff;
+  height: 60px;
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  .title {
+    flex: 1;
+    padding: 15px 0;
+    margin-right: 20px;
+    font-size: 20px;
+    font-weight: bold;
+    color: $primaryColor;
+  }
+}
+</style>

src/views/examples/table/post/post-table.js

@@ -0,0 +1,99 @@
+import { h } from 'vue'
+import { NButton, NSwitch } from 'naive-ui'
+import { getPosts } from '@/api/post'
+import { formatDateTime } from '@/utils'
+
+export async function getTableData() {
+  try {
+    const res = await getPosts()
+    if (res.code === 0) {
+      return res.data
+    }
+    console.warn(res.message)
+    return []
+  } catch (error) {
+    console.error(error)
+    return []
+  }
+}
+
+export function createColumns({ handleDelete, handleRecommend, handlePublish }) {
+  return [
+    { type: 'selection' },
+    { title: '标题', key: 'title', width: 150 },
+    { title: '分类', key: 'category', width: 80 },
+    {
+      title: '描述',
+      key: 'description',
+      width: 200,
+    },
+    { title: '创建人', key: 'author', width: 80 },
+    {
+      title: '创建时间',
+      key: 'createDate',
+      width: 150,
+      render(row) {
+        return h('span', formatDateTime(row['createDate']))
+      },
+    },
+    {
+      title: '最后更新时间',
+      key: 'updateDate',
+      width: 150,
+      render(row) {
+        return h('span', formatDateTime(row['updateDate']))
+      },
+    },
+    {
+      title: '推荐',
+      key: 'isRecommend',
+      width: 100,
+      align: 'center',
+      fixed: 'right',
+      render(row) {
+        return h(NSwitch, {
+          size: 'small',
+          defaultValue: row['isRecommend'],
+          loading: !!row.recommending,
+          onUpdateValue: () => handleRecommend(row),
+        })
+      },
+    },
+    {
+      title: '发布',
+      key: 'isPublish',
+      width: 100,
+      align: 'center',
+      fixed: 'right',
+      render(row) {
+        return h(NSwitch, {
+          size: 'small',
+          defaultValue: row['isPublish'],
+          loading: !!row.publishing,
+          onUpdateValue: () => handlePublish(row),
+        })
+      },
+    },
+    {
+      title: '操作',
+      key: 'actions',
+      width: 120,
+      align: 'center',
+      fixed: 'right',
+      render(row) {
+        return [
+          h(
+            NButton,
+            {
+              size: 'small',
+              type: 'error',
+              style: 'margin-left: 15px;',
+              onClick: () => handleDelete(row),
+            },
+            { default: () => '删除' }
+          ),
+        ]
+      },
+    },
+  ]
+}

src/views/login/index.vue

@@ -1,3 +1,67 @@
+<template>
+  <div class="login-page">
+    <div class="wrapper">
+      <div class="left">
+        <img src="@/assets/images/login_banner.png" height="380" alt="login_banner" />
+      </div>
+
+      <div class="form-wrapper">
+        <h5 class="brand">
+          <img src="@/assets/images/logo.svg" width="45" mr-15 alt="logo" />
+          {{ title }}
+        </h5>
+        <div class="form-item" mt-35>
+          <input
+            v-model="loginInfo.name"
+            autofocus
+            type="text"
+            class="input"
+            placeholder="username"
+            @keydown.enter="handleLogin"
+          />
+        </div>
+        <div class="form-item" mt-35>
+          <input
+            v-model="loginInfo.password"
+            type="password"
+            class="input"
+            placeholder="password"
+            @keydown.enter="handleLogin"
+          />
+        </div>
+        <div class="form-item" mt-35>
+          <button class="submit-btn" @click="handleLogin">登录</button>
+        </div>
+      </div>
+    </div>
+    <!-- <div class="form-wrapper">
+      <h2 class="title">{{ title }}</h2>
+      <div class="form-item" mt-20>
+        <input
+          v-model="loginInfo.name"
+          autofocus
+          type="text"
+          class="input"
+          placeholder="username"
+          @keydown.enter="handleLogin"
+        />
+      </div>
+      <div class="form-item" mt-20>
+        <input
+          v-model="loginInfo.password"
+          type="password"
+          class="input"
+          placeholder="password"
+          @keydown.enter="handleLogin"
+        />
+      </div>
+      <div class="form-item" mt-20>
+        <button class="submit-btn" @click="handleLogin">登录</button>
+      </div>
+    </div> -->
+  </div>
+</template>
+
 <script setup>
 import { ref, unref } from 'vue'
 import { useRouter } from 'vue-router'
@@ -38,7 +102,9 @@ async function handleLogin() {
       setToken(res.data.token)
 
       if (query.redirect) {
-        router.push({ path: '/redirect', query })
+        const path = query.redirect
+        Reflect.deleteProperty(query, 'redirect')
+        router.push({ path, query })
       } else {
         router.push('/')
       }
@@ -51,150 +117,75 @@ async function handleLogin() {
 }
 </script>
 
-<template>
-  <div class="login-page">
-    <div class="form-wrapper">
-      <h2 class="title">{{ title }}</h2>
-      <div class="form-item" mt-20>
-        <input
-          v-model="loginInfo.name"
-          autofocus
-          type="text"
-          class="input"
-          placeholder="username"
-          @keydown.enter="handleLogin"
-        />
-      </div>
-      <div class="form-item" mt-20>
-        <input
-          v-model="loginInfo.password"
-          type="password"
-          class="input"
-          placeholder="password"
-          @keydown.enter="handleLogin"
-        />
-      </div>
-      <div class="form-item" mt-20>
-        <button class="submit-btn" @click="handleLogin">登录</button>
-      </div>
-    </div>
-  </div>
-</template>
-
 <style lang="scss" scoped>
-@property --perA {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 75%;
-}
-
-@property --perB {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 99%;
-}
-
-@property --perC {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 15%;
-}
-
-@property --perD {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 16%;
-}
-
-@property --perE {
-  syntax: '<percentage>';
-  inherits: false;
-  initial-value: 86%;
-}
-
-@property --angle {
-  syntax: '<angle>';
-  inherits: false;
-  initial-value: 0deg;
-}
 .login-page {
   height: 100%;
-  background-color: #e1e8ee;
+  background-image: url(@/assets/images/login_bg.jpg);
+  background-size: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-image: radial-gradient(
-      circle at var(--perE) 7%,
-      rgba(40, 40, 40, 0.04) 0%,
-      rgba(40, 40, 40, 0.04) 50%,
-      rgba(200, 200, 200, 0.04) 50%,
-      rgba(200, 200, 200, 0.04) 100%
-    ),
-    radial-gradient(
-      circle at var(--perC) var(--perD),
-      rgba(99, 99, 99, 0.04) 0%,
-      rgba(99, 99, 99, 0.04) 50%,
-      rgba(45, 45, 45, 0.04) 50%,
-      rgba(45, 45, 45, 0.04) 100%
-    ),
-    radial-gradient(
-      circle at var(--perA) var(--perB),
-      rgba(243, 243, 243, 0.04) 0%,
-      rgba(243, 243, 243, 0.04) 50%,
-      rgba(37, 37, 37, 0.04) 50%,
-      rgba(37, 37, 37, 0.04) 100%
-    ),
-    linear-gradient(var(--angle), #22deed, #8759d7);
-  animation: move 30s infinite alternate linear;
-
-  @keyframes move {
-    100% {
-      --perA: 85%;
-      --perB: 49%;
-      --perC: 45%;
-      --perD: 39%;
-      --perE: 70%;
-      --angle: 360deg;
 }
+
+.wrapper {
+  width: 100%;
+  max-width: 1020px;
+  box-shadow: 1.5px 3.99px 27px 0px rgb(0 0 0 / 10%);
+  background-color: rgba(255, 255, 255, 0.3);
+
+  display: flex;
+  .left {
+    padding: 40px;
+    border-right: 1px solid #cccccc5e;
   }
 }
 
 .form-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  .brand {
+    width: 100%;
+    padding: 15px;
+    color: #6a6a6a;
+    font-size: 24px;
+    font-weight: normal;
     text-align: center;
-  padding: 40px 50px;
-  border-radius: 15px;
-  background-color: rgba(#fff, 0.2);
 
-  .title {
-    font-size: 22px;
-    color: #f3f3f3;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
-
   .form-item {
-    width: 240px;
+    width: 100%;
+    max-width: 360px;
+    height: 50px;
     input {
       width: 100%;
-      height: 40px;
-      padding: 0 15px;
+      height: 100%;
+      padding: 0 20px;
+      border: 1px solid #6a6a6a;
       border-radius: 5px;
-
-      font-size: 14px;
-      color: #333;
-      transition: 0.3s;
+      color: $primaryColor;
+      font-size: 16px;
+      transition: 0.5s;
       &:focus {
-        box-shadow: 0 0 5px #8759d7;
+        border-color: $primaryColor;
+        box-shadow: 0 0 5px $primaryColor;
       }
     }
     button {
       width: 100%;
-      height: 40px;
+      height: 100%;
 
       color: #fff;
-      font-size: 14px;
+      font-size: 16px;
       font-weight: bold;
       border: none;
       border-radius: 5px;
-      background-color: #6683d2;
+      background-color: $primaryColor;
 
       cursor: pointer;
       transition: all 0.3s;

src/views/redirect/index.vue

@@ -1,3 +1,5 @@
+<template></template>
+
 <script setup>
 import { useRouter } from 'vue-router'
 
@@ -19,5 +21,3 @@ replace({
   query,
 })
 </script>
-
-<template></template>

src/views/test-page/TestDialog.vue

@@ -1,5 +1,10 @@
+<template>
+  <div p24>
+    <n-button type="error" @click="handleDelete">删除</n-button>
+  </div>
+</template>
+
 <script setup name="TestDialog">
-import { NButton } from 'naive-ui'
 const handleDelete = function () {
   $dialog.confirm({
     content: '确认删除？',
@@ -12,7 +17,3 @@ const handleDelete = function () {
   })
 }
 </script>
-
-<template>
-  <n-button @click="handleDelete">删除</n-button>
-</template>

src/views/test-page/TestKeepAlive.vue

@@ -0,0 +1,22 @@
+<template>
+  <div p24>
+    <n-gradient-text gradient="linear-gradient(90deg, red 0%, green 50%, blue 100%)"> 注意查看提示语 </n-gradient-text>
+  </div>
+</template>
+
+<!--使用keep-alive须设置name，注意请与对应的路由的name保持一致，方便统一处理-->
+<script setup name="TEST-KEEP-ALIVE">
+import { onMounted, onActivated, onDeactivated } from 'vue'
+
+onMounted(() => {
+  $message.success('触发onMounted')
+})
+
+onActivated(() => {
+  $message.success('触发onActivated')
+})
+
+onDeactivated(() => {
+  $message.success('触发onDeactivated')
+})
+</script>

src/views/test-page/TestMessage.vue

@@ -1,6 +1,10 @@
-<script setup>
-import { NButton } from 'naive-ui'
+<template>
+  <div p24>
+    <n-button type="primary" @click="handleLogin">点击登陆</n-button>
+  </div>
+</template>
 
+<script setup>
 function handleLogin() {
   $message.loading('登陆中...')
   setTimeout(() => {
@@ -12,7 +16,3 @@ function handleLogin() {
   }, 2000)
 }
 </script>
-
-<template>
-  <n-button @click="handleLogin">点击登陆</n-button>
-</template>

src/views/test-page/TestUnocss.vue

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

src/views/user/UserPermission.vue

@@ -1,3 +0,0 @@
-<template>
-  <h1>权限管理</h1>
-</template>

src/views/user/index.vue

@@ -1,5 +0,0 @@
-<script setup></script>
-
-<template>
-  <h1>用户管理</h1>
-</template>