fix: 修复VueDevTools不生效问题

chore: 使用vue-devtool

.cz-config.js

@@ -0,0 +1,45 @@
+module.exports = {
+  types: [
+    { value: 'feat',      name:'feat:      新增功能' },
+    { value: 'fix',       name:'fix:       修复bug' },
+    { value: 'docs',      name:'docs:      文档变更' },
+    { value: 'style',     name:'style:     代码格式（不影响功能，例如空格、分号等格式修正）' },
+    { value: 'refactor',  name:'refactor:  代码重构（不包括 bug 修复、功能新增）' },
+    { value: 'perf',      name:'perf:      性能优化' },
+    { value: 'test',      name:'test:      添加、修改测试用例' },
+    { value: 'build',     name:'build:     构建流程、外部依赖变更（如升级 npm 包、修改 脚手架 配置等）' },
+    { value: 'ci',        name:'ci:        修改 CI 配置、脚本' },
+    { value: 'chore',     name:'chore:     对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
+    { value: 'revert',    name:'revert:    回滚 commit' },
+    { value: 'wip',       name:'wip:       开发中' },
+    { value: 'mod',       name:'mod:       不确定分类的修改' },
+    { value: 'release',   name:'release:   发布' },
+  ],
+  scopes: [
+    ['custom', '自定义'],
+		['projects', '项目搭建'],
+    ['components', '组件相关'],
+    ['utils', 'utils 相关'],
+    ['styles', '样式相关'],
+    ['deps', '项目依赖'],
+    ['other', '其他修改'],
+  ].map(([value, description]) => {
+    return {
+      value,
+      name: `${value.padEnd(30)} (${description})`
+    }
+  }),
+  messages: {
+    type: '确保本次提交遵循 Angular 规范！选择你要提交的类型：\n',
+    scope: '选择一个 scope（可选）：',
+    customScope: '请输入自定义的 scope：',
+    subject: '填写简短精炼的变更描述：',
+    body: '填写更加详细的变更描述（可选）。使用 "|" 换行：',
+    breaking: '列举非兼容性重大的变更（可选）：',
+    footer: '列举出所有变更的 Issues Closed（可选）。 例如: #31, #34：',
+    confirmCommit: '确认提交？'
+  },
+  allowBreakingChanges: ['feat', 'fix'],
+  subjectLimit: 100,
+  breaklineChar: '|'
+}

.env

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

.env.development

@@ -2,13 +2,10 @@
 VITE_PUBLIC_PATH = '/'
 
 # 是否启用MOCK
-VITE_APP_USE_MOCK = true
+VITE_USE_MOCK = true
 
-# proxy
+# 是否启用MOCK
-VITE_PROXY = [["/api","http://localhost:8080"],["/api-test","localhost:8080"]]
+VITE_USE_PROXY = true
 
 # base api
-VITE_APP_GLOB_BASE_API = '/api'
+VITE_BASE_API = '/api'
-
-# test base api
-VITE_APP_GLOB_BASE_API_TEST = '/api-test'

.env.github

@@ -0,0 +1,13 @@
+# 自定义域名CNAME
+# VITE_CNAME = 'template.isme.top'
+
+# 资源公共路径,需要以 /开头和结尾
+VITE_PUBLIC_PATH = '/vue-naive-admin/'
+
+VITE_USE_HASH = true
+
+# 是否启用MOCK
+VITE_USE_MOCK = true
+
+# base api
+VITE_BASE_API = '/api'

.env.production

@@ -2,10 +2,13 @@
 VITE_PUBLIC_PATH = '/'
 
 # 是否启用MOCK
-VITE_APP_USE_MOCK = true
+VITE_USE_MOCK = true
 
 # base api
-VITE_APP_GLOB_BASE_API = '/api'
+VITE_BASE_API = '/api'
 
-# test base api
+# 是否启用压缩
-VITE_APP_GLOB_BASE_API_TEST = '/api-test'
+VITE_USE_COMPRESS = false
+
+# 压缩类型
+VITE_COMPRESS_TYPE = gzip

.env.staging

@@ -1,11 +0,0 @@
-# 资源公共路径,需要以 /开头和结尾
-VITE_PUBLIC_PATH = '/'
-
-# 是否启用MOCK
-VITE_APP_USE_MOCK = false
-
-# base api
-VITE_APP_GLOB_BASE_API = 'http://localhost:8080/api'
-
-# test base api
-VITE_APP_GLOB_BASE_API_TEST = 'http://localhost:8080/api-test'

.env.test

@@ -1,10 +1,7 @@
 VITE_PUBLIC_PATH = '/'
 
 # 是否启用MOCK
-VITE_APP_USE_MOCK = true
+VITE_USE_MOCK = true
 
 # base api
-VITE_APP_GLOB_BASE_API = '/api'
+VITE_BASE_API = '/api'
-
-# test base api
-VITE_APP_GLOB_BASE_API_TEST = '/api-test'

.eslint-global-variables.json

@@ -0,0 +1,62 @@
+{
+  "globals": {
+    "$loadingBar": true,
+    "$message": true,
+    "defineOptions": true,
+    "$dialog": true,
+    "$notification": true,
+    "EffectScope": true,
+    "computed": true,
+    "createApp": true,
+    "customRef": true,
+    "defineAsyncComponent": true,
+    "defineComponent": true,
+    "effectScope": true,
+    "getCurrentInstance": true,
+    "getCurrentScope": true,
+    "h": true,
+    "inject": true,
+    "isProxy": true,
+    "isReactive": true,
+    "isReadonly": true,
+    "isRef": true,
+    "markRaw": true,
+    "nextTick": true,
+    "onActivated": true,
+    "onBeforeMount": true,
+    "onBeforeUnmount": true,
+    "onBeforeUpdate": true,
+    "onDeactivated": true,
+    "onErrorCaptured": true,
+    "onMounted": true,
+    "onRenderTracked": true,
+    "onRenderTriggered": true,
+    "onScopeDispose": true,
+    "onServerPrefetch": true,
+    "onUnmounted": true,
+    "onUpdated": true,
+    "provide": true,
+    "reactive": true,
+    "readonly": true,
+    "ref": true,
+    "resolveComponent": true,
+    "shallowReactive": true,
+    "shallowReadonly": true,
+    "shallowRef": true,
+    "toRaw": true,
+    "toRef": true,
+    "toRefs": true,
+    "triggerRef": true,
+    "unref": true,
+    "useAttrs": true,
+    "useCssModule": true,
+    "useCssVars": true,
+    "useRoute": true,
+    "useRouter": true,
+    "useSlots": true,
+    "watch": true,
+    "watchEffect": true,
+    "watchPostEffect": true,
+    "watchSyncEffect": true
+  }
+}

.eslintignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 public
+package.json

.eslintrc.js

@@ -1,26 +0,0 @@
-// * https://zhuanlan.zhihu.com/p/388703150
-module.exports = {
-  root: true,
-  env: {
-    browser: true, // browser global variables
-    node: true,
-    es2021: true, // adds all ECMAScript 2021 globals and automatically sets the ecmaVersion parser option to 12.
-  },
-  parserOptions: {
-    ecmaVersion: 2020,
-  },
-  parser: 'vue-eslint-parser',
-  extends: ['plugin:vue/vue3-recommended', 'plugin:prettier/recommended'],
-  plugins: ['prettier'],
-  rules: {
-    'prettier/prettier': 'error',
-    'vue/valid-template-root': 'off',
-    'vue/no-multiple-template-root': 'off',
-    'vue/multi-word-component-names': [
-      'error',
-      {
-        ignores: ['index', '401', '404'],
-      },
-    ],
-  },
-}

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: ['https://afdian.net/a/isme-admin']

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 dist
 *.local
+stats.html

.husky/_/husky.sh

@@ -0,0 +1,36 @@
+#!/usr/bin/env sh
+if [ -z "$husky_skip_init" ]; then
+  debug () {
+    if [ "$HUSKY_DEBUG" = "1" ]; then
+      echo "husky (debug) - $1"
+    fi
+  }
+
+  readonly hook_name="$(basename -- "$0")"
+  debug "starting $hook_name..."
+
+  if [ "$HUSKY" = "0" ]; then
+    debug "HUSKY env variable is set to 0, skipping hook"
+    exit 0
+  fi
+
+  if [ -f ~/.huskyrc ]; then
+    debug "sourcing ~/.huskyrc"
+    . ~/.huskyrc
+  fi
+
+  readonly husky_skip_init=1
+  export husky_skip_init
+  sh -e "$0" "$@"
+  exitCode="$?"
+
+  if [ $exitCode != 0 ]; then
+    echo "husky - $hook_name hook exited with code $exitCode (error)"
+  fi
+
+  if [ $exitCode = 127 ]; then
+    echo "husky - command not found in PATH=$PATH"
+  fi
+
+  exit $exitCode
+fi

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit "$1"

.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint:staged

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+  "printWidth": 100,
+  "singleQuote": true,
+  "semi": false,
+  "endOfLine": "lf",
+  "htmlWhitespaceSensitivity": "ignore"
+}

.vscode/extensions.json

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

.vscode/launch.json

@@ -0,0 +1,14 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "一键启动",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": ["run-script", "dev"],
+      "console": "integratedTerminal",
+      "skipFiles": ["<node_internals>/**"]
+    }
+  ]
+}

.vscode/settings.json

@@ -1,26 +1,30 @@
 {
-  "files.eol": "\n",
+  "editor.formatOnSave": true,
-  "path-intellisense.mappings": {
-    "@/": "${workspaceRoot}/src"
-  },
   "editor.defaultFormatter": "esbenp.prettier-vscode",
-  "[jsonc]": {
+  "prettier.printWidth": 120,
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "prettier.singleQuote": true,
-  },
+  "prettier.semi": false,
-  "[html]": {
+  "prettier.endOfLine": "lf",
-    "editor.defaultFormatter": "vscode.html-language-features"
+  "files.eol": "\n",
-  },
+
   "[javascript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.formatOnSave": false
   },
-  "[css]": {
+  "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.formatOnSave": false
+  },
+  "[typescriptreact]": {
+    "editor.formatOnSave": false
   },
   "[vue]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.formatOnSave": false
   },
+  "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": "explicit"
   },
-  "eslint.validate": ["javascript", "javascriptreact", "typescript"]
+  "files.associations": {
+    "*.env.*": "dotenv",
+    "*.css": "postcss"
+  }
 }

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ronnie Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.EN.md

