feat: 框架初始化完成
This commit is contained in:
commit
fb187190b6
21
.dockerignore
Normal file
21
.dockerignore
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
.eslintcache
|
||||||
|
report.html
|
||||||
|
|
||||||
|
yarn.lock
|
||||||
|
npm-debug.log*
|
||||||
|
.pnpm-error.log*
|
||||||
|
.pnpm-debug.log
|
||||||
|
tests/**/coverage/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
tsconfig.tsbuildinfo
|
||||||
14
.editorconfig
Normal file
14
.editorconfig
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
# http://editorconfig.org
|
||||||
|
root = true
|
||||||
|
|
||||||
|
[*]
|
||||||
|
charset = utf-8
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
end_of_line = lf
|
||||||
|
insert_final_newline = true
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
|
||||||
|
[*.md]
|
||||||
|
insert_final_newline = false
|
||||||
|
trim_trailing_whitespace = false
|
||||||
5
.env
Normal file
5
.env
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
# 平台本地运行端口号
|
||||||
|
VITE_PORT = 8848
|
||||||
|
|
||||||
|
# 是否隐藏首页 隐藏 true 不隐藏 false （勿删除，VITE_HIDE_HOME只需在.env文件配置）
|
||||||
|
VITE_HIDE_HOME = false
|
||||||
8
.env.development
Normal file
8
.env.development
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
# 平台本地运行端口号
|
||||||
|
VITE_PORT = 8848
|
||||||
|
|
||||||
|
# 开发环境读取配置文件路径
|
||||||
|
VITE_PUBLIC_PATH = ./
|
||||||
|
|
||||||
|
# 开发环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
|
||||||
|
VITE_ROUTER_HISTORY = "hash"
|
||||||
13
.env.production
Normal file
13
.env.production
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
# 线上环境平台打包路径
|
||||||
|
VITE_PUBLIC_PATH = ./
|
||||||
|
|
||||||
|
# 线上环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
|
||||||
|
VITE_ROUTER_HISTORY = "hash"
|
||||||
|
|
||||||
|
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
|
||||||
|
VITE_CDN = false
|
||||||
|
|
||||||
|
# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
|
||||||
|
# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
|
||||||
|
# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
|
||||||
|
VITE_COMPRESSION = "none"
|
||||||
16
.env.staging
Normal file
16
.env.staging
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
# 预发布也需要生产环境的行为
|
||||||
|
# https://cn.vitejs.dev/guide/env-and-mode.html#modes
|
||||||
|
# NODE_ENV = development
|
||||||
|
|
||||||
|
VITE_PUBLIC_PATH = ./
|
||||||
|
|
||||||
|
# 预发布环境路由历史模式（Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"）
|
||||||
|
VITE_ROUTER_HISTORY = "hash"
|
||||||
|
|
||||||
|
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false
|
||||||
|
VITE_CDN = true
|
||||||
|
|
||||||
|
# 是否启用gzip压缩或brotli压缩（分两种情况，删除原始文件和不删除原始文件）
|
||||||
|
# 压缩时不删除原始文件的配置：gzip、brotli、both（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
|
||||||
|
# 压缩时删除原始文件的配置：gzip-clear、brotli-clear、both-clear（同时开启 gzip 与 brotli 压缩）、none（不开启压缩，默认）
|
||||||
|
VITE_COMPRESSION = "none"
|
||||||
11
.eslintignore
Normal file
11
.eslintignore
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
public
|
||||||
|
dist
|
||||||
|
*.d.ts
|
||||||
|
/src/assets
|
||||||
|
package.json
|
||||||
|
.eslintrc.js
|
||||||
|
.prettierrc.js
|
||||||
|
commitlint.config.js
|
||||||
|
postcss.config.js
|
||||||
|
tailwind.config.js
|
||||||
|
stylelint.config.js
|
||||||
120
.eslintrc.js
Normal file
120
.eslintrc.js
Normal file
@ -0,0 +1,120 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
globals: {
|
||||||
|
// Ref sugar (take 2)
|
||||||
|
$: "readonly",
|
||||||
|
$$: "readonly",
|
||||||
|
$ref: "readonly",
|
||||||
|
$shallowRef: "readonly",
|
||||||
|
$computed: "readonly",
|
||||||
|
|
||||||
|
// index.d.ts
|
||||||
|
// global.d.ts
|
||||||
|
Fn: "readonly",
|
||||||
|
PromiseFn: "readonly",
|
||||||
|
RefType: "readonly",
|
||||||
|
LabelValueOptions: "readonly",
|
||||||
|
EmitType: "readonly",
|
||||||
|
TargetContext: "readonly",
|
||||||
|
ComponentElRef: "readonly",
|
||||||
|
ComponentRef: "readonly",
|
||||||
|
ElRef: "readonly",
|
||||||
|
global: "readonly",
|
||||||
|
ForDataType: "readonly",
|
||||||
|
ComponentRoutes: "readonly",
|
||||||
|
|
||||||
|
// script setup
|
||||||
|
defineProps: "readonly",
|
||||||
|
defineEmits: "readonly",
|
||||||
|
defineExpose: "readonly",
|
||||||
|
withDefaults: "readonly"
|
||||||
|
},
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
overrides: [
|
||||||
|
{
|
||||||
|
files: ["*.ts", "*.vue"],
|
||||||
|
rules: {
|
||||||
|
"no-undef": "off"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
files: ["*.vue"],
|
||||||
|
parser: "vue-eslint-parser",
|
||||||
|
parserOptions: {
|
||||||
|
parser: "@typescript-eslint/parser",
|
||||||
|
extraFileExtensions: [".vue"],
|
||||||
|
ecmaVersion: "latest",
|
||||||
|
ecmaFeatures: {
|
||||||
|
jsx: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
"no-undef": "off"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
rules: {
|
||||||
|
"vue/no-v-html": "off",
|
||||||
|
"vue/require-default-prop": "off",
|
||||||
|
"vue/require-explicit-emits": "off",
|
||||||
|
"vue/multi-word-component-names": "off",
|
||||||
|
"@typescript-eslint/no-explicit-any": "off", // any
|
||||||
|
"no-debugger": "off",
|
||||||
|
"@typescript-eslint/explicit-module-boundary-types": "off", // setup()
|
||||||
|
"@typescript-eslint/ban-types": "off",
|
||||||
|
"@typescript-eslint/ban-ts-comment": "off",
|
||||||
|
"@typescript-eslint/no-empty-function": "off",
|
||||||
|
"@typescript-eslint/no-non-null-assertion": "off",
|
||||||
|
"vue/html-self-closing": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
html: {
|
||||||
|
void: "always",
|
||||||
|
normal: "always",
|
||||||
|
component: "always"
|
||||||
|
},
|
||||||
|
svg: "always",
|
||||||
|
math: "always"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"@typescript-eslint/no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"no-unused-vars": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
argsIgnorePattern: "^_",
|
||||||
|
varsIgnorePattern: "^_"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"prettier/prettier": [
|
||||||
|
"error",
|
||||||
|
{
|
||||||
|
endOfLine: "auto"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
node_modules
|
||||||
|
.DS_Store
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
.eslintcache
|
||||||
|
report.html
|
||||||
|
|
||||||
|
yarn.lock
|
||||||
|
npm-debug.log*
|
||||||
|
.pnpm-error.log*
|
||||||
|
.pnpm-debug.log
|
||||||
|
tests/**/coverage/
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
tsconfig.tsbuildinfo
|
||||||
6
.husky/commit-msg
Normal file
6
.husky/commit-msg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
|
||||||
|
# shellcheck source=./_/husky.sh
|
||||||
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
|
||||||
|
npx --no-install commitlint --edit "$1"
|
||||||
9
.husky/common.sh
Normal file
9
.husky/common.sh
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
command_exists () {
|
||||||
|
command -v "$1" >/dev/null 2>&1
|
||||||
|
}
|
||||||
|
|
||||||
|
# Workaround for Windows 10, Git Bash and Pnpm
|
||||||
|
if command_exists winpty && test -t 1; then
|
||||||
|
exec < /dev/tty
|
||||||
|
fi
|
||||||
8
.husky/lintstagedrc.js
Normal file
8
.husky/lintstagedrc.js
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
module.exports = {
|
||||||
|
"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
|
||||||
|
"{!(package)*.json}": ["prettier --write--parser json"],
|
||||||
|
"package.json": ["prettier --write"],
|
||||||
|
"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
|
||||||
|
"*.{vue,css,scss,postcss,less}": ["stylelint --fix", "prettier --write"],
|
||||||
|
"*.md": ["prettier --write"]
|
||||||
|
};
|
||||||
10
.husky/pre-commit
Normal file
10
.husky/pre-commit
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
#!/bin/sh
|
||||||
|
. "$(dirname "$0")/_/husky.sh"
|
||||||
|
. "$(dirname "$0")/common.sh"
|
||||||
|
|
||||||
|
[ -n "$CI" ] && exit 0
|
||||||
|
|
||||||
|
# Format and submit code according to lintstagedrc.js configuration
|
||||||
|
npm run lint:lint-staged
|
||||||
|
|
||||||
|
npm run lint:pretty
|
||||||
11
.markdownlint.json
Normal file
11
.markdownlint.json
Normal file
@ -0,0 +1,11 @@
|
|||||||
|
{
|
||||||
|
"default": true,
|
||||||
|
"MD003": false,
|
||||||
|
"MD033": false,
|
||||||
|
"MD013": false,
|
||||||
|
"MD001": false,
|
||||||
|
"MD025": false,
|
||||||
|
"MD024": false,
|
||||||
|
"MD007": { "indent": 4 },
|
||||||
|
"no-hard-tabs": false
|
||||||
|
}
|
||||||
3
.npmrc
Normal file
3
.npmrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
shamefully-hoist=true
|
||||||
|
strict-peer-dependencies=false
|
||||||
|
shell-emulator=true
|
||||||
6
.prettierrc.js
Normal file
6
.prettierrc.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
module.exports = {
|
||||||
|
bracketSpacing: true,
|
||||||
|
singleQuote: false,
|
||||||
|
arrowParens: "avoid",
|
||||||
|
trailingComma: "none"
|
||||||
|
};
|
||||||
4
.stylelintignore
Normal file
4
.stylelintignore
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
/dist/*
|
||||||
|
/public/*
|
||||||
|
public/*
|
||||||
|
src/style/reset.scss
|
||||||
18
.vscode/extensions.json
vendored
Normal file
18
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"recommendations": [
|
||||||
|
"christian-kohler.path-intellisense",
|
||||||
|
"vscode-icons-team.vscode-icons",
|
||||||
|
"davidanson.vscode-markdownlint",
|
||||||
|
"ms-azuretools.vscode-docker",
|
||||||
|
"stylelint.vscode-stylelint",
|
||||||
|
"bradlc.vscode-tailwindcss",
|
||||||
|
"dbaeumer.vscode-eslint",
|
||||||
|
"esbenp.prettier-vscode",
|
||||||
|
"redhat.vscode-yaml",
|
||||||
|
"csstools.postcss",
|
||||||
|
"mikestead.dotenv",
|
||||||
|
"eamodio.gitlens",
|
||||||
|
"antfu.iconify",
|
||||||
|
"Vue.volar"
|
||||||
|
]
|
||||||
|
}
|
||||||
31
.vscode/settings.json
vendored
Normal file
31
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"editor.formatOnType": true,
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"[vue]": {
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
},
|
||||||
|
"editor.tabSize": 2,
|
||||||
|
"editor.formatOnPaste": true,
|
||||||
|
"editor.guides.bracketPairs": "active",
|
||||||
|
"files.autoSave": "afterDelay",
|
||||||
|
"git.confirmSync": false,
|
||||||
|
"workbench.startupEditor": "newUntitledFile",
|
||||||
|
"editor.suggestSelection": "first",
|
||||||
|
"editor.acceptSuggestionOnCommitCharacter": false,
|
||||||
|
"css.lint.propertyIgnoredDueToDisplay": "ignore",
|
||||||
|
"editor.quickSuggestions": {
|
||||||
|
"other": true,
|
||||||
|
"comments": true,
|
||||||
|
"strings": true
|
||||||
|
},
|
||||||
|
"files.associations": {
|
||||||
|
"editor.snippetSuggestions": "top"
|
||||||
|
},
|
||||||
|
"[css]": {
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
},
|
||||||
|
"editor.codeActionsOnSave": {
|
||||||
|
"source.fixAll.eslint": true
|
||||||
|
},
|
||||||
|
"iconify.excludes": ["el"]
|
||||||
|
}
|
||||||
22
.vscode/vue3.0.code-snippets
vendored
Normal file
22
.vscode/vue3.0.code-snippets
vendored
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"Vue3.0快速生成模板": {
|
||||||
|
"scope": "vue",
|
||||||
|
"prefix": "Vue3.0",
|
||||||
|
"body": [
|
||||||
|
"<template>",
|
||||||
|
"\t<div>test</div>",
|
||||||
|
"</template>\n",
|
||||||
|
"<script lang='ts'>",
|
||||||
|
"export default {",
|
||||||
|
"\tsetup() {",
|
||||||
|
"\t\treturn {}",
|
||||||
|
"\t}",
|
||||||
|
"}",
|
||||||
|
"</script>\n",
|
||||||
|
"<style lang='scss' scoped>\n",
|
||||||
|
"</style>",
|
||||||
|
"$2"
|
||||||
|
],
|
||||||
|
"description": "Vue3.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
17
.vscode/vue3.2.code-snippets
vendored
Normal file
17
.vscode/vue3.2.code-snippets
vendored
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
{
|
||||||
|
"Vue3.2+快速生成模板": {
|
||||||
|
"scope": "vue",
|
||||||
|
"prefix": "Vue3.2+",
|
||||||
|
"body": [
|
||||||
|
"<script setup lang='ts'>",
|
||||||
|
"</script>\n",
|
||||||
|
"<template>",
|
||||||
|
"\t<div>test</div>",
|
||||||
|
"</template>\n",
|
||||||
|
"<style lang='scss' scoped>\n",
|
||||||
|
"</style>",
|
||||||
|
"$2"
|
||||||
|
],
|
||||||
|
"description": "Vue3.2+"
|
||||||
|
}
|
||||||
|
}
|
||||||
20
.vscode/vue3.3.code-snippets
vendored
Normal file
20
.vscode/vue3.3.code-snippets
vendored
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"Vue3.3+defineOptions快速生成模板": {
|
||||||
|
"scope": "vue",
|
||||||
|
"prefix": "Vue3.3+",
|
||||||
|
"body": [
|
||||||
|
"<script setup lang='ts'>",
|
||||||
|
"defineOptions({",
|
||||||
|
"\tname: ''",
|
||||||
|
"})",
|
||||||
|
"</script>\n",
|
||||||
|
"<template>",
|
||||||
|
"\t<div>test</div>",
|
||||||
|
"</template>\n",
|
||||||
|
"<style lang='scss' scoped>\n",
|
||||||
|
"</style>",
|
||||||
|
"$2"
|
||||||
|
],
|
||||||
|
"description": "Vue3.3+defineOptions快速生成模板"
|
||||||
|
}
|
||||||
|
}
|
||||||
20
Dockerfile
Normal file
20
Dockerfile
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
FROM node:16-alpine as build-stage
|
||||||
|
|
||||||
|
WORKDIR /app
|
||||||
|
RUN corepack enable
|
||||||
|
RUN corepack prepare pnpm@7.32.1 --activate
|
||||||
|
|
||||||
|
RUN npm config set registry https://registry.npmmirror.com
|
||||||
|
|
||||||
|
COPY .npmrc package.json pnpm-lock.yaml ./
|
||||||
|
RUN pnpm install --frozen-lockfile
|
||||||
|
|
||||||
|
COPY . .
|
||||||
|
RUN pnpm build
|
||||||
|
|
||||||
|
FROM nginx:stable-alpine as production-stage
|
||||||
|
|
||||||
|
COPY --from=build-stage /app/dist /usr/share/nginx/html
|
||||||
|
EXPOSE 80
|
||||||
|
|
||||||
|
CMD ["nginx", "-g", "daemon off;"]
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) 2020-present, pure-admin
|
||||||
|
|
||||||
|
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.
|
||||||
36
README.en-US.md
Normal file
36
README.en-US.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
<h1>vue-pure-admin Lite Edition（no i18n version）</h1>
|
||||||
|
|
||||||
|
[](LICENSE)
|
||||||
|
|
||||||
|
**English** | [中文](./README.md)
|
||||||
|
|
||||||
|
## Introduce
|
||||||
|
|
||||||
|
The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
|
||||||
|
|
||||||
|
## Supporting Video
|
||||||
|
|
||||||
|
- [Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||||
|
- [Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
|
||||||
|
|
||||||
|
## Docs
|
||||||
|
|
||||||
|
- [documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||||
|
|
||||||
|
## Preview
|
||||||
|
|
||||||
|
- [Click me to view the preview station](https://pure-admin-thin.netlify.app/#/login)
|
||||||
|
|
||||||
|
## Maintainer
|
||||||
|
|
||||||
|
[xiaoxian521](https://github.com/xiaoxian521)
|
||||||
|
|
||||||
|
## ⚠️ Attention
|
||||||
|
|
||||||
|
- The Lite version does not accept any issues and prs. If you have any questions, please go to the full version [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) to mention, thank you!
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
In principle, no fees and copyrights are charged, and it is commercially available, but if you need secondary open source (such as using this platform for secondary development and open source, the front-end code must be open source and free), please contact the author for permission! (Free, just take a record)
|
||||||
|
|
||||||
|
[MIT © 2020-present, pure-admin](./LICENSE)
|
||||||
40
README.md
Normal file
40
README.md
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<h1>vue-pure-admin精简版（非国际化版本）</h1>
|
||||||
|
|
||||||
|
[](LICENSE)
|
||||||
|
|
||||||
|
**中文** | [English](./README.en-US.md)
|
||||||
|
|
||||||
|
## 介绍
|
||||||
|
|
||||||
|
精简版是基于 [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin) 提炼出的架子，包含主体功能，更适合实际项目开发，打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`，并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后，打包大小低于 `350kb`
|
||||||
|
|
||||||
|
## 版本选择
|
||||||
|
|
||||||
|
当前是非国际化版本，如果您需要国际化版本 [请点击](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
|
||||||
|
|
||||||
|
## 配套视频
|
||||||
|
|
||||||
|
- [点我查看教程](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||||
|
- [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
|
||||||
|
|
||||||
|
## 配套保姆级文档
|
||||||
|
|
||||||
|
- [查看文档](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||||
|
|
||||||
|
## 预览
|
||||||
|
|
||||||
|
- [查看预览](https://pure-admin-thin.netlify.app/#/login)
|
||||||
|
|
||||||
|
## 维护者
|
||||||
|
|
||||||
|
[xiaoxian521](https://github.com/xiaoxian521)
|
||||||
|
|
||||||
|
## ⚠️ 注意
|
||||||
|
|
||||||
|
- 精简版不接受任何 `issues` 和 `pr`，如果有问题请到完整版 [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) 去提，谢谢！
|
||||||
|
|
||||||
|
## 许可证
|
||||||
|
|
||||||
|
原则上不收取任何费用及版权，可商用，不过如需二次开源（比如用此平台二次开发并开源，要求前端代码必须开源免费）请联系作者获取许可！（免费，走个记录而已）
|
||||||
|
|
||||||
|
[MIT © 2020-present, pure-admin](./LICENSE)
|
||||||
56
build/cdn.ts
Normal file
56
build/cdn.ts
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import { Plugin as importToCDN } from "vite-plugin-cdn-import";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 打包时采用`cdn`模式，仅限外网使用（默认不采用，如果需要采用cdn模式，请在 .env.production 文件，将 VITE_CDN 设置成true）
|
||||||
|
* 平台采用国内cdn：https://www.bootcdn.cn，当然你也可以选择 https://unpkg.com 或者 https://www.jsdelivr.com
|
||||||
|
* 提醒：mockjs不能用cdn模式引入，会报错。正确的方式是，生产环境删除mockjs，使用真实的后端请求
|
||||||
|
* 注意：上面提到的仅限外网使用也不是完全肯定的，如果你们公司内网部署的有相关js、css文件，也可以将下面配置对应改一下，整一套内网版cdn
|
||||||
|
*/
|
||||||
|
export const cdn = importToCDN({
|
||||||
|
//（prodUrl解释： name: 对应下面modules的name，version: 自动读取本地package.json中dependencies依赖中对应包的版本号，path: 对应下面modules的path，当然也可写完整路径，会替换prodUrl）
|
||||||
|
prodUrl: "https://cdn.bootcdn.net/ajax/libs/{name}/{version}/{path}",
|
||||||
|
modules: [
|
||||||
|
{
|
||||||
|
name: "vue",
|
||||||
|
var: "Vue",
|
||||||
|
path: "vue.global.prod.min.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "vue-router",
|
||||||
|
var: "VueRouter",
|
||||||
|
path: "vue-router.global.min.js"
|
||||||
|
},
|
||||||
|
// 项目中没有直接安装vue-demi，但是pinia用到了，所以需要在引入pinia前引入vue-demi（https://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77）
|
||||||
|
{
|
||||||
|
name: "vue-demi",
|
||||||
|
var: "VueDemi",
|
||||||
|
path: "index.iife.min.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "pinia",
|
||||||
|
var: "Pinia",
|
||||||
|
path: "pinia.iife.min.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "element-plus",
|
||||||
|
var: "ElementPlus",
|
||||||
|
path: "index.full.min.js",
|
||||||
|
css: "index.min.css"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "axios",
|
||||||
|
var: "axios",
|
||||||
|
path: "axios.min.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "dayjs",
|
||||||
|
var: "dayjs",
|
||||||
|
path: "dayjs.min.js"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "echarts",
|
||||||
|
var: "echarts",
|
||||||
|
path: "echarts.min.js"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
});
|
||||||
63
build/compress.ts
Normal file
63
build/compress.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import type { Plugin } from "vite";
|
||||||
|
import { isArray } from "@pureadmin/utils";
|
||||||
|
import compressPlugin from "vite-plugin-compression";
|
||||||
|
|
||||||
|
export const configCompressPlugin = (
|
||||||
|
compress: ViteCompression
|
||||||
|
): Plugin | Plugin[] => {
|
||||||
|
if (compress === "none") return null;
|
||||||
|
|
||||||
|
const gz = {
|
||||||
|
// 生成的压缩包后缀
|
||||||
|
ext: ".gz",
|
||||||
|
// 体积大于threshold才会被压缩
|
||||||
|
threshold: 0,
|
||||||
|
// 默认压缩.js|mjs|json|css|html后缀文件，设置成true，压缩全部文件
|
||||||
|
filter: () => true,
|
||||||
|
// 压缩后是否删除原始文件
|
||||||
|
deleteOriginFile: false
|
||||||
|
};
|
||||||
|
const br = {
|
||||||
|
ext: ".br",
|
||||||
|
algorithm: "brotliCompress",
|
||||||
|
threshold: 0,
|
||||||
|
filter: () => true,
|
||||||
|
deleteOriginFile: false
|
||||||
|
};
|
||||||
|
|
||||||
|
const codeList = [
|
||||||
|
{ k: "gzip", v: gz },
|
||||||
|
{ k: "brotli", v: br },
|
||||||
|
{ k: "both", v: [gz, br] }
|
||||||
|
];
|
||||||
|
|
||||||
|
const plugins: Plugin[] = [];
|
||||||
|
|
||||||
|
codeList.forEach(item => {
|
||||||
|
if (compress.includes(item.k)) {
|
||||||
|
if (compress.includes("clear")) {
|
||||||
|
if (isArray(item.v)) {
|
||||||
|
item.v.forEach(vItem => {
|
||||||
|
plugins.push(
|
||||||
|
compressPlugin(Object.assign(vItem, { deleteOriginFile: true }))
|
||||||
|
);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
plugins.push(
|
||||||
|
compressPlugin(Object.assign(item.v, { deleteOriginFile: true }))
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (isArray(item.v)) {
|
||||||
|
item.v.forEach(vItem => {
|
||||||
|
plugins.push(compressPlugin(vItem));
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
plugins.push(compressPlugin(item.v));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return plugins;
|
||||||
|
};
|
||||||
31
build/index.ts
Normal file
31
build/index.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/** 处理环境变量 */
|
||||||
|
const warpperEnv = (envConf: Recordable): ViteEnv => {
|
||||||
|
/** 此处为默认值 */
|
||||||
|
const ret: ViteEnv = {
|
||||||
|
VITE_PORT: 8848,
|
||||||
|
VITE_PUBLIC_PATH: "",
|
||||||
|
VITE_ROUTER_HISTORY: "",
|
||||||
|
VITE_CDN: false,
|
||||||
|
VITE_HIDE_HOME: "false",
|
||||||
|
VITE_COMPRESSION: "none"
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const envName of Object.keys(envConf)) {
|
||||||
|
let realName = envConf[envName].replace(/\\n/g, "\n");
|
||||||
|
realName =
|
||||||
|
realName === "true" ? true : realName === "false" ? false : realName;
|
||||||
|
|
||||||
|
if (envName === "VITE_PORT") {
|
||||||
|
realName = Number(realName);
|
||||||
|
}
|
||||||
|
ret[envName] = realName;
|
||||||
|
if (typeof realName === "string") {
|
||||||
|
process.env[envName] = realName;
|
||||||
|
} else if (typeof realName === "object") {
|
||||||
|
process.env[envName] = JSON.stringify(realName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return ret;
|
||||||
|
};
|
||||||
|
|
||||||
|
export { warpperEnv };
|
||||||
53
build/info.ts
Normal file
53
build/info.ts
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import type { Plugin } from "vite";
|
||||||
|
import dayjs, { Dayjs } from "dayjs";
|
||||||
|
import utils from "@pureadmin/utils";
|
||||||
|
import duration from "dayjs/plugin/duration";
|
||||||
|
import { green, blue, bold } from "picocolors";
|
||||||
|
dayjs.extend(duration);
|
||||||
|
|
||||||
|
export function viteBuildInfo(): Plugin {
|
||||||
|
let config: { command: string };
|
||||||
|
let startTime: Dayjs;
|
||||||
|
let endTime: Dayjs;
|
||||||
|
let outDir: string;
|
||||||
|
return {
|
||||||
|
name: "vite:buildInfo",
|
||||||
|
configResolved(resolvedConfig) {
|
||||||
|
config = resolvedConfig;
|
||||||
|
outDir = resolvedConfig.build?.outDir ?? "dist";
|
||||||
|
},
|
||||||
|
buildStart() {
|
||||||
|
console.log(
|
||||||
|
bold(
|
||||||
|
green(
|
||||||
|
`👏欢迎使用${blue(
|
||||||
|
"[vue-pure-admin]"
|
||||||
|
)}，如果您感觉不错，记得点击后面链接给个star哦💖 https://github.com/pure-admin/vue-pure-admin`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
if (config.command === "build") {
|
||||||
|
startTime = dayjs(new Date());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
closeBundle() {
|
||||||
|
if (config.command === "build") {
|
||||||
|
endTime = dayjs(new Date());
|
||||||
|
utils.getPackageSize({
|
||||||
|
folder: outDir,
|
||||||
|
callback: (size: string) => {
|
||||||
|
console.log(
|
||||||
|
bold(
|
||||||
|
green(
|
||||||
|
`🎉恭喜打包完成（总用时${dayjs
|
||||||
|
.duration(endTime.diff(startTime))
|
||||||
|
.format("mm分ss秒")}，打包后的大小为${size}）`
|
||||||
|
)
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
31
build/optimize.ts
Normal file
31
build/optimize.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
/**
|
||||||
|
* 此文件作用于 `vite.config.ts` 的 `optimizeDeps.include` 依赖预构建配置项
|
||||||
|
* 依赖预构建，`vite` 启动时会将下面 include 里的模块，编译成 esm 格式并缓存到 node_modules/.vite 文件夹，页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存，如果没有会读取本地缓存并按需加载
|
||||||
|
* 尤其当您禁用浏览器缓存时（这种情况只应该发生在调试阶段）必须将对应模块加入到 include里，否则会遇到开发环境切换页面卡顿的问题（vite 会认为它是一个新的依赖包会重新加载并强制刷新页面），因为它既无法使用浏览器缓存，又没有在本地 node_modules/.vite 里缓存
|
||||||
|
* 温馨提示：如果您使用的第三方库是全局引入，也就是引入到 src/main.ts 文件里，就不需要再添加到 include 里了，因为 vite 会自动将它们缓存到 node_modules/.vite
|
||||||
|
*/
|
||||||
|
const include = [
|
||||||
|
"qs",
|
||||||
|
"mitt",
|
||||||
|
"dayjs",
|
||||||
|
"axios",
|
||||||
|
"pinia",
|
||||||
|
"js-cookie",
|
||||||
|
"sortablejs",
|
||||||
|
"pinyin-pro",
|
||||||
|
"@vueuse/core",
|
||||||
|
"@pureadmin/utils",
|
||||||
|
"responsive-storage"
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 在预构建中强制排除的依赖项
|
||||||
|
* 温馨提示：所有以 `@iconify-icons/` 开头引入的的本地图标模块，都应该加入到下面的 `exclude` 里，因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入，不需要预构建，直接让浏览器加载就好
|
||||||
|
*/
|
||||||
|
const exclude = [
|
||||||
|
"@iconify-icons/ep",
|
||||||
|
"@iconify-icons/ri",
|
||||||
|
"@pureadmin/theme/dist/browser-utils"
|
||||||
|
];
|
||||||
|
|
||||||
|
export { include, exclude };
|
||||||
56
build/plugins.ts
Normal file
56
build/plugins.ts
Normal file
@ -0,0 +1,56 @@
|
|||||||
|
import { cdn } from "./cdn";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
import { viteBuildInfo } from "./info";
|
||||||
|
import svgLoader from "vite-svg-loader";
|
||||||
|
import vueJsx from "@vitejs/plugin-vue-jsx";
|
||||||
|
import { viteMockServe } from "vite-plugin-mock";
|
||||||
|
import { configCompressPlugin } from "./compress";
|
||||||
|
// import ElementPlus from "unplugin-element-plus/vite";
|
||||||
|
import { visualizer } from "rollup-plugin-visualizer";
|
||||||
|
import removeConsole from "vite-plugin-remove-console";
|
||||||
|
import themePreprocessorPlugin from "@pureadmin/theme";
|
||||||
|
import { genScssMultipleScopeVars } from "../src/layout/theme";
|
||||||
|
|
||||||
|
export function getPluginsList(
|
||||||
|
command: string,
|
||||||
|
VITE_CDN: boolean,
|
||||||
|
VITE_COMPRESSION: ViteCompression
|
||||||
|
) {
|
||||||
|
const prodMock = true;
|
||||||
|
const lifecycle = process.env.npm_lifecycle_event;
|
||||||
|
return [
|
||||||
|
vue(),
|
||||||
|
// jsx、tsx语法支持
|
||||||
|
vueJsx(),
|
||||||
|
VITE_CDN ? cdn : null,
|
||||||
|
configCompressPlugin(VITE_COMPRESSION),
|
||||||
|
// 线上环境删除console
|
||||||
|
removeConsole({ external: ["src/assets/iconfont/iconfont.js"] }),
|
||||||
|
viteBuildInfo(),
|
||||||
|
// 自定义主题
|
||||||
|
themePreprocessorPlugin({
|
||||||
|
scss: {
|
||||||
|
multipleScopeVars: genScssMultipleScopeVars(),
|
||||||
|
extract: true
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
// svg组件化支持
|
||||||
|
svgLoader(),
|
||||||
|
// ElementPlus({}),
|
||||||
|
// mock支持
|
||||||
|
viteMockServe({
|
||||||
|
mockPath: "mock",
|
||||||
|
localEnabled: command === "serve",
|
||||||
|
prodEnabled: command !== "serve" && prodMock,
|
||||||
|
injectCode: `
|
||||||
|
import { setupProdMockServer } from './mockProdServer';
|
||||||
|
setupProdMockServer();
|
||||||
|
`,
|
||||||
|
logger: false
|
||||||
|
}),
|
||||||
|
// 打包分析
|
||||||
|
lifecycle === "report"
|
||||||
|
? visualizer({ open: true, brotliSize: true, filename: "report.html" })
|
||||||
|
: null
|
||||||
|
];
|
||||||
|
}
|
||||||
32
commitlint.config.js
Normal file
32
commitlint.config.js
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
module.exports = {
|
||||||
|
ignores: [commit => commit.includes("init")],
|
||||||
|
extends: ["@commitlint/config-conventional"],
|
||||||
|
rules: {
|
||||||
|
"body-leading-blank": [2, "always"],
|
||||||
|
"footer-leading-blank": [1, "always"],
|
||||||
|
"header-max-length": [2, "always", 108],
|
||||||
|
"subject-empty": [2, "never"],
|
||||||
|
"type-empty": [2, "never"],
|
||||||
|
"type-enum": [
|
||||||
|
2,
|
||||||
|
"always",
|
||||||
|
[
|
||||||
|
"feat",
|
||||||
|
"fix",
|
||||||
|
"perf",
|
||||||
|
"style",
|
||||||
|
"docs",
|
||||||
|
"test",
|
||||||
|
"refactor",
|
||||||
|
"build",
|
||||||
|
"ci",
|
||||||
|
"chore",
|
||||||
|
"revert",
|
||||||
|
"wip",
|
||||||
|
"workflow",
|
||||||
|
"types",
|
||||||
|
"release"
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
};
|
||||||
87
index.html
Normal file
87
index.html
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
|
||||||
|
<meta name="renderer" content="webkit" />
|
||||||
|
<meta
|
||||||
|
name="viewport"
|
||||||
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
|
||||||
|
/>
|
||||||
|
<title>pure-admin-thin</title>
|
||||||
|
<link rel="icon" href="/favicon.ico" />
|
||||||
|
<script>
|
||||||
|
window.process = {};
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body,
|
||||||
|
#app {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader,
|
||||||
|
.loader::before,
|
||||||
|
.loader::after {
|
||||||
|
width: 2.5em;
|
||||||
|
height: 2.5em;
|
||||||
|
border-radius: 50%;
|
||||||
|
animation: load-animation 1.8s infinite ease-in-out;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader {
|
||||||
|
position: relative;
|
||||||
|
top: 0;
|
||||||
|
margin: 80px auto;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #406eeb;
|
||||||
|
text-indent: -9999em;
|
||||||
|
transform: translateZ(0);
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
animation-delay: -0.16s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader::before,
|
||||||
|
.loader::after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader::before {
|
||||||
|
left: -3.5em;
|
||||||
|
animation-delay: -0.32s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loader::after {
|
||||||
|
left: 3.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes load-animation {
|
||||||
|
0%,
|
||||||
|
80%,
|
||||||
|
100% {
|
||||||
|
box-shadow: 0 2.5em 0 -1.3em;
|
||||||
|
}
|
||||||
|
|
||||||
|
40% {
|
||||||
|
box-shadow: 0 2.5em 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="loader"></div>
|
||||||
|
</div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
49
mock/asyncRoutes.ts
Normal file
49
mock/asyncRoutes.ts
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
// 模拟后端动态生成路由
|
||||||
|
import { MockMethod } from "vite-plugin-mock";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* roles：页面级别权限，这里模拟二种 "admin"、"common"
|
||||||
|
* admin：管理员角色
|
||||||
|
* common：普通角色
|
||||||
|
*/
|
||||||
|
|
||||||
|
const permissionRouter = {
|
||||||
|
path: "/permission",
|
||||||
|
meta: {
|
||||||
|
title: "权限管理",
|
||||||
|
icon: "lollipop",
|
||||||
|
rank: 10
|
||||||
|
},
|
||||||
|
children: [
|
||||||
|
{
|
||||||
|
path: "/permission/page/index",
|
||||||
|
name: "PermissionPage",
|
||||||
|
meta: {
|
||||||
|
title: "页面权限",
|
||||||
|
roles: ["admin", "common"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: "/permission/button/index",
|
||||||
|
name: "PermissionButton",
|
||||||
|
meta: {
|
||||||
|
title: "按钮权限",
|
||||||
|
roles: ["admin", "common"],
|
||||||
|
auths: ["btn_add", "btn_edit", "btn_delete"]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
url: "/getAsyncRoutes",
|
||||||
|
method: "get",
|
||||||
|
response: () => {
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: [permissionRouter]
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
] as MockMethod[];
|
||||||
36
mock/login.ts
Normal file
36
mock/login.ts
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
// 根据角色动态生成路由
|
||||||
|
import { MockMethod } from "vite-plugin-mock";
|
||||||
|
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
url: "/login",
|
||||||
|
method: "post",
|
||||||
|
response: ({ body }) => {
|
||||||
|
if (body.username === "admin") {
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
username: "admin",
|
||||||
|
// 一个用户可能有多个角色
|
||||||
|
roles: ["admin"],
|
||||||
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
|
||||||
|
refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh",
|
||||||
|
expires: "2023/10/30 00:00:00"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
username: "common",
|
||||||
|
// 一个用户可能有多个角色
|
||||||
|
roles: ["common"],
|
||||||
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
|
||||||
|
refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
|
||||||
|
expires: "2023/10/30 00:00:00"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
] as MockMethod[];
|
||||||
27
mock/refreshToken.ts
Normal file
27
mock/refreshToken.ts
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
import { MockMethod } from "vite-plugin-mock";
|
||||||
|
|
||||||
|
// 模拟刷新token接口
|
||||||
|
export default [
|
||||||
|
{
|
||||||
|
url: "/refreshToken",
|
||||||
|
method: "post",
|
||||||
|
response: ({ body }) => {
|
||||||
|
if (body.refreshToken) {
|
||||||
|
return {
|
||||||
|
success: true,
|
||||||
|
data: {
|
||||||
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.newAdmin",
|
||||||
|
refreshToken: "eyJhbGciOiJIUzUxMiJ9.newAdminRefresh",
|
||||||
|
// `expires`选择这种日期格式是为了方便调试，后端直接设置时间戳或许更方便（每次都应该递增）。如果后端返回的是时间戳格式，前端开发请来到这个目录`src/utils/auth.ts`，把第`38`行的代码换成expires = data.expires即可。
|
||||||
|
expires: "2023/10/30 23:59:59"
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
return {
|
||||||
|
success: false,
|
||||||
|
data: {}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
] as MockMethod[];
|
||||||
135
package.json
Normal file
135
package.json
Normal file
@ -0,0 +1,135 @@
|
|||||||
|
{
|
||||||
|
"name": "pure-admin-thin",
|
||||||
|
"version": "4.5.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
|
||||||
|
"serve": "pnpm dev",
|
||||||
|
"build": "rimraf dist && NODE_OPTIONS=--max-old-space-size=8192 vite build",
|
||||||
|
"build:staging": "rimraf dist && vite build --mode staging",
|
||||||
|
"report": "rimraf dist && vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"preview:build": "pnpm build && vite preview",
|
||||||
|
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
|
||||||
|
"svgo": "svgo -f src/assets/svg -o src/assets/svg",
|
||||||
|
"cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
|
||||||
|
"clean:cache": "rimraf node_modules && rimraf .eslintcache && pnpm install",
|
||||||
|
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
|
||||||
|
"lint:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
|
||||||
|
"lint:stylelint": "stylelint \"**/*.{html,vue,css,scss}\" --fix --cache --cache-location node_modules/.cache/stylelint/",
|
||||||
|
"lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
|
||||||
|
"lint:pretty": "pretty-quick --staged",
|
||||||
|
"lint": "pnpm lint:eslint && pnpm lint:prettier && pnpm lint:stylelint",
|
||||||
|
"prepare": "husky install",
|
||||||
|
"preinstall": "npx only-allow pnpm"
|
||||||
|
},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"not ie 11",
|
||||||
|
"not op_mini all"
|
||||||
|
],
|
||||||
|
"dependencies": {
|
||||||
|
"@pureadmin/descriptions": "^1.1.1",
|
||||||
|
"@pureadmin/table": "^2.3.2",
|
||||||
|
"@pureadmin/utils": "^1.9.6",
|
||||||
|
"@vueuse/core": "^10.2.0",
|
||||||
|
"@vueuse/motion": "^2.0.0",
|
||||||
|
"animate.css": "^4.1.1",
|
||||||
|
"axios": "^1.4.0",
|
||||||
|
"dayjs": "^1.11.8",
|
||||||
|
"echarts": "^5.4.2",
|
||||||
|
"element-plus": "2.3.6",
|
||||||
|
"js-cookie": "^3.0.5",
|
||||||
|
"mitt": "^3.0.0",
|
||||||
|
"mockjs": "^1.1.0",
|
||||||
|
"nprogress": "^0.2.0",
|
||||||
|
"path": "^0.12.7",
|
||||||
|
"pinia": "^2.1.4",
|
||||||
|
"pinyin-pro": "^3.15.2",
|
||||||
|
"qs": "^6.11.2",
|
||||||
|
"responsive-storage": "^2.2.0",
|
||||||
|
"sortablejs": "^1.15.0",
|
||||||
|
"vue": "^3.3.4",
|
||||||
|
"vue-router": "^4.2.2",
|
||||||
|
"vue-types": "^5.1.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@commitlint/cli": "^17.6.6",
|
||||||
|
"@commitlint/config-conventional": "^17.6.6",
|
||||||
|
"@iconify-icons/ep": "^1.2.12",
|
||||||
|
"@iconify-icons/ri": "^1.2.9",
|
||||||
|
"@iconify/vue": "^4.1.1",
|
||||||
|
"@pureadmin/theme": "^3.1.0",
|
||||||
|
"@types/js-cookie": "^3.0.3",
|
||||||
|
"@types/mockjs": "^1.0.7",
|
||||||
|
"@types/node": "^20.3.1",
|
||||||
|
"@types/nprogress": "0.2.0",
|
||||||
|
"@types/qs": "^6.9.7",
|
||||||
|
"@types/sortablejs": "^1.15.1",
|
||||||
|
"@typescript-eslint/eslint-plugin": "^5.60.0",
|
||||||
|
"@typescript-eslint/parser": "^5.60.0",
|
||||||
|
"@vitejs/plugin-vue": "^4.2.3",
|
||||||
|
"@vitejs/plugin-vue-jsx": "^3.0.1",
|
||||||
|
"@vue/eslint-config-prettier": "^7.1.0",
|
||||||
|
"@vue/eslint-config-typescript": "^11.0.3",
|
||||||
|
"autoprefixer": "^10.4.14",
|
||||||
|
"cloc": "^2.11.0",
|
||||||
|
"cssnano": "^6.0.1",
|
||||||
|
"eslint": "^8.43.0",
|
||||||
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
|
"eslint-plugin-vue": "^9.15.1",
|
||||||
|
"husky": "^8.0.3",
|
||||||
|
"lint-staged": "^13.2.2",
|
||||||
|
"picocolors": "^1.0.0",
|
||||||
|
"postcss": "^8.4.24",
|
||||||
|
"postcss-html": "^1.5.0",
|
||||||
|
"postcss-import": "^15.1.0",
|
||||||
|
"postcss-scss": "^4.0.6",
|
||||||
|
"prettier": "^2.8.8",
|
||||||
|
"pretty-quick": "^3.1.3",
|
||||||
|
"rimraf": "^5.0.1",
|
||||||
|
"rollup-plugin-visualizer": "^5.9.2",
|
||||||
|
"sass": "^1.63.6",
|
||||||
|
"sass-loader": "^13.3.2",
|
||||||
|
"stylelint": "^15.9.0",
|
||||||
|
"stylelint-config-html": "^1.1.0",
|
||||||
|
"stylelint-config-recess-order": "^4.2.0",
|
||||||
|
"stylelint-config-recommended": "^12.0.0",
|
||||||
|
"stylelint-config-recommended-scss": "^12.0.0",
|
||||||
|
"stylelint-config-recommended-vue": "^1.4.0",
|
||||||
|
"stylelint-config-standard": "^33.0.0",
|
||||||
|
"stylelint-config-standard-scss": "^9.0.0",
|
||||||
|
"stylelint-order": "^6.0.3",
|
||||||
|
"stylelint-prettier": "^3.0.0",
|
||||||
|
"stylelint-scss": "^5.0.1",
|
||||||
|
"svgo": "^3.0.2",
|
||||||
|
"tailwindcss": "^3.3.2",
|
||||||
|
"terser": "^5.18.1",
|
||||||
|
"typescript": "5.0.4",
|
||||||
|
"vite": "^4.3.9",
|
||||||
|
"vite-plugin-cdn-import": "^0.3.5",
|
||||||
|
"vite-plugin-compression": "^0.5.1",
|
||||||
|
"vite-plugin-mock": "2.9.6",
|
||||||
|
"vite-plugin-remove-console": "^2.1.1",
|
||||||
|
"vite-svg-loader": "^4.0.0",
|
||||||
|
"vue-eslint-parser": "^9.3.1",
|
||||||
|
"vue-tsc": "^1.8.1"
|
||||||
|
},
|
||||||
|
"pnpm": {
|
||||||
|
"peerDependencyRules": {
|
||||||
|
"ignoreMissing": [
|
||||||
|
"rollup",
|
||||||
|
"webpack",
|
||||||
|
"core-js"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"allowedDeprecatedVersions": {
|
||||||
|
"sourcemap-codec": "*",
|
||||||
|
"w3c-hr-time": "*",
|
||||||
|
"stable": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"repository": "git@github.com:pure-admin/pure-admin-thin.git",
|
||||||
|
"author": "xiaoxian521",
|
||||||
|
"license": "MIT"
|
||||||
|
}
|
||||||
9418
pnpm-lock.yaml
Normal file
9418
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
9
postcss.config.js
Normal file
9
postcss.config.js
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
module.exports = {
|
||||||
|
plugins: {
|
||||||
|
"postcss-import": {},
|
||||||
|
"tailwindcss/nesting": {},
|
||||||
|
tailwindcss: {},
|
||||||
|
autoprefixer: {},
|
||||||
|
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
|
||||||
|
}
|
||||||
|
};
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
1
public/logo.svg
Normal file
1
public/logo.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>
|
||||||
|
After Width: | Height: | Size: 712 B |
22
public/serverConfig.json
Normal file
22
public/serverConfig.json
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
{
|
||||||
|
"Version": "4.5.0",
|
||||||
|
"Title": "呓语",
|
||||||
|
"FixedHeader": true,
|
||||||
|
"HiddenSideBar": false,
|
||||||
|
"MultiTagsCache": false,
|
||||||
|
"KeepAlive": true,
|
||||||
|
"Layout": "vertical",
|
||||||
|
"Theme": "light",
|
||||||
|
"DarkMode": false,
|
||||||
|
"Grey": false,
|
||||||
|
"Weak": false,
|
||||||
|
"HideTabs": false,
|
||||||
|
"SidebarStatus": true,
|
||||||
|
"EpThemeColor": "#409EFF",
|
||||||
|
"ShowLogo": true,
|
||||||
|
"ShowModel": "smart",
|
||||||
|
"MenuArrowIconNoTransition": true,
|
||||||
|
"CachingAsyncRoutes": false,
|
||||||
|
"TooltipEffect": "light",
|
||||||
|
"ResponsiveStorageNameSpace": "responsive-"
|
||||||
|
}
|
||||||
25
src/App.vue
Normal file
25
src/App.vue
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<el-config-provider :locale="currentLocale">
|
||||||
|
<router-view />
|
||||||
|
<ReDialog />
|
||||||
|
</el-config-provider>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent } from "vue";
|
||||||
|
import { ElConfigProvider } from "element-plus";
|
||||||
|
import zhCn from "element-plus/lib/locale/lang/zh-cn";
|
||||||
|
import { ReDialog } from "@/components/ReDialog";
|
||||||
|
export default defineComponent({
|
||||||
|
name: "app",
|
||||||
|
components: {
|
||||||
|
[ElConfigProvider.name]: ElConfigProvider,
|
||||||
|
ReDialog
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
currentLocale() {
|
||||||
|
return zhCn;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
13
src/api/base.ts
Normal file
13
src/api/base.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
/**
|
||||||
|
* 基础返回类型
|
||||||
|
*/
|
||||||
|
export type BaseResponse<T> = {
|
||||||
|
/** 返回状态码 */
|
||||||
|
code: number;
|
||||||
|
/** 错误消息 */
|
||||||
|
message: string;
|
||||||
|
/** 错误信息 */
|
||||||
|
errMsg?: string;
|
||||||
|
/** 返回数据 */
|
||||||
|
data: T;
|
||||||
|
};
|
||||||
17
src/api/captcha.ts
Normal file
17
src/api/captcha.ts
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import { http } from "@/utils/http";
|
||||||
|
import { BaseResponse } from "@/api/base";
|
||||||
|
|
||||||
|
export type ImageCaptchaResult = {
|
||||||
|
/** 验证码id */
|
||||||
|
id: string;
|
||||||
|
/** 验证码图片 */
|
||||||
|
img: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取验证码图片 */
|
||||||
|
export const getImgCaptcha = () => {
|
||||||
|
return http.request<BaseResponse<ImageCaptchaResult>>(
|
||||||
|
"get",
|
||||||
|
"/admin/v1/captcha/img"
|
||||||
|
);
|
||||||
|
};
|
||||||
52
src/api/login.ts
Normal file
52
src/api/login.ts
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import { http } from "@/utils/http";
|
||||||
|
import { BaseResponse } from "@/api/base";
|
||||||
|
|
||||||
|
export type LoginResult = {
|
||||||
|
/** 用户Id */
|
||||||
|
id: string;
|
||||||
|
/** 用户名 */
|
||||||
|
username: string;
|
||||||
|
/** AccessToken */
|
||||||
|
access_token: string;
|
||||||
|
/** RefreshToken */
|
||||||
|
refresh_token: string;
|
||||||
|
/** 有效期 */
|
||||||
|
expires_in: number;
|
||||||
|
/** 过期时间 */
|
||||||
|
expires: Date;
|
||||||
|
/** token类型 */
|
||||||
|
token_type: string;
|
||||||
|
/** 当前登陆用户的角色 */
|
||||||
|
roles?: Array<string>;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 登录 */
|
||||||
|
export const getToken = (data: object) => {
|
||||||
|
return http.request<BaseResponse<LoginResult>>(
|
||||||
|
"post",
|
||||||
|
"/admin/v1/token",
|
||||||
|
{ data },
|
||||||
|
{
|
||||||
|
auth: {
|
||||||
|
username: "admin",
|
||||||
|
password: "kycgfS4sBjx2rPVD"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 刷新Token */
|
||||||
|
export const refreshToken = (refreshToken: string) => {
|
||||||
|
const data = { refresh_token: refreshToken };
|
||||||
|
return http.request<BaseResponse<LoginResult>>(
|
||||||
|
"post",
|
||||||
|
"/admin/v1/token/refresh",
|
||||||
|
{ data },
|
||||||
|
{
|
||||||
|
auth: {
|
||||||
|
username: "admin",
|
||||||
|
password: "kycgfS4sBjx2rPVD"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
};
|
||||||
10
src/api/routes.ts
Normal file
10
src/api/routes.ts
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
import { http } from "@/utils/http";
|
||||||
|
|
||||||
|
type Result = {
|
||||||
|
success: boolean;
|
||||||
|
data: Array<any>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getAsyncRoutes = () => {
|
||||||
|
return http.request<Result>("get", "/getAsyncRoutes");
|
||||||
|
};
|
||||||
BIN
src/assets/fonts/Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf
Normal file
BIN
src/assets/fonts/Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf
Normal file
Binary file not shown.
6
src/assets/fonts/index.scss
Normal file
6
src/assets/fonts/index.scss
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "阿里巴巴普惠体";
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 300;
|
||||||
|
src: url("./Alibaba_PuHuiTi_2.0_55_Regular_55_Regular.ttf");
|
||||||
|
}
|
||||||
26
src/assets/iconfont/iconfont.css
Normal file
26
src/assets/iconfont/iconfont.css
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 2208059 */
|
||||||
|
src: url("iconfont.woff2?t=1671895108120") format("woff2"),
|
||||||
|
url("iconfont.woff?t=1671895108120") format("woff"),
|
||||||
|
url("iconfont.ttf?t=1671895108120") format("truetype");
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-iconfont-tabs:before {
|
||||||
|
content: "\e63e";
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-iconfont-logo:before {
|
||||||
|
content: "\e620";
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-iconfont-new:before {
|
||||||
|
content: "\e615";
|
||||||
|
}
|
||||||
69
src/assets/iconfont/iconfont.js
Normal file
69
src/assets/iconfont/iconfont.js
Normal file
File diff suppressed because one or more lines are too long
30
src/assets/iconfont/iconfont.json
Normal file
30
src/assets/iconfont/iconfont.json
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
{
|
||||||
|
"id": "2208059",
|
||||||
|
"name": "pure-admin",
|
||||||
|
"font_family": "iconfont",
|
||||||
|
"css_prefix_text": "pure-iconfont-",
|
||||||
|
"description": "pure-admin-iconfont",
|
||||||
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "20594647",
|
||||||
|
"name": "Tabs",
|
||||||
|
"font_class": "tabs",
|
||||||
|
"unicode": "e63e",
|
||||||
|
"unicode_decimal": 58942
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "22129506",
|
||||||
|
"name": "PureLogo",
|
||||||
|
"font_class": "logo",
|
||||||
|
"unicode": "e620",
|
||||||
|
"unicode_decimal": 58912
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "7795615",
|
||||||
|
"name": "New",
|
||||||
|
"font_class": "new",
|
||||||
|
"unicode": "e615",
|
||||||
|
"unicode_decimal": 58901
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
BIN
src/assets/iconfont/iconfont.ttf
Normal file
BIN
src/assets/iconfont/iconfont.ttf
Normal file
Binary file not shown.
BIN
src/assets/iconfont/iconfont.woff
Normal file
BIN
src/assets/iconfont/iconfont.woff
Normal file
Binary file not shown.
BIN
src/assets/iconfont/iconfont.woff2
Normal file
BIN
src/assets/iconfont/iconfont.woff2
Normal file
Binary file not shown.
1
src/assets/login/avatar.svg
Normal file
1
src/assets/login/avatar.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>
|
||||||
|
After Width: | Height: | Size: 712 B |
BIN
src/assets/login/bg.png
Normal file
BIN
src/assets/login/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
1
src/assets/login/illustration.svg
Normal file
1
src/assets/login/illustration.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
1
src/assets/status/403.svg
Normal file
1
src/assets/status/403.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 10 KiB |
1
src/assets/status/404.svg
Normal file
1
src/assets/status/404.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 11 KiB |
1
src/assets/status/500.svg
Normal file
1
src/assets/status/500.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 13 KiB |
1
src/assets/svg/back_top.svg
Normal file
1
src/assets/svg/back_top.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
|
||||||
|
After Width: | Height: | Size: 588 B |
1
src/assets/svg/dark.svg
Normal file
1
src/assets/svg/dark.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>
|
||||||
|
After Width: | Height: | Size: 263 B |
1
src/assets/svg/day.svg
Normal file
1
src/assets/svg/day.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
|
||||||
|
After Width: | Height: | Size: 480 B |
1
src/assets/svg/enter_outlined.svg
Normal file
1
src/assets/svg/enter_outlined.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 352 B |
1
src/assets/svg/exit_screen.svg
Normal file
1
src/assets/svg/exit_screen.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg>
|
||||||
|
After Width: | Height: | Size: 348 B |
1
src/assets/svg/full_screen.svg
Normal file
1
src/assets/svg/full_screen.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>
|
||||||
|
After Width: | Height: | Size: 318 B |
1
src/assets/svg/keyboard_esc.svg
Normal file
1
src/assets/svg/keyboard_esc.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1V7m10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 381 B |
BIN
src/assets/user.jpg
Normal file
BIN
src/assets/user.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
5
src/components/ReAuth/index.ts
Normal file
5
src/components/ReAuth/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import auth from "./src/auth";
|
||||||
|
|
||||||
|
const Auth = auth;
|
||||||
|
|
||||||
|
export { Auth };
|
||||||
20
src/components/ReAuth/src/auth.tsx
Normal file
20
src/components/ReAuth/src/auth.tsx
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
import { defineComponent, Fragment } from "vue";
|
||||||
|
import { hasAuth } from "@/router/utils";
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Auth",
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: undefined,
|
||||||
|
default: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setup(props, { slots }) {
|
||||||
|
return () => {
|
||||||
|
if (!slots) return null;
|
||||||
|
return hasAuth(props.value) ? (
|
||||||
|
<Fragment>{slots.default?.()}</Fragment>
|
||||||
|
) : null;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
});
|
||||||
29
src/components/ReCol/index.ts
Normal file
29
src/components/ReCol/index.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { ElCol } from "element-plus";
|
||||||
|
import { h, defineComponent } from "vue";
|
||||||
|
|
||||||
|
// 封装element-plus的el-col组件
|
||||||
|
export default defineComponent({
|
||||||
|
name: "ReCol",
|
||||||
|
props: {
|
||||||
|
value: {
|
||||||
|
type: Number,
|
||||||
|
default: 24
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const attrs = this.$attrs;
|
||||||
|
const val = this.value;
|
||||||
|
return h(
|
||||||
|
ElCol,
|
||||||
|
{
|
||||||
|
xs: val,
|
||||||
|
sm: val,
|
||||||
|
md: val,
|
||||||
|
lg: val,
|
||||||
|
xl: val,
|
||||||
|
...attrs
|
||||||
|
},
|
||||||
|
{ default: () => this.$slots.default() }
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
64
src/components/ReDialog/index.ts
Normal file
64
src/components/ReDialog/index.ts
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
import { ref } from "vue";
|
||||||
|
import reDialog from "./index.vue";
|
||||||
|
import { useTimeoutFn } from "@vueuse/core";
|
||||||
|
import { withInstall } from "@pureadmin/utils";
|
||||||
|
import type {
|
||||||
|
EventType,
|
||||||
|
ArgsType,
|
||||||
|
DialogProps,
|
||||||
|
ButtonProps,
|
||||||
|
DialogOptions
|
||||||
|
} from "./type";
|
||||||
|
|
||||||
|
const dialogStore = ref<Array<DialogOptions>>([]);
|
||||||
|
|
||||||
|
/** 打开弹框 */
|
||||||
|
const addDialog = (options: DialogOptions) => {
|
||||||
|
const open = () =>
|
||||||
|
dialogStore.value.push(Object.assign(options, { visible: true }));
|
||||||
|
if (options?.openDelay) {
|
||||||
|
useTimeoutFn(() => {
|
||||||
|
open();
|
||||||
|
}, options.openDelay);
|
||||||
|
} else {
|
||||||
|
open();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 关闭弹框 */
|
||||||
|
const closeDialog = (options: DialogOptions, index: number, args?: any) => {
|
||||||
|
dialogStore.value.splice(index, 1);
|
||||||
|
options.closeCallBack && options.closeCallBack({ options, index, args });
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @description 更改弹框自身属性值
|
||||||
|
* @param value 属性值
|
||||||
|
* @param key 属性，默认`title`
|
||||||
|
* @param index 弹框索引（默认`0`，代表只有一个弹框，对于嵌套弹框要改哪个弹框的属性值就把该弹框索引赋给`index`）
|
||||||
|
*/
|
||||||
|
const updateDialog = (value: any, key = "title", index = 0) => {
|
||||||
|
dialogStore.value[index][key] = value;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 关闭所有弹框 */
|
||||||
|
const closeAllDialog = () => {
|
||||||
|
dialogStore.value = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
|
||||||
|
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L4
|
||||||
|
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L13
|
||||||
|
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L18
|
||||||
|
*/
|
||||||
|
const ReDialog = withInstall(reDialog);
|
||||||
|
|
||||||
|
export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
|
||||||
|
export {
|
||||||
|
ReDialog,
|
||||||
|
dialogStore,
|
||||||
|
addDialog,
|
||||||
|
closeDialog,
|
||||||
|
updateDialog,
|
||||||
|
closeAllDialog
|
||||||
|
};
|
||||||
157
src/components/ReDialog/index.vue
Normal file
157
src/components/ReDialog/index.vue
Normal file
@ -0,0 +1,157 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
closeDialog,
|
||||||
|
dialogStore,
|
||||||
|
type EventType,
|
||||||
|
type ButtonProps,
|
||||||
|
type DialogOptions
|
||||||
|
} from "./index";
|
||||||
|
import { ref, computed } from "vue";
|
||||||
|
import { isFunction } from "@pureadmin/utils";
|
||||||
|
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||||
|
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||||
|
|
||||||
|
const fullscreen = ref(false);
|
||||||
|
|
||||||
|
const footerButtons = computed(() => {
|
||||||
|
return (options: DialogOptions) => {
|
||||||
|
return options?.footerButtons?.length > 0
|
||||||
|
? options.footerButtons
|
||||||
|
: ([
|
||||||
|
{
|
||||||
|
label: "取消",
|
||||||
|
text: true,
|
||||||
|
bg: true,
|
||||||
|
btnClick: ({ dialog: { options, index } }) => {
|
||||||
|
const done = () =>
|
||||||
|
closeDialog(options, index, { command: "cancel" });
|
||||||
|
if (options?.beforeCancel && isFunction(options?.beforeCancel)) {
|
||||||
|
options.beforeCancel(done, { options, index });
|
||||||
|
} else {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "确定",
|
||||||
|
type: "primary",
|
||||||
|
text: true,
|
||||||
|
bg: true,
|
||||||
|
btnClick: ({ dialog: { options, index } }) => {
|
||||||
|
const done = () =>
|
||||||
|
closeDialog(options, index, { command: "sure" });
|
||||||
|
if (options?.beforeSure && isFunction(options?.beforeSure)) {
|
||||||
|
options.beforeSure(done, { options, index });
|
||||||
|
} else {
|
||||||
|
done();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
] as Array<ButtonProps>);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const fullscreenClass = computed(() => {
|
||||||
|
return [
|
||||||
|
"el-icon",
|
||||||
|
"el-dialog__close",
|
||||||
|
"-translate-x-2",
|
||||||
|
"cursor-pointer",
|
||||||
|
"hover:!text-[red]"
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
function eventsCallBack(
|
||||||
|
event: EventType,
|
||||||
|
options: DialogOptions,
|
||||||
|
index: number
|
||||||
|
) {
|
||||||
|
fullscreen.value = options?.fullscreen ?? false;
|
||||||
|
if (options?.[event] && isFunction(options?.[event])) {
|
||||||
|
return options?.[event]({ options, index });
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleClose(
|
||||||
|
options: DialogOptions,
|
||||||
|
index: number,
|
||||||
|
args = { command: "close" }
|
||||||
|
) {
|
||||||
|
closeDialog(options, index, args);
|
||||||
|
eventsCallBack("close", options, index);
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
class="pure-dialog"
|
||||||
|
v-for="(options, index) in dialogStore"
|
||||||
|
:key="index"
|
||||||
|
v-bind="options"
|
||||||
|
v-model="options.visible"
|
||||||
|
:fullscreen="fullscreen ? true : options?.fullscreen ? true : false"
|
||||||
|
@close="handleClose(options, index)"
|
||||||
|
@opened="eventsCallBack('open', options, index)"
|
||||||
|
@openAutoFocus="eventsCallBack('openAutoFocus', options, index)"
|
||||||
|
@closeAutoFocus="eventsCallBack('closeAutoFocus', options, index)"
|
||||||
|
>
|
||||||
|
<!-- header -->
|
||||||
|
<template
|
||||||
|
v-if="options?.fullscreenIcon || options?.headerRenderer"
|
||||||
|
#header="{ close, titleId, titleClass }"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="options?.fullscreenIcon"
|
||||||
|
class="flex items-center justify-between"
|
||||||
|
>
|
||||||
|
<span :id="titleId" :class="titleClass">{{ options?.title }}</span>
|
||||||
|
<i
|
||||||
|
v-if="!options?.fullscreen"
|
||||||
|
:class="fullscreenClass"
|
||||||
|
@click="fullscreen = !fullscreen"
|
||||||
|
>
|
||||||
|
<IconifyIconOffline
|
||||||
|
class="pure-dialog-svg"
|
||||||
|
:icon="
|
||||||
|
options?.fullscreen
|
||||||
|
? ExitFullscreen
|
||||||
|
: fullscreen
|
||||||
|
? ExitFullscreen
|
||||||
|
: Fullscreen
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
<component
|
||||||
|
v-else
|
||||||
|
:is="options?.headerRenderer({ close, titleId, titleClass })"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<component
|
||||||
|
v-bind="options?.props"
|
||||||
|
:is="options.contentRenderer({ options, index })"
|
||||||
|
@close="args => handleClose(options, index, args)"
|
||||||
|
/>
|
||||||
|
<!-- footer -->
|
||||||
|
<template v-if="!options?.hideFooter" #footer>
|
||||||
|
<template v-if="options?.footerRenderer">
|
||||||
|
<component :is="options?.footerRenderer({ options, index })" />
|
||||||
|
</template>
|
||||||
|
<span v-else>
|
||||||
|
<el-button
|
||||||
|
v-for="(btn, key) in footerButtons(options)"
|
||||||
|
:key="key"
|
||||||
|
v-bind="btn"
|
||||||
|
@click="
|
||||||
|
btn.btnClick({
|
||||||
|
dialog: { options, index },
|
||||||
|
button: { btn, index: key }
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ btn?.label }}
|
||||||
|
</el-button>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
218
src/components/ReDialog/type.ts
Normal file
218
src/components/ReDialog/type.ts
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
import type { CSSProperties, VNode, Component } from "vue";
|
||||||
|
|
||||||
|
type DoneFn = (cancel?: boolean) => void;
|
||||||
|
type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
|
||||||
|
type ArgsType = {
|
||||||
|
/** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或者空白页 */
|
||||||
|
command: "cancel" | "sure" | "close";
|
||||||
|
};
|
||||||
|
|
||||||
|
/** https://element-plus.org/zh-CN/component/dialog.html#attributes */
|
||||||
|
type DialogProps = {
|
||||||
|
/** `Dialog` 的显示与隐藏 */
|
||||||
|
visible?: boolean;
|
||||||
|
/** `Dialog` 的标题 */
|
||||||
|
title?: string;
|
||||||
|
/** `Dialog` 的宽度，默认 `50%` */
|
||||||
|
width?: string | number;
|
||||||
|
/** 是否为全屏 `Dialog`（会一直处于全屏状态，除非弹框关闭），默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
|
||||||
|
fullscreen?: boolean;
|
||||||
|
/** 是否显示全屏操作图标，默认 `false`，`fullscreen` 和 `fullscreenIcon` 都传时只有 `fullscreen` 会生效 */
|
||||||
|
fullscreenIcon?: boolean;
|
||||||
|
/** `Dialog CSS` 中的 `margin-top` 值，默认 `15vh` */
|
||||||
|
top?: string;
|
||||||
|
/** 是否需要遮罩层，默认 `true` */
|
||||||
|
modal?: boolean;
|
||||||
|
/** `Dialog` 自身是否插入至 `body` 元素上。嵌套的 `Dialog` 必须指定该属性并赋值为 `true`，默认 `false` */
|
||||||
|
appendToBody?: boolean;
|
||||||
|
/** 是否在 `Dialog` 出现时将 `body` 滚动锁定，默认 `true` */
|
||||||
|
lockScroll?: boolean;
|
||||||
|
/** `Dialog` 的自定义类名 */
|
||||||
|
class?: string;
|
||||||
|
/** `Dialog` 的自定义样式 */
|
||||||
|
style?: CSSProperties;
|
||||||
|
/** `Dialog` 打开的延时时间，单位毫秒，默认 `0` */
|
||||||
|
openDelay?: number;
|
||||||
|
/** `Dialog` 关闭的延时时间，单位毫秒，默认 `0` */
|
||||||
|
closeDelay?: number;
|
||||||
|
/** 是否可以通过点击 `modal` 关闭 `Dialog`，默认 `true` */
|
||||||
|
closeOnClickModal?: boolean;
|
||||||
|
/** 是否可以通过按下 `ESC` 关闭 `Dialog`，默认 `true` */
|
||||||
|
closeOnPressEscape?: boolean;
|
||||||
|
/** 是否显示关闭按钮，默认 `true` */
|
||||||
|
showClose?: boolean;
|
||||||
|
/** 关闭前的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
|
||||||
|
beforeClose?: (done: DoneFn) => void;
|
||||||
|
/** 为 `Dialog` 启用可拖拽功能，默认 `false` */
|
||||||
|
draggable?: boolean;
|
||||||
|
/** 是否让 `Dialog` 的 `header` 和 `footer` 部分居中排列，默认 `false` */
|
||||||
|
center?: boolean;
|
||||||
|
/** 是否水平垂直对齐对话框，默认 `false` */
|
||||||
|
alignCenter?: boolean;
|
||||||
|
/** 当关闭 `Dialog` 时，销毁其中的元素，默认 `false` */
|
||||||
|
destroyOnClose?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
type BtnClickDialog = {
|
||||||
|
options?: DialogOptions;
|
||||||
|
index?: number;
|
||||||
|
};
|
||||||
|
type BtnClickButton = {
|
||||||
|
btn?: ButtonProps;
|
||||||
|
index?: number;
|
||||||
|
};
|
||||||
|
/** https://element-plus.org/zh-CN/component/button.html#button-attributes */
|
||||||
|
type ButtonProps = {
|
||||||
|
/** 按钮文字 */
|
||||||
|
label: string;
|
||||||
|
/** 按钮尺寸 */
|
||||||
|
size?: "large" | "default" | "small";
|
||||||
|
/** 按钮类型 */
|
||||||
|
type?: "primary" | "success" | "warning" | "danger" | "info";
|
||||||
|
/** 是否为朴素按钮，默认 `false` */
|
||||||
|
plain?: boolean;
|
||||||
|
/** 是否为文字按钮，默认 `false` */
|
||||||
|
text?: boolean;
|
||||||
|
/** 是否显示文字按钮背景颜色，默认 `false` */
|
||||||
|
bg?: boolean;
|
||||||
|
/** 是否为链接按钮，默认 `false` */
|
||||||
|
link?: boolean;
|
||||||
|
/** 是否为圆角按钮，默认 `false` */
|
||||||
|
round?: boolean;
|
||||||
|
/** 是否为圆形按钮，默认 `false` */
|
||||||
|
circle?: boolean;
|
||||||
|
/** 是否为加载中状态，默认 `false` */
|
||||||
|
loading?: boolean;
|
||||||
|
/** 自定义加载中状态图标组件 */
|
||||||
|
loadingIcon?: string | Component;
|
||||||
|
/** 按钮是否为禁用状态，默认 `false` */
|
||||||
|
disabled?: boolean;
|
||||||
|
/** 图标组件 */
|
||||||
|
icon?: string | Component;
|
||||||
|
/** 是否开启原生 `autofocus` 属性，默认 `false` */
|
||||||
|
autofocus?: boolean;
|
||||||
|
/** 原生 `type` 属性，默认 `button` */
|
||||||
|
nativeType?: "button" | "submit" | "reset";
|
||||||
|
/** 自动在两个中文字符之间插入空格 */
|
||||||
|
autoInsertSpace?: boolean;
|
||||||
|
/** 自定义按钮颜色, 并自动计算 `hover` 和 `active` 触发后的颜色 */
|
||||||
|
color?: string;
|
||||||
|
/** `dark` 模式, 意味着自动设置 `color` 为 `dark` 模式的颜色，默认 `false` */
|
||||||
|
dark?: boolean;
|
||||||
|
/** 自定义元素标签 */
|
||||||
|
tag?: string | Component;
|
||||||
|
/** 点击按钮后触发的回调 */
|
||||||
|
btnClick?: ({
|
||||||
|
dialog,
|
||||||
|
button
|
||||||
|
}: {
|
||||||
|
/** 当前 `Dialog` 信息 */
|
||||||
|
dialog: BtnClickDialog;
|
||||||
|
/** 当前 `button` 信息 */
|
||||||
|
button: BtnClickButton;
|
||||||
|
}) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface DialogOptions extends DialogProps {
|
||||||
|
/** 内容区组件的 `props`，可通过 `defineProps` 接收 */
|
||||||
|
props?: any;
|
||||||
|
/** 是否隐藏 `Dialog` 按钮操作区的内容 */
|
||||||
|
hideFooter?: boolean;
|
||||||
|
/**
|
||||||
|
* @description 自定义对话框标题的内容渲染器
|
||||||
|
* @see {@link https://element-plus.org/zh-CN/component/dialog.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E5%A4%B4%E9%83%A8}
|
||||||
|
*/
|
||||||
|
headerRenderer?: ({
|
||||||
|
close,
|
||||||
|
titleId,
|
||||||
|
titleClass
|
||||||
|
}: {
|
||||||
|
close: Function;
|
||||||
|
titleId: string;
|
||||||
|
titleClass: string;
|
||||||
|
}) => VNode | Component;
|
||||||
|
/** 自定义内容渲染器 */
|
||||||
|
contentRenderer?: ({
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}) => VNode | Component;
|
||||||
|
/** 自定义按钮操作区的内容渲染器，会覆盖`footerButtons`以及默认的 `取消` 和 `确定` 按钮 */
|
||||||
|
footerRenderer?: ({
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}) => VNode | Component;
|
||||||
|
/** 自定义底部按钮操作 */
|
||||||
|
footerButtons?: Array<ButtonProps>;
|
||||||
|
/** `Dialog` 打开后的回调 */
|
||||||
|
open?: ({
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}) => void;
|
||||||
|
/** `Dialog` 关闭后的回调（只有点击右上角关闭按钮或者空白页关闭页面时才会触发） */
|
||||||
|
close?: ({
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}) => void;
|
||||||
|
/** `Dialog` 关闭后的回调。 `args` 返回的 `command` 值解析：`cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或者空白页 */
|
||||||
|
closeCallBack?: ({
|
||||||
|
options,
|
||||||
|
index,
|
||||||
|
args
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
args: any;
|
||||||
|
}) => void;
|
||||||
|
/** 输入焦点聚焦在 `Dialog` 内容时的回调 */
|
||||||
|
openAutoFocus?: ({
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}) => void;
|
||||||
|
/** 输入焦点从 `Dialog` 内容失焦时的回调 */
|
||||||
|
closeAutoFocus?: ({
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}) => void;
|
||||||
|
/** 点击底部取消按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
|
||||||
|
beforeCancel?: (
|
||||||
|
done: Function,
|
||||||
|
{
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}
|
||||||
|
) => void;
|
||||||
|
/** 点击底部确定按钮的回调，会暂停 `Dialog` 的关闭. 回调函数内执行 `done` 参数方法的时候才是真正关闭对话框的时候 */
|
||||||
|
beforeSure?: (
|
||||||
|
done: Function,
|
||||||
|
{
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}
|
||||||
|
) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type { EventType, ArgsType, DialogProps, ButtonProps, DialogOptions };
|
||||||
12
src/components/ReIcon/index.ts
Normal file
12
src/components/ReIcon/index.ts
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import iconifyIconOffline from "./src/iconifyIconOffline";
|
||||||
|
import iconifyIconOnline from "./src/iconifyIconOnline";
|
||||||
|
import fontIcon from "./src/iconfont";
|
||||||
|
|
||||||
|
/** 本地图标组件 */
|
||||||
|
const IconifyIconOffline = iconifyIconOffline;
|
||||||
|
/** 在线图标组件 */
|
||||||
|
const IconifyIconOnline = iconifyIconOnline;
|
||||||
|
/** iconfont组件 */
|
||||||
|
const FontIcon = fontIcon;
|
||||||
|
|
||||||
|
export { IconifyIconOffline, IconifyIconOnline, FontIcon };
|
||||||
61
src/components/ReIcon/src/hooks.ts
Normal file
61
src/components/ReIcon/src/hooks.ts
Normal file
@ -0,0 +1,61 @@
|
|||||||
|
import { iconType } from "./types";
|
||||||
|
import { h, defineComponent, Component } from "vue";
|
||||||
|
import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
|
||||||
|
* @see 点击查看文档图标篇 {@link https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/}
|
||||||
|
* @param icon 必传 图标
|
||||||
|
* @param attrs 可选 iconType 属性
|
||||||
|
* @returns Component
|
||||||
|
*/
|
||||||
|
export function useRenderIcon(icon: any, attrs?: iconType): Component {
|
||||||
|
// iconfont
|
||||||
|
const ifReg = /^IF-/;
|
||||||
|
// typeof icon === "function" 属于SVG
|
||||||
|
if (ifReg.test(icon)) {
|
||||||
|
// iconfont
|
||||||
|
const name = icon.split(ifReg)[1];
|
||||||
|
const iconName = name.slice(
|
||||||
|
0,
|
||||||
|
name.indexOf(" ") == -1 ? name.length : name.indexOf(" ")
|
||||||
|
);
|
||||||
|
const iconType = name.slice(name.indexOf(" ") + 1, name.length);
|
||||||
|
return defineComponent({
|
||||||
|
name: "FontIcon",
|
||||||
|
render() {
|
||||||
|
return h(FontIcon, {
|
||||||
|
icon: iconName,
|
||||||
|
iconType,
|
||||||
|
...attrs
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else if (typeof icon === "function" || typeof icon?.render === "function") {
|
||||||
|
// svg
|
||||||
|
return icon;
|
||||||
|
} else if (typeof icon === "object") {
|
||||||
|
return defineComponent({
|
||||||
|
name: "OfflineIcon",
|
||||||
|
render() {
|
||||||
|
return h(IconifyIconOffline, {
|
||||||
|
icon: icon,
|
||||||
|
...attrs
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
// 通过是否存在 : 符号来判断是在线还是本地图标，存在即是在线图标，反之
|
||||||
|
return defineComponent({
|
||||||
|
name: "Icon",
|
||||||
|
render() {
|
||||||
|
const IconifyIcon =
|
||||||
|
icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
|
||||||
|
return h(IconifyIcon, {
|
||||||
|
icon: icon,
|
||||||
|
...attrs
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
48
src/components/ReIcon/src/iconfont.ts
Normal file
48
src/components/ReIcon/src/iconfont.ts
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
import { h, defineComponent } from "vue";
|
||||||
|
|
||||||
|
// 封装iconfont组件，默认`font-class`引用模式，支持`unicode`引用、`font-class`引用、`symbol`引用 （https://www.iconfont.cn/help/detail?spm=a313x.7781069.1998910419.20&helptype=code）
|
||||||
|
export default defineComponent({
|
||||||
|
name: "FontIcon",
|
||||||
|
props: {
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const attrs = this.$attrs;
|
||||||
|
if (Object.keys(attrs).includes("uni") || attrs?.iconType === "uni") {
|
||||||
|
return h(
|
||||||
|
"i",
|
||||||
|
{
|
||||||
|
class: "iconfont",
|
||||||
|
...attrs
|
||||||
|
},
|
||||||
|
this.icon
|
||||||
|
);
|
||||||
|
} else if (
|
||||||
|
Object.keys(attrs).includes("svg") ||
|
||||||
|
attrs?.iconType === "svg"
|
||||||
|
) {
|
||||||
|
return h(
|
||||||
|
"svg",
|
||||||
|
{
|
||||||
|
class: "icon-svg",
|
||||||
|
"aria-hidden": true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => [
|
||||||
|
h("use", {
|
||||||
|
"xlink:href": `#${this.icon}`
|
||||||
|
})
|
||||||
|
]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return h("i", {
|
||||||
|
class: `iconfont ${this.icon}`,
|
||||||
|
...attrs
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
30
src/components/ReIcon/src/iconifyIconOffline.ts
Normal file
30
src/components/ReIcon/src/iconifyIconOffline.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { h, defineComponent } from "vue";
|
||||||
|
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
|
||||||
|
|
||||||
|
// Iconify Icon在Vue里本地使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
|
||||||
|
export default defineComponent({
|
||||||
|
name: "IconifyIconOffline",
|
||||||
|
components: { IconifyIcon },
|
||||||
|
props: {
|
||||||
|
icon: {
|
||||||
|
default: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
if (typeof this.icon === "object") addIcon(this.icon, this.icon);
|
||||||
|
const attrs = this.$attrs;
|
||||||
|
return h(
|
||||||
|
IconifyIcon,
|
||||||
|
{
|
||||||
|
icon: this.icon,
|
||||||
|
style: attrs?.style
|
||||||
|
? Object.assign(attrs.style, { outline: "none" })
|
||||||
|
: { outline: "none" },
|
||||||
|
...attrs
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
30
src/components/ReIcon/src/iconifyIconOnline.ts
Normal file
30
src/components/ReIcon/src/iconifyIconOnline.ts
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { h, defineComponent } from "vue";
|
||||||
|
import { Icon as IconifyIcon } from "@iconify/vue";
|
||||||
|
|
||||||
|
// Iconify Icon在Vue里在线使用（用于外网环境）
|
||||||
|
export default defineComponent({
|
||||||
|
name: "IconifyIconOnline",
|
||||||
|
components: { IconifyIcon },
|
||||||
|
props: {
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const attrs = this.$attrs;
|
||||||
|
return h(
|
||||||
|
IconifyIcon,
|
||||||
|
{
|
||||||
|
icon: `${this.icon}`,
|
||||||
|
style: attrs?.style
|
||||||
|
? Object.assign(attrs.style, { outline: "none" })
|
||||||
|
: { outline: "none" },
|
||||||
|
...attrs
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
14
src/components/ReIcon/src/offlineIcon.ts
Normal file
14
src/components/ReIcon/src/offlineIcon.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { addIcon } from "@iconify/vue/dist/offline";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 这里存放本地图标，在 src/layout/index.vue 文件中加载，避免在首启动加载
|
||||||
|
*/
|
||||||
|
|
||||||
|
// 本地菜单图标，后端在路由的icon中返回对应的图标字符串并且前端在此处使用addIcon添加即可渲染菜单图标
|
||||||
|
import HomeFilled from "@iconify-icons/ep/home-filled";
|
||||||
|
import InformationLine from "@iconify-icons/ri/information-line";
|
||||||
|
import Lollipop from "@iconify-icons/ep/lollipop";
|
||||||
|
|
||||||
|
addIcon("homeFilled", HomeFilled);
|
||||||
|
addIcon("informationLine", InformationLine);
|
||||||
|
addIcon("lollipop", Lollipop);
|
||||||
19
src/components/ReIcon/src/types.ts
Normal file
19
src/components/ReIcon/src/types.ts
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
export interface iconType {
|
||||||
|
// iconify (https://docs.iconify.design/icon-components/vue/#properties)
|
||||||
|
inline?: boolean;
|
||||||
|
width?: string | number;
|
||||||
|
height?: string | number;
|
||||||
|
horizontalFlip?: boolean;
|
||||||
|
verticalFlip?: boolean;
|
||||||
|
flip?: string;
|
||||||
|
rotate?: number | string;
|
||||||
|
color?: string;
|
||||||
|
horizontalAlign?: boolean;
|
||||||
|
verticalAlign?: boolean;
|
||||||
|
align?: string;
|
||||||
|
onLoad?: Function;
|
||||||
|
includes?: Function;
|
||||||
|
|
||||||
|
// all icon
|
||||||
|
style?: object;
|
||||||
|
}
|
||||||
5
src/components/RePureTableBar/index.ts
Normal file
5
src/components/RePureTableBar/index.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
import pureTableBar from "./src/bar";
|
||||||
|
import { withInstall } from "@pureadmin/utils";
|
||||||
|
|
||||||
|
/** 配合 `@pureadmin/table` 实现快速便捷的表格操作 https://github.com/pure-admin/pure-admin-table */
|
||||||
|
export const PureTableBar = withInstall(pureTableBar);
|
||||||
355
src/components/RePureTableBar/src/bar.tsx
Normal file
355
src/components/RePureTableBar/src/bar.tsx
Normal file
@ -0,0 +1,355 @@
|
|||||||
|
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||||
|
import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
|
||||||
|
import {
|
||||||
|
delay,
|
||||||
|
cloneDeep,
|
||||||
|
isBoolean,
|
||||||
|
isFunction,
|
||||||
|
getKeyList
|
||||||
|
} from "@pureadmin/utils";
|
||||||
|
|
||||||
|
import Sortable from "sortablejs";
|
||||||
|
import DragIcon from "./svg/drag.svg?component";
|
||||||
|
import ExpandIcon from "./svg/expand.svg?component";
|
||||||
|
import RefreshIcon from "./svg/refresh.svg?component";
|
||||||
|
import SettingIcon from "./svg/settings.svg?component";
|
||||||
|
import CollapseIcon from "./svg/collapse.svg?component";
|
||||||
|
|
||||||
|
const props = {
|
||||||
|
/** 头部最左边的标题 */
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
default: "列表"
|
||||||
|
},
|
||||||
|
/** 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可 */
|
||||||
|
tableRef: {
|
||||||
|
type: Object as PropType<any>
|
||||||
|
},
|
||||||
|
/** 需要展示的列 */
|
||||||
|
columns: {
|
||||||
|
type: Array as PropType<TableColumnList>,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "PureTableBar",
|
||||||
|
props,
|
||||||
|
emits: ["refresh"],
|
||||||
|
setup(props, { emit, slots, attrs }) {
|
||||||
|
const buttonRef = ref();
|
||||||
|
const size = ref("default");
|
||||||
|
const isExpandAll = ref(true);
|
||||||
|
const loading = ref(false);
|
||||||
|
const checkAll = ref(true);
|
||||||
|
const isIndeterminate = ref(false);
|
||||||
|
const filterColumns = cloneDeep(props?.columns).filter(column =>
|
||||||
|
isBoolean(column?.hide)
|
||||||
|
? !column.hide
|
||||||
|
: !(isFunction(column?.hide) && column?.hide())
|
||||||
|
);
|
||||||
|
let checkColumnList = getKeyList(cloneDeep(props?.columns), "label");
|
||||||
|
const checkedColumns = ref(getKeyList(cloneDeep(filterColumns), "label"));
|
||||||
|
const dynamicColumns = ref(cloneDeep(props?.columns));
|
||||||
|
|
||||||
|
const getDropdownItemStyle = computed(() => {
|
||||||
|
return s => {
|
||||||
|
return {
|
||||||
|
background:
|
||||||
|
s === size.value ? useEpThemeStoreHook().epThemeColor : "",
|
||||||
|
color: s === size.value ? "#fff" : "var(--el-text-color-primary)"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const iconClass = computed(() => {
|
||||||
|
return [
|
||||||
|
"text-black",
|
||||||
|
"dark:text-white",
|
||||||
|
"duration-100",
|
||||||
|
"hover:!text-primary",
|
||||||
|
"cursor-pointer",
|
||||||
|
"outline-none"
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const topClass = computed(() => {
|
||||||
|
return [
|
||||||
|
"flex",
|
||||||
|
"justify-between",
|
||||||
|
"pt-[3px]",
|
||||||
|
"px-[11px]",
|
||||||
|
"border-b-[1px]",
|
||||||
|
"border-solid",
|
||||||
|
"border-[#dcdfe6]",
|
||||||
|
"dark:border-[#303030]"
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
function onReFresh() {
|
||||||
|
loading.value = true;
|
||||||
|
emit("refresh");
|
||||||
|
delay(500).then(() => (loading.value = false));
|
||||||
|
}
|
||||||
|
|
||||||
|
function onExpand() {
|
||||||
|
isExpandAll.value = !isExpandAll.value;
|
||||||
|
toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleRowExpansionAll(data, isExpansion) {
|
||||||
|
data.forEach(item => {
|
||||||
|
props.tableRef.toggleRowExpansion(item, isExpansion);
|
||||||
|
if (item.children !== undefined && item.children !== null) {
|
||||||
|
toggleRowExpansionAll(item.children, isExpansion);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCheckAllChange(val: boolean) {
|
||||||
|
checkedColumns.value = val ? checkColumnList : [];
|
||||||
|
isIndeterminate.value = false;
|
||||||
|
dynamicColumns.value.map(column =>
|
||||||
|
val ? (column.hide = false) : (column.hide = true)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCheckedColumnsChange(value: string[]) {
|
||||||
|
const checkedCount = value.length;
|
||||||
|
checkAll.value = checkedCount === checkColumnList.length;
|
||||||
|
isIndeterminate.value =
|
||||||
|
checkedCount > 0 && checkedCount < checkColumnList.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCheckColumnListChange(val: boolean, label: string) {
|
||||||
|
dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function onReset() {
|
||||||
|
checkAll.value = true;
|
||||||
|
isIndeterminate.value = false;
|
||||||
|
dynamicColumns.value = cloneDeep(props?.columns);
|
||||||
|
checkColumnList = [];
|
||||||
|
checkColumnList = await getKeyList(cloneDeep(props?.columns), "label");
|
||||||
|
checkedColumns.value = getKeyList(cloneDeep(filterColumns), "label");
|
||||||
|
}
|
||||||
|
|
||||||
|
const dropdown = {
|
||||||
|
dropdown: () => (
|
||||||
|
<el-dropdown-menu class="translation">
|
||||||
|
<el-dropdown-item
|
||||||
|
style={getDropdownItemStyle.value("large")}
|
||||||
|
onClick={() => (size.value = "large")}
|
||||||
|
>
|
||||||
|
宽松
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item
|
||||||
|
style={getDropdownItemStyle.value("default")}
|
||||||
|
onClick={() => (size.value = "default")}
|
||||||
|
>
|
||||||
|
默认
|
||||||
|
</el-dropdown-item>
|
||||||
|
<el-dropdown-item
|
||||||
|
style={getDropdownItemStyle.value("small")}
|
||||||
|
onClick={() => (size.value = "small")}
|
||||||
|
>
|
||||||
|
紧凑
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 列展示拖拽排序 */
|
||||||
|
const rowDrop = (event: { preventDefault: () => void }) => {
|
||||||
|
event.preventDefault();
|
||||||
|
nextTick(() => {
|
||||||
|
const wrapper: HTMLElement = document.querySelector(
|
||||||
|
".el-checkbox-group>div"
|
||||||
|
);
|
||||||
|
Sortable.create(wrapper, {
|
||||||
|
animation: 300,
|
||||||
|
handle: ".drag-btn",
|
||||||
|
onEnd: ({ newIndex, oldIndex, item }) => {
|
||||||
|
const targetThElem = item;
|
||||||
|
const wrapperElem = targetThElem.parentNode as HTMLElement;
|
||||||
|
const oldColumn = dynamicColumns.value[oldIndex];
|
||||||
|
const newColumn = dynamicColumns.value[newIndex];
|
||||||
|
if (oldColumn?.fixed || newColumn?.fixed) {
|
||||||
|
// 当前列存在fixed属性 则不可拖拽
|
||||||
|
const oldThElem = wrapperElem.children[oldIndex] as HTMLElement;
|
||||||
|
if (newIndex > oldIndex) {
|
||||||
|
wrapperElem.insertBefore(targetThElem, oldThElem);
|
||||||
|
} else {
|
||||||
|
wrapperElem.insertBefore(
|
||||||
|
targetThElem,
|
||||||
|
oldThElem ? oldThElem.nextElementSibling : oldThElem
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const currentRow = dynamicColumns.value.splice(oldIndex, 1)[0];
|
||||||
|
dynamicColumns.value.splice(newIndex, 0, currentRow);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const isFixedColumn = (label: string) => {
|
||||||
|
return dynamicColumns.value.filter(item => item.label === label)[0].fixed
|
||||||
|
? true
|
||||||
|
: false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const reference = {
|
||||||
|
reference: () => (
|
||||||
|
<SettingIcon
|
||||||
|
class={["w-[16px]", iconClass.value]}
|
||||||
|
onMouseover={e => (buttonRef.value = e.currentTarget)}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
};
|
||||||
|
|
||||||
|
return () => (
|
||||||
|
<>
|
||||||
|
<div {...attrs} class="w-[99/100] mt-2 px-2 pb-2 bg-bg_color">
|
||||||
|
<div class="flex justify-between w-full h-[60px] p-4">
|
||||||
|
{slots?.title ? (
|
||||||
|
slots.title()
|
||||||
|
) : (
|
||||||
|
<p class="font-bold truncate">{props.title}</p>
|
||||||
|
)}
|
||||||
|
<div class="flex items-center justify-around">
|
||||||
|
{slots?.buttons ? (
|
||||||
|
<div class="flex mr-4">{slots.buttons()}</div>
|
||||||
|
) : null}
|
||||||
|
{props.tableRef?.size ? (
|
||||||
|
<>
|
||||||
|
<el-tooltip
|
||||||
|
effect="dark"
|
||||||
|
content={isExpandAll.value ? "折叠" : "展开"}
|
||||||
|
placement="top"
|
||||||
|
>
|
||||||
|
<ExpandIcon
|
||||||
|
class={["w-[16px]", iconClass.value]}
|
||||||
|
style={{
|
||||||
|
transform: isExpandAll.value ? "none" : "rotate(-90deg)"
|
||||||
|
}}
|
||||||
|
onClick={() => onExpand()}
|
||||||
|
/>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-divider direction="vertical" />
|
||||||
|
</>
|
||||||
|
) : null}
|
||||||
|
<el-tooltip effect="dark" content="刷新" placement="top">
|
||||||
|
<RefreshIcon
|
||||||
|
class={[
|
||||||
|
"w-[16px]",
|
||||||
|
iconClass.value,
|
||||||
|
loading.value ? "animate-spin" : ""
|
||||||
|
]}
|
||||||
|
onClick={() => onReFresh()}
|
||||||
|
/>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-divider direction="vertical" />
|
||||||
|
<el-tooltip effect="dark" content="密度" placement="top">
|
||||||
|
<el-dropdown v-slots={dropdown} trigger="click">
|
||||||
|
<CollapseIcon class={["w-[16px]", iconClass.value]} />
|
||||||
|
</el-dropdown>
|
||||||
|
</el-tooltip>
|
||||||
|
<el-divider direction="vertical" />
|
||||||
|
|
||||||
|
<el-popover
|
||||||
|
v-slots={reference}
|
||||||
|
placement="bottom-start"
|
||||||
|
popper-style={{ padding: 0 }}
|
||||||
|
width="160"
|
||||||
|
trigger="click"
|
||||||
|
>
|
||||||
|
<div class={[topClass.value]}>
|
||||||
|
<el-checkbox
|
||||||
|
class="!-mr-1"
|
||||||
|
label="列展示"
|
||||||
|
v-model={checkAll.value}
|
||||||
|
indeterminate={isIndeterminate.value}
|
||||||
|
onChange={value => handleCheckAllChange(value)}
|
||||||
|
/>
|
||||||
|
<el-button type="primary" link onClick={() => onReset()}>
|
||||||
|
重置
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pt-[6px] pl-[11px]">
|
||||||
|
<el-checkbox-group
|
||||||
|
v-model={checkedColumns.value}
|
||||||
|
onChange={value => handleCheckedColumnsChange(value)}
|
||||||
|
>
|
||||||
|
<el-space
|
||||||
|
direction="vertical"
|
||||||
|
alignment="flex-start"
|
||||||
|
size={0}
|
||||||
|
>
|
||||||
|
{checkColumnList.map(item => {
|
||||||
|
return (
|
||||||
|
<div class="flex items-center">
|
||||||
|
<DragIcon
|
||||||
|
class={[
|
||||||
|
"drag-btn w-[16px] mr-2",
|
||||||
|
isFixedColumn(item)
|
||||||
|
? "!cursor-no-drop"
|
||||||
|
: "!cursor-grab"
|
||||||
|
]}
|
||||||
|
onMouseenter={(event: {
|
||||||
|
preventDefault: () => void;
|
||||||
|
}) => rowDrop(event)}
|
||||||
|
/>
|
||||||
|
<el-checkbox
|
||||||
|
key={item}
|
||||||
|
label={item}
|
||||||
|
onChange={value =>
|
||||||
|
handleCheckColumnListChange(value, item)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<span
|
||||||
|
title={item}
|
||||||
|
class="inline-block w-[120px] truncate hover:text-text_color_primary"
|
||||||
|
>
|
||||||
|
{item}
|
||||||
|
</span>
|
||||||
|
</el-checkbox>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</el-space>
|
||||||
|
</el-checkbox-group>
|
||||||
|
</div>
|
||||||
|
</el-popover>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-tooltip
|
||||||
|
popper-options={{
|
||||||
|
modifiers: [
|
||||||
|
{
|
||||||
|
name: "computeStyles",
|
||||||
|
options: {
|
||||||
|
adaptive: false,
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}}
|
||||||
|
placement="top"
|
||||||
|
virtual-ref={buttonRef.value}
|
||||||
|
virtual-triggering
|
||||||
|
trigger="hover"
|
||||||
|
content="列设置"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{slots.default({
|
||||||
|
size: size.value,
|
||||||
|
dynamicColumns: dynamicColumns.value
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
1
src/components/RePureTableBar/src/svg/collapse.svg
Normal file
1
src/components/RePureTableBar/src/svg/collapse.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M13.79 10.21a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42l-2.5-2.5a1 1 0 0 0-.33-.21 1 1 0 0 0-.76 0 1 1 0 0 0-.33.21l-2.5 2.5a1 1 0 0 0 1.42 1.42l.79-.8v5.18l-.79-.8a1 1 0 0 0-1.42 1.42l2.5 2.5a1 1 0 0 0 .33.21.94.94 0 0 0 .76 0 1 1 0 0 0 .33-.21l2.5-2.5a1 1 0 0 0-1.42-1.42l-.79.8V9.41ZM7 4h10a1 1 0 0 0 0-2H7a1 1 0 0 0 0 2Zm10 16H7a1 1 0 0 0 0 2h10a1 1 0 0 0 0-2Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 441 B |
1
src/components/RePureTableBar/src/svg/drag.svg
Normal file
1
src/components/RePureTableBar/src/svg/drag.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="32" height="32" fill="currentColor" aria-hidden="true" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zm0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0zm0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0zM300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97zM640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0z"/></svg>
|
||||||
|
After Width: | Height: | Size: 398 B |
1
src/components/RePureTableBar/src/svg/expand.svg
Normal file
1
src/components/RePureTableBar/src/svg/expand.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M22 4V2H2v2h9v14.17l-5.5-5.5-1.42 1.41L12 22l7.92-7.92-1.42-1.41-5.5 5.5V4h9Z"/></svg>
|
||||||
|
After Width: | Height: | Size: 163 B |
1
src/components/RePureTableBar/src/svg/refresh.svg
Normal file
1
src/components/RePureTableBar/src/svg/refresh.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 11A8.1 8.1 0 0 0 4.5 9M4 5v4h4m-4 4a8.1 8.1 0 0 0 15.5 2m.5 4v-4h-4"/></svg>
|
||||||
|
After Width: | Height: | Size: 235 B |
1
src/components/RePureTableBar/src/svg/settings.svg
Normal file
1
src/components/RePureTableBar/src/svg/settings.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M3.34 17a10.018 10.018 0 0 1-.978-2.326 3 3 0 0 0 .002-5.347A9.99 9.99 0 0 1 4.865 4.99a3 3 0 0 0 4.631-2.674 9.99 9.99 0 0 1 5.007.002 3 3 0 0 0 4.632 2.672A9.99 9.99 0 0 1 20.66 7c.433.749.757 1.53.978 2.326a3 3 0 0 0-.002 5.347 9.99 9.99 0 0 1-2.501 4.337 3 3 0 0 0-4.631 2.674 9.99 9.99 0 0 1-5.007-.002 3 3 0 0 0-4.632-2.672A10.018 10.018 0 0 1 3.34 17zm5.66.196a4.993 4.993 0 0 1 2.25 2.77c.499.047 1 .048 1.499.001A4.993 4.993 0 0 1 15 17.197a4.993 4.993 0 0 1 3.525-.565c.29-.408.54-.843.748-1.298A4.993 4.993 0 0 1 18 12c0-1.26.47-2.437 1.273-3.334a8.126 8.126 0 0 0-.75-1.298A4.993 4.993 0 0 1 15 6.804a4.993 4.993 0 0 1-2.25-2.77c-.499-.047-1-.048-1.499-.001A4.993 4.993 0 0 1 9 6.803a4.993 4.993 0 0 1-3.525.565 7.99 7.99 0 0 0-.748 1.298A4.993 4.993 0 0 1 6 12a4.99 4.99 0 0 1-1.273 3.334 8.126 8.126 0 0 0 .75 1.298A4.993 4.993 0 0 1 9 17.196zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1011 B |
55
src/config/index.ts
Normal file
55
src/config/index.ts
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { App } from "vue";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
let config: object = {};
|
||||||
|
const { VITE_PUBLIC_PATH } = import.meta.env;
|
||||||
|
|
||||||
|
const setConfig = (cfg?: unknown) => {
|
||||||
|
config = Object.assign(config, cfg);
|
||||||
|
};
|
||||||
|
|
||||||
|
const getConfig = (key?: string): ServerConfigs => {
|
||||||
|
if (typeof key === "string") {
|
||||||
|
const arr = key.split(".");
|
||||||
|
if (arr && arr.length) {
|
||||||
|
let data = config;
|
||||||
|
arr.forEach(v => {
|
||||||
|
if (data && typeof data[v] !== "undefined") {
|
||||||
|
data = data[v];
|
||||||
|
} else {
|
||||||
|
data = null;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return data;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return config;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 获取项目动态全局配置 */
|
||||||
|
export const getServerConfig = async (app: App): Promise<undefined> => {
|
||||||
|
app.config.globalProperties.$config = getConfig();
|
||||||
|
return axios({
|
||||||
|
method: "get",
|
||||||
|
url: `${VITE_PUBLIC_PATH}serverConfig.json`
|
||||||
|
})
|
||||||
|
.then(({ data: config }) => {
|
||||||
|
let $config = app.config.globalProperties.$config;
|
||||||
|
// 自动注入项目配置
|
||||||
|
if (app && $config && typeof config === "object") {
|
||||||
|
$config = Object.assign($config, config);
|
||||||
|
app.config.globalProperties.$config = $config;
|
||||||
|
// 设置全局配置
|
||||||
|
setConfig($config);
|
||||||
|
}
|
||||||
|
return $config;
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
throw "请在public文件夹下添加serverConfig.json配置文件";
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 本地响应式存储的命名空间 */
|
||||||
|
const responsiveStorageNameSpace = () => getConfig().ResponsiveStorageNameSpace;
|
||||||
|
|
||||||
|
export { getConfig, setConfig, responsiveStorageNameSpace };
|
||||||
15
src/directives/auth/index.ts
Normal file
15
src/directives/auth/index.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
import { hasAuth } from "@/router/utils";
|
||||||
|
import type { Directive, DirectiveBinding } from "vue";
|
||||||
|
|
||||||
|
export const auth: Directive = {
|
||||||
|
mounted(el: HTMLElement, binding: DirectiveBinding) {
|
||||||
|
const { value } = binding;
|
||||||
|
if (value) {
|
||||||
|
!hasAuth(value) && el.parentNode?.removeChild(el);
|
||||||
|
} else {
|
||||||
|
throw new Error(
|
||||||
|
"[Directive: auth]: need auths! Like v-auth=\"['btn.add','btn.edit']\""
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
33
src/directives/copy/index.ts
Normal file
33
src/directives/copy/index.ts
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
import { message } from "@/utils/message";
|
||||||
|
import { useEventListener } from "@vueuse/core";
|
||||||
|
import { copyTextToClipboard } from "@pureadmin/utils";
|
||||||
|
import type { Directive, DirectiveBinding } from "vue";
|
||||||
|
|
||||||
|
interface CopyEl extends HTMLElement {
|
||||||
|
copyValue: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 文本复制指令（默认双击复制） */
|
||||||
|
export const copy: Directive = {
|
||||||
|
mounted(el: CopyEl, binding: DirectiveBinding) {
|
||||||
|
const { value } = binding;
|
||||||
|
if (value) {
|
||||||
|
el.copyValue = value;
|
||||||
|
const arg = binding.arg ?? "dblclick";
|
||||||
|
// Register using addEventListener on mounted, and removeEventListener automatically on unmounted
|
||||||
|
useEventListener(el, arg, () => {
|
||||||
|
const success = copyTextToClipboard(el.copyValue);
|
||||||
|
success
|
||||||
|
? message("复制成功", { type: "success" })
|
||||||
|
: message("复制失败", { type: "error" });
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
throw new Error(
|
||||||
|
'[Directive: copy]: need value! Like v-copy="modelValue"'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
updated(el: CopyEl, binding: DirectiveBinding) {
|
||||||
|
el.copyValue = binding.value;
|
||||||
|
}
|
||||||
|
};
|
||||||
4
src/directives/index.ts
Normal file
4
src/directives/index.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export * from "./auth";
|
||||||
|
export * from "./copy";
|
||||||
|
export * from "./longpress";
|
||||||
|
export * from "./optimize";
|
||||||
63
src/directives/longpress/index.ts
Normal file
63
src/directives/longpress/index.ts
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { useEventListener } from "@vueuse/core";
|
||||||
|
import type { Directive, DirectiveBinding } from "vue";
|
||||||
|
import { subBefore, subAfter, isFunction } from "@pureadmin/utils";
|
||||||
|
|
||||||
|
export const longpress: Directive = {
|
||||||
|
mounted(el: HTMLElement, binding: DirectiveBinding) {
|
||||||
|
const cb = binding.value;
|
||||||
|
if (cb && isFunction(cb)) {
|
||||||
|
let timer = null;
|
||||||
|
let interTimer = null;
|
||||||
|
let num = 500;
|
||||||
|
let interNum = null;
|
||||||
|
const isInter = binding?.arg?.includes(":") ?? false;
|
||||||
|
|
||||||
|
if (isInter) {
|
||||||
|
num = Number(subBefore(binding.arg, ":"));
|
||||||
|
interNum = Number(subAfter(binding.arg, ":"));
|
||||||
|
} else if (binding.arg) {
|
||||||
|
num = Number(binding.arg);
|
||||||
|
}
|
||||||
|
|
||||||
|
const clear = () => {
|
||||||
|
if (timer) {
|
||||||
|
clearTimeout(timer);
|
||||||
|
timer = null;
|
||||||
|
}
|
||||||
|
if (interTimer) {
|
||||||
|
clearInterval(interTimer);
|
||||||
|
interTimer = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDownInter = (ev: PointerEvent) => {
|
||||||
|
ev.preventDefault();
|
||||||
|
if (interTimer === null) {
|
||||||
|
interTimer = setInterval(() => cb(), interNum);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onDown = (ev: PointerEvent) => {
|
||||||
|
clear();
|
||||||
|
ev.preventDefault();
|
||||||
|
if (timer === null) {
|
||||||
|
timer = isInter
|
||||||
|
? setTimeout(() => {
|
||||||
|
cb();
|
||||||
|
onDownInter(ev);
|
||||||
|
}, num)
|
||||||
|
: setTimeout(() => cb(), num);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Register using addEventListener on mounted, and removeEventListener automatically on unmounted
|
||||||
|
useEventListener(el, "pointerdown", onDown);
|
||||||
|
useEventListener(el, "pointerup", clear);
|
||||||
|
useEventListener(el, "pointerleave", clear);
|
||||||
|
} else {
|
||||||
|
throw new Error(
|
||||||
|
'[Directive: longpress]: need callback and callback must be a function! Like v-longpress="callback"'
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
55
src/directives/optimize/index.ts
Normal file
55
src/directives/optimize/index.ts
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import {
|
||||||
|
isFunction,
|
||||||
|
isObject,
|
||||||
|
isArray,
|
||||||
|
debounce,
|
||||||
|
throttle
|
||||||
|
} from "@pureadmin/utils";
|
||||||
|
import { useEventListener } from "@vueuse/core";
|
||||||
|
import type { Directive, DirectiveBinding } from "vue";
|
||||||
|
|
||||||
|
/** 防抖（v-optimize或v-optimize:debounce）、节流（v-optimize:throttle）指令 */
|
||||||
|
export const optimize: Directive = {
|
||||||
|
mounted(el: HTMLElement, binding: DirectiveBinding) {
|
||||||
|
const { value } = binding;
|
||||||
|
const optimizeType = binding.arg ?? "debounce";
|
||||||
|
const type = ["debounce", "throttle"].find(t => t === optimizeType);
|
||||||
|
if (type) {
|
||||||
|
if (value && value.event && isFunction(value.fn)) {
|
||||||
|
let params = value?.params;
|
||||||
|
if (params) {
|
||||||
|
if (isArray(params) || isObject(params)) {
|
||||||
|
params = isObject(params) ? Array.of(params) : params;
|
||||||
|
} else {
|
||||||
|
throw new Error(
|
||||||
|
"[Directive: optimize]: `params` must be an array or object"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Register using addEventListener on mounted, and removeEventListener automatically on unmounted
|
||||||
|
useEventListener(
|
||||||
|
el,
|
||||||
|
value.event,
|
||||||
|
type === "debounce"
|
||||||
|
? debounce(
|
||||||
|
params ? () => value.fn(...params) : value.fn,
|
||||||
|
value?.timeout ?? 200,
|
||||||
|
value?.immediate ?? false
|
||||||
|
)
|
||||||
|
: throttle(
|
||||||
|
params ? () => value.fn(...params) : value.fn,
|
||||||
|
value?.timeout ?? 1000
|
||||||
|
)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
throw new Error(
|
||||||
|
"[Directive: optimize]: `event` and `fn` are required, and `fn` must be a function"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
throw new Error(
|
||||||
|
"[Directive: optimize]: only `debounce` and `throttle` are supported"
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
148
src/layout/components/appMain.vue
Normal file
148
src/layout/components/appMain.vue
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { useGlobal } from "@pureadmin/utils";
|
||||||
|
import backTop from "@/assets/svg/back_top.svg?component";
|
||||||
|
import { h, computed, Transition, defineComponent } from "vue";
|
||||||
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
fixedHeader: Boolean
|
||||||
|
});
|
||||||
|
|
||||||
|
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
|
||||||
|
|
||||||
|
const keepAlive = computed(() => {
|
||||||
|
return $config?.KeepAlive;
|
||||||
|
});
|
||||||
|
|
||||||
|
const transitions = computed(() => {
|
||||||
|
return route => {
|
||||||
|
return route.meta.transition;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
const hideTabs = computed(() => {
|
||||||
|
return $storage?.configure.hideTabs;
|
||||||
|
});
|
||||||
|
|
||||||
|
const layout = computed(() => {
|
||||||
|
return $storage?.layout.layout === "vertical";
|
||||||
|
});
|
||||||
|
|
||||||
|
const getSectionStyle = computed(() => {
|
||||||
|
return [
|
||||||
|
hideTabs.value && layout ? "padding-top: 48px;" : "",
|
||||||
|
!hideTabs.value && layout ? "padding-top: 85px;" : "",
|
||||||
|
hideTabs.value && !layout.value ? "padding-top: 48px" : "",
|
||||||
|
!hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
|
||||||
|
props.fixedHeader ? "" : "padding-top: 0;"
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const transitionMain = defineComponent({
|
||||||
|
render() {
|
||||||
|
return h(
|
||||||
|
Transition,
|
||||||
|
{
|
||||||
|
name:
|
||||||
|
transitions.value(this.route) &&
|
||||||
|
this.route.meta.transition.enterTransition
|
||||||
|
? "pure-classes-transition"
|
||||||
|
: (transitions.value(this.route) &&
|
||||||
|
this.route.meta.transition.name) ||
|
||||||
|
"fade-transform",
|
||||||
|
enterActiveClass:
|
||||||
|
transitions.value(this.route) &&
|
||||||
|
`animate__animated ${this.route.meta.transition.enterTransition}`,
|
||||||
|
leaveActiveClass:
|
||||||
|
transitions.value(this.route) &&
|
||||||
|
`animate__animated ${this.route.meta.transition.leaveTransition}`,
|
||||||
|
mode: "out-in",
|
||||||
|
appear: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
default: () => [this.$slots.default()]
|
||||||
|
}
|
||||||
|
);
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
route: {
|
||||||
|
type: undefined,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section
|
||||||
|
:class="[props.fixedHeader ? 'app-main' : 'app-main-nofixed-header']"
|
||||||
|
:style="getSectionStyle"
|
||||||
|
>
|
||||||
|
<router-view>
|
||||||
|
<template #default="{ Component, route }">
|
||||||
|
<el-scrollbar v-if="props.fixedHeader">
|
||||||
|
<el-backtop title="回到顶部" target=".app-main .el-scrollbar__wrap">
|
||||||
|
<backTop />
|
||||||
|
</el-backtop>
|
||||||
|
<transitionMain :route="route">
|
||||||
|
<keep-alive
|
||||||
|
v-if="keepAlive"
|
||||||
|
:include="usePermissionStoreHook().cachePageList"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="Component"
|
||||||
|
:key="route.fullPath"
|
||||||
|
class="main-content"
|
||||||
|
/>
|
||||||
|
</keep-alive>
|
||||||
|
<component
|
||||||
|
v-else
|
||||||
|
:is="Component"
|
||||||
|
:key="route.fullPath"
|
||||||
|
class="main-content"
|
||||||
|
/>
|
||||||
|
</transitionMain>
|
||||||
|
</el-scrollbar>
|
||||||
|
<div v-else>
|
||||||
|
<transitionMain :route="route">
|
||||||
|
<keep-alive
|
||||||
|
v-if="keepAlive"
|
||||||
|
:include="usePermissionStoreHook().cachePageList"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="Component"
|
||||||
|
:key="route.fullPath"
|
||||||
|
class="main-content"
|
||||||
|
/>
|
||||||
|
</keep-alive>
|
||||||
|
<component
|
||||||
|
v-else
|
||||||
|
:is="Component"
|
||||||
|
:key="route.fullPath"
|
||||||
|
class="main-content"
|
||||||
|
/>
|
||||||
|
</transitionMain>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</router-view>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.app-main {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-main-nofixed-header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-content {
|
||||||
|
margin: 24px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
133
src/layout/components/navbar.vue
Normal file
133
src/layout/components/navbar.vue
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import Search from "./search/index.vue";
|
||||||
|
import Notice from "./notice/index.vue";
|
||||||
|
import mixNav from "./sidebar/mixNav.vue";
|
||||||
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
|
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
||||||
|
import topCollapse from "./sidebar/topCollapse.vue";
|
||||||
|
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||||
|
import Setting from "@iconify-icons/ri/settings-3-line";
|
||||||
|
|
||||||
|
const {
|
||||||
|
layout,
|
||||||
|
device,
|
||||||
|
logout,
|
||||||
|
onPanel,
|
||||||
|
pureApp,
|
||||||
|
username,
|
||||||
|
userAvatar,
|
||||||
|
avatarsStyle,
|
||||||
|
toggleSideBar
|
||||||
|
} = useNav();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
|
||||||
|
>
|
||||||
|
<topCollapse
|
||||||
|
v-if="device === 'mobile'"
|
||||||
|
class="hamburger-container"
|
||||||
|
:is-active="pureApp.sidebar.opened"
|
||||||
|
@toggleClick="toggleSideBar"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Breadcrumb
|
||||||
|
v-if="layout !== 'mix' && device !== 'mobile'"
|
||||||
|
class="breadcrumb-container"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<mixNav v-if="layout === 'mix'" />
|
||||||
|
|
||||||
|
<div v-if="layout === 'vertical'" class="vertical-header-right">
|
||||||
|
<!-- 菜单搜索 -->
|
||||||
|
<Search />
|
||||||
|
<!-- 通知 -->
|
||||||
|
<Notice id="header-notice" />
|
||||||
|
<!-- 退出登录 -->
|
||||||
|
<el-dropdown trigger="click">
|
||||||
|
<span class="el-dropdown-link navbar-bg-hover select-none">
|
||||||
|
<img :src="userAvatar" :style="avatarsStyle" />
|
||||||
|
<p v-if="username" class="dark:text-white">{{ username }}</p>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu class="logout">
|
||||||
|
<el-dropdown-item @click="logout">
|
||||||
|
<IconifyIconOffline
|
||||||
|
:icon="LogoutCircleRLine"
|
||||||
|
style="margin: 5px"
|
||||||
|
/>
|
||||||
|
退出系统
|
||||||
|
</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
<span
|
||||||
|
class="set-icon navbar-bg-hover"
|
||||||
|
title="打开项目配置"
|
||||||
|
@click="onPanel"
|
||||||
|
>
|
||||||
|
<IconifyIconOffline :icon="Setting" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.navbar {
|
||||||
|
width: 100%;
|
||||||
|
height: 48px;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.hamburger-container {
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 48px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vertical-header-right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
min-width: 280px;
|
||||||
|
height: 48px;
|
||||||
|
color: #000000d9;
|
||||||
|
|
||||||
|
.el-dropdown-link {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
height: 48px;
|
||||||
|
padding: 10px;
|
||||||
|
color: #000000d9;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
p {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 22px;
|
||||||
|
height: 22px;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.breadcrumb-container {
|
||||||
|
float: left;
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.logout {
|
||||||
|
max-width: 120px;
|
||||||
|
|
||||||
|
::v-deep(.el-dropdown-menu__item) {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
146
src/layout/components/notice/data.ts
Normal file
146
src/layout/components/notice/data.ts
Normal file
@ -0,0 +1,146 @@
|
|||||||
|
export interface ListItem {
|
||||||
|
avatar: string;
|
||||||
|
title: string;
|
||||||
|
datetime: string;
|
||||||
|
type: string;
|
||||||
|
description: string;
|
||||||
|
status?: "" | "success" | "warning" | "info" | "danger";
|
||||||
|
extra?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TabItem {
|
||||||
|
key: string;
|
||||||
|
name: string;
|
||||||
|
list: ListItem[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export const noticesData: TabItem[] = [
|
||||||
|
{
|
||||||
|
key: "1",
|
||||||
|
name: "通知",
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png",
|
||||||
|
title: "你收到了 12 份新周报",
|
||||||
|
datetime: "一年前",
|
||||||
|
description: "",
|
||||||
|
type: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png",
|
||||||
|
title: "你推荐的 前端高手 已通过第三轮面试",
|
||||||
|
datetime: "一年前",
|
||||||
|
description: "",
|
||||||
|
type: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png",
|
||||||
|
title: "这种模板可以区分多种通知类型",
|
||||||
|
datetime: "一年前",
|
||||||
|
description: "",
|
||||||
|
type: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
|
||||||
|
title:
|
||||||
|
"展示标题内容超过一行后的处理方式，如果内容超过1行将自动截断并支持tooltip显示完整标题。",
|
||||||
|
datetime: "一年前",
|
||||||
|
description: "",
|
||||||
|
type: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
|
||||||
|
title: "左侧图标用于区分不同的类型",
|
||||||
|
datetime: "一年前",
|
||||||
|
description: "",
|
||||||
|
type: "1"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png",
|
||||||
|
title: "左侧图标用于区分不同的类型",
|
||||||
|
datetime: "一年前",
|
||||||
|
description: "",
|
||||||
|
type: "1"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "2",
|
||||||
|
name: "消息",
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
|
||||||
|
title: "李白 评论了你",
|
||||||
|
description: "长风破浪会有时,直挂云帆济沧海",
|
||||||
|
datetime: "一年前",
|
||||||
|
type: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
|
||||||
|
title: "李白 回复了你",
|
||||||
|
description: "行路难，行路难，多歧路，今安在。",
|
||||||
|
datetime: "一年前",
|
||||||
|
type: "2"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar:
|
||||||
|
"https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg",
|
||||||
|
title: "标题",
|
||||||
|
description:
|
||||||
|
"请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容",
|
||||||
|
datetime: "一年前",
|
||||||
|
type: "2"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: "3",
|
||||||
|
name: "代办",
|
||||||
|
list: [
|
||||||
|
{
|
||||||
|
avatar: "",
|
||||||
|
title: "任务名称",
|
||||||
|
description: "任务需要在 2022-11-16 20:00 前启动",
|
||||||
|
datetime: "",
|
||||||
|
extra: "未开始",
|
||||||
|
status: "info",
|
||||||
|
type: "3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar: "",
|
||||||
|
title: "第三方紧急代码变更",
|
||||||
|
description:
|
||||||
|
"一拳提交于 2022-11-16，需在 2022-11-18 前完成代码变更任务",
|
||||||
|
datetime: "",
|
||||||
|
extra: "马上到期",
|
||||||
|
status: "danger",
|
||||||
|
type: "3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar: "",
|
||||||
|
title: "信息安全考试",
|
||||||
|
description: "指派小仙于 2022-12-12 前完成更新并发布",
|
||||||
|
datetime: "",
|
||||||
|
extra: "已耗时 8 天",
|
||||||
|
status: "warning",
|
||||||
|
type: "3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
avatar: "",
|
||||||
|
title: "vue-pure-admin 版本发布",
|
||||||
|
description: "vue-pure-admin 版本发布",
|
||||||
|
datetime: "",
|
||||||
|
extra: "进行中",
|
||||||
|
type: "3"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
];
|
||||||
88
src/layout/components/notice/index.vue
Normal file
88
src/layout/components/notice/index.vue
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from "vue";
|
||||||
|
import { noticesData } from "./data";
|
||||||
|
import NoticeList from "./noticeList.vue";
|
||||||
|
import Bell from "@iconify-icons/ep/bell";
|
||||||
|
|
||||||
|
const noticesNum = ref(0);
|
||||||
|
const notices = ref(noticesData);
|
||||||
|
const activeKey = ref(noticesData[0].key);
|
||||||
|
|
||||||
|
notices.value.map(v => (noticesNum.value += v.list.length));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<el-dropdown trigger="click" placement="bottom-end">
|
||||||
|
<span class="dropdown-badge navbar-bg-hover select-none">
|
||||||
|
<el-badge :value="noticesNum" :max="99">
|
||||||
|
<span class="header-notice-icon">
|
||||||
|
<IconifyIconOffline :icon="Bell" />
|
||||||
|
</span>
|
||||||
|
</el-badge>
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-tabs
|
||||||
|
:stretch="true"
|
||||||
|
v-model="activeKey"
|
||||||
|
class="dropdown-tabs"
|
||||||
|
:style="{ width: notices.length === 0 ? '200px' : '330px' }"
|
||||||
|
>
|
||||||
|
<el-empty
|
||||||
|
v-if="notices.length === 0"
|
||||||
|
description="暂无消息"
|
||||||
|
:image-size="60"
|
||||||
|
/>
|
||||||
|
<span v-else>
|
||||||
|
<template v-for="item in notices" :key="item.key">
|
||||||
|
<el-tab-pane
|
||||||
|
:label="`${item.name}(${item.list.length})`"
|
||||||
|
:name="`${item.key}`"
|
||||||
|
>
|
||||||
|
<el-scrollbar max-height="330px">
|
||||||
|
<div class="noticeList-container">
|
||||||
|
<NoticeList :list="item.list" />
|
||||||
|
</div>
|
||||||
|
</el-scrollbar>
|
||||||
|
</el-tab-pane>
|
||||||
|
</template>
|
||||||
|
</span>
|
||||||
|
</el-tabs>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.dropdown-badge {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 40px;
|
||||||
|
height: 48px;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
.header-notice-icon {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-tabs {
|
||||||
|
.noticeList-container {
|
||||||
|
padding: 15px 24px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__header) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__nav-wrap)::after {
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tabs__nav-wrap) {
|
||||||
|
padding: 0 36px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user