mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-12-14 22:30:31 +08:00
Compare commits
8 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
e29340422a | ||
|
|
e25f4bcf39 | ||
|
|
270df1b17a | ||
|
|
fda66ee37c | ||
|
|
dcd687fe86 | ||
|
|
1f2116c6b9 | ||
|
|
23db7512d0 | ||
|
|
03d68a24d9 |
@@ -1,11 +0,0 @@
|
|||||||
public
|
|
||||||
dist
|
|
||||||
*.d.ts
|
|
||||||
/src/assets
|
|
||||||
package.json
|
|
||||||
eslint.config.js
|
|
||||||
.prettierrc.js
|
|
||||||
commitlint.config.js
|
|
||||||
postcss.config.js
|
|
||||||
tailwind.config.js
|
|
||||||
stylelint.config.js
|
|
||||||
120
.eslintrc.js
120
.eslintrc.js
@@ -1,120 +0,0 @@
|
|||||||
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"
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -7,10 +7,14 @@
|
|||||||
"prettier --cache --write--parser json"
|
"prettier --cache --write--parser json"
|
||||||
],
|
],
|
||||||
"package.json": ["prettier --cache --write"],
|
"package.json": ["prettier --cache --write"],
|
||||||
"*.vue": ["prettier --write", "eslint --cache --fix", "stylelint --fix"],
|
"*.vue": [
|
||||||
|
"prettier --write",
|
||||||
|
"eslint --cache --fix",
|
||||||
|
"stylelint --fix --allow-empty-input"
|
||||||
|
],
|
||||||
"*.{css,scss,html}": [
|
"*.{css,scss,html}": [
|
||||||
"prettier --cache --ignore-unknown --write",
|
"prettier --cache --ignore-unknown --write",
|
||||||
"stylelint --fix"
|
"stylelint --fix --allow-empty-input"
|
||||||
],
|
],
|
||||||
"*.md": ["prettier --cache --ignore-unknown --write"]
|
"*.md": ["prettier --cache --ignore-unknown --write"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,18 +8,23 @@
|
|||||||
|
|
||||||
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`
|
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
|
## Supporting video
|
||||||
|
|
||||||
- [Click Watch Tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
|
[Click me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)
|
||||||
- [Click Watch UI Design](https://www.bilibili.com/video/BV17g411T7rq)
|
[Click me to view the rapid development tutorial](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||||
|
|
||||||
## Docs
|
## Nanny-level documents
|
||||||
|
|
||||||
- [documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
|
[Click me to view vue-pure-admin documentation](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||||
|
[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
|
||||||
|
|
||||||
|
## Quality service, software outsourcing, sponsorship support
|
||||||
|
|
||||||
|
[Click me to view details](https://yiming_chang.gitee.io/pure-admin-doc/pages/service/)
|
||||||
|
|
||||||
## Preview
|
## Preview
|
||||||
|
|
||||||
- [Click me to view the preview station](https://pure-admin-thin.netlify.app/#/login)
|
[Click me to view the preview station](https://pure-admin-thin.netlify.app/#/login)
|
||||||
|
|
||||||
## Maintainer
|
## Maintainer
|
||||||
|
|
||||||
@@ -27,7 +32,7 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
|
|||||||
|
|
||||||
## ⚠️ Attention
|
## ⚠️ 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!
|
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
|
## License
|
||||||
|
|
||||||
|
|||||||
15
README.md
15
README.md
@@ -14,16 +14,21 @@
|
|||||||
|
|
||||||
## 配套视频
|
## 配套视频
|
||||||
|
|
||||||
- [点我查看教程](https://www.bilibili.com/video/BV1kg411v7QT)
|
[点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
|
||||||
- [点我查看 UI 设计](https://www.bilibili.com/video/BV17g411T7rq)
|
[点我查看快速开发教程](https://www.bilibili.com/video/BV1kg411v7QT)
|
||||||
|
|
||||||
## 配套保姆级文档
|
## 配套保姆级文档
|
||||||
|
|
||||||
- [查看文档](https://yiming_chang.gitee.io/pure-admin-doc)
|
[点我查看 vue-pure-admin 文档](https://yiming_chang.gitee.io/pure-admin-doc)
|
||||||
|
[点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
|
||||||
|
|
||||||
|
## 优质服务、软件外包、赞助支持
|
||||||
|
|
||||||
|
[点我查看详情](https://yiming_chang.gitee.io/pure-admin-doc/pages/service/)
|
||||||
|
|
||||||
## 预览
|
## 预览
|
||||||
|
|
||||||
- [查看预览](https://pure-admin-thin.netlify.app/#/login)
|
[查看预览](https://pure-admin-thin.netlify.app/#/login)
|
||||||
|
|
||||||
## 维护者
|
## 维护者
|
||||||
|
|
||||||
@@ -31,7 +36,7 @@
|
|||||||
|
|
||||||
## ⚠️ 注意
|
## ⚠️ 注意
|
||||||
|
|
||||||
- 精简版不接受任何 `issues` 和 `pr`，如果有问题请到完整版 [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) 去提，谢谢！
|
精简版不接受任何 `issues` 和 `pr`，如果有问题请到完整版 [issues](https://github.com/pure-admin/vue-pure-admin/issues/new/choose) 去提，谢谢！
|
||||||
|
|
||||||
## 许可证
|
## 许可证
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ import boxen, { type Options as BoxenOptions } from "boxen";
|
|||||||
dayjs.extend(duration);
|
dayjs.extend(duration);
|
||||||
|
|
||||||
const welcomeMessage = gradientString("cyan", "magenta").multiline(
|
const welcomeMessage = gradientString("cyan", "magenta").multiline(
|
||||||
`Hello! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
|
`您好! 欢迎使用 pure-admin 开源项目\n我们为您精心准备了下面两个贴心的保姆级文档\nhttps://yiming_chang.gitee.io/pure-admin-doc\nhttps://pure-admin-utils.netlify.app`
|
||||||
);
|
);
|
||||||
|
|
||||||
const boxenOptions: BoxenOptions = {
|
const boxenOptions: BoxenOptions = {
|
||||||
|
|||||||
@@ -10,7 +10,14 @@ import pluginTypeScript from "@typescript-eslint/eslint-plugin";
|
|||||||
export default defineFlatConfig([
|
export default defineFlatConfig([
|
||||||
{
|
{
|
||||||
...js.configs.recommended,
|
...js.configs.recommended,
|
||||||
ignores: ["src/assets/**", "src/**/iconfont/**"],
|
ignores: [
|
||||||
|
"**/.*",
|
||||||
|
"dist/*",
|
||||||
|
"*.d.ts",
|
||||||
|
"public/*",
|
||||||
|
"src/assets/**",
|
||||||
|
"src/**/iconfont/**"
|
||||||
|
],
|
||||||
languageOptions: {
|
languageOptions: {
|
||||||
globals: {
|
globals: {
|
||||||
// index.d.ts
|
// index.d.ts
|
||||||
|
|||||||
@@ -10,7 +10,9 @@ export default defineFakeRoute([
|
|||||||
return {
|
return {
|
||||||
success: true,
|
success: true,
|
||||||
data: {
|
data: {
|
||||||
|
avatar: "https://avatars.githubusercontent.com/u/44761321",
|
||||||
username: "admin",
|
username: "admin",
|
||||||
|
nickname: "小铭",
|
||||||
// 一个用户可能有多个角色
|
// 一个用户可能有多个角色
|
||||||
roles: ["admin"],
|
roles: ["admin"],
|
||||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin",
|
||||||
@@ -22,8 +24,9 @@ export default defineFakeRoute([
|
|||||||
return {
|
return {
|
||||||
success: true,
|
success: true,
|
||||||
data: {
|
data: {
|
||||||
|
avatar: "https://avatars.githubusercontent.com/u/52823142",
|
||||||
username: "common",
|
username: "common",
|
||||||
// 一个用户可能有多个角色
|
nickname: "小林",
|
||||||
roles: ["common"],
|
roles: ["common"],
|
||||||
accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
|
accessToken: "eyJhbGciOiJIUzUxMiJ9.common",
|
||||||
refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
|
refreshToken: "eyJhbGciOiJIUzUxMiJ9.commonRefresh",
|
||||||
|
|||||||
71
package.json
71
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "pure-admin-thin",
|
"name": "pure-admin-thin",
|
||||||
"version": "5.1.0",
|
"version": "5.4.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -13,7 +13,6 @@
|
|||||||
"preview:build": "pnpm build && vite preview",
|
"preview:build": "pnpm build && vite preview",
|
||||||
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
|
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
|
||||||
"svgo": "svgo -f . -r",
|
"svgo": "svgo -f . -r",
|
||||||
"cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
|
|
||||||
"clean:cache": "rimraf .eslintcache && rimraf pnpm-lock.yaml && rimraf node_modules && pnpm store prune && pnpm install",
|
"clean:cache": "rimraf .eslintcache && rimraf pnpm-lock.yaml && rimraf node_modules && pnpm store prune && pnpm install",
|
||||||
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
|
"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:prettier": "prettier --write \"src/**/*.{js,ts,json,tsx,css,scss,vue,html,md}\"",
|
||||||
@@ -48,80 +47,79 @@
|
|||||||
"url": "https://github.com/xiaoxian521"
|
"url": "https://github.com/xiaoxian521"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@pureadmin/descriptions": "^1.2.0",
|
"@pureadmin/descriptions": "^1.2.1",
|
||||||
"@pureadmin/table": "^3.1.2",
|
"@pureadmin/table": "^3.1.2",
|
||||||
"@pureadmin/utils": "^2.4.5",
|
"@pureadmin/utils": "^2.4.7",
|
||||||
"@vueuse/core": "^10.9.0",
|
"@vueuse/core": "^10.9.0",
|
||||||
"@vueuse/motion": "^2.1.0",
|
"@vueuse/motion": "^2.1.0",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^1.6.7",
|
"axios": "^1.6.8",
|
||||||
"dayjs": "^1.11.10",
|
"dayjs": "^1.11.10",
|
||||||
"echarts": "^5.5.0",
|
"echarts": "^5.5.0",
|
||||||
"element-plus": "^2.6.0",
|
"element-plus": "^2.7.1",
|
||||||
"js-cookie": "^3.0.5",
|
"js-cookie": "^3.0.5",
|
||||||
"localforage": "^1.10.0",
|
"localforage": "^1.10.0",
|
||||||
"mitt": "^3.0.1",
|
"mitt": "^3.0.1",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"path": "^0.12.7",
|
"path": "^0.12.7",
|
||||||
"pinia": "^2.1.7",
|
"pinia": "^2.1.7",
|
||||||
"pinyin-pro": "^3.19.6",
|
"pinyin-pro": "^3.20.2",
|
||||||
"qs": "^6.11.2",
|
"qs": "^6.12.1",
|
||||||
"responsive-storage": "^2.2.0",
|
"responsive-storage": "^2.2.0",
|
||||||
"sortablejs": "^1.15.2",
|
"sortablejs": "^1.15.2",
|
||||||
"vue": "^3.4.21",
|
"vue": "^3.4.24",
|
||||||
"vue-router": "^4.3.0",
|
"vue-router": "^4.3.2",
|
||||||
"vue-tippy": "^6.4.1",
|
"vue-tippy": "^6.4.1",
|
||||||
"vue-types": "^5.1.1"
|
"vue-types": "^5.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^18.6.1",
|
"@commitlint/cli": "^19.2.2",
|
||||||
"@commitlint/config-conventional": "^18.6.2",
|
"@commitlint/config-conventional": "^19.2.2",
|
||||||
"@commitlint/types": "^18.6.1",
|
"@commitlint/types": "^19.0.3",
|
||||||
"@eslint/js": "^8.57.0",
|
"@eslint/js": "^9.1.1",
|
||||||
"@faker-js/faker": "^8.4.1",
|
"@faker-js/faker": "^8.4.1",
|
||||||
"@iconify-icons/ep": "^1.2.12",
|
"@iconify-icons/ep": "^1.2.12",
|
||||||
"@iconify-icons/ri": "^1.2.10",
|
"@iconify-icons/ri": "^1.2.10",
|
||||||
"@iconify/vue": "^4.1.1",
|
"@iconify/vue": "^4.1.2",
|
||||||
"@pureadmin/theme": "^3.2.0",
|
"@pureadmin/theme": "^3.2.0",
|
||||||
"@types/gradient-string": "^1.1.5",
|
"@types/gradient-string": "^1.1.6",
|
||||||
"@types/js-cookie": "^3.0.6",
|
"@types/js-cookie": "^3.0.6",
|
||||||
"@types/node": "^20.11.24",
|
"@types/node": "^20.12.7",
|
||||||
"@types/nprogress": "^0.2.3",
|
"@types/nprogress": "^0.2.3",
|
||||||
"@types/qs": "^6.9.12",
|
"@types/qs": "^6.9.15",
|
||||||
"@types/sortablejs": "^1.15.8",
|
"@types/sortablejs": "^1.15.8",
|
||||||
"@typescript-eslint/eslint-plugin": "^7.1.1",
|
"@typescript-eslint/eslint-plugin": "^7.7.1",
|
||||||
"@typescript-eslint/parser": "^7.1.1",
|
"@typescript-eslint/parser": "^7.7.1",
|
||||||
"@vitejs/plugin-vue": "^5.0.4",
|
"@vitejs/plugin-vue": "^5.0.4",
|
||||||
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
"@vitejs/plugin-vue-jsx": "^3.1.0",
|
||||||
"autoprefixer": "^10.4.18",
|
"autoprefixer": "^10.4.19",
|
||||||
"boxen": "^7.1.1",
|
"boxen": "^7.1.1",
|
||||||
"cloc": "^2.11.0",
|
"cssnano": "^6.1.2",
|
||||||
"cssnano": "^6.0.5",
|
"eslint": "^9.1.1",
|
||||||
"eslint": "^8.57.0",
|
|
||||||
"eslint-config-prettier": "^9.1.0",
|
"eslint-config-prettier": "^9.1.0",
|
||||||
"eslint-define-config": "^2.1.0",
|
"eslint-define-config": "^2.1.0",
|
||||||
"eslint-plugin-prettier": "^5.1.3",
|
"eslint-plugin-prettier": "^5.1.3",
|
||||||
"eslint-plugin-vue": "^9.22.0",
|
"eslint-plugin-vue": "^9.25.0",
|
||||||
"gradient-string": "^2.0.2",
|
"gradient-string": "^2.0.2",
|
||||||
"husky": "^9.0.11",
|
"husky": "^9.0.11",
|
||||||
"lint-staged": "^15.2.2",
|
"lint-staged": "^15.2.2",
|
||||||
"postcss": "^8.4.35",
|
"postcss": "^8.4.38",
|
||||||
"postcss-html": "^1.6.0",
|
"postcss-html": "^1.6.0",
|
||||||
"postcss-import": "^16.0.1",
|
"postcss-import": "^16.1.0",
|
||||||
"postcss-scss": "^4.0.9",
|
"postcss-scss": "^4.0.9",
|
||||||
"prettier": "^3.2.5",
|
"prettier": "^3.2.5",
|
||||||
"rimraf": "^5.0.5",
|
"rimraf": "^5.0.5",
|
||||||
"rollup-plugin-visualizer": "^5.12.0",
|
"rollup-plugin-visualizer": "^5.12.0",
|
||||||
"sass": "^1.71.1",
|
"sass": "^1.75.0",
|
||||||
"stylelint": "^16.2.1",
|
"stylelint": "^16.3.1",
|
||||||
"stylelint-config-recess-order": "^5.0.0",
|
"stylelint-config-recess-order": "^5.0.1",
|
||||||
"stylelint-config-recommended-vue": "^1.5.0",
|
"stylelint-config-recommended-vue": "^1.5.0",
|
||||||
"stylelint-config-standard-scss": "^13.0.0",
|
"stylelint-config-standard-scss": "^13.1.0",
|
||||||
"stylelint-prettier": "^5.0.0",
|
"stylelint-prettier": "^5.0.0",
|
||||||
"svgo": "^3.2.0",
|
"svgo": "^3.2.0",
|
||||||
"tailwindcss": "^3.4.1",
|
"tailwindcss": "^3.4.3",
|
||||||
"typescript": "^5.3.3",
|
"typescript": "^5.4.5",
|
||||||
"vite": "^5.1.5",
|
"vite": "^5.2.10",
|
||||||
"vite-plugin-cdn-import": "^0.3.5",
|
"vite-plugin-cdn-import": "^0.3.5",
|
||||||
"vite-plugin-compression": "^0.5.1",
|
"vite-plugin-compression": "^0.5.1",
|
||||||
"vite-plugin-fake-server": "^2.1.1",
|
"vite-plugin-fake-server": "^2.1.1",
|
||||||
@@ -143,6 +141,11 @@
|
|||||||
"w3c-hr-time": "*",
|
"w3c-hr-time": "*",
|
||||||
"stable": "*",
|
"stable": "*",
|
||||||
"abab": "*"
|
"abab": "*"
|
||||||
|
},
|
||||||
|
"peerDependencyRules": {
|
||||||
|
"allowedVersions": {
|
||||||
|
"eslint": "9"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
2769
pnpm-lock.yaml
generated
2769
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"Version": "5.1.0",
|
"Version": "5.4.0",
|
||||||
"Title": "PureAdmin",
|
"Title": "PureAdmin",
|
||||||
"FixedHeader": true,
|
"FixedHeader": true,
|
||||||
"HiddenSideBar": false,
|
"HiddenSideBar": false,
|
||||||
@@ -13,6 +13,7 @@
|
|||||||
"Weak": false,
|
"Weak": false,
|
||||||
"HideTabs": false,
|
"HideTabs": false,
|
||||||
"HideFooter": false,
|
"HideFooter": false,
|
||||||
|
"Stretch": false,
|
||||||
"SidebarStatus": true,
|
"SidebarStatus": true,
|
||||||
"EpThemeColor": "#409EFF",
|
"EpThemeColor": "#409EFF",
|
||||||
"ShowLogo": true,
|
"ShowLogo": true,
|
||||||
|
|||||||
@@ -8,8 +8,9 @@
|
|||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from "vue";
|
import { defineComponent } from "vue";
|
||||||
import { ElConfigProvider } from "element-plus";
|
import { ElConfigProvider } from "element-plus";
|
||||||
import zhCn from "element-plus/dist/locale/zh-cn.mjs";
|
|
||||||
import { ReDialog } from "@/components/ReDialog";
|
import { ReDialog } from "@/components/ReDialog";
|
||||||
|
import zhCn from "element-plus/es/locale/lang/zh-cn";
|
||||||
|
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
name: "app",
|
name: "app",
|
||||||
components: {
|
components: {
|
||||||
|
|||||||
@@ -3,9 +3,13 @@ import { http } from "@/utils/http";
|
|||||||
export type UserResult = {
|
export type UserResult = {
|
||||||
success: boolean;
|
success: boolean;
|
||||||
data: {
|
data: {
|
||||||
|
/** 头像 */
|
||||||
|
avatar: string;
|
||||||
/** 用户名 */
|
/** 用户名 */
|
||||||
username: string;
|
username: string;
|
||||||
/** 当前登陆用户的角色 */
|
/** 昵称 */
|
||||||
|
nickname: string;
|
||||||
|
/** 当前登录用户的角色 */
|
||||||
roles: Array<string>;
|
roles: Array<string>;
|
||||||
/** `token` */
|
/** `token` */
|
||||||
accessToken: string;
|
accessToken: string;
|
||||||
@@ -33,7 +37,7 @@ export const getLogin = (data?: object) => {
|
|||||||
return http.request<UserResult>("post", "/login", { data });
|
return http.request<UserResult>("post", "/login", { data });
|
||||||
};
|
};
|
||||||
|
|
||||||
/** 刷新token */
|
/** 刷新`token` */
|
||||||
export const refreshTokenApi = (data?: object) => {
|
export const refreshTokenApi = (data?: object) => {
|
||||||
return http.request<RefreshTokenResult>("post", "/refresh-token", { data });
|
return http.request<RefreshTokenResult>("post", "/refresh-token", { data });
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -51,8 +51,8 @@ const closeAllDialog = () => {
|
|||||||
|
|
||||||
/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`addDialog`调用就不会被挂载
|
/** 千万别忘了在下面这三处引入并注册下，放心注册，不使用`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#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#L12
|
||||||
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L20
|
* https://github.com/pure-admin/vue-pure-admin/blob/main/src/App.vue#L22
|
||||||
*/
|
*/
|
||||||
const ReDialog = withInstall(reDialog);
|
const ReDialog = withInstall(reDialog);
|
||||||
|
|
||||||
|
|||||||
@@ -1,16 +1,20 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import {
|
||||||
closeDialog,
|
|
||||||
dialogStore,
|
|
||||||
type EventType,
|
type EventType,
|
||||||
type ButtonProps,
|
type ButtonProps,
|
||||||
type DialogOptions
|
type DialogOptions,
|
||||||
|
closeDialog,
|
||||||
|
dialogStore
|
||||||
} from "./index";
|
} from "./index";
|
||||||
import { ref, computed } from "vue";
|
import { ref, computed } from "vue";
|
||||||
import { isFunction } from "@pureadmin/utils";
|
import { isFunction } from "@pureadmin/utils";
|
||||||
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||||
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "ReDialog"
|
||||||
|
});
|
||||||
|
|
||||||
const fullscreen = ref(false);
|
const fullscreen = ref(false);
|
||||||
|
|
||||||
const footerButtons = computed(() => {
|
const footerButtons = computed(() => {
|
||||||
@@ -37,6 +41,7 @@ const footerButtons = computed(() => {
|
|||||||
type: "primary",
|
type: "primary",
|
||||||
text: true,
|
text: true,
|
||||||
bg: true,
|
bg: true,
|
||||||
|
popconfirm: options?.popconfirm,
|
||||||
btnClick: ({ dialog: { options, index } }) => {
|
btnClick: ({ dialog: { options, index } }) => {
|
||||||
const done = () =>
|
const done = () =>
|
||||||
closeDialog(options, index, { command: "sure" });
|
closeDialog(options, index, { command: "sure" });
|
||||||
@@ -64,9 +69,10 @@ const fullscreenClass = computed(() => {
|
|||||||
function eventsCallBack(
|
function eventsCallBack(
|
||||||
event: EventType,
|
event: EventType,
|
||||||
options: DialogOptions,
|
options: DialogOptions,
|
||||||
index: number
|
index: number,
|
||||||
|
isClickFullScreen = false
|
||||||
) {
|
) {
|
||||||
fullscreen.value = options?.fullscreen ?? false;
|
if (!isClickFullScreen) fullscreen.value = options?.fullscreen ?? false;
|
||||||
if (options?.[event] && isFunction(options?.[event])) {
|
if (options?.[event] && isFunction(options?.[event])) {
|
||||||
return options?.[event]({ options, index });
|
return options?.[event]({ options, index });
|
||||||
}
|
}
|
||||||
@@ -108,7 +114,17 @@ function handleClose(
|
|||||||
<i
|
<i
|
||||||
v-if="!options?.fullscreen"
|
v-if="!options?.fullscreen"
|
||||||
:class="fullscreenClass"
|
:class="fullscreenClass"
|
||||||
@click="fullscreen = !fullscreen"
|
@click="
|
||||||
|
() => {
|
||||||
|
fullscreen = !fullscreen;
|
||||||
|
eventsCallBack(
|
||||||
|
'fullscreenCallBack',
|
||||||
|
{ ...options, fullscreen },
|
||||||
|
index,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
class="pure-dialog-svg"
|
class="pure-dialog-svg"
|
||||||
@@ -138,19 +154,34 @@ function handleClose(
|
|||||||
<component :is="options?.footerRenderer({ options, index })" />
|
<component :is="options?.footerRenderer({ options, index })" />
|
||||||
</template>
|
</template>
|
||||||
<span v-else>
|
<span v-else>
|
||||||
<el-button
|
<template v-for="(btn, key) in footerButtons(options)" :key="key">
|
||||||
v-for="(btn, key) in footerButtons(options)"
|
<el-popconfirm
|
||||||
:key="key"
|
v-if="btn.popconfirm"
|
||||||
v-bind="btn"
|
v-bind="btn.popconfirm"
|
||||||
@click="
|
@confirm="
|
||||||
btn.btnClick({
|
btn.btnClick({
|
||||||
dialog: { options, index },
|
dialog: { options, index },
|
||||||
button: { btn, index: key }
|
button: { btn, index: key }
|
||||||
})
|
})
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
{{ btn?.label }}
|
<template #reference>
|
||||||
</el-button>
|
<el-button v-bind="btn">{{ btn?.label }}</el-button>
|
||||||
|
</template>
|
||||||
|
</el-popconfirm>
|
||||||
|
<el-button
|
||||||
|
v-else
|
||||||
|
v-bind="btn"
|
||||||
|
@click="
|
||||||
|
btn.btnClick({
|
||||||
|
dialog: { options, index },
|
||||||
|
button: { btn, index: key }
|
||||||
|
})
|
||||||
|
"
|
||||||
|
>
|
||||||
|
{{ btn?.label }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|||||||
@@ -1,11 +1,23 @@
|
|||||||
import type { CSSProperties, VNode, Component } from "vue";
|
import type { CSSProperties, VNode, Component } from "vue";
|
||||||
|
|
||||||
type DoneFn = (cancel?: boolean) => void;
|
type DoneFn = (cancel?: boolean) => void;
|
||||||
type EventType = "open" | "close" | "openAutoFocus" | "closeAutoFocus";
|
type EventType =
|
||||||
|
| "open"
|
||||||
|
| "close"
|
||||||
|
| "openAutoFocus"
|
||||||
|
| "closeAutoFocus"
|
||||||
|
| "fullscreenCallBack";
|
||||||
type ArgsType = {
|
type ArgsType = {
|
||||||
/** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
|
/** `cancel` 点击取消按钮、`sure` 点击确定按钮、`close` 点击右上角关闭按钮或空白页或按下了esc键 */
|
||||||
command: "cancel" | "sure" | "close";
|
command: "cancel" | "sure" | "close";
|
||||||
};
|
};
|
||||||
|
type ButtonType =
|
||||||
|
| "primary"
|
||||||
|
| "success"
|
||||||
|
| "warning"
|
||||||
|
| "danger"
|
||||||
|
| "info"
|
||||||
|
| "text";
|
||||||
|
|
||||||
/** https://element-plus.org/zh-CN/component/dialog.html#attributes */
|
/** https://element-plus.org/zh-CN/component/dialog.html#attributes */
|
||||||
type DialogProps = {
|
type DialogProps = {
|
||||||
@@ -53,6 +65,34 @@ type DialogProps = {
|
|||||||
destroyOnClose?: boolean;
|
destroyOnClose?: boolean;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
//element-plus.org/zh-CN/component/popconfirm.html#attributes
|
||||||
|
type Popconfirm = {
|
||||||
|
/** 标题 */
|
||||||
|
title?: string;
|
||||||
|
/** 确认按钮文字 */
|
||||||
|
confirmButtonText?: string;
|
||||||
|
/** 取消按钮文字 */
|
||||||
|
cancelButtonText?: string;
|
||||||
|
/** 确认按钮类型，默认 `primary` */
|
||||||
|
confirmButtonType?: ButtonType;
|
||||||
|
/** 取消按钮类型，默认 `text` */
|
||||||
|
cancelButtonType?: ButtonType;
|
||||||
|
/** 自定义图标，默认 `QuestionFilled` */
|
||||||
|
icon?: string | Component;
|
||||||
|
/** `Icon` 颜色，默认 `#f90` */
|
||||||
|
iconColor?: string;
|
||||||
|
/** 是否隐藏 `Icon`，默认 `false` */
|
||||||
|
hideIcon?: boolean;
|
||||||
|
/** 关闭时的延迟，默认 `200` */
|
||||||
|
hideAfter?: number;
|
||||||
|
/** 是否将 `popover` 的下拉列表插入至 `body` 元素，默认 `true` */
|
||||||
|
teleported?: boolean;
|
||||||
|
/** 当 `popover` 组件长时间不触发且 `persistent` 属性设置为 `false` 时, `popover` 将会被删除，默认 `false` */
|
||||||
|
persistent?: boolean;
|
||||||
|
/** 弹层宽度，最小宽度 `150px`，默认 `150` */
|
||||||
|
width?: string | number;
|
||||||
|
};
|
||||||
|
|
||||||
type BtnClickDialog = {
|
type BtnClickDialog = {
|
||||||
options?: DialogOptions;
|
options?: DialogOptions;
|
||||||
index?: number;
|
index?: number;
|
||||||
@@ -81,6 +121,8 @@ type ButtonProps = {
|
|||||||
round?: boolean;
|
round?: boolean;
|
||||||
/** 是否为圆形按钮，默认 `false` */
|
/** 是否为圆形按钮，默认 `false` */
|
||||||
circle?: boolean;
|
circle?: boolean;
|
||||||
|
/** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
|
||||||
|
popconfirm?: Popconfirm;
|
||||||
/** 是否为加载中状态，默认 `false` */
|
/** 是否为加载中状态，默认 `false` */
|
||||||
loading?: boolean;
|
loading?: boolean;
|
||||||
/** 自定义加载中状态图标组件 */
|
/** 自定义加载中状态图标组件 */
|
||||||
@@ -118,6 +160,8 @@ interface DialogOptions extends DialogProps {
|
|||||||
props?: any;
|
props?: any;
|
||||||
/** 是否隐藏 `Dialog` 按钮操作区的内容 */
|
/** 是否隐藏 `Dialog` 按钮操作区的内容 */
|
||||||
hideFooter?: boolean;
|
hideFooter?: boolean;
|
||||||
|
/** 确认按钮的 `Popconfirm` 气泡确认框相关配置 */
|
||||||
|
popconfirm?: Popconfirm;
|
||||||
/**
|
/**
|
||||||
* @description 自定义对话框标题的内容渲染器
|
* @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}
|
* @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}
|
||||||
@@ -175,6 +219,14 @@ interface DialogOptions extends DialogProps {
|
|||||||
index: number;
|
index: number;
|
||||||
args: any;
|
args: any;
|
||||||
}) => void;
|
}) => void;
|
||||||
|
/** 点击全屏按钮时的回调 */
|
||||||
|
fullscreenCallBack?: ({
|
||||||
|
options,
|
||||||
|
index
|
||||||
|
}: {
|
||||||
|
options: DialogOptions;
|
||||||
|
index: number;
|
||||||
|
}) => void;
|
||||||
/** 输入焦点聚焦在 `Dialog` 内容时的回调 */
|
/** 输入焦点聚焦在 `Dialog` 内容时的回调 */
|
||||||
openAutoFocus?: ({
|
openAutoFocus?: ({
|
||||||
options,
|
options,
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ import fontIcon from "./src/iconfont";
|
|||||||
const IconifyIconOffline = iconifyIconOffline;
|
const IconifyIconOffline = iconifyIconOffline;
|
||||||
/** 在线图标组件 */
|
/** 在线图标组件 */
|
||||||
const IconifyIconOnline = iconifyIconOnline;
|
const IconifyIconOnline = iconifyIconOnline;
|
||||||
/** iconfont组件 */
|
/** `iconfont`组件 */
|
||||||
const FontIcon = fontIcon;
|
const FontIcon = fontIcon;
|
||||||
|
|
||||||
export { IconifyIconOffline, IconifyIconOnline, FontIcon };
|
export { IconifyIconOffline, IconifyIconOnline, FontIcon };
|
||||||
|
|||||||
@@ -1,5 +1,14 @@
|
|||||||
|
import Sortable from "sortablejs";
|
||||||
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
|
||||||
import { defineComponent, ref, computed, type PropType, nextTick } from "vue";
|
import {
|
||||||
|
type PropType,
|
||||||
|
ref,
|
||||||
|
unref,
|
||||||
|
computed,
|
||||||
|
nextTick,
|
||||||
|
defineComponent,
|
||||||
|
getCurrentInstance
|
||||||
|
} from "vue";
|
||||||
import {
|
import {
|
||||||
delay,
|
delay,
|
||||||
cloneDeep,
|
cloneDeep,
|
||||||
@@ -8,7 +17,6 @@ import {
|
|||||||
getKeyList
|
getKeyList
|
||||||
} from "@pureadmin/utils";
|
} from "@pureadmin/utils";
|
||||||
|
|
||||||
import Sortable from "sortablejs";
|
|
||||||
import DragIcon from "./svg/drag.svg?component";
|
import DragIcon from "./svg/drag.svg?component";
|
||||||
import ExpandIcon from "./svg/expand.svg?component";
|
import ExpandIcon from "./svg/expand.svg?component";
|
||||||
import RefreshIcon from "./svg/refresh.svg?component";
|
import RefreshIcon from "./svg/refresh.svg?component";
|
||||||
@@ -33,6 +41,10 @@ const props = {
|
|||||||
isExpandAll: {
|
isExpandAll: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true
|
default: true
|
||||||
|
},
|
||||||
|
tableKey: {
|
||||||
|
type: [String, Number] as PropType<string | number>,
|
||||||
|
default: "0"
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -45,6 +57,7 @@ export default defineComponent({
|
|||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const checkAll = ref(true);
|
const checkAll = ref(true);
|
||||||
const isIndeterminate = ref(false);
|
const isIndeterminate = ref(false);
|
||||||
|
const instance = getCurrentInstance()!;
|
||||||
const isExpandAll = ref(props.isExpandAll);
|
const isExpandAll = ref(props.isExpandAll);
|
||||||
const filterColumns = cloneDeep(props?.columns).filter(column =>
|
const filterColumns = cloneDeep(props?.columns).filter(column =>
|
||||||
isBoolean(column?.hide)
|
isBoolean(column?.hide)
|
||||||
@@ -118,6 +131,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleCheckedColumnsChange(value: string[]) {
|
function handleCheckedColumnsChange(value: string[]) {
|
||||||
|
checkedColumns.value = value;
|
||||||
const checkedCount = value.length;
|
const checkedCount = value.length;
|
||||||
checkAll.value = checkedCount === checkColumnList.length;
|
checkAll.value = checkedCount === checkColumnList.length;
|
||||||
isIndeterminate.value =
|
isIndeterminate.value =
|
||||||
@@ -166,9 +180,9 @@ export default defineComponent({
|
|||||||
const rowDrop = (event: { preventDefault: () => void }) => {
|
const rowDrop = (event: { preventDefault: () => void }) => {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const wrapper: HTMLElement = document.querySelector(
|
const wrapper: HTMLElement = (
|
||||||
".el-checkbox-group>div"
|
instance?.proxy?.$refs[`GroupRef${unref(props.tableKey)}`] as any
|
||||||
);
|
).$el.firstElementChild;
|
||||||
Sortable.create(wrapper, {
|
Sortable.create(wrapper, {
|
||||||
animation: 300,
|
animation: 300,
|
||||||
handle: ".drag-btn",
|
handle: ".drag-btn",
|
||||||
@@ -293,7 +307,8 @@ export default defineComponent({
|
|||||||
<div class="pt-[6px] pl-[11px]">
|
<div class="pt-[6px] pl-[11px]">
|
||||||
<el-scrollbar max-height="36vh">
|
<el-scrollbar max-height="36vh">
|
||||||
<el-checkbox-group
|
<el-checkbox-group
|
||||||
v-model={checkedColumns.value}
|
ref={`GroupRef${unref(props.tableKey)}`}
|
||||||
|
modelValue={checkedColumns.value}
|
||||||
onChange={value => handleCheckedColumnsChange(value)}
|
onChange={value => handleCheckedColumnsChange(value)}
|
||||||
>
|
>
|
||||||
<el-space
|
<el-space
|
||||||
@@ -301,7 +316,7 @@ export default defineComponent({
|
|||||||
alignment="flex-start"
|
alignment="flex-start"
|
||||||
size={0}
|
size={0}
|
||||||
>
|
>
|
||||||
{checkColumnList.map(item => {
|
{checkColumnList.map((item, index) => {
|
||||||
return (
|
return (
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<DragIcon
|
<DragIcon
|
||||||
@@ -316,7 +331,8 @@ export default defineComponent({
|
|||||||
}) => rowDrop(event)}
|
}) => rowDrop(event)}
|
||||||
/>
|
/>
|
||||||
<el-checkbox
|
<el-checkbox
|
||||||
key={item}
|
key={index}
|
||||||
|
label={item}
|
||||||
value={item}
|
value={item}
|
||||||
onChange={value =>
|
onChange={value =>
|
||||||
handleCheckColumnListChange(value, item)
|
handleCheckColumnListChange(value, item)
|
||||||
|
|||||||
@@ -1,11 +1,104 @@
|
|||||||
.pure-segmented {
|
.pure-segmented {
|
||||||
|
--pure-control-padding-horizontal: 12px;
|
||||||
|
--pure-control-padding-horizontal-sm: 8px;
|
||||||
|
--pure-segmented-track-padding: 2px;
|
||||||
|
--pure-segmented-line-width: 1px;
|
||||||
|
|
||||||
|
--pure-segmented-border-radius-small: 4px;
|
||||||
|
--pure-segmented-border-radius-base: 6px;
|
||||||
|
--pure-segmented-border-radius-large: 8px;
|
||||||
|
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: 2px;
|
padding: var(--pure-segmented-track-padding);
|
||||||
font-size: 14px;
|
font-size: var(--el-font-size-base);
|
||||||
color: rgba(0, 0, 0, 0.65);
|
color: rgba(0, 0, 0, 0.65);
|
||||||
background-color: rgb(0 0 0 / 4%);
|
background-color: rgb(0 0 0 / 4%);
|
||||||
border-radius: 2px;
|
border-radius: var(--pure-segmented-border-radius-base);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-segmented-block {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-segmented-block .pure-segmented-item {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* small */
|
||||||
|
.pure-segmented.pure-segmented--small {
|
||||||
|
border-radius: var(--pure-segmented-border-radius-small);
|
||||||
|
}
|
||||||
|
.pure-segmented.pure-segmented--small .pure-segmented-item {
|
||||||
|
border-radius: var(--el-border-radius-small);
|
||||||
|
}
|
||||||
|
.pure-segmented.pure-segmented--small .pure-segmented-item > div {
|
||||||
|
min-height: calc(
|
||||||
|
var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
|
||||||
|
);
|
||||||
|
line-height: calc(
|
||||||
|
var(--el-component-size-small) - var(--pure-segmented-track-padding) * 2
|
||||||
|
);
|
||||||
|
padding: 0
|
||||||
|
calc(
|
||||||
|
var(--pure-control-padding-horizontal-sm) -
|
||||||
|
var(--pure-segmented-line-width)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* large */
|
||||||
|
.pure-segmented.pure-segmented--large {
|
||||||
|
border-radius: var(--pure-segmented-border-radius-large);
|
||||||
|
}
|
||||||
|
.pure-segmented.pure-segmented--large .pure-segmented-item {
|
||||||
|
border-radius: calc(
|
||||||
|
var(--el-border-radius-base) + var(--el-border-radius-small)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.pure-segmented.pure-segmented--large .pure-segmented-item > div {
|
||||||
|
min-height: calc(
|
||||||
|
var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
|
||||||
|
);
|
||||||
|
line-height: calc(
|
||||||
|
var(--el-component-size-large) - var(--pure-segmented-track-padding) * 2
|
||||||
|
);
|
||||||
|
padding: 0
|
||||||
|
calc(
|
||||||
|
var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
|
||||||
|
);
|
||||||
|
font-size: var(--el-font-size-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* default */
|
||||||
|
.pure-segmented-item {
|
||||||
|
position: relative;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: var(--el-border-radius-base);
|
||||||
|
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
||||||
|
}
|
||||||
|
.pure-segmented .pure-segmented-item > div {
|
||||||
|
min-height: calc(
|
||||||
|
var(--el-component-size) - var(--pure-segmented-track-padding) * 2
|
||||||
|
);
|
||||||
|
line-height: calc(
|
||||||
|
var(--el-component-size) - var(--pure-segmented-track-padding) * 2
|
||||||
|
);
|
||||||
|
padding: 0
|
||||||
|
calc(
|
||||||
|
var(--pure-control-padding-horizontal) - var(--pure-segmented-line-width)
|
||||||
|
);
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
transition: 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-segmented-group {
|
.pure-segmented-group {
|
||||||
@@ -37,23 +130,6 @@
|
|||||||
will-change: transform, width;
|
will-change: transform, width;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-segmented-item {
|
|
||||||
position: relative;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 4px;
|
|
||||||
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-item > div {
|
|
||||||
min-height: 28px;
|
|
||||||
line-height: 28px;
|
|
||||||
padding: 0 11px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-segmented-item > input {
|
.pure-segmented-item > input {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
inset-block-start: 0;
|
inset-block-start: 0;
|
||||||
@@ -67,6 +143,7 @@
|
|||||||
.pure-segmented-item-label {
|
.pure-segmented-item-label {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pure-segmented-item-icon svg {
|
.pure-segmented-item-icon svg {
|
||||||
|
|||||||
@@ -1,5 +1,14 @@
|
|||||||
import "./index.css";
|
import "./index.css";
|
||||||
|
import type { OptionsType } from "./type";
|
||||||
|
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
||||||
import {
|
import {
|
||||||
|
useDark,
|
||||||
|
isNumber,
|
||||||
|
isFunction,
|
||||||
|
useResizeObserver
|
||||||
|
} from "@pureadmin/utils";
|
||||||
|
import {
|
||||||
|
type PropType,
|
||||||
h,
|
h,
|
||||||
ref,
|
ref,
|
||||||
toRef,
|
toRef,
|
||||||
@@ -8,9 +17,6 @@ import {
|
|||||||
defineComponent,
|
defineComponent,
|
||||||
getCurrentInstance
|
getCurrentInstance
|
||||||
} from "vue";
|
} from "vue";
|
||||||
import type { OptionsType } from "./type";
|
|
||||||
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
|
|
||||||
import { isFunction, isNumber, useDark } from "@pureadmin/utils";
|
|
||||||
|
|
||||||
const props = {
|
const props = {
|
||||||
options: {
|
options: {
|
||||||
@@ -22,6 +28,25 @@ const props = {
|
|||||||
type: undefined,
|
type: undefined,
|
||||||
require: false,
|
require: false,
|
||||||
default: "0"
|
default: "0"
|
||||||
|
},
|
||||||
|
/** 将宽度调整为父元素宽度 */
|
||||||
|
block: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
/** 控件尺寸 */
|
||||||
|
size: {
|
||||||
|
type: String as PropType<"small" | "default" | "large">
|
||||||
|
},
|
||||||
|
/** 是否全局禁用，默认 `false` */
|
||||||
|
disabled: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
},
|
||||||
|
/** 当内容发生变化时，设置 `resize` 可使其自适应容器位置 */
|
||||||
|
resize: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@@ -42,7 +67,7 @@ export default defineComponent({
|
|||||||
: ref(0);
|
: ref(0);
|
||||||
|
|
||||||
function handleChange({ option, index }, event: Event) {
|
function handleChange({ option, index }, event: Event) {
|
||||||
if (option.disabled) return;
|
if (props.disabled || option.disabled) return;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
isNumber(props.modelValue)
|
isNumber(props.modelValue)
|
||||||
? emit("update:modelValue", index)
|
? emit("update:modelValue", index)
|
||||||
@@ -52,6 +77,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleMouseenter({ option, index }, event: Event) {
|
function handleMouseenter({ option, index }, event: Event) {
|
||||||
|
if (props.disabled) return;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
curMouseActive.value = index;
|
curMouseActive.value = index;
|
||||||
if (option.disabled || curIndex.value === index) {
|
if (option.disabled || curIndex.value === index) {
|
||||||
@@ -64,6 +90,7 @@ export default defineComponent({
|
|||||||
}
|
}
|
||||||
|
|
||||||
function handleMouseleave(_, event: Event) {
|
function handleMouseleave(_, event: Event) {
|
||||||
|
if (props.disabled) return;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
curMouseActive.value = -1;
|
curMouseActive.value = -1;
|
||||||
}
|
}
|
||||||
@@ -71,12 +98,23 @@ export default defineComponent({
|
|||||||
function handleInit(index = curIndex.value) {
|
function handleInit(index = curIndex.value) {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
|
const curLabelRef = instance?.proxy?.$refs[`labelRef${index}`] as ElRef;
|
||||||
|
if (!curLabelRef) return;
|
||||||
width.value = curLabelRef.clientWidth;
|
width.value = curLabelRef.clientWidth;
|
||||||
translateX.value = curLabelRef.offsetLeft;
|
translateX.value = curLabelRef.offsetLeft;
|
||||||
initStatus.value = true;
|
initStatus.value = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleResizeInit() {
|
||||||
|
useResizeObserver(".pure-segmented", () => {
|
||||||
|
nextTick(() => {
|
||||||
|
handleInit(curIndex.value);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
(props.block || props.resize) && handleResizeInit();
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => curIndex.value,
|
() => curIndex.value,
|
||||||
index => {
|
index => {
|
||||||
@@ -85,11 +123,12 @@ export default defineComponent({
|
|||||||
});
|
});
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
deep: true,
|
|
||||||
immediate: true
|
immediate: true
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
|
||||||
|
watch(() => props.size, handleResizeInit);
|
||||||
|
|
||||||
const rendLabel = () => {
|
const rendLabel = () => {
|
||||||
return props.options.map((option, index) => {
|
return props.options.map((option, index) => {
|
||||||
return (
|
return (
|
||||||
@@ -97,14 +136,16 @@ export default defineComponent({
|
|||||||
ref={`labelRef${index}`}
|
ref={`labelRef${index}`}
|
||||||
class={[
|
class={[
|
||||||
"pure-segmented-item",
|
"pure-segmented-item",
|
||||||
option?.disabled && "pure-segmented-item-disabled"
|
(props.disabled || option?.disabled) &&
|
||||||
|
"pure-segmented-item-disabled"
|
||||||
]}
|
]}
|
||||||
style={{
|
style={{
|
||||||
background:
|
background:
|
||||||
curMouseActive.value === index ? segmentedItembg.value : "",
|
curMouseActive.value === index ? segmentedItembg.value : "",
|
||||||
color:
|
color: props.disabled
|
||||||
!option.disabled &&
|
? null
|
||||||
(curIndex.value === index || curMouseActive.value === index)
|
: !option.disabled &&
|
||||||
|
(curIndex.value === index || curMouseActive.value === index)
|
||||||
? isDark.value
|
? isDark.value
|
||||||
? "rgba(255, 255, 255, 0.85)"
|
? "rgba(255, 255, 255, 0.85)"
|
||||||
: "rgba(0,0,0,.88)"
|
: "rgba(0,0,0,.88)"
|
||||||
@@ -148,7 +189,14 @@ export default defineComponent({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return () => (
|
return () => (
|
||||||
<div class="pure-segmented">
|
<div
|
||||||
|
class={{
|
||||||
|
"pure-segmented": true,
|
||||||
|
"pure-segmented-block": props.block,
|
||||||
|
"pure-segmented--large": props.size === "large",
|
||||||
|
"pure-segmented--small": props.size === "small"
|
||||||
|
}}
|
||||||
|
>
|
||||||
<div class="pure-segmented-group">
|
<div class="pure-segmented-group">
|
||||||
<div
|
<div
|
||||||
class="pure-segmented-item-selected"
|
class="pure-segmented-item-selected"
|
||||||
|
|||||||
@@ -1,6 +1,10 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { h, onMounted, ref, useSlots } from "vue";
|
import { h, onMounted, ref, useSlots } from "vue";
|
||||||
import { useTippy, type TippyOptions } from "vue-tippy";
|
import { type TippyOptions, useTippy } from "vue-tippy";
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: "ReText"
|
||||||
|
});
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
// 行数
|
// 行数
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import type { App } from "vue";
|
|
||||||
import axios from "axios";
|
import axios from "axios";
|
||||||
|
import type { App } from "vue";
|
||||||
|
|
||||||
let config: object = {};
|
let config: object = {};
|
||||||
const { VITE_PUBLIC_PATH } = import.meta.env;
|
const { VITE_PUBLIC_PATH } = import.meta.env;
|
||||||
@@ -35,7 +35,7 @@ export const getPlatformConfig = async (app: App): Promise<undefined> => {
|
|||||||
})
|
})
|
||||||
.then(({ data: config }) => {
|
.then(({ data: config }) => {
|
||||||
let $config = app.config.globalProperties.$config;
|
let $config = app.config.globalProperties.$config;
|
||||||
// 自动注入项目配置
|
// 自动注入系统配置
|
||||||
if (app && $config && typeof config === "object") {
|
if (app && $config && typeof config === "object") {
|
||||||
$config = Object.assign($config, config);
|
$config = Object.assign($config, config);
|
||||||
app.config.globalProperties.$config = $config;
|
app.config.globalProperties.$config = $config;
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
import {
|
import {
|
||||||
isFunction,
|
|
||||||
isObject,
|
|
||||||
isArray,
|
isArray,
|
||||||
|
throttle,
|
||||||
debounce,
|
debounce,
|
||||||
throttle
|
isObject,
|
||||||
|
isFunction
|
||||||
} from "@pureadmin/utils";
|
} from "@pureadmin/utils";
|
||||||
import { useEventListener } from "@vueuse/core";
|
import { useEventListener } from "@vueuse/core";
|
||||||
import type { Directive, DirectiveBinding } from "vue";
|
import type { Directive, DirectiveBinding } from "vue";
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Footer from "./footer/index.vue";
|
import Footer from "./footer/index.vue";
|
||||||
import { useGlobal } from "@pureadmin/utils";
|
import { useGlobal, isNumber } from "@pureadmin/utils";
|
||||||
import KeepAliveFrame from "./keepAliveFrame/index.vue";
|
import KeepAliveFrame from "./keepAliveFrame/index.vue";
|
||||||
import backTop from "@/assets/svg/back_top.svg?component";
|
import backTop from "@/assets/svg/back_top.svg?component";
|
||||||
import { h, computed, Transition, defineComponent } from "vue";
|
import { h, computed, Transition, defineComponent } from "vue";
|
||||||
@@ -30,16 +30,28 @@ const hideFooter = computed(() => {
|
|||||||
return $storage?.configure.hideFooter;
|
return $storage?.configure.hideFooter;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const stretch = computed(() => {
|
||||||
|
return $storage?.configure.stretch;
|
||||||
|
});
|
||||||
|
|
||||||
const layout = computed(() => {
|
const layout = computed(() => {
|
||||||
return $storage?.layout.layout === "vertical";
|
return $storage?.layout.layout === "vertical";
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const getMainWidth = computed(() => {
|
||||||
|
return isNumber(stretch.value)
|
||||||
|
? stretch.value + "px"
|
||||||
|
: stretch.value
|
||||||
|
? "1440px"
|
||||||
|
: "100%";
|
||||||
|
});
|
||||||
|
|
||||||
const getSectionStyle = computed(() => {
|
const getSectionStyle = computed(() => {
|
||||||
return [
|
return [
|
||||||
hideTabs.value && layout ? "padding-top: 48px;" : "",
|
hideTabs.value && layout ? "padding-top: 48px;" : "",
|
||||||
!hideTabs.value && layout ? "padding-top: 85px;" : "",
|
!hideTabs.value && layout ? "padding-top: 81px;" : "",
|
||||||
hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
|
hideTabs.value && !layout.value ? "padding-top: 48px;" : "",
|
||||||
!hideTabs.value && !layout.value ? "padding-top: 85px;" : "",
|
!hideTabs.value && !layout.value ? "padding-top: 81px;" : "",
|
||||||
props.fixedHeader
|
props.fixedHeader
|
||||||
? ""
|
? ""
|
||||||
: `padding-top: 0;${
|
: `padding-top: 0;${
|
||||||
@@ -96,12 +108,15 @@ const transitionMain = defineComponent({
|
|||||||
v-if="props.fixedHeader"
|
v-if="props.fixedHeader"
|
||||||
:wrap-style="{
|
:wrap-style="{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
'flex-wrap': 'wrap'
|
'flex-wrap': 'wrap',
|
||||||
|
'max-width': getMainWidth,
|
||||||
|
margin: '0 auto',
|
||||||
|
transition: 'all 300ms cubic-bezier(0.4, 0, 0.2, 1)'
|
||||||
}"
|
}"
|
||||||
:view-style="{
|
:view-style="{
|
||||||
display: 'flex',
|
display: 'flex',
|
||||||
flex: 'auto',
|
flex: 'auto',
|
||||||
overflow: 'auto',
|
overflow: 'hidden',
|
||||||
'flex-direction': 'column'
|
'flex-direction': 'column'
|
||||||
}"
|
}"
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -63,7 +63,6 @@ watch(
|
|||||||
}
|
}
|
||||||
);
|
);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<template v-for="[fullPath, Comp] in compList" :key="fullPath">
|
<template v-for="[fullPath, Comp] in compList" :key="fullPath">
|
||||||
<div v-show="fullPath === props.currRoute.fullPath" class="w-full h-full">
|
<div v-show="fullPath === props.currRoute.fullPath" class="w-full h-full">
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import Search from "./search/index.vue";
|
|||||||
import Notice from "./notice/index.vue";
|
import Notice from "./notice/index.vue";
|
||||||
import mixNav from "./sidebar/mixNav.vue";
|
import mixNav from "./sidebar/mixNav.vue";
|
||||||
import { useNav } from "@/layout/hooks/useNav";
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
|
import FullScreen from "./sidebar/fullScreen.vue";
|
||||||
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
||||||
import topCollapse from "./sidebar/topCollapse.vue";
|
import topCollapse from "./sidebar/topCollapse.vue";
|
||||||
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
|
||||||
@@ -40,7 +41,9 @@ const {
|
|||||||
<div v-if="layout === 'vertical'" class="vertical-header-right">
|
<div v-if="layout === 'vertical'" class="vertical-header-right">
|
||||||
<!-- 菜单搜索 -->
|
<!-- 菜单搜索 -->
|
||||||
<Search id="header-search" />
|
<Search id="header-search" />
|
||||||
<!-- 通知 -->
|
<!-- 全屏 -->
|
||||||
|
<FullScreen id="full-screen" />
|
||||||
|
<!-- 消息通知 -->
|
||||||
<Notice id="header-notice" />
|
<Notice id="header-notice" />
|
||||||
<!-- 退出登录 -->
|
<!-- 退出登录 -->
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
@@ -62,7 +65,7 @@ const {
|
|||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<span
|
<span
|
||||||
class="set-icon navbar-bg-hover"
|
class="set-icon navbar-bg-hover"
|
||||||
title="打开项目配置"
|
title="打开系统配置"
|
||||||
@click="onPanel"
|
@click="onPanel"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline :icon="Setting" />
|
<IconifyIconOffline :icon="Setting" />
|
||||||
@@ -120,7 +123,7 @@ const {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logout {
|
.logout {
|
||||||
max-width: 120px;
|
width: 120px;
|
||||||
|
|
||||||
::v-deep(.el-dropdown-menu__item) {
|
::v-deep(.el-dropdown-menu__item) {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
@@ -51,7 +51,7 @@ onBeforeUnmount(() => {
|
|||||||
<div
|
<div
|
||||||
class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
|
class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
|
||||||
>
|
>
|
||||||
<h4 class="dark:text-white">项目配置</h4>
|
<h4 class="dark:text-white">系统配置</h4>
|
||||||
<span
|
<span
|
||||||
v-tippy="{
|
v-tippy="{
|
||||||
content: '关闭配置',
|
content: '关闭配置',
|
||||||
|
|||||||
@@ -13,13 +13,15 @@ import panel from "../panel/index.vue";
|
|||||||
import { emitter } from "@/utils/mitt";
|
import { emitter } from "@/utils/mitt";
|
||||||
import { useNav } from "@/layout/hooks/useNav";
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
import { useAppStoreHook } from "@/store/modules/app";
|
import { useAppStoreHook } from "@/store/modules/app";
|
||||||
import { useDark, useGlobal, debounce } from "@pureadmin/utils";
|
|
||||||
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
||||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||||
import Segmented, { type OptionsType } from "@/components/ReSegmented";
|
import Segmented, { type OptionsType } from "@/components/ReSegmented";
|
||||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||||
|
import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
|
||||||
|
|
||||||
import Check from "@iconify-icons/ep/check";
|
import Check from "@iconify-icons/ep/check";
|
||||||
|
import LeftArrow from "@iconify-icons/ri/arrow-left-s-line";
|
||||||
|
import RightArrow from "@iconify-icons/ri/arrow-right-s-line";
|
||||||
import dayIcon from "@/assets/svg/day.svg?component";
|
import dayIcon from "@/assets/svg/day.svg?component";
|
||||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||||
import systemIcon from "@/assets/svg/system.svg?component";
|
import systemIcon from "@/assets/svg/system.svg?component";
|
||||||
@@ -64,7 +66,8 @@ const settings = reactive({
|
|||||||
showLogo: $storage.configure.showLogo,
|
showLogo: $storage.configure.showLogo,
|
||||||
showModel: $storage.configure.showModel,
|
showModel: $storage.configure.showModel,
|
||||||
hideFooter: $storage.configure.hideFooter,
|
hideFooter: $storage.configure.hideFooter,
|
||||||
multiTagsCache: $storage.configure.multiTagsCache
|
multiTagsCache: $storage.configure.multiTagsCache,
|
||||||
|
stretch: $storage.configure.stretch
|
||||||
});
|
});
|
||||||
|
|
||||||
const getThemeColorStyle = computed(() => {
|
const getThemeColorStyle = computed(() => {
|
||||||
@@ -141,6 +144,32 @@ function setFalse(Doms): any {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 页宽 */
|
||||||
|
const stretchTypeOptions = computed<Array<OptionsType>>(() => {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: "固定",
|
||||||
|
tip: "紧凑页面，轻松找到所需信息",
|
||||||
|
value: "fixed"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "自定义",
|
||||||
|
tip: "最小1280、最大1600",
|
||||||
|
value: "custom"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const setStretch = value => {
|
||||||
|
settings.stretch = value;
|
||||||
|
storageConfigureChange("stretch", value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stretchTypeChange = ({ option }) => {
|
||||||
|
const { value } = option;
|
||||||
|
value === "custom" ? setStretch(1440) : setStretch(false);
|
||||||
|
};
|
||||||
|
|
||||||
/** 主题色 激活选择项 */
|
/** 主题色 激活选择项 */
|
||||||
const getThemeColor = computed(() => {
|
const getThemeColor = computed(() => {
|
||||||
return current => {
|
return current => {
|
||||||
@@ -160,6 +189,10 @@ const getThemeColor = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const pClass = computed(() => {
|
||||||
|
return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"];
|
||||||
|
});
|
||||||
|
|
||||||
const themeOptions = computed<Array<OptionsType>>(() => {
|
const themeOptions = computed<Array<OptionsType>>(() => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
@@ -186,18 +219,20 @@ const themeOptions = computed<Array<OptionsType>>(() => {
|
|||||||
];
|
];
|
||||||
});
|
});
|
||||||
|
|
||||||
const markOptions: Array<OptionsType> = [
|
const markOptions = computed<Array<OptionsType>>(() => {
|
||||||
{
|
return [
|
||||||
label: "灵动",
|
{
|
||||||
tip: "灵动标签，添趣生辉",
|
label: "灵动",
|
||||||
value: "smart"
|
tip: "灵动标签，添趣生辉",
|
||||||
},
|
value: "smart"
|
||||||
{
|
},
|
||||||
label: "卡片",
|
{
|
||||||
tip: "卡片标签，高效浏览",
|
label: "卡片",
|
||||||
value: "card"
|
tip: "卡片标签，高效浏览",
|
||||||
}
|
value: "card"
|
||||||
];
|
}
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
/** 设置导航模式 */
|
/** 设置导航模式 */
|
||||||
function setLayoutModel(layout: string) {
|
function setLayoutModel(layout: string) {
|
||||||
@@ -260,7 +295,7 @@ function watchSystemThemeChange() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onBeforeMount(() => {
|
onBeforeMount(() => {
|
||||||
/* 初始化项目配置 */
|
/* 初始化系统配置 */
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
watchSystemThemeChange();
|
watchSystemThemeChange();
|
||||||
settings.greyVal &&
|
settings.greyVal &&
|
||||||
@@ -277,9 +312,10 @@ onUnmounted(() => removeMatchMedia);
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<panel>
|
<panel>
|
||||||
<div class="p-6">
|
<div class="p-5">
|
||||||
<p class="mb-3 font-medium text-sm dark:text-white">整体风格</p>
|
<p :class="pClass">整体风格</p>
|
||||||
<Segmented
|
<Segmented
|
||||||
|
resize
|
||||||
class="select-none"
|
class="select-none"
|
||||||
:modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
|
:modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
|
||||||
:options="themeOptions"
|
:options="themeOptions"
|
||||||
@@ -295,7 +331,7 @@ onUnmounted(() => removeMatchMedia);
|
|||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<p class="mt-5 mb-3 font-medium text-sm dark:text-white">主题色</p>
|
<p :class="['mt-5', pClass]">主题色</p>
|
||||||
<ul class="theme-color">
|
<ul class="theme-color">
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in themeColors"
|
v-for="(item, index) in themeColors"
|
||||||
@@ -314,7 +350,7 @@ onUnmounted(() => removeMatchMedia);
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p class="mt-5 mb-3 font-medium text-sm dark:text-white">导航模式</p>
|
<p :class="['mt-5', pClass]">导航模式</p>
|
||||||
<ul class="pure-theme">
|
<ul class="pure-theme">
|
||||||
<li
|
<li
|
||||||
ref="verticalRef"
|
ref="verticalRef"
|
||||||
@@ -356,15 +392,60 @@ onUnmounted(() => removeMatchMedia);
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p class="mt-5 mb-3 font-medium text-base dark:text-white">页签风格</p>
|
<span v-if="useAppStoreHook().getViewportWidth > 1280">
|
||||||
|
<p :class="['mt-5', pClass]">页宽</p>
|
||||||
|
<Segmented
|
||||||
|
resize
|
||||||
|
class="mb-2 select-none"
|
||||||
|
:modelValue="isNumber(settings.stretch) ? 1 : 0"
|
||||||
|
:options="stretchTypeOptions"
|
||||||
|
@change="stretchTypeChange"
|
||||||
|
/>
|
||||||
|
<el-input-number
|
||||||
|
v-if="isNumber(settings.stretch)"
|
||||||
|
v-model="settings.stretch as number"
|
||||||
|
:min="1280"
|
||||||
|
:max="1600"
|
||||||
|
controls-position="right"
|
||||||
|
@change="value => setStretch(value)"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
v-else
|
||||||
|
v-ripple="{ class: 'text-gray-300' }"
|
||||||
|
class="bg-transparent flex-c w-full h-20 rounded-md border border-[var(--pure-border-color)]"
|
||||||
|
@click="setStretch(!settings.stretch)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="flex-bc transition-all duration-300"
|
||||||
|
:class="[settings.stretch ? 'w-[24%]' : 'w-[50%]']"
|
||||||
|
style="color: var(--el-color-primary)"
|
||||||
|
>
|
||||||
|
<IconifyIconOffline
|
||||||
|
:icon="settings.stretch ? RightArrow : LeftArrow"
|
||||||
|
height="20"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="flex-grow border-b border-dashed"
|
||||||
|
style="border-color: var(--el-color-primary)"
|
||||||
|
/>
|
||||||
|
<IconifyIconOffline
|
||||||
|
:icon="settings.stretch ? LeftArrow : RightArrow"
|
||||||
|
height="20"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<p :class="['mt-4', pClass]">页签风格</p>
|
||||||
<Segmented
|
<Segmented
|
||||||
|
resize
|
||||||
class="select-none"
|
class="select-none"
|
||||||
:modelValue="markValue === 'smart' ? 0 : 1"
|
:modelValue="markValue === 'smart' ? 0 : 1"
|
||||||
:options="markOptions"
|
:options="markOptions"
|
||||||
@change="onChange"
|
@change="onChange"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<p class="mt-5 mb-1 font-medium text-sm dark:text-white">界面显示</p>
|
<p class="mt-5 font-medium text-sm dark:text-white">界面显示</p>
|
||||||
<ul class="setting">
|
<ul class="setting">
|
||||||
<li>
|
<li>
|
||||||
<span class="dark:text-white">灰色模式</span>
|
<span class="dark:text-white">灰色模式</span>
|
||||||
@@ -543,7 +624,7 @@ onUnmounted(() => removeMatchMedia);
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 4px 0;
|
padding: 3px 0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
70
src/layout/components/sidebar/centerCollapse.vue
Normal file
70
src/layout/components/sidebar/centerCollapse.vue
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { computed } from "vue";
|
||||||
|
import { useGlobal } from "@pureadmin/utils";
|
||||||
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
|
|
||||||
|
import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
isActive: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
|
isActive: false
|
||||||
|
});
|
||||||
|
|
||||||
|
const { tooltipEffect } = useNav();
|
||||||
|
|
||||||
|
const iconClass = computed(() => {
|
||||||
|
return ["w-[16px]", "h-[16px]"];
|
||||||
|
});
|
||||||
|
|
||||||
|
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||||
|
const themeColor = computed(() => $storage.layout?.themeColor);
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: "toggleClick"): void;
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const toggleClick = () => {
|
||||||
|
emit("toggleClick");
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-tippy="{
|
||||||
|
content: props.isActive ? '点击折叠' : '点击展开',
|
||||||
|
theme: tooltipEffect,
|
||||||
|
hideOnClick: 'toggle',
|
||||||
|
placement: 'right'
|
||||||
|
}"
|
||||||
|
class="center-collapse"
|
||||||
|
@click="toggleClick"
|
||||||
|
>
|
||||||
|
<IconifyIconOffline
|
||||||
|
:icon="ArrowLeft"
|
||||||
|
:class="[iconClass, themeColor === 'light' ? '' : 'text-primary']"
|
||||||
|
:style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.center-collapse {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 2px;
|
||||||
|
z-index: 1002;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 34px;
|
||||||
|
cursor: pointer;
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
border: 1px solid var(--pure-border-color);
|
||||||
|
border-radius: 4px;
|
||||||
|
transform: translate(12px, -50%);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
30
src/layout/components/sidebar/fullScreen.vue
Normal file
30
src/layout/components/sidebar/fullScreen.vue
Normal file
@@ -0,0 +1,30 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, watch } from "vue";
|
||||||
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
|
|
||||||
|
const screenIcon = ref();
|
||||||
|
const { toggle, isFullscreen, Fullscreen, ExitFullscreen } = useNav();
|
||||||
|
|
||||||
|
isFullscreen.value = !!(
|
||||||
|
document.fullscreenElement ||
|
||||||
|
document.webkitFullscreenElement ||
|
||||||
|
document.mozFullScreenElement ||
|
||||||
|
document.msFullscreenElement
|
||||||
|
);
|
||||||
|
|
||||||
|
watch(
|
||||||
|
isFullscreen,
|
||||||
|
full => {
|
||||||
|
screenIcon.value = full ? ExitFullscreen : Fullscreen;
|
||||||
|
},
|
||||||
|
{
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
);
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<span class="fullscreen-icon navbar-bg-hover" @click="toggle">
|
||||||
|
<IconifyIconOffline :icon="screenIcon" />
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Search from "../search/index.vue";
|
import Search from "../search/index.vue";
|
||||||
import Notice from "../notice/index.vue";
|
import Notice from "../notice/index.vue";
|
||||||
|
import FullScreen from "./fullScreen.vue";
|
||||||
import SidebarItem from "./sidebarItem.vue";
|
import SidebarItem from "./sidebarItem.vue";
|
||||||
import { isAllEmpty } from "@pureadmin/utils";
|
import { isAllEmpty } from "@pureadmin/utils";
|
||||||
import { ref, nextTick, computed } from "vue";
|
import { ref, nextTick, computed } from "vue";
|
||||||
@@ -59,7 +60,9 @@ nextTick(() => {
|
|||||||
<div class="horizontal-header-right">
|
<div class="horizontal-header-right">
|
||||||
<!-- 菜单搜索 -->
|
<!-- 菜单搜索 -->
|
||||||
<Search id="header-search" />
|
<Search id="header-search" />
|
||||||
<!-- 通知 -->
|
<!-- 全屏 -->
|
||||||
|
<FullScreen id="full-screen" />
|
||||||
|
<!-- 消息通知 -->
|
||||||
<Notice id="header-notice" />
|
<Notice id="header-notice" />
|
||||||
<!-- 退出登录 -->
|
<!-- 退出登录 -->
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
@@ -81,7 +84,7 @@ nextTick(() => {
|
|||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<span
|
<span
|
||||||
class="set-icon navbar-bg-hover"
|
class="set-icon navbar-bg-hover"
|
||||||
title="打开项目配置"
|
title="打开系统配置"
|
||||||
@click="onPanel"
|
@click="onPanel"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline :icon="Setting" />
|
<IconifyIconOffline :icon="Setting" />
|
||||||
@@ -96,7 +99,7 @@ nextTick(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logout {
|
.logout {
|
||||||
max-width: 120px;
|
width: 120px;
|
||||||
|
|
||||||
::v-deep(.el-dropdown-menu__item) {
|
::v-deep(.el-dropdown-menu__item) {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
@@ -41,7 +41,7 @@ const toggleClick = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="collapse-container">
|
<div class="left-collapse">
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
v-tippy="{
|
v-tippy="{
|
||||||
content: props.isActive ? '点击折叠' : '点击展开',
|
content: props.isActive ? '点击折叠' : '点击展开',
|
||||||
@@ -58,7 +58,7 @@ const toggleClick = () => {
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.collapse-container {
|
.left-collapse {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|||||||
@@ -2,6 +2,7 @@
|
|||||||
import extraIcon from "./extraIcon.vue";
|
import extraIcon from "./extraIcon.vue";
|
||||||
import Search from "../search/index.vue";
|
import Search from "../search/index.vue";
|
||||||
import Notice from "../notice/index.vue";
|
import Notice from "../notice/index.vue";
|
||||||
|
import FullScreen from "./fullScreen.vue";
|
||||||
import { isAllEmpty } from "@pureadmin/utils";
|
import { isAllEmpty } from "@pureadmin/utils";
|
||||||
import { useNav } from "@/layout/hooks/useNav";
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
|
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
|
||||||
@@ -91,7 +92,9 @@ watch(
|
|||||||
<div class="horizontal-header-right">
|
<div class="horizontal-header-right">
|
||||||
<!-- 菜单搜索 -->
|
<!-- 菜单搜索 -->
|
||||||
<Search id="header-search" />
|
<Search id="header-search" />
|
||||||
<!-- 通知 -->
|
<!-- 全屏 -->
|
||||||
|
<FullScreen id="full-screen" />
|
||||||
|
<!-- 消息通知 -->
|
||||||
<Notice id="header-notice" />
|
<Notice id="header-notice" />
|
||||||
<!-- 退出登录 -->
|
<!-- 退出登录 -->
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
@@ -113,7 +116,7 @@ watch(
|
|||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<span
|
<span
|
||||||
class="set-icon navbar-bg-hover"
|
class="set-icon navbar-bg-hover"
|
||||||
title="打开项目配置"
|
title="打开系统配置"
|
||||||
@click="onPanel"
|
@click="onPanel"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline :icon="Setting" />
|
<IconifyIconOffline :icon="Setting" />
|
||||||
@@ -128,7 +131,7 @@ watch(
|
|||||||
}
|
}
|
||||||
|
|
||||||
.logout {
|
.logout {
|
||||||
max-width: 120px;
|
width: 120px;
|
||||||
|
|
||||||
::v-deep(.el-dropdown-menu__item) {
|
::v-deep(.el-dropdown-menu__item) {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
|||||||
@@ -144,7 +144,7 @@ function resolvePath(routePath) {
|
|||||||
props.item?.pathList?.length === 2)
|
props.item?.pathList?.length === 2)
|
||||||
"
|
"
|
||||||
truncated
|
truncated
|
||||||
class="!px-4 !text-inherit"
|
class="!w-full !px-4 !text-inherit"
|
||||||
>
|
>
|
||||||
{{ onlyOneChild.meta.title }}
|
{{ onlyOneChild.meta.title }}
|
||||||
</el-text>
|
</el-text>
|
||||||
@@ -156,7 +156,7 @@ function resolvePath(routePath) {
|
|||||||
offset: [0, -10],
|
offset: [0, -10],
|
||||||
theme: tooltipEffect
|
theme: tooltipEffect
|
||||||
}"
|
}"
|
||||||
class="!text-inherit"
|
class="!w-full !text-inherit"
|
||||||
>
|
>
|
||||||
{{ onlyOneChild.meta.title }}
|
{{ onlyOneChild.meta.title }}
|
||||||
</ReText>
|
</ReText>
|
||||||
@@ -184,18 +184,21 @@ function resolvePath(routePath) {
|
|||||||
</div>
|
</div>
|
||||||
<ReText
|
<ReText
|
||||||
v-if="
|
v-if="
|
||||||
!(
|
layout === 'mix' && toRaw(props.item.meta.icon)
|
||||||
layout === 'vertical' &&
|
? !isCollapse || props.item?.pathList?.length !== 2
|
||||||
isCollapse &&
|
: !(
|
||||||
toRaw(props.item.meta.icon) &&
|
layout === 'vertical' &&
|
||||||
props.item.parentId === null
|
isCollapse &&
|
||||||
)
|
toRaw(props.item.meta.icon) &&
|
||||||
|
props.item.parentId === null
|
||||||
|
)
|
||||||
"
|
"
|
||||||
:tippyProps="{
|
:tippyProps="{
|
||||||
offset: [0, -10],
|
offset: [0, -10],
|
||||||
theme: tooltipEffect
|
theme: tooltipEffect
|
||||||
}"
|
}"
|
||||||
:class="{
|
:class="{
|
||||||
|
'!w-full': true,
|
||||||
'!text-inherit': true,
|
'!text-inherit': true,
|
||||||
'!px-4':
|
'!px-4':
|
||||||
layout !== 'horizontal' &&
|
layout !== 'horizontal' &&
|
||||||
|
|||||||
@@ -3,8 +3,9 @@ import Logo from "./logo.vue";
|
|||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
import { emitter } from "@/utils/mitt";
|
import { emitter } from "@/utils/mitt";
|
||||||
import SidebarItem from "./sidebarItem.vue";
|
import SidebarItem from "./sidebarItem.vue";
|
||||||
import leftCollapse from "./leftCollapse.vue";
|
import LeftCollapse from "./leftCollapse.vue";
|
||||||
import { useNav } from "@/layout/hooks/useNav";
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
|
import CenterCollapse from "./centerCollapse.vue";
|
||||||
import { responsiveStorageNameSpace } from "@/config";
|
import { responsiveStorageNameSpace } from "@/config";
|
||||||
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
|
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
|
||||||
import { findRouteByPath, getParentPaths } from "@/router/utils";
|
import { findRouteByPath, getParentPaths } from "@/router/utils";
|
||||||
@@ -12,6 +13,7 @@ import { usePermissionStoreHook } from "@/store/modules/permission";
|
|||||||
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
|
import { ref, computed, watch, onMounted, onBeforeUnmount } from "vue";
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const isShow = ref(false);
|
||||||
const showLogo = ref(
|
const showLogo = ref(
|
||||||
storageLocal().getItem<StorageConfigs>(
|
storageLocal().getItem<StorageConfigs>(
|
||||||
`${responsiveStorageNameSpace()}configure`
|
`${responsiveStorageNameSpace()}configure`
|
||||||
@@ -88,6 +90,8 @@ onBeforeUnmount(() => {
|
|||||||
<div
|
<div
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
|
:class="['sidebar-container', showLogo ? 'has-logo' : 'no-logo']"
|
||||||
|
@mouseenter.prevent="isShow = true"
|
||||||
|
@mouseleave.prevent="isShow = false"
|
||||||
>
|
>
|
||||||
<Logo v-if="showLogo" :collapse="isCollapse" />
|
<Logo v-if="showLogo" :collapse="isCollapse" />
|
||||||
<el-scrollbar
|
<el-scrollbar
|
||||||
@@ -114,7 +118,12 @@ onBeforeUnmount(() => {
|
|||||||
/>
|
/>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<leftCollapse
|
<CenterCollapse
|
||||||
|
v-if="device !== 'mobile' && (isShow || isCollapse)"
|
||||||
|
:is-active="pureApp.sidebar.opened"
|
||||||
|
@toggleClick="toggleSideBar"
|
||||||
|
/>
|
||||||
|
<LeftCollapse
|
||||||
v-if="device !== 'mobile'"
|
v-if="device !== 'mobile'"
|
||||||
:is-active="pureApp.sidebar.opened"
|
:is-active="pureApp.sidebar.opened"
|
||||||
@toggleClick="toggleSideBar"
|
@toggleClick="toggleSideBar"
|
||||||
|
|||||||
@@ -90,6 +90,10 @@
|
|||||||
padding: 0 12px;
|
padding: 0 12px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.fixed-tag {
|
||||||
|
padding: 0 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,10 +3,11 @@ import { emitter } from "@/utils/mitt";
|
|||||||
import { RouteConfigs } from "../../types";
|
import { RouteConfigs } from "../../types";
|
||||||
import { useTags } from "../../hooks/useTag";
|
import { useTags } from "../../hooks/useTag";
|
||||||
import { routerArrays } from "@/layout/types";
|
import { routerArrays } from "@/layout/types";
|
||||||
import { useFullscreen, onClickOutside } from "@vueuse/core";
|
import { onClickOutside } from "@vueuse/core";
|
||||||
import { handleAliveRoute, getTopMenu } from "@/router/utils";
|
import { handleAliveRoute, getTopMenu } from "@/router/utils";
|
||||||
import { useSettingStoreHook } from "@/store/modules/settings";
|
import { useSettingStoreHook } from "@/store/modules/settings";
|
||||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||||
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||||
import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
|
import { ref, watch, unref, toRaw, nextTick, onBeforeUnmount } from "vue";
|
||||||
import {
|
import {
|
||||||
delay,
|
delay,
|
||||||
@@ -57,7 +58,10 @@ const contextmenuRef = ref();
|
|||||||
const isShowArrow = ref(false);
|
const isShowArrow = ref(false);
|
||||||
const topPath = getTopMenu()?.path;
|
const topPath = getTopMenu()?.path;
|
||||||
const { VITE_HIDE_HOME } = import.meta.env;
|
const { VITE_HIDE_HOME } = import.meta.env;
|
||||||
const { isFullscreen, toggle } = useFullscreen();
|
const fixedTags = [
|
||||||
|
...routerArrays,
|
||||||
|
...usePermissionStoreHook().flatteningRoutes.filter(v => v?.meta?.fixedTag)
|
||||||
|
];
|
||||||
|
|
||||||
const dynamicTagView = async () => {
|
const dynamicTagView = async () => {
|
||||||
await nextTick();
|
await nextTick();
|
||||||
@@ -227,10 +231,13 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
|
|||||||
other?: boolean
|
other?: boolean
|
||||||
): void => {
|
): void => {
|
||||||
if (other) {
|
if (other) {
|
||||||
useMultiTagsStoreHook().handleTags("equal", [
|
useMultiTagsStoreHook().handleTags(
|
||||||
VITE_HIDE_HOME === "false" ? routerArrays[0] : toRaw(getTopMenu()),
|
"equal",
|
||||||
obj
|
[
|
||||||
]);
|
VITE_HIDE_HOME === "false" ? fixedTags : toRaw(getTopMenu()),
|
||||||
|
obj
|
||||||
|
].flat()
|
||||||
|
);
|
||||||
} else {
|
} else {
|
||||||
useMultiTagsStoreHook().handleTags("splice", "", {
|
useMultiTagsStoreHook().handleTags("splice", "", {
|
||||||
startIndex,
|
startIndex,
|
||||||
@@ -243,7 +250,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
|
|||||||
if (tag === "other") {
|
if (tag === "other") {
|
||||||
spliceRoute(1, 1, true);
|
spliceRoute(1, 1, true);
|
||||||
} else if (tag === "left") {
|
} else if (tag === "left") {
|
||||||
spliceRoute(1, valueIndex - 1);
|
spliceRoute(fixedTags.length, valueIndex - 1, true);
|
||||||
} else if (tag === "right") {
|
} else if (tag === "right") {
|
||||||
spliceRoute(valueIndex + 1, multiTags.value.length);
|
spliceRoute(valueIndex + 1, multiTags.value.length);
|
||||||
} else {
|
} else {
|
||||||
@@ -320,35 +327,23 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
|
|||||||
case 5:
|
case 5:
|
||||||
// 关闭全部标签页
|
// 关闭全部标签页
|
||||||
useMultiTagsStoreHook().handleTags("splice", "", {
|
useMultiTagsStoreHook().handleTags("splice", "", {
|
||||||
startIndex: 1,
|
startIndex: fixedTags.length,
|
||||||
length: multiTags.value.length
|
length: multiTags.value.length
|
||||||
});
|
});
|
||||||
router.push(topPath);
|
router.push(topPath);
|
||||||
|
// router.push(fixedTags[fixedTags.length - 1]?.path);
|
||||||
handleAliveRoute(route as ToRouteType);
|
handleAliveRoute(route as ToRouteType);
|
||||||
break;
|
break;
|
||||||
case 6:
|
case 6:
|
||||||
// 整体页面全屏
|
|
||||||
toggle();
|
|
||||||
setTimeout(() => {
|
|
||||||
if (isFullscreen.value) {
|
|
||||||
tagsViews[6].icon = ExitFullscreen;
|
|
||||||
tagsViews[6].text = "退出全屏";
|
|
||||||
} else {
|
|
||||||
tagsViews[6].icon = Fullscreen;
|
|
||||||
tagsViews[6].text = "全屏";
|
|
||||||
}
|
|
||||||
}, 100);
|
|
||||||
break;
|
|
||||||
case 7:
|
|
||||||
// 内容区全屏
|
// 内容区全屏
|
||||||
onContentFullScreen();
|
onContentFullScreen();
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (pureSetting.hiddenSideBar) {
|
if (pureSetting.hiddenSideBar) {
|
||||||
tagsViews[7].icon = ExitFullscreen;
|
tagsViews[6].icon = ExitFullscreen;
|
||||||
tagsViews[7].text = "内容区退出全屏";
|
tagsViews[6].text = "内容区退出全屏";
|
||||||
} else {
|
} else {
|
||||||
tagsViews[7].icon = Fullscreen;
|
tagsViews[6].icon = Fullscreen;
|
||||||
tagsViews[7].text = "内容区全屏";
|
tagsViews[6].text = "内容区全屏";
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
break;
|
break;
|
||||||
@@ -375,10 +370,14 @@ function showMenus(value: boolean) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
function disabledMenus(value: boolean) {
|
function disabledMenus(value: boolean, fixedTag = false) {
|
||||||
Array.of(1, 2, 3, 4, 5).forEach(v => {
|
Array.of(1, 2, 3, 4, 5).forEach(v => {
|
||||||
tagsViews[v].disabled = value;
|
tagsViews[v].disabled = value;
|
||||||
});
|
});
|
||||||
|
if (fixedTag) {
|
||||||
|
tagsViews[2].show = false;
|
||||||
|
tagsViews[2].disabled = true;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是顶级菜单，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
|
/** 检查当前右键的菜单两边是否存在别的菜单，如果左侧的菜单是顶级菜单，则不显示关闭左侧标签页，如果右侧没有菜单，则不显示关闭右侧标签页 */
|
||||||
@@ -395,6 +394,13 @@ function showMenuModel(
|
|||||||
} else {
|
} else {
|
||||||
currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
|
currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
|
||||||
}
|
}
|
||||||
|
function fixedTagDisabled() {
|
||||||
|
if (allRoute[currentIndex]?.meta?.fixedTag) {
|
||||||
|
Array.of(1, 2, 3, 4, 5).forEach(v => {
|
||||||
|
tagsViews[v].disabled = true;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
showMenus(true);
|
showMenus(true);
|
||||||
|
|
||||||
@@ -413,6 +419,7 @@ function showMenuModel(
|
|||||||
tagsViews[v].disabled = false;
|
tagsViews[v].disabled = false;
|
||||||
});
|
});
|
||||||
tagsViews[2].disabled = true;
|
tagsViews[2].disabled = true;
|
||||||
|
fixedTagDisabled();
|
||||||
} else if (currentIndex === 1 && routeLength === 2) {
|
} else if (currentIndex === 1 && routeLength === 2) {
|
||||||
disabledMenus(false);
|
disabledMenus(false);
|
||||||
// 左侧的菜单是顶级菜单，右侧不存在别的菜单
|
// 左侧的菜单是顶级菜单，右侧不存在别的菜单
|
||||||
@@ -420,6 +427,7 @@ function showMenuModel(
|
|||||||
tagsViews[v].show = false;
|
tagsViews[v].show = false;
|
||||||
tagsViews[v].disabled = true;
|
tagsViews[v].disabled = true;
|
||||||
});
|
});
|
||||||
|
fixedTagDisabled();
|
||||||
} else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
|
} else if (routeLength - 1 === currentIndex && currentIndex !== 0) {
|
||||||
// 当前路由是所有路由中的最后一个
|
// 当前路由是所有路由中的最后一个
|
||||||
tagsViews[3].show = false;
|
tagsViews[3].show = false;
|
||||||
@@ -427,29 +435,31 @@ function showMenuModel(
|
|||||||
tagsViews[v].disabled = false;
|
tagsViews[v].disabled = false;
|
||||||
});
|
});
|
||||||
tagsViews[3].disabled = true;
|
tagsViews[3].disabled = true;
|
||||||
|
if (allRoute[currentIndex - 1]?.meta?.fixedTag) {
|
||||||
|
tagsViews[2].show = false;
|
||||||
|
tagsViews[2].disabled = true;
|
||||||
|
}
|
||||||
|
fixedTagDisabled();
|
||||||
} else if (currentIndex === 0 || currentPath === `/redirect${topPath}`) {
|
} else if (currentIndex === 0 || currentPath === `/redirect${topPath}`) {
|
||||||
// 当前路由为顶级菜单
|
// 当前路由为顶级菜单
|
||||||
disabledMenus(true);
|
disabledMenus(true);
|
||||||
} else {
|
} else {
|
||||||
disabledMenus(false);
|
disabledMenus(false, allRoute[currentIndex - 1]?.meta?.fixedTag);
|
||||||
|
fixedTagDisabled();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function openMenu(tag, e) {
|
function openMenu(tag, e) {
|
||||||
closeMenu();
|
closeMenu();
|
||||||
if (tag.path === topPath) {
|
if (tag.path === topPath || tag?.meta?.fixedTag) {
|
||||||
// 右键菜单为顶级菜单，只显示刷新
|
// 右键菜单为顶级菜单或拥有 fixedTag 属性，只显示刷新
|
||||||
showMenus(false);
|
showMenus(false);
|
||||||
tagsViews[0].show = true;
|
tagsViews[0].show = true;
|
||||||
} else if (route.path !== tag.path && route.name !== tag.name) {
|
} else if (route.path !== tag.path && route.name !== tag.name) {
|
||||||
// 右键菜单不匹配当前路由，隐藏刷新
|
// 右键菜单不匹配当前路由，隐藏刷新
|
||||||
tagsViews[0].show = false;
|
tagsViews[0].show = false;
|
||||||
showMenuModel(tag.path, tag.query);
|
showMenuModel(tag.path, tag.query);
|
||||||
} else if (
|
} else if (multiTags.value.length === 2 && route.path !== tag.path) {
|
||||||
// eslint-disable-next-line no-dupe-else-if
|
|
||||||
multiTags.value.length === 2 &&
|
|
||||||
route.path !== tag.path
|
|
||||||
) {
|
|
||||||
showMenus(true);
|
showMenus(true);
|
||||||
// 只有两个标签时不显示关闭其他标签页
|
// 只有两个标签时不显示关闭其他标签页
|
||||||
tagsViews[4].show = false;
|
tagsViews[4].show = false;
|
||||||
@@ -497,7 +507,6 @@ function tagOnClick(item) {
|
|||||||
} else {
|
} else {
|
||||||
router.push({ path });
|
router.push({ path });
|
||||||
}
|
}
|
||||||
// showMenuModel(item?.path, item?.query);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
onClickOutside(contextmenuRef, closeMenu, {
|
onClickOutside(contextmenuRef, closeMenu, {
|
||||||
@@ -509,11 +518,6 @@ watch(route, () => {
|
|||||||
dynamicTagView();
|
dynamicTagView();
|
||||||
});
|
});
|
||||||
|
|
||||||
watch(isFullscreen, () => {
|
|
||||||
tagsViews[6].icon = Fullscreen;
|
|
||||||
tagsViews[6].text = "全屏";
|
|
||||||
});
|
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
if (!instance) return;
|
if (!instance) return;
|
||||||
|
|
||||||
@@ -566,7 +570,11 @@ onBeforeUnmount(() => {
|
|||||||
v-for="(item, index) in multiTags"
|
v-for="(item, index) in multiTags"
|
||||||
:ref="'dynamic' + index"
|
:ref="'dynamic' + index"
|
||||||
:key="index"
|
:key="index"
|
||||||
:class="['scroll-item is-closable', linkIsActive(item)]"
|
:class="[
|
||||||
|
'scroll-item is-closable',
|
||||||
|
linkIsActive(item),
|
||||||
|
!isAllEmpty(item?.meta?.fixedTag) && 'fixed-tag'
|
||||||
|
]"
|
||||||
@contextmenu.prevent="openMenu(item, $event)"
|
@contextmenu.prevent="openMenu(item, $event)"
|
||||||
@mouseenter.prevent="onMouseenter(index)"
|
@mouseenter.prevent="onMouseenter(index)"
|
||||||
@mouseleave.prevent="onMouseleave(index)"
|
@mouseleave.prevent="onMouseleave(index)"
|
||||||
@@ -579,8 +587,10 @@ onBeforeUnmount(() => {
|
|||||||
</span>
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="
|
v-if="
|
||||||
iconIsActive(item, index) ||
|
isAllEmpty(item?.meta?.fixedTag)
|
||||||
(index === activeIndex && index !== 0)
|
? iconIsActive(item, index) ||
|
||||||
|
(index === activeIndex && index !== 0)
|
||||||
|
: false
|
||||||
"
|
"
|
||||||
class="el-icon-close"
|
class="el-icon-close"
|
||||||
@click.stop="deleteMenu(item)"
|
@click.stop="deleteMenu(item)"
|
||||||
|
|||||||
@@ -35,7 +35,8 @@ export function useLayout() {
|
|||||||
hideFooter: $config.HideFooter ?? true,
|
hideFooter: $config.HideFooter ?? true,
|
||||||
showLogo: $config?.ShowLogo ?? true,
|
showLogo: $config?.ShowLogo ?? true,
|
||||||
showModel: $config?.ShowModel ?? "smart",
|
showModel: $config?.ShowModel ?? "smart",
|
||||||
multiTagsCache: $config?.MultiTagsCache ?? false
|
multiTagsCache: $config?.MultiTagsCache ?? false,
|
||||||
|
stretch: $config?.Stretch ?? false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,23 +1,28 @@
|
|||||||
import { storeToRefs } from "pinia";
|
import { storeToRefs } from "pinia";
|
||||||
import { getConfig } from "@/config";
|
import { getConfig } from "@/config";
|
||||||
import { emitter } from "@/utils/mitt";
|
import { emitter } from "@/utils/mitt";
|
||||||
import userAvatar from "@/assets/user.jpg";
|
import Avatar from "@/assets/user.jpg";
|
||||||
import { getTopMenu } from "@/router/utils";
|
import { getTopMenu } from "@/router/utils";
|
||||||
import { useGlobal } from "@pureadmin/utils";
|
import { useFullscreen } from "@vueuse/core";
|
||||||
import type { routeMetaType } from "../types";
|
import type { routeMetaType } from "../types";
|
||||||
import { useRouter, useRoute } from "vue-router";
|
import { useRouter, useRoute } from "vue-router";
|
||||||
import { router, remainingPaths } from "@/router";
|
import { router, remainingPaths } from "@/router";
|
||||||
import { computed, type CSSProperties } from "vue";
|
import { computed, type CSSProperties } from "vue";
|
||||||
import { useAppStoreHook } from "@/store/modules/app";
|
import { useAppStoreHook } from "@/store/modules/app";
|
||||||
import { useUserStoreHook } from "@/store/modules/user";
|
import { useUserStoreHook } from "@/store/modules/user";
|
||||||
|
import { useGlobal, isAllEmpty } from "@pureadmin/utils";
|
||||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||||
|
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
|
||||||
|
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
|
||||||
|
|
||||||
const errorInfo = "当前路由配置不正确，请检查配置";
|
const errorInfo =
|
||||||
|
"The current routing configuration is incorrect, please check the configuration";
|
||||||
|
|
||||||
export function useNav() {
|
export function useNav() {
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const pureApp = useAppStoreHook();
|
const pureApp = useAppStoreHook();
|
||||||
const routers = useRouter().options.routes;
|
const routers = useRouter().options.routes;
|
||||||
|
const { isFullscreen, toggle } = useFullscreen();
|
||||||
const { wholeMenus } = storeToRefs(usePermissionStoreHook());
|
const { wholeMenus } = storeToRefs(usePermissionStoreHook());
|
||||||
/** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
|
/** 平台`layout`中所有`el-tooltip`的`effect`配置，默认`light` */
|
||||||
const tooltipEffect = getConfig()?.TooltipEffect ?? "light";
|
const tooltipEffect = getConfig()?.TooltipEffect ?? "light";
|
||||||
@@ -32,9 +37,18 @@ export function useNav() {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
/** 用户名 */
|
/** 头像（如果头像为空则使用 src/assets/user.jpg ） */
|
||||||
|
const userAvatar = computed(() => {
|
||||||
|
return isAllEmpty(useUserStoreHook()?.avatar)
|
||||||
|
? Avatar
|
||||||
|
: useUserStoreHook()?.avatar;
|
||||||
|
});
|
||||||
|
|
||||||
|
/** 昵称（如果昵称为空则显示用户名） */
|
||||||
const username = computed(() => {
|
const username = computed(() => {
|
||||||
return useUserStoreHook()?.username;
|
return isAllEmpty(useUserStoreHook()?.nickname)
|
||||||
|
? useUserStoreHook()?.username
|
||||||
|
: useUserStoreHook()?.nickname;
|
||||||
});
|
});
|
||||||
|
|
||||||
const avatarsStyle = computed(() => {
|
const avatarsStyle = computed(() => {
|
||||||
@@ -120,6 +134,10 @@ export function useNav() {
|
|||||||
logout,
|
logout,
|
||||||
routers,
|
routers,
|
||||||
$storage,
|
$storage,
|
||||||
|
isFullscreen,
|
||||||
|
Fullscreen,
|
||||||
|
ExitFullscreen,
|
||||||
|
toggle,
|
||||||
backTopMenu,
|
backTopMenu,
|
||||||
onPanel,
|
onPanel,
|
||||||
getDivStyle,
|
getDivStyle,
|
||||||
|
|||||||
@@ -103,17 +103,10 @@ export function useTags() {
|
|||||||
disabled: multiTags.value.length > 1 ? false : true,
|
disabled: multiTags.value.length > 1 ? false : true,
|
||||||
show: true
|
show: true
|
||||||
},
|
},
|
||||||
{
|
|
||||||
icon: Fullscreen,
|
|
||||||
text: "整体页面全屏",
|
|
||||||
divided: true,
|
|
||||||
disabled: false,
|
|
||||||
show: true
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
icon: Fullscreen,
|
icon: Fullscreen,
|
||||||
text: "内容区全屏",
|
text: "内容区全屏",
|
||||||
divided: false,
|
divided: true,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
show: true
|
show: true
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -89,7 +89,8 @@ let isAutoCloseSidebar = true;
|
|||||||
useResizeObserver(appWrapperRef, entries => {
|
useResizeObserver(appWrapperRef, entries => {
|
||||||
if (isMobile) return;
|
if (isMobile) return;
|
||||||
const entry = entries[0];
|
const entry = entries[0];
|
||||||
const [{ inlineSize: width }] = entry.borderBoxSize;
|
const [{ inlineSize: width, blockSize: height }] = entry.borderBoxSize;
|
||||||
|
useAppStoreHook().setViewportSize({ width, height });
|
||||||
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
|
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
|
||||||
/** width app-wrapper类容器宽度
|
/** width app-wrapper类容器宽度
|
||||||
* 0 < width <= 760 隐藏侧边栏
|
* 0 < width <= 760 隐藏侧边栏
|
||||||
|
|||||||
@@ -10,6 +10,8 @@ import {
|
|||||||
ElAutocomplete,
|
ElAutocomplete,
|
||||||
ElAutoResizer,
|
ElAutoResizer,
|
||||||
ElAvatar,
|
ElAvatar,
|
||||||
|
ElAnchor,
|
||||||
|
ElAnchorLink,
|
||||||
ElBacktop,
|
ElBacktop,
|
||||||
ElBadge,
|
ElBadge,
|
||||||
ElBreadcrumb,
|
ElBreadcrumb,
|
||||||
@@ -123,6 +125,8 @@ const components = [
|
|||||||
ElAutocomplete,
|
ElAutocomplete,
|
||||||
ElAutoResizer,
|
ElAutoResizer,
|
||||||
ElAvatar,
|
ElAvatar,
|
||||||
|
ElAnchor,
|
||||||
|
ElAnchorLink,
|
||||||
ElBacktop,
|
ElBacktop,
|
||||||
ElBadge,
|
ElBadge,
|
||||||
ElBreadcrumb,
|
ElBreadcrumb,
|
||||||
|
|||||||
@@ -17,9 +17,9 @@ import {
|
|||||||
isIncludeAllChildren
|
isIncludeAllChildren
|
||||||
} from "@pureadmin/utils";
|
} from "@pureadmin/utils";
|
||||||
import { getConfig } from "@/config";
|
import { getConfig } from "@/config";
|
||||||
import type { menuType } from "@/layout/types";
|
|
||||||
import { buildHierarchyTree } from "@/utils/tree";
|
import { buildHierarchyTree } from "@/utils/tree";
|
||||||
import { userKey, type DataInfo } from "@/utils/auth";
|
import { userKey, type DataInfo } from "@/utils/auth";
|
||||||
|
import { type menuType, routerArrays } from "@/layout/types";
|
||||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||||
import { usePermissionStoreHook } from "@/store/modules/permission";
|
import { usePermissionStoreHook } from "@/store/modules/permission";
|
||||||
const IFrame = () => import("@/layout/frameView.vue");
|
const IFrame = () => import("@/layout/frameView.vue");
|
||||||
@@ -81,7 +81,7 @@ function isOneOfArray(a: Array<string>, b: Array<string>) {
|
|||||||
: true;
|
: true;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 从localStorage里取出当前登陆用户的角色roles，过滤无权限的菜单 */
|
/** 从localStorage里取出当前登录用户的角色roles，过滤无权限的菜单 */
|
||||||
function filterNoPermissionTree(data: RouteComponent[]) {
|
function filterNoPermissionTree(data: RouteComponent[]) {
|
||||||
const currentRoles =
|
const currentRoles =
|
||||||
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
|
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
|
||||||
@@ -178,6 +178,14 @@ function handleAsyncRoutes(routeList) {
|
|||||||
);
|
);
|
||||||
usePermissionStoreHook().handleWholeMenus(routeList);
|
usePermissionStoreHook().handleWholeMenus(routeList);
|
||||||
}
|
}
|
||||||
|
if (!useMultiTagsStoreHook().getMultiTagsCache) {
|
||||||
|
useMultiTagsStoreHook().handleTags("equal", [
|
||||||
|
...routerArrays,
|
||||||
|
...usePermissionStoreHook().flatteningRoutes.filter(
|
||||||
|
v => v?.meta?.fixedTag
|
||||||
|
)
|
||||||
|
]);
|
||||||
|
}
|
||||||
addPathMatch();
|
addPathMatch();
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -359,9 +367,23 @@ function hasAuth(value: string | Array<string>): boolean {
|
|||||||
return isAuths ? true : false;
|
return isAuths ? true : false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleTopMenu(route) {
|
||||||
|
if (route?.children && route.children.length > 1) {
|
||||||
|
if (route.redirect) {
|
||||||
|
return route.children.filter(cur => cur.path === route.redirect)[0];
|
||||||
|
} else {
|
||||||
|
return route.children[0];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return route;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/** 获取所有菜单中的第一个菜单（顶级菜单）*/
|
/** 获取所有菜单中的第一个菜单（顶级菜单）*/
|
||||||
function getTopMenu(tag = false): menuType {
|
function getTopMenu(tag = false): menuType {
|
||||||
const topMenu = usePermissionStoreHook().wholeMenus[0]?.children[0];
|
const topMenu = handleTopMenu(
|
||||||
|
usePermissionStoreHook().wholeMenus[0]?.children[0]
|
||||||
|
);
|
||||||
tag && useMultiTagsStoreHook().handleTags("push", topMenu);
|
tag && useMultiTagsStoreHook().handleTags("push", topMenu);
|
||||||
return topMenu;
|
return topMenu;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,12 @@
|
|||||||
import { store } from "@/store";
|
|
||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import type { appType } from "./types";
|
import {
|
||||||
import { getConfig, responsiveStorageNameSpace } from "@/config";
|
type appType,
|
||||||
import { deviceDetection, storageLocal } from "@pureadmin/utils";
|
store,
|
||||||
|
getConfig,
|
||||||
|
storageLocal,
|
||||||
|
deviceDetection,
|
||||||
|
responsiveStorageNameSpace
|
||||||
|
} from "../utils";
|
||||||
|
|
||||||
export const useAppStore = defineStore({
|
export const useAppStore = defineStore({
|
||||||
id: "pure-app",
|
id: "pure-app",
|
||||||
@@ -20,7 +24,12 @@ export const useAppStore = defineStore({
|
|||||||
storageLocal().getItem<StorageConfigs>(
|
storageLocal().getItem<StorageConfigs>(
|
||||||
`${responsiveStorageNameSpace()}layout`
|
`${responsiveStorageNameSpace()}layout`
|
||||||
)?.layout ?? getConfig().Layout,
|
)?.layout ?? getConfig().Layout,
|
||||||
device: deviceDetection() ? "mobile" : "desktop"
|
device: deviceDetection() ? "mobile" : "desktop",
|
||||||
|
// 浏览器窗口的可视区域大小
|
||||||
|
viewportSize: {
|
||||||
|
width: document.documentElement.clientWidth,
|
||||||
|
height: document.documentElement.clientHeight
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
getters: {
|
getters: {
|
||||||
getSidebarStatus(state) {
|
getSidebarStatus(state) {
|
||||||
@@ -28,6 +37,12 @@ export const useAppStore = defineStore({
|
|||||||
},
|
},
|
||||||
getDevice(state) {
|
getDevice(state) {
|
||||||
return state.device;
|
return state.device;
|
||||||
|
},
|
||||||
|
getViewportWidth(state) {
|
||||||
|
return state.viewportSize.width;
|
||||||
|
},
|
||||||
|
getViewportHeight(state) {
|
||||||
|
return state.viewportSize.height;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
@@ -59,6 +74,12 @@ export const useAppStore = defineStore({
|
|||||||
},
|
},
|
||||||
setLayout(layout) {
|
setLayout(layout) {
|
||||||
this.layout = layout;
|
this.layout = layout;
|
||||||
|
},
|
||||||
|
setViewportSize(size) {
|
||||||
|
this.viewportSize = size;
|
||||||
|
},
|
||||||
|
setSortSwap(val) {
|
||||||
|
this.sortSwap = val;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
import { store } from "@/store";
|
|
||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { storageLocal } from "@pureadmin/utils";
|
import {
|
||||||
import { getConfig, responsiveStorageNameSpace } from "@/config";
|
store,
|
||||||
|
getConfig,
|
||||||
|
storageLocal,
|
||||||
|
responsiveStorageNameSpace
|
||||||
|
} from "../utils";
|
||||||
|
|
||||||
export const useEpThemeStore = defineStore({
|
export const useEpThemeStore = defineStore({
|
||||||
id: "pure-epTheme",
|
id: "pure-epTheme",
|
||||||
|
|||||||
@@ -1,9 +1,18 @@
|
|||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { store } from "@/store";
|
import {
|
||||||
import { routerArrays } from "@/layout/types";
|
type multiType,
|
||||||
import { responsiveStorageNameSpace } from "@/config";
|
type positionType,
|
||||||
import type { multiType, positionType } from "./types";
|
store,
|
||||||
import { isEqual, isBoolean, isUrl, storageLocal } from "@pureadmin/utils";
|
isUrl,
|
||||||
|
isEqual,
|
||||||
|
isNumber,
|
||||||
|
isBoolean,
|
||||||
|
getConfig,
|
||||||
|
routerArrays,
|
||||||
|
storageLocal,
|
||||||
|
responsiveStorageNameSpace
|
||||||
|
} from "../utils";
|
||||||
|
import { usePermissionStoreHook } from "./permission";
|
||||||
|
|
||||||
export const useMultiTagsStore = defineStore({
|
export const useMultiTagsStore = defineStore({
|
||||||
id: "pure-multiTags",
|
id: "pure-multiTags",
|
||||||
@@ -15,7 +24,12 @@ export const useMultiTagsStore = defineStore({
|
|||||||
? storageLocal().getItem<StorageConfigs>(
|
? storageLocal().getItem<StorageConfigs>(
|
||||||
`${responsiveStorageNameSpace()}tags`
|
`${responsiveStorageNameSpace()}tags`
|
||||||
)
|
)
|
||||||
: [...routerArrays],
|
: [
|
||||||
|
...routerArrays,
|
||||||
|
...usePermissionStoreHook().flatteningRoutes.filter(
|
||||||
|
v => v?.meta?.fixedTag
|
||||||
|
)
|
||||||
|
],
|
||||||
multiTagsCache: storageLocal().getItem<StorageConfigs>(
|
multiTagsCache: storageLocal().getItem<StorageConfigs>(
|
||||||
`${responsiveStorageNameSpace()}configure`
|
`${responsiveStorageNameSpace()}configure`
|
||||||
)?.multiTagsCache
|
)?.multiTagsCache
|
||||||
@@ -100,6 +114,14 @@ export const useMultiTagsStore = defineStore({
|
|||||||
}
|
}
|
||||||
this.multiTags.push(value);
|
this.multiTags.push(value);
|
||||||
this.tagsCache(this.multiTags);
|
this.tagsCache(this.multiTags);
|
||||||
|
if (
|
||||||
|
getConfig()?.MaxTagsLevel &&
|
||||||
|
isNumber(getConfig().MaxTagsLevel)
|
||||||
|
) {
|
||||||
|
if (this.multiTags.length > getConfig().MaxTagsLevel) {
|
||||||
|
this.multiTags.splice(1, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case "splice":
|
case "splice":
|
||||||
|
|||||||
@@ -1,10 +1,16 @@
|
|||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { store } from "@/store";
|
import {
|
||||||
import type { cacheType } from "./types";
|
type cacheType,
|
||||||
import { constantMenus } from "@/router";
|
store,
|
||||||
|
debounce,
|
||||||
|
ascending,
|
||||||
|
getKeyList,
|
||||||
|
filterTree,
|
||||||
|
constantMenus,
|
||||||
|
filterNoPermissionTree,
|
||||||
|
formatFlatteningRoutes
|
||||||
|
} from "../utils";
|
||||||
import { useMultiTagsStoreHook } from "./multiTags";
|
import { useMultiTagsStoreHook } from "./multiTags";
|
||||||
import { debounce, getKeyList } from "@pureadmin/utils";
|
|
||||||
import { ascending, filterTree, filterNoPermissionTree } from "@/router/utils";
|
|
||||||
|
|
||||||
export const usePermissionStore = defineStore({
|
export const usePermissionStore = defineStore({
|
||||||
id: "pure-permission",
|
id: "pure-permission",
|
||||||
@@ -13,6 +19,8 @@ export const usePermissionStore = defineStore({
|
|||||||
constantMenus,
|
constantMenus,
|
||||||
// 整体路由生成的菜单（静态、动态）
|
// 整体路由生成的菜单（静态、动态）
|
||||||
wholeMenus: [],
|
wholeMenus: [],
|
||||||
|
// 整体路由（一维数组格式）
|
||||||
|
flatteningRoutes: [],
|
||||||
// 缓存页面keepAlive
|
// 缓存页面keepAlive
|
||||||
cachePageList: []
|
cachePageList: []
|
||||||
}),
|
}),
|
||||||
@@ -22,6 +30,9 @@ export const usePermissionStore = defineStore({
|
|||||||
this.wholeMenus = filterNoPermissionTree(
|
this.wholeMenus = filterNoPermissionTree(
|
||||||
filterTree(ascending(this.constantMenus.concat(routes)))
|
filterTree(ascending(this.constantMenus.concat(routes)))
|
||||||
);
|
);
|
||||||
|
this.flatteningRoutes = formatFlatteningRoutes(
|
||||||
|
this.constantMenus.concat(routes)
|
||||||
|
);
|
||||||
},
|
},
|
||||||
cacheOperate({ mode, name }: cacheType) {
|
cacheOperate({ mode, name }: cacheType) {
|
||||||
const delIndex = this.cachePageList.findIndex(v => v === name);
|
const delIndex = this.cachePageList.findIndex(v => v === name);
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { store } from "@/store";
|
import { type setType, store, getConfig } from "../utils";
|
||||||
import { getConfig } from "@/config";
|
|
||||||
import type { setType } from "./types";
|
|
||||||
|
|
||||||
export const useSettingStore = defineStore({
|
export const useSettingStore = defineStore({
|
||||||
id: "pure-setting",
|
id: "pure-setting",
|
||||||
|
|||||||
@@ -1,19 +1,30 @@
|
|||||||
import { defineStore } from "pinia";
|
import { defineStore } from "pinia";
|
||||||
import { store } from "@/store";
|
import {
|
||||||
import type { userType } from "./types";
|
type userType,
|
||||||
import { routerArrays } from "@/layout/types";
|
store,
|
||||||
import { router, resetRouter } from "@/router";
|
router,
|
||||||
import { storageLocal } from "@pureadmin/utils";
|
resetRouter,
|
||||||
import { getLogin, refreshTokenApi } from "@/api/user";
|
routerArrays,
|
||||||
import type { UserResult, RefreshTokenResult } from "@/api/user";
|
storageLocal
|
||||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
} from "../utils";
|
||||||
|
import {
|
||||||
|
type UserResult,
|
||||||
|
type RefreshTokenResult,
|
||||||
|
getLogin,
|
||||||
|
refreshTokenApi
|
||||||
|
} from "@/api/user";
|
||||||
|
import { useMultiTagsStoreHook } from "./multiTags";
|
||||||
import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
|
import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
|
||||||
|
|
||||||
export const useUserStore = defineStore({
|
export const useUserStore = defineStore({
|
||||||
id: "pure-user",
|
id: "pure-user",
|
||||||
state: (): userType => ({
|
state: (): userType => ({
|
||||||
|
// 头像
|
||||||
|
avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "",
|
||||||
// 用户名
|
// 用户名
|
||||||
username: storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "",
|
username: storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "",
|
||||||
|
// 昵称
|
||||||
|
nickname: storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "",
|
||||||
// 页面级别权限
|
// 页面级别权限
|
||||||
roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
|
roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
|
||||||
// 是否勾选了登录页的免登录
|
// 是否勾选了登录页的免登录
|
||||||
@@ -22,10 +33,18 @@ export const useUserStore = defineStore({
|
|||||||
loginDay: 7
|
loginDay: 7
|
||||||
}),
|
}),
|
||||||
actions: {
|
actions: {
|
||||||
|
/** 存储头像 */
|
||||||
|
SET_AVATAR(avatar: string) {
|
||||||
|
this.avatar = avatar;
|
||||||
|
},
|
||||||
/** 存储用户名 */
|
/** 存储用户名 */
|
||||||
SET_USERNAME(username: string) {
|
SET_USERNAME(username: string) {
|
||||||
this.username = username;
|
this.username = username;
|
||||||
},
|
},
|
||||||
|
/** 存储昵称 */
|
||||||
|
SET_NICKNAME(nickname: string) {
|
||||||
|
this.nickname = nickname;
|
||||||
|
},
|
||||||
/** 存储角色 */
|
/** 存储角色 */
|
||||||
SET_ROLES(roles: Array<string>) {
|
SET_ROLES(roles: Array<string>) {
|
||||||
this.roles = roles;
|
this.roles = roles;
|
||||||
@@ -43,10 +62,8 @@ export const useUserStore = defineStore({
|
|||||||
return new Promise<UserResult>((resolve, reject) => {
|
return new Promise<UserResult>((resolve, reject) => {
|
||||||
getLogin(data)
|
getLogin(data)
|
||||||
.then(data => {
|
.then(data => {
|
||||||
if (data) {
|
if (data?.success) setToken(data.data);
|
||||||
setToken(data.data);
|
resolve(data);
|
||||||
resolve(data);
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
reject(error);
|
reject(error);
|
||||||
|
|||||||
@@ -19,6 +19,7 @@ export type appType = {
|
|||||||
};
|
};
|
||||||
layout: string;
|
layout: string;
|
||||||
device: string;
|
device: string;
|
||||||
|
viewportSize: { width: number; height: number };
|
||||||
};
|
};
|
||||||
|
|
||||||
export type multiType = {
|
export type multiType = {
|
||||||
@@ -36,7 +37,9 @@ export type setType = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
export type userType = {
|
export type userType = {
|
||||||
|
avatar?: string;
|
||||||
username?: string;
|
username?: string;
|
||||||
|
nickname?: string;
|
||||||
roles?: Array<string>;
|
roles?: Array<string>;
|
||||||
isRemembered?: boolean;
|
isRemembered?: boolean;
|
||||||
loginDay?: number;
|
loginDay?: number;
|
||||||
28
src/store/utils.ts
Normal file
28
src/store/utils.ts
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
export { store } from "@/store";
|
||||||
|
export { routerArrays } from "@/layout/types";
|
||||||
|
export { router, resetRouter, constantMenus } from "@/router";
|
||||||
|
export { getConfig, responsiveStorageNameSpace } from "@/config";
|
||||||
|
export {
|
||||||
|
ascending,
|
||||||
|
filterTree,
|
||||||
|
filterNoPermissionTree,
|
||||||
|
formatFlatteningRoutes
|
||||||
|
} from "@/router/utils";
|
||||||
|
export {
|
||||||
|
isUrl,
|
||||||
|
isEqual,
|
||||||
|
isNumber,
|
||||||
|
debounce,
|
||||||
|
isBoolean,
|
||||||
|
getKeyList,
|
||||||
|
storageLocal,
|
||||||
|
deviceDetection
|
||||||
|
} from "@pureadmin/utils";
|
||||||
|
export type {
|
||||||
|
setType,
|
||||||
|
appType,
|
||||||
|
userType,
|
||||||
|
multiType,
|
||||||
|
cacheType,
|
||||||
|
positionType
|
||||||
|
} from "./types";
|
||||||
@@ -51,7 +51,7 @@ html.dark {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 项目配置面板 */
|
/* 系统配置面板 */
|
||||||
.right-panel-items {
|
.right-panel-items {
|
||||||
.el-divider__text {
|
.el-divider__text {
|
||||||
--el-bg-color: var(--el-bg-color);
|
--el-bg-color: var(--el-bg-color);
|
||||||
|
|||||||
@@ -31,6 +31,7 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.login-form {
|
.login-form {
|
||||||
|
|||||||
@@ -194,7 +194,6 @@ button,
|
|||||||
cursor: default;
|
cursor: default;
|
||||||
}
|
}
|
||||||
|
|
||||||
img,
|
|
||||||
svg,
|
svg,
|
||||||
video,
|
video,
|
||||||
canvas,
|
canvas,
|
||||||
|
|||||||
@@ -35,7 +35,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.set-icon {
|
.set-icon,
|
||||||
|
.fullscreen-icon {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -91,7 +92,7 @@
|
|||||||
z-index: 1001;
|
z-index: 1001;
|
||||||
width: $sideBarWidth !important;
|
width: $sideBarWidth !important;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
overflow: hidden;
|
overflow: visible;
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
background: $menuBg;
|
background: $menuBg;
|
||||||
border-right: 1px solid var(--pure-border-color);
|
border-right: 1px solid var(--pure-border-color);
|
||||||
@@ -262,8 +263,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
& > .el-menu {
|
& > .el-menu {
|
||||||
i {
|
i,
|
||||||
margin-right: 20px;
|
svg {
|
||||||
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -460,7 +462,9 @@
|
|||||||
|
|
||||||
/* 搜索 */
|
/* 搜索 */
|
||||||
.search-container,
|
.search-container,
|
||||||
/* 告警 */
|
/* 全屏 */
|
||||||
|
.fullscreen-icon,
|
||||||
|
/* 消息通知 */
|
||||||
.dropdown-badge,
|
.dropdown-badge,
|
||||||
/* 用户名 */
|
/* 用户名 */
|
||||||
.el-dropdown-link,
|
.el-dropdown-link,
|
||||||
@@ -631,7 +635,9 @@ body[layout="vertical"] {
|
|||||||
|
|
||||||
/* 搜索 */
|
/* 搜索 */
|
||||||
.search-container,
|
.search-container,
|
||||||
/* 告警 */
|
/* 全屏 */
|
||||||
|
.fullscreen-icon,
|
||||||
|
/* 消息通知 */
|
||||||
.dropdown-badge,
|
.dropdown-badge,
|
||||||
/* 用户名 */
|
/* 用户名 */
|
||||||
.el-dropdown-link,
|
.el-dropdown-link,
|
||||||
|
|||||||
@@ -9,9 +9,13 @@ export interface DataInfo<T> {
|
|||||||
expires: T;
|
expires: T;
|
||||||
/** 用于调用刷新accessToken的接口时所需的token */
|
/** 用于调用刷新accessToken的接口时所需的token */
|
||||||
refreshToken: string;
|
refreshToken: string;
|
||||||
|
/** 头像 */
|
||||||
|
avatar?: string;
|
||||||
/** 用户名 */
|
/** 用户名 */
|
||||||
username?: string;
|
username?: string;
|
||||||
/** 当前登陆用户的角色 */
|
/** 昵称 */
|
||||||
|
nickname?: string;
|
||||||
|
/** 当前登录用户的角色 */
|
||||||
roles?: Array<string>;
|
roles?: Array<string>;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -36,15 +40,15 @@ export function getToken(): DataInfo<number> {
|
|||||||
/**
|
/**
|
||||||
* @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
|
* @description 设置`token`以及一些必要信息并采用无感刷新`token`方案
|
||||||
* 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
|
* 无感刷新：后端返回`accessToken`（访问接口使用的`token`）、`refreshToken`（用于调用刷新`accessToken`的接口时所需的`token`，`refreshToken`的过期时间（比如30天）应大于`accessToken`的过期时间（比如2小时））、`expires`（`accessToken`的过期时间）
|
||||||
* 将`accessToken`、`expires`这两条信息放在key值为authorized-token的cookie里（过期自动销毁）
|
* 将`accessToken`、`expires`、`refreshToken`这三条信息放在key值为authorized-token的cookie里（过期自动销毁）
|
||||||
* 将`username`、`roles`、`refreshToken`、`expires`这四条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
|
* 将`avatar`、`username`、`nickname`、`roles`、`refreshToken`、`expires`这六条信息放在key值为`user-info`的localStorage里（利用`multipleTabsKey`当浏览器完全关闭后自动销毁）
|
||||||
*/
|
*/
|
||||||
export function setToken(data: DataInfo<Date>) {
|
export function setToken(data: DataInfo<Date>) {
|
||||||
let expires = 0;
|
let expires = 0;
|
||||||
const { accessToken, refreshToken } = data;
|
const { accessToken, refreshToken } = data;
|
||||||
const { isRemembered, loginDay } = useUserStoreHook();
|
const { isRemembered, loginDay } = useUserStoreHook();
|
||||||
expires = new Date(data.expires).getTime(); // 如果后端直接设置时间戳，将此处代码改为expires = data.expires，然后把上面的DataInfo<Date>改成DataInfo<number>即可
|
expires = new Date(data.expires).getTime(); // 如果后端直接设置时间戳，将此处代码改为expires = data.expires，然后把上面的DataInfo<Date>改成DataInfo<number>即可
|
||||||
const cookieString = JSON.stringify({ accessToken, expires });
|
const cookieString = JSON.stringify({ accessToken, expires, refreshToken });
|
||||||
|
|
||||||
expires > 0
|
expires > 0
|
||||||
? Cookies.set(TokenKey, cookieString, {
|
? Cookies.set(TokenKey, cookieString, {
|
||||||
@@ -62,26 +66,44 @@ export function setToken(data: DataInfo<Date>) {
|
|||||||
: {}
|
: {}
|
||||||
);
|
);
|
||||||
|
|
||||||
function setUserKey(username: string, roles: Array<string>) {
|
function setUserKey({ avatar, username, nickname, roles }) {
|
||||||
|
useUserStoreHook().SET_AVATAR(avatar);
|
||||||
useUserStoreHook().SET_USERNAME(username);
|
useUserStoreHook().SET_USERNAME(username);
|
||||||
|
useUserStoreHook().SET_NICKNAME(nickname);
|
||||||
useUserStoreHook().SET_ROLES(roles);
|
useUserStoreHook().SET_ROLES(roles);
|
||||||
storageLocal().setItem(userKey, {
|
storageLocal().setItem(userKey, {
|
||||||
refreshToken,
|
refreshToken,
|
||||||
expires,
|
expires,
|
||||||
|
avatar,
|
||||||
username,
|
username,
|
||||||
|
nickname,
|
||||||
roles
|
roles
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
if (data.username && data.roles) {
|
if (data.username && data.roles) {
|
||||||
const { username, roles } = data;
|
const { username, roles } = data;
|
||||||
setUserKey(username, roles);
|
setUserKey({
|
||||||
|
avatar: data?.avatar ?? "",
|
||||||
|
username,
|
||||||
|
nickname: data?.nickname ?? "",
|
||||||
|
roles
|
||||||
|
});
|
||||||
} else {
|
} else {
|
||||||
|
const avatar =
|
||||||
|
storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "";
|
||||||
const username =
|
const username =
|
||||||
storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "";
|
storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "";
|
||||||
|
const nickname =
|
||||||
|
storageLocal().getItem<DataInfo<number>>(userKey)?.nickname ?? "";
|
||||||
const roles =
|
const roles =
|
||||||
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
|
storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [];
|
||||||
setUserKey(username, roles);
|
setUserKey({
|
||||||
|
avatar,
|
||||||
|
username,
|
||||||
|
nickname,
|
||||||
|
roles
|
||||||
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -35,16 +35,16 @@ class PureHttp {
|
|||||||
this.httpInterceptorsResponse();
|
this.httpInterceptorsResponse();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** token过期后，暂存待执行的请求 */
|
/** `token`过期后，暂存待执行的请求 */
|
||||||
private static requests = [];
|
private static requests = [];
|
||||||
|
|
||||||
/** 防止重复刷新token */
|
/** 防止重复刷新`token` */
|
||||||
private static isRefreshing = false;
|
private static isRefreshing = false;
|
||||||
|
|
||||||
/** 初始化配置对象 */
|
/** 初始化配置对象 */
|
||||||
private static initConfig: PureHttpRequestConfig = {};
|
private static initConfig: PureHttpRequestConfig = {};
|
||||||
|
|
||||||
/** 保存当前Axios实例对象 */
|
/** 保存当前`Axios`实例对象 */
|
||||||
private static axiosInstance: AxiosInstance = Axios.create(defaultConfig);
|
private static axiosInstance: AxiosInstance = Axios.create(defaultConfig);
|
||||||
|
|
||||||
/** 重连原始请求 */
|
/** 重连原始请求 */
|
||||||
@@ -72,9 +72,9 @@ class PureHttp {
|
|||||||
PureHttp.initConfig.beforeRequestCallback(config);
|
PureHttp.initConfig.beforeRequestCallback(config);
|
||||||
return config;
|
return config;
|
||||||
}
|
}
|
||||||
/** 请求白名单，放置一些不需要token的接口（通过设置请求白名单，防止token过期后再请求造成的死循环问题） */
|
/** 请求白名单，放置一些不需要`token`的接口（通过设置请求白名单，防止`token`过期后再请求造成的死循环问题） */
|
||||||
const whiteList = ["/refresh-token", "/login"];
|
const whiteList = ["/refresh-token", "/login"];
|
||||||
return whiteList.find(url => url === config.url)
|
return whiteList.some(url => config.url.endsWith(url))
|
||||||
? config
|
? config
|
||||||
: new Promise(resolve => {
|
: new Promise(resolve => {
|
||||||
const data = getToken();
|
const data = getToken();
|
||||||
@@ -172,22 +172,22 @@ class PureHttp {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 单独抽离的post工具函数 */
|
/** 单独抽离的`post`工具函数 */
|
||||||
public post<T, P>(
|
public post<T, P>(
|
||||||
url: string,
|
url: string,
|
||||||
params?: AxiosRequestConfig<T>,
|
params?: AxiosRequestConfig<P>,
|
||||||
config?: PureHttpRequestConfig
|
config?: PureHttpRequestConfig
|
||||||
): Promise<P> {
|
): Promise<T> {
|
||||||
return this.request<P>("post", url, params, config);
|
return this.request<T>("post", url, params, config);
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 单独抽离的get工具函数 */
|
/** 单独抽离的`get`工具函数 */
|
||||||
public get<T, P>(
|
public get<T, P>(
|
||||||
url: string,
|
url: string,
|
||||||
params?: AxiosRequestConfig<T>,
|
params?: AxiosRequestConfig<P>,
|
||||||
config?: PureHttpRequestConfig
|
config?: PureHttpRequestConfig
|
||||||
): Promise<P> {
|
): Promise<T> {
|
||||||
return this.request<P>("get", url, params, config);
|
return this.request<T>("get", url, params, config);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -19,7 +19,6 @@ const Print = function (dom, options?: object): PrintFunction {
|
|||||||
printDoneCallBack: null
|
printDoneCallBack: null
|
||||||
};
|
};
|
||||||
for (const key in this.conf) {
|
for (const key in this.conf) {
|
||||||
// eslint-disable-next-line no-prototype-builtins
|
|
||||||
if (key && options.hasOwnProperty(key)) {
|
if (key && options.hasOwnProperty(key)) {
|
||||||
this.conf[key] = options[key];
|
this.conf[key] = options[key];
|
||||||
}
|
}
|
||||||
@@ -132,9 +131,9 @@ Print.prototype = {
|
|||||||
"style",
|
"style",
|
||||||
"position:absolute;width:0;height:0;top:-10px;left:-10px;"
|
"position:absolute;width:0;height:0;top:-10px;left:-10px;"
|
||||||
);
|
);
|
||||||
// eslint-disable-next-line prefer-const
|
|
||||||
w = f.contentWindow || f.contentDocument;
|
w = f.contentWindow || f.contentDocument;
|
||||||
// eslint-disable-next-line prefer-const
|
|
||||||
doc = f.contentDocument || f.contentWindow.document;
|
doc = f.contentDocument || f.contentWindow.document;
|
||||||
doc.open();
|
doc.open();
|
||||||
doc.write(content);
|
doc.write(content);
|
||||||
|
|||||||
@@ -15,10 +15,10 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
|
|||||||
darkMode: config.DarkMode ?? false,
|
darkMode: config.DarkMode ?? false,
|
||||||
sidebarStatus: config.SidebarStatus ?? true,
|
sidebarStatus: config.SidebarStatus ?? true,
|
||||||
epThemeColor: config.EpThemeColor ?? "#409EFF",
|
epThemeColor: config.EpThemeColor ?? "#409EFF",
|
||||||
themeColor: config.Theme ?? "light", // 主题色（对应项目配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
|
themeColor: config.Theme ?? "light", // 主题色（对应系统配置中的主题色，与theme不同的是它不会受到浅色、深色整体风格切换的影响，只会在手动点击主题色时改变）
|
||||||
overallStyle: config.OverallStyle ?? "light" // 整体风格（浅色：light、深色：dark、自动：system）
|
overallStyle: config.OverallStyle ?? "light" // 整体风格（浅色：light、深色：dark、自动：system）
|
||||||
},
|
},
|
||||||
// 项目配置-界面显示
|
// 系统配置-界面显示
|
||||||
configure: Storage.getData("configure", nameSpace) ?? {
|
configure: Storage.getData("configure", nameSpace) ?? {
|
||||||
grey: config.Grey ?? false,
|
grey: config.Grey ?? false,
|
||||||
weak: config.Weak ?? false,
|
weak: config.Weak ?? false,
|
||||||
@@ -26,7 +26,8 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
|
|||||||
hideFooter: config.HideFooter ?? true,
|
hideFooter: config.HideFooter ?? true,
|
||||||
showLogo: config.ShowLogo ?? true,
|
showLogo: config.ShowLogo ?? true,
|
||||||
showModel: config.ShowModel ?? "smart",
|
showModel: config.ShowModel ?? "smart",
|
||||||
multiTagsCache: config.MultiTagsCache ?? false
|
multiTagsCache: config.MultiTagsCache ?? false,
|
||||||
|
stretch: config.Stretch ?? false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
config.MultiTagsCache
|
config.MultiTagsCache
|
||||||
|
|||||||
@@ -38,23 +38,26 @@ const ruleForm = reactive({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const onLogin = async (formEl: FormInstance | undefined) => {
|
const onLogin = async (formEl: FormInstance | undefined) => {
|
||||||
loading.value = true;
|
|
||||||
if (!formEl) return;
|
if (!formEl) return;
|
||||||
await formEl.validate((valid, fields) => {
|
await formEl.validate((valid, fields) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
loading.value = true;
|
||||||
useUserStoreHook()
|
useUserStoreHook()
|
||||||
.loginByUsername({ username: ruleForm.username, password: "admin123" })
|
.loginByUsername({ username: ruleForm.username, password: "admin123" })
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
// 获取后端路由
|
// 获取后端路由
|
||||||
initRouter().then(() => {
|
return initRouter().then(() => {
|
||||||
router.push(getTopMenu(true).path);
|
router.push(getTopMenu(true).path).then(() => {
|
||||||
message("登录成功", { type: "success" });
|
message("登录成功", { type: "success" });
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
} else {
|
||||||
|
message("登录失败", { type: "error" });
|
||||||
}
|
}
|
||||||
});
|
})
|
||||||
|
.finally(() => (loading.value = false));
|
||||||
} else {
|
} else {
|
||||||
loading.value = false;
|
|
||||||
return fields;
|
return fields;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
import type { Config } from "tailwindcss";
|
||||||
module.exports = {
|
|
||||||
|
export default {
|
||||||
darkMode: "class",
|
darkMode: "class",
|
||||||
corePlugins: {
|
corePlugins: {
|
||||||
preflight: false
|
preflight: false
|
||||||
@@ -15,4 +16,4 @@ module.exports = {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
};
|
} satisfies Config;
|
||||||
2
types/global-components.d.ts
vendored
2
types/global-components.d.ts
vendored
@@ -21,6 +21,8 @@ declare module "vue" {
|
|||||||
ElAside: (typeof import("element-plus"))["ElAside"];
|
ElAside: (typeof import("element-plus"))["ElAside"];
|
||||||
ElAutocomplete: (typeof import("element-plus"))["ElAutocomplete"];
|
ElAutocomplete: (typeof import("element-plus"))["ElAutocomplete"];
|
||||||
ElAvatar: (typeof import("element-plus"))["ElAvatar"];
|
ElAvatar: (typeof import("element-plus"))["ElAvatar"];
|
||||||
|
ElAnchor: (typeof import("element-plus"))["ElAnchor"];
|
||||||
|
ElAnchorLink: (typeof import("element-plus"))["ElAnchorLink"];
|
||||||
ElBacktop: (typeof import("element-plus"))["ElBacktop"];
|
ElBacktop: (typeof import("element-plus"))["ElBacktop"];
|
||||||
ElBadge: (typeof import("element-plus"))["ElBadge"];
|
ElBadge: (typeof import("element-plus"))["ElBadge"];
|
||||||
ElBreadcrumb: (typeof import("element-plus"))["ElBreadcrumb"];
|
ElBreadcrumb: (typeof import("element-plus"))["ElBreadcrumb"];
|
||||||
|
|||||||
12
types/global.d.ts
vendored
12
types/global.d.ts
vendored
@@ -38,6 +38,15 @@ declare global {
|
|||||||
msRequestAnimationFrame: (callback: FrameRequestCallback) => number;
|
msRequestAnimationFrame: (callback: FrameRequestCallback) => number;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Document 的类型提示
|
||||||
|
*/
|
||||||
|
interface Document {
|
||||||
|
webkitFullscreenElement?: Element;
|
||||||
|
mozFullScreenElement?: Element;
|
||||||
|
msFullscreenElement?: Element;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 打包压缩格式的类型声明
|
* 打包压缩格式的类型声明
|
||||||
*/
|
*/
|
||||||
@@ -78,6 +87,7 @@ declare global {
|
|||||||
FixedHeader?: boolean;
|
FixedHeader?: boolean;
|
||||||
HiddenSideBar?: boolean;
|
HiddenSideBar?: boolean;
|
||||||
MultiTagsCache?: boolean;
|
MultiTagsCache?: boolean;
|
||||||
|
MaxTagsLevel?: number;
|
||||||
KeepAlive?: boolean;
|
KeepAlive?: boolean;
|
||||||
Locale?: string;
|
Locale?: string;
|
||||||
Layout?: string;
|
Layout?: string;
|
||||||
@@ -88,6 +98,7 @@ declare global {
|
|||||||
Weak?: boolean;
|
Weak?: boolean;
|
||||||
HideTabs?: boolean;
|
HideTabs?: boolean;
|
||||||
HideFooter?: boolean;
|
HideFooter?: boolean;
|
||||||
|
Stretch?: boolean | number;
|
||||||
SidebarStatus?: boolean;
|
SidebarStatus?: boolean;
|
||||||
EpThemeColor?: string;
|
EpThemeColor?: string;
|
||||||
ShowLogo?: boolean;
|
ShowLogo?: boolean;
|
||||||
@@ -152,6 +163,7 @@ declare global {
|
|||||||
showLogo?: boolean;
|
showLogo?: boolean;
|
||||||
showModel?: string;
|
showModel?: string;
|
||||||
multiTagsCache?: boolean;
|
multiTagsCache?: boolean;
|
||||||
|
stretch?: boolean | number;
|
||||||
};
|
};
|
||||||
tags?: Array<any>;
|
tags?: Array<any>;
|
||||||
}
|
}
|
||||||
|
|||||||
4
types/router.d.ts
vendored
4
types/router.d.ts
vendored
@@ -45,8 +45,10 @@ declare global {
|
|||||||
/** 离场动画 */
|
/** 离场动画 */
|
||||||
leaveTransition?: string;
|
leaveTransition?: string;
|
||||||
};
|
};
|
||||||
// 是否不添加信息到标签页，（默认`false`）
|
/** 当前菜单名称或自定义信息禁止添加到标签页（默认`false`） */
|
||||||
hiddenTag?: boolean;
|
hiddenTag?: boolean;
|
||||||
|
/** 当前菜单名称是否固定显示在标签页且不可关闭（默认`false`） */
|
||||||
|
fixedTag?: boolean;
|
||||||
/** 动态路由可打开的最大数量 `可选` */
|
/** 动态路由可打开的最大数量 `可选` */
|
||||||
dynamicLevel?: number;
|
dynamicLevel?: number;
|
||||||
/** 将某个菜单激活
|
/** 将某个菜单激活
|
||||||
|
|||||||
2
types/shims-vue.d.ts
vendored
2
types/shims-vue.d.ts
vendored
@@ -8,5 +8,3 @@ declare module "*.scss" {
|
|||||||
const scss: Record<string, string>;
|
const scss: Record<string, string>;
|
||||||
export default scss;
|
export default scss;
|
||||||
}
|
}
|
||||||
|
|
||||||
declare module "element-plus/dist/locale/zh-cn.mjs";
|
|
||||||
|
|||||||
Reference in New Issue
Block a user