mirror of
https://github.com/xxxsf/vue3-h5-template.git
synced 2025-04-05 04:12:45 +08:00
feat: update
This commit is contained in:
allan91coder
parent
501824d497
commit
6397157ed7
25
.editorconfig
Normal file
25
.editorconfig
Normal file
@ -0,0 +1,25 @@
|
||||
# 修改配置后重启编辑器
|
||||
# 配置项文档：https://editorconfig.org/
|
||||
|
||||
# 告知 EditorConfig 插件，当前即是根文件
|
||||
root = true
|
||||
|
||||
# 适用全部文件
|
||||
[*]
|
||||
## 设置字符集
|
||||
charset = utf-8
|
||||
## 缩进风格 space | tab，建议 space（会自动继承给 Prettier）
|
||||
indent_style = space
|
||||
## 缩进的空格数（会自动继承给 Prettier）
|
||||
indent_size = 2
|
||||
## 换行符类型 lf | cr | crlf，一般都是设置为 lf
|
||||
end_of_line = lf
|
||||
## 是否在文件末尾插入空白行
|
||||
insert_final_newline = true
|
||||
## 是否删除一行中的前后空格
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
# 适用 .md 文件
|
||||
[*.md]
|
||||
insert_final_newline = false
|
||||
trim_trailing_whitespace = false
|
||||
6
.env
6
.env
@ -1,2 +1,4 @@
|
||||
VITE_TOKEN_KEY=tokenKey
|
||||
VITE_URL_PREFIX=/api
|
||||
# 所有环境自定义的环境变量（命名必须以 VITE_ 开头）
|
||||
|
||||
## 项目标题
|
||||
VITE_APP_TITLE = My Vue3 Template
|
||||
|
||||
10
.env.development
Normal file
10
.env.development
Normal file
@ -0,0 +1,10 @@
|
||||
# 开发环境自定义的环境变量（命名必须以 VITE_ 开头）
|
||||
|
||||
## 后端接口公共路径（如果解决跨域问题采用反向代理就只需写公共路径）
|
||||
VITE_BASE_API = '/api/v1'
|
||||
|
||||
## 路由模式 hash 或 html5
|
||||
VITE_ROUTER_HISTORY = 'hash'
|
||||
|
||||
## 开发环境地址前缀（一般 '/'，'./' 都可以）
|
||||
VITE_PUBLIC_PATH = '/'
|
||||
@ -1,2 +1,10 @@
|
||||
VITE_TOKEN_KEY=tokenKey
|
||||
VITE_URL_PREFIX=/api
|
||||
# 生产环境自定义的环境变量（命名必须以 VITE_ 开头）
|
||||
|
||||
## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
|
||||
VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
|
||||
|
||||
## 路由模式 hash 或 html5
|
||||
VITE_ROUTER_HISTORY = 'hash'
|
||||
|
||||
## 打包路径（就是网站前缀，例如部署到 https://xx.github.io/vue3-admin-vite/ 域名下，就需要填写 /vue3-admin-vite/）
|
||||
VITE_PUBLIC_PATH = '/vue3-admin-vite/'
|
||||
|
||||
10
.env.staging
Normal file
10
.env.staging
Normal file
@ -0,0 +1,10 @@
|
||||
# 预发布环境自定义的环境变量（命名必须以 VITE_ 开头）
|
||||
|
||||
## 后端接口公共路径（如果解决跨域问题采用 CORS 就需要写全路径）
|
||||
VITE_BASE_API = 'https://mock.mengxuegu.com/mock/63218b5fb4c53348ed2bc212/api/v1'
|
||||
|
||||
## 路由模式 hash 或 html5
|
||||
VITE_ROUTER_HISTORY = 'hash'
|
||||
|
||||
## 打包路径（就是网站前缀，例如部署到 https://xxx.github.io/vue3-admin-vite/ 域名下，就需要填写 /vue3-admin-vite/）
|
||||
VITE_PUBLIC_PATH = '/vue3-admin-vite/'
|
||||
@ -1,15 +1,8 @@
|
||||
# Eslint 会忽略的文件
|
||||
|
||||
*.sh
|
||||
.DS_Store
|
||||
node_modules
|
||||
*.md
|
||||
*.woff
|
||||
*.ttf
|
||||
.vscode
|
||||
.idea
|
||||
dist
|
||||
/public
|
||||
/docs
|
||||
.husky
|
||||
.local
|
||||
/bin
|
||||
Dockerfile
|
||||
dist-ssr
|
||||
*.local
|
||||
.npmrc
|
||||
|
||||
75
.eslintrc.cjs
Normal file
75
.eslintrc.cjs
Normal file
@ -0,0 +1,75 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true
|
||||
},
|
||||
extends: [
|
||||
"plugin:vue/vue3-essential",
|
||||
"eslint:recommended",
|
||||
"@vue/typescript/recommended",
|
||||
"@vue/prettier",
|
||||
"@vue/eslint-config-typescript"
|
||||
],
|
||||
parser: "vue-eslint-parser",
|
||||
parserOptions: {
|
||||
parser: "@typescript-eslint/parser",
|
||||
ecmaVersion: 2020,
|
||||
sourceType: "module",
|
||||
jsxPragma: "React",
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
tsx: true
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
// TS
|
||||
"@typescript-eslint/no-unused-expressions": "off",
|
||||
"@typescript-eslint/no-explicit-any": "off",
|
||||
"no-debugger": "off",
|
||||
"@typescript-eslint/explicit-module-boundary-types": "off",
|
||||
"@typescript-eslint/ban-types": "off",
|
||||
"@typescript-eslint/ban-ts-comment": "off",
|
||||
"@typescript-eslint/no-empty-function": "off",
|
||||
"@typescript-eslint/no-non-null-assertion": "off",
|
||||
"@typescript-eslint/no-unused-vars": [
|
||||
"error",
|
||||
{
|
||||
argsIgnorePattern: "^_",
|
||||
varsIgnorePattern: "^_"
|
||||
}
|
||||
],
|
||||
"no-unused-vars": [
|
||||
"error",
|
||||
{
|
||||
argsIgnorePattern: "^_",
|
||||
varsIgnorePattern: "^_"
|
||||
}
|
||||
],
|
||||
// Vue
|
||||
"vue/no-v-html": "off",
|
||||
"vue/require-default-prop": "off",
|
||||
"vue/require-explicit-emits": "off",
|
||||
"vue/multi-word-component-names": "off",
|
||||
"vue/html-self-closing": [
|
||||
"error",
|
||||
{
|
||||
html: {
|
||||
void: "always",
|
||||
normal: "always",
|
||||
component: "always"
|
||||
},
|
||||
svg: "always",
|
||||
math: "always"
|
||||
}
|
||||
],
|
||||
// Prettier
|
||||
"prettier/prettier": [
|
||||
"error",
|
||||
{
|
||||
endOfLine: "auto"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
72
.eslintrc.js
72
.eslintrc.js
@ -1,72 +0,0 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
browser: true,
|
||||
node: true,
|
||||
es6: true,
|
||||
},
|
||||
parser: 'vue-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser',
|
||||
ecmaVersion: 2020,
|
||||
sourceType: 'module',
|
||||
jsxPragma: 'React',
|
||||
ecmaFeatures: {
|
||||
jsx: true,
|
||||
},
|
||||
},
|
||||
extends: ['plugin:vue/vue3-recommended', 'plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
|
||||
rules: {
|
||||
'vue/script-setup-uses-vars': 'error',
|
||||
'@typescript-eslint/ban-ts-ignore': 'off',
|
||||
'@typescript-eslint/explicit-function-return-type': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'off',
|
||||
'vue/custom-event-name-casing': 'off',
|
||||
'no-use-before-define': 'off',
|
||||
'@typescript-eslint/no-use-before-define': 'off',
|
||||
'@typescript-eslint/ban-ts-comment': 'off',
|
||||
'@typescript-eslint/ban-types': 'off',
|
||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
||||
'@typescript-eslint/no-unused-vars': [
|
||||
'error',
|
||||
{
|
||||
argsIgnorePattern: '^_',
|
||||
varsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'no-unused-vars': [
|
||||
'error',
|
||||
{
|
||||
argsIgnorePattern: '^_',
|
||||
varsIgnorePattern: '^_',
|
||||
},
|
||||
],
|
||||
'space-before-function-paren': 'off',
|
||||
|
||||
'vue/attributes-order': 'off',
|
||||
'vue/one-component-per-file': 'off',
|
||||
'vue/html-closing-bracket-newline': 'off',
|
||||
'vue/max-attributes-per-line': 'off',
|
||||
'vue/multiline-html-element-content-newline': 'off',
|
||||
'vue/singleline-html-element-content-newline': 'off',
|
||||
'vue/attribute-hyphenation': 'off',
|
||||
'vue/require-default-prop': 'off',
|
||||
'vue/require-explicit-emits': 'off',
|
||||
'vue/html-self-closing': [
|
||||
'error',
|
||||
{
|
||||
html: {
|
||||
void: 'always',
|
||||
normal: 'never',
|
||||
component: 'always',
|
||||
},
|
||||
svg: 'always',
|
||||
math: 'always',
|
||||
},
|
||||
],
|
||||
'vue/multi-word-component-names': 'off',
|
||||
},
|
||||
};
|
||||
1
.github/FUNDING.yml
vendored
Normal file
1
.github/FUNDING.yml
vendored
Normal file
@ -0,0 +1 @@
|
||||
custom: https://github.com/xsf0105/my-vue3-template/issues/69
|
||||
35
.github/workflows/deploy.yml
vendored
Normal file
35
.github/workflows/deploy.yml
vendored
Normal file
@ -0,0 +1,35 @@
|
||||
name: Build And Deploy my-vue3-template
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- main
|
||||
|
||||
jobs:
|
||||
build-and-deploy:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v2
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
- name: Setup Node.js 20.15.1
|
||||
uses: actions/setup-node@master
|
||||
with:
|
||||
node-version: 20.15.1
|
||||
|
||||
- name: Setup pnpm
|
||||
uses: pnpm/action-setup@v2
|
||||
with:
|
||||
version: 9.5.0
|
||||
|
||||
- name: Build
|
||||
run: pnpm install && pnpm build:prod
|
||||
|
||||
- name: Deploy
|
||||
uses: JamesIves/github-pages-deploy-action@releases/v3
|
||||
with:
|
||||
ACCESS_TOKEN: ${{ secrets.V3_ADMIN_VITE }}
|
||||
BRANCH: gh-pages
|
||||
FOLDER: dist
|
||||
25
.gitignore
vendored
25
.gitignore
vendored
@ -1,3 +1,14 @@
|
||||
# Git 会忽略的文件
|
||||
|
||||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
.eslintcache
|
||||
|
||||
# Local env files
|
||||
*.local
|
||||
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
@ -7,18 +18,18 @@ yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.eslintcache
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
!.vscode/settings.json
|
||||
!.vscode/*.code-snippets
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# Use the PNPM
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
|
||||
8
.husky/pre-commit
Executable file → Normal file
8
.husky/pre-commit
Executable file → Normal file
@ -1,7 +1 @@
|
||||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
[ -n "$CI" ] && exit 0
|
||||
|
||||
# Format and submit code according to lintstagedrc.js configuration
|
||||
npm run lint:lint-staged
|
||||
npx lint-staged
|
||||
|
||||
5
.npmrc
Normal file
5
.npmrc
Normal file
@ -0,0 +1,5 @@
|
||||
# China mirror of npm
|
||||
# registry = https://registry.npmmirror.com
|
||||
|
||||
# 通过该配置兜底解决组件没有类型提示的问题
|
||||
shamefully-hoist = true
|
||||
@ -1,9 +1,8 @@
|
||||
/dist/*
|
||||
.local
|
||||
.output.js
|
||||
/node_modules/**
|
||||
# Prettier 会忽略的文件
|
||||
|
||||
**/*.svg
|
||||
**/*.sh
|
||||
|
||||
/public/*
|
||||
.DS_Store
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.npmrc
|
||||
|
||||
@ -1,3 +0,0 @@
|
||||
/dist/*
|
||||
/public/*
|
||||
public/*
|
||||
3
.vite/deps_temp_fe7bd124/package.json
Normal file
3
.vite/deps_temp_fe7bd124/package.json
Normal file
@ -0,0 +1,3 @@
|
||||
{
|
||||
"type": "module"
|
||||
}
|
||||
10
.vscode/extensions.json
vendored
10
.vscode/extensions.json
vendored
@ -1,3 +1,11 @@
|
||||
{
|
||||
"recommendations": ["johnsoncodehk.volar"]
|
||||
"recommendations": [
|
||||
"editorconfig.editorconfig",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"vue.volar",
|
||||
"antfu.unocss",
|
||||
"vitest.explorer",
|
||||
"wiensss.region-highlighter"
|
||||
]
|
||||
}
|
||||
|
||||
16
.vscode/hook.code-snippets
vendored
Normal file
16
.vscode/hook.code-snippets
vendored
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"Vue3 Hook 代码结构一键生成": {
|
||||
"prefix": "Vue3 Hook",
|
||||
"body": [
|
||||
"import { ref } from \"vue\"\n",
|
||||
"const refName1 = ref<string>(\"这是一个响应式变量\")\n",
|
||||
"export function useHookName() {",
|
||||
"\tconst refName2 = ref<string>(\"这是一个响应式变量\")\n",
|
||||
"\tconst fnName = () => {}\n",
|
||||
"\treturn { refName1, refName2, fnName }",
|
||||
"}",
|
||||
"$1"
|
||||
],
|
||||
"description": "Vue3 Hook"
|
||||
}
|
||||
}
|
||||
41
.vscode/settings.json
vendored
41
.vscode/settings.json
vendored
@ -1,19 +1,30 @@
|
||||
{
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": "explicit"
|
||||
"prettier.enable": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
},
|
||||
"eslint.options": {
|
||||
// "configFile": "./eslintrc.js",
|
||||
"rules": {
|
||||
"no-restricted-syntax": "off"
|
||||
}
|
||||
"[vue]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"typescript",
|
||||
"typescriptreact"
|
||||
]
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[typescript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[jsonc]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[css]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[scss]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
}
|
||||
}
|
||||
|
||||
14
.vscode/vue.code-snippets
vendored
Normal file
14
.vscode/vue.code-snippets
vendored
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"Vue3 SFC 代码结构一键生成": {
|
||||
"prefix": "Vue3 SFC",
|
||||
"body": [
|
||||
"<script lang=\"ts\" setup></script>\n",
|
||||
"<template>",
|
||||
"\t<div class=\"app-container\">...</div>",
|
||||
"</template>\n",
|
||||
"<style scoped></style>",
|
||||
"$1"
|
||||
],
|
||||
"description": "Vue3 SFC"
|
||||
}
|
||||
}
|
||||
21
LICENSE
21
LICENSE
@ -1,21 +0,0 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2023 xsf
|
||||
|
||||
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.
|
||||
398
README.md
398
README.md
@ -1,338 +1,98 @@
|
||||
# vue3-template
|
||||
## Introduction
|
||||
|
||||
基于 vue3 + vite + Pinia + quark design + sass/less + viewport 适配方案 + axios 封装，构建手机端模板脚手架
|
||||
Vue3 Admin Vite is a free and open source middle and background management system basic solution, based on mainstream framework such as Vue3, TypeScript, Element Plus, Pinia and Vite
|
||||
|
||||
### 启动项目
|
||||
## Feature
|
||||
|
||||
- **Vue3**：The latest Vue3 composition API using Vue3 + script setup
|
||||
- **Element Plus**：Vue3 version of Element UI
|
||||
- **Pinia**: An alternative to Vuex in Vue3
|
||||
- **Vite**：Really fast
|
||||
- **Vue Router**：router
|
||||
- **TypeScript**：JavaScript With Syntax For Types
|
||||
- **PNPM**：Faster, disk space saving package management tool
|
||||
- **Scss**：Consistent with Element Plus
|
||||
- **CSS variable**：Mainly controls the layout and color of the item
|
||||
- **ESlint**：Code verification
|
||||
- **Prettier**： Code formatting
|
||||
- **Axios**: Promise based HTTP client (encapsulated)
|
||||
- **UnoCSS**: Real-time atomized CSS engine with high performance and flexibility
|
||||
- **Mobile Compatible**: The layout is compatible with mobile page resolution
|
||||
|
||||
## Functions
|
||||
|
||||
- **User management**: Log in and out of the demo
|
||||
- **Authority management**: Page-level permissions (dynamic routing), button-level permissions (directive permissions, permission functions), and route navigation guards
|
||||
- **Multiple Environments**: Development, Staging, Production
|
||||
- **Multiple themes**: Normal, Dark, Dark Blue, three theme modes
|
||||
- **Multiple layouts**：Left, Top, Left Top, three layout modes
|
||||
- **Error page**: 403, 404
|
||||
- **Dashboard**: Display different Dashboard pages according to different users
|
||||
- **Other functions**：SVG, Dynamic Sidebar, Dynamic Breadcrumb Navigation, Tabbed Navigation, Screenfull, Adaptive Shrink Sidebar, Hook (Composables)
|
||||
|
||||
## 🚀 Development
|
||||
|
||||
```bash
|
||||
npm install
|
||||
npm run dev
|
||||
# configure
|
||||
1. installation of the recommended plugins in the .vscode directory
|
||||
2. node version 18.x or 20+
|
||||
3. pnpm version 8.x or latest
|
||||
|
||||
# clone
|
||||
git clone https://github.com/xsf0105/my-vue3-template.git
|
||||
|
||||
# enter the project directory
|
||||
cd my-vue3-template
|
||||
|
||||
# install dependencies
|
||||
pnpm i
|
||||
|
||||
# start the service
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
<span id="top">目录</span>
|
||||
|
||||
- [√ vite](#)
|
||||
- [√ 配置多环境变量](#env)
|
||||
- [√ viewport 适配方案](#viewport)
|
||||
- [√ Pinia 状态管理](#Pinia)
|
||||
- [√ Vue-router4](#router)
|
||||
- [√ Axios 封装及接口管理](#axios)
|
||||
- [√ vite.config.ts 基础配置](#base)
|
||||
- [√ alias](#alias)
|
||||
- [√ proxy 跨域](#proxy)
|
||||
- [√ Eslint + Pettier + stylelint 统一开发规范 ](#lint)
|
||||
|
||||
### <span id="env">✅ 配置多环境变量 </span>
|
||||
|
||||
`package.json` 里的 `scripts` 配置 `dev` `dev:test` `dev:prod` ，通过 `--mode xxx` 来执行不同环境
|
||||
|
||||
- 通过 `npm run dev` 启动本地环境参数 , 执行 `development`
|
||||
- 通过 `npm run dev:test` 启动测试环境参数 , 执行 `test`
|
||||
- 通过 `npm run dev:prod` 启动正式环境参数 , 执行 `prod`
|
||||
|
||||
```javascript
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"dev:test": "vite --mode test",
|
||||
"dev:prod": "vite --mode production",
|
||||
}
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="viewport">✅ viewport 适配方案 </span>
|
||||
|
||||
不用担心，项目已经配置好了 `viewport` 适配, 下面仅做介绍：
|
||||
|
||||
- [postcss-px-to-viewport-8-plugin](https://github.com/xian88888888/postcss-px-to-viewport-8-plugin) 是一款 `postcss` 插件，用于将单位转化为 `vw`, 现在很多浏览器对`vw`的支持都很好。
|
||||
|
||||
##### PostCSS 配置
|
||||
|
||||
下面提供了一份基本的 `postcss` 配置，可以在此配置的基础上根据项目需求进行修改
|
||||
|
||||
```javascript
|
||||
// https://github.com/michael-ciniawsky/postcss-load-config
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-px-to-viewport-8-plugin': {
|
||||
unitToConvert: 'px', // 要转化的单位
|
||||
viewportWidth: 375, // UI设计稿的宽度
|
||||
unitPrecision: 6, // 转换后的精度，即小数点位数
|
||||
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
|
||||
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
|
||||
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
|
||||
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
|
||||
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
|
||||
replace: true, // 是否转换后直接更换属性值
|
||||
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
|
||||
},
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
更多详细信息： [quarkd](https://quark-ecosystem.github.io/quarkd-docs/)
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="quarkd">✅ quarkd 组件按需加载 </span>
|
||||
|
||||
[https://quark-ecosystem.github.io/quarkd-docs](https://quark-ecosystem.github.io/quarkd-docs/)
|
||||
|
||||
#### 安装插件
|
||||
## ✔️ Preview
|
||||
|
||||
```bash
|
||||
npm i quarkd
|
||||
# stage environment
|
||||
pnpm preview:stage
|
||||
|
||||
# prod environment
|
||||
pnpm preview:prod
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="Pinia">✅ Pinia 状态管理</span>
|
||||
|
||||
下一代 vuex，使用极其方便，ts 兼容好
|
||||
|
||||
目录结构
|
||||
## 📦️ Multi-environment packaging
|
||||
|
||||
```bash
|
||||
├── store
|
||||
│ ├── modules
|
||||
│ │ └── user.js
|
||||
│ ├── index.js
|
||||
# build the stage environment
|
||||
pnpm build:stage
|
||||
|
||||
# build the prod environment
|
||||
pnpm build:prod
|
||||
```
|
||||
|
||||
使用
|
||||
## 🔧 Code inspection
|
||||
|
||||
```html
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/modules/user';
|
||||
```bash
|
||||
# code formatting
|
||||
pnpm lint
|
||||
|
||||
const userStore = useUserStore();
|
||||
userStore.login();
|
||||
</script>
|
||||
# unit test
|
||||
pnpm test
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
## Git commit specification reference
|
||||
|
||||
### <span id="router">✅ Vue-router </span>
|
||||
|
||||
本案例采用 `hash` 模式，开发者根据需求修改 `mode` `base`
|
||||
|
||||
**注意**：如果你使用了 `history` 模式， `vue.config.js` 中的 `publicPath` 要做对应的**修改**
|
||||
|
||||
前往:[vue.config.js 基础配置](#base)
|
||||
|
||||
```javascript
|
||||
import Vue from 'vue';
|
||||
import { createRouter, createWebHistory, Router } from 'vue-router';
|
||||
|
||||
Vue.use(Router);
|
||||
|
||||
export const router = [
|
||||
{
|
||||
name: 'root',
|
||||
path: '/',
|
||||
redirect: '/home',
|
||||
component: () => import('@/layout/basic/index.vue'),
|
||||
},
|
||||
];
|
||||
|
||||
const router: Router = createRouter({
|
||||
history: createWebHistory(),
|
||||
routes: routes,
|
||||
});
|
||||
|
||||
export default router;
|
||||
```
|
||||
|
||||
更多:[Vue Router](https://router.vuejs.org/zh/introduction.html)
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="axios">✅ Axios 封装及接口管理</span>
|
||||
|
||||
`utils/request.js` 封装 axios , 开发者需要根据后台接口做修改。
|
||||
|
||||
- `service.interceptors.request.use` 里可以设置请求头，比如设置 `token`
|
||||
- `config.hideloading` 是在 api 文件夹下的接口参数里设置，下文会讲
|
||||
- `service.interceptors.response.use` 里可以对接口返回数据处理，比如 401 删除本地信息，重新登录
|
||||
|
||||
```javascript
|
||||
import axios from 'axios';
|
||||
import store from '@/store';
|
||||
import Toast from 'quarkd/lib/toast';
|
||||
// 根据环境不同引入不同api地址
|
||||
import { baseApi } from '@/config';
|
||||
|
||||
// create an axios instance
|
||||
const service = axios.create({
|
||||
baseURL: baseApi, // url = base api url + request url
|
||||
withCredentials: true, // send cookies when cross-domain requests
|
||||
timeout: 5000, // request timeout
|
||||
});
|
||||
|
||||
// request 拦截器 request interceptor
|
||||
service.interceptors.request.use(
|
||||
(config) => {
|
||||
// 不传递默认开启loading
|
||||
if (!config.hideloading) {
|
||||
// loading
|
||||
Toast.loading('loading');
|
||||
}
|
||||
if (store.getters.token) {
|
||||
config.headers['X-Token'] = '';
|
||||
}
|
||||
return config;
|
||||
},
|
||||
(error) => {
|
||||
// do something with request error
|
||||
console.log(error); // for debug
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
// respone拦截器
|
||||
service.interceptors.response.use(
|
||||
(response) => {
|
||||
Toast.clear();
|
||||
const res = response.data;
|
||||
if (res.status && res.status !== 200) {
|
||||
// 登录超时,重新登录
|
||||
if (res.status === 401) {
|
||||
store.dispatch('FedLogOut').then(() => {
|
||||
location.reload();
|
||||
});
|
||||
}
|
||||
return Promise.reject(res || 'error');
|
||||
} else {
|
||||
return Promise.resolve(res);
|
||||
}
|
||||
},
|
||||
(error) => {
|
||||
Toast.clear();
|
||||
console.log('err' + error); // for debug
|
||||
return Promise.reject(error);
|
||||
},
|
||||
);
|
||||
export default service;
|
||||
```
|
||||
|
||||
#### 接口管理
|
||||
|
||||
在 `src/api` 文件夹下统一管理接口
|
||||
|
||||
- 你可以建立多个模块对接接口, 比如 `home.js` 里是首页的接口这里讲解 `user.js`
|
||||
- `url` 接口地址，请求的时候会拼接上 `config` 下的 `baseApi`
|
||||
- `method` 请求方法
|
||||
- `data` 请求参数 `qs.stringify(params)` 是对数据系列化操作
|
||||
- `hideloading` 默认 `false`, 设置为 `true` 后，不显示 loading ui 交互中有些接口不需要让用户感知
|
||||
|
||||
```javascript
|
||||
import qs from 'qs';
|
||||
// axios
|
||||
import request from '@/utils/request';
|
||||
//user api
|
||||
|
||||
// 用户信息
|
||||
export function getUserInfo(params) {
|
||||
return request({
|
||||
url: '/user/userinfo',
|
||||
method: 'post',
|
||||
data: qs.stringify(params),
|
||||
hideloading: true, // 隐藏 loading 组件
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
#### 如何调用
|
||||
|
||||
```javascript
|
||||
// 请求接口
|
||||
import { getUserInfo } from '@/api/user.js';
|
||||
|
||||
const params = {
|
||||
user: 'sunnie',
|
||||
};
|
||||
getUserInfo(params)
|
||||
.then(() => {})
|
||||
.catch(() => {});
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="base">✅ vite.config.ts 基础配置 </span>
|
||||
|
||||
如果你的 `Vue Router` 模式是 hash
|
||||
|
||||
```javascript
|
||||
publicPath: './',
|
||||
```
|
||||
|
||||
如果你的 `Vue Router` 模式是 history 这里的 publicPath 和你的 `Vue Router` `base` **保持一直**
|
||||
|
||||
```javascript
|
||||
publicPath: '/app/',
|
||||
```
|
||||
|
||||
```javascript
|
||||
export default function ({ command }: ConfigEnv): UserConfigExport {
|
||||
const isProduction = command === 'build';
|
||||
return {
|
||||
server: {
|
||||
host: '0.0.0.0',
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vueJsx(),
|
||||
viteMockServe({
|
||||
mockPath: './src/mock',
|
||||
localEnabled: command === 'serve',
|
||||
logger: true,
|
||||
}),
|
||||
],
|
||||
};
|
||||
}
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="alias">✅ 配置 alias 别名 </span>
|
||||
|
||||
```javascript
|
||||
resolve: {
|
||||
alias: [{
|
||||
find: 'vue-i18n',
|
||||
replacement: 'vue-i18n/dist/vue-i18n.cjs.js',
|
||||
},
|
||||
// /@/xxxx => src/xxxx
|
||||
{
|
||||
find: /\/@\//,
|
||||
replacement: pathResolve('src') + '/',
|
||||
},
|
||||
// /#/xxxx => types/xxxx
|
||||
{
|
||||
find: /\/#\//,
|
||||
replacement: pathResolve('types') + '/',
|
||||
},
|
||||
],
|
||||
},
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="proxy">✅ 配置 proxy 跨域 </span>
|
||||
|
||||
```javascript
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'https://baidu.com',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
}
|
||||
}
|
||||
},
|
||||
```
|
||||
|
||||
[▲ 回顶部](#top)
|
||||
|
||||
### <span id="lint">✅ Eslint+Pettier+stylelint 统一开发规范 </span>
|
||||
|
||||
根目录下的`.eslintrc.js`、`.stylelint.config.js`、`.prettier.config.js`内置了 lint 规则，帮助你规范地开发代码，有助于提高团队的代码质量和协作性，可以根据团队的规则进行修改
|
||||
- `feat` add new functions
|
||||
- `fix` Fix issues/bugs
|
||||
- `perf` Optimize performance
|
||||
- `style` Change the code style without affecting the running result
|
||||
- `refactor` Re-factor code
|
||||
- `revert` Undo changes
|
||||
- `test` Test related, does not involve changes to business code
|
||||
- `docs` Documentation and Annotation
|
||||
- `chore` Updating dependencies/modifying scaffolding configuration, etc.
|
||||
- `workflow` Work flow Improvements
|
||||
- `ci` CICD
|
||||
- `types` Type definition
|
||||
- `wip` In development
|
||||
|
||||
103
README.zh-CN.md
Normal file
103
README.zh-CN.md
Normal file
@ -0,0 +1,103 @@
|
||||
<div align="center">
|
||||
<h1>VUE3 Admin Vite</h1>
|
||||
<span><a href="./README.md">English</a> | 中文</span>
|
||||
</div>
|
||||
|
||||
## ⚡ 简介
|
||||
|
||||
VUE3 Admin Vite 是一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术
|
||||
|
||||
## 特性
|
||||
|
||||
- **Vue3**：采用 Vue3 + script setup 最新的 Vue3 组合式 API
|
||||
- **Element Plus**：Element UI 的 Vue3 版本
|
||||
- **Pinia**: 传说中的 Vuex5
|
||||
- **Vite**：真的很快
|
||||
- **Vue Router**：路由路由
|
||||
- **TypeScript**：JavaScript 语言的超集
|
||||
- **PNPM**：更快速的，节省磁盘空间的包管理工具
|
||||
- **Scss**：和 Element Plus 保持一致
|
||||
- **CSS 变量**：主要控制项目的布局和颜色
|
||||
- **ESlint**：代码校验
|
||||
- **Prettier**：代码格式化
|
||||
- **Axios**：发送网络请求（已封装好）
|
||||
- **UnoCSS**：具有高性能且极具灵活性的即时原子化 CSS 引擎
|
||||
- **兼容移动端**: 布局兼容移动端页面分辨率
|
||||
|
||||
## 功能
|
||||
|
||||
- **用户管理**：登录、登出演示
|
||||
- **权限管理**：页面级权限（动态路由）、按钮级权限（指令权限、权限函数）、路由守卫
|
||||
- **多环境**：开发环境（development）、预发布环境（staging）、正式环境（production）
|
||||
- **多主题**：普通、黑暗、深蓝, 三种主题模式
|
||||
- **多布局**：左侧、顶部、混合, 三种布局模式
|
||||
- **错误页面**: 403、404
|
||||
- **Dashboard**：根据不同用户显示不同的 Dashboard 页面
|
||||
- **其他内置功能**：SVG、动态侧边栏、动态面包屑、标签页快捷导航、Screenfull 全屏、自适应收缩侧边栏、Hook（Composables）
|
||||
|
||||
## 🚀 开发
|
||||
|
||||
```bash
|
||||
# 配置
|
||||
1. 一键安装 .vscode 目录中推荐的插件
|
||||
2. node 版本 18.x 或 20+
|
||||
3. pnpm 版本 8.x 或最新版
|
||||
|
||||
# 克隆项目
|
||||
git clone https://github.com/xsf0105/my-vue3-template.git
|
||||
|
||||
# 进入项目目录
|
||||
cd my-vue3-template
|
||||
|
||||
# 安装依赖
|
||||
pnpm i
|
||||
|
||||
# 启动服务
|
||||
pnpm dev
|
||||
```
|
||||
|
||||
## ✔️ 预览
|
||||
|
||||
```bash
|
||||
# 预览预发布环境
|
||||
pnpm preview:stage
|
||||
|
||||
# 预览正式环境
|
||||
pnpm preview:prod
|
||||
```
|
||||
|
||||
## 📦️ 多环境打包
|
||||
|
||||
```bash
|
||||
# 构建预发布环境
|
||||
pnpm build:stage
|
||||
|
||||
# 构建正式环境
|
||||
pnpm build:prod
|
||||
```
|
||||
|
||||
## 🔧 代码检查
|
||||
|
||||
```bash
|
||||
# 代码格式化
|
||||
pnpm lint
|
||||
|
||||
# 单元测试
|
||||
pnpm test
|
||||
```
|
||||
|
||||
## Git 提交规范参考
|
||||
|
||||
- `feat` 增加新的业务功能
|
||||
- `fix` 修复业务问题/BUG
|
||||
- `perf` 优化性能
|
||||
- `style` 更改代码风格, 不影响运行结果
|
||||
- `refactor` 重构代码
|
||||
- `revert` 撤销更改
|
||||
- `test` 测试相关, 不涉及业务代码的更改
|
||||
- `docs` 文档和注释相关
|
||||
- `chore` 更新依赖/修改脚手架配置等琐事
|
||||
- `workflow` 工作流改进
|
||||
- `ci` 持续集成相关
|
||||
- `types` 类型定义文件更改
|
||||
- `wip` 开发中
|
||||
@ -1 +0,0 @@
|
||||
export const IsReport = process.env.REPORT;
|
||||
@ -1,21 +0,0 @@
|
||||
/**
|
||||
* @name AutoImportDeps
|
||||
* @description 按需加载，自动引入
|
||||
*/
|
||||
import AutoImport from 'unplugin-auto-import/vite';
|
||||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
|
||||
|
||||
export const AutoImportDeps = () => {
|
||||
return AutoImport({
|
||||
dts: 'types/auto-imports.d.ts',
|
||||
imports: [
|
||||
'vue',
|
||||
'pinia',
|
||||
'vue-router',
|
||||
{
|
||||
'@vueuse/core': [],
|
||||
},
|
||||
],
|
||||
resolvers: [ElementPlusResolver()],
|
||||
});
|
||||
};
|
||||
@ -1,20 +0,0 @@
|
||||
/**
|
||||
* @name AutoRegistryComponents
|
||||
* @description 按需加载，自动引入组件
|
||||
*/
|
||||
import Components from 'unplugin-vue-components/vite';
|
||||
import { VueUseComponentsResolver } from 'unplugin-vue-components/resolvers';
|
||||
export const AutoRegistryComponents = () => {
|
||||
return Components({
|
||||
// dirs: ['src/components'],
|
||||
extensions: ['vue', 'md'],
|
||||
deep: true,
|
||||
dts: 'types/components.d.ts',
|
||||
directoryAsNamespace: false,
|
||||
globalNamespaces: [],
|
||||
directives: true,
|
||||
include: [/\.vue$/, /\.vue\?vue/, /\.md$/],
|
||||
exclude: [/[\\/]node_modules[\\/]/, /[\\/]\.git[\\/]/, /[\\/]\.nuxt[\\/]/],
|
||||
resolvers: [VueUseComponentsResolver()],
|
||||
});
|
||||
};
|
||||
@ -1,18 +0,0 @@
|
||||
/**
|
||||
* @name ConfigCompressPlugin
|
||||
* @description 开启.gz压缩
|
||||
*/
|
||||
import viteCompression from 'vite-plugin-compression';
|
||||
|
||||
export const ConfigCompressPlugin = () => {
|
||||
return viteCompression({
|
||||
verbose: true, // 默认即可
|
||||
disable: false, //开启压缩(不禁用)，默认即可
|
||||
deleteOriginFile: false, //删除源文件
|
||||
threshold: 10240, //压缩前最小文件大小
|
||||
algorithm: 'gzip', //压缩算法
|
||||
ext: '.gz', //文件类型
|
||||
});
|
||||
|
||||
return [];
|
||||
};
|
||||
@ -1,32 +0,0 @@
|
||||
import viteImagemin from 'vite-plugin-imagemin';
|
||||
|
||||
export function ConfigImageminPlugin() {
|
||||
const plugin = viteImagemin({
|
||||
gifsicle: {
|
||||
optimizationLevel: 7,
|
||||
interlaced: false,
|
||||
},
|
||||
mozjpeg: {
|
||||
quality: 20,
|
||||
},
|
||||
optipng: {
|
||||
optimizationLevel: 7,
|
||||
},
|
||||
pngquant: {
|
||||
quality: [0.8, 0.9],
|
||||
speed: 4,
|
||||
},
|
||||
svgo: {
|
||||
plugins: [
|
||||
{
|
||||
name: 'removeViewBox',
|
||||
},
|
||||
{
|
||||
name: 'removeEmptyAttrs',
|
||||
active: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
return plugin;
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
/**
|
||||
* @name createVitePlugins
|
||||
* @description 封装plugins数组统一调用
|
||||
*/
|
||||
import type { Plugin } from 'vite';
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
import vueSetupExtend from 'vite-plugin-vue-setup-extend';
|
||||
import { ConfigSvgIconsPlugin } from './svgIcons';
|
||||
import { AutoRegistryComponents } from './component';
|
||||
import { AutoImportDeps } from './autoImport';
|
||||
import { ConfigMockPlugin } from './mock';
|
||||
import { ConfigCompressPlugin } from './compress';
|
||||
import { ConfigPagesPlugin } from './pages';
|
||||
import { ConfigRestartPlugin } from './restart';
|
||||
import { ConfigProgressPlugin } from './progress';
|
||||
// import { ConfigEruda } from './eruda';
|
||||
import { ConfigStyleImport } from './styleImport';
|
||||
import { ConfigImageminPlugin } from './imagemin';
|
||||
import { ConfigVisualizerConfig } from './visualizer';
|
||||
|
||||
export function createVitePlugins(isBuild: boolean) {
|
||||
const vitePlugins: (Plugin | Plugin[])[] = [
|
||||
// vue支持
|
||||
vue(),
|
||||
// JSX支持
|
||||
vueJsx(),
|
||||
// setup语法糖组件名支持
|
||||
vueSetupExtend(),
|
||||
];
|
||||
|
||||
// 自动按需引入组件
|
||||
vitePlugins.push(AutoRegistryComponents());
|
||||
|
||||
// 自动按需引入依赖
|
||||
vitePlugins.push(AutoImportDeps());
|
||||
|
||||
// 自动生成路由
|
||||
vitePlugins.push(ConfigPagesPlugin());
|
||||
|
||||
// 开启.gz压缩 rollup-plugin-gzip
|
||||
vitePlugins.push(ConfigCompressPlugin());
|
||||
|
||||
// 监听配置文件改动重启
|
||||
vitePlugins.push(ConfigRestartPlugin());
|
||||
|
||||
// 构建时显示进度条
|
||||
vitePlugins.push(ConfigProgressPlugin());
|
||||
|
||||
//styleImport
|
||||
vitePlugins.push(ConfigStyleImport());
|
||||
|
||||
// eruda
|
||||
// vitePlugins.push(ConfigEruda());
|
||||
|
||||
// rollup-plugin-visualizer
|
||||
vitePlugins.push(ConfigVisualizerConfig());
|
||||
if (isBuild) {
|
||||
// vite-plugin-imagemin
|
||||
vitePlugins.push(ConfigImageminPlugin());
|
||||
|
||||
// vite-plugin-svg-icons
|
||||
vitePlugins.push(ConfigSvgIconsPlugin(isBuild));
|
||||
|
||||
// vite-plugin-mock
|
||||
vitePlugins.push(ConfigMockPlugin(isBuild));
|
||||
}
|
||||
return vitePlugins;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
/**
|
||||
* @name ConfigMockPlugin
|
||||
* @description 引入mockjs，本地模拟接口
|
||||
*/
|
||||
import { viteMockServe } from 'vite-plugin-mock';
|
||||
export const ConfigMockPlugin = (isBuild: boolean) => {
|
||||
return viteMockServe({
|
||||
ignore: /^\_/,
|
||||
mockPath: 'mock',
|
||||
localEnabled: !isBuild,
|
||||
prodEnabled: false, //实际开发请关闭，会影响打包体积
|
||||
// https://github.com/anncwb/vite-plugin-mock/issues/9
|
||||
injectCode: `
|
||||
import { setupProdMockServer } from '../mock/_createProdMockServer';
|
||||
setupProdMockServer();
|
||||
`,
|
||||
});
|
||||
};
|
||||
@ -1,13 +0,0 @@
|
||||
/**
|
||||
* @name ConfigPagesPlugin
|
||||
* @description 动态生成路由
|
||||
*/
|
||||
import Pages from 'vite-plugin-pages';
|
||||
export const ConfigPagesPlugin = () => {
|
||||
return Pages({
|
||||
pagesDir: [{ dir: 'src/pages', baseRoute: '' }],
|
||||
extensions: ['vue', 'md'],
|
||||
exclude: ['**/components/*.vue'],
|
||||
nuxtStyle: true,
|
||||
});
|
||||
};
|
||||
@ -1,9 +0,0 @@
|
||||
/**
|
||||
* @name ConfigProgressPlugin
|
||||
* @description 构建显示进度条
|
||||
*/
|
||||
|
||||
import progress from 'vite-plugin-progress';
|
||||
export const ConfigProgressPlugin = () => {
|
||||
return progress() as Plugin;
|
||||
};
|
||||
@ -1,10 +0,0 @@
|
||||
/**
|
||||
* @name ConfigRestartPlugin
|
||||
* @description 监听配置文件修改自动重启Vite
|
||||
*/
|
||||
import ViteRestart from 'vite-plugin-restart';
|
||||
export const ConfigRestartPlugin = () => {
|
||||
return ViteRestart({
|
||||
restart: ['*.config.[jt]s', '**/config/*.[jt]s'],
|
||||
});
|
||||
};
|
||||
@ -1,7 +0,0 @@
|
||||
import { createStyleImportPlugin, NutuiResolve, VantResolve } from 'vite-plugin-style-import';
|
||||
|
||||
export const ConfigStyleImport = () => {
|
||||
return createStyleImportPlugin({
|
||||
resolves: [NutuiResolve(), VantResolve()],
|
||||
});
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
/**
|
||||
* @name SvgIconsPlugin
|
||||
* @description 加载SVG文件，自动引入
|
||||
*/
|
||||
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons';
|
||||
import path from 'path';
|
||||
|
||||
export const ConfigSvgIconsPlugin = (isBuild: boolean) => {
|
||||
return createSvgIconsPlugin({
|
||||
// 指定需要缓存的图标文件夹
|
||||
iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
|
||||
// 指定symbolId格式
|
||||
symbolId: 'icon-[dir]-[name]',
|
||||
svgoOptions: isBuild,
|
||||
});
|
||||
};
|
||||
@ -1,14 +0,0 @@
|
||||
import visualizer from 'rollup-plugin-visualizer';
|
||||
import { IsReport } from '../../constant';
|
||||
|
||||
export function ConfigVisualizerConfig() {
|
||||
if (IsReport) {
|
||||
return visualizer({
|
||||
filename: './node_modules/.cache/visualizer/stats.html',
|
||||
open: true,
|
||||
gzipSize: true,
|
||||
brotliSize: true,
|
||||
}) as Plugin;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import { API_BASE_URL, API_TARGET_URL, MOCK_API_BASE_URL, MOCK_API_TARGET_URL } from '../../config/constant';
|
||||
import { ProxyOptions } from 'vite';
|
||||
type ProxyTargetList = Record<string, ProxyOptions>;
|
||||
|
||||
const init: ProxyTargetList = {
|
||||
// test
|
||||
[API_BASE_URL]: {
|
||||
target: API_TARGET_URL,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(new RegExp(`^${API_BASE_URL}`), ''),
|
||||
},
|
||||
// mock
|
||||
[MOCK_API_BASE_URL]: {
|
||||
target: MOCK_API_TARGET_URL,
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(new RegExp(`^${MOCK_API_BASE_URL}`), '/api'),
|
||||
},
|
||||
};
|
||||
|
||||
export default init;
|
||||
40
index.html
40
index.html
@ -1,42 +1,16 @@
|
||||
<!DOCTYPE html>
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0,viewport-fit=cover"
|
||||
/>
|
||||
<title>Vite App</title>
|
||||
<link rel="stylesheet" href="/app-loading.css" />
|
||||
<title>%VITE_APP_TITLE%</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<div id="app">
|
||||
<div id="app-loading"></div>
|
||||
</div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
<script>
|
||||
document.addEventListener('touchstart', function (event) {
|
||||
if (event.touches.length > 1) {
|
||||
event.preventDefault();
|
||||
}
|
||||
});
|
||||
|
||||
var lastTouchEnd = 0;
|
||||
|
||||
document.addEventListener(
|
||||
'touchend',
|
||||
function (event) {
|
||||
var now = new Date().getTime();
|
||||
if (now - lastTouchEnd <= 300) {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
lastTouchEnd = now;
|
||||
},
|
||||
false
|
||||
);
|
||||
|
||||
document.addEventListener('gesturestart', function (event) {
|
||||
event.preventDefault();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
21120
package-lock.json
generated
21120
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
173
package.json
173
package.json
@ -1,112 +1,93 @@
|
||||
{
|
||||
"name": "vue-h5-template",
|
||||
"version": "1.0.0",
|
||||
"name": "my-vue3-vite-template",
|
||||
"description": "一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --open",
|
||||
"dev:test": "vite --mode test",
|
||||
"dev:prod": "vite --mode production",
|
||||
"build": "vue-tsc --noEmit && vite build",
|
||||
"report": "cross-env REPORT=true npm run build",
|
||||
"preview": "vite preview",
|
||||
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
|
||||
"lint:prettier": "prettier --write \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
|
||||
"lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
|
||||
"lint:lint-staged": "lint-staged",
|
||||
"prepare": "husky install",
|
||||
"deps": "yarn upgrade-interactive --latest"
|
||||
"dev": "vite",
|
||||
"build:stage": "vue-tsc --noEmit && vite build --mode staging",
|
||||
"build:prod": "vue-tsc --noEmit && vite build",
|
||||
"preview:stage": "pnpm build:stage && vite preview",
|
||||
"preview:prod": "pnpm build:prod && vite preview",
|
||||
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,tests,types}/**/*.{vue,js,jsx,ts,tsx}\" --fix",
|
||||
"lint:prettier": "prettier --write \"{src,tests,types}/**/*.{vue,js,jsx,ts,tsx,json,css,less,scss,html,md}\"",
|
||||
"lint": "pnpm lint:eslint && pnpm lint:prettier",
|
||||
"prepare": "husky",
|
||||
"test": "vitest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "8.7.5",
|
||||
"@vueuse/integrations": "8.7.5",
|
||||
"axios": "0.27.2",
|
||||
"pinia": "^2.0.14",
|
||||
"quarkd": "^1.0.57",
|
||||
"universal-cookie": "^4.0.4",
|
||||
"vue": "^3.2.36",
|
||||
"vue-i18n": "^9.1.10",
|
||||
"vue-router": "^4.0.16"
|
||||
"@element-plus/icons-vue": "2.3.1",
|
||||
"axios": "1.7.5",
|
||||
"dayjs": "1.11.13",
|
||||
"element-plus": "2.8.1",
|
||||
"js-cookie": "3.0.5",
|
||||
"lodash-es": "4.17.21",
|
||||
"mitt": "3.0.1",
|
||||
"normalize.css": "8.0.1",
|
||||
"nprogress": "0.2.0",
|
||||
"path-browserify": "1.0.1",
|
||||
"path-to-regexp": "7.1.0",
|
||||
"pinia": "2.2.2",
|
||||
"screenfull": "6.0.2",
|
||||
"vue": "3.4.38",
|
||||
"vue-router": "4.4.3",
|
||||
"vxe-table": "4.6.18",
|
||||
"vxe-table-plugin-element": "4.0.4",
|
||||
"xe-utils": "3.5.30"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "^17.0.42",
|
||||
"@typescript-eslint/eslint-plugin": "^5.29.0",
|
||||
"@typescript-eslint/parser": "^5.29.0",
|
||||
"@vitejs/plugin-legacy": "^1.8.2",
|
||||
"@vitejs/plugin-vue": "^2.3.3",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.10",
|
||||
"consola": "^2.15.3",
|
||||
"cross-env": "^7.0.3",
|
||||
"eruda": "^2.4.1",
|
||||
"eslint": "^8.18.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-prettier": "^4.0.0",
|
||||
"eslint-plugin-vue": "^9.1.1",
|
||||
"husky": "8.0.1",
|
||||
"lint-staged": "13.0.3",
|
||||
"mockjs": "^1.1.0",
|
||||
"postcss": "^8.4.14",
|
||||
"postcss-html": "1.4.1",
|
||||
"postcss-less": "^6.0.0",
|
||||
"postcss-px-to-viewport-8-plugin": "^1.1.3",
|
||||
"prettier": "^2.7.1",
|
||||
"rollup-plugin-visualizer": "^5.6.0",
|
||||
"sass": "^1.69.5",
|
||||
"scss": "^0.2.4",
|
||||
"stylelint": "^14.9.1",
|
||||
"stylelint-config-prettier": "^9.0.3",
|
||||
"stylelint-config-recommended": "^8.0.0",
|
||||
"stylelint-config-recommended-vue": "^1.4.0",
|
||||
"stylelint-config-standard": "^26.0.0",
|
||||
"stylelint-order": "^5.0.0",
|
||||
"typescript": "^4.7.4",
|
||||
"unplugin-auto-import": "^0.9.1",
|
||||
"unplugin-vue-components": "^0.19.9",
|
||||
"vite": "^2.9.12",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-dev-inspector": "^2.2.4",
|
||||
"vite-plugin-eruda": "^1.0.1",
|
||||
"vite-plugin-imagemin": "^0.6.1",
|
||||
"vite-plugin-mock": "^2.9.6",
|
||||
"vite-plugin-pages": "^0.24.2",
|
||||
"vite-plugin-progress": "^0.0.3",
|
||||
"vite-plugin-restart": "^0.1.1",
|
||||
"vite-plugin-style-import": "^2.0.0",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vite-plugin-vue-setup-extend": "^0.4.0",
|
||||
"vue-eslint-parser": "^9.0.3",
|
||||
"vue-tsc": "^0.38.1"
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
}
|
||||
},
|
||||
"resolutions": {
|
||||
"bin-wrapper": "npm:bin-wrapper-china",
|
||||
"rollup": "^2.56.3",
|
||||
"gifsicle": "5.2.0"
|
||||
"@types/js-cookie": "3.0.6",
|
||||
"@types/lodash-es": "4.17.12",
|
||||
"@types/node": "22.5.0",
|
||||
"@types/nprogress": "0.2.3",
|
||||
"@types/path-browserify": "1.0.3",
|
||||
"@typescript-eslint/eslint-plugin": "8.2.0",
|
||||
"@typescript-eslint/parser": "8.2.0",
|
||||
"@vitejs/plugin-vue": "5.1.2",
|
||||
"@vitejs/plugin-vue-jsx": "4.0.1",
|
||||
"@vue/eslint-config-prettier": "9.0.0",
|
||||
"@vue/eslint-config-typescript": "13.0.0",
|
||||
"@vue/test-utils": "2.4.6",
|
||||
"eslint": "8.57.0",
|
||||
"eslint-plugin-prettier": "5.2.1",
|
||||
"eslint-plugin-vue": "9.27.0",
|
||||
"husky": "9.1.5",
|
||||
"jsdom": "24.1.1",
|
||||
"lint-staged": "15.2.9",
|
||||
"prettier": "3.3.3",
|
||||
"sass": "1.77.8",
|
||||
"typescript": "5.5.4",
|
||||
"unocss": "0.62.2",
|
||||
"vite": "5.4.2",
|
||||
"vite-plugin-svg-icons": "2.0.1",
|
||||
"vite-svg-loader": "5.1.0",
|
||||
"vitest": "2.0.5",
|
||||
"vue-eslint-parser": "9.4.3",
|
||||
"vue-tsc": "2.0.29"
|
||||
},
|
||||
"lint-staged": {
|
||||
"*.{js,jsx,ts,tsx}": [
|
||||
"*.{vue,js,jsx,ts,tsx}": [
|
||||
"eslint --fix",
|
||||
"prettier --write"
|
||||
],
|
||||
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
|
||||
"prettier --write--parser json"
|
||||
"*.{css,less,scss,html,md}": [
|
||||
"prettier --write"
|
||||
],
|
||||
"package.json": [
|
||||
"prettier --write"
|
||||
],
|
||||
"*.vue": [
|
||||
"eslint --fix",
|
||||
"prettier --write",
|
||||
"stylelint --fix"
|
||||
],
|
||||
"*.{scss,less,styl,html}": [
|
||||
"stylelint --fix",
|
||||
"prettier --write"
|
||||
],
|
||||
"*.md": [
|
||||
"prettier --write"
|
||||
]
|
||||
}
|
||||
},
|
||||
"keywords": [
|
||||
"vue",
|
||||
"vue3",
|
||||
"admin",
|
||||
"vue-admin",
|
||||
"vue3-admin",
|
||||
"vite",
|
||||
"vite-admin",
|
||||
"element-plus",
|
||||
"element-plus-admin",
|
||||
"ts",
|
||||
"typescript"
|
||||
],
|
||||
"license": "MIT"
|
||||
}
|
||||
|
||||
7103
pnpm-lock.yaml
generated
Normal file
7103
pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,16 +0,0 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-px-to-viewport-8-plugin': {
|
||||
unitToConvert: 'px', // 要转化的单位
|
||||
viewportWidth: 375, // UI设计稿的宽度
|
||||
unitPrecision: 6, // 转换后的精度，即小数点位数
|
||||
propList: ['*'], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
|
||||
viewportUnit: 'vw', // 指定需要转换成的视窗单位，默认vw
|
||||
fontViewportUnit: 'vw', // 指定字体需要转换成的视窗单位，默认vw
|
||||
minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
|
||||
mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
|
||||
replace: true, // 是否转换后直接更换属性值
|
||||
exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配
|
||||
},
|
||||
},
|
||||
};
|
||||
@ -1,10 +1,22 @@
|
||||
module.exports = {
|
||||
printWidth: 140,
|
||||
semi: true,
|
||||
vueIndentScriptAndStyle: true,
|
||||
singleQuote: true,
|
||||
trailingComma: 'all',
|
||||
proseWrap: 'never',
|
||||
htmlWhitespaceSensitivity: 'strict',
|
||||
endOfLine: 'auto',
|
||||
};
|
||||
/**
|
||||
* 修改配置后重启编辑器
|
||||
* 配置项文档：https://prettier.io/docs/en/configuration.html
|
||||
* @type {import("prettier").Config}
|
||||
*/
|
||||
|
||||
export default {
|
||||
/** 每一行的宽度 */
|
||||
printWidth: 120,
|
||||
/** 在对象中的括号之间是否用空格来间隔 */
|
||||
bracketSpacing: true,
|
||||
/** 箭头函数的参数无论有几个，都要括号包裹 */
|
||||
arrowParens: "always",
|
||||
/** 换行符的使用 */
|
||||
endOfLine: "auto",
|
||||
/** 是否采用单引号 */
|
||||
singleQuote: false,
|
||||
/** 对象或者数组的最后一个元素后面不要加逗号 */
|
||||
trailingComma: "none",
|
||||
/** 是否加分号 */
|
||||
semi: false
|
||||
}
|
||||
|
||||
45
public/app-loading.css
Normal file
45
public/app-loading.css
Normal file
@ -0,0 +1,45 @@
|
||||
/** 白屏阶段会执行的 CSS 加载动画 */
|
||||
|
||||
#app-loading {
|
||||
position: relative;
|
||||
top: 45vh;
|
||||
margin: 0 auto;
|
||||
color: #409eff;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#app-loading,
|
||||
#app-loading::before,
|
||||
#app-loading::after {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
border-radius: 50%;
|
||||
animation: 2s ease-in-out infinite app-loading-animation;
|
||||
}
|
||||
|
||||
#app-loading::before,
|
||||
#app-loading::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#app-loading::before {
|
||||
left: -4em;
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
|
||||
#app-loading::after {
|
||||
left: 4em;
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
@keyframes app-loading-animation {
|
||||
0%,
|
||||
80%,
|
||||
100% {
|
||||
box-shadow: 0 2em 0 -2em;
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0 2em 0 0;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB After Width: | Height: | Size: 66 KiB |
BIN
public/group.jpg
BIN
public/group.jpg
Binary file not shown.
|
Before Width: | Height: | Size: 248 KiB |
36
src/App.vue
36
src/App.vue
@ -1,14 +1,26 @@
|
||||
<script lang="ts" setup>
|
||||
import { useTheme } from "@/hooks/useTheme"
|
||||
import { ElNotification } from "element-plus"
|
||||
// 将 Element Plus 的语言设置为中文
|
||||
import zhCn from "element-plus/es/locale/lang/zh-cn"
|
||||
|
||||
const { initTheme } = useTheme()
|
||||
|
||||
/** 初始化主题 */
|
||||
initTheme()
|
||||
|
||||
ElNotification({
|
||||
title: "Hello",
|
||||
type: "success",
|
||||
dangerouslyUseHTMLString: true,
|
||||
message: "Welcome!",
|
||||
duration: 0,
|
||||
position: "bottom-right"
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Suspense>
|
||||
<template #default>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive>
|
||||
<component :is="Component" v-if="route.meta && route.meta.keepAlive" :key="route.meta.usePathKey ? route.fullPath : undefined" />
|
||||
</keep-alive>
|
||||
<component :is="Component" v-if="!(route.meta && route.meta.keepAlive)" :key="route.meta.usePathKey ? route.fullPath : undefined" />
|
||||
</router-view>
|
||||
</template>
|
||||
<template #fallback> Loading... </template>
|
||||
</Suspense>
|
||||
<el-config-provider :locale="zhCn">
|
||||
<router-view />
|
||||
</el-config-provider>
|
||||
</template>
|
||||
<script setup></script>
|
||||
|
||||
36
src/api/hook-demo/use-fetch-select.ts
Normal file
36
src/api/hook-demo/use-fetch-select.ts
Normal file
@ -0,0 +1,36 @@
|
||||
/** 模拟接口响应数据 */
|
||||
const SELECT_RESPONSE_DATA = {
|
||||
code: 0,
|
||||
data: [
|
||||
{
|
||||
label: "苹果",
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: "香蕉",
|
||||
value: 2
|
||||
},
|
||||
{
|
||||
label: "橘子",
|
||||
value: 3,
|
||||
disabled: true
|
||||
}
|
||||
],
|
||||
message: "获取 Select 数据成功"
|
||||
}
|
||||
|
||||
/** 模拟接口 */
|
||||
export function getSelectDataApi() {
|
||||
return new Promise<typeof SELECT_RESPONSE_DATA>((resolve, reject) => {
|
||||
// 模拟接口响应时间 2s
|
||||
setTimeout(() => {
|
||||
// 模拟接口调用成功
|
||||
if (Math.random() < 0.8) {
|
||||
resolve(SELECT_RESPONSE_DATA)
|
||||
} else {
|
||||
// 模拟接口调用出错
|
||||
reject(new Error("接口发生错误"))
|
||||
}
|
||||
}, 2000)
|
||||
})
|
||||
}
|
||||
26
src/api/hook-demo/use-fullscreen-loading.ts
Normal file
26
src/api/hook-demo/use-fullscreen-loading.ts
Normal file
@ -0,0 +1,26 @@
|
||||
/** 模拟接口响应数据 */
|
||||
const SUCCESS_RESPONSE_DATA = {
|
||||
code: 0,
|
||||
data: {
|
||||
list: [] as number[]
|
||||
},
|
||||
message: "获取成功"
|
||||
}
|
||||
|
||||
/** 模拟请求接口成功 */
|
||||
export function getSuccessApi(list: number[]) {
|
||||
return new Promise<typeof SUCCESS_RESPONSE_DATA>((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve({ ...SUCCESS_RESPONSE_DATA, data: { list } })
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
|
||||
/** 模拟请求接口失败 */
|
||||
export function getErrorApi() {
|
||||
return new Promise((_resolve, reject) => {
|
||||
setTimeout(() => {
|
||||
reject(new Error("发生错误"))
|
||||
}, 1000)
|
||||
})
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
import useAxiosApi from '/@/utils/useAxiosApi';
|
||||
|
||||
/**
|
||||
* 账号密码登录
|
||||
* @returns UseAxiosReturn
|
||||
*/
|
||||
export function loginPassword() {
|
||||
return useAxiosApi(`/api/login`, {
|
||||
method: 'POST',
|
||||
data: { name: '123' },
|
||||
});
|
||||
}
|
||||
27
src/api/login/index.ts
Normal file
27
src/api/login/index.ts
Normal file
@ -0,0 +1,27 @@
|
||||
import { request } from "@/utils/service"
|
||||
import type * as Login from "./types/login"
|
||||
|
||||
/** 获取登录验证码 */
|
||||
export function getLoginCodeApi() {
|
||||
return request<Login.LoginCodeResponseData>({
|
||||
url: "login/code",
|
||||
method: "get"
|
||||
})
|
||||
}
|
||||
|
||||
/** 登录并返回 Token */
|
||||
export function loginApi(data: Login.LoginRequestData) {
|
||||
return request<Login.LoginResponseData>({
|
||||
url: "users/login",
|
||||
method: "post",
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 获取用户详情 */
|
||||
export function getUserInfoApi() {
|
||||
return request<Login.UserInfoResponseData>({
|
||||
url: "users/info",
|
||||
method: "get"
|
||||
})
|
||||
}
|
||||
14
src/api/login/types/login.ts
Normal file
14
src/api/login/types/login.ts
Normal file
@ -0,0 +1,14 @@
|
||||
export interface LoginRequestData {
|
||||
/** admin 或 editor */
|
||||
username: "admin" | "editor"
|
||||
/** 密码 */
|
||||
password: string
|
||||
/** 验证码 */
|
||||
code: string
|
||||
}
|
||||
|
||||
export type LoginCodeResponseData = ApiResponseData<string>
|
||||
|
||||
export type LoginResponseData = ApiResponseData<{ token: string }>
|
||||
|
||||
export type UserInfoResponseData = ApiResponseData<{ username: string; roles: string[] }>
|
||||
37
src/api/table/index.ts
Normal file
37
src/api/table/index.ts
Normal file
@ -0,0 +1,37 @@
|
||||
import { request } from "@/utils/service"
|
||||
import type * as Table from "./types/table"
|
||||
|
||||
/** 增 */
|
||||
export function createTableDataApi(data: Table.CreateOrUpdateTableRequestData) {
|
||||
return request({
|
||||
url: "table",
|
||||
method: "post",
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 删 */
|
||||
export function deleteTableDataApi(id: string) {
|
||||
return request({
|
||||
url: `table/${id}`,
|
||||
method: "delete"
|
||||
})
|
||||
}
|
||||
|
||||
/** 改 */
|
||||
export function updateTableDataApi(data: Table.CreateOrUpdateTableRequestData) {
|
||||
return request({
|
||||
url: "table",
|
||||
method: "put",
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/** 查 */
|
||||
export function getTableDataApi(params: Table.TableRequestData) {
|
||||
return request<Table.TableResponseData>({
|
||||
url: "table",
|
||||
method: "get",
|
||||
params
|
||||
})
|
||||
}
|
||||
31
src/api/table/types/table.ts
Normal file
31
src/api/table/types/table.ts
Normal file
@ -0,0 +1,31 @@
|
||||
export interface CreateOrUpdateTableRequestData {
|
||||
id?: string
|
||||
username: string
|
||||
password?: string
|
||||
}
|
||||
|
||||
export interface TableRequestData {
|
||||
/** 当前页码 */
|
||||
currentPage: number
|
||||
/** 查询条数 */
|
||||
size: number
|
||||
/** 查询参数：用户名 */
|
||||
username?: string
|
||||
/** 查询参数：手机号 */
|
||||
phone?: string
|
||||
}
|
||||
|
||||
export interface TableData {
|
||||
createTime: string
|
||||
email: string
|
||||
id: string
|
||||
phone: string
|
||||
roles: string
|
||||
status: boolean
|
||||
username: string
|
||||
}
|
||||
|
||||
export type TableResponseData = ApiResponseData<{
|
||||
list: TableData[]
|
||||
total: number
|
||||
}>
|
||||
@ -1,11 +0,0 @@
|
||||
html,
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
1
src/assets/error-page/403.svg
Normal file
1
src/assets/error-page/403.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 18 KiB |
1
src/assets/error-page/404.svg
Normal file
1
src/assets/error-page/404.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 60 KiB |
@ -1,536 +0,0 @@
|
||||
/* Logo 字体 */
|
||||
@font-face {
|
||||
font-family: 'iconfont logo';
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-family: 'iconfont logo';
|
||||
font-size: 160px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
/* tabs */
|
||||
.nav-tabs {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-tabs .nav-more {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
height: 42px;
|
||||
line-height: 42px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs {
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
#tabs li {
|
||||
cursor: pointer;
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
border-bottom: 2px solid transparent;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin-bottom: -1px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#tabs .active {
|
||||
border-bottom-color: #f00;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.tab-container .content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 页面布局 */
|
||||
.main {
|
||||
padding: 30px 100px;
|
||||
width: 960px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.main .logo {
|
||||
color: #333;
|
||||
text-align: left;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1;
|
||||
height: 110px;
|
||||
margin-top: -50px;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.main .logo a {
|
||||
font-size: 160px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.helps {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
.helps pre {
|
||||
padding: 20px;
|
||||
margin: 10px 0;
|
||||
border: solid 1px #e7e1cd;
|
||||
background-color: #fffdef;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.icon_lists {
|
||||
width: 100% !important;
|
||||
overflow: hidden;
|
||||
*zoom: 1;
|
||||
}
|
||||
|
||||
.icon_lists li {
|
||||
width: 100px;
|
||||
margin-bottom: 10px;
|
||||
margin-right: 20px;
|
||||
text-align: center;
|
||||
list-style: none !important;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.icon_lists li .code-name {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.icon_lists .icon {
|
||||
display: block;
|
||||
height: 100px;
|
||||
line-height: 100px;
|
||||
font-size: 42px;
|
||||
margin: 10px auto;
|
||||
color: #333;
|
||||
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||
transition: font-size 0.25s linear, width 0.25s linear;
|
||||
}
|
||||
|
||||
.icon_lists .icon:hover {
|
||||
font-size: 100px;
|
||||
}
|
||||
|
||||
.icon_lists .svg-icon {
|
||||
/* 通过设置 font-size 来改变图标大小 */
|
||||
width: 1em;
|
||||
/* 图标和文字相邻时，垂直对齐 */
|
||||
vertical-align: -0.15em;
|
||||
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||
fill: currentColor;
|
||||
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||
normalize.css 中也包含这行 */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.icon_lists li .name,
|
||||
.icon_lists li .code-name {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* markdown 样式 */
|
||||
.markdown {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.markdown img {
|
||||
vertical-align: middle;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
color: #404040;
|
||||
font-weight: 500;
|
||||
line-height: 40px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown h2,
|
||||
.markdown h3,
|
||||
.markdown h4,
|
||||
.markdown h5,
|
||||
.markdown h6 {
|
||||
color: #404040;
|
||||
margin: 1.6em 0 0.6em 0;
|
||||
font-weight: 500;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown h1 {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.markdown h2 {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.markdown h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown h6 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown hr {
|
||||
height: 1px;
|
||||
border: 0;
|
||||
background: #e9e9e9;
|
||||
margin: 16px 0;
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.markdown p {
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown > p,
|
||||
.markdown > blockquote,
|
||||
.markdown > .highlight,
|
||||
.markdown > ol,
|
||||
.markdown > ul {
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.markdown ul > li {
|
||||
list-style: circle;
|
||||
}
|
||||
|
||||
.markdown > ul li,
|
||||
.markdown blockquote ul > li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown > ul li p,
|
||||
.markdown > ol li p {
|
||||
margin: 0.6em 0;
|
||||
}
|
||||
|
||||
.markdown ol > li {
|
||||
list-style: decimal;
|
||||
}
|
||||
|
||||
.markdown > ol li,
|
||||
.markdown blockquote ol > li {
|
||||
margin-left: 20px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.markdown code {
|
||||
margin: 0 3px;
|
||||
padding: 0 5px;
|
||||
background: #eee;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown strong,
|
||||
.markdown b {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown > table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0px;
|
||||
empty-cells: show;
|
||||
border: 1px solid #e9e9e9;
|
||||
width: 95%;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
white-space: nowrap;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.markdown > table th,
|
||||
.markdown > table td {
|
||||
border: 1px solid #e9e9e9;
|
||||
padding: 8px 16px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.markdown > table th {
|
||||
background: #f7f7f7;
|
||||
}
|
||||
|
||||
.markdown blockquote {
|
||||
font-size: 90%;
|
||||
color: #999;
|
||||
border-left: 4px solid #e9e9e9;
|
||||
padding-left: 0.8em;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
.markdown blockquote p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown .anchor {
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.markdown .waiting {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.markdown h1:hover .anchor,
|
||||
.markdown h2:hover .anchor,
|
||||
.markdown h3:hover .anchor,
|
||||
.markdown h4:hover .anchor,
|
||||
.markdown h5:hover .anchor,
|
||||
.markdown h6:hover .anchor {
|
||||
opacity: 1;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown > br,
|
||||
.markdown > p > br {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
background: white;
|
||||
padding: 0.5em;
|
||||
color: #333333;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-meta {
|
||||
color: #969896;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis,
|
||||
.hljs-quote {
|
||||
color: #df5000;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-type {
|
||||
color: #a71d5d;
|
||||
}
|
||||
|
||||
.hljs-literal,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet,
|
||||
.hljs-attribute {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-section,
|
||||
.hljs-name {
|
||||
color: #63a35c;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-attr,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class,
|
||||
.hljs-selector-attr,
|
||||
.hljs-selector-pseudo {
|
||||
color: #795da3;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
color: #55a532;
|
||||
background-color: #eaffea;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
color: #bd2c00;
|
||||
background-color: #ffecec;
|
||||
}
|
||||
|
||||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* 代码高亮 */
|
||||
/* PrismJS 1.15.0
|
||||
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*='language-']::-moz-selection,
|
||||
pre[class*='language-'] ::-moz-selection,
|
||||
code[class*='language-']::-moz-selection,
|
||||
code[class*='language-'] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*='language-']::selection,
|
||||
pre[class*='language-'] ::selection,
|
||||
code[class*='language-']::selection,
|
||||
code[class*='language-'] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*='language-'] {
|
||||
padding: 1em;
|
||||
margin: 0.5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*='language-'],
|
||||
pre[class*='language-'] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*='language-'] {
|
||||
padding: 0.1em;
|
||||
border-radius: 0.3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.namespace {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
background: hsla(0, 0%, 100%, 0.5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #dd4a68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
@font-face {
|
||||
font-family: 'iconfont'; /* Project id 3210904 */
|
||||
src: url('iconfont.woff2?t=1646452970429') format('woff2'), url('iconfont.woff?t=1646452970429') format('woff'),
|
||||
url('iconfont.ttf?t=1646452970429') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-family: 'iconfont' !important;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-custom-ok:before {
|
||||
content: '\e631';
|
||||
}
|
||||
|
||||
.icon-github-fill:before {
|
||||
content: '\e885';
|
||||
}
|
||||
|
||||
.icon-l-search:before {
|
||||
content: '\e79e';
|
||||
}
|
||||
|
||||
.icon-home:before {
|
||||
content: '\e603';
|
||||
}
|
||||
|
||||
.icon-member:before {
|
||||
content: '\e602';
|
||||
}
|
||||
|
||||
.icon-list:before {
|
||||
content: '\e601';
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
{
|
||||
"id": "3210904",
|
||||
"name": "fast-vue3",
|
||||
"font_family": "iconfont",
|
||||
"css_prefix_text": "icon-",
|
||||
"description": "",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "517495",
|
||||
"name": "ok",
|
||||
"font_class": "custom-ok",
|
||||
"unicode": "e631",
|
||||
"unicode_decimal": 58929
|
||||
},
|
||||
{
|
||||
"icon_id": "4937000",
|
||||
"name": "github-fill",
|
||||
"font_class": "github-fill",
|
||||
"unicode": "e885",
|
||||
"unicode_decimal": 59525
|
||||
},
|
||||
{
|
||||
"icon_id": "12932129",
|
||||
"name": "l-search",
|
||||
"font_class": "l-search",
|
||||
"unicode": "e79e",
|
||||
"unicode_decimal": 59294
|
||||
},
|
||||
{
|
||||
"icon_id": "109751",
|
||||
"name": "home",
|
||||
"font_class": "home",
|
||||
"unicode": "e603",
|
||||
"unicode_decimal": 58883
|
||||
},
|
||||
{
|
||||
"icon_id": "663138",
|
||||
"name": "member",
|
||||
"font_class": "member",
|
||||
"unicode": "e602",
|
||||
"unicode_decimal": 58882
|
||||
},
|
||||
{
|
||||
"icon_id": "21513638",
|
||||
"name": "list",
|
||||
"font_class": "list",
|
||||
"unicode": "e601",
|
||||
"unicode_decimal": 58881
|
||||
}
|
||||
]
|
||||
}
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
BIN
src/assets/layouts/logo.png
Normal file
BIN
src/assets/layouts/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
src/assets/login/close-eyes.png
Normal file
BIN
src/assets/login/close-eyes.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/login/face.png
Normal file
BIN
src/assets/login/face.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
src/assets/login/hand-down-left.png
Normal file
BIN
src/assets/login/hand-down-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/login/hand-down-right.png
Normal file
BIN
src/assets/login/hand-down-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/login/hand-up-left.png
Normal file
BIN
src/assets/login/hand-up-left.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/login/hand-up-right.png
Normal file
BIN
src/assets/login/hand-up-right.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
58
src/components/Notify/NotifyList.vue
Normal file
58
src/components/Notify/NotifyList.vue
Normal file
@ -0,0 +1,58 @@
|
||||
<script lang="ts" setup>
|
||||
import { type ListItem } from "./data"
|
||||
|
||||
interface Props {
|
||||
list: ListItem[]
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-empty v-if="props.list.length === 0" />
|
||||
<el-card v-else v-for="(item, index) in props.list" :key="index" shadow="never" class="card-container">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<span>
|
||||
<span class="card-title">{{ item.title }}</span>
|
||||
<el-tag v-if="item.extra" :type="item.status" effect="plain" size="small">{{ item.extra }}</el-tag>
|
||||
</span>
|
||||
<div class="card-time">{{ item.datetime }}</div>
|
||||
</div>
|
||||
<div v-if="item.avatar" class="card-avatar">
|
||||
<img :src="item.avatar" width="34" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<div class="card-body">
|
||||
{{ item.description ?? "No Data" }}
|
||||
</div>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-container {
|
||||
margin-bottom: 10px;
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.card-title {
|
||||
font-weight: bold;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.card-time {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
.card-avatar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.card-body {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
66
src/components/Notify/data.ts
Normal file
66
src/components/Notify/data.ts
Normal file
@ -0,0 +1,66 @@
|
||||
export interface ListItem {
|
||||
avatar?: string
|
||||
title: string
|
||||
datetime?: string
|
||||
description?: string
|
||||
status?: "primary" | "success" | "info" | "warning" | "danger"
|
||||
extra?: string
|
||||
}
|
||||
|
||||
export const notifyData: ListItem[] = [
|
||||
{
|
||||
avatar: "xx.png",
|
||||
title: "Vue3 Admin Vite 上线啦",
|
||||
datetime: "一年前",
|
||||
description:
|
||||
"一个免费开源的中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus、Pinia 和 Vite 等主流技术"
|
||||
},
|
||||
{
|
||||
avatar: "xx.png",
|
||||
title: "Vue3 Admin 上线啦",
|
||||
datetime: "两年前",
|
||||
description: "一个中后台管理系统基础解决方案，基于 Vue3、TypeScript、Element Plus 和 Pinia"
|
||||
}
|
||||
]
|
||||
|
||||
export const messageData: ListItem[] = [
|
||||
{
|
||||
avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
|
||||
title: "来自楚门的世界",
|
||||
description: "如果再也不能见到你，祝你早安、午安和晚安",
|
||||
datetime: "1998-06-05"
|
||||
},
|
||||
{
|
||||
avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
|
||||
title: "来自大话西游",
|
||||
description: "如果非要在这份爱上加上一个期限，我希望是一万年",
|
||||
datetime: "1995-02-04"
|
||||
},
|
||||
{
|
||||
avatar: "https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
|
||||
title: "来自龙猫",
|
||||
description: "心存善意，定能途遇天使",
|
||||
datetime: "1988-04-16"
|
||||
}
|
||||
]
|
||||
|
||||
export const todoData: ListItem[] = [
|
||||
{
|
||||
title: "任务名称",
|
||||
description: "这家伙很懒，什么都没留下",
|
||||
extra: "未开始",
|
||||
status: "info"
|
||||
},
|
||||
{
|
||||
title: "任务名称",
|
||||
description: "这家伙很懒，什么都没留下",
|
||||
extra: "进行中",
|
||||
status: "primary"
|
||||
},
|
||||
{
|
||||
title: "任务名称",
|
||||
description: "这家伙很懒，什么都没留下",
|
||||
extra: "已超时",
|
||||
status: "danger"
|
||||
}
|
||||
]
|
||||
95
src/components/Notify/index.vue
Normal file
95
src/components/Notify/index.vue
Normal file
@ -0,0 +1,95 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref, computed } from "vue"
|
||||
import { ElMessage } from "element-plus"
|
||||
import { Bell } from "@element-plus/icons-vue"
|
||||
import NotifyList from "./NotifyList.vue"
|
||||
import { type ListItem, notifyData, messageData, todoData } from "./data"
|
||||
|
||||
type TabName = "通知" | "消息" | "待办"
|
||||
|
||||
interface DataItem {
|
||||
name: TabName
|
||||
type: "primary" | "success" | "warning" | "danger" | "info"
|
||||
list: ListItem[]
|
||||
}
|
||||
|
||||
/** 角标当前值 */
|
||||
const badgeValue = computed(() => {
|
||||
return data.value.reduce((sum, item) => sum + item.list.length, 0)
|
||||
})
|
||||
/** 角标最大值 */
|
||||
const badgeMax = 99
|
||||
/** 面板宽度 */
|
||||
const popoverWidth = 350
|
||||
/** 当前 Tab */
|
||||
const activeName = ref<TabName>("通知")
|
||||
/** 所有数据 */
|
||||
const data = ref<DataItem[]>([
|
||||
// 通知数据
|
||||
{
|
||||
name: "通知",
|
||||
type: "primary",
|
||||
list: notifyData
|
||||
},
|
||||
// 消息数据
|
||||
{
|
||||
name: "消息",
|
||||
type: "danger",
|
||||
list: messageData
|
||||
},
|
||||
// 待办数据
|
||||
{
|
||||
name: "待办",
|
||||
type: "warning",
|
||||
list: todoData
|
||||
}
|
||||
])
|
||||
|
||||
const handleHistory = () => {
|
||||
ElMessage.success(`跳转到${activeName.value}历史页面`)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="notify">
|
||||
<el-popover placement="bottom" :width="popoverWidth" trigger="click">
|
||||
<template #reference>
|
||||
<el-badge :value="badgeValue" :max="badgeMax" :hidden="badgeValue === 0">
|
||||
<el-tooltip effect="dark" content="消息通知" placement="bottom">
|
||||
<el-icon :size="20">
|
||||
<Bell />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</el-badge>
|
||||
</template>
|
||||
<template #default>
|
||||
<el-tabs v-model="activeName" class="demo-tabs" stretch>
|
||||
<el-tab-pane v-for="(item, index) in data" :name="item.name" :key="index">
|
||||
<template #label>
|
||||
{{ item.name }}
|
||||
<el-badge :value="item.list.length" :max="badgeMax" :type="item.type" />
|
||||
</template>
|
||||
<el-scrollbar height="400px">
|
||||
<NotifyList :list="item.list" />
|
||||
</el-scrollbar>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<div class="notify-history">
|
||||
<el-button link @click="handleHistory">查看{{ activeName }}历史</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-popover>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.notify {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.notify-history {
|
||||
text-align: center;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
}
|
||||
</style>
|
||||
103
src/components/Screenfull/index.vue
Normal file
103
src/components/Screenfull/index.vue
Normal file
@ -0,0 +1,103 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, watchEffect } from "vue"
|
||||
import { ElMessage } from "element-plus"
|
||||
import screenfull from "screenfull"
|
||||
|
||||
interface Props {
|
||||
/** 全屏的元素，默认是 html */
|
||||
element?: string
|
||||
/** 打开全屏提示语 */
|
||||
openTips?: string
|
||||
/** 关闭全屏提示语 */
|
||||
exitTips?: string
|
||||
/** 是否只针对内容区 */
|
||||
content?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
element: "html",
|
||||
openTips: "全屏",
|
||||
exitTips: "退出全屏",
|
||||
content: false
|
||||
})
|
||||
|
||||
//#region 全屏
|
||||
const isFullscreen = ref<boolean>(false)
|
||||
const fullscreenTips = computed(() => {
|
||||
return isFullscreen.value ? props.exitTips : props.openTips
|
||||
})
|
||||
const fullscreenSvgName = computed(() => {
|
||||
return isFullscreen.value ? "fullscreen-exit" : "fullscreen"
|
||||
})
|
||||
const handleFullscreenClick = () => {
|
||||
const dom = document.querySelector(props.element) || undefined
|
||||
screenfull.isEnabled ? screenfull.toggle(dom) : ElMessage.warning("您的浏览器无法工作")
|
||||
}
|
||||
const handleFullscreenChange = () => {
|
||||
isFullscreen.value = screenfull.isFullscreen
|
||||
// 退出全屏时清除所有的 class
|
||||
isFullscreen.value || (document.body.className = "")
|
||||
}
|
||||
watchEffect((onCleanup) => {
|
||||
// 挂载组件时自动执行
|
||||
screenfull.isEnabled && screenfull.on("change", handleFullscreenChange)
|
||||
// 卸载组件时自动执行
|
||||
onCleanup(() => {
|
||||
screenfull.isEnabled && screenfull.off("change", handleFullscreenChange)
|
||||
})
|
||||
})
|
||||
//#endregion
|
||||
|
||||
//#region 内容区
|
||||
const isContentLarge = ref<boolean>(false)
|
||||
const contentLargeTips = computed(() => {
|
||||
return isContentLarge.value ? "内容区复原" : "内容区放大"
|
||||
})
|
||||
const contentLargeSvgName = computed(() => {
|
||||
return isContentLarge.value ? "fullscreen-exit" : "fullscreen"
|
||||
})
|
||||
const handleContentLargeClick = () => {
|
||||
isContentLarge.value = !isContentLarge.value
|
||||
// 内容区放大时，将不需要的组件隐藏
|
||||
document.body.className = isContentLarge.value ? "content-large" : ""
|
||||
}
|
||||
const handleContentFullClick = () => {
|
||||
// 取消内容区放大
|
||||
isContentLarge.value && handleContentLargeClick()
|
||||
// 内容区全屏时，将不需要的组件隐藏
|
||||
document.body.className = "content-full"
|
||||
// 开启全屏
|
||||
handleFullscreenClick()
|
||||
}
|
||||
//#endregion
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- 全屏 -->
|
||||
<el-tooltip v-if="!content" effect="dark" :content="fullscreenTips" placement="bottom">
|
||||
<SvgIcon :name="fullscreenSvgName" @click="handleFullscreenClick" />
|
||||
</el-tooltip>
|
||||
<!-- 内容区 -->
|
||||
<el-dropdown v-else :disabled="isFullscreen">
|
||||
<SvgIcon :name="contentLargeSvgName" />
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<!-- 内容区放大 -->
|
||||
<el-dropdown-item @click="handleContentLargeClick">{{ contentLargeTips }}</el-dropdown-item>
|
||||
<!-- 内容区全屏 -->
|
||||
<el-dropdown-item @click="handleContentFullClick">内容区全屏</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.svg-icon {
|
||||
font-size: 20px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
54
src/components/SearchMenu/SearchFooter.vue
Normal file
54
src/components/SearchMenu/SearchFooter.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<script lang="ts" setup>
|
||||
import { useDevice } from "@/hooks/useDevice"
|
||||
|
||||
interface Props {
|
||||
total: number
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { isMobile } = useDevice()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-footer">
|
||||
<template v-if="!isMobile">
|
||||
<span class="search-footer-item">
|
||||
<SvgIcon name="keyboard-enter" />
|
||||
<span>确认</span>
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<SvgIcon name="keyboard-up" />
|
||||
<SvgIcon name="keyboard-down" />
|
||||
<span>切换</span>
|
||||
</span>
|
||||
<span class="search-footer-item">
|
||||
<SvgIcon name="keyboard-esc" />
|
||||
<span>关闭</span>
|
||||
</span>
|
||||
</template>
|
||||
<span class="search-footer-total">共 {{ props.total }} 项</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.search-footer {
|
||||
display: flex;
|
||||
color: var(--el-text-color-secondary);
|
||||
font-size: 14px;
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 12px;
|
||||
.svg-icon {
|
||||
margin-right: 5px;
|
||||
padding: 2px;
|
||||
font-size: 20px;
|
||||
background-color: var(--el-fill-color);
|
||||
}
|
||||
}
|
||||
&-total {
|
||||
margin: 0 0 0 auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
202
src/components/SearchMenu/SearchModal.vue
Normal file
202
src/components/SearchMenu/SearchModal.vue
Normal file
@ -0,0 +1,202 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed, ref, shallowRef } from "vue"
|
||||
import { type RouteRecordName, type RouteRecordRaw, useRouter } from "vue-router"
|
||||
import { usePermissionStore } from "@/store/modules/permission"
|
||||
import SearchResult from "./SearchResult.vue"
|
||||
import SearchFooter from "./SearchFooter.vue"
|
||||
import { ElMessage, ElScrollbar } from "element-plus"
|
||||
import { cloneDeep, debounce } from "lodash-es"
|
||||
import { useDevice } from "@/hooks/useDevice"
|
||||
import { isExternal } from "@/utils/validate"
|
||||
|
||||
/** 控制 modal 显隐 */
|
||||
const modelValue = defineModel<boolean>({ required: true })
|
||||
|
||||
const router = useRouter()
|
||||
const { isMobile } = useDevice()
|
||||
|
||||
const inputRef = ref<HTMLInputElement | null>(null)
|
||||
const scrollbarRef = ref<InstanceType<typeof ElScrollbar> | null>(null)
|
||||
const searchResultRef = ref<InstanceType<typeof SearchResult> | null>(null)
|
||||
|
||||
const keyword = ref<string>("")
|
||||
const resultList = shallowRef<RouteRecordRaw[]>([])
|
||||
const activeRouteName = ref<RouteRecordName | undefined>(undefined)
|
||||
/** 是否按下了上键或下键（用于解决和 mouseenter 事件的冲突） */
|
||||
const isPressUpOrDown = ref<boolean>(false)
|
||||
|
||||
/** 控制搜索对话框宽度 */
|
||||
const modalWidth = computed(() => (isMobile.value ? "80vw" : "40vw"))
|
||||
/** 树形菜单 */
|
||||
const menusData = computed(() => cloneDeep(usePermissionStore().routes))
|
||||
|
||||
/** 搜索（防抖） */
|
||||
const handleSearch = debounce(() => {
|
||||
const flatMenusData = flatTree(menusData.value)
|
||||
resultList.value = flatMenusData.filter((menu) =>
|
||||
keyword.value ? menu.meta?.title?.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim()) : false
|
||||
)
|
||||
// 默认选中搜索结果的第一项
|
||||
const length = resultList.value?.length
|
||||
activeRouteName.value = length > 0 ? resultList.value[0].name : undefined
|
||||
}, 500)
|
||||
|
||||
/** 将树形菜单扁平化为一维数组，用于菜单搜索 */
|
||||
const flatTree = (arr: RouteRecordRaw[], result: RouteRecordRaw[] = []) => {
|
||||
arr.forEach((item) => {
|
||||
result.push(item)
|
||||
item.children && flatTree(item.children, result)
|
||||
})
|
||||
return result
|
||||
}
|
||||
|
||||
/** 关闭搜索对话框 */
|
||||
const handleClose = () => {
|
||||
modelValue.value = false
|
||||
// 延时处理防止用户看到重置数据的操作
|
||||
setTimeout(() => {
|
||||
keyword.value = ""
|
||||
resultList.value = []
|
||||
}, 200)
|
||||
}
|
||||
|
||||
/** 根据下标位置进行滚动 */
|
||||
const scrollTo = (index: number) => {
|
||||
if (!searchResultRef.value) return
|
||||
const scrollTop = searchResultRef.value.getScrollTop(index)
|
||||
// 手动控制 el-scrollbar 滚动条滚动，设置滚动条到顶部的距离
|
||||
scrollbarRef.value?.setScrollTop(scrollTop)
|
||||
}
|
||||
|
||||
/** 键盘上键 */
|
||||
const handleUp = () => {
|
||||
isPressUpOrDown.value = true
|
||||
const { length } = resultList.value
|
||||
if (length === 0) return
|
||||
// 获取该 name 在菜单中第一次出现的位置
|
||||
const index = resultList.value.findIndex((item) => item.name === activeRouteName.value)
|
||||
// 如果已处在顶部
|
||||
if (index === 0) {
|
||||
const bottomName = resultList.value[length - 1].name
|
||||
// 如果顶部和底部的 bottomName 相同，且长度大于 1，就再跳一个位置（可解决遇到首尾两个相同 name 导致的上键不能生效的问题）
|
||||
if (activeRouteName.value === bottomName && length > 1) {
|
||||
activeRouteName.value = resultList.value[length - 2].name
|
||||
scrollTo(length - 2)
|
||||
} else {
|
||||
// 跳转到底部
|
||||
activeRouteName.value = bottomName
|
||||
scrollTo(length - 1)
|
||||
}
|
||||
} else {
|
||||
activeRouteName.value = resultList.value[index - 1].name
|
||||
scrollTo(index - 1)
|
||||
}
|
||||
}
|
||||
|
||||
/** 键盘下键 */
|
||||
const handleDown = () => {
|
||||
isPressUpOrDown.value = true
|
||||
const { length } = resultList.value
|
||||
if (length === 0) return
|
||||
// 获取该 name 在菜单中最后一次出现的位置（可解决遇到连续两个相同 name 导致的下键不能生效的问题）
|
||||
const index = resultList.value.map((item) => item.name).lastIndexOf(activeRouteName.value)
|
||||
// 如果已处在底部
|
||||
if (index === length - 1) {
|
||||
const topName = resultList.value[0].name
|
||||
// 如果底部和顶部的 topName 相同，且长度大于 1，就再跳一个位置（可解决遇到首尾两个相同 name 导致的下键不能生效的问题）
|
||||
if (activeRouteName.value === topName && length > 1) {
|
||||
activeRouteName.value = resultList.value[1].name
|
||||
scrollTo(1)
|
||||
} else {
|
||||
// 跳转到顶部
|
||||
activeRouteName.value = topName
|
||||
scrollTo(0)
|
||||
}
|
||||
} else {
|
||||
activeRouteName.value = resultList.value[index + 1].name
|
||||
scrollTo(index + 1)
|
||||
}
|
||||
}
|
||||
|
||||
/** 键盘回车键 */
|
||||
const handleEnter = () => {
|
||||
const { length } = resultList.value
|
||||
if (length === 0) return
|
||||
const name = activeRouteName.value
|
||||
const path = resultList.value.find((item) => item.name === name)?.path
|
||||
if (path && isExternal(path)) {
|
||||
window.open(path, "_blank", "noopener, noreferrer")
|
||||
return
|
||||
}
|
||||
if (!name) {
|
||||
ElMessage.warning("无法通过搜索进入该菜单，请为对应的路由设置唯一的 Name")
|
||||
return
|
||||
}
|
||||
try {
|
||||
router.push({ name })
|
||||
} catch {
|
||||
ElMessage.error("该菜单有必填的动态参数，无法通过搜索进入")
|
||||
return
|
||||
}
|
||||
handleClose()
|
||||
}
|
||||
|
||||
/** 释放上键或下键 */
|
||||
const handleReleaseUpOrDown = () => {
|
||||
isPressUpOrDown.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dialog
|
||||
v-model="modelValue"
|
||||
@opened="inputRef?.focus()"
|
||||
@closed="inputRef?.blur()"
|
||||
@keydown.up="handleUp"
|
||||
@keydown.down="handleDown"
|
||||
@keydown.enter="handleEnter"
|
||||
@keyup.up.down="handleReleaseUpOrDown"
|
||||
:before-close="handleClose"
|
||||
:width="modalWidth"
|
||||
top="5vh"
|
||||
class="search-modal__private"
|
||||
append-to-body
|
||||
>
|
||||
<el-input ref="inputRef" v-model="keyword" @input="handleSearch" placeholder="搜索菜单" size="large" clearable>
|
||||
<template #prefix>
|
||||
<SvgIcon name="search" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-empty v-if="resultList.length === 0" description="暂无搜索结果" :image-size="100" />
|
||||
<template v-else>
|
||||
<p>搜索结果</p>
|
||||
<el-scrollbar ref="scrollbarRef" max-height="40vh" always>
|
||||
<SearchResult
|
||||
ref="searchResultRef"
|
||||
v-model="activeRouteName"
|
||||
:list="resultList"
|
||||
:isPressUpOrDown="isPressUpOrDown"
|
||||
@click="handleEnter"
|
||||
/>
|
||||
</el-scrollbar>
|
||||
</template>
|
||||
<template #footer>
|
||||
<SearchFooter :total="resultList.length" />
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.search-modal__private {
|
||||
.svg-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
.el-dialog__footer {
|
||||
border-top: 1px solid var(--el-border-color);
|
||||
padding: var(--el-dialog-padding-primary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
110
src/components/SearchMenu/SearchResult.vue
Normal file
110
src/components/SearchMenu/SearchResult.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCurrentInstance, onBeforeMount, onBeforeUnmount, onMounted, ref } from "vue"
|
||||
import { type RouteRecordName, type RouteRecordRaw } from "vue-router"
|
||||
|
||||
interface Props {
|
||||
list: RouteRecordRaw[]
|
||||
isPressUpOrDown: boolean
|
||||
}
|
||||
|
||||
/** 选中的菜单 */
|
||||
const modelValue = defineModel<RouteRecordName | undefined>({ required: true })
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const instance = getCurrentInstance()
|
||||
const scrollbarHeight = ref<number>(0)
|
||||
|
||||
/** 菜单的样式 */
|
||||
const itemStyle = (item: RouteRecordRaw) => {
|
||||
const flag = item.name === modelValue.value
|
||||
return {
|
||||
background: flag ? "var(--el-color-primary)" : "",
|
||||
color: flag ? "#ffffff" : ""
|
||||
}
|
||||
}
|
||||
|
||||
/** 鼠标移入 */
|
||||
const handleMouseenter = (item: RouteRecordRaw) => {
|
||||
// 如果上键或下键与 mouseenter 事件同时生效，则以上下键为准，不执行该函数的赋值逻辑
|
||||
if (props.isPressUpOrDown) return
|
||||
modelValue.value = item.name
|
||||
}
|
||||
|
||||
/** 计算滚动可视区高度 */
|
||||
const getScrollbarHeight = () => {
|
||||
// el-scrollbar max-height="40vh"
|
||||
scrollbarHeight.value = Number((window.innerHeight * 0.4).toFixed(1))
|
||||
}
|
||||
|
||||
/** 根据下标计算到顶部的距离 */
|
||||
const getScrollTop = (index: number) => {
|
||||
const currentInstance = instance?.proxy?.$refs[`resultItemRef${index}`] as HTMLDivElement[]
|
||||
if (!currentInstance) return 0
|
||||
const currentRef = currentInstance[0]
|
||||
const scrollTop = currentRef.offsetTop + 128 // 128 = 两个 result-item （56 + 56 = 112）高度与上下 margin（8 + 8 = 16）大小之和
|
||||
return scrollTop > scrollbarHeight.value ? scrollTop - scrollbarHeight.value : 0
|
||||
}
|
||||
|
||||
/** 在组件挂载前添加窗口大小变化事件监听器 */
|
||||
onBeforeMount(() => {
|
||||
window.addEventListener("resize", getScrollbarHeight)
|
||||
})
|
||||
|
||||
/** 在组件挂载时立即计算滚动可视区高度 */
|
||||
onMounted(() => {
|
||||
getScrollbarHeight()
|
||||
})
|
||||
|
||||
/** 在组件卸载前移除窗口大小变化事件监听器 */
|
||||
onBeforeUnmount(() => {
|
||||
window.removeEventListener("resize", getScrollbarHeight)
|
||||
})
|
||||
|
||||
defineExpose({ getScrollTop })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- 外层 div 不能删除，是用来接收父组件 click 事件的 -->
|
||||
<div>
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
:key="index"
|
||||
:ref="`resultItemRef${index}`"
|
||||
class="result-item"
|
||||
:style="itemStyle(item)"
|
||||
@mouseenter="handleMouseenter(item)"
|
||||
>
|
||||
<SvgIcon v-if="item.meta?.svgIcon" :name="item.meta.svgIcon" />
|
||||
<component v-else-if="item.meta?.elIcon" :is="item.meta.elIcon" class="el-icon" />
|
||||
<span class="result-item-title">
|
||||
{{ item.meta?.title }}
|
||||
</span>
|
||||
<SvgIcon v-if="modelValue && modelValue === item.name" name="keyboard-enter" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.result-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 56px;
|
||||
padding: 0 15px;
|
||||
margin-top: 8px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
.svg-icon {
|
||||
min-width: 1em;
|
||||
font-size: 18px;
|
||||
}
|
||||
.el-icon {
|
||||
width: 1em;
|
||||
font-size: 18px;
|
||||
}
|
||||
&-title {
|
||||
flex: 1;
|
||||
margin-left: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
src/components/SearchMenu/index.vue
Normal file
29
src/components/SearchMenu/index.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<script lang="ts" setup>
|
||||
import { ref } from "vue"
|
||||
import SearchModal from "./SearchModal.vue"
|
||||
|
||||
/** 控制 modal 显隐 */
|
||||
const modalVisible = ref<boolean>(false)
|
||||
/** 打开 modal */
|
||||
const handleOpen = () => {
|
||||
modalVisible.value = true
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<el-tooltip effect="dark" content="搜索菜单" placement="bottom">
|
||||
<SvgIcon name="search" @click="handleOpen" />
|
||||
</el-tooltip>
|
||||
<SearchModal v-model="modalVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.svg-icon {
|
||||
font-size: 20px;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
29
src/components/SvgIcon/index.vue
Normal file
29
src/components/SvgIcon/index.vue
Normal file
@ -0,0 +1,29 @@
|
||||
<script lang="ts" setup>
|
||||
import { computed } from "vue"
|
||||
|
||||
interface Props {
|
||||
prefix?: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
prefix: "icon"
|
||||
})
|
||||
|
||||
const symbolId = computed(() => `#${props.prefix}-${props.name}`)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<svg class="svg-icon" aria-hidden="true">
|
||||
<use :href="symbolId" />
|
||||
</svg>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.svg-icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
50
src/components/ThemeSwitch/index.vue
Normal file
50
src/components/ThemeSwitch/index.vue
Normal file
@ -0,0 +1,50 @@
|
||||
<script lang="ts" setup>
|
||||
import { type ThemeName, useTheme } from "@/hooks/useTheme"
|
||||
import { MagicStick } from "@element-plus/icons-vue"
|
||||
|
||||
const { themeList, activeThemeName, setTheme } = useTheme()
|
||||
|
||||
const handleChangeTheme = ({ clientX, clientY }: MouseEvent, themeName: ThemeName) => {
|
||||
const maxRadius = Math.hypot(
|
||||
Math.max(clientX, window.innerWidth - clientX),
|
||||
Math.max(clientY, window.innerHeight - clientY)
|
||||
)
|
||||
const style = document.documentElement.style
|
||||
style.setProperty("--v3-theme-x", clientX + "px")
|
||||
style.setProperty("--v3-theme-y", clientY + "px")
|
||||
style.setProperty("--v3-theme-r", maxRadius + "px")
|
||||
const handler = () => {
|
||||
setTheme(themeName)
|
||||
}
|
||||
// @ts-expect-error
|
||||
document.startViewTransition ? document.startViewTransition(handler) : handler()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<el-dropdown trigger="click">
|
||||
<div>
|
||||
<el-tooltip effect="dark" content="主题模式" placement="bottom">
|
||||
<el-icon :size="20">
|
||||
<MagicStick />
|
||||
</el-icon>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item
|
||||
v-for="(theme, index) in themeList"
|
||||
:key="index"
|
||||
:disabled="activeThemeName === theme.name"
|
||||
@click="
|
||||
(e: MouseEvent) => {
|
||||
handleChangeTheme(e, theme.name)
|
||||
}
|
||||
"
|
||||
>
|
||||
<span>{{ theme.title }}</span>
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
@ -1,53 +0,0 @@
|
||||
<template>
|
||||
<div class="main-page">
|
||||
<router-view v-slot="{ Component }">
|
||||
<keep-alive>
|
||||
<component :is="Component" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</div>
|
||||
|
||||
<quark-tabbar @change="tabSwitch">
|
||||
<quark-tabbar-item>{{$t('tabbar.home')}}</quark-tabbar-item>
|
||||
<quark-tabbar-item>{{$t('tabbar.list')}}</quark-tabbar-item>
|
||||
<quark-tabbar-item>{{$t('tabbar.member')}}</quark-tabbar-item>
|
||||
</quark-tabbar>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const tabSwitch = (item) => {
|
||||
switch (+item.detail.value) {
|
||||
case 0:
|
||||
router.push('/home');
|
||||
break;
|
||||
case 1:
|
||||
router.push('/list');
|
||||
break;
|
||||
case 2:
|
||||
router.push('/member');
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.main-page {
|
||||
height: calc(100vh - 50px);
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border: none;
|
||||
box-shadow: 0 0 20px -5px #9a9a9a;
|
||||
}
|
||||
</style>
|
||||
55
src/config/layouts.ts
Normal file
55
src/config/layouts.ts
Normal file
@ -0,0 +1,55 @@
|
||||
import { getConfigLayout } from "@/utils/cache/local-storage"
|
||||
import { LayoutModeEnum } from "@/constants/app-key"
|
||||
|
||||
/** 项目配置类型 */
|
||||
export interface LayoutSettings {
|
||||
/** 是否显示 Settings Panel */
|
||||
showSettings: boolean
|
||||
/** 布局模式 */
|
||||
layoutMode: LayoutModeEnum
|
||||
/** 是否显示标签栏 */
|
||||
showTagsView: boolean
|
||||
/** 是否显示 Logo */
|
||||
showLogo: boolean
|
||||
/** 是否固定 Header */
|
||||
fixedHeader: boolean
|
||||
/** 是否显示页脚 Footer */
|
||||
showFooter: boolean
|
||||
/** 是否显示消息通知 */
|
||||
showNotify: boolean
|
||||
/** 是否显示切换主题按钮 */
|
||||
showThemeSwitch: boolean
|
||||
/** 是否显示全屏按钮 */
|
||||
showScreenfull: boolean
|
||||
/** 是否显示搜索按钮 */
|
||||
showSearchMenu: boolean
|
||||
/** 是否缓存标签栏 */
|
||||
cacheTagsView: boolean
|
||||
/** 开启系统水印 */
|
||||
showWatermark: boolean
|
||||
/** 是否显示灰色模式 */
|
||||
showGreyMode: boolean
|
||||
/** 是否显示色弱模式 */
|
||||
showColorWeakness: boolean
|
||||
}
|
||||
|
||||
/** 默认配置 */
|
||||
const defaultSettings: LayoutSettings = {
|
||||
layoutMode: LayoutModeEnum.Left,
|
||||
showSettings: true,
|
||||
showTagsView: true,
|
||||
fixedHeader: true,
|
||||
showFooter: true,
|
||||
showLogo: true,
|
||||
showNotify: true,
|
||||
showThemeSwitch: true,
|
||||
showScreenfull: true,
|
||||
showSearchMenu: true,
|
||||
cacheTagsView: false,
|
||||
showWatermark: true,
|
||||
showGreyMode: false,
|
||||
showColorWeakness: false
|
||||
}
|
||||
|
||||
/** 项目配置 */
|
||||
export const layoutSettings: LayoutSettings = { ...defaultSettings, ...getConfigLayout() }
|
||||
28
src/config/route.ts
Normal file
28
src/config/route.ts
Normal file
@ -0,0 +1,28 @@
|
||||
/** 路由配置 */
|
||||
interface RouteSettings {
|
||||
/**
|
||||
* 是否开启动态路由功能？
|
||||
* 1. 开启后需要后端配合，在查询用户详情接口返回当前用户可以用来判断并加载动态路由的字段（该项目用的是角色 roles 字段）
|
||||
* 2. 假如项目不需要根据不同的用户来显示不同的页面，则应该将 dynamic: false
|
||||
*/
|
||||
dynamic: boolean
|
||||
/** 当动态路由功能关闭时：
|
||||
* 1. 应该将所有路由都写到常驻路由里面（表明所有登录的用户能访问的页面都是一样的）
|
||||
* 2. 系统自动给当前登录用户赋值一个没有任何作用的默认角色
|
||||
*/
|
||||
defaultRoles: Array<string>
|
||||
/**
|
||||
* 是否开启三级及其以上路由缓存功能？
|
||||
* 1. 开启后会进行路由降级（把三级及其以上的路由转化为二级路由）
|
||||
* 2. 由于都会转成二级路由，所以二级及其以上路由有内嵌子路由将会失效
|
||||
*/
|
||||
thirdLevelRouteCache: boolean
|
||||
}
|
||||
|
||||
const routeSettings: RouteSettings = {
|
||||
dynamic: true,
|
||||
defaultRoles: ["DEFAULT_ROLE"],
|
||||
thirdLevelRouteCache: false
|
||||
}
|
||||
|
||||
export default routeSettings
|
||||
15
src/config/white-list.ts
Normal file
15
src/config/white-list.ts
Normal file
@ -0,0 +1,15 @@
|
||||
import { type RouteLocationNormalized } from "vue-router"
|
||||
|
||||
/** 免登录白名单（匹配路由 path） */
|
||||
const whiteListByPath: string[] = ["/login"]
|
||||
|
||||
/** 免登录白名单（匹配路由 name） */
|
||||
const whiteListByName: string[] = []
|
||||
|
||||
/** 判断是否在白名单 */
|
||||
const isWhiteList = (to: RouteLocationNormalized) => {
|
||||
// path 和 name 任意一个匹配上即可
|
||||
return whiteListByPath.indexOf(to.path) !== -1 || whiteListByName.indexOf(to.name as any) !== -1
|
||||
}
|
||||
|
||||
export default isWhiteList
|
||||
20
src/constants/app-key.ts
Normal file
20
src/constants/app-key.ts
Normal file
@ -0,0 +1,20 @@
|
||||
/** 设备类型 */
|
||||
export enum DeviceEnum {
|
||||
Mobile,
|
||||
Desktop
|
||||
}
|
||||
|
||||
/** 布局模式 */
|
||||
export enum LayoutModeEnum {
|
||||
Left = "left",
|
||||
Top = "top",
|
||||
LeftTop = "left-top"
|
||||
}
|
||||
|
||||
/** 侧边栏打开状态常量 */
|
||||
export const SIDEBAR_OPENED = "opened"
|
||||
/** 侧边栏关闭状态常量 */
|
||||
export const SIDEBAR_CLOSED = "closed"
|
||||
|
||||
export type SidebarOpened = typeof SIDEBAR_OPENED
|
||||
export type SidebarClosed = typeof SIDEBAR_CLOSED
|
||||
13
src/constants/cache-key.ts
Normal file
13
src/constants/cache-key.ts
Normal file
@ -0,0 +1,13 @@
|
||||
const SYSTEM_NAME = "my-vue3-template"
|
||||
|
||||
/** 缓存数据时用到的 Key */
|
||||
class CacheKey {
|
||||
static readonly TOKEN = `${SYSTEM_NAME}-token-key`
|
||||
static readonly CONFIG_LAYOUT = `${SYSTEM_NAME}-config-layout-key`
|
||||
static readonly SIDEBAR_STATUS = `${SYSTEM_NAME}-sidebar-status-key`
|
||||
static readonly ACTIVE_THEME_NAME = `${SYSTEM_NAME}-active-theme-name-key`
|
||||
static readonly VISITED_VIEWS = `${SYSTEM_NAME}-visited-views-key`
|
||||
static readonly CACHED_VIEWS = `${SYSTEM_NAME}-cached-views-key`
|
||||
}
|
||||
|
||||
export default CacheKey
|
||||
7
src/directives/index.ts
Normal file
7
src/directives/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { type App } from "vue"
|
||||
import { permission } from "./permission"
|
||||
|
||||
/** 挂载自定义指令 */
|
||||
export function loadDirectives(app: App) {
|
||||
app.directive("permission", permission)
|
||||
}
|
||||
17
src/directives/permission/index.ts
Normal file
17
src/directives/permission/index.ts
Normal file
@ -0,0 +1,17 @@
|
||||
import { type Directive } from "vue"
|
||||
import { useUserStoreHook } from "@/store/modules/user"
|
||||
|
||||
/** 权限指令，和权限判断函数 checkPermission 功能类似 */
|
||||
export const permission: Directive = {
|
||||
mounted(el, binding) {
|
||||
const { value: permissionRoles } = binding
|
||||
const { roles } = useUserStoreHook()
|
||||
if (Array.isArray(permissionRoles) && permissionRoles.length > 0) {
|
||||
const hasPermission = roles.some((role) => permissionRoles.includes(role))
|
||||
// hasPermission || (el.style.display = "none") // 隐藏
|
||||
hasPermission || el.parentNode?.removeChild(el) // 销毁
|
||||
} else {
|
||||
throw new Error(`need roles! Like v-permission="['admin','editor']"`)
|
||||
}
|
||||
}
|
||||
}
|
||||
11
src/hooks/useDevice.ts
Normal file
11
src/hooks/useDevice.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import { computed } from "vue"
|
||||
import { useAppStore } from "@/store/modules/app"
|
||||
import { DeviceEnum } from "@/constants/app-key"
|
||||
|
||||
const appStore = useAppStore()
|
||||
const isMobile = computed(() => appStore.device === DeviceEnum.Mobile)
|
||||
const isDesktop = computed(() => appStore.device === DeviceEnum.Desktop)
|
||||
|
||||
export function useDevice() {
|
||||
return { isMobile, isDesktop }
|
||||
}
|
||||
49
src/hooks/useFetchSelect.ts
Normal file
49
src/hooks/useFetchSelect.ts
Normal file
@ -0,0 +1,49 @@
|
||||
import { ref, onMounted } from "vue"
|
||||
|
||||
type OptionValue = string | number
|
||||
|
||||
/** Select 需要的数据格式 */
|
||||
interface SelectOption {
|
||||
value: OptionValue
|
||||
label: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
/** 接口响应格式 */
|
||||
type ApiData = ApiResponseData<SelectOption[]>
|
||||
|
||||
/** 入参格式，暂时只需要传递 api 函数即可 */
|
||||
interface FetchSelectProps {
|
||||
api: () => Promise<ApiData>
|
||||
}
|
||||
|
||||
export function useFetchSelect(props: FetchSelectProps) {
|
||||
const { api } = props
|
||||
|
||||
const loading = ref<boolean>(false)
|
||||
const options = ref<SelectOption[]>([])
|
||||
const value = ref<OptionValue>("")
|
||||
|
||||
/** 调用接口获取数据 */
|
||||
const loadData = () => {
|
||||
loading.value = true
|
||||
options.value = []
|
||||
api()
|
||||
.then((res) => {
|
||||
options.value = res.data
|
||||
})
|
||||
.finally(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
loadData()
|
||||
})
|
||||
|
||||
return {
|
||||
loading,
|
||||
options,
|
||||
value
|
||||
}
|
||||
}
|
||||
35
src/hooks/useFullscreenLoading.ts
Normal file
35
src/hooks/useFullscreenLoading.ts
Normal file
@ -0,0 +1,35 @@
|
||||
import { type LoadingOptions, ElLoading } from "element-plus"
|
||||
|
||||
const defaultOptions = {
|
||||
lock: true,
|
||||
text: "加载中..."
|
||||
}
|
||||
|
||||
interface LoadingInstance {
|
||||
close: () => void
|
||||
}
|
||||
|
||||
interface UseFullscreenLoading {
|
||||
<T extends (...args: any[]) => ReturnType<T>>(
|
||||
fn: T,
|
||||
options?: LoadingOptions
|
||||
): (...args: Parameters<T>) => Promise<ReturnType<T>>
|
||||
}
|
||||
|
||||
/**
|
||||
* 传入一个函数 fn，在它执行周期内，加上「全屏」loading
|
||||
* @param fn 要执行的函数
|
||||
* @param options LoadingOptions
|
||||
* @returns 返回一个新的函数，该函数返回一个 Promise
|
||||
*/
|
||||
export const useFullscreenLoading: UseFullscreenLoading = (fn, options = {}) => {
|
||||
let loadingInstance: LoadingInstance
|
||||
return async (...args) => {
|
||||
try {
|
||||
loadingInstance = ElLoading.service({ ...defaultOptions, ...options })
|
||||
return await fn(...args)
|
||||
} finally {
|
||||
loadingInstance?.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
16
src/hooks/useLayoutMode.ts
Normal file
16
src/hooks/useLayoutMode.ts
Normal file
@ -0,0 +1,16 @@
|
||||
import { computed } from "vue"
|
||||
import { useSettingsStore } from "@/store/modules/settings"
|
||||
import { LayoutModeEnum } from "@/constants/app-key"
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const isLeft = computed(() => settingsStore.layoutMode === LayoutModeEnum.Left)
|
||||
const isTop = computed(() => settingsStore.layoutMode === LayoutModeEnum.Top)
|
||||
const isLeftTop = computed(() => settingsStore.layoutMode === LayoutModeEnum.LeftTop)
|
||||
|
||||
const setLayoutMode = (mode: LayoutModeEnum) => {
|
||||
settingsStore.layoutMode = mode
|
||||
}
|
||||
|
||||
export function useLayoutMode() {
|
||||
return { isLeft, isTop, isLeftTop, setLayoutMode }
|
||||
}
|
||||
41
src/hooks/usePagination.ts
Normal file
41
src/hooks/usePagination.ts
Normal file
@ -0,0 +1,41 @@
|
||||
import { reactive } from "vue"
|
||||
|
||||
interface DefaultPaginationData {
|
||||
total: number
|
||||
currentPage: number
|
||||
pageSizes: number[]
|
||||
pageSize: number
|
||||
layout: string
|
||||
}
|
||||
|
||||
interface PaginationData {
|
||||
total?: number
|
||||
currentPage?: number
|
||||
pageSizes?: number[]
|
||||
pageSize?: number
|
||||
layout?: string
|
||||
}
|
||||
|
||||
/** 默认的分页参数 */
|
||||
const defaultPaginationData: DefaultPaginationData = {
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
pageSizes: [10, 20, 50],
|
||||
pageSize: 10,
|
||||
layout: "total, sizes, prev, pager, next, jumper"
|
||||
}
|
||||
|
||||
export function usePagination(initialPaginationData: PaginationData = {}) {
|
||||
/** 合并分页参数 */
|
||||
const paginationData = reactive({ ...defaultPaginationData, ...initialPaginationData })
|
||||
/** 改变当前页码 */
|
||||
const handleCurrentChange = (value: number) => {
|
||||
paginationData.currentPage = value
|
||||
}
|
||||
/** 改变页面大小 */
|
||||
const handleSizeChange = (value: number) => {
|
||||
paginationData.pageSize = value
|
||||
}
|
||||
|
||||
return { paginationData, handleCurrentChange, handleSizeChange }
|
||||
}
|
||||
48
src/hooks/useRouteListener.ts
Normal file
48
src/hooks/useRouteListener.ts
Normal file
@ -0,0 +1,48 @@
|
||||
import { onBeforeUnmount } from "vue"
|
||||
import mitt, { type Handler } from "mitt"
|
||||
import { type RouteLocationNormalized } from "vue-router"
|
||||
|
||||
/** 回调函数的类型 */
|
||||
type Callback = (route: RouteLocationNormalized) => void
|
||||
|
||||
const emitter = mitt()
|
||||
const key = Symbol("ROUTE_CHANGE")
|
||||
let latestRoute: RouteLocationNormalized
|
||||
|
||||
/** 设置最新的路由信息，触发路由变化事件 */
|
||||
export const setRouteChange = (to: RouteLocationNormalized) => {
|
||||
// 触发事件
|
||||
emitter.emit(key, to)
|
||||
// 缓存最新的路由信息
|
||||
latestRoute = to
|
||||
}
|
||||
|
||||
/** 单独监听路由会浪费渲染性能，使用发布订阅模式去进行分发管理 */
|
||||
export function useRouteListener() {
|
||||
/** 回调函数集合 */
|
||||
const callbackList: Callback[] = []
|
||||
|
||||
/** 监听路由变化（可以选择立即执行） */
|
||||
const listenerRouteChange = (callback: Callback, immediate = false) => {
|
||||
// 缓存回调函数
|
||||
callbackList.push(callback)
|
||||
// 监听事件
|
||||
emitter.on(key, callback as Handler)
|
||||
// 可以选择立即执行一次回调函数
|
||||
immediate && latestRoute && callback(latestRoute)
|
||||
}
|
||||
|
||||
/** 移除路由变化事件监听器 */
|
||||
const removeRouteListener = (callback: Callback) => {
|
||||
emitter.off(key, callback as Handler)
|
||||
}
|
||||
|
||||
/** 组件销毁前移除监听器 */
|
||||
onBeforeUnmount(() => {
|
||||
for (let i = 0; i < callbackList.length; i++) {
|
||||
removeRouteListener(callbackList[i])
|
||||
}
|
||||
})
|
||||
|
||||
return { listenerRouteChange, removeRouteListener }
|
||||
}
|
||||
57
src/hooks/useTheme.ts
Normal file
57
src/hooks/useTheme.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { ref, watchEffect } from "vue"
|
||||
import { getActiveThemeName, setActiveThemeName } from "@/utils/cache/local-storage"
|
||||
|
||||
const DEFAULT_THEME_NAME = "normal"
|
||||
type DefaultThemeName = typeof DEFAULT_THEME_NAME
|
||||
|
||||
/** 注册的主题名称, 其中 DefaultThemeName 是必填的 */
|
||||
export type ThemeName = DefaultThemeName | "dark" | "dark-blue"
|
||||
|
||||
interface ThemeList {
|
||||
title: string
|
||||
name: ThemeName
|
||||
}
|
||||
|
||||
/** 主题列表 */
|
||||
const themeList: ThemeList[] = [
|
||||
{
|
||||
title: "默认",
|
||||
name: DEFAULT_THEME_NAME
|
||||
},
|
||||
{
|
||||
title: "黑暗",
|
||||
name: "dark"
|
||||
},
|
||||
{
|
||||
title: "深蓝",
|
||||
name: "dark-blue"
|
||||
}
|
||||
]
|
||||
|
||||
/** 正在应用的主题名称 */
|
||||
const activeThemeName = ref<ThemeName>(getActiveThemeName() || DEFAULT_THEME_NAME)
|
||||
|
||||
/** 设置主题 */
|
||||
const setTheme = (value: ThemeName) => {
|
||||
activeThemeName.value = value
|
||||
}
|
||||
|
||||
/** 在 html 根元素上挂载 class */
|
||||
const setHtmlRootClassName = (value: ThemeName) => {
|
||||
document.documentElement.className = value
|
||||
}
|
||||
|
||||
/** 初始化 */
|
||||
const initTheme = () => {
|
||||
// watchEffect 来收集副作用
|
||||
watchEffect(() => {
|
||||
const value = activeThemeName.value
|
||||
setHtmlRootClassName(value)
|
||||
setActiveThemeName(value)
|
||||
})
|
||||
}
|
||||
|
||||
/** 主题 hook */
|
||||
export function useTheme() {
|
||||
return { themeList, activeThemeName, initTheme, setTheme }
|
||||
}
|
||||
23
src/hooks/useTitle.ts
Normal file
23
src/hooks/useTitle.ts
Normal file
@ -0,0 +1,23 @@
|
||||
import { ref, watch } from "vue"
|
||||
|
||||
/** 项目标题 */
|
||||
const VITE_APP_TITLE = import.meta.env.VITE_APP_TITLE ?? "V3 Admin Vite"
|
||||
|
||||
/** 动态标题 */
|
||||
const dynamicTitle = ref<string>("")
|
||||
|
||||
/** 设置标题 */
|
||||
const setTitle = (title?: string) => {
|
||||
dynamicTitle.value = title ? `${VITE_APP_TITLE} | ${title}` : VITE_APP_TITLE
|
||||
}
|
||||
|
||||
/** 监听标题变化 */
|
||||
watch(dynamicTitle, (value, oldValue) => {
|
||||
if (document && value !== oldValue) {
|
||||
document.title = value
|
||||
}
|
||||
})
|
||||
|
||||
export function useTitle() {
|
||||
return { setTitle }
|
||||
}
|
||||
236
src/hooks/useWatermark.ts
Normal file
236
src/hooks/useWatermark.ts
Normal file
@ -0,0 +1,236 @@
|
||||
import { type Ref, onBeforeUnmount, ref } from "vue"
|
||||
import { debounce } from "lodash-es"
|
||||
|
||||
type Observer = {
|
||||
watermarkElMutationObserver?: MutationObserver
|
||||
parentElMutationObserver?: MutationObserver
|
||||
parentElResizeObserver?: ResizeObserver
|
||||
}
|
||||
|
||||
type DefaultConfig = typeof defaultConfig
|
||||
|
||||
/** 默认配置 */
|
||||
const defaultConfig = {
|
||||
/** 防御（默认开启，能防御水印被删除或隐藏，但可能会有性能损耗） */
|
||||
defense: true,
|
||||
/** 文本颜色 */
|
||||
color: "#c0c4cc",
|
||||
/** 文本透明度 */
|
||||
opacity: 0.5,
|
||||
/** 文本字体大小 */
|
||||
size: 16,
|
||||
/** 文本字体 */
|
||||
family: "serif",
|
||||
/** 文本倾斜角度 */
|
||||
angle: -20,
|
||||
/** 一处水印所占宽度（数值越大水印密度越低） */
|
||||
width: 300,
|
||||
/** 一处水印所占高度（数值越大水印密度越低） */
|
||||
height: 200
|
||||
}
|
||||
|
||||
/** body 元素 */
|
||||
const bodyEl = ref<HTMLElement>(document.body)
|
||||
|
||||
/**
|
||||
* 创建水印
|
||||
* 1. 可以选择传入挂载水印的容器元素，默认是 body
|
||||
* 2. 做了水印防御，能有效防御别人打开控制台删除或隐藏水印
|
||||
*/
|
||||
export function useWatermark(parentEl: Ref<HTMLElement | null> = bodyEl) {
|
||||
/** 备份文本 */
|
||||
let backupText: string
|
||||
/** 最终配置 */
|
||||
let mergeConfig: DefaultConfig
|
||||
/** 水印元素 */
|
||||
let watermarkEl: HTMLElement | null = null
|
||||
/** 观察器 */
|
||||
const observer: Observer = {
|
||||
watermarkElMutationObserver: undefined,
|
||||
parentElMutationObserver: undefined,
|
||||
parentElResizeObserver: undefined
|
||||
}
|
||||
|
||||
/** 设置水印 */
|
||||
const setWatermark = (text: string, config: Partial<DefaultConfig> = {}) => {
|
||||
if (!parentEl.value) {
|
||||
console.warn("请在 DOM 挂载完成后再调用 setWatermark 方法设置水印")
|
||||
return
|
||||
}
|
||||
// 备份文本
|
||||
backupText = text
|
||||
// 合并配置
|
||||
mergeConfig = { ...defaultConfig, ...config }
|
||||
// 创建或更新水印元素
|
||||
watermarkEl ? updateWatermarkEl() : createWatermarkEl()
|
||||
// 监听水印元素和容器元素的变化
|
||||
addElListener(parentEl.value)
|
||||
}
|
||||
|
||||
/** 创建水印元素 */
|
||||
const createWatermarkEl = () => {
|
||||
const isBody = parentEl.value!.tagName.toLowerCase() === bodyEl.value.tagName.toLowerCase()
|
||||
const watermarkElPosition = isBody ? "fixed" : "absolute"
|
||||
const parentElPosition = isBody ? "" : "relative"
|
||||
watermarkEl = document.createElement("div")
|
||||
watermarkEl.style.pointerEvents = "none"
|
||||
watermarkEl.style.top = "0"
|
||||
watermarkEl.style.left = "0"
|
||||
watermarkEl.style.position = watermarkElPosition
|
||||
watermarkEl.style.zIndex = "99999"
|
||||
const { clientWidth, clientHeight } = parentEl.value!
|
||||
updateWatermarkEl({ width: clientWidth, height: clientHeight })
|
||||
// 设置水印容器为相对定位
|
||||
parentEl.value!.style.position = parentElPosition
|
||||
// 将水印元素添加到水印容器中
|
||||
parentEl.value!.appendChild(watermarkEl)
|
||||
}
|
||||
|
||||
/** 更新水印元素 */
|
||||
const updateWatermarkEl = (
|
||||
options: Partial<{
|
||||
width: number
|
||||
height: number
|
||||
}> = {}
|
||||
) => {
|
||||
if (!watermarkEl) return
|
||||
backupText && (watermarkEl.style.background = `url(${createBase64()}) left top repeat`)
|
||||
options.width && (watermarkEl.style.width = `${options.width}px`)
|
||||
options.height && (watermarkEl.style.height = `${options.height}px`)
|
||||
}
|
||||
|
||||
/** 创建 base64 图片 */
|
||||
const createBase64 = () => {
|
||||
const { color, opacity, size, family, angle, width, height } = mergeConfig
|
||||
const canvasEl = document.createElement("canvas")
|
||||
canvasEl.width = width
|
||||
canvasEl.height = height
|
||||
const ctx = canvasEl.getContext("2d")
|
||||
if (ctx) {
|
||||
ctx.fillStyle = color
|
||||
ctx.globalAlpha = opacity
|
||||
ctx.font = `${size}px ${family}`
|
||||
ctx.rotate((Math.PI / 180) * angle)
|
||||
ctx.fillText(backupText, 0, height / 2)
|
||||
}
|
||||
return canvasEl.toDataURL()
|
||||
}
|
||||
|
||||
/** 清除水印 */
|
||||
const clearWatermark = () => {
|
||||
if (!parentEl.value || !watermarkEl) return
|
||||
// 移除对水印元素和容器元素的监听
|
||||
removeListener()
|
||||
// 移除水印元素
|
||||
try {
|
||||
parentEl.value.removeChild(watermarkEl)
|
||||
} catch {
|
||||
// 比如在无防御情况下，用户打开控制台删除了这个元素
|
||||
console.warn("水印元素已不存在，请重新创建")
|
||||
} finally {
|
||||
watermarkEl = null
|
||||
}
|
||||
}
|
||||
|
||||
/** 刷新水印（防御时调用） */
|
||||
const updateWatermark = debounce(() => {
|
||||
clearWatermark()
|
||||
createWatermarkEl()
|
||||
addElListener(parentEl.value!)
|
||||
}, 100)
|
||||
|
||||
/** 监听水印元素和容器元素的变化（DOM 变化 & DOM 大小变化） */
|
||||
const addElListener = (targetNode: HTMLElement) => {
|
||||
// 判断是否开启防御
|
||||
if (mergeConfig.defense) {
|
||||
// 防止重复添加监听
|
||||
if (!observer.watermarkElMutationObserver && !observer.parentElMutationObserver) {
|
||||
// 监听 DOM 变化
|
||||
addMutationListener(targetNode)
|
||||
}
|
||||
} else {
|
||||
// 无防御时不需要 mutation 监听
|
||||
removeListener("mutation")
|
||||
}
|
||||
// 防止重复添加监听
|
||||
if (!observer.parentElResizeObserver) {
|
||||
// 监听 DOM 大小变化
|
||||
addResizeListener(targetNode)
|
||||
}
|
||||
}
|
||||
|
||||
/** 移除对水印元素和容器元素的监听，传参可指定要移除哪个监听，不传默认移除全部监听 */
|
||||
const removeListener = (kind: "mutation" | "resize" | "all" = "all") => {
|
||||
// 移除 mutation 监听
|
||||
if (kind === "mutation" || kind === "all") {
|
||||
observer.watermarkElMutationObserver?.disconnect()
|
||||
observer.watermarkElMutationObserver = undefined
|
||||
observer.parentElMutationObserver?.disconnect()
|
||||
observer.parentElMutationObserver = undefined
|
||||
}
|
||||
// 移除 resize 监听
|
||||
if (kind === "resize" || kind === "all") {
|
||||
observer.parentElResizeObserver?.disconnect()
|
||||
observer.parentElResizeObserver = undefined
|
||||
}
|
||||
}
|
||||
|
||||
/** 监听 DOM 变化 */
|
||||
const addMutationListener = (targetNode: HTMLElement) => {
|
||||
// 当观察到变动时执行的回调
|
||||
const mutationCallback = debounce((mutationList: MutationRecord[]) => {
|
||||
// 水印的防御（防止用户手动删除水印元素或通过 CSS 隐藏水印）
|
||||
mutationList.forEach(
|
||||
debounce((mutation: MutationRecord) => {
|
||||
switch (mutation.type) {
|
||||
case "attributes":
|
||||
mutation.target === watermarkEl && updateWatermark()
|
||||
break
|
||||
case "childList":
|
||||
mutation.removedNodes.forEach((item) => {
|
||||
item === watermarkEl && targetNode.appendChild(watermarkEl)
|
||||
})
|
||||
break
|
||||
}
|
||||
}, 100)
|
||||
)
|
||||
}, 100)
|
||||
// 创建观察器实例并传入回调
|
||||
observer.watermarkElMutationObserver = new MutationObserver(mutationCallback)
|
||||
observer.parentElMutationObserver = new MutationObserver(mutationCallback)
|
||||
// 以上述配置开始观察目标节点
|
||||
observer.watermarkElMutationObserver.observe(watermarkEl!, {
|
||||
// 观察目标节点属性是否变动，默认为 true
|
||||
attributes: true,
|
||||
// 观察目标子节点是否有添加或者删除，默认为 false
|
||||
childList: false,
|
||||
// 是否拓展到观察所有后代节点，默认为 false
|
||||
subtree: false
|
||||
})
|
||||
observer.parentElMutationObserver.observe(targetNode, {
|
||||
attributes: false,
|
||||
childList: true,
|
||||
subtree: false
|
||||
})
|
||||
}
|
||||
|
||||
/** 监听 DOM 大小变化 */
|
||||
const addResizeListener = (targetNode: HTMLElement) => {
|
||||
// 当 targetNode 元素大小变化时去更新整个水印的大小
|
||||
const resizeCallback = debounce(() => {
|
||||
const { clientWidth, clientHeight } = targetNode
|
||||
updateWatermarkEl({ width: clientWidth, height: clientHeight })
|
||||
}, 500)
|
||||
// 创建一个观察器实例并传入回调
|
||||
observer.parentElResizeObserver = new ResizeObserver(resizeCallback)
|
||||
// 开始观察目标节点
|
||||
observer.parentElResizeObserver.observe(targetNode)
|
||||
}
|
||||
|
||||
/** 在组件卸载前移除水印以及各种监听 */
|
||||
onBeforeUnmount(() => {
|
||||
clearWatermark()
|
||||
})
|
||||
|
||||
return { setWatermark, clearWatermark }
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
import { AnyObject } from '/#/global';
|
||||
import { createI18n } from 'vue-i18n';
|
||||
|
||||
export function loadLang() {
|
||||
const context = import.meta.globEager('./lang/*.ts');
|
||||
const messages: AnyObject = {};
|
||||
|
||||
const langs = Object.keys(context);
|
||||
for (const key of langs) {
|
||||
if (key === './index.ts') return;
|
||||
const lang = context[key].lang;
|
||||
const name = key.replace(/(\.\/lang\/|\.ts)/g, '');
|
||||
|
||||
messages[name] = lang;
|
||||
}
|
||||
|
||||
return messages;
|
||||
}
|
||||
|
||||
export const i18n = createI18n({
|
||||
// globalInjection: true,
|
||||
// legacy: false,
|
||||
locale: 'zh-cn',
|
||||
fallbackLocale: 'zh-cn',
|
||||
messages: loadLang(),
|
||||
});
|
||||
|
||||
export const i18nt = i18n.global.t;
|
||||
|
||||
export function setLang(locale: string) {
|
||||
i18n.global.locale = locale;
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user