@@ -0,0 +1,208 @@
+<p align="center">
+  <a href="https://github.com/zclzone/vue-naive-admin">
+    <img alt="Vue Naive Admin Logo" width="200" src="./src/assets/images/logo.png">
+  </a>
+</p>
+<p align="center">
+  <a href="./LICENSE"><img allt="MIT License" src="https://badgen.net/github/license/zclzone/vue-naive-admin"/></a>
+</p>
+
+<p align='center'>
+  <b>英文</b> | 
+  <a href="https://github.com/zclzone/vue-naive-admin/blob/main/README.md">中文</a>
+</p>
+
+### Introduction
+
+[Vue Naive Admin](https://github.com/zclzone/vue-naive-admin) is a **completely open source free and commercially allowed ** admin template，Based on the latest technology stack of front-end such as `Vue3、Vite3、Pinia、Unocss and Naive UI`. Compared with other more popular backend management templates, this project is more concise, lightweight, fresh style, very low learning costs, ideal for small and medium-sized projects or personal projects.
+
+### Features
+
+- 🍒 Integrated [Naive UI](https://www.naiveui.com)，recommended by Evan You.
+- 🍑 Integrated login, logout and permission verification.
+- 🍐 Integrated multi-environment configuration, dev, test, production and github pages environments.
+- 🍎 Integrated `eslint + prettier`.
+- 🍌 Integrated `husky + commitlint`.
+- 🍉 Integrated `Mock`.
+- 🍍 Integrated `pinia`，lightweight, simple and easy to use alternative to vuex.
+- 📦 Integrated `unplugin` auto import.
+- 🤹 Integrated `iconify` icon，support custom svg icons.
+- 🍇 Integrated `unocss`.
+
+### Preview
+
+[https://template.isme.top](https://template.isme.top)
+
+[https://base.isme.top](https://base.isme.top)
+
+### Docs
+
+[Vue Naive Admin Docs](https://zclzone.github.io/vue-naive-admin-docs)
+
+
+### Getting Started
+
+```shell
+# Recommended setup git autocrlf 为 false
+git config --global core.autocrlf false
+
+# Clone Project
+git clone https://github.com/zclzone/vue-naive-admin.git
+
+cd vue-naive-admin
+
+# Install dependencies(Recommended use pnpm: https://pnpm.io/zh/installation)
+npm i -g pnpm # Installed and can be ignored
+pnpm i # or npm i
+
+# Start
+pnpm dev
+```
+
+### Build and Release
+
+```shell
+# Test Environment
+pnpm build:test
+
+# Github Environment
+pnpm build:github
+
+# Prod Environment
+pnpm build
+```
+
+### Other
+
+```shell
+# eslint check
+pnpm lint
+
+# eslint check and fix
+pnpm lint:fix
+
+# Preview（Need to build first）
+pnpm preview
+
+# Commit（husky+commitlint）
+pnpm cz
+```
+
+### Directory description
+
+```
+Vue Naive Admin
+|-- .github                             // github相关，如推送github仓库后自动部署gh pages
+|-- .husky                              // git commit钩子
+|-- .vscode                             // vscode编辑器相关
+|   |-- extensions.json                 // 插件推荐
+|   |-- settings.json                   // 项目级别的vscode配置，优先级大于全局vscode配置
+|-- build                               // 构建相关配置
+|   |-- constant.js                     // 构建相关的常量
+|   |-- utils.js                        // 构建相关的工具方法
+|   |-- config                          
+|   |   |-- define.js                   // 注入全局常量，启动或打包后将添加到window中
+|   |   |-- proxy.js                    // 代理配置
+|   |-- plugin                          
+|   |   |-- html.js                     // vite-plugin-html插件，用于注入变量或者html标签
+|   |   |-- mock.js                     // vite-plugin-mock插件，处理mock
+|   |   |-- unplugin.js                 // unplugin相关插件，包含DefineOptions和自动导入
+|   |-- script                          // 打包完成后执行的一些node脚本（不重要）
+|       |-- build-cname.js              // 自动生成cname
+|-- mock                                // mock
+|   |-- utils.js                        // mock请求需要用到的工具方法
+|   |-- api                             // mock接口
+|-- public                              // 公共资源，文件夹下的文件会在打包后会直接加到dist根目录下
+|-- settings                            // 项目配置
+|   |-- proxy-config.js                 // 代理配置文件
+|   |-- theme.json                      // 主题配置项，主题色等
+|-- src
+|   |-- api                             // 公共api
+|   |-- assets                          // 静态资源
+|   |   |-- images                      // 图片
+|   |   |-- svg                         // svg图标
+|   |-- components                      // 全局组件
+|   |   |-- common                      // 公共组件
+|   |   |-- icon                        // icon相关组件
+|   |   |-- page                        // 页面组件
+|   |   |-- query-bar                   // 查询选项
+|   |   |-- table                       // 封装的表格组件
+|   |-- composables                     // 封装的组合式函数
+|   |-- layout                          // 布局相关组件
+|   |   |-- components
+|   |       |-- AppMain.vue             // 主体内容
+|   |       |-- header                  // 头部
+|   |       |-- sidebar                 // 侧边菜单栏
+|   |       |-- tags                    // 多页签栏
+|   |-- router                          // 路由
+|   |   |-- guard                       // 路由守卫
+|   |   |-- routes                      // 路由列表
+|   |-- store                           // 状态管理（pinia）
+|   |   |-- modules                     // 模块
+|   |       |-- app                     // 管理页面重新加载、折叠菜单栏和keepAlive等
+|   |       |-- permission              // 权限相关，管理权限菜单
+|   |       |-- tags                    // 管理多页签
+|   |       |-- user                    // 用户模块，管理用户信息、登录登出
+|   |-- styles                          // 样式
+|   |-- utils                           // 封装的工具方法
+|   |   |-- auth                        // 权限相关，如token、跳转登录页等
+|   |   |-- common                      // 通用
+|   |   |-- http                        // 封装axios
+|   |   |-- storage                     // 封装localStorage和sessionStorage
+|   |-- views                           // 页面
+|   |   |-- demo                        // 示例
+|   |   |-- error-page                  // 错误页
+|   |   |-- login                       // 登录页
+|   |   |-- workbench                   // 首页  
+|   |-- App.vue
+|   |-- main.js
+|-- .cz-config.js                       // git提交配置
+|-- .editorconfig                       // 编辑器配置
+|-- .env                                // 环境文件，所有环境都会载入
+|-- .env.development                    // 开发环境文件
+|-- .env.production                     // 生产环境文件
+|-- .env.test                           // 测试环境文件
+|-- .eslintignore                       // eslint忽略
+|-- .eslintrc.js                        // eslint配置
+|-- .gitignore                          // git忽略
+|-- .prettierignore                     // prettier格式化忽略
+|-- commitlint.config.js                // commitlint规范配置
+|-- index.html                          
+|-- jsconfig.json                       // js配置
+|-- LICENSE                             // 协议
+|-- package.json                        // 依赖描述文件
+|-- pnpm-lock.yaml                      // 依赖锁定文件
+|-- prettier.config.js                  // prettier格式化配置
+|-- README.md                           // 项目描述文档（英文）
+|-- README.zh-CN.md                     // 项目描述文档（中文）
+|-- unocss.config.js                    // unocss配置
+|-- vite.config.js                      // vite配置
+```
+
+### TS version: Qs Admin
+
+#### source code
+
+- github: [https://github.com/zclzone/qs-admin](https://github.com/zclzone/qs-admin)
+- gitee: [https://gitee.com/zclzone/qs-admin-ts](https://gitee.com/zclzone/qs-admin-ts)
+
+#### preview
+
+- [https://admin.isme.top](https://admin.isme.top)
+- [https://zclzone.github.io/qs-admin](https://zclzone.github.io/qs-admin)
+
+### Open source projects that use this project:
+
+- [gin-vue-blog](https://github.com/szluyu99/gin-vue-blog): A full-stack blog project in Golang, the frontend of the blog backend is based on vue-naive-admin and integrates with a real backend service, implementing features such as backend-controlled routing.
+- [vue-fastapi-admin](https://github.com/mizhexiaoxiao/vue-fastapi-admin): A Python backend management project that integrates RBAC permission management, dynamic routing, and JWT authentication, helping small and medium-sized applications to quickly establish a foundation.
+
+### Communication group & About the author
+
+<a href="https://blog.isme.top/about/">
+  <img src="https://static.isme.top/images/about.png?t=123" style="max-width: 400px" />
+</a>
+
+
+
+
+

README.md

@@ -1,33 +1,61 @@
-# VUE NAIVE ADMIN
+<p align="center">
+  <a href="https://github.com/zclzone/vue-naive-admin">
+    <img alt="Vue Naive Admin Logo" width="200" src="./src/assets/images/logo.png">
+  </a>
+</p>
+<p align="center">
+  <a href="./LICENSE"><img alt="MIT License" src="https://badgen.net/github/license/zclzone/vue-naive-admin"/></a>
+</p>
 
-## 简介
+<p align='center'>
+  <b>中文</b> | 
+  <a href="https://github.com/zclzone/vue-naive-admin/blob/main/README.EN.md">English</a>
+</p>
 
-Vue Naive Admin，一个基于 Vue3.0、Vite、Naive UI 的后台管理模板，相较于其他比较流行的后台管理模板，此项目相对简洁、轻量，没有集成 TypeScript，没有集成国际化，没有集成复杂的主题配置，学习成本非常低，对新手极其友好。不过麻雀虽小五脏俱全，权限、Mock、菜单、axios 封装、pinia、项目配置、样式配置、环境配置，以及一些经常用的基础组件封装等等这些该有的都有，经过参考多个 vue3 后台管理模板后以最简洁优雅的方式实现，非常适用于中小型项目或者个人项目，当然，以此模板进行二次封装改造用于大型项目也未尝不可。
+> 🎉🎉🎉 2.0 已开源，全新重构，全面简化，后端使用 nestjs + mysql + typeOrm，[👉点击前往2.0版本 | 分支 2.x](https://github.com/zclzone/vue-naive-admin/tree/2.x),
 
-## 为什么要开发这个模板
+- 体验地址: [admin.isme.top](https://admin.isme.top)
+- 后端服务: [isme-nest-serve](https://github.com/zclzone/isme-nest-serve)
+- 文档: [vue-naive-admin-docs](https://docs.isme.top/web/#/624306705)
 
-1. Vue3 和 Vite 已经趋于成熟，学习 vite 和 vue3 非常有必要，通过开发模板进行学习是一个很好的方式，事实也证明我确实从中获益良多
+### 简介
-2. 目前主流的 Vue3+Vite 后台管理模板都相对复杂，甚至感觉有点花里胡哨（没有贬低的意思，大部分的架构设计都很优秀，只是觉得集成了太多不实用的东西）
-3. 自己搭的模板开发起来才最顺手。本人很反感拿别人的模板直接上手开发，如果非要拿别人的模板开发也会尽量先吃透再用，不吃透就没有代码的掌控感和安全感
 
-## 功能
+[Vue Naive Admin](https://github.com/zclzone/vue-naive-admin) 是一个 **开源免费且允许商用** 的后台管理模板，基于 `Vue3、Vite4、Pinia、Unocss 和 Naive UI` 等前端最新技术栈。相较于其他比较流行的后台管理模板，此项目更加简洁、轻量，风格清新，上手成本非常低，非常适合中小型项目或者个人项目。
 
-- 🍒 集成 Naive UI，尤大推荐的 UI 组件库，很香，https://www.naiveui.com
+### 功能
-- 🍑 集成登陆、注销及权限验证（暂只支持角色页面权限，后续考虑添加按钮权限）
-- 🍐 集成多环境配置，dev、测试、预发布和生产
-- 🍎 集成 eslint + prettier，代码约束和格式化统一
-- 🍉 集成 Mock 接口服务，dev 环境和发布环境都支持，可动态配置是否启用 mock 服务，不启用时不会加载 mock 包，减少打包体积
-- 🍇 集成 unocss，antfu 大神开源的原子化 css 解决方案，非常轻量，目前我是自己写 scss 样式搭配着 unocss 使用的，很香
-- 🍍 集成 pinia，Vuex 的替代方案，轻量、简单、易用，很香
-- 🍏 集成 axios，支持多 axios 实例，支持线上环境免重新打包修改 baseURL
-- 🍌 二次封装全局 Dialog、Message、LoadingBar 组件
-- 🍋 二次封装 localStorage 和 sessionStorage，支持设置过期时间
 
-## 文档
+- 🍒 集成 [Naive UI](https://www.naiveui.com)
+- 🍑 集成登陆、注销及权限验证
+- 🍐 集成多环境配置，dev、测试、生产环境
+- 🍎 集成 `eslint + prettier`，代码约束和格式化统一
+- 🍌 集成 `husky + commitlint`，代码提交规范化
+- 🍉 集成 `mock` 接口服务，dev 环境和发布环境都支持，可动态配置是否启用 mock 服务，不启用时不会加载 mock 包，减少打包体积
+- 🍍 集成 `pinia`，vuex 的替代方案，轻量、简单、易用
+- 📦 集成 `unplugin` 插件，自动导入，解放双手，开发效率直接起飞
+- 🤹 集成 `iconify` 图标，支持自定义 svg 图标, 优雅使用icon
+- 🍇 集成 `unocss`，antfu 开源的原子 css 解决方案，非常轻量
 
-[羽雀文档：Vue Naive Admin](https://www.yuque.com/qszone/vue-naive-admin)
+> ✨✨ 双十一香港特惠服务器推荐，~~**2C4G 100M** `71/年` `142/两年`~~，[👉点击前往](https://blog.isme.top/vps-recommend/)
 
-## 构建步骤
+### 预览
+
+[https://template.isme.top](https://template.isme.top)
+
+[https://base.isme.top](https://base.isme.top)
+
+### 文档
+
+项目文档: [Vue Naive Admin Docs](https://zclzone.github.io/vue-naive-admin-docs)
+
+从0到1搭建后台: [从0到1，带你搭建Vite+Vue3+Pinia+Naive UI后台](https://juejin.cn/column/7093180796424421384)
+
+如何安装pnpm: [安装pnpm](docs/安装pnpm.md)
+
+如何使用图标: [使用图标](docs/使用图标.md)
+
+如何使用unocss: [保熟的UnoCSS使用指北，优雅使用antfu大佬的原子化CSS](https://juejin.cn/post/7142466784971456548)
+
+### 快速开始
 
 ```shell
 # 推荐配置git autocrlf 为 false（本项目规范使用lf换行符，此配置是为防止git自动将源文件转换为crlf）
@@ -40,35 +68,162 @@ git clone https://github.com/zclzone/vue-naive-admin.git
 # 进入项目目录
 cd vue-naive-admin
 
-# 安装依赖
+# 安装依赖(建议使用pnpm: https://pnpm.io/zh/installation)
-npm i
+npm i -g pnpm # 装了可忽略
+pnpm i # 或者 npm i
 
 # 启动
-npm run dev
+pnpm dev
 ```
 
-## 发布
+### 构建发布
 
 ```shell
 # 构建测试环境
-npm run build:test
+pnpm build:test
 
-# 构建预发布环境
+# 构建github pages环境
-npm run build:staging
+pnpm build:github
 
 # 构建生产环境
-npm run build
+pnpm build
 ```
 
-## 其他指令
+### 其他指令
 
 ```shell
 # eslint代码格式检查
-npm run lint
+pnpm lint
 
 # 代码检查并修复
-npm run lint:fix
+pnpm lint:fix
 
 # 预览发布包效果（需先执行构建指令）
-npm run preview
+pnpm preview
+
+# 提交代码（husky+commitlint）
+pnpm cz
 ```
+
+
+### 目录说明
+
+```
+Vue Naive Admin
+|-- .github                             // github相关，如推送github仓库后自动部署gh pages
+|-- .husky                              // git commit钩子
+|-- .vscode                             // vscode编辑器相关
+|   |-- extensions.json                 // 插件推荐
+|   |-- settings.json                   // 项目级别的vscode配置，优先级大于全局vscode配置
+|-- build                               // 构建相关配置
+|   |-- constant.js                     // 构建相关的常量
+|   |-- utils.js                        // 构建相关的工具方法
+|   |-- config                          
+|   |   |-- define.js                   // 注入全局常量，启动或打包后将添加到window中
+|   |   |-- proxy.js                    // 代理配置
+|   |-- plugin                          
+|   |   |-- html.js                     // vite-plugin-html插件，用于注入变量或者html标签
+|   |   |-- mock.js                     // vite-plugin-mock插件，处理mock
+|   |   |-- unplugin.js                 // unplugin相关插件，包含DefineOptions和自动导入
+|   |-- script                          // 打包完成后执行的一些node脚本（不重要）
+|       |-- build-cname.js              // 自动生成cname
+|-- mock                                // mock
+|   |-- utils.js                        // mock请求需要用到的工具方法
+|   |-- api                             // mock接口
+|-- public                              // 公共资源，文件夹下的文件会在打包后会直接加到dist根目录下
+|-- settings                            // 项目配置
+|   |-- proxy-config.js                 // 代理配置文件
+|   |-- theme.json                      // 主题配置项，主题色等
+|-- src
+|   |-- api                             // 公共api
+|   |-- assets                          // 静态资源
+|   |   |-- images                      // 图片
+|   |   |-- svg                         // svg图标
+|   |-- components                      // 全局组件
+|   |   |-- common                      // 公共组件
+|   |   |-- icon                        // icon相关组件
+|   |   |-- page                        // 页面组件
+|   |   |-- query-bar                   // 查询选项
+|   |   |-- table                       // 封装的表格组件
+|   |-- composables                     // 封装的组合式函数
+|   |-- layout                          // 布局相关组件
+|   |   |-- components
+|   |       |-- AppMain.vue             // 主体内容
+|   |       |-- header                  // 头部
+|   |       |-- sidebar                 // 侧边菜单栏
+|   |       |-- tags                    // 多页签栏
+|   |-- router                          // 路由
+|   |   |-- guard                       // 路由守卫
+|   |   |-- routes                      // 路由列表
+|   |-- store                           // 状态管理（pinia）
+|   |   |-- modules                     // 模块
+|   |       |-- app                     // 管理页面重新加载、折叠菜单栏和keepAlive等
+|   |       |-- permission              // 权限相关，管理权限菜单
+|   |       |-- tags                    // 管理多页签
+|   |       |-- user                    // 用户模块，管理用户信息、登录登出
+|   |-- styles                          // 样式
+|   |-- utils                           // 封装的工具方法
+|   |   |-- auth                        // 权限相关，如token、跳转登录页等
+|   |   |-- common                      // 通用
+|   |   |-- http                        // 封装axios
+|   |   |-- storage                     // 封装localStorage和sessionStorage
+|   |-- views                           // 页面
+|   |   |-- demo                        // 示例
+|   |   |-- error-page                  // 错误页
+|   |   |-- login                       // 登录页
+|   |   |-- workbench                   // 首页  
+|   |-- App.vue
+|   |-- main.js
+|-- .cz-config.js                       // git提交配置
+|-- .editorconfig                       // 编辑器配置
+|-- .env                                // 环境文件，所有环境都会载入
+|-- .env.development                    // 开发环境文件
+|-- .env.production                     // 生产环境文件
+|-- .env.test                           // 测试环境文件
+|-- .eslintignore                       // eslint忽略
+|-- .eslintrc.js                        // eslint配置
+|-- .gitignore                          // git忽略
+|-- .prettierignore                     // prettier格式化忽略
+|-- commitlint.config.js                // commitlint规范配置
+|-- index.html                          
+|-- jsconfig.json                       // js配置
+|-- LICENSE                             // 协议
+|-- package.json                        // 依赖描述文件
+|-- pnpm-lock.yaml                      // 依赖锁定文件
+|-- prettier.config.js                  // prettier格式化配置
+|-- README.md                           // 项目描述文档（英文）
+|-- README.zh-CN.md                     // 项目描述文档（中文）
+|-- unocss.config.js                    // unocss配置
+|-- vite.config.js                      // vite配置
+```
+
+### TS 版本: Qs Admin
+
+#### 源码
+
+- github: [https://github.com/zclzone/qs-admin](https://github.com/zclzone/qs-admin)
+- gitee: [https://gitee.com/zclzone/qs-admin-ts](https://gitee.com/zclzone/qs-admin-ts)
+
+#### 预览
+
+- [https://admin.isme.top](https://admin.isme.top)
+- [https://zclzone.github.io/qs-admin](https://zclzone.github.io/qs-admin)
+
+### 使用该项目的开源项目
+
+- [gin-vue-blog](https://github.com/szluyu99/gin-vue-blog): Golang 全栈博客项目, 博客后台的前端基于 vue-naive-admin，对接真实后端服务，实现了后端控制路由等特性。
+- [vue-fastapi-admin](https://github.com/mizhexiaoxiao/vue-fastapi-admin): Python 后台管理项目, 融合了 RBAC 权限管理、动态路由，JWT 鉴权，助力中小型应用快速搭建。
+
+### 入群交流 & 关于作者
+
+<a href="https://blog.isme.top/about/">
+  <img src="https://static.isme.top/images/about.png?t=123" style="max-width: 400px" />
+</a>
+
+### ☕ 赞助我
+
+> 开源不易，请作者喝杯咖啡吧
+<p>
+  <img src="https://static.isme.top/images/zhifu_weixin.jpg" style="width: 220px" />
+  <img src="https://static.isme.top/images/zhifu_zhifubao.jpg" style="width: 220px" />
+</p>

build/constant.js

@@ -1,3 +1,33 @@
-export const GLOB_CONFIG_FILE_NAME = 'app.config.js'
-export const GLOB_CONFIG_NAME = '__APP__GLOB__CONF__'
 export const OUTPUT_DIR = 'dist'
+
+export const PROXY_CONFIG = {
+  /**
+   * @desc    替换匹配值
+   * @请求路径  http://localhost:3100/api/user
+   * @转发路径  http://localhost:8080/user
+   */
+  '/api': {
+    target: 'http://localhost:8080',
+    changeOrigin: true,
+    rewrite: (path) => path.replace(new RegExp('^/api'), ''),
+  },
+  /**
+   * @desc    不替换匹配值
+   * @请求路径  http://localhost:3100/api/v2/user
+   * @转发路径  http://localhost:8080/api/v2/user
+   */
+  '/api/v2': {
+    target: 'http://localhost:8080',
+    changeOrigin: true,
+  },
+  /**
+   * @desc    替换部分匹配值
+   * @请求路径  http://localhost:3100/api/v3/user
+   * @转发路径  http://localhost:8080/user
+   */
+  '/api/v3': {
+    target: 'http://localhost:8080',
+    changeOrigin: true,
+    rewrite: (path) => path.replace(new RegExp('^/api'), ''),
+  },
+}

build/plugin/html.js

@@ -0,0 +1,15 @@
+import { createHtmlPlugin } from 'vite-plugin-html'
+
+export function configHtmlPlugin(viteEnv, isBuild) {
+  const { VITE_TITLE } = viteEnv
+
+  const htmlPlugin = createHtmlPlugin({
+    minify: isBuild,
+    inject: {
+      data: {
+        title: VITE_TITLE,
+      },
+    },
+  })
+  return htmlPlugin
+}

build/plugin/index.js

@@ -0,0 +1,42 @@
+import vue from '@vitejs/plugin-vue'
+
+/**
+ * * unocss插件，原子css
+ * https://github.com/antfu/unocss
+ */
+import Unocss from 'unocss/vite'
+
+// rollup打包分析插件
+import visualizer from 'rollup-plugin-visualizer'
+// 压缩
+import viteCompression from 'vite-plugin-compression'
+// vite-vuedevtool
+import VueDevTools from 'vite-plugin-vue-devtools'
+
+import { configHtmlPlugin } from './html'
+import { configMockPlugin } from './mock'
+import unplugin from './unplugin'
+
+export function createVitePlugins(viteEnv, isBuild) {
+  const plugins = [VueDevTools(), vue(), ...unplugin, configHtmlPlugin(viteEnv, isBuild), Unocss()]
+
+  if (viteEnv?.VITE_USE_MOCK) {
+    plugins.push(configMockPlugin(isBuild))
+  }
+
+  if (viteEnv.VITE_USE_COMPRESS) {
+    plugins.push(viteCompression({ algorithm: viteEnv.VITE_COMPRESS_TYPE || 'gzip' }))
+  }
+
+  if (isBuild) {
+    plugins.push(
+      visualizer({
+        open: true,
+        gzipSize: true,
+        brotliSize: true,
+      })
+    )
+  }
+
+  return plugins
+}

build/plugin/mock.js

@@ -2,12 +2,11 @@ import { viteMockServe } from 'vite-plugin-mock'
 
 export function configMockPlugin(isBuild) {
   return viteMockServe({
-    ignore: /^\_/,
+    mockPath: 'mock/api',
-    mockPath: 'mock',
     localEnabled: !isBuild,
     prodEnabled: isBuild,
     injectCode: `
-      import { setupProdMockServer } from '../mock/_createProdServer';
+      import { setupProdMockServer } from '../mock';
       setupProdMockServer();
     `,
   })

build/plugin/unplugin.js

@@ -0,0 +1,46 @@
+import { resolve } from 'path'
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
+import { NaiveUiResolver } from 'unplugin-vue-components/resolvers'
+import { FileSystemIconLoader } from 'unplugin-icons/loaders'
+import IconsResolver from 'unplugin-icons/resolver'
+
+/**
+ * * unplugin-icons插件，自动引入iconify图标
+ * usage: https://github.com/antfu/unplugin-icons
+ * 图标库: https://icones.js.org/
+ */
+import Icons from 'unplugin-icons/vite'
+import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
+
+import { getSrcPath } from '../utils'
+
+const customIconPath = resolve(getSrcPath(), 'assets/svg')
+
+export default [
+  AutoImport({
+    imports: ['vue', 'vue-router'],
+    dts: false,
+  }),
+  Icons({
+    compiler: 'vue3',
+    customCollections: {
+      custom: FileSystemIconLoader(customIconPath),
+    },
+    scale: 1,
+    defaultClass: 'inline-block',
+  }),
+  Components({
+    resolvers: [
+      NaiveUiResolver(),
+      IconsResolver({ customCollections: ['custom'], componentPrefix: 'icon' }),
+    ],
+    dts: false,
+  }),
+  createSvgIconsPlugin({
+    iconDirs: [customIconPath],
+    symbolId: 'icon-custom-[dir]-[name]',
+    inject: 'body-last',
+    customDomId: '__CUSTOM_SVG_ICON__',
+  }),
+]

build/script/build-cname.js

@@ -1,13 +1,14 @@
+import { resolve } from 'path'
 import chalk from 'chalk'
 import { writeFileSync } from 'fs-extra'
 import { OUTPUT_DIR } from '../constant'
 import { getEnvConfig, getRootPath } from '../utils'
 
 export function runBuildCNAME() {
-  const { VITE_APP_GLOB_CNAME } = getEnvConfig()
+  const { VITE_CNAME } = getEnvConfig()
-  if (!VITE_APP_GLOB_CNAME) return
+  if (!VITE_CNAME) return
   try {
-    writeFileSync(getRootPath(`${OUTPUT_DIR}/CNAME`), VITE_APP_GLOB_CNAME)
+    writeFileSync(resolve(getRootPath(), `${OUTPUT_DIR}/CNAME`), VITE_CNAME)
   } catch (error) {
     console.log(chalk.red('CNAME file failed to package:\n' + error))
   }

build/script/build-config.js

@@ -1,29 +0,0 @@
-import { GLOB_CONFIG_FILE_NAME, GLOB_CONFIG_NAME, OUTPUT_DIR } from '../constant'
-import fs, { writeFileSync } from 'fs-extra'
-import chalk from 'chalk'
-import { getEnvConfig, getRootPath } from '../utils'
-
-function createConfig(option) {
-  const { config, configName, configFileName } = option
-  try {
-    const windowConf = `window.${configName}`
-    const configStr = `${windowConf}=${JSON.stringify(config)};
-      Object.freeze(${windowConf});
-      Object.defineProperty(window, "${configName}", {
-        configurable: false,
-        writable: false,
-      });
-    `.replace(/\s/g, '')
-    fs.mkdirp(getRootPath(OUTPUT_DIR))
-    writeFileSync(getRootPath(`${OUTPUT_DIR}/${configFileName}`), configStr)
-  } catch (error) {
-    console.log(chalk.red('configuration file configuration file failed to package:\n' + error))
-  }
-}
-
-export function runBuildConfig() {
-  const config = getEnvConfig()
-  const configName = GLOB_CONFIG_NAME
-  const configFileName = GLOB_CONFIG_FILE_NAME
-  createConfig({ config, configName, configFileName })
-}

build/script/index.js

@@ -1,10 +1,8 @@
 import chalk from 'chalk'
-import { runBuildConfig } from './build-config'
 import { runBuildCNAME } from './build-cname'
 
 export const runBuild = async () => {
   try {
-    runBuildConfig()
     runBuildCNAME()
     console.log(`✨ ${chalk.cyan('build successfully!')}`)
   } catch (error) {

build/utils.js

@@ -2,33 +2,36 @@ import fs from 'fs'
 import path from 'path'
 import dotenv from 'dotenv'
 
-export function wrapperEnv(envOptions) {
+/**
-  if (!envOptions) return {}
+ * * 项目根路径
-  const ret = {}
+ * @description 结尾不带/
+ */
+export function getRootPath() {
+  return path.resolve(process.cwd())
+}
 
-  for (const key in envOptions) {
+/**
-    let val = envOptions[key]
+ * * 项目src路径
-    if (['true', 'false'].includes(val)) {
+ * @param srcName src目录名称(默认: "src")
-      val = val === 'true'
+ * @description 结尾不带斜杠
-    }
+ */
-    if (['VITE_PORT'].includes(key)) {
+export function getSrcPath(srcName = 'src') {
-      val = +val
+  return path.resolve(getRootPath(), srcName)
-    }
+}
-    if (key === 'VITE_PROXY' && val) {
+
-      try {
+export function convertEnv(envOptions) {
-        val = JSON.parse(val.replace(/'/g, '"'))
+  const result = {}
-      } catch (error) {
+  if (!envOptions) return result
-        val = ''
+
-      }
+  for (const envKey in envOptions) {
-    }
+    let envVal = envOptions[envKey]
-    ret[key] = val
+    if (['true', 'false'].includes(envVal)) envVal = envVal === 'true'
-    if (typeof key === 'string') {
+
-      process.env[key] = val
+    if (['VITE_PORT'].includes(envKey)) envVal = +envVal
-    } else if (typeof key === 'object') {
+
-      process.env[key] = JSON.stringify(val)
+    result[envKey] = envVal
-    }
   }
-  return ret
+  return result
 }
 
 /**
@@ -45,7 +48,7 @@ function getConfFiles() {
   return ['.env', '.env.local', '.env.production']
 }
 
-export function getEnvConfig(match = 'VITE_APP_GLOB_', confFiles = getConfFiles()) {
+export function getEnvConfig(match = 'VITE_', confFiles = getConfFiles()) {
   let envConfig = {}
   confFiles.forEach((item) => {
     try {
@@ -65,7 +68,3 @@ export function getEnvConfig(match = 'VITE_APP_GLOB_', confFiles = getConfFiles(
   })
   return envConfig
 }
-
-export function getRootPath(...dir) {
-  return path.resolve(process.cwd(), ...dir)
-}

build/vite/plugin/html.js

@@ -1,32 +0,0 @@
-import html from 'vite-plugin-html'
-import { version } from '../../../package.json'
-import { GLOB_CONFIG_FILE_NAME } from '../../constant'
-
-export function configHtmlPlugin(viteEnv, isBuild) {
-  const { VITE_APP_TITLE, VITE_PUBLIC_PATH } = viteEnv
-  const path = VITE_PUBLIC_PATH.endsWith('/') ? VITE_PUBLIC_PATH : `${VITE_PUBLIC_PATH}/`
-
-  const getAppConfigSrc = () => {
-    return `${path}${GLOB_CONFIG_FILE_NAME}?v=${version}-${new Date().getTime()}`
-  }
-
-  const htmlPlugin = html({
-    minify: isBuild,
-    inject: {
-      data: {
-        title: VITE_APP_TITLE,
-      },
-      tags: isBuild
-        ? [
-            {
-              tag: 'script',
-              attrs: {
-                src: getAppConfigSrc(),
-              },
-            },
-          ]
-        : [],
-    },
-  })
-  return htmlPlugin
-}

build/vite/plugin/index.js

@@ -1,13 +0,0 @@
-import vue from '@vitejs/plugin-vue'
-import VueSetupExtend from 'vite-plugin-vue-setup-extend'
-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)]
-
-  viteEnv?.VITE_APP_USE_MOCK && plugins.push(configMockPlugin(isBuild))
-
-  return plugins
-}

build/vite/plugin/unocss.js

@@ -1,9 +0,0 @@
-import Unocss from 'unocss/vite'
-import { presetUno, presetAttributify, presetIcons } from 'unocss'
-
-// https://github.com/antfu/unocss
-export function unocss() {
-  return Unocss({
-    presets: [presetUno(), presetAttributify(), presetIcons()],
-  })
-}

build/vite/proxy.js

@@ -1,18 +0,0 @@
-const httpsRE = /^https:\/\//
-export function createProxy(list = []) {
-  const ret = {}
-  for (const [prefix, target] of list) {
-    const isHttps = httpsRE.test(target)
-
-    // https://github.com/http-party/node-http-proxy#options
-    ret[prefix] = {
-      target: target,
-      changeOrigin: true,
-      ws: true,
-      rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
-      // https is require secure=false
-      ...(isHttps ? { secure: false } : {}),
-    }
-  }
-  return ret
-}

commitlint.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  ignores: [(commit) => commit.includes('init')],
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [
+      2,
+      'always',
+      [
+        'feat',
+        'fix',
+        'docs',
+        'style',
+        'refactor',
+        'perf',
+        'test',
+        'build',
+        'ci',
+        'chore',
+        'revert',
+        'wip',
+        'mod',
+        'release',
+      ],
+    ],
+  },
+}

docs/使用unocss.md

@@ -0,0 +1,3 @@
+推荐阅读作者在掘金的文章：
+
+[保熟的UnoCSS使用指北，优雅使用antfu大佬的原子化CSS](https://juejin.cn/post/7142466784971456548)

docs/使用图标.md

@@ -0,0 +1,40 @@
+## 使用 iconify 图标
+
+首先去图标库地址：[icones](https://icones.js.org/) 找合适的图标
+
+### 1. 结合 unocss 使用
+
+```html
+<i i-carbon-sun />
+<i class="i-carbon-sun" />
+```
+
+### 2. 结合插件 unplugin-icons 自定义标签使用
+
+`<icon-[iconify图标名称]`
+
+```html
+<icon-ant-design:fullscreen-exit-outlined  />
+<icon-ant-design:fullscreen-outlined />
+```
+
+这种方式还支持自定义 svg 图标，本项目自定义 svg 图标固定放在 src/assets/svg 下
+
+`<icon-custom-[svg图标文件名]`
+
+```
+<icon-custom-logo />
+```
+
+具体配置参看 build/plugin/unplugin.js
+
+### 3. 结合 Naive UI 的 NIcon 组件封装使用
+
+```html
+<!-- iconify图标 -->
+<TheIcon icon="material-symbols:delete-outline" />
+<!-- 自定义svg图标 -->
+<TheIcon icon="logo" type="custom" />
+```
+
+封装组件参看 src/components/icon

docs/安装pnpm.md

@@ -0,0 +1,32 @@
+## 安装pnpm
+
+### 使用Corepack安装（推荐）
+
+从 v16.13 开始，Node.js 发布了 Corepack 来管理包管理器。 这是一项实验性功能，需要通过运行如下脚本来启用它：
+
+```
+npx corepack enable // 可能需要管理员权限
+```
+
+这将自动在您的系统上安装 pnpm。 但是，它可能不是最新版本的 pnpm。 若要升级，请检查[最新的 pnpm 版本](https://github.com/pnpm/pnpm/releases/latest)  并运行，如 7.14.0
+```
+corepack prepare pnpm@7.14.0 --activate
+```
+
+如果是 Node.js v16.17 或者更新的版本，可以直接安装最新版本的 pnpm
+```
+corepack prepare pnpm@latest --activate
+```
+
+### 使用npm安装
+
+```
+npm i -g pnpm
+```
+
+更新，卸了重新装
+
+```
+npm uninstall -g pnpm
+npm i -g pnpm
+```

index.html

@@ -1,22 +1,35 @@
 <!DOCTYPE html>
 <html lang="cn">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="Expires" content="0" />
+    <meta http-equiv="Pragma" content="no-cache" />
+    <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.png" />
+    <link rel="stylesheet" href="/resource/loading.css" />
 
-<head>
+    <title><%= title %></title>
-  <meta charset="UTF-8" />
+  </head>
-  <meta http-equiv="Expires" content="0" />
-  <meta http-equiv="Pragma" content="no-cache" />
-  <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>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
 
+  <body>
+    <div id="app">
+      <!-- 白屏时的loading效果 -->
+      <div class="loading-container">
+        <img src="/resource/logo.png" alt="logo" height="128" />
+        <div class="loading-spin__container">
+          <div class="loading-spin">
+            <div class="left-0 top-0 loading-spin-item"></div>
+            <div class="left-0 bottom-0 loading-spin-item loading-delay-500"></div>
+            <div class="right-0 top-0 loading-spin-item loading-delay-1000"></div>
+            <div class="right-0 bottom-0 loading-spin-item loading-delay-1500"></div>
+          </div>
+        </div>
+        <div class="loading-title"><%= title %></div>
+      </div>
+      <script src="/resource/loading.js"></script>
+    </div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
 </html>

jsconfig.json

@@ -1,9 +1,14 @@
 {
   "compilerOptions": {
+    "target": "ESNext",
     "baseUrl": "./",
+    "moduleResolution": "node",
     "paths": {
-      "@/*": ["src/*"]
+      "@/*": ["src/*"],
-    }
+      "~/*": ["./*"]
+    },
+    "jsx": "preserve",
+    "allowJs": true
   },
   "exclude": ["node_modules", "dist"]
 }

mock/_createProdServer.js

@@ -1,14 +0,0 @@
-import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
-
-const modules = import.meta.globEager('./**/*.js')
-const mockModules = []
-Object.keys(modules).forEach((key) => {
-  if (key.includes('/_')) {
-    return
-  }
-  mockModules.push(...modules[key].default)
-})
-
-export function setupProdMockServer() {
-  createProdMockServer(mockModules)
-}

mock/api/auth.js

@@ -1,4 +1,4 @@
-import { resolveToken } from '../_utils'
+import { resolveToken } from '../utils'
 
 const token = {
   admin: 'admin',

mock/api/index.js

@@ -0,0 +1,5 @@
+import auth from './auth'
+import user from './user'
+import post from './post'
+
+export default [...auth, ...user, ...post]

mock/api/post.js

@@ -0,0 +1,138 @@
+const posts = [
+  {
+    title: '使用纯css优雅配置移动端rem布局',
+    author: '大脸怪',
+    category: 'Css',
+    description: '通常配置rem布局会使用js进行处理，比如750的设计稿会这样...',
+    content: '通常配置rem布局会使用js进行处理，比如750的设计稿会这样',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-11-04T04:03:36.000Z',
+    updateDate: '2021-11-04T04:03:36.000Z',
+  },
+  {
+    title: 'Vue2&Vue3项目风格指南',
+    author: 'Ronnie',
+    category: 'Vue',
+    description: '总结的Vue2和Vue3的项目风格',
+    content: '### 1. 命名风格\n\n> 文件夹如果是由多个单词组成，应该始终是横线连接 ',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-10-25T08:57:47.000Z',
+    updateDate: '2022-02-28T04:02:39.000Z',
+  },
+  {
+    title: '如何优雅的给图片添加水印',
+    author: '大脸怪',
+    category: 'JavaScript',
+    description: '优雅的给图片添加水印',
+    content: '我之前写过一篇文章记录了一次上传图片的优化史',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-06-24T18:46:19.000Z',
+    updateDate: '2021-09-23T07:51:22.000Z',
+  },
+
+  {
+    title: '前端缓存的理解',
+    author: '大脸怪',
+    category: 'Http',
+    description: '谈谈前端缓存的理解',
+    content:
+      '> 背景\n\n公司有个vue-cli3移动端web项目发版更新后发现部分用户手机在钉钉内置浏览器打开出现了缓存',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-06-10T18:51:19.000Z',
+    updateDate: '2021-09-17T09:33:24.000Z',
+  },
+  {
+    title: 'Promise的五个静态方法',
+    author: '大脸怪',
+    category: 'JavaScript',
+    description: '简单介绍下在 Promise 类中，有5 种静态方法及它们的使用场景',
+    content:
+      '## 1. Promise.all\n\n并行执行多个 promise，并等待所有 promise 都准备就绪。再对它们进行处理。',
+    isRecommend: true,
+    isPublish: true,
+    createDate: '2021-02-22T22:37:06.000Z',
+    updateDate: '2021-09-17T09:33:24.000Z',
+  },
+]
+
+export default [
+  {
+    url: '/api/posts',
+    method: 'get',
+    response: (data = {}) => {
+      const { title, pageNo, pageSize } = data.query
+      let pageData = []
+      let total = 60
+      const filterData = posts.filter(
+        (item) => item.title.includes(title) || (!title && title !== 0)
+      )
+      if (filterData.length) {
+        if (pageSize) {
+          while (pageData.length < pageSize) {
+            pageData.push(filterData[Math.round(Math.random() * (filterData.length - 1))])
+          }
+        } else {
+          pageData = filterData
+        }
+        pageData = pageData.map((item, index) => ({
+          id: pageSize * (pageNo - 1) + index + 1,
+          ...item,
+        }))
+      } else {
+        total = 0
+      }
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          pageData,
+          total,
+          pageNo,
+          pageSize,
+        },
+      }
+    },
+  },
+  {
+    url: '/api/post',
+    method: 'post',
+    response: ({ body }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: body,
+      }
+    },
+  },
+  {
+    url: '/api/post/:id',
+    method: 'put',
+    response: ({ query, body }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          id: query.id,
+          body,
+        },
+      }
+    },
+  },
+  {
+    url: '/api/post/:id',
+    method: 'delete',
+    response: ({ query }) => {
+      return {
+        code: 0,
+        message: 'ok',
+        data: {
+          id: query.id,
+        },
+      }
+    },
+  },
+]

mock/api/user.js

@@ -1,24 +1,24 @@
-import { resolveToken } from '../_utils'
+import { resolveToken } from '../utils'
 
 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://static.isme.top/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://static.isme.top/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://static.isme.top/images/avatar.jpg',
     role: [],
   },
 }

mock/index.js

@@ -0,0 +1,6 @@
+import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
+import api from './api'
+
+export function setupProdMockServer() {
+  createProdMockServer(api)
+}

package.json

@@ -1,47 +1,82 @@
 {
   "name": "vue-naive-admin",
-  "version": "0.0.1",
+  "version": "1.0.0",
   "scripts": {
+    "build": "vite build",
+    "build:github": "vite build --mode github && esno ./build/script",
+    "build:test": "vite build --mode test",
+    "cz": "cz",
     "dev": "vite",
     "lint": "eslint --ext .js,.vue .",
     "lint:fix": "eslint --fix --ext .js,.vue .",
-    "build": "vite build && esno ./build/script",
+    "lint:staged": "lint-staged",
-    "build:test": "vite build --mode test && esno ./build/script",
+    "prepare": "husky install",
-    "build:staging": "vite build --mode staging && esno ./build/script",
     "preview": "vite preview"
   },
+  "lint-staged": {
+    "*.{js,vue}": [
+      "eslint --ext .js,.vue ."
+    ]
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-customizable"
+    }
+  },
+  "eslintConfig": {
+    "extends": [
+      "@zclzone",
+      "@unocss",
+      ".eslint-global-variables.json"
+    ]
+  },
   "dependencies": {
-    "@vicons/fa": "^0.11.0",
+    "@unocss/eslint-config": "^0.55.7",
-    "axios": "^0.21.4",
+    "@vueuse/core": "^10.4.1",
-    "dayjs": "^1.10.7",
+    "@wangeditor/editor": "^5.1.23",
-    "js-cookie": "^3.0.1",
+    "@wangeditor/editor-for-vue": "5.1.12",
+    "axios": "^1.5.1",
+    "dayjs": "^1.11.10",
+    "echarts": "^5.4.3",
     "lodash-es": "^4.17.21",
+    "md-editor-v3": "^4.7.0",
     "mockjs": "^1.1.0",
-    "pinia": "^2.0.9",
+    "pinia": "^2.1.6",
-    "vue": "^3.2.6",
+    "vite": "^4.4.11",
-    "vue-router": "^4.0.12"
+    "vue": "3.3.4",
+    "vue-echarts": "^6.6.1",
+    "vue-router": "^4.2.5",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
-    "@unocss/preset-attributify": "^0.16.3",
+    "@commitlint/cli": "^17.7.2",
-    "@unocss/preset-icons": "^0.16.3",
+    "@commitlint/config-conventional": "^17.7.0",
-    "@unocss/preset-uno": "^0.16.3",
+    "@iconify/json": "^2.2.125",
-    "@vitejs/plugin-vue": "^1.6.0",
+    "@iconify/vue": "^4.1.1",
-    "@vue/compiler-sfc": "^3.0.5",
+    "@unocss/preset-rem-to-px": "^0.55.7",
-    "chalk": "^5.0.0",
+    "@vitejs/plugin-vue": "^4.4.0",
-    "dotenv": "^10.0.0",
+    "@vue/compiler-sfc": "^3.3.4",
-    "eslint": "^8.6.0",
+    "@zclzone/eslint-config": "^0.0.5",
-    "eslint-config-prettier": "^8.3.0",
+    "chalk": "^5.3.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "commitizen": "^4.3.0",
-    "eslint-plugin-vue": "^8.2.0",
+    "cz-conventional-changelog": "^3.3.0",
-    "esno": "^0.13.0",
+    "cz-customizable": "^7.0.0",
-    "fs-extra": "^10.0.0",
+    "dotenv": "^16.3.1",
-    "naive-ui": "^2.19.1",
+    "esno": "^0.17.0",
-    "prettier": "^2.5.1",
+    "fs-extra": "^11.1.1",
-    "sass": "^1.38.1",
+    "husky": "^8.0.3",
-    "unocss": "^0.16.3",
+    "lint-staged": "^14.0.1",
-    "vite": "^2.7.6",
+    "naive-ui": "^2.35.0",
-    "vite-plugin-html": "^2.1.1",
+    "rollup-plugin-visualizer": "^5.9.2",
-    "vite-plugin-mock": "^2.9.6",
+    "sass": "^1.69.0",
-    "vite-plugin-vue-setup-extend": "^0.3.0"
+    "unocss": "0.55.3",
+    "unplugin-auto-import": "^0.16.6",
+    "unplugin-icons": "^0.16.6",
+    "unplugin-vue-components": "^0.25.2",
+    "vite-plugin-compression": "^0.5.1",
+    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-mock": "2.9.6",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-devtools": "1.0.0-rc.7"
   }
 }

prettier.config.js

@@ -1,6 +0,0 @@
-module.exports = {
-  printWidth: 120,
-  singleQuote: true,
-  semi: false,
-  endOfLine: 'lf',
-}

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>

public/resource/loading.css

@@ -0,0 +1,85 @@
+.loading-container {
+	position: fixed;
+	left: 0;
+	top: 0;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+}
+
+.loading-spin__container {
+	width: 56px;
+	height: 56px;
+	margin: 36px 0;
+}
+
+.loading-spin {
+	position: relative;
+	height: 100%;
+	animation: loadingSpin 1s linear infinite;
+}
+
+.left-0 {
+  left: 0;
+}
+.right-0 {
+  right: 0;
+}
+.top-0 {
+  top: 0;
+}
+.bottom-0 {
+  bottom: 0;
+}
+
+.loading-spin-item {
+	position: absolute;
+  height: 16px;
+  width: 16px;
+	background-color: var(--primary-color);
+  border-radius: 8px;
+  -webkit-animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  animation: loadingPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes loadingSpin {
+  from {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes loadingPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: .5;
+  }
+}
+
+.loading-delay-500 {
+  -webkit-animation-delay: 500ms;
+  animation-delay: 500ms;
+}
+.loading-delay-1000 {
+  -webkit-animation-delay: 1000ms;
+  animation-delay: 1000ms;
+}
+.loading-delay-1500 {
+  -webkit-animation-delay: 1500ms;
+  animation-delay: 1500ms;
+}
+
+.loading-title {
+  font-size: 28px;
+	font-weight: 500;
+  color: #6a6a6a;
+}

public/resource/loading.js

@@ -0,0 +1,9 @@
+function addThemeColorCssVars() {
+  const key = '__THEME_COLOR__'
+  const defaultColor = '#316c72'
+  const themeColor = window.localStorage.getItem(key) || defaultColor
+  const cssVars = `--primary-color: ${themeColor}`
+  document.documentElement.style.cssText = cssVars
+}
+
+addThemeColorCssVars()

settings/index.js

@@ -0,0 +1 @@
+export * from './theme.json'

settings/theme.json

@@ -0,0 +1,37 @@
+{
+  "header": {
+    "height": 60
+  },
+  "tags": {
+    "visible": true,
+    "height": 50
+  },
+  "naiveThemeOverrides": {
+    "common": {
+      "primaryColor": "#316C72FF",
+      "primaryColorHover": "#316C72E3",
+      "primaryColorPressed": "#2B4C59FF",
+      "primaryColorSuppl": "#316C72E3",
+
+      "infoColor": "#2080F0FF",
+      "infoColorHover": "#4098FCFF",
+      "infoColorPressed": "#1060C9FF",
+      "infoColorSuppl": "#4098FCFF",
+
+      "successColor": "#18A058FF",
+      "successColorHover": "#36AD6AFF",
+      "successColorPressed": "#0C7A43FF",
+      "successColorSuppl": "#36AD6AFF",
+
+      "warningColor": "#F0A020FF",
+      "warningColorHover": "#FCB040FF",
+      "warningColorPressed": "#C97C10FF",
+      "warningColorSuppl": "#FCB040FF",
+
+      "errorColor": "#D03050FF",
+      "errorColorHover": "#DE576DFF",
+      "errorColorPressed": "#AB1F3FFF",
+      "errorColorSuppl": "#DE576DFF"
+    }
+  }
+}

src/App.vue

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

src/api/auth/index.js

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

src/api/index.js

@@ -0,0 +1,6 @@
+import { request } from '@/utils'
+
+export default {
+  getUser: () => request.get('/user'),
+  refreshToken: () => request.post('/auth/refreshToken', null, { noNeedTip: true }),
+}

src/api/user/index.js

@@ -1,38 +0,0 @@
-import { defAxios } from '@/utils/http'
-
-export function getUsers(data = {}) {
-  return defAxios({
-    url: '/users',
-    method: 'get',
-    data,
-  })
-}
-
-export function getUser(id) {
-  if (id) {
-    return defAxios({
-      url: `/user/${id}`,
-      method: 'get',
-    })
-  }
-  return defAxios({
-    url: '/user',
-    method: 'get',
-  })
-}
-
-export function saveUser(data = {}, id) {
-  if (id) {
-    return defAxios({
-      url: '/user',
-      method: 'put',
-      data,
-    })
-  }
-
-  return defAxios({
-    url: `/user/${id}`,
-    method: 'put',
-    data,
-  })
-}

src/components/AppProvider/DialogContent.vue

@@ -1,52 +0,0 @@
-<script setup>
-import { isNullOrUndef } from '@/utils/is'
-import { useDialog } from 'naive-ui'
-
-const NDialog = useDialog()
-
-class Dialog {
-  success(title, option) {
-    this.showDialog('success', { title, ...option })
-  }
-
-  warning(title, option) {
-    this.showDialog('warning', { title, ...option })
-  }
-
-  error(title, option) {
-    this.showDialog('error', { title, ...option })
-  }
-
-  showDialog(type = 'success', option) {
-    if (isNullOrUndef(option.title)) {
-      // ! 没有title的情况
-      option.showIcon = false
-    }
-    NDialog[type]({
-      positiveText: 'OK',
-      closable: false,
-      ...option,
-    })
-  }
-
-  confirm(option = {}) {
-    this.showDialog(option.type || 'error', {
-      positiveText: '确定',
-      negativeText: '取消',
-      onPositiveClick: option.confirm,
-      onNegativeClick: option.cancel,
-      onMaskClick: option.cancel,
-      ...option,
-    })
-  }
-}
-
-window['$dialog'] = new Dialog()
-Object.freeze(window.$dialog)
-Object.defineProperty(window, '$dialog', {
-  configurable: false,
-  writable: false,
-})
-</script>
-
-<template></template>

src/components/AppProvider/LoadingBar.vue

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

src/components/AppProvider/MessageContent.vue

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

src/components/AppProvider/index.vue

@@ -1,26 +0,0 @@
-<script setup>
-import { NConfigProvider, NGlobalStyle, NLoadingBarProvider, NMessageProvider, NDialogProvider } from 'naive-ui'
-
-import MessageContent from './MessageContent.vue'
-import DialogContent from './DialogContent.vue'
-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/components/common/AppFooter.vue

@@ -0,0 +1,23 @@
+<template>
+  <footer f-c-c flex-col text-14 color="#6a6a6a">
+    <p>
+      Copyright © 2022-present
+      <a
+        href="https://github.com/zclzone"
+        target="__blank"
+        hover="decoration-underline color-primary"
+      >
+        Ronnie Zhang
+      </a>
+    </p>
+    <p>
+      <a
+        href="http://beian.miit.gov.cn/"
+        target="__blank"
+        hover="decoration-underline color-primary"
+      >
+        赣ICP备2020015008号-2
+      </a>
+    </p>
+  </footer>
+</template>

src/components/common/AppProvider.vue

@@ -0,0 +1,30 @@
+<template>
+  <n-config-provider
+    wh-full
+    :locale="zhCN"
+    :date-locale="dateZhCN"
+    :theme="appStore.isDark ? darkTheme : undefined"
+    :theme-overrides="naiveThemeOverrides"
+  >
+    <slot />
+  </n-config-provider>
+</template>
+
+<script setup>
+import { zhCN, dateZhCN, darkTheme } from 'naive-ui'
+import { useCssVar } from '@vueuse/core'
+import { kebabCase } from 'lodash-es'
+import { naiveThemeOverrides } from '~/settings'
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+
+function setupCssVar() {
+  const common = naiveThemeOverrides.common
+  for (const key in common) {
+    useCssVar(`--${kebabCase(key)}`, document.documentElement).value = common[key] || ''
+    if (key === 'primaryColor') window.localStorage.setItem('__THEME_COLOR__', common[key] || '')
+  }
+}
+setupCssVar()
+</script>

src/components/common/ScrollX.vue

@@ -0,0 +1,162 @@
+<template>
+  <div ref="wrapper" class="wrapper" @mousewheel.prevent="handleMouseWheel">
+    <template v-if="showArrow && isOverflow">
+      <div class="left dark:bg-dark!" @click="handleMouseWheel({ wheelDelta: 120 })">
+        <icon-ic:baseline-keyboard-arrow-left />
+      </div>
+      <div class="right dark:bg-dark!" @click="handleMouseWheel({ wheelDelta: -120 })">
+        <icon-ic:baseline-keyboard-arrow-right />
+      </div>
+    </template>
+
+    <div
+      ref="content"
+      class="content"
+      :class="{ overflow: isOverflow && showArrow }"
+      :style="{
+        transform: `translateX(${translateX}px)`,
+      }"
+    >
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { debounce, useResize } from '@/utils'
+
+defineProps({
+  showArrow: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const translateX = ref(0)
+const content = ref(null)
+const wrapper = ref(null)
+const isOverflow = ref(false)
+
+const refreshIsOverflow = debounce(() => {
+  const wrapperWidth = wrapper.value?.offsetWidth
+  const contentWidth = content.value?.offsetWidth
+  isOverflow.value = contentWidth > wrapperWidth
+  resetTranslateX(wrapperWidth, contentWidth)
+}, 200)
+
+function handleMouseWheel(e) {
+  const { wheelDelta } = e
+  const wrapperWidth = wrapper.value?.offsetWidth
+  const contentWidth = content.value?.offsetWidth
+  /**
+   * @wheelDelta 平行滚动的值 >0： 右移  <0: 左移
+   * @translateX 内容translateX的值
+   * @wrapperWidth 容器的宽度
+   * @contentWidth 内容的宽度
+   */
+  if (wheelDelta < 0) {
+    if (wrapperWidth > contentWidth && translateX.value < -10) return
+    if (wrapperWidth <= contentWidth && contentWidth + translateX.value - wrapperWidth < -10) return
+  }
+  if (wheelDelta > 0 && translateX.value > 10) {
+    return
+  }
+
+  translateX.value += wheelDelta
+  resetTranslateX(wrapperWidth, contentWidth)
+}
+
+const resetTranslateX = debounce(function (wrapperWidth, contentWidth) {
+  if (!isOverflow.value) {
+    translateX.value = 0
+  } else if (-translateX.value > contentWidth - wrapperWidth) {
+    translateX.value = wrapperWidth - contentWidth
+  } else if (translateX.value > 0) {
+    translateX.value = 0
+  }
+}, 200)
+
+const observers = ref([])
+onMounted(() => {
+  refreshIsOverflow()
+
+  observers.value.push(useResize(document.body, refreshIsOverflow))
+  observers.value.push(useResize(content.value, refreshIsOverflow))
+})
+onBeforeUnmount(() => {
+  observers.value.forEach((item) => {
+    item?.disconnect()
+  })
+})
+
+function handleScroll(x, width) {
+  const wrapperWidth = wrapper.value?.offsetWidth
+  const contentWidth = content.value?.offsetWidth
+  if (contentWidth <= wrapperWidth) return
+
+  // 当 x 小于可视范围的最小值时
+  if (x < -translateX.value + 150) {
+    translateX.value = -(x - 150)
+    resetTranslateX(wrapperWidth, contentWidth)
+  }
+
+  // 当 x 大于可视范围的最大值时
+  if (x + width > -translateX.value + wrapperWidth) {
+    translateX.value = wrapperWidth - (x + width)
+    resetTranslateX(wrapperWidth, contentWidth)
+  }
+}
+
+defineExpose({
+  handleScroll,
+})
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  display: flex;
+  background-color: #fff;
+
+  z-index: 9;
+  overflow: hidden;
+  position: relative;
+  .content {
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    transition: transform 0.5s;
+    &.overflow {
+      padding-left: 30px;
+      padding-right: 30px;
+    }
+  }
+  .left,
+  .right {
+    background-color: #fff;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+
+    width: 20px;
+    height: 35px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 18px;
+    border: 1px solid #e0e0e6;
+    border-radius: 2px;
+
+    z-index: 2;
+    cursor: pointer;
+  }
+  .left {
+    left: 0;
+  }
+  .right {
+    right: 0;
+  }
+}
+</style>

src/components/icon/CustomIcon.vue

@@ -0,0 +1,22 @@
+<script setup>
+/** 自定义图标 */
+const props = defineProps({
+  /** 图标名称(assets/svg下的文件名) */
+  icon: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: Number,
+    default: 14,
+  },
+  color: {
+    type: String,
+    default: undefined,
+  },
+})
+</script>
+
+<template>
+  <TheIcon type="custom" v-bind="props" />
+</template>

src/components/icon/SvgIcon.vue

@@ -0,0 +1,24 @@
+<script setup>
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  prefix: {
+    type: String,
+    default: 'icon-custom',
+  },
+  color: {
+    type: String,
+    default: 'currentColor',
+  },
+})
+
+const symbolId = computed(() => `#${props.prefix}-${props.icon}`)
+</script>
+
+<template>
+  <svg aria-hidden="true" width="1em" height="1em">
+    <use :xlink:href="symbolId" :fill="color" />
+  </svg>
+</template>

src/components/icon/TheIcon.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { renderIcon, renderCustomIcon } from '@/utils'
+
+const props = defineProps({
+  icon: {
+    type: String,
+    required: true,
+  },
+  size: {
+    type: Number,
+    default: 14,
+  },
+  color: {
+    type: String,
+    default: undefined,
+  },
+  /** iconify | custom */
+  type: {
+    type: String,
+    default: 'iconify',
+  },
+})
+
+const iconCom = computed(() =>
+  props.type === 'iconify'
+    ? renderIcon(props.icon, { size: props.size, color: props.color })
+    : renderCustomIcon(props.icon, { size: props.size, color: props.color })
+)
+</script>
+
+<template>
+  <component :is="iconCom" />
+</template>

src/components/page/AppPage.vue

@@ -0,0 +1,18 @@
+<template>
+  <transition name="fade-slide" mode="out-in" appear>
+    <section class="cus-scroll-y wh-full flex-col bg-[#f5f6fb] p-15 dark:bg-hex-121212">
+      <slot />
+      <AppFooter v-if="showFooter" mt-15 />
+      <n-back-top :bottom="20" />
+    </section>
+  </transition>
+</template>
+
+<script setup>
+defineProps({
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>

src/components/page/CommonPage.vue

@@ -0,0 +1,33 @@
+<template>
+  <AppPage :show-footer="showFooter">
+    <header v-if="showHeader" mb-15 min-h-45 flex items-center justify-between px-15>
+      <slot v-if="$slots.header" name="header" />
+      <template v-else>
+        <h2 text-22 font-normal text-hex-333 dark:text-hex-ccc>{{ title || route.meta?.title }}</h2>
+        <slot name="action" />
+      </template>
+    </header>
+
+    <n-card flex-1 rounded-10>
+      <slot />
+    </n-card>
+  </AppPage>
+</template>
+
+<script setup>
+defineProps({
+  showFooter: {
+    type: Boolean,
+    default: false,
+  },
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  title: {
+    type: String,
+    default: undefined,
+  },
+})
+const route = useRoute()
+</script>

src/components/query-bar/QueryBar.vue

@@ -0,0 +1,27 @@
+<template>
+  <div
+    bg="#fafafc"
+    min-h-60
+    flex
+    items-start
+    justify-between
+    b-1
+    rounded-8
+    p-15
+    bc-ccc
+    dark:bg-black
+  >
+    <n-space wrap :size="[35, 15]">
+      <slot />
+    </n-space>
+
+    <div flex-shrink-0>
+      <n-button secondary type="primary" @click="emit('reset')">重置</n-button>
+      <n-button ml-20 type="primary" @click="emit('search')">搜索</n-button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const emit = defineEmits(['search', 'reset'])
+</script>

src/components/query-bar/QueryBarItem.vue

@@ -0,0 +1,34 @@
+<template>
+  <div flex items-center>
+    <label
+      v-if="!isNullOrWhitespace(label)"
+      w-80
+      flex-shrink-0
+      :style="{ width: labelWidth + 'px' }"
+    >
+      {{ label }}
+    </label>
+    <div :style="{ width: contentWidth + 'px' }" flex-shrink-0>
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { isNullOrWhitespace } from '@/utils'
+
+defineProps({
+  label: {
+    type: String,
+    default: '',
+  },
+  labelWidth: {
+    type: Number,
+    default: 80,
+  },
+  contentWidth: {
+    type: Number,
+    default: 220,
+  },
+})
+</script>

src/components/table/CrudModal.vue

@@ -0,0 +1,55 @@
+<template>
+  <n-modal
+    v-model:show="show"
+    :style="{ width }"
+    preset="card"
+    :title="title"
+    size="huge"
+    :bordered="false"
+  >
+    <slot />
+    <template v-if="showFooter" #footer>
+      <footer flex justify-end>
+        <slot name="footer">
+          <n-button @click="show = false">取消</n-button>
+          <n-button :loading="loading" ml-20 type="primary" @click="emit('onSave')">保存</n-button>
+        </slot>
+      </footer>
+    </template>
+  </n-modal>
+</template>
+
+<script setup>
+const props = defineProps({
+  width: {
+    type: String,
+    default: '600px',
+  },
+  title: {
+    type: String,
+    default: '',
+  },
+  showFooter: {
+    type: Boolean,
+    default: true,
+  },
+  visible: {
+    type: Boolean,
+    required: true,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+})
+
+const emit = defineEmits(['update:visible', 'onSave'])
+const show = computed({
+  get() {
+    return props.visible
+  },
+  set(v) {
+    emit('update:visible', v)
+  },
+})
+</script>

src/components/table/CrudTable.vue

@@ -0,0 +1,149 @@
+<template>
+  <QueryBar v-if="$slots.queryBar" mb-30 @search="handleSearch" @reset="handleReset">
+    <slot name="queryBar" />
+  </QueryBar>
+
+  <n-data-table
+    :remote="remote"
+    :loading="loading"
+    :scroll-x="scrollX"
+    :columns="columns"
+    :data="tableData"
+    :row-key="(row) => row[rowKey]"
+    :pagination="isPagination ? pagination : false"
+    @update:checked-row-keys="onChecked"
+    @update:page="onPageChange"
+  />
+</template>
+
+<script setup>
+import { utils, writeFile } from 'xlsx'
+
+const props = defineProps({
+  /**
+   * @remote true: 后端分页  false： 前端分页
+   */
+  remote: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @remote 是否分页
+   */
+  isPagination: {
+    type: Boolean,
+    default: true,
+  },
+  scrollX: {
+    type: Number,
+    default: 1200,
+  },
+  rowKey: {
+    type: String,
+    default: 'id',
+  },
+  columns: {
+    type: Array,
+    required: true,
+  },
+  /** queryBar中的参数 */
+  queryItems: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  /** 补充参数（可选） */
+  extraParams: {
+    type: Object,
+    default() {
+      return {}
+    },
+  },
+  /**
+   * ! 约定接口入参出参
+   * * 分页模式需约定分页接口入参
+   *    @pageSize 分页参数：一页展示多少条，默认10
+   *    @pageNo   分页参数：页码，默认1
+   * * 需约定接口出参
+   *    @pageData 分页模式必须,非分页模式如果没有pageData则取上一层data
+   *    @total    分页模式必须，非分页模式如果没有total则取上一层data.length
+   */
+  getData: {
+    type: Function,
+    required: true,
+  },
+})
+
+const emit = defineEmits(['update:queryItems', 'onChecked', 'onDataChange'])
+const loading = ref(false)
+const initQuery = { ...props.queryItems }
+const tableData = ref([])
+const pagination = reactive({ page: 1, pageSize: 10 })
+
+async function handleQuery() {
+  try {
+    loading.value = true
+    let paginationParams = {}
+    // 如果非分页模式或者使用前端分页,则无需传分页参数
+    if (props.isPagination && props.remote) {
+      paginationParams = { pageNo: pagination.page, pageSize: pagination.pageSize }
+    }
+    const { data } = await props.getData({
+      ...props.queryItems,
+      ...props.extraParams,
+      ...paginationParams,
+    })
+    tableData.value = data?.pageData || data
+    pagination.itemCount = data.total ?? data.length
+  } catch (error) {
+    tableData.value = []
+    pagination.itemCount = 0
+  } finally {
+    emit('onDataChange', tableData.value)
+    loading.value = false
+  }
+}
+function handleSearch() {
+  pagination.page = 1
+  handleQuery()
+}
+async function handleReset() {
+  const queryItems = { ...props.queryItems }
+  for (const key in queryItems) {
+    queryItems[key] = ''
+  }
+  emit('update:queryItems', { ...queryItems, ...initQuery })
+  await nextTick()
+  pagination.page = 1
+  handleQuery()
+}
+function onPageChange(currentPage) {
+  pagination.page = currentPage
+  if (props.remote) {
+    handleQuery()
+  }
+}
+function onChecked(rowKeys) {
+  if (props.columns.some((item) => item.type === 'selection')) {
+    emit('onChecked', rowKeys)
+  }
+}
+function handleExport(columns = props.columns, data = tableData.value) {
+  if (!data?.length) return $message.warning('没有数据')
+  const columnsData = columns.filter((item) => !!item.title && !item.hideInExcel)
+  const thKeys = columnsData.map((item) => item.key)
+  const thData = columnsData.map((item) => item.title)
+  const trData = data.map((item) => thKeys.map((key) => item[key]))
+  const sheet = utils.aoa_to_sheet([thData, ...trData])
+  const workBook = utils.book_new()
+  utils.book_append_sheet(workBook, sheet, '数据报表')
+  writeFile(workBook, '数据报表.xlsx')
+}
+
+defineExpose({
+  handleSearch,
+  handleReset,
+  handleExport,
+})
+</script>

src/composables/index.js

@@ -0,0 +1 @@
+export { default as useCRUD } from './useCRUD'

src/composables/useCRUD.js

@@ -0,0 +1,103 @@
+import { isNullOrWhitespace } from '@/utils'
+
+const ACTIONS = {
+  view: '查看',
+  edit: '编辑',
+  add: '新增',
+}
+
+export default function ({ name, initForm = {}, doCreate, doDelete, doUpdate, refresh }) {
+  const modalVisible = ref(false)
+  const modalAction = ref('')
+  const modalTitle = computed(() => ACTIONS[modalAction.value] + name)
+  const modalLoading = ref(false)
+  const modalFormRef = ref(null)
+  const modalForm = ref({ ...initForm })
+
+  /** 新增 */
+  function handleAdd() {
+    modalAction.value = 'add'
+    modalVisible.value = true
+    modalForm.value = { ...initForm }
+  }
+
+  /** 修改 */
+  function handleEdit(row) {
+    modalAction.value = 'edit'
+    modalVisible.value = true
+    modalForm.value = { ...row }
+  }
+
+  /** 查看 */
+  function handleView(row) {
+    modalAction.value = 'view'
+    modalVisible.value = true
+    modalForm.value = { ...row }
+  }
+
+  /** 保存 */
+  function handleSave() {
+    if (!['edit', 'add'].includes(modalAction.value)) {
+      modalVisible.value = false
+      return
+    }
+    modalFormRef.value?.validate(async (err) => {
+      if (err) return
+      const actions = {
+        add: {
+          api: () => doCreate(modalForm.value),
+          cb: () => $message.success('新增成功'),
+        },
+        edit: {
+          api: () => doUpdate(modalForm.value),
+          cb: () => $message.success('编辑成功'),
+        },
+      }
+      const action = actions[modalAction.value]
+
+      try {
+        modalLoading.value = true
+        const data = await action.api()
+        action.cb()
+        modalLoading.value = modalVisible.value = false
+        data && refresh(data)
+      } catch (error) {
+        modalLoading.value = false
+      }
+    })
+  }
+
+  /** 删除 */
+  function handleDelete(id, confirmOptions) {
+    if (isNullOrWhitespace(id)) return
+    $dialog.confirm({
+      content: '确定删除？',
+      async confirm() {
+        try {
+          modalLoading.value = true
+          const data = await doDelete(id)
+          $message.success('删除成功')
+          modalLoading.value = false
+          refresh(data)
+        } catch (error) {
+          modalLoading.value = false
+        }
+      },
+      ...confirmOptions,
+    })
+  }
+
+  return {
+    modalVisible,
+    modalAction,
+    modalTitle,
+    modalLoading,
+    handleAdd,
+    handleDelete,
+    handleEdit,
+    handleView,
+    handleSave,
+    modalForm,
+    modalFormRef,
+  }
+}

src/layout/components/AppMain.vue

@@ -1,9 +1,16 @@
 <template>
-  <router-view>
+  <router-view v-slot="{ Component, route }">
-    <template #default="{ Component, route }">
+    <KeepAlive :include="keepAliveNames">
-      <transition name="fade-slide" mode="out-in" appear>
+      <component :is="Component" v-if="!tagStore.reloading" :key="route.fullPath" />
-        <component :is="Component" :key="route.fullPath"></component>
+    </KeepAlive>
-      </transition>
-    </template>
   </router-view>
 </template>
+
+<script setup>
+import { useTagsStore } from '@/store'
+const tagStore = useTagsStore()
+
+const keepAliveNames = computed(() => {
+  return tagStore.tags.filter((item) => item.keepAlive).map((item) => item.name)
+})
+</script>

src/layout/components/header/BreadCrumb.vue

@@ -1,19 +0,0 @@
-<script setup>
-import { NBreadcrumb, NBreadcrumbItem } from 'naive-ui'
-import { useRouter } from 'vue-router'
-const router = useRouter()
-const { currentRoute } = router
-
-function handleBreadClick(path) {
-  if (path === currentRoute.value.path) return
-  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,47 +0,0 @@
-<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">
-      <img :src="userStore.avatar" />
-      <span>{{ userStore.name }}</span>
-    </div>
-  </n-dropdown>
-</template>
-
-<style lang="scss" scoped>
-.avatar {
-  display: flex;
-  align-items: center;
-  cursor: pointer;
-  img {
-    width: 100%;
-    width: 25px;
-    height: 25px;
-    border-radius: 50%;
-    margin-right: 10px;
-  }
-}
-</style>

src/layout/components/header/components/BreadCrumb.vue

@@ -0,0 +1,30 @@
+<template>
+  <n-breadcrumb>
+    <n-breadcrumb-item
+      v-for="item in route.matched.filter((item) => !!item.meta?.title)"
+      :key="item.path"
+      @click="handleBreadClick(item.path)"
+    >
+      <component :is="getIcon(item.meta)" />
+      {{ item.meta.title }}
+    </n-breadcrumb-item>
+  </n-breadcrumb>
+</template>
+
+<script setup>
+import { renderCustomIcon, renderIcon } from '@/utils'
+
+const router = useRouter()
+const route = useRoute()
+
+function handleBreadClick(path) {
+  if (path === route.path) return
+  router.push(path)
+}
+
+function getIcon(meta) {
+  if (meta?.customIcon) return renderCustomIcon(meta.customIcon, { size: 18 })
+  if (meta?.icon) return renderIcon(meta.icon, { size: 18 })
+  return null
+}
+</script>

src/layout/components/header/components/FullScreen.vue

@@ -0,0 +1,12 @@
+<template>
+  <n-icon mr20 size="18" style="cursor: pointer" @click="toggle">
+    <icon-ant-design:fullscreen-exit-outlined v-if="isFullscreen" />
+    <icon-ant-design:fullscreen-outlined v-else />
+  </n-icon>
+</template>
+
+<script setup>
+import { useFullscreen } from '@vueuse/core'
+
+const { isFullscreen, toggle } = useFullscreen()
+</script>

src/layout/components/header/components/GiteeSite.vue

@@ -0,0 +1,11 @@
+<template>
+  <n-icon mr-20 size="18" style="cursor: pointer" @click="handleLinkClick">
+    <icon-simple-icons:gitee />
+  </n-icon>
+</template>
+
+<script setup>
+function handleLinkClick() {
+  window.open('https://gitee.com/isme-admin/vue-naive-admin')
+}
+</script>

src/layout/components/header/components/GithubSite.vue

@@ -0,0 +1,11 @@
+<template>
+  <n-icon mr-20 size="18" style="cursor: pointer" @click="handleLinkClick">
+    <icon-mdi:github />
+  </n-icon>
+</template>
+
+<script setup>
+function handleLinkClick() {
+  window.open('https://github.com/zclzone/vue-naive-admin')
+}
+</script>

src/layout/components/header/components/MenuCollapse.vue

@@ -0,0 +1,12 @@
+<template>
+  <n-icon size="20" cursor-pointer @click="appStore.switchCollapsed">
+    <icon-mdi:format-indent-increase v-if="appStore.collapsed" />
+    <icon-mdi:format-indent-decrease v-else />
+  </n-icon>
+</template>
+
+<script setup>
+import { useAppStore } from '@/store'
+
+const appStore = useAppStore()
+</script>

src/layout/components/header/components/MessageNotification.vue

@@ -0,0 +1,82 @@
+<template>
+  <n-popover trigger="click" placement="bottom" @update:show="handlePopoverShow">
+    <template #trigger>
+      <n-badge :value="count" mr-20 cursor-pointer>
+        <n-icon size="18" color-black dark="color-hex-fff">
+          <icon-material-symbols:notifications-outline />
+        </n-icon>
+      </n-badge>
+    </template>
+    <n-tabs v-model:value="activeTab" type="line" justify-content="space-around" animated>
+      <n-tab-pane
+        v-for="tab in tabs"
+        :key="tab.name"
+        :name="tab.name"
+        :tab="tab.title + `(${tab.messages.length})`"
+      >
+        <ul class="cus-scroll-y max-h-200 w-220">
+          <li
+            v-for="(item, index) in tab.messages"
+            :key="index"
+            class="flex-col py-12"
+            border-t="1 solid gray-200"
+            :style="index > 0 ? '' : 'border: none;'"
+          >
+            <span mb-4 text-ellipsis>{{ item.content }}</span>
+            <span text-hex-bbb>{{ item.time }}</span>
+          </li>
+        </ul>
+      </n-tab-pane>
+    </n-tabs>
+  </n-popover>
+</template>
+
+<script setup>
+import { formatDateTime } from '@/utils'
+
+const activeTab = ref('')
+const tabs = [
+  {
+    name: 'zan',
+    title: '点赞',
+    messages: [
+      { content: '你的文章《XX》收到一条点赞', time: formatDateTime() },
+      { content: '你的文章《YY》收到一条点赞', time: formatDateTime() },
+      { content: '你的文章《AA》收到一条点赞', time: formatDateTime() },
+      { content: '你的文章《BB》收到一条点赞', time: formatDateTime() },
+      { content: '你的文章《CC》收到一条点赞', time: formatDateTime() },
+      { content: '你的文章《DD》收到一条点赞', time: formatDateTime() },
+    ],
+  },
+  {
+    name: 'star',
+    title: '关注',
+    messages: [
+      { content: '张三 关注了你', time: formatDateTime() },
+      { content: '王五 关注了你', time: formatDateTime() },
+    ],
+  },
+  {
+    name: 'comment',
+    title: '评论',
+    messages: [
+      { content: '张三 评论了你的文章《XX》"学到了"', time: formatDateTime() },
+      { content: '李四 评论了你的文章《YY》"不如Vue"', time: formatDateTime() },
+    ],
+  },
+]
+const count = ref(tabs.map((item) => item.messages).flat().length)
+
+watch(activeTab, (v) => {
+  if (count === 0) return
+  const tabIndex = tabs.findIndex((item) => item.name === v)
+  count.value -= tabs[tabIndex].messages.length
+  if (count.value < 0) count.value = 0
+})
+
+function handlePopoverShow(show) {
+  if (show && !activeTab.value) {
+    activeTab.value = tabs[0]?.name
+  }
+}
+</script>

src/layout/components/header/components/ThemeMode.vue

@@ -0,0 +1,18 @@
+<script setup>
+import { useAppStore } from '@/store'
+import { useDark, useToggle } from '@vueuse/core'
+
+const appStore = useAppStore()
+const isDark = useDark()
+const toggleDark = () => {
+  appStore.toggleDark()
+  useToggle(isDark)()
+}
+</script>
+
+<template>
+  <n-icon mr-20 cursor-pointer size="18" @click="toggleDark">
+    <icon-mdi-moon-waning-crescent v-if="isDark" />
+    <icon-mdi-white-balance-sunny v-else />
+  </n-icon>
+</template>

src/layout/components/header/components/UserAvatar.vue

@@ -0,0 +1,37 @@
+<template>
+  <n-dropdown :options="options" @select="handleSelect">
+    <div flex cursor-pointer items-center>
+      <img :src="userStore.avatar" mr10 h-35 w-35 rounded-full />
+      <span>{{ userStore.name }}</span>
+    </div>
+  </n-dropdown>
+</template>
+
+<script setup>
+import { useUserStore } from '@/store'
+import { renderIcon } from '@/utils'
+
+const userStore = useUserStore()
+
+const options = [
+  {
+    label: '退出登录',
+    key: 'logout',
+    icon: renderIcon('mdi:exit-to-app', { size: '14px' }),
+  },
+]
+
+function handleSelect(key) {
+  if (key === 'logout') {
+    $dialog.confirm({
+      title: '提示',
+      type: 'info',
+      content: '确认退出？',
+      confirm() {
+        userStore.logout()
+        $message.success('已退出登录')
+      },
+    })
+  }
+}
+</script>

src/layout/components/header/index.vue

@@ -1,21 +1,25 @@
-<script setup>
-import BreadCrumb from './BreadCrumb.vue'
-import HeaderAction from './HeaderAction.vue'
-</script>
-
 <template>
-  <header class="header">
+  <div flex items-center>
-    <bread-crumb />
+    <MenuCollapse />
-    <header-action />
+    <BreadCrumb ml-15 hidden sm:block />
-  </header>
+  </div>
+  <div ml-auto flex items-center>
+    <MessageNotification />
+    <ThemeMode />
+    <GiteeSite />
+    <GithubSite />
+    <FullScreen />
+    <UserAvatar />
+  </div>
 </template>
 
-<style lang="scss" scoped>
+<script setup>
-.header {
+import BreadCrumb from './components/BreadCrumb.vue'
-  padding: 0 35px;
+import MenuCollapse from './components/MenuCollapse.vue'
-  height: 100%;
+import FullScreen from './components/FullScreen.vue'
-  display: flex;
+import UserAvatar from './components/UserAvatar.vue'
-  justify-content: space-between;
+import GithubSite from './components/GithubSite.vue'
-  align-items: center;
+import GiteeSite from './components/GiteeSite.vue'
-}
+import ThemeMode from './components/ThemeMode.vue'
-</style>
+import MessageNotification from './components/MessageNotification.vue'
+</script>

src/layout/components/sidebar/SideLogo.vue

@@ -1,32 +0,0 @@
-<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 />
-    </n-icon>
-    <router-link to="/">
-      <n-gradient-text type="primary">{{ title }}</n-gradient-text>
-    </router-link>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.logo {
-  height: 64px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  a {
-    margin-left: 5px;
-    .n-gradient-text {
-      font-size: 14px;
-      font-weight: bold;
-    }
-  }
-}
-</style>

src/layout/components/sidebar/SideMenu.vue

@@ -1,160 +0,0 @@
-<script setup>
-import { NMenu } from 'naive-ui'
-import { useRouter } from 'vue-router'
-import { computed } from 'vue'
-import { usePermissionStore } from '@/store/modules/permission'
-
-const router = useRouter()
-const permissionStore = usePermissionStore()
-
-const { currentRoute } = router
-const routes = permissionStore.routes
-
-const menuOptions = computed(() => {
-  return generateOptions(routes, '')
-})
-
-function resolvePath(...pathes) {
-  return (
-    '/' +
-    pathes
-      .filter((path) => !!path && path !== '/')
-      .map((path) => path.replace(/(^\/)|(\/$)/g, ''))
-      .join('/')
-  )
-}
-
-function generateOptions(routes, basePath) {
-  let options = []
-  routes.forEach((route) => {
-    if (route.name && !route.isHidden) {
-      let curOption = {
-        label: (route.meta && route.meta.title) || route.name,
-        key: route.name,
-        path: resolvePath(basePath, route.path),
-      }
-      if (route.children && route.children.length) {
-        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
-      }
-      options.push(curOption)
-    }
-  })
-  return options
-}
-
-function handleMenuSelect(key, item) {
-  router.push(item.path)
-
-  // 通过path重定向
-  // router.push({
-  //   path: '/redirect',
-  //   query: { redirect: item.path },
-  // })
-}
-</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;
-    &::before {
-      left: 0;
-      right: 0;
-      border-radius: 0;
-      background-color: unset !important;
-    }
-
-    &:hover,
-    &.n-menu-item--selected {
-      border-radius: 0 !important;
-
-      &::before {
-        border-right: 3px solid $primaryColor;
-        background-color: #16243a;
-        background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba($primaryColor, 0.3) 100%);
-      }
-    }
-  }
-
-  .n-menu-item-content-header {
-    font-size: 14px;
-    font-weight: bold;
-  }
-
-  .n-submenu-children {
-    .n-menu-item-content-header {
-      font-size: 14px;
-      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>