mirror of
https://github.com/fantastic-admin/basic.git
synced 2026-10-06 19:53:43 +08:00
Compare commits
124
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Hooray
|
2d5e29eed7 | ||
|
Hooray
|
263bc43e9a | ||
|
Hooray
|
3c8cb20cdc | ||
|
Hooray
|
efc54f49ef | ||
|
Hooray
|
0b9d11fcfa | ||
|
Hooray
|
f5593aeea3 | ||
|
Hooray
|
9bfe2fb2d8 | ||
|
Hooray
|
c19d749c61 | ||
|
Hooray
|
2e904eb8e4 | ||
|
Hooray
|
90e69b157a | ||
|
Hooray
|
e086017689 | ||
|
Hooray
|
3def174a9a | ||
|
Hooray
|
06458467c5 | ||
|
Hooray
|
9e9544bd70 | ||
|
Hooray
|
18119a4e86 | ||
|
Hooray
|
9e5df6a747 | ||
|
Hooray
|
d390daeead | ||
|
Hooray
|
6549b8ffbf | ||
|
Hooray
|
2344fd78c1 | ||
|
Hooray
|
5551c703b2 | ||
|
Hooray
|
0e174e26ff | ||
|
Hooray
|
b153bda743 | ||
|
Hooray
|
43a85f5b39 | ||
|
Hooray
|
ccb8bd9a18 | ||
|
Hooray
|
cc9bb1a194 | ||
|
Hooray
|
35af83a82a | ||
|
Hooray
|
128ac5ee46 | ||
|
Hooray
|
fa537b7969 | ||
|
Hooray
|
e2cd48469c | ||
|
Hooray
|
bfe6607f04 | ||
|
Hooray
|
59e683c2e3 | ||
|
Hooray
|
8d59733973 | ||
|
Hooray
|
0ac47384aa | ||
|
Hooray
|
1a0eb3989c | ||
|
Hooray
|
6fc89426c9 | ||
|
Hooray
|
28cc84ff0e | ||
|
Hooray
|
094ee89c6c | ||
|
Hooray
|
7ee93b0ccb | ||
|
Hooray
|
e3aa58e892 | ||
|
Hooray
|
6febfea146 | ||
|
Hooray
|
3859c26f42 | ||
|
Hooray
|
245eda34cb | ||
|
Hooray
|
2bf683d75d | ||
|
Hooray
|
e553fefffb | ||
|
Hooray
|
5160da3085 | ||
|
Hooray
|
4ef21b7c7f | ||
|
Hooray
|
202fc12e99 | ||
|
Hooray
|
098d39b6bf | ||
|
Hooray
|
53f7485754 | ||
|
Hooray
|
b5981dd6ac | ||
|
Hooray
|
ce810aa633 | ||
|
Hooray
|
eabb43ecab | ||
|
Hooray
|
8bfa0f0c27 | ||
|
Hooray
|
05261b37bb | ||
|
Hooray
|
b974139eeb | ||
|
Hooray
|
867852e501 | ||
|
Hooray
|
2cadef4ad1 | ||
|
Hooray
|
3b889f611f | ||
|
Hooray
|
9f37438669 | ||
|
Hooray
|
b7c627c556 | ||
|
Hooray
|
7d2279f38d | ||
|
Hooray
|
eb306b18bc | ||
|
Hooray
|
8d4e226c17 | ||
|
Hooray
|
1edf486160 | ||
|
Hooray
|
e2d058abdd | ||
|
Hooray
|
9b5003fad8 | ||
|
Hooray
|
cbef1bb52e | ||
|
Hooray
|
623da2b411 | ||
|
Hooray
|
e24a722545 | ||
|
Hooray
|
f8794e2a5e | ||
|
Hooray
|
d7808da1ca | ||
|
Hooray
|
a1d326810e | ||
|
Hooray
|
3be15b2446 | ||
|
Hooray
|
97757e33c3 | ||
|
Hooray
|
4378226ae6 | ||
|
Hooray
|
5956008dbf | ||
|
Hooray
|
cf16db603a | ||
|
Hooray
|
e68d67d606 | ||
|
Hooray
|
1bce49cce6 | ||
|
Hooray
|
52c1bb4b58 | ||
|
Hooray
|
1ea3345556 | ||
|
Hooray
|
35d31a078e | ||
|
Hooray
|
2b18c3f138 | ||
|
Hooray
|
10c8401a88 | ||
|
Hooray
|
b0ac06172e | ||
|
Hooray
|
2a902473a8 | ||
|
Hooray
|
f02298bf1b | ||
|
Hooray
|
5fcd3fe5ed | ||
|
Hooray
|
ee47369579 | ||
|
Hooray
|
ce7477b10d | ||
|
Hooray
|
609e77c159 | ||
|
Hooray
|
db4aa406eb | ||
|
Hooray
|
5bfb3c8fb0 | ||
|
Hooray
|
5e59d12d73 | ||
|
Hooray
|
097e700464 | ||
|
Hooray
|
501e82dd44 | ||
|
Hooray
|
dcad2c6ecf | ||
|
Hooray
|
2b08e82c5e | ||
|
Hooray
|
b533c5a040 | ||
|
Hooray
|
33db1040be | ||
|
Hooray
|
ebf61b0738 | ||
|
Hooray
|
7daea6d605 | ||
|
Hooray
|
1473a6c7e3 | ||
|
Hooray
|
87f5b60211 | ||
|
Hooray
|
6d58f1c2f3 | ||
|
Hooray
|
abac8e0152 | ||
|
Hooray
|
643d458ac2 | ||
|
Hooray
|
c5217aabc1 | ||
|
Hooray
|
b3b8947b62 | ||
|
Hooray
|
ea929ac427 | ||
|
Hooray
|
2100bbe7b0 | ||
|
Hooray
|
39ba382fec | ||
|
Hooray
|
e87c46ad0a | ||
|
Hooray
|
a6e66c3f47 | ||
|
Hooray
|
2080d0be5f | ||
|
Hooray
|
62f489baf4 | ||
|
Hooray
|
6f31b04ae8 | ||
|
Hooray
|
cfb4f23f18 | ||
|
Hooray
|
eff07c2833 | ||
|
Hooray
|
7f98ab21b3 | ||
|
Hooray
|
fcb7cb541d | ||
|
Hooray
|
3ab394e772 | ||
|
Hooray
|
75411af22f | ||
|
Hooray
|
2909caaf0e |
Executable
+10
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"EditorConfig.EditorConfig",
|
||||
"mikestead.dotenv",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"stylelint.vscode-stylelint",
|
||||
"Vue.volar",
|
||||
"antfu.unocss"
|
||||
]
|
||||
}
|
||||
Executable
+29
@@ -0,0 +1,29 @@
|
||||
{
|
||||
"eslint.useFlatConfig": true,
|
||||
"prettier.enable": false,
|
||||
"editor.formatOnSave": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit",
|
||||
"source.fixAll.stylelint": "explicit",
|
||||
"source.organizeImports": "never"
|
||||
},
|
||||
"stylelint.validate": [
|
||||
"css",
|
||||
"postcss",
|
||||
"scss",
|
||||
"vue"
|
||||
],
|
||||
"eslint.validate": [
|
||||
"javascript",
|
||||
"javascriptreact",
|
||||
"typescript",
|
||||
"typescriptreact",
|
||||
"vue",
|
||||
"html",
|
||||
"markdown",
|
||||
"json",
|
||||
"jsonc",
|
||||
"yaml"
|
||||
],
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
# 应用配置面板
|
||||
VITE_APP_SETTING = false
|
||||
# 页面标题
|
||||
VITE_APP_TITLE = 页面标题
|
||||
VITE_APP_TITLE = Fantastic-admin 基础版
|
||||
# 接口请求地址，会设置到 axios 的 baseURL 参数上
|
||||
VITE_APP_API_BASEURL = /
|
||||
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
# 应用配置面板
|
||||
VITE_APP_SETTING = false
|
||||
# 页面标题
|
||||
VITE_APP_TITLE = 页面标题(test)
|
||||
VITE_APP_TITLE = Fantastic-admin 基础版
|
||||
# 接口请求地址，会设置到 axios 的 baseURL 参数上
|
||||
VITE_APP_API_BASEURL = /
|
||||
# 调试工具，可设置 eruda 或 vconsole，如果不需要开启则留空
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<p align="center">
|
||||
<img src="https://fantastic-admin.hurui.me/logo.png" width="200" height="200" />
|
||||
<img src="https://fantastic-admin.hurui.me/logo.svg" width="200" height="200" />
|
||||
</p>
|
||||
|
||||
<h1 align="center">Fantastic-admin</h1>
|
||||
@@ -37,8 +37,8 @@
|
||||
|
||||
- `main` Vue3 版本框架源码分支，不含示例代码，可直接用于实际开发
|
||||
- `example` Vue3 版本演示源码分支，同线上演示站，包含大量示例，可用于参考学习
|
||||
- `vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发（停止维护）
|
||||
- `vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习（停止维护）
|
||||
- ~~`vue2` Vue2 版本框架源码分支，不含示例代码，可直接用于实际开发~~（停止维护）
|
||||
- ~~`vue2-example` Vue2 版本演示源码分支，包含大量示例，可用于参考学习~~（停止维护）
|
||||
|
||||
## 预览
|
||||
|
||||
|
||||
+2
-2
@@ -8,9 +8,9 @@
|
||||
"baseColor": "neutral",
|
||||
"cssVariables": true
|
||||
},
|
||||
"framework": "vite",
|
||||
"aliases": {
|
||||
"components": "@/ui/shadcn",
|
||||
"utils": "@/utils"
|
||||
"utils": "@/utils",
|
||||
"lib": "@/utils"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ export default antfu(
|
||||
ignores: [
|
||||
'public',
|
||||
'dist*',
|
||||
'src/ui/shadcn/ui',
|
||||
],
|
||||
},
|
||||
{
|
||||
|
||||
+2
-2
@@ -2,9 +2,9 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<link rel="icon" href="/favicon.svg" />
|
||||
<link rel="stylesheet" href="/browser_upgrade/index.css" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"/>
|
||||
<meta http-equiv="Expires" content="0">
|
||||
<meta http-equiv="Pragma" content="no-cache">
|
||||
<meta http-equiv="Cache-control" content="no-cache">
|
||||
|
||||
+1
-1
@@ -101,7 +101,7 @@
|
||||
height: 100%;
|
||||
color: var(--rainbow-color);
|
||||
user-select: none;
|
||||
background-color: snow;
|
||||
background-color: hsl(var(--background));
|
||||
}
|
||||
|
||||
.loading-container *::before,
|
||||
|
||||
+72
-68
@@ -1,8 +1,9 @@
|
||||
{
|
||||
"type": "module",
|
||||
"version": "5.0.0-beta.2",
|
||||
"version": "5.6.0",
|
||||
"packageManager": "pnpm@10.14.0",
|
||||
"engines": {
|
||||
"node": "^18.18.0 || ^20.9.0 || >=21.1.0"
|
||||
"node": "^20.19.0 || >=22.12.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
@@ -12,105 +13,108 @@
|
||||
"serve:test": "http-server ./dist-test -o",
|
||||
"svgo": "svgo -f src/assets/icons",
|
||||
"new": "plop",
|
||||
"generate:icons": "esno ./scripts/generate.icons.ts",
|
||||
"generate:icons": "tsx ./scripts/generate.icons.ts",
|
||||
"lint": "npm-run-all -s lint:tsc lint:eslint lint:stylelint",
|
||||
"lint:tsc": "vue-tsc -b",
|
||||
"lint:eslint": "eslint . --cache --fix",
|
||||
"lint:stylelint": "stylelint \"src/**/*.{css,scss,vue}\" --cache --fix",
|
||||
"preinstall": "npx only-allow pnpm",
|
||||
"postinstall": "simple-git-hooks",
|
||||
"taze": "taze minor -wIr",
|
||||
"commit": "git cz",
|
||||
"release": "bumpp"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vee-validate/zod": "^4.15.0",
|
||||
"@vueuse/components": "^12.3.0",
|
||||
"@vueuse/core": "^12.3.0",
|
||||
"@vueuse/integrations": "^12.3.0",
|
||||
"axios": "^1.7.9",
|
||||
"@vee-validate/zod": "^4.15.1",
|
||||
"@vueuse/components": "^13.6.0",
|
||||
"@vueuse/core": "^13.6.0",
|
||||
"@vueuse/integrations": "^13.6.0",
|
||||
"axios": "^1.11.0",
|
||||
"class-variance-authority": "^0.7.1",
|
||||
"clsx": "^2.1.1",
|
||||
"dayjs": "^1.11.13",
|
||||
"defu": "^6.1.4",
|
||||
"disable-devtool": "^0.3.8",
|
||||
"element-plus": "^2.9.2",
|
||||
"eruda": "^3.4.1",
|
||||
"es-toolkit": "^1.31.0",
|
||||
"hotkeys-js": "^3.13.9",
|
||||
"lucide-vue-next": "^0.469.0",
|
||||
"disable-devtool": "^0.3.9",
|
||||
"element-plus": "^2.10.6",
|
||||
"eruda": "^3.4.3",
|
||||
"es-toolkit": "^1.39.8",
|
||||
"filesize": "^11.0.2",
|
||||
"hotkeys-js": "^3.13.15",
|
||||
"lucide-vue-next": "^0.539.0",
|
||||
"mitt": "^3.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"path-to-regexp": "^8.2.0",
|
||||
"pinia": "^2.3.0",
|
||||
"qs": "^6.13.1",
|
||||
"radix-vue": "^1.9.12",
|
||||
"pinia": "^3.0.3",
|
||||
"qs": "^6.14.0",
|
||||
"reka-ui": "^2.4.1",
|
||||
"scule": "^1.3.0",
|
||||
"tailwind-merge": "^2.6.0",
|
||||
"ua-parser-js": "^2.0.0",
|
||||
"tailwind-merge": "^3.3.1",
|
||||
"ua-parser-js": "^2.0.4",
|
||||
"vconsole": "^3.15.1",
|
||||
"vee-validate": "^4.15.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-router": "^4.5.0",
|
||||
"vue-sonner": "^1.3.0",
|
||||
"zod": "^3.24.1"
|
||||
"vee-validate": "^4.15.1",
|
||||
"vue": "^3.5.18",
|
||||
"vue-router": "^4.5.1",
|
||||
"vue-sonner": "^2.0.2",
|
||||
"zod": "^4.0.17"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "3.12.1",
|
||||
"@faker-js/faker": "^9.3.0",
|
||||
"@iconify/json": "^2.2.291",
|
||||
"@iconify/vue": "^4.3.0",
|
||||
"@stylistic/stylelint-config": "^2.0.0",
|
||||
"@antfu/eslint-config": "^5.2.0",
|
||||
"@clack/prompts": "^0.11.0",
|
||||
"@faker-js/faker": "^9.9.0",
|
||||
"@iconify/json": "^2.2.367",
|
||||
"@iconify/vue": "^5.0.0",
|
||||
"@stylistic/stylelint-config": "^3.0.1",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@types/path-browserify": "^1.0.3",
|
||||
"@types/qs": "^6.9.17",
|
||||
"@unocss/eslint-plugin": "^0.65.3",
|
||||
"@unocss/preset-legacy-compat": "^65.4.2",
|
||||
"@vitejs/plugin-legacy": "^6.0.0",
|
||||
"@vitejs/plugin-vue": "^5.2.1",
|
||||
"@vitejs/plugin-vue-jsx": "^4.1.1",
|
||||
"autoprefixer": "^10.4.20",
|
||||
"@types/qs": "^6.14.0",
|
||||
"@unocss/eslint-plugin": "^66.4.2",
|
||||
"@unocss/preset-legacy-compat": "^66.4.2",
|
||||
"@vitejs/plugin-legacy": "^7.2.1",
|
||||
"@vitejs/plugin-vue": "^6.0.1",
|
||||
"@vitejs/plugin-vue-jsx": "^5.0.1",
|
||||
"@vue/tsconfig": "^0.7.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"boxen": "^8.0.1",
|
||||
"bumpp": "^9.9.2",
|
||||
"cz-git": "^1.11.0",
|
||||
"eslint": "^9.17.0",
|
||||
"esno": "^4.8.0",
|
||||
"fs-extra": "^11.2.0",
|
||||
"bumpp": "^10.2.2",
|
||||
"cz-git": "^1.12.0",
|
||||
"eslint": "^9.33.0",
|
||||
"fs-extra": "^11.3.1",
|
||||
"http-server": "^14.1.1",
|
||||
"inquirer": "^12.3.0",
|
||||
"lint-staged": "^15.3.0",
|
||||
"npm-run-all2": "^7.0.2",
|
||||
"lint-staged": "^16.1.5",
|
||||
"npm-run-all2": "^8.0.4",
|
||||
"picocolors": "^1.1.1",
|
||||
"plop": "^4.0.1",
|
||||
"postcss": "^8.4.49",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-nested": "^7.0.2",
|
||||
"sass-embedded": "^1.83.1",
|
||||
"simple-git-hooks": "^2.11.1",
|
||||
"stylelint": "^16.12.0",
|
||||
"stylelint-config-recess-order": "^5.1.1",
|
||||
"stylelint-config-standard-scss": "^14.0.0",
|
||||
"sass-embedded": "^1.90.0",
|
||||
"simple-git-hooks": "^2.13.1",
|
||||
"stylelint": "^16.23.1",
|
||||
"stylelint-config-recess-order": "^7.1.0",
|
||||
"stylelint-config-standard-scss": "^15.0.1",
|
||||
"stylelint-config-standard-vue": "^1.0.0",
|
||||
"stylelint-scss": "^6.10.0",
|
||||
"svgo": "^3.3.2",
|
||||
"typescript": "^5.7.2",
|
||||
"unocss": "^0.65.3",
|
||||
"unocss-preset-animations": "^1.1.0",
|
||||
"unocss-preset-scrollbar": "^0.3.1",
|
||||
"unplugin-auto-import": "^0.19.0",
|
||||
"unplugin-turbo-console": "^1.11.1",
|
||||
"unplugin-vue-components": "^0.28.0",
|
||||
"vite": "^6.0.7",
|
||||
"vite-plugin-app-loading": "^0.3.0",
|
||||
"vite-plugin-archiver": "^0.1.1",
|
||||
"vite-plugin-banner": "^0.8.0",
|
||||
"vite-plugin-compression2": "^1.3.3",
|
||||
"stylelint-scss": "^6.12.1",
|
||||
"svgo": "^4.0.0",
|
||||
"taze": "^19.1.0",
|
||||
"tsx": "^4.20.3",
|
||||
"typescript": "^5.9.2",
|
||||
"unocss": "^66.4.2",
|
||||
"unocss-preset-animations": "^1.2.1",
|
||||
"unplugin-auto-import": "^20.0.0",
|
||||
"unplugin-turbo-console": "^2.2.0",
|
||||
"unplugin-vue-components": "^29.0.0",
|
||||
"vite": "^7.1.1",
|
||||
"vite-plugin-app-loading": "^0.4.0",
|
||||
"vite-plugin-archiver": "^0.2.0",
|
||||
"vite-plugin-banner": "^0.8.1",
|
||||
"vite-plugin-compression2": "^2.2.0",
|
||||
"vite-plugin-env-parse": "^1.0.15",
|
||||
"vite-plugin-fake-server": "^2.1.5",
|
||||
"vite-plugin-pages": "^0.32.4",
|
||||
"vite-plugin-fake-server": "^2.2.0",
|
||||
"vite-plugin-pages": "^0.33.1",
|
||||
"vite-plugin-svg-icons": "^2.0.1",
|
||||
"vite-plugin-vue-devtools": "^7.6.8",
|
||||
"vite-plugin-vue-devtools": "^8.0.0",
|
||||
"vite-plugin-vue-meta-layouts": "^0.5.1",
|
||||
"vue-tsc": "^2.2.0"
|
||||
"vue-tsc": "^3.0.5"
|
||||
},
|
||||
"simple-git-hooks": {
|
||||
"pre-commit": "pnpm lint-staged",
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
const use{{ properCase name }}Store = defineStore(
|
||||
export const use{{ properCase name }}Store = defineStore(
|
||||
// 唯一ID
|
||||
'{{ camelCase name }}',
|
||||
() => {
|
||||
@@ -9,5 +9,3 @@ const use{{ properCase name }}Store = defineStore(
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export default use{{ properCase name }}Store
|
||||
|
||||
+4980
-4266
File diff suppressed because it is too large
Load Diff
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -21 206 206" xml:space="preserve">
|
||||
<path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
|
||||
c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
|
||||
c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
|
||||
c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
|
||||
c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
|
||||
c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#42b883" />
|
||||
<path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
|
||||
c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
|
||||
c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
|
||||
c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
|
||||
c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
|
||||
c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
+89
-67
@@ -1,83 +1,105 @@
|
||||
import { exec } from 'node:child_process'
|
||||
import { spawn } from 'node:child_process'
|
||||
import path from 'node:path'
|
||||
import process from 'node:process'
|
||||
import * as p from '@clack/prompts'
|
||||
import { lookupCollection, lookupCollections } from '@iconify/json'
|
||||
import fs from 'fs-extra'
|
||||
import inquirer from 'inquirer'
|
||||
|
||||
async function generateIcons() {
|
||||
// 拿到全部图标集的原始数据
|
||||
const raw = await lookupCollections()
|
||||
// 拿到全部图标集的原始数据
|
||||
const raw = await lookupCollections()
|
||||
|
||||
let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
|
||||
lastChoose = JSON.parse(lastChoose)
|
||||
let lastChoose = fs.readFileSync(path.resolve(process.cwd(), 'src/iconify/index.json'), 'utf-8')
|
||||
lastChoose = JSON.parse(lastChoose)
|
||||
|
||||
// 取出可使用的图标集数据用于 inquirer 选择，并按名称排序
|
||||
const collections = Object.entries(raw).map(([id, item]) => ({
|
||||
...item,
|
||||
id,
|
||||
})).sort((a, b) => a.name.localeCompare(b.name))
|
||||
// 取出可使用的图标集数据用于选择，并按名称排序
|
||||
const collections = Object.entries(raw).map(([id, item]) => ({
|
||||
...item,
|
||||
id,
|
||||
})).sort((a, b) => a.name.localeCompare(b.name))
|
||||
|
||||
/**
|
||||
* 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
|
||||
* (1) src/iconify/index.json 记录用户 inquirer 的交互信息
|
||||
* (2) src/iconify/data.json 包含多个图标集数据，仅记录图标名
|
||||
* (3) public/icons/*-raw.json 多个图标集的原始数据，独立存放，用于离线使用
|
||||
*/
|
||||
inquirer.prompt([
|
||||
{
|
||||
type: 'checkbox',
|
||||
message: '请选择需要生成的图标集',
|
||||
name: 'collections',
|
||||
choices: collections.map(item => ({
|
||||
name: `${item.name} (${item.total} icons)`,
|
||||
value: item.id,
|
||||
})),
|
||||
default: lastChoose.collections,
|
||||
p.intro('图标集生成工具')
|
||||
|
||||
/**
|
||||
* 分别会在对应目录下生成以下文件，其中(1)(3)用于离线下载并安装图标，(2)用于图标选择器使用
|
||||
* (1) src/iconify/index.json 记录用户交互信息
|
||||
* (2) src/iconify/data.json 包含多个图标集数据，仅记录图标名
|
||||
* (3) public/icons/*-raw.json 多个图标集的原始数据，独立存放，用于离线使用
|
||||
*/
|
||||
const answers = await p.group(
|
||||
{
|
||||
collections: () =>
|
||||
p.multiselect({
|
||||
message: '请选择需要生成的图标集',
|
||||
options: collections.map(item => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
hint: `${item.total} 个图标`,
|
||||
})),
|
||||
initialValues: lastChoose.collections,
|
||||
}),
|
||||
isOfflineUse: () =>
|
||||
p.confirm({
|
||||
message: '是否需要离线使用',
|
||||
initialValue: false,
|
||||
}),
|
||||
},
|
||||
{
|
||||
onCancel: () => {
|
||||
p.cancel('操作已取消')
|
||||
process.exit(0)
|
||||
},
|
||||
{
|
||||
type: 'confirm',
|
||||
name: 'isOfflineUse',
|
||||
message: '是否需要离线使用',
|
||||
default: false,
|
||||
},
|
||||
]).then(async (answers) => {
|
||||
await fs.writeJSON(
|
||||
path.resolve(process.cwd(), 'src/iconify/index.json'),
|
||||
{
|
||||
collections: answers.collections,
|
||||
isOfflineUse: answers.isOfflineUse,
|
||||
},
|
||||
)
|
||||
},
|
||||
)
|
||||
|
||||
const outputDir = path.resolve(process.cwd(), 'public/icons')
|
||||
await fs.ensureDir(outputDir)
|
||||
await fs.emptyDir(outputDir)
|
||||
await fs.writeJSON(
|
||||
path.resolve(process.cwd(), 'src/iconify/index.json'),
|
||||
{
|
||||
collections: answers.collections,
|
||||
isOfflineUse: answers.isOfflineUse,
|
||||
},
|
||||
)
|
||||
|
||||
const collectionsMeta: object[] = []
|
||||
for (const info of answers.collections) {
|
||||
const setData = await lookupCollection(info)
|
||||
const outputDir = path.resolve(process.cwd(), 'public/icons')
|
||||
await fs.ensureDir(outputDir)
|
||||
await fs.emptyDir(outputDir)
|
||||
|
||||
collectionsMeta.push({
|
||||
prefix: setData.prefix,
|
||||
info: setData.info,
|
||||
icons: Object.keys(setData.icons),
|
||||
})
|
||||
const collectionsMeta: object[] = []
|
||||
for (const info of answers.collections) {
|
||||
const setData = await lookupCollection(info)
|
||||
|
||||
const offlineFilePath = path.join(outputDir, `${info}-raw.json`)
|
||||
|
||||
if (answers.isOfflineUse) {
|
||||
await fs.writeJSON(offlineFilePath, setData)
|
||||
}
|
||||
}
|
||||
|
||||
await fs.writeJSON(
|
||||
path.resolve(process.cwd(), 'src/iconify/data.json'),
|
||||
collectionsMeta,
|
||||
)
|
||||
|
||||
exec('eslint src/iconify/data.json src/iconify/index.json --cache --fix')
|
||||
collectionsMeta.push({
|
||||
prefix: setData.prefix,
|
||||
info: setData.info,
|
||||
icons: Object.keys(setData.icons),
|
||||
})
|
||||
|
||||
const offlineFilePath = path.join(outputDir, `${info}-raw.json`)
|
||||
|
||||
if (answers.isOfflineUse) {
|
||||
await fs.writeJSON(offlineFilePath, setData)
|
||||
}
|
||||
}
|
||||
|
||||
generateIcons()
|
||||
await fs.writeJSON(
|
||||
path.resolve(process.cwd(), 'src/iconify/data.json'),
|
||||
collectionsMeta,
|
||||
)
|
||||
|
||||
// 使用 spawn 运行 eslint
|
||||
const eslint = spawn('eslint', ['src/iconify/data.json', 'src/iconify/index.json', '--cache', '--fix'], {
|
||||
stdio: 'inherit',
|
||||
shell: true,
|
||||
})
|
||||
|
||||
eslint.on('error', (err) => {
|
||||
p.log.error(`ESLint 执行失败: ${err.message}`)
|
||||
process.exit(1)
|
||||
})
|
||||
|
||||
eslint.on('close', (code) => {
|
||||
if (code !== 0) {
|
||||
p.log.error(`ESLint 执行失败，退出码: ${code}`)
|
||||
process.exit(code)
|
||||
}
|
||||
p.outro('图标集生成完成！')
|
||||
})
|
||||
|
||||
+1
-1
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { ua } from '@/utils/ua'
|
||||
import Provider from './ui/provider/index.vue'
|
||||
|
||||
@@ -47,6 +46,7 @@ onMounted(() => {
|
||||
<component :is="Component" v-if="isAuth" />
|
||||
<FaNotAllowed v-else />
|
||||
</RouterView>
|
||||
<FaBackToTop />
|
||||
<FaToast />
|
||||
<FaNotification />
|
||||
<FaSystemInfo />
|
||||
|
||||
+64
-26
@@ -1,8 +1,19 @@
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import axios from 'axios'
|
||||
// import qs from 'qs'
|
||||
import { toast } from 'vue-sonner'
|
||||
|
||||
// 请求重试配置
|
||||
const MAX_RETRY_COUNT = 3 // 最大重试次数
|
||||
const RETRY_DELAY = 1000 // 重试延迟时间（毫秒）
|
||||
|
||||
// 扩展 AxiosRequestConfig 类型
|
||||
declare module 'axios' {
|
||||
export interface AxiosRequestConfig {
|
||||
retry?: boolean
|
||||
retryCount?: number
|
||||
}
|
||||
}
|
||||
|
||||
const api = axios.create({
|
||||
baseURL: (import.meta.env.DEV && import.meta.env.VITE_OPEN_PROXY) ? '/proxy/' : import.meta.env.VITE_APP_API_BASEURL,
|
||||
timeout: 1000 * 60,
|
||||
@@ -29,6 +40,28 @@ api.interceptors.request.use(
|
||||
},
|
||||
)
|
||||
|
||||
// 处理错误信息的函数
|
||||
function handleError(error: any) {
|
||||
if (error.status === 401) {
|
||||
useUserStore().requestLogout()
|
||||
throw error
|
||||
}
|
||||
let message = error.message
|
||||
if (message === 'Network Error') {
|
||||
message = '后端网络故障'
|
||||
}
|
||||
else if (message.includes('timeout')) {
|
||||
message = '接口请求超时'
|
||||
}
|
||||
else if (message.includes('Request failed with status code')) {
|
||||
message = `接口${message.substr(message.length - 3)}异常`
|
||||
}
|
||||
toast.error('Error', {
|
||||
description: message,
|
||||
})
|
||||
return Promise.reject(error)
|
||||
}
|
||||
|
||||
api.interceptors.response.use(
|
||||
(response) => {
|
||||
/**
|
||||
@@ -37,38 +70,43 @@ api.interceptors.response.use(
|
||||
* 规则是当 status 为 1 时表示请求成功，为 0 时表示接口需要登录或者登录状态失效，需要重新登录
|
||||
* 请求出错时 error 会返回错误信息
|
||||
*/
|
||||
if (response.data.status === 1) {
|
||||
if (response.data.error !== '') {
|
||||
toast.warning('Warning', {
|
||||
description: response.data.error,
|
||||
})
|
||||
return Promise.reject(response.data)
|
||||
if (typeof response.data === 'object') {
|
||||
if (response.data.status === 1) {
|
||||
if (response.data.error !== '') {
|
||||
toast.warning('Warning', {
|
||||
description: response.data.error,
|
||||
})
|
||||
return Promise.reject(response.data)
|
||||
}
|
||||
}
|
||||
else {
|
||||
useUserStore().requestLogout()
|
||||
}
|
||||
return Promise.resolve(response.data)
|
||||
}
|
||||
else {
|
||||
useUserStore().requestLogout()
|
||||
return Promise.reject(response.data)
|
||||
}
|
||||
return Promise.resolve(response.data)
|
||||
},
|
||||
(error) => {
|
||||
if (error.status === 401) {
|
||||
useUserStore().requestLogout()
|
||||
throw error
|
||||
async (error) => {
|
||||
// 获取请求配置
|
||||
const config = error.config
|
||||
// 如果配置不存在或未启用重试，则直接处理错误
|
||||
if (!config || !config.retry) {
|
||||
return handleError(error)
|
||||
}
|
||||
let message = error.message
|
||||
if (message === 'Network Error') {
|
||||
message = '后端网络故障'
|
||||
// 设置重试次数
|
||||
config.retryCount = config.retryCount || 0
|
||||
// 判断是否超过重试次数
|
||||
if (config.retryCount >= MAX_RETRY_COUNT) {
|
||||
return handleError(error)
|
||||
}
|
||||
else if (message.includes('timeout')) {
|
||||
message = '接口请求超时'
|
||||
}
|
||||
else if (message.includes('Request failed with status code')) {
|
||||
message = `接口${message.substr(message.length - 3)}异常`
|
||||
}
|
||||
toast.error('Error', {
|
||||
description: message,
|
||||
})
|
||||
return Promise.reject(error)
|
||||
// 重试次数自增
|
||||
config.retryCount += 1
|
||||
// 延迟重试
|
||||
await new Promise(resolve => setTimeout(resolve, RETRY_DELAY))
|
||||
// 重新发起请求
|
||||
return api(config)
|
||||
},
|
||||
)
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.2 KiB After Width: | Height: | Size: 6.0 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 6.4 KiB |
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="200.781" height="200" class="icon" viewBox="0 0 1028 1024"><path d="M989.867 234.667H499.2c-17.067 0-34.133-21.334-34.133-42.667 0-25.6 12.8-42.667 34.133-42.667h490.667c17.066 0 34.133 17.067 34.133 42.667 0 21.333-12.8 42.667-34.133 42.667zm-473.6 128h465.066c25.6 0 46.934 21.333 46.934 42.666 0 25.6-21.334 42.667-46.934 42.667H516.267c-25.6 0-46.934-17.067-46.934-42.667s21.334-42.666 46.934-42.666zm0 298.666c-25.6 0-46.934-21.333-46.934-42.666 0-25.6 21.334-42.667 46.934-42.667h465.066c25.6 0 46.934 17.067 46.934 42.667s-21.334 42.666-46.934 42.666H516.267zm4.266 128H972.8c29.867 0 51.2 17.067 51.2 42.667s-21.333 42.667-51.2 42.667H520.533c-29.866 0-51.2-17.067-51.2-42.667s21.334-42.667 51.2-42.667zm-192 25.6c-17.066 17.067-46.933 17.067-64 0L12.8 541.867c-17.067-17.067-17.067-51.2 0-68.267l251.733-273.067c17.067-17.066 46.934-17.066 64 0s17.067 51.2 0 68.267L106.667 507.733l221.866 238.934c17.067 21.333 17.067 51.2 0 68.266z"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="200.781" height="200" class="icon" viewBox="0 0 1028 1024"><path d="M989.867 234.667H499.2c-17.067 0-34.133-21.334-34.133-42.667 0-25.6 12.8-42.667 34.133-42.667h490.667c17.066 0 34.133 17.067 34.133 42.667 0 21.333-12.8 42.667-34.133 42.667m-473.6 128h465.066c25.6 0 46.934 21.333 46.934 42.666 0 25.6-21.334 42.667-46.934 42.667H516.267c-25.6 0-46.934-17.067-46.934-42.667s21.334-42.666 46.934-42.666m0 298.666c-25.6 0-46.934-21.333-46.934-42.666 0-25.6 21.334-42.667 46.934-42.667h465.066c25.6 0 46.934 17.067 46.934 42.667s-21.334 42.666-46.934 42.666zm4.266 128H972.8c29.867 0 51.2 17.067 51.2 42.667s-21.333 42.667-51.2 42.667H520.533c-29.866 0-51.2-17.067-51.2-42.667s21.334-42.667 51.2-42.667m-192 25.6c-17.066 17.067-46.933 17.067-64 0L12.8 541.867c-17.067-17.067-17.067-51.2 0-68.267l251.733-273.067c17.067-17.066 46.934-17.066 64 0s17.067 51.2 0 68.267L106.667 507.733l221.866 238.934c17.067 21.333 17.067 51.2 0 68.266"/></svg>
|
||||
|
Before Width: | Height: | Size: 998 B After Width: | Height: | Size: 986 B |
Binary file not shown.
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -0,0 +1,14 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-25 -46 256 256" xml:space="preserve">
|
||||
<path d="M0,82.57C0,58.4,0,34.23,0,10.06C0,1.35,1.35,0,10.03,0C45.36,0,80.7-0.01,116.03,0.03c1.77,0,3.59,0.26,5.29,0.74
|
||||
c3.07,0.87,3.57,3.21,2.45,5.8c-4.37,10.1-8.83,20.15-13.31,30.2c-1.44,3.23-4.06,4.26-7.54,4.25c-18.5-0.09-37,0.1-55.5-0.14
|
||||
c-4.95-0.06-6.49,2.12-6.46,6.47c0.02,3,0.11,6.01-0.02,9c-0.3,6.8,0.34,9.29,9.51,9.62c5.36,0.19,10.73,0.04,16.09,0.04
|
||||
c7.57,0,15.15-0.04,22.72,0.01c5.13,0.03,6.6,2.12,4.59,6.89C90.43,81.09,86.27,89,83.4,97.35c-2.59,7.55-8.57,7.27-14.28,7.56
|
||||
c-7.48,0.38-15,0.17-22.5,0.06c-3.69-0.05-4.96,1.04-4.86,5.18c0.36,15.83,0.26,31.67,0.12,47.5c-0.04,4.2-2.26,6.53-6.94,6.42
|
||||
c-9-0.21-18-0.06-27-0.06c-6.05,0-7.91-1.8-7.92-7.94C-0.02,131.57,0,107.07,0,82.57z" fill="#35495e" />
|
||||
<path d="M132.98,94.13c-8.21,18.88-16.33,37.1-24.06,55.48c-6.02,14.31-5.81,14.4-21.31,14.4c-6.67,0-13.33,0.05-20-0.01
|
||||
c-5.91-0.05-7.71-2.44-5.46-7.61c6.86-15.8,13.86-31.55,20.82-47.31c9.41-21.32,18.81-42.63,28.24-63.94
|
||||
c5.59-12.62,11.14-25.25,16.94-37.77c0.82-1.78,2.95-4.09,4.47-4.09c1.63,0,4,2.11,4.78,3.86c13.4,29.78,26.56,59.66,39.87,89.49
|
||||
c6.48,14.53,13.16,28.97,19.72,43.46c2.57,5.68,5.11,11.38,7.61,17.1c1.61,3.68-0.13,6.75-4.12,6.77
|
||||
c-23.83,0.08-47.66,0.09-71.49-0.01c-4.03-0.02-5.46-2.47-3.98-6.17c2.26-5.63,4.77-11.16,6.95-16.82c1.74-4.54,4.92-6.06,9.6-5.98
|
||||
c9.65,0.16,9.89-0.55,5.89-9.13c-4.57-9.81-8.76-19.8-13.14-29.7C134.08,95.62,133.68,95.17,132.98,94.13z" fill="#42b883" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
@@ -1,5 +1,7 @@
|
||||
/* 页面布局 CSS 变量 */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
|
||||
/* 头部高度 */
|
||||
--g-header-height: 60px;
|
||||
|
||||
@@ -16,44 +18,45 @@
|
||||
|
||||
/* 工具栏高度 */
|
||||
--g-toolbar-height: 50px;
|
||||
|
||||
/* 滚动条颜色 */
|
||||
--scrollbar-color: 240 5.9% 90%;
|
||||
|
||||
&.dark {
|
||||
color-scheme: dark;
|
||||
|
||||
--scrollbar-color: 240 3.7% 15.9%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 明暗模式 CSS 变量 */
|
||||
/* stylelint-disable-next-line no-duplicate-selectors */
|
||||
:root {
|
||||
color-scheme: light;
|
||||
::view-transition-old(root),
|
||||
::view-transition-new(root) {
|
||||
mix-blend-mode: normal;
|
||||
animation: none;
|
||||
}
|
||||
|
||||
&::view-transition-old(root),
|
||||
&::view-transition-new(root) {
|
||||
mix-blend-mode: normal;
|
||||
animation: none;
|
||||
}
|
||||
::view-transition-old(root) {
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
::view-transition-new(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.dark {
|
||||
&::view-transition-old(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&::view-transition-new(root) {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
&.dark {
|
||||
color-scheme: dark;
|
||||
|
||||
&::view-transition-old(root) {
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
&::view-transition-new(root) {
|
||||
z-index: 1;
|
||||
}
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-color: hsl(var(--border)) transparent;
|
||||
scrollbar-color: hsl(var(--scrollbar-color)) transparent;
|
||||
scrollbar-width: thin;
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
html,
|
||||
@@ -64,9 +67,6 @@ body {
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
font-family: var(--font-family);
|
||||
color: hsl(var(--foreground));
|
||||
background: hsl(var(--background));
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
@@ -46,8 +46,8 @@
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
display: block;
|
||||
clear: both;
|
||||
display: block;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,21 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { cn } from '@/utils'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import Profile from './profile.vue'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
onlyAvatar?: boolean
|
||||
dropdownAlign?: 'start' | 'center' | 'end'
|
||||
dropdownSide?: 'left' | 'right' | 'top' | 'bottom'
|
||||
buttonVariant?: 'secondary' | 'ghost'
|
||||
class?: HTMLAttributes['class']
|
||||
}>(), {
|
||||
dropdownAlign: 'end',
|
||||
dropdownSide: 'right',
|
||||
buttonVariant: 'ghost',
|
||||
})
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
@@ -14,7 +26,7 @@ const isProfileShow = ref(false)
|
||||
|
||||
<template>
|
||||
<FaDropdown
|
||||
align="end" :items="[
|
||||
:align="dropdownAlign" :side="dropdownSide" :items="[
|
||||
[
|
||||
{ label: settingsStore.settings.home.title, icon: 'i-mdi:home', handle: () => router.push({ path: settingsStore.settings.home.fullPath }), hide: !settingsStore.settings.home.enable },
|
||||
{ label: '个人设置', icon: 'i-mdi:account', handle: () => isProfileShow = true },
|
||||
@@ -27,7 +39,7 @@ const isProfileShow = ref(false)
|
||||
],
|
||||
]" class="flex-center"
|
||||
>
|
||||
<template #label>
|
||||
<template #header>
|
||||
<div class="space-y-2">
|
||||
<div class="text-xs text-secondary-foreground/50 font-light">
|
||||
当前登录账号
|
||||
@@ -39,23 +51,29 @@ const isProfileShow = ref(false)
|
||||
{{ userStore.account }}
|
||||
</div>
|
||||
<div class="text-xs text-secondary-foreground/50 font-normal">
|
||||
这里可以显示邮箱
|
||||
[ 这里可以显示邮箱 ]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<FaButton variant="ghost" class="h-9 flex-center gap-1 px-2">
|
||||
<FaAvatar :src="userStore.avatar" class="size-6">
|
||||
<FaIcon name="i-carbon:user-avatar-filled-alt" :size="24" class="text-secondary-foreground/50" />
|
||||
<FaButton
|
||||
:variant="buttonVariant" :class="cn('flex-center gap-1 p-2', {
|
||||
'size-8 p-1': onlyAvatar,
|
||||
}, props.class)"
|
||||
>
|
||||
<FaAvatar :src="userStore.avatar" :class="cn('size-6', { 'size-full': onlyAvatar })">
|
||||
<FaIcon name="i-carbon:user-avatar-filled" class="size-6 text-secondary-foreground/50" />
|
||||
</FaAvatar>
|
||||
<template v-if="settingsStore.mode === 'pc'">
|
||||
{{ userStore.account }}
|
||||
<FaIcon name="i-ep:caret-bottom" />
|
||||
</template>
|
||||
<div v-if="!onlyAvatar" class="min-w-0 flex-center-between flex-1 gap-2">
|
||||
<div class="flex-1 truncate text-start">
|
||||
{{ userStore.account }}
|
||||
</div>
|
||||
<FaIcon name="i-material-symbols:expand-all-rounded" />
|
||||
</div>
|
||||
</FaButton>
|
||||
</FaDropdown>
|
||||
<FaModal v-model="isProfileShow" align-center :header="false" :footer="false" :close-on-click-overlay="false" :close-on-press-escape="false" class="h-500px min-w-600px overflow-hidden" content-class="min-h-full p-0 flex">
|
||||
<FaModal v-model="isProfileShow" align-center :header="false" :footer="false" :close-on-click-overlay="false" :close-on-press-escape="false" class="h-500px max-w-xl overflow-hidden" content-class="min-h-full p-0 flex">
|
||||
<Profile />
|
||||
</FaModal>
|
||||
</template>
|
||||
@@ -16,8 +16,8 @@ const tabs = ref([
|
||||
|
||||
<template>
|
||||
<div class="min-h-full w-full">
|
||||
<div class="fixed inset-s-0 bottom-0 top-0 h-full w-40 border-e">
|
||||
<div v-for="(tab, index) in tabs" :key="index" class="cursor-pointer px-4 py-3 transition-background-color space-y-2 hover-bg-accent/50" :class="{ 'bg-accent hover-bg-accent!': active === index }" @click="active = index">
|
||||
<div class="fixed right-0 top-0 z-1 flex flex-row overflow-auto border-b border-e bg-background md:(inset-s-0 bottom-0 h-full w-40 flex-col)">
|
||||
<div v-for="(tab, index) in tabs" :key="index" class="flex-shrink-0 cursor-pointer px-4 py-3 transition-background-color space-y-2 hover-bg-accent/50" :class="{ 'bg-accent hover-bg-accent!': active === index }" @click="active = index">
|
||||
<div class="text-base text-accent-foreground leading-tight">
|
||||
{{ tab.title }}
|
||||
</div>
|
||||
@@ -26,7 +26,7 @@ const tabs = ref([
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ms-40 min-h-full flex-col-center p-10">
|
||||
<div class="min-h-full flex-col-center p-10 pt-20 md:(ms-40 pt-10)">
|
||||
<div v-if="active === 0">
|
||||
请开发者自行扩展
|
||||
</div>
|
||||
@@ -1,10 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toast } from 'vue-sonner'
|
||||
import * as z from 'zod'
|
||||
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
|
||||
|
||||
defineOptions({
|
||||
name: 'EditPasswordForm',
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import * as z from 'zod'
|
||||
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
|
||||
|
||||
defineOptions({
|
||||
name: 'LoginForm',
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import * as z from 'zod'
|
||||
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
|
||||
|
||||
defineOptions({
|
||||
name: 'RegisterForm',
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useForm } from 'vee-validate'
|
||||
import * as z from 'zod'
|
||||
import { FormControl, FormField, FormItem, FormMessage } from '@/ui/shadcn/ui/form'
|
||||
|
||||
defineOptions({
|
||||
name: 'ResetPasswordForm',
|
||||
|
||||
@@ -1,134 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'FileUpload',
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
action: UploadProps['action']
|
||||
headers?: UploadProps['headers']
|
||||
data?: UploadProps['data']
|
||||
name?: UploadProps['name']
|
||||
size?: number
|
||||
max?: number
|
||||
files?: UploadUserFile[]
|
||||
notip?: boolean
|
||||
ext?: string[]
|
||||
httpRequest?: UploadProps['httpRequest']
|
||||
}>(),
|
||||
{
|
||||
name: 'file',
|
||||
size: 2,
|
||||
max: 3,
|
||||
files: () => [],
|
||||
notip: false,
|
||||
ext: () => ['zip', 'rar'],
|
||||
},
|
||||
)
|
||||
|
||||
const emits = defineEmits<{
|
||||
onSuccess: [
|
||||
res: any,
|
||||
file: UploadUserFile,
|
||||
fileList: UploadUserFile[],
|
||||
]
|
||||
}>()
|
||||
|
||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
const fileName = file.name.split('.')
|
||||
const fileExt = fileName.at(-1) ?? ''
|
||||
const isTypeOk = props.ext.includes(fileExt)
|
||||
const isSizeOk = file.size / 1024 / 1024 < props.size
|
||||
if (!isTypeOk) {
|
||||
ElMessage.error(`上传文件只支持 ${props.ext.join(' / ')} 格式！`)
|
||||
}
|
||||
if (!isSizeOk) {
|
||||
ElMessage.error(`上传文件大小不能超过 ${props.size}MB！`)
|
||||
}
|
||||
return isTypeOk && isSizeOk
|
||||
}
|
||||
|
||||
const onExceed: UploadProps['onExceed'] = () => {
|
||||
ElMessage.warning('文件上传超过限制')
|
||||
}
|
||||
|
||||
const onSuccess: UploadProps['onSuccess'] = (res, file, fileList) => {
|
||||
emits('onSuccess', res, file, fileList)
|
||||
}
|
||||
|
||||
const onPreview: UploadProps['onPreview'] = (e) => {
|
||||
const getBlob = (url: string) => new Promise((resolve) => {
|
||||
const xhr = new XMLHttpRequest()
|
||||
xhr.open('GET', url, true)
|
||||
xhr.responseType = 'blob'
|
||||
xhr.onload = () => {
|
||||
if (xhr.status === 200) {
|
||||
resolve(xhr.response)
|
||||
}
|
||||
}
|
||||
xhr.send()
|
||||
})
|
||||
getBlob(e.url!).then((blob: any) => {
|
||||
const a = document.createElement('a')
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const event = new MouseEvent('click')
|
||||
a.target = '_blank'
|
||||
a.download = e.name
|
||||
a.href = url
|
||||
a.dispatchEvent(event)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElUpload
|
||||
:headers="headers"
|
||||
:action="action"
|
||||
:data="data"
|
||||
:name="name"
|
||||
:before-upload="beforeUpload"
|
||||
:on-exceed="onExceed"
|
||||
:on-success="onSuccess"
|
||||
:on-preview="onPreview"
|
||||
:http-request="httpRequest"
|
||||
:file-list="files"
|
||||
:limit="max"
|
||||
drag
|
||||
>
|
||||
<div class="slot">
|
||||
<FaIcon name="i-ep:upload-filled" class="el-icon--upload" />
|
||||
<div class="el-upload__text">
|
||||
将文件拖到此处，或<em>点击上传</em>
|
||||
</div>
|
||||
</div>
|
||||
<template #tip>
|
||||
<div v-if="!notip" class="el-upload__tip">
|
||||
<div style="display: inline-block;">
|
||||
<ElAlert :title="`上传文件支持 ${ext.join(' / ')} 格式，单个文件大小不超过 ${size}MB，且文件数量不超过 ${max} 个`" type="info" show-icon :closable="false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ElUpload>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
:deep(.el-upload.is-drag) {
|
||||
display: inline-block;
|
||||
|
||||
.el-upload-dragger {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&.is-dragover {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.slot {
|
||||
width: 300px;
|
||||
padding: 40px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,63 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
defineOptions({
|
||||
name: 'ImagePreview',
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
src: string
|
||||
width?: number | string
|
||||
height?: number | string
|
||||
}>(),
|
||||
{
|
||||
width: 200,
|
||||
height: 200,
|
||||
},
|
||||
)
|
||||
|
||||
const realWidth = computed(() => {
|
||||
return typeof props.width === 'string' ? props.width : `${props.width}px`
|
||||
})
|
||||
|
||||
const realHeight = computed(() => {
|
||||
return typeof props.height === 'string' ? props.height : `${props.height}px`
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElImage :src="src" fit="cover" :style="`width:${realWidth};height:${realHeight};`" :preview-src-list="[src]" preview-teleported>
|
||||
<template #error>
|
||||
<div class="image-slot">
|
||||
<FaIcon name="i-ph:image-broken-duotone" />
|
||||
</div>
|
||||
</template>
|
||||
</ElImage>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.el-image {
|
||||
background-color: var(--el-fill-color);
|
||||
border-radius: 5px;
|
||||
box-shadow: var(--el-box-shadow-light);
|
||||
transition: background-color 0.3s, var(--el-transition-box-shadow);
|
||||
|
||||
:deep(.el-image__inner) {
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.2);
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.image-slot) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 30px;
|
||||
color: #909399;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,253 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { UploadProps } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'ImageUpload',
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
action: UploadProps['action']
|
||||
headers?: UploadProps['headers']
|
||||
data?: UploadProps['data']
|
||||
name?: UploadProps['name']
|
||||
size?: number
|
||||
width?: number
|
||||
height?: number
|
||||
placeholder?: string
|
||||
notip?: boolean
|
||||
ext?: string[]
|
||||
httpRequest?: UploadProps['httpRequest']
|
||||
}>(),
|
||||
{
|
||||
name: 'file',
|
||||
size: 2,
|
||||
width: 150,
|
||||
height: 150,
|
||||
placeholder: '',
|
||||
notip: false,
|
||||
ext: () => ['jpg', 'png', 'gif', 'bmp'],
|
||||
},
|
||||
)
|
||||
|
||||
const emits = defineEmits<{
|
||||
onSuccess: [
|
||||
res: any,
|
||||
]
|
||||
}>()
|
||||
|
||||
const url = defineModel<string>({
|
||||
default: '',
|
||||
})
|
||||
|
||||
const uploadData = ref({
|
||||
imageViewerVisible: false,
|
||||
progress: {
|
||||
preview: '',
|
||||
percent: 0,
|
||||
},
|
||||
})
|
||||
|
||||
// 预览
|
||||
function preview() {
|
||||
uploadData.value.imageViewerVisible = true
|
||||
}
|
||||
// 关闭预览
|
||||
function previewClose() {
|
||||
uploadData.value.imageViewerVisible = false
|
||||
}
|
||||
// 移除
|
||||
function remove() {
|
||||
url.value = ''
|
||||
}
|
||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
const fileName = file.name.split('.')
|
||||
const fileExt = fileName.at(-1) ?? ''
|
||||
const isTypeOk = props.ext.includes(fileExt)
|
||||
const isSizeOk = file.size / 1024 / 1024 < props.size
|
||||
if (!isTypeOk) {
|
||||
ElMessage.error(`上传图片只支持 ${props.ext.join(' / ')} 格式！`)
|
||||
}
|
||||
if (!isSizeOk) {
|
||||
ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
|
||||
}
|
||||
if (isTypeOk && isSizeOk) {
|
||||
uploadData.value.progress.preview = URL.createObjectURL(file)
|
||||
}
|
||||
return isTypeOk && isSizeOk
|
||||
}
|
||||
const onProgress: UploadProps['onProgress'] = (file) => {
|
||||
uploadData.value.progress.percent = ~~file.percent
|
||||
}
|
||||
const onSuccess: UploadProps['onSuccess'] = (res) => {
|
||||
uploadData.value.progress.preview = ''
|
||||
uploadData.value.progress.percent = 0
|
||||
emits('onSuccess', res)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<ElUpload
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
:action="action"
|
||||
:data="data"
|
||||
:name="name"
|
||||
:before-upload="beforeUpload"
|
||||
:on-progress="onProgress"
|
||||
:on-success="onSuccess"
|
||||
:http-request="httpRequest"
|
||||
drag
|
||||
class="image-upload"
|
||||
>
|
||||
<ElImage v-if="url === ''" :src="url === '' ? placeholder : url" :style="`width:${width}px;height:${height}px;`" fit="fill">
|
||||
<template #error>
|
||||
<div class="image-slot" :style="`width:${width}px;height:${height}px;`">
|
||||
<FaIcon name="i-ep:plus" class="icon" />
|
||||
</div>
|
||||
</template>
|
||||
</ElImage>
|
||||
<div v-else class="image">
|
||||
<ElImage :src="url" :style="`width:${width}px;height:${height}px;`" fit="fill" />
|
||||
<div class="mask">
|
||||
<div class="actions">
|
||||
<span @click.stop="preview">
|
||||
<FaIcon name="i-ep:zoom-in" class="icon" />
|
||||
</span>
|
||||
<span @click.stop="remove">
|
||||
<FaIcon name="i-ep:delete" class="icon" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="url === '' && uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
|
||||
<ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
|
||||
<ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
|
||||
</div>
|
||||
</ElUpload>
|
||||
<div v-if="!notip" class="el-upload__tip">
|
||||
<div style="display: inline-block;">
|
||||
<ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，且图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}`" type="info" show-icon :closable="false" />
|
||||
</div>
|
||||
</div>
|
||||
<ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="[url]" teleported @close="previewClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.upload-container {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.image {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
border-radius: 6px;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
span {
|
||||
width: 50%;
|
||||
color: var(--el-color-white);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.1s, transform 0.1s;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.image-upload {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
:deep(.el-upload) {
|
||||
.el-upload-dragger {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
&.is-dragover {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--el-text-color-placeholder);
|
||||
background-color: transparent;
|
||||
|
||||
.icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
.el-progress__text {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,278 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import type { UploadProps } from 'element-plus'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
name: 'ImagesUpload',
|
||||
})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
action: UploadProps['action']
|
||||
headers?: UploadProps['headers']
|
||||
data?: UploadProps['data']
|
||||
name?: UploadProps['name']
|
||||
size?: number
|
||||
max?: number
|
||||
width?: number
|
||||
height?: number
|
||||
placeholder?: string
|
||||
notip?: boolean
|
||||
ext?: string[]
|
||||
httpRequest?: UploadProps['httpRequest']
|
||||
}>(),
|
||||
{
|
||||
name: 'file',
|
||||
size: 2,
|
||||
max: 3,
|
||||
width: 150,
|
||||
height: 150,
|
||||
placeholder: '',
|
||||
notip: false,
|
||||
ext: () => ['jpg', 'png', 'gif', 'bmp'],
|
||||
},
|
||||
)
|
||||
|
||||
const emits = defineEmits<{
|
||||
onSuccess: [
|
||||
res: any,
|
||||
]
|
||||
}>()
|
||||
|
||||
const url = defineModel<string[]>({
|
||||
default: [],
|
||||
})
|
||||
|
||||
const uploadData = ref({
|
||||
dialogImageIndex: 0,
|
||||
imageViewerVisible: false,
|
||||
progress: {
|
||||
preview: '',
|
||||
percent: 0,
|
||||
},
|
||||
})
|
||||
|
||||
// 预览
|
||||
function preview(index: number) {
|
||||
uploadData.value.dialogImageIndex = index
|
||||
uploadData.value.imageViewerVisible = true
|
||||
}
|
||||
// 关闭预览
|
||||
function previewClose() {
|
||||
uploadData.value.imageViewerVisible = false
|
||||
}
|
||||
// 移除
|
||||
function remove(index: number) {
|
||||
url.value.splice(index, 1)
|
||||
}
|
||||
// 移动
|
||||
function move(index: number, type: 'left' | 'right') {
|
||||
if (type === 'left' && index !== 0) {
|
||||
url.value[index] = url.value.splice(index - 1, 1, url.value[index])[0]
|
||||
}
|
||||
if (type === 'right' && index !== url.value.length - 1) {
|
||||
url.value[index] = url.value.splice(index + 1, 1, url.value[index])[0]
|
||||
}
|
||||
}
|
||||
|
||||
const beforeUpload: UploadProps['beforeUpload'] = (file) => {
|
||||
const fileName = file.name.split('.')
|
||||
const fileExt = fileName.at(-1) ?? ''
|
||||
const isTypeOk = props.ext.includes(fileExt)
|
||||
const isSizeOk = file.size / 1024 / 1024 < props.size
|
||||
if (!isTypeOk) {
|
||||
ElMessage.error(`上传图片只支持 ${props.ext.join(' / ')} 格式！`)
|
||||
}
|
||||
if (!isSizeOk) {
|
||||
ElMessage.error(`上传图片大小不能超过 ${props.size}MB！`)
|
||||
}
|
||||
if (isTypeOk && isSizeOk) {
|
||||
uploadData.value.progress.preview = URL.createObjectURL(file)
|
||||
}
|
||||
return isTypeOk && isSizeOk
|
||||
}
|
||||
const onProgress: UploadProps['onProgress'] = (file) => {
|
||||
uploadData.value.progress.percent = ~~file.percent
|
||||
}
|
||||
const onSuccess: UploadProps['onSuccess'] = (res) => {
|
||||
uploadData.value.progress.preview = ''
|
||||
uploadData.value.progress.percent = 0
|
||||
emits('onSuccess', res)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<div v-for="(item, index) in (url as string[])" :key="index" class="images">
|
||||
<ElImage v-if="index < max" :src="item" :style="`width:${width}px;height:${height}px;`" fit="cover" />
|
||||
<div class="mask">
|
||||
<div class="actions">
|
||||
<span @click="preview(index)">
|
||||
<FaIcon name="i-ep:zoom-in" class="icon" />
|
||||
</span>
|
||||
<span @click="remove(index)">
|
||||
<FaIcon name="i-ep:delete" class="icon" />
|
||||
</span>
|
||||
<span v-show="url.length > 1" :class="{ disabled: index === 0 }" @click="move(index, 'left')">
|
||||
<FaIcon name="i-ep:back" class="icon" />
|
||||
</span>
|
||||
<span v-show="url.length > 1" :class="{ disabled: index === url.length - 1 }" @click="move(index, 'right')">
|
||||
<FaIcon name="i-ep:right" class="icon" />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ElUpload
|
||||
v-show="url.length < max"
|
||||
:show-file-list="false"
|
||||
:headers="headers"
|
||||
:action="action"
|
||||
:data="data"
|
||||
:name="name"
|
||||
:before-upload="beforeUpload"
|
||||
:on-progress="onProgress"
|
||||
:on-success="onSuccess"
|
||||
:http-request="httpRequest"
|
||||
drag
|
||||
class="images-upload"
|
||||
>
|
||||
<div class="image-slot" :style="`width:${width}px;height:${height}px;`">
|
||||
<FaIcon name="i-ep:plus" class="icon" />
|
||||
</div>
|
||||
<div v-show="uploadData.progress.percent" class="progress" :style="`width:${width}px;height:${height}px;`">
|
||||
<ElImage :src="uploadData.progress.preview" :style="`width:${width}px;height:${height}px;`" fit="fill" />
|
||||
<ElProgress type="circle" :width="Math.min(width, height) * 0.8" :percentage="uploadData.progress.percent" />
|
||||
</div>
|
||||
</ElUpload>
|
||||
<div v-if="!notip" class="el-upload__tip">
|
||||
<div style="display: inline-block;">
|
||||
<ElAlert :title="`上传图片支持 ${ext.join(' / ')} 格式，单张图片大小不超过 ${size}MB，建议图片尺寸为 ${width}*${height}，且图片数量不超过 ${max} 张`" type="info" show-icon :closable="false" />
|
||||
</div>
|
||||
</div>
|
||||
<ElImageViewer v-if="uploadData.imageViewerVisible" :url-list="url as string[]" :initial-index="uploadData.dialogImageIndex" teleported @close="previewClose" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.upload-container {
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
.el-image {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.images {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-inline-end: 10px;
|
||||
overflow: hidden;
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
span {
|
||||
width: 50%;
|
||||
color: var(--el-color-white);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.1s, transform 0.1s;
|
||||
|
||||
&.disabled {
|
||||
color: var(--el-text-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
&:hover:not(.disabled) {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover .mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.images-upload {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
:deep(.el-upload) {
|
||||
.el-upload-dragger {
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
|
||||
&.is-dragover {
|
||||
border-width: 1px;
|
||||
}
|
||||
|
||||
.image-slot {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: var(--el-text-color-placeholder);
|
||||
background-color: transparent;
|
||||
|
||||
.icon {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: "";
|
||||
background-color: var(--el-overlay-color-lighter);
|
||||
}
|
||||
|
||||
.el-progress {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
z-index: 1;
|
||||
transform: translateX(-50%) translateY(-50%);
|
||||
|
||||
.el-progress__text {
|
||||
color: var(--el-text-color-placeholder);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because one or more lines are too long
@@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import settingsDefault from '@/settings.default'
|
||||
import useMenuStore from '@/store/modules/menu'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import { diffTwoObj } from '@/utils/object'
|
||||
import { useClipboard } from '@vueuse/core'
|
||||
import { toast } from 'vue-sonner'
|
||||
import settingsDefault from '@/settings.default'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import { diffTwoObj } from '@/utils/object'
|
||||
|
||||
defineOptions({
|
||||
name: 'AppSetting',
|
||||
@@ -18,6 +16,15 @@ const menuStore = useMenuStore()
|
||||
|
||||
const isShow = ref(false)
|
||||
|
||||
const appRadius = computed<number[]>({
|
||||
get() {
|
||||
return [settingsStore.settings.app.radius]
|
||||
},
|
||||
set(value) {
|
||||
settingsStore.settings.app.radius = value[0]
|
||||
},
|
||||
})
|
||||
|
||||
watch(() => settingsStore.settings.menu.mode, (value) => {
|
||||
if (value === 'single') {
|
||||
menuStore.setActived(0)
|
||||
@@ -49,7 +56,7 @@ function handleCopy() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported">
|
||||
<FaDrawer v-model="isShow" title="应用配置" description="在生产环境中应关闭该模块" :footer="isSupported" :destroy-on-close="false" content-class="sm:min-w-md">
|
||||
<div class="rounded-2 bg-rose/20 px-4 py-2 text-sm/6 c-rose">
|
||||
应用配置可实时预览效果，但只是临时生效，要想真正应用于项目，可以点击下方的「复制配置」按钮，并将配置粘贴到 src/settings.ts 文件中。
|
||||
</div>
|
||||
@@ -70,19 +77,7 @@ function handleCopy() {
|
||||
<div class="label">
|
||||
圆角系数
|
||||
</div>
|
||||
<div class="flex-center-start gap-1">
|
||||
<FaButton
|
||||
v-for="(item, index) in [
|
||||
{ label: 0, value: 0 },
|
||||
{ label: 0.25, value: 0.25 },
|
||||
{ label: 0.5, value: 0.5 },
|
||||
{ label: 0.75, value: 0.75 },
|
||||
{ label: 1, value: 1 },
|
||||
]" :key="index" :variant="settingsStore.settings.app.radius === item.value ? 'default' : 'outline'" size="sm" class="w-12" @click="settingsStore.settings.app.radius = (item.value as any)"
|
||||
>
|
||||
{{ item.label }}
|
||||
</FaButton>
|
||||
</div>
|
||||
<FaSlider v-model="appRadius" :min="0" :max="1" :step="0.25" class="w-1/2" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="settingsStore.mode === 'pc'">
|
||||
@@ -196,11 +191,17 @@ function handleCopy() {
|
||||
</div>
|
||||
<div>
|
||||
<FaDivider>工具栏</FaDivider>
|
||||
<div class="setting-item">
|
||||
<div class="label">
|
||||
是否启用
|
||||
</div>
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.enable" />
|
||||
</div>
|
||||
<div v-if="settingsStore.mode === 'pc'" class="setting-item">
|
||||
<div class="label">
|
||||
面包屑导航
|
||||
</div>
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.breadcrumb" />
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.breadcrumb" :disabled="!settingsStore.settings.toolbar.enable" />
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="label">
|
||||
@@ -209,13 +210,13 @@ function handleCopy() {
|
||||
<FaIcon name="i-ri:question-line" />
|
||||
</FaTooltip>
|
||||
</div>
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.navSearch" />
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.navSearch" :disabled="!settingsStore.settings.toolbar.enable" />
|
||||
</div>
|
||||
<div v-if="settingsStore.mode === 'pc'" class="setting-item">
|
||||
<div class="label">
|
||||
全屏
|
||||
</div>
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.fullscreen" />
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.fullscreen" :disabled="!settingsStore.settings.toolbar.enable" />
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="label">
|
||||
@@ -224,7 +225,7 @@ function handleCopy() {
|
||||
<FaIcon name="i-ri:question-line" />
|
||||
</FaTooltip>
|
||||
</div>
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.pageReload" />
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.pageReload" :disabled="!settingsStore.settings.toolbar.enable" />
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="label">
|
||||
@@ -233,7 +234,7 @@ function handleCopy() {
|
||||
<FaIcon name="i-ri:question-line" />
|
||||
</FaTooltip>
|
||||
</div>
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.colorScheme" />
|
||||
<FaSwitch v-model="settingsStore.settings.toolbar.colorScheme" :disabled="!settingsStore.settings.toolbar.enable" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
@@ -242,7 +243,7 @@ function handleCopy() {
|
||||
<div class="label">
|
||||
是否启用快捷键
|
||||
</div>
|
||||
<FaSwitch v-model="settingsStore.settings.mainPage.enableHotkeys" />
|
||||
<FaSwitch v-model="settingsStore.settings.mainPage.enableHotkeys" :disabled="!settingsStore.settings.toolbar.enable" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
|
||||
defineOptions({
|
||||
name: 'Copyright',
|
||||
})
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<footer v-if="settingsStore.settings.copyright.enable" class="copyright">
|
||||
<span>Copyright</span>
|
||||
<FaIcon name="i-ri:copyright-line" :size="18" />
|
||||
<span v-if="settingsStore.settings.copyright.dates">{{ settingsStore.settings.copyright.dates }}</span>
|
||||
<template v-if="settingsStore.settings.copyright.company">
|
||||
<a v-if="settingsStore.settings.copyright.website" :href="settingsStore.settings.copyright.website" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.company }}</a>
|
||||
<span v-else>{{ settingsStore.settings.copyright.company }}</span>
|
||||
</template>
|
||||
<a v-if="settingsStore.settings.copyright.beian" href="https://beian.miit.gov.cn/" target="_blank" rel="noopener">{{ settingsStore.settings.copyright.beian }}</a>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.copyright {
|
||||
--uno: flex items-center justify-center flex-wrap my-4 px-4 text-sm text-secondary-foreground/50;
|
||||
|
||||
span,
|
||||
a {
|
||||
--uno: px-1;
|
||||
}
|
||||
|
||||
a {
|
||||
--uno: text-center no-underline hover-text-secondary-foreground transition;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,9 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { useSlots } from '@/slots'
|
||||
import useMenuStore from '@/store/modules/menu'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import Logo from '../Logo/index.vue'
|
||||
import ToolbarRightSide from '../Topbar/Toolbar/rightSide.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'LayoutHeader',
|
||||
@@ -18,11 +15,11 @@ const { switchTo } = useMenu()
|
||||
<template>
|
||||
<Transition name="header">
|
||||
<header v-if="settingsStore.mode === 'pc' && settingsStore.settings.menu.mode === 'head'">
|
||||
<component :is="useSlots('header-start')" />
|
||||
<div class="header-container">
|
||||
<component :is="useSlots('header-start')" />
|
||||
<Logo class="title" />
|
||||
<component :is="useSlots('header-after-logo')" />
|
||||
<FaScrollArea horizontal :scrollbar="false" mask gradient-color="var(--g-header-bg)" class="menu-container h-full flex-1">
|
||||
<FaScrollArea :scrollbar="false" mask horizontal gradient-color="var(--g-header-bg)" class="menu-container h-full flex-1">
|
||||
<!-- 顶部模式 -->
|
||||
<div class="menu h-full flex of-hidden transition-all">
|
||||
<template v-for="(item, index) in menuStore.allMenus" :key="index">
|
||||
@@ -47,9 +44,12 @@ const { switchTo } = useMenu()
|
||||
</template>
|
||||
</div>
|
||||
</FaScrollArea>
|
||||
<ToolbarRightSide />
|
||||
<component :is="useSlots('header-after-menu')" />
|
||||
<div class="flex-center">
|
||||
<AccountButton only-avatar dropdown-side="bottom" class="size-12 p-2" />
|
||||
</div>
|
||||
<component :is="useSlots('header-end')" />
|
||||
</div>
|
||||
<component :is="useSlots('header-end')" />
|
||||
</header>
|
||||
</Transition>
|
||||
</template>
|
||||
@@ -78,7 +78,7 @@ header {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 12px 0 20px;
|
||||
padding: 0 12px;
|
||||
margin: 0 auto;
|
||||
|
||||
:deep(a.title) {
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
|
||||
defineOptions({
|
||||
@@ -54,6 +53,14 @@ onMounted(() => {
|
||||
</div>
|
||||
激活下一个主导航
|
||||
</li>
|
||||
<li class="flex-baseline gap-2 py-1">
|
||||
<div class="flex-shrink-0 space-x-1">
|
||||
<FaKbd>{{ settingsStore.os === 'mac' ? '⌥' : 'Alt' }}</FaKbd>
|
||||
<FaKbd>{{ settingsStore.os === 'mac' ? '⇧' : 'Shift' }}</FaKbd>
|
||||
<FaKbd>`</FaKbd>
|
||||
</div>
|
||||
激活上一个主导航
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div v-if="settingsStore.settings.tabbar.enable && settingsStore.settings.tabbar.enableHotkeys">
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import imgLogo from '@/assets/images/logo.png'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import imgLogo from '@/assets/images/logo.svg'
|
||||
|
||||
defineOptions({
|
||||
name: 'Logo',
|
||||
@@ -26,7 +25,7 @@ const to = computed(() => settingsStore.settings.home.enable ? settingsStore.set
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<RouterLink :to="to" class="h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline" :class="{ 'cursor-pointer': settingsStore.settings.home.enable }" :title="title">
|
||||
<RouterLink :to class="h-[var(--g-sidebar-logo-height)] w-inherit flex-center gap-2 px-3 text-inherit no-underline" :class="{ 'cursor-default': !settingsStore.settings.home.enable }" :title="title">
|
||||
<img v-if="showLogo" :src="logo" class="logo h-[30px] w-[30px] object-contain">
|
||||
<span v-if="showTitle" class="block truncate font-bold">{{ title }}</span>
|
||||
</RouterLink>
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import hotkeys from 'hotkeys-js'
|
||||
import { useSlots } from '@/slots'
|
||||
import useMenuStore from '@/store/modules/menu'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import Logo from '../Logo/index.vue'
|
||||
|
||||
defineOptions({
|
||||
@@ -12,6 +11,25 @@ const settingsStore = useSettingsStore()
|
||||
const menuStore = useMenuStore()
|
||||
|
||||
const { switchTo } = useMenu()
|
||||
|
||||
onMounted(() => {
|
||||
hotkeys('alt+`', (e) => {
|
||||
if (settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)) {
|
||||
e.preventDefault()
|
||||
switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
|
||||
}
|
||||
})
|
||||
hotkeys('alt+shift+`', (e) => {
|
||||
if (settingsStore.settings.menu.enableHotkeys && ['side', 'head'].includes(settingsStore.settings.menu.mode)) {
|
||||
e.preventDefault()
|
||||
switchTo(menuStore.actived - 1 >= 0 ? menuStore.actived - 1 : menuStore.allMenus.length - 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
hotkeys.unbind('alt+`')
|
||||
hotkeys.unbind('alt+shift+`')
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -20,7 +38,7 @@ const { switchTo } = useMenu()
|
||||
<component :is="useSlots('main-sidebar-top')" />
|
||||
<Logo :show-title="false" class="sidebar-logo" />
|
||||
<component :is="useSlots('main-sidebar-after-logo')" />
|
||||
<FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu">
|
||||
<FaScrollArea :scrollbar="false" mask gradient-color="var(--g-main-sidebar-bg)" class="menu flex-1">
|
||||
<!-- 侧边栏模式（含主导航） -->
|
||||
<div class="w-full flex flex-col of-hidden py-1 transition-all -mt-2">
|
||||
<template v-for="(item, index) in menuStore.allMenus" :key="index">
|
||||
@@ -45,6 +63,10 @@ const { switchTo } = useMenu()
|
||||
</template>
|
||||
</div>
|
||||
</FaScrollArea>
|
||||
<component :is="useSlots('main-sidebar-after-menu')" />
|
||||
<div class="flex-center px-4 py-3">
|
||||
<AccountButton only-avatar :button-variant="settingsStore.settings.menu.mode === 'side' ? 'secondary' : 'ghost'" class="size-12 p-2" />
|
||||
</div>
|
||||
<component :is="useSlots('main-sidebar-bottom')" />
|
||||
</div>
|
||||
</Transition>
|
||||
@@ -68,8 +90,6 @@ const { switchTo } = useMenu()
|
||||
}
|
||||
|
||||
.menu {
|
||||
flex: 1;
|
||||
|
||||
:deep(.menu-item) {
|
||||
.menu-item-container {
|
||||
padding-block: 8px;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { MenuInjection, MenuProps } from './types'
|
||||
import { cn } from '@/utils'
|
||||
import Item from './item.vue'
|
||||
import SubMenu from './sub.vue'
|
||||
import { rootMenuInjectionKey } from './types'
|
||||
@@ -19,6 +20,16 @@ const props = withDefaults(
|
||||
},
|
||||
)
|
||||
|
||||
// 用于缓存对象到 ID 的映射
|
||||
const idMap = new WeakMap<object, string>()
|
||||
// 获取对象的唯一 ID，如果已存在则返回缓存的 ID，否则生成新的
|
||||
function getUseId(obj: object): string {
|
||||
if (!idMap.has(obj)) {
|
||||
idMap.set(obj, useId())
|
||||
}
|
||||
return idMap.get(obj)!
|
||||
}
|
||||
|
||||
const activeIndex = ref<MenuInjection['activeIndex']>(props.value)
|
||||
const items = ref<MenuInjection['items']>({})
|
||||
const subMenus = ref<MenuInjection['subMenus']>({})
|
||||
@@ -31,8 +42,8 @@ const isMenuPopup = computed<MenuInjection['isMenuPopup']>(() => {
|
||||
// 解析传入的 menu 数据，并保存到 items 和 subMenus 对象中
|
||||
function initItems(menu: MenuProps['menu'], parentPaths: string[] = []) {
|
||||
menu.forEach((item) => {
|
||||
const index = item.path ?? JSON.stringify(item)
|
||||
if (item.children) {
|
||||
const index = item.path ?? getUseId(item)
|
||||
if (item.children?.some(item => item.meta?.menu !== false)) {
|
||||
const indexPath = [...parentPaths, index]
|
||||
subMenus.value[index] = {
|
||||
index,
|
||||
@@ -143,6 +154,7 @@ watch(() => props.collapse, (value) => {
|
||||
|
||||
provide(rootMenuInjectionKey, reactive({
|
||||
props,
|
||||
getUseId,
|
||||
items,
|
||||
subMenus,
|
||||
activeIndex,
|
||||
@@ -158,15 +170,15 @@ provide(rootMenuInjectionKey, reactive({
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="h-full w-full flex flex-col of-hidden transition-all-300" :class="{
|
||||
'flex-row! w-auto!': isMenuPopup && props.mode === 'horizontal',
|
||||
:class="cn('h-full w-full flex flex-col of-hidden transition-all-300', {
|
||||
'flex-row w-auto': isMenuPopup && props.mode === 'horizontal',
|
||||
'py-1': props.mode === 'vertical',
|
||||
}"
|
||||
})"
|
||||
>
|
||||
<template v-for="item in menu" :key="item.path ?? JSON.stringify(item)">
|
||||
<template v-for="item in menu" :key="item.path ?? getUseId(item)">
|
||||
<template v-if="item.meta?.menu !== false">
|
||||
<SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? JSON.stringify(item)]" />
|
||||
<Item v-else :item="item" :unique-key="[item.path ?? JSON.stringify(item)]" @click="handleMenuItemClick(item.path ?? JSON.stringify(item))" />
|
||||
<SubMenu v-if="item.children?.length" :menu="item" :unique-key="[item.path ?? getUseId(item)]" />
|
||||
<Item v-else :item="item" :unique-key="[item.path ?? getUseId(item)]" @click="handleMenuItemClick(item.path ?? getUseId(item))" />
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { SubMenuItemProps } from './types'
|
||||
import { cn } from '@/utils'
|
||||
import { rootMenuInjectionKey } from './types'
|
||||
|
||||
defineOptions({
|
||||
@@ -29,13 +30,6 @@ const isItemActive = computed(() => {
|
||||
return isActived.value && (!props.subMenu || rootMenu.isMenuPopup)
|
||||
})
|
||||
|
||||
// 缩进样式
|
||||
const indentStyle = computed(() => {
|
||||
return !rootMenu.isMenuPopup
|
||||
? `padding-left: ${20 * (props.level ?? 0)}px`
|
||||
: ''
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
ref: itemRef,
|
||||
})
|
||||
@@ -43,11 +37,11 @@ defineExpose({
|
||||
|
||||
<template>
|
||||
<div
|
||||
ref="itemRef" class="menu-item relative transition-all" :class="{
|
||||
ref="itemRef" :class="cn('menu-item relative transition-all', {
|
||||
'active': isItemActive,
|
||||
'py-1 px-2': (rootMenu.isMenuPopup && rootMenu.props.mode === 'vertical') || (rootMenu.isMenuPopup && level !== 0 && rootMenu.props.mode === 'horizontal') || !rootMenu.isMenuPopup,
|
||||
'px-1 py-2': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'horizontal',
|
||||
}"
|
||||
})"
|
||||
>
|
||||
<router-link v-slot="{ href, navigate }" custom :to="uniqueKey.at(-1) ?? ''">
|
||||
<FaTooltip :disabled="!rootMenu.isMenuPopup || level !== 0 || subMenu" :text="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" :side="rootMenu.props.mode === 'vertical' ? 'right' : 'bottom'" class="h-full w-full">
|
||||
@@ -58,39 +52,40 @@ defineExpose({
|
||||
target: item.meta?.link ? '_blank' : '_self',
|
||||
class: 'no-underline',
|
||||
}),
|
||||
}" class="group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg px-4 py-3 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])" :class="{
|
||||
}" :class="cn('group menu-item-container relative h-full w-full flex cursor-pointer items-center justify-between gap-1 rounded-lg px-4 py-3 text-[var(--g-sub-sidebar-menu-color)] transition-all hover-(bg-[var(--g-sub-sidebar-menu-hover-bg)] text-[var(--g-sub-sidebar-menu-hover-color)])', {
|
||||
'text-[var(--g-sub-sidebar-menu-active-color)]! bg-[var(--g-sub-sidebar-menu-active-bg)]!': isItemActive,
|
||||
'px-3!': rootMenu.isMenuPopup && level === 0,
|
||||
}" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
|
||||
'px-3': rootMenu.isMenuPopup && level === 0,
|
||||
})" :title="typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title" v-on="{
|
||||
...(!subMenu && {
|
||||
click: navigate,
|
||||
}),
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="inline-flex flex-1 items-center justify-center gap-[12px]" :class="{
|
||||
:class="cn('inline-flex flex-1 items-center justify-center gap-[12px] pl-[calc(var(--indent-level)*20px)]', {
|
||||
'flex-col': rootMenu.isMenuPopup && level === 0 && rootMenu.props.mode === 'vertical',
|
||||
'gap-1!': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
|
||||
'gap-1': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
|
||||
'w-full': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName && rootMenu.props.mode === 'vertical',
|
||||
}" :style="indentStyle"
|
||||
})" :style="{
|
||||
'--indent-level': !rootMenu.isMenuPopup ? props.level ?? 0 : 0,
|
||||
}"
|
||||
>
|
||||
<FaIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" :size="18" class="menu-item-container-icon transition-transform group-hover-scale-120" />
|
||||
<FaIcon v-if="props.item.meta?.icon" :name="props.item.meta.icon" class="menu-item-container-icon size-5 transition-transform group-hover-scale-120" />
|
||||
<span
|
||||
v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" class="w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width"
|
||||
:class="{
|
||||
v-if="!(rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName)" :class="cn('w-0 flex-1 truncate text-sm transition-height transition-opacity transition-width', {
|
||||
'opacity-0 w-0 h-0': rootMenu.isMenuPopup && level === 0 && !rootMenu.props.showCollapseName,
|
||||
'w-full text-center': rootMenu.isMenuPopup && level === 0 && rootMenu.props.showCollapseName,
|
||||
}"
|
||||
})"
|
||||
>
|
||||
{{ typeof item.meta?.title === 'function' ? item.meta?.title() : item.meta?.title }}
|
||||
</span>
|
||||
</div>
|
||||
<i
|
||||
v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" class="relative ms-1 w-[10px] after:absolute before:absolute after:h-[1.5px] after:w-[6px] before:h-[1.5px] before:w-[6px] after:bg-current before:bg-current after:transition-transform-200 before:transition-transform-200 after:content-empty before:content-empty after:-translate-y-[1px] before:-translate-y-[1px]" :class="[
|
||||
expand ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]' : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px]',
|
||||
rootMenu.isMenuPopup && level === 0 && 'opacity-0',
|
||||
rootMenu.isMenuPopup && level !== 0 && '-rotate-90 -top-[1.5px]',
|
||||
]"
|
||||
v-if="subMenu && !(rootMenu.isMenuPopup && level === 0)" :class="cn('relative ms-1 w-[10px] after:absolute before:absolute after:h-[1.5px] after:w-[6px] before:h-[1.5px] before:w-[6px] after:bg-current before:bg-current after:transition-transform-200 before:transition-transform-200 after:content-empty before:content-empty after:-translate-y-[1px] before:-translate-y-[1px]', {
|
||||
[expand ? 'before:-rotate-45 before:-translate-x-[2px] after:rotate-45 after:translate-x-[2px]' : 'before:rotate-45 before:-translate-x-[2px] after:-rotate-45 after:translate-x-[2px]']: true,
|
||||
'opacity-0': rootMenu.isMenuPopup && level === 0,
|
||||
'-rotate-90 -top-[1.5px]': rootMenu.isMenuPopup && level !== 0,
|
||||
})"
|
||||
/>
|
||||
</component>
|
||||
</FaTooltip>
|
||||
|
||||
+141
-128
@@ -1,6 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import type { SubMenuProps } from './types'
|
||||
import { useTimeoutFn } from '@vueuse/core'
|
||||
import { cn } from '@/utils'
|
||||
import Item from './item.vue'
|
||||
import { rootMenuInjectionKey } from './types'
|
||||
|
||||
@@ -15,115 +16,113 @@ const props = withDefaults(
|
||||
},
|
||||
)
|
||||
|
||||
const index = props.menu.path ?? JSON.stringify(props.menu)
|
||||
const itemRef = useTemplateRef('itemRef')
|
||||
const subMenuRef = useTemplateRef('subMenuRef')
|
||||
const rootMenu = inject(rootMenuInjectionKey)!
|
||||
|
||||
const opened = computed(() => {
|
||||
return rootMenu.openedMenus.includes(props.uniqueKey.at(-1)!)
|
||||
})
|
||||
const index = props.menu.path ?? rootMenu.getUseId(props.menu)
|
||||
|
||||
const opened = computed(() => rootMenu.openedMenus.includes(props.uniqueKey.at(-1)!))
|
||||
|
||||
const transitionEvent = computed(() => {
|
||||
return rootMenu.isMenuPopup
|
||||
? {
|
||||
enter(el: HTMLElement) {
|
||||
if (el.offsetHeight > window.innerHeight) {
|
||||
el.style.height = `${window.innerHeight}px`
|
||||
}
|
||||
},
|
||||
afterEnter: () => {},
|
||||
beforeLeave: (el: HTMLElement) => {
|
||||
el.style.maxHeight = `${el.offsetHeight}px`
|
||||
el.style.overflow = 'hidden'
|
||||
},
|
||||
leave: (el: HTMLElement) => {
|
||||
el.style.maxHeight = '0'
|
||||
},
|
||||
afterLeave(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
}
|
||||
: {
|
||||
enter(el: HTMLElement) {
|
||||
requestAnimationFrame(() => {
|
||||
el.dataset.height = el.offsetHeight.toString()
|
||||
el.style.maxHeight = '0'
|
||||
void el.offsetHeight
|
||||
el.style.maxHeight = `${el.dataset.height}px`
|
||||
el.style.overflow = 'hidden'
|
||||
})
|
||||
},
|
||||
afterEnter(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
enterCancelled(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
beforeLeave(el: HTMLElement) {
|
||||
el.style.maxHeight = `${el.offsetHeight}px`
|
||||
el.style.overflow = 'hidden'
|
||||
},
|
||||
leave(el: HTMLElement) {
|
||||
el.style.maxHeight = '0'
|
||||
},
|
||||
afterLeave(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
leaveCancelled(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
}
|
||||
if (rootMenu.isMenuPopup) {
|
||||
return {
|
||||
enter(el: HTMLElement) {
|
||||
if (el.offsetHeight > window.innerHeight) {
|
||||
el.style.height = `${window.innerHeight}px`
|
||||
}
|
||||
},
|
||||
afterEnter: () => {},
|
||||
beforeLeave: (el: HTMLElement) => {
|
||||
el.style.maxHeight = `${el.offsetHeight}px`
|
||||
el.style.overflow = 'hidden'
|
||||
},
|
||||
leave: (el: HTMLElement) => {
|
||||
el.style.maxHeight = '0'
|
||||
},
|
||||
afterLeave(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
}
|
||||
}
|
||||
if (CSS.supports('height', 'calc-size(auto, size)')) {
|
||||
return {}
|
||||
}
|
||||
return {
|
||||
enter(el: HTMLElement) {
|
||||
requestAnimationFrame(() => {
|
||||
el.dataset.height = el.offsetHeight.toString()
|
||||
el.style.maxHeight = '0'
|
||||
void el.offsetHeight
|
||||
el.style.maxHeight = `${el.dataset.height}px`
|
||||
el.style.overflow = 'hidden'
|
||||
})
|
||||
},
|
||||
afterEnter(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
enterCancelled(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
beforeLeave(el: HTMLElement) {
|
||||
el.style.maxHeight = `${el.offsetHeight}px`
|
||||
el.style.overflow = 'hidden'
|
||||
},
|
||||
leave(el: HTMLElement) {
|
||||
el.style.maxHeight = '0'
|
||||
},
|
||||
afterLeave(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
leaveCancelled(el: HTMLElement) {
|
||||
el.style.maxHeight = ''
|
||||
el.style.overflow = ''
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
const transitionClass = computed(() => {
|
||||
return rootMenu.isMenuPopup
|
||||
? {
|
||||
enterActiveClass: 'ease-in-out duration-300',
|
||||
enterFromClass: 'opacity-0 translate-x-4',
|
||||
enterToClass: 'opacity-100',
|
||||
leaveActiveClass: 'ease-in-out duration-300',
|
||||
leaveFromClass: 'opacity-100',
|
||||
leaveToClass: 'opacity-0',
|
||||
}
|
||||
: {
|
||||
enterActiveClass: 'ease-in-out duration-300',
|
||||
enterFromClass: 'opacity-0 translate-y-4 scale-95 blur-4',
|
||||
enterToClass: 'opacity-100 translate-y-0 scale-100 blur-0',
|
||||
leaveActiveClass: 'ease-in-out duration-300',
|
||||
leaveFromClass: 'opacity-100 translate-y-0 scale-100 blur-0',
|
||||
leaveToClass: 'opacity-0 translate-y-4 scale-95 blur-4',
|
||||
}
|
||||
})
|
||||
|
||||
const hasChildren = computed(() => {
|
||||
let flag = true
|
||||
if (props.menu.children) {
|
||||
if (props.menu.children.every((item: any) => item.meta?.menu === false)) {
|
||||
flag = false
|
||||
if (rootMenu.isMenuPopup) {
|
||||
return {
|
||||
enterActiveClass: 'ease-in-out duration-300',
|
||||
enterFromClass: 'opacity-0 translate-x-4',
|
||||
enterToClass: 'opacity-100',
|
||||
leaveActiveClass: 'ease-in-out duration-300',
|
||||
leaveFromClass: 'opacity-100',
|
||||
leaveToClass: 'opacity-0',
|
||||
}
|
||||
}
|
||||
else {
|
||||
flag = false
|
||||
return {
|
||||
enterActiveClass: 'ease-in-out duration-300',
|
||||
enterFromClass: cn('opacity-0 translate-y-4 scale-95 blur-4', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
|
||||
enterToClass: 'opacity-100 translate-y-0 scale-100 blur-0',
|
||||
leaveActiveClass: 'ease-in-out duration-300',
|
||||
leaveFromClass: 'opacity-100 translate-y-0 scale-100 blur-0',
|
||||
leaveToClass: cn('opacity-0 translate-y-4 scale-95 blur-4', CSS.supports('height', 'calc-size(auto, size)') && 'h-0'),
|
||||
}
|
||||
return flag
|
||||
})
|
||||
|
||||
const hasChildren = computed(() => props.menu.children?.some((item: any) => item.meta?.menu !== false) ?? false)
|
||||
|
||||
function handleClick() {
|
||||
if (rootMenu.isMenuPopup && hasChildren.value) {
|
||||
if (
|
||||
(rootMenu.isMenuPopup && hasChildren.value)
|
||||
|| props.menu.meta?.link
|
||||
) {
|
||||
return
|
||||
}
|
||||
if (hasChildren.value) {
|
||||
rootMenu.handleSubMenuClick(index, props.uniqueKey)
|
||||
}
|
||||
else {
|
||||
rootMenu.handleMenuItemClick(index)
|
||||
}
|
||||
requestAnimationFrame(() => {
|
||||
if (hasChildren.value) {
|
||||
rootMenu.handleSubMenuClick(index, props.uniqueKey)
|
||||
}
|
||||
else {
|
||||
rootMenu.handleMenuItemClick(index)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
let timeout: (() => void) | undefined
|
||||
@@ -138,32 +137,44 @@ function handleMouseenter() {
|
||||
if (hasChildren.value) {
|
||||
rootMenu.openMenu(index, props.uniqueKey)
|
||||
nextTick(() => {
|
||||
const el = itemRef.value?.ref
|
||||
const subMenuEl = subMenuRef.value?.$el
|
||||
if (!el || !subMenuEl) {
|
||||
return
|
||||
}
|
||||
let top = 0
|
||||
let left = 0
|
||||
if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
|
||||
top = el.getBoundingClientRect().top + el.scrollTop
|
||||
left = el.getBoundingClientRect().left + el.getBoundingClientRect().width
|
||||
if (top + subMenuEl.offsetHeight > window.innerHeight) {
|
||||
top = window.innerHeight - subMenuEl.offsetHeight
|
||||
requestAnimationFrame(() => {
|
||||
const el = itemRef.value?.ref
|
||||
const subMenuEl = subMenuRef.value?.$el
|
||||
if (!el || !subMenuEl) {
|
||||
return
|
||||
}
|
||||
}
|
||||
else {
|
||||
top = el.getBoundingClientRect().top + el.getBoundingClientRect().height
|
||||
left = el.getBoundingClientRect().left
|
||||
if (top + subMenuEl.offsetHeight > window.innerHeight) {
|
||||
subMenuEl.style.height = `${window.innerHeight - top}px`
|
||||
const rect = el.getBoundingClientRect()
|
||||
const { top, left, width, height } = rect
|
||||
let menuTop = 0
|
||||
let menuLeft = 0
|
||||
if (rootMenu.props.mode === 'vertical' || props.level !== 0) {
|
||||
menuTop = top + el.scrollTop
|
||||
menuLeft = left + width
|
||||
// 处理边界情况
|
||||
if (menuTop + subMenuEl.offsetHeight > window.innerHeight) {
|
||||
menuTop = Math.max(0, window.innerHeight - subMenuEl.offsetHeight)
|
||||
}
|
||||
}
|
||||
}
|
||||
if (left + subMenuEl.offsetWidth > document.documentElement.clientWidth) {
|
||||
left = el.getBoundingClientRect().left - el.getBoundingClientRect().width
|
||||
}
|
||||
subMenuEl.style.top = `${top}px`
|
||||
subMenuEl.style.insetInlineStart = `${left}px`
|
||||
else {
|
||||
menuTop = top + height
|
||||
menuLeft = left
|
||||
// 处理边界情况
|
||||
if (menuTop + subMenuEl.offsetHeight > window.innerHeight) {
|
||||
subMenuEl.style.height = `${window.innerHeight - menuTop}px`
|
||||
}
|
||||
}
|
||||
// 处理边界情况
|
||||
if (menuLeft + subMenuEl.offsetWidth > document.documentElement.clientWidth) {
|
||||
menuLeft = left - width
|
||||
}
|
||||
// 设置样式
|
||||
Object.assign(subMenuEl.style, {
|
||||
top: `${menuTop}px`,
|
||||
insetInlineStart: `${menuLeft}px`,
|
||||
willChange: 'transform',
|
||||
transform: 'translateZ(0)',
|
||||
})
|
||||
})
|
||||
})
|
||||
}
|
||||
else {
|
||||
@@ -180,14 +191,16 @@ function handleMouseleave() {
|
||||
rootMenu.mouseInMenu = []
|
||||
timeout?.()
|
||||
;({ stop: timeout } = useTimeoutFn(() => {
|
||||
if (rootMenu.mouseInMenu.length === 0) {
|
||||
rootMenu.closeMenu(props.uniqueKey)
|
||||
}
|
||||
else {
|
||||
if (hasChildren.value) {
|
||||
!rootMenu.mouseInMenu.includes(props.uniqueKey.at(-1)!) && rootMenu.closeMenu(props.uniqueKey.at(-1)!)
|
||||
requestAnimationFrame(() => {
|
||||
if (rootMenu.mouseInMenu.length === 0) {
|
||||
rootMenu.closeMenu(props.uniqueKey)
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (hasChildren.value) {
|
||||
!rootMenu.mouseInMenu.includes(props.uniqueKey.at(-1)!) && rootMenu.closeMenu(props.uniqueKey.at(-1)!)
|
||||
}
|
||||
}
|
||||
})
|
||||
}, 300))
|
||||
}
|
||||
</script>
|
||||
@@ -197,15 +210,15 @@ function handleMouseleave() {
|
||||
<Teleport v-if="hasChildren" to="body" :disabled="!rootMenu.isMenuPopup">
|
||||
<Transition v-bind="transitionClass" v-on="transitionEvent">
|
||||
<FaScrollArea
|
||||
v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" class="sub-menu static rounded-lg" :class="{
|
||||
v-if="opened" ref="subMenuRef" :scrollbar="false" :mask="rootMenu.isMenuPopup" :class="cn('sub-menu static h-[calc-size(auto,size)] rounded-lg will-change-transform', {
|
||||
'bg-[var(--g-sub-sidebar-bg)]': rootMenu.isMenuPopup,
|
||||
'border shadow-xl fixed! z-3000 w-[200px]': rootMenu.isMenuPopup,
|
||||
'border shadow-xl fixed z-3000 w-[200px]': rootMenu.isMenuPopup,
|
||||
'mx-1': rootMenu.isMenuPopup && (rootMenu.props.mode === 'vertical' || level !== 0),
|
||||
'py-1': rootMenu.isMenuPopup,
|
||||
}"
|
||||
})"
|
||||
>
|
||||
<template v-for="item in menu.children" :key="item.path ?? JSON.stringify(item)">
|
||||
<SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? JSON.stringify(item)]" :menu="item" :level="level + 1" />
|
||||
<template v-for="item in menu.children" :key="item.path ?? rootMenu.getUseId(item)">
|
||||
<SubMenu v-if="item.meta?.menu !== false" :unique-key="[...uniqueKey, item.path ?? rootMenu.getUseId(item)]" :menu="item" :level="level + 1" />
|
||||
</template>
|
||||
</FaScrollArea>
|
||||
</Transition>
|
||||
|
||||
@@ -18,6 +18,7 @@ export interface MenuProps {
|
||||
|
||||
export interface MenuInjection {
|
||||
props: MenuProps
|
||||
getUseId: (obj: object) => string
|
||||
items: Record<string, MenuItem>
|
||||
subMenus: Record<string, MenuItem>
|
||||
activeIndex: MenuProps['value']
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useSlots } from '@/slots'
|
||||
import useMenuStore from '@/store/modules/menu'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import Logo from '../Logo/index.vue'
|
||||
import Menu from '../Menu/index.vue'
|
||||
|
||||
@@ -43,38 +41,44 @@ watch(() => menuStore.actived, (val, oldVal) => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="enableSidebar" class="sub-sidebar-container" :class="{
|
||||
'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
|
||||
}"
|
||||
>
|
||||
<component :is="useSlots('sub-sidebar-top')" />
|
||||
<Logo
|
||||
v-if="['side', 'single'].includes(settingsStore.settings.menu.mode)" :show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
|
||||
'sidebar-logo-bg': settingsStore.settings.menu.mode === 'single',
|
||||
<Transition name="sub-sidebar">
|
||||
<div
|
||||
v-if="enableSidebar" class="sub-sidebar-container" :class="{
|
||||
'is-collapse': settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse,
|
||||
}"
|
||||
/>
|
||||
<component :is="useSlots('sub-sidebar-after-logo')" />
|
||||
<FaScrollArea :scrollbar="false" mask gradient-color="var(--g-sub-sidebar-bg)" class="flex-1">
|
||||
<TransitionGroup :name="transitionName">
|
||||
<template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
|
||||
<div v-show="mainIndex === menuStore.actived">
|
||||
<Menu
|
||||
:menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" :class="{
|
||||
'-mt-2': !['head', 'single'].includes(settingsStore.settings.menu.mode),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</TransitionGroup>
|
||||
</FaScrollArea>
|
||||
<div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
|
||||
<FaButton v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" variant="secondary" size="icon" class="h-8 w-8 transition" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
|
||||
<FaIcon name="toolbar-collapse" :size="16" />
|
||||
</FaButton>
|
||||
>
|
||||
<component :is="useSlots('sub-sidebar-top')" />
|
||||
<Logo
|
||||
v-if="['side', 'single'].includes(settingsStore.settings.menu.mode)" :show-logo="settingsStore.settings.menu.mode === 'single'" class="sidebar-logo" :class="{
|
||||
single: settingsStore.settings.menu.mode === 'single',
|
||||
}"
|
||||
/>
|
||||
<component :is="useSlots('sub-sidebar-after-logo')" />
|
||||
<FaScrollArea :scrollbar="false" mask gradient-color="var(--g-sub-sidebar-bg)" class="flex-1">
|
||||
<TransitionGroup :name="transitionName">
|
||||
<template v-for="(mainItem, mainIndex) in menuStore.allMenus" :key="mainIndex">
|
||||
<div v-show="mainIndex === menuStore.actived">
|
||||
<Menu
|
||||
:menu="mainItem.children" :value="route.meta.activeMenu || route.path" :default-openeds="menuStore.defaultOpenedPaths" :accordion="settingsStore.settings.menu.subMenuUniqueOpened" :collapse="settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse" class="menu" :class="{
|
||||
'-mt-2': !((settingsStore.mode === 'pc' && settingsStore.settings.menu.subMenuCollapse) || ['head', 'single'].includes(settingsStore.settings.menu.mode)),
|
||||
}"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</TransitionGroup>
|
||||
</FaScrollArea>
|
||||
<div v-if="settingsStore.mode === 'pc'" class="relative flex items-center px-4 py-3" :class="[settingsStore.settings.menu.subMenuCollapse ? 'justify-center' : 'justify-end']">
|
||||
<FaButton v-show="settingsStore.settings.menu.enableSubMenuCollapseButton" variant="secondary" size="icon" class="h-8 w-8 transition" :class="{ '-rotate-z-180': settingsStore.settings.menu.subMenuCollapse }" @click="settingsStore.toggleSidebarCollapse()">
|
||||
<FaIcon name="toolbar-collapse" class="size-4" />
|
||||
</FaButton>
|
||||
</div>
|
||||
<component :is="useSlots('sub-sidebar-after-menu')" />
|
||||
<div v-if="settingsStore.settings.menu.mode === 'single'" class="flex-center px-4 pb-3">
|
||||
<AccountButton :only-avatar="settingsStore.settings.menu.subMenuCollapse" dropdown-align="center" :dropdown-side="settingsStore.settings.menu.subMenuCollapse ? 'right' : 'top'" button-variant="secondary" :class="{ 'w-full': !settingsStore.settings.menu.subMenuCollapse }" />
|
||||
</div>
|
||||
<component :is="useSlots('sub-sidebar-bottom')" />
|
||||
</div>
|
||||
<component :is="useSlots('sub-sidebar-bottom')" />
|
||||
</div>
|
||||
</Transition>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
@@ -94,7 +98,7 @@ watch(() => menuStore.actived, (val, oldVal) => {
|
||||
width: var(--g-sub-sidebar-collapse-width);
|
||||
|
||||
.sidebar-logo {
|
||||
&:not(.sidebar-logo-bg) {
|
||||
&:not(.single) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -104,19 +108,6 @@ watch(() => menuStore.actived, (val, oldVal) => {
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
background-color: var(--g-sub-sidebar-bg);
|
||||
transition: background-color 0.3s;
|
||||
|
||||
&.sidebar-logo-bg {
|
||||
background-color: var(--g-sub-sidebar-logo-bg);
|
||||
|
||||
:deep(span) {
|
||||
color: var(--g-sub-sidebar-logo-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 100%;
|
||||
}
|
||||
@@ -160,4 +151,15 @@ watch(() => menuStore.actived, (val, oldVal) => {
|
||||
.sub-sidebar-y-end-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* 次侧边栏动画 */
|
||||
.sub-sidebar-enter-active,
|
||||
.sub-sidebar-leave-active {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.sub-sidebar-enter-from,
|
||||
.sub-sidebar-leave-to {
|
||||
transform: translateX(calc(var(--g-sub-sidebar-width) * -1));
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import type { Tabbar } from '#/global'
|
||||
import { useSlots } from '@/slots'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import useTabbarStore from '@/store/modules/tabbar'
|
||||
import { useMagicKeys } from '@vueuse/core'
|
||||
import hotkeys from 'hotkeys-js'
|
||||
import { toast } from 'vue-sonner'
|
||||
import { useSlots } from '@/slots'
|
||||
|
||||
defineOptions({
|
||||
name: 'Tabbar',
|
||||
@@ -30,10 +28,20 @@ const tabRef = useTemplateRef<HTMLElement[]>('tabRef')
|
||||
|
||||
watch(() => route, (val) => {
|
||||
if (settingsStore.settings.tabbar.enable) {
|
||||
tabbarStore.add(val).then(() => {
|
||||
tabbarStore.add(val)
|
||||
nextTick(() => {
|
||||
const index = tabbarStore.list.findIndex(item => item.tabId === activedTabId.value)
|
||||
if (index !== -1) {
|
||||
tabRef.value && tabsRef.value?.scrollTo(tabRef.value[index].offsetLeft - tabsRef.value.ref?.$el.clientWidth * 0.4)
|
||||
const tabEl = tabRef.value?.find(item => Number.parseInt(item.dataset.index!) === index)
|
||||
const containerEl = tabsRef.value?.ref?.$el
|
||||
if (tabEl && containerEl) {
|
||||
const tabLeft = tabEl.offsetLeft
|
||||
const tabWidth = tabEl.offsetWidth
|
||||
const containerWidth = containerEl.clientWidth
|
||||
// 计算滚动位置，使标签页居中
|
||||
const scrollLeft = tabLeft - (containerWidth - tabWidth) / 2
|
||||
tabsRef.value?.scrollTo(scrollLeft)
|
||||
}
|
||||
tabbarScrollTip()
|
||||
}
|
||||
})
|
||||
@@ -75,16 +83,19 @@ function contextMenuItems(routeItem: Tabbar.recordRaw) {
|
||||
[
|
||||
{
|
||||
label: '关闭其他标签页',
|
||||
icon: 'i-mdi:close',
|
||||
disabled: !tabbar.checkCloseOtherSide(routeItem.tabId),
|
||||
handle: () => tabbar.closeOtherSide(routeItem.tabId),
|
||||
},
|
||||
{
|
||||
label: '关闭左侧标签页',
|
||||
icon: 'i-mdi:arrow-expand-left',
|
||||
disabled: !tabbar.checkCloseLeftSide(routeItem.tabId),
|
||||
handle: () => tabbar.closeLeftSide(routeItem.tabId),
|
||||
},
|
||||
{
|
||||
label: '关闭右侧标签页',
|
||||
icon: 'i-mdi:arrow-expand-right',
|
||||
disabled: !tabbar.checkCloseRightSide(routeItem.tabId),
|
||||
handle: () => tabbar.closeRightSide(routeItem.tabId),
|
||||
},
|
||||
@@ -147,7 +158,7 @@ onUnmounted(() => {
|
||||
<div class="tabbar">
|
||||
<component :is="useSlots('tabbar-start')" />
|
||||
<div class="tabbar-container">
|
||||
<FaScrollArea ref="tabsRef" horizontal :scrollbar="false" mask gradient-color="var(--g-tabbar-bg)" class="tabs">
|
||||
<FaScrollArea ref="tabsRef" :scrollbar="false" mask horizontal gradient-color="var(--g-tabbar-bg)" class="tabs">
|
||||
<TransitionGroup ref="tabContainerRef" name="tabbar" tag="div" class="tab-container">
|
||||
<div
|
||||
v-for="(element, index) in tabbarStore.list" :key="element.tabId"
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { compile } from 'path-to-regexp'
|
||||
import Breadcrumb from '../../../Breadcrumb/index.vue'
|
||||
import BreadcrumbItem from '../../../Breadcrumb/item.vue'
|
||||
@@ -8,25 +7,29 @@ const route = useRoute()
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
// 面包屑备份
|
||||
let breadcrumbListBackup: any = []
|
||||
const breadcrumbList = computed(() => {
|
||||
const breadcrumbList = []
|
||||
if (route.name === 'reload') {
|
||||
return breadcrumbListBackup
|
||||
}
|
||||
const list = []
|
||||
if (settingsStore.settings.home.enable) {
|
||||
breadcrumbList.push({
|
||||
list.push({
|
||||
path: settingsStore.settings.home.fullPath,
|
||||
title: settingsStore.settings.home.title,
|
||||
})
|
||||
}
|
||||
if (route.meta.breadcrumbNeste) {
|
||||
route.meta.breadcrumbNeste.forEach((item) => {
|
||||
if (item.hide === false) {
|
||||
breadcrumbList.push({
|
||||
path: item.path,
|
||||
title: item.title,
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
return breadcrumbList
|
||||
route.matched.forEach((item) => {
|
||||
if (item.meta?.breadcrumb !== false) {
|
||||
list.push({
|
||||
path: item.path,
|
||||
title: item.meta?.title,
|
||||
})
|
||||
}
|
||||
})
|
||||
breadcrumbListBackup = list
|
||||
return list
|
||||
})
|
||||
|
||||
function pathCompile(path: string) {
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
|
||||
defineOptions({
|
||||
name: 'ColorScheme',
|
||||
})
|
||||
@@ -8,28 +6,33 @@ defineOptions({
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
function toggleColorScheme(event: MouseEvent) {
|
||||
const { startViewTransition } = useViewTransition(() => {
|
||||
if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
|
||||
settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
|
||||
return
|
||||
}
|
||||
const x = event.clientX
|
||||
const y = event.clientY
|
||||
const endRadius = Math.hypot(
|
||||
Math.max(x, innerWidth - x),
|
||||
Math.max(y, innerHeight - y),
|
||||
)
|
||||
const transition = document.startViewTransition(async () => {
|
||||
settingsStore.currentColorScheme && settingsStore.setColorScheme(settingsStore.currentColorScheme === 'dark' ? 'light' : 'dark')
|
||||
await nextTick()
|
||||
})
|
||||
startViewTransition()?.ready.then(() => {
|
||||
const x = event.clientX
|
||||
const y = event.clientY
|
||||
const endRadius = Math.hypot(
|
||||
Math.max(x, innerWidth - x),
|
||||
Math.max(y, innerHeight - y),
|
||||
)
|
||||
transition.ready.then(() => {
|
||||
const clipPath = [
|
||||
`circle(0px at ${x}px ${y}px)`,
|
||||
`circle(${endRadius}px at ${x}px ${y}px)`,
|
||||
]
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: settingsStore.settings.app.colorScheme !== 'dark' ? clipPath : clipPath.reverse(),
|
||||
clipPath: settingsStore.currentColorScheme === 'light' ? clipPath : clipPath.reverse(),
|
||||
},
|
||||
{
|
||||
duration: 300,
|
||||
easing: 'ease-out',
|
||||
pseudoElement: settingsStore.settings.app.colorScheme !== 'dark' ? '::view-transition-new(root)' : '::view-transition-old(root)',
|
||||
duration: 500,
|
||||
easing: 'ease-in-out',
|
||||
pseudoElement: settingsStore.currentColorScheme === 'light' ? '::view-transition-new(root)' : '::view-transition-old(root)',
|
||||
},
|
||||
)
|
||||
})
|
||||
@@ -37,12 +40,12 @@ function toggleColorScheme(event: MouseEvent) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FaButton variant="ghost" size="icon" @click="toggleColorScheme">
|
||||
<FaButton variant="ghost" size="icon" class="size-9" @click="toggleColorScheme">
|
||||
<FaIcon
|
||||
:name="{
|
||||
light: 'i-ri:sun-line',
|
||||
dark: 'i-ri:moon-line',
|
||||
}[settingsStore.currentColorScheme!]" :size="16"
|
||||
}[settingsStore.currentColorScheme!]" class="size-4"
|
||||
/>
|
||||
</FaButton>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { useFullscreen } from '@vueuse/core'
|
||||
|
||||
defineOptions({
|
||||
@@ -12,7 +11,7 @@ const { isFullscreen, toggle } = useFullscreen()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" @click="toggle">
|
||||
<FaIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" :size="16" />
|
||||
<FaButton v-if="settingsStore.mode === 'pc'" variant="ghost" size="icon" class="size-9" @click="toggle">
|
||||
<FaIcon :name="isFullscreen ? 'i-ri:fullscreen-exit-line' : 'i-ri:fullscreen-line'" class="size-4" />
|
||||
</FaButton>
|
||||
</template>
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import Search from './search.vue'
|
||||
|
||||
defineOptions({
|
||||
@@ -12,11 +11,11 @@ const isShow = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 pe-1.5 ps-2': settingsStore.mode === 'pc' }" @click="isShow = true">
|
||||
<FaIcon name="i-ri:search-line" :size="16" />
|
||||
<FaButton :variant="settingsStore.mode === 'pc' ? 'outline' : 'ghost'" :size="settingsStore.mode === 'pc' ? undefined : 'icon'" :class="{ 'mx-2 px-3 h-9': settingsStore.mode === 'pc', 'size-9': settingsStore.mode !== 'pc' }" @click="isShow = true">
|
||||
<FaIcon name="i-ri:search-line" class="size-4" />
|
||||
<template v-if="settingsStore.mode === 'pc'">
|
||||
<span class="text-sm text-muted-foreground/60 transition group-hover-text-muted-foreground">搜索</span>
|
||||
<FaKbd v-if="settingsStore.settings.navSearch.enableHotkeys">
|
||||
<FaKbd v-if="settingsStore.settings.navSearch.enableHotkeys" class="-me-1">
|
||||
{{ settingsStore.os === 'mac' ? '⌘' : 'Ctrl' }} K
|
||||
</FaKbd>
|
||||
</template>
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import type { Menu } from '@/types/global'
|
||||
import { useFocus } from '@vueuse/core'
|
||||
import hotkeys from 'hotkeys-js'
|
||||
import Breadcrumb from '@/layouts/components/Breadcrumb/index.vue'
|
||||
import BreadcrumbItem from '@/layouts/components/Breadcrumb/item.vue'
|
||||
import useMenuStore from '@/store/modules/menu'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { resolveRoutePath } from '@/utils'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import hotkeys from 'hotkeys-js'
|
||||
|
||||
defineOptions({
|
||||
name: 'Search',
|
||||
name: 'NavSearchModal',
|
||||
})
|
||||
|
||||
const isShow = defineModel<boolean>({
|
||||
@@ -18,6 +16,7 @@ const isShow = defineModel<boolean>({
|
||||
|
||||
const router = useRouter()
|
||||
const settingsStore = useSettingsStore()
|
||||
const routeStore = useRouteStore()
|
||||
const menuStore = useMenuStore()
|
||||
|
||||
interface listTypes {
|
||||
@@ -25,12 +24,11 @@ interface listTypes {
|
||||
icon?: string
|
||||
title?: string | (() => string)
|
||||
link?: string
|
||||
breadcrumb: {
|
||||
title?: string | (() => string)
|
||||
}[]
|
||||
}
|
||||
|
||||
const searchInput = ref('')
|
||||
const searchInputRef = useTemplateRef('searchInputRef')
|
||||
const { focused: searchInputFocused } = useFocus(searchInputRef)
|
||||
const sourceList = ref<listTypes[]>([])
|
||||
const actived = ref(-1)
|
||||
|
||||
@@ -57,18 +55,8 @@ const resultList = computed(() => {
|
||||
if (item.path.includes(searchInput.value)) {
|
||||
flag = true
|
||||
}
|
||||
if (item.breadcrumb.some((b) => {
|
||||
if (typeof b.title === 'function') {
|
||||
if (b.title().includes(searchInput.value)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (b.title?.includes(searchInput.value)) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
if (routeStore.getRouteMatchedByPath(item.path).some((b) => {
|
||||
return typeof b.meta?.title === 'function' ? b.meta?.title().includes(searchInput.value) : b.meta?.title?.includes(searchInput.value)
|
||||
})) {
|
||||
flag = true
|
||||
}
|
||||
@@ -122,7 +110,7 @@ onUnmounted(() => {
|
||||
function initSourceList() {
|
||||
sourceList.value = []
|
||||
menuStore.allMenus.forEach((item) => {
|
||||
getSourceListByMenus(item.children)
|
||||
getSourceList(item.children)
|
||||
})
|
||||
}
|
||||
|
||||
@@ -133,26 +121,18 @@ function hasChildren(item: Menu.recordRaw) {
|
||||
}
|
||||
return flag
|
||||
}
|
||||
function getSourceListByMenus(arr: Menu.recordRaw[], basePath?: string, icon?: string, breadcrumb?: { title?: string | (() => string) }[]) {
|
||||
function getSourceList(arr: Menu.recordRaw[], basePath?: string, icon?: string) {
|
||||
arr.forEach((item) => {
|
||||
if (item.meta?.menu !== false) {
|
||||
const breadcrumbTemp = cloneDeep(breadcrumb) || []
|
||||
if (item.children && hasChildren(item)) {
|
||||
breadcrumbTemp.push({
|
||||
title: item.meta?.title,
|
||||
})
|
||||
getSourceListByMenus(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon, breadcrumbTemp)
|
||||
getSourceList(item.children, resolveRoutePath(basePath, item.path), item.meta?.icon ?? icon)
|
||||
}
|
||||
else {
|
||||
breadcrumbTemp.push({
|
||||
title: item.meta?.title,
|
||||
})
|
||||
sourceList.value.push({
|
||||
path: resolveRoutePath(basePath, item.path),
|
||||
icon: item.meta?.icon ?? icon,
|
||||
title: item.meta?.title,
|
||||
link: item.meta?.link,
|
||||
breadcrumb: breadcrumbTemp,
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -217,15 +197,15 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FaModal ref="searchResultRef" v-model="isShow" border :footer="settingsStore.mode === 'pc'" :closable="false" class="w-full lg-max-w-2xl" content-class="flex flex-col p-0 min-h-auto" header-class="p-0" footer-class="p-0">
|
||||
<FaModal ref="searchResultRef" v-model="isShow" border :footer="settingsStore.mode === 'pc'" :closable="false" class="w-full lg-max-w-2xl" content-class="flex flex-col p-0 min-h-auto" header-class="p-0" footer-class="p-0" @opened="searchInputFocused = true">
|
||||
<template #header>
|
||||
<div class="h-12 flex flex-shrink-0 items-center">
|
||||
<div class="h-full w-14 flex-center">
|
||||
<FaIcon name="i-ri:search-line" :size="18" class="text-foreground/30" />
|
||||
<FaIcon name="i-ri:search-line" class="size-4 text-foreground/30" />
|
||||
</div>
|
||||
<input v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="h-full w-full border-0 rounded-md bg-transparent text-base text-foreground focus-outline-none placeholder-foreground/30" @keydown.esc="isShow = false" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
|
||||
<input ref="searchInputRef" v-model="searchInput" placeholder="搜索页面，支持标题、URL模糊查询" class="h-full w-full border-0 rounded-md bg-transparent text-base text-foreground focus-outline-none placeholder-foreground/30" @keydown.esc.prevent="isShow = false" @keydown.up.prevent="keyUp" @keydown.down.prevent="keyDown" @keydown.enter.prevent="keyEnter">
|
||||
<div v-if="settingsStore.mode === 'mobile'" class="h-full w-14 flex-center border-s">
|
||||
<FaIcon name="i-carbon:close" :size="18" @click="isShow = false" />
|
||||
<FaIcon name="i-carbon:close" class="size-4" @click="isShow = false" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -234,16 +214,16 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
|
||||
<div class="flex gap-8">
|
||||
<div class="inline-flex items-center gap-1 text-xs">
|
||||
<FaKbd>
|
||||
<FaIcon name="i-ion:md-return-left" :size="14" />
|
||||
<FaIcon name="i-ion:md-return-left" class="size-4" />
|
||||
</FaKbd>
|
||||
<span>访问</span>
|
||||
</div>
|
||||
<div class="inline-flex items-center gap-1 text-xs">
|
||||
<FaKbd>
|
||||
<FaIcon name="i-ant-design:caret-up-filled" :size="14" />
|
||||
<FaIcon name="i-ant-design:caret-up-filled" class="size-4" />
|
||||
</FaKbd>
|
||||
<FaKbd>
|
||||
<FaIcon name="i-ant-design:caret-down-filled" :size="14" />
|
||||
<FaIcon name="i-ant-design:caret-down-filled" class="size-4" />
|
||||
</FaKbd>
|
||||
<span>切换</span>
|
||||
</div>
|
||||
@@ -260,12 +240,12 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
|
||||
<template v-if="resultList.length > 0">
|
||||
<div v-for="(item, index) in resultList" ref="searchResultItemRef" :key="item.path" class="p-4" :data-index="index" @click="pageJump(item.path, item.link)" @mouseover="actived = index">
|
||||
<a class="flex cursor-pointer items-center border rounded-lg" :class="{ '-mt-4': index !== 0, 'bg-accent': index === actived }">
|
||||
<FaIcon v-if="item.icon" :name="item.icon" :size="20" class="basis-16 transition" :class="{ 'scale-120 text-primary': index === actived }" />
|
||||
<FaIcon v-if="item.icon" :name="item.icon" class="size-5 basis-16 transition" :class="{ 'scale-120 text-primary': index === actived }" />
|
||||
<div class="flex flex-1 flex-col gap-1 truncate border-s px-4 py-3">
|
||||
<div class="truncate text-start text-base font-bold">{{ (typeof item.title === 'function' ? item.title() : item.title) ?? '[ 无标题 ]' }}</div>
|
||||
<Breadcrumb v-if="item.breadcrumb.length" class="truncate">
|
||||
<BreadcrumbItem v-for="(bc, bcIndex) in item.breadcrumb" :key="bcIndex" class="text-xs">
|
||||
{{ (typeof bc.title === 'function' ? bc.title() : bc.title) ?? '[ 无标题 ]' }}
|
||||
<Breadcrumb v-if="routeStore.getRouteMatchedByPath(item.path).length" class="truncate">
|
||||
<BreadcrumbItem v-for="(bc, bcIndex) in routeStore.getRouteMatchedByPath(item.path)" :key="bcIndex" class="text-xs">
|
||||
{{ (typeof bc.meta?.title === 'function' ? bc.meta?.title() : bc.meta?.title) ?? '[ 无标题 ]' }}
|
||||
</BreadcrumbItem>
|
||||
</Breadcrumb>
|
||||
</div>
|
||||
@@ -274,7 +254,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
|
||||
</template>
|
||||
<template v-else-if="searchInput === ''">
|
||||
<div class="h-full flex-col-center py-6 text-secondary-foreground/50">
|
||||
<FaIcon name="i-tabler:mood-smile" :size="40" />
|
||||
<FaIcon name="i-tabler:mood-smile" class="size-10" />
|
||||
<p class="m-2 text-base">
|
||||
输入你要搜索的导航
|
||||
</p>
|
||||
@@ -282,7 +262,7 @@ function pageJump(path: listTypes['path'], link: listTypes['link']) {
|
||||
</template>
|
||||
<template v-else>
|
||||
<div class="h-full flex-col-center py-6 text-secondary-foreground/50">
|
||||
<FaIcon name="i-tabler:mood-empty" :size="40" />
|
||||
<FaIcon name="i-tabler:mood-empty" class="size-10" />
|
||||
<p class="m-2 text-base">
|
||||
没有找到你想要的
|
||||
</p>
|
||||
|
||||
@@ -1,22 +1,49 @@
|
||||
<script setup lang="ts">
|
||||
import hotkeys from 'hotkeys-js'
|
||||
|
||||
defineOptions({
|
||||
name: 'PageReload',
|
||||
})
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
const mainPage = useMainPage()
|
||||
|
||||
const isAnimating = ref(false)
|
||||
|
||||
onMounted(() => {
|
||||
hotkeys('f5', (e) => {
|
||||
if (settingsStore.settings.toolbar.pageReload) {
|
||||
e.preventDefault()
|
||||
mainPage.reload()
|
||||
}
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
hotkeys.unbind('f5')
|
||||
})
|
||||
|
||||
function handleClick() {
|
||||
isAnimating.value = true
|
||||
mainPage.reload()
|
||||
}
|
||||
|
||||
function handleCtrlClick() {
|
||||
location.reload()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<FaButton variant="ghost" size="icon" @click="handleClick" @animationend="isAnimating = false">
|
||||
<FaIcon name="i-iconoir:refresh-double" :size="16" :class="{ animation: isAnimating }" />
|
||||
</FaButton>
|
||||
<FaTooltip side="bottom" :disabled="settingsStore.os === 'mac'">
|
||||
<template #content>
|
||||
<div class="flex-col-center gap-2">
|
||||
<p>按住 <FaKbd>Ctrl</FaKbd> 键并点击</p>
|
||||
<p>可切换为浏览器原生刷新</p>
|
||||
</div>
|
||||
</template>
|
||||
<FaButton variant="ghost" size="icon" class="size-9" @click.exact="handleClick" @click.ctrl.exact="handleCtrlClick" @animationend="isAnimating = false">
|
||||
<FaIcon name="i-iconoir:refresh-double" class="size-4" :class="{ animation: isAnimating }" />
|
||||
</FaButton>
|
||||
</FaTooltip>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@@ -1,13 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import LeftSide from './leftSide.vue'
|
||||
import RightSide from './rightSide.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'Toolbar',
|
||||
})
|
||||
|
||||
const settingsStore = useSettingsStore()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -15,7 +12,7 @@ const settingsStore = useSettingsStore()
|
||||
<div class="left-side h-full flex items-center of-hidden pe-16 ps-2">
|
||||
<LeftSide />
|
||||
</div>
|
||||
<div v-if="['side', 'single'].includes(settingsStore.settings.menu.mode) || settingsStore.mode === 'mobile'" class="h-full flex flex-shrink-0 items-center justify-end px-2">
|
||||
<div class="h-full flex flex-shrink-0 items-center justify-end px-2">
|
||||
<RightSide />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useSlots } from '@/slots'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import Breadcrumb from './Breadcrumb/index.vue'
|
||||
|
||||
defineOptions({
|
||||
@@ -13,7 +12,7 @@ const settingsStore = useSettingsStore()
|
||||
<template>
|
||||
<div class="flex items-center">
|
||||
<FaButton v-if="settingsStore.mode === 'mobile'" variant="ghost" size="icon" class="h-9 w-9 -rotate-z-180" @click="settingsStore.toggleSidebarCollapse()">
|
||||
<FaIcon name="toolbar-collapse" :size="16" />
|
||||
<FaIcon name="toolbar-collapse" class="size-4" />
|
||||
</FaButton>
|
||||
<component :is="useSlots('toolbar-start')" />
|
||||
<Breadcrumb v-if="settingsStore.settings.toolbar.breadcrumb" />
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import { useSlots } from '@/slots'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import ColorScheme from './ColorScheme/index.vue'
|
||||
import Fullscreen from './Fullscreen/index.vue'
|
||||
import NavSearch from './NavSearch/index.vue'
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { useElementSize } from '@vueuse/core'
|
||||
import Tabbar from './Tabbar/index.vue'
|
||||
import Toolbar from './Toolbar/index.vue'
|
||||
|
||||
@@ -10,20 +10,20 @@ defineOptions({
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const enableToolbar = computed(() => {
|
||||
return !(
|
||||
settingsStore.settings.menu.mode === 'head' && (
|
||||
!settingsStore.settings.toolbar.breadcrumb || settingsStore.settings.app.routeBaseOn === 'filesystem'
|
||||
)
|
||||
)
|
||||
return settingsStore.settings.toolbar.enable && Object.keys(settingsStore.settings.toolbar).some((key) => {
|
||||
if (settingsStore.settings.app.routeBaseOn === 'filesystem' && key === 'breadcrumb') {
|
||||
return false
|
||||
}
|
||||
return settingsStore.settings.toolbar[key as keyof typeof settingsStore.settings.toolbar]
|
||||
})
|
||||
})
|
||||
|
||||
const scrollTop = ref(0)
|
||||
const scrollOnHide = ref(false)
|
||||
const topbarHeight = computed(() => {
|
||||
const tabbarHeight = settingsStore.settings.tabbar.enable ? Number.parseInt(getComputedStyle(document.documentElement || document.body).getPropertyValue('--g-tabbar-height')) : 0
|
||||
const toolbarHeight = enableToolbar.value ? Number.parseInt(getComputedStyle(document.documentElement || document.body).getPropertyValue('--g-toolbar-height')) : 0
|
||||
return tabbarHeight + toolbarHeight
|
||||
})
|
||||
|
||||
const topbarRef = useTemplateRef('topbarRef')
|
||||
const { height: topbarHeight } = useElementSize(topbarRef)
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('scroll', onScroll)
|
||||
})
|
||||
@@ -41,7 +41,7 @@ watch(scrollTop, (val, oldVal) => {
|
||||
<template>
|
||||
<FaSmartFixedBlock position="top" :class="{ 'absolute!': settingsStore.settings.topbar.mode === 'static' }">
|
||||
<div
|
||||
class="topbar-container transition-[transform,box-shadow]-300" :class="{
|
||||
ref="topbarRef" class="topbar-container transition-[transform,box-shadow]-300" :class="{
|
||||
[`topbar-${settingsStore.settings.topbar.mode}`]: true,
|
||||
mask: scrollTop,
|
||||
hide: scrollOnHide,
|
||||
@@ -73,8 +73,8 @@ watch(scrollTop, (val, oldVal) => {
|
||||
background-image: linear-gradient(0deg, transparent, var(--g-main-area-bg));
|
||||
box-shadow: 0 -1px 0 0 hsl(var(--border));
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
transform: translateY(100%);
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
&.topbar-fixed,
|
||||
|
||||
@@ -23,7 +23,7 @@ function open() {
|
||||
<Transition name="slide-right" mode="out-in" appear>
|
||||
<FaPageMain :key="route.meta.link" class="flex flex-1 flex-col justify-center">
|
||||
<div class="flex flex-col items-center">
|
||||
<FaIcon name="i-icon-park-twotone:planet" :size="120" class="text-primary/80" />
|
||||
<FaIcon name="i-icon-park-twotone:planet" class="size-30 text-primary/80" />
|
||||
<div class="my-2 text-xl text-dark dark-text-white">
|
||||
是否访问此链接
|
||||
</div>
|
||||
|
||||
+35
-71
@@ -1,13 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { useSlots } from '@/slots'
|
||||
import useKeepAliveStore from '@/store/modules/keepAlive'
|
||||
import useMenuStore from '@/store/modules/menu'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import eventBus from '@/utils/eventBus'
|
||||
import hotkeys from 'hotkeys-js'
|
||||
import AppSetting from './components/AppSetting/index.vue'
|
||||
import BackTop from './components/BackTop/index.vue'
|
||||
import Copyright from './components/Copyright/index.vue'
|
||||
import Header from './components/Header/index.vue'
|
||||
import HotkeysIntro from './components/HotkeysIntro/index.vue'
|
||||
import MainSidebar from './components/MainSidebar/index.vue'
|
||||
@@ -25,49 +19,36 @@ const settingsStore = useSettingsStore()
|
||||
const keepAliveStore = useKeepAliveStore()
|
||||
const menuStore = useMenuStore()
|
||||
|
||||
const mainPage = useMainPage()
|
||||
const menu = useMenu()
|
||||
|
||||
// 头部当前实际高度
|
||||
const headerActualHeight = computed(() => {
|
||||
let actualHeight = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-header-height'))
|
||||
if (['single', 'side'].includes(settingsStore.settings.menu.mode) || settingsStore.mode === 'mobile') {
|
||||
actualHeight = 0
|
||||
}
|
||||
return actualHeight
|
||||
// 头部是否隐藏
|
||||
const isHeaderHide = computed(() => {
|
||||
return ['single', 'side'].includes(settingsStore.settings.menu.mode) || settingsStore.mode === 'mobile'
|
||||
})
|
||||
|
||||
// 侧边栏主导航当前实际宽度
|
||||
const mainSidebarActualWidth = computed(() => {
|
||||
let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-main-sidebar-width'))
|
||||
if (settingsStore.settings.menu.mode === 'single' || (settingsStore.settings.menu.mode === 'head' && settingsStore.mode !== 'mobile')) {
|
||||
actualWidth = 0
|
||||
}
|
||||
return actualWidth
|
||||
// 侧边栏主导航是否隐藏
|
||||
const isMainSidebarHide = computed(() => {
|
||||
return settingsStore.settings.menu.mode === 'single'
|
||||
|| (settingsStore.settings.menu.mode === 'head' && settingsStore.mode !== 'mobile')
|
||||
})
|
||||
|
||||
// 侧边栏次导航当前实际宽度
|
||||
const subSidebarActualWidth = computed(() => {
|
||||
let actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-width'))
|
||||
if (settingsStore.settings.menu.subMenuCollapse && settingsStore.mode !== 'mobile') {
|
||||
actualWidth = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-sub-sidebar-collapse-width'))
|
||||
}
|
||||
if (menuStore.sidebarMenus.every(item => item.meta?.menu === false)) {
|
||||
actualWidth = 0
|
||||
}
|
||||
return actualWidth
|
||||
// 侧边栏次导航是否隐藏
|
||||
const isSubSidebarHide = computed(() => {
|
||||
return menuStore.sidebarMenus.every(item => item.meta?.menu === false)
|
||||
})
|
||||
|
||||
// 顶栏当前实际高度
|
||||
const topbarActualHeight = computed(() => {
|
||||
let actualHeight = 0
|
||||
if (settingsStore.settings.tabbar.enable) {
|
||||
actualHeight += Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-tabbar-height'))
|
||||
}
|
||||
if (!['head'].includes(settingsStore.settings.menu.mode) || settingsStore.settings.toolbar.breadcrumb) {
|
||||
actualHeight += Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--g-toolbar-height'))
|
||||
}
|
||||
return actualHeight
|
||||
// 标签栏是否隐藏
|
||||
const isTabbarHide = computed(() => {
|
||||
return !settingsStore.settings.tabbar.enable
|
||||
})
|
||||
|
||||
// 工具栏是否隐藏
|
||||
const isToolbarHide = computed(() => {
|
||||
return !settingsStore.settings.toolbar.enable
|
||||
|| !Object.keys(settingsStore.settings.toolbar).some((key) => {
|
||||
if (settingsStore.settings.app.routeBaseOn === 'filesystem' && key === 'breadcrumb') {
|
||||
return false
|
||||
}
|
||||
return settingsStore.settings.toolbar[key as keyof typeof settingsStore.settings.toolbar]
|
||||
})
|
||||
})
|
||||
|
||||
const isLink = computed(() => !!routeInfo.meta.link)
|
||||
@@ -91,35 +72,17 @@ watch(() => routeInfo.path, () => {
|
||||
}
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
hotkeys('f5', (e) => {
|
||||
if (settingsStore.settings.toolbar.pageReload) {
|
||||
e.preventDefault()
|
||||
mainPage.reload()
|
||||
}
|
||||
})
|
||||
hotkeys('alt+`', (e) => {
|
||||
if (settingsStore.settings.menu.enableHotkeys) {
|
||||
e.preventDefault()
|
||||
menu.switchTo(menuStore.actived + 1 < menuStore.allMenus.length ? menuStore.actived + 1 : 0)
|
||||
}
|
||||
})
|
||||
})
|
||||
onUnmounted(() => {
|
||||
hotkeys.unbind('f5')
|
||||
hotkeys.unbind('alt+`')
|
||||
})
|
||||
|
||||
const enableAppSetting = import.meta.env.VITE_APP_SETTING
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="layout" :style="{
|
||||
'--g-header-actual-height': `${headerActualHeight}px`,
|
||||
'--g-main-sidebar-actual-width': `${mainSidebarActualWidth}px`,
|
||||
'--g-sub-sidebar-actual-width': `${subSidebarActualWidth}px`,
|
||||
'--g-topbar-actual-height': `${topbarActualHeight}px`,
|
||||
'--g-header-actual-height': isHeaderHide ? '0px' : 'var(--g-header-height)',
|
||||
'--g-main-sidebar-actual-width': isMainSidebarHide ? '0px' : 'var(--g-main-sidebar-width)',
|
||||
'--g-sub-sidebar-actual-width': isSubSidebarHide ? '0px' : (settingsStore.settings.menu.subMenuCollapse && settingsStore.mode !== 'mobile' ? 'var(--g-sub-sidebar-collapse-width)' : 'var(--g-sub-sidebar-width)'),
|
||||
'--g-tabbar-actual-height': isTabbarHide ? '0px' : 'var(--g-tabbar-height)',
|
||||
'--g-toolbar-actual-height': isToolbarHide ? '0px' : 'var(--g-toolbar-height)',
|
||||
}"
|
||||
>
|
||||
<div id="app-main">
|
||||
@@ -134,7 +97,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
|
||||
<Topbar />
|
||||
<div class="main">
|
||||
<RouterView v-slot="{ Component, route }">
|
||||
<Transition name="slide-right" mode="out-in">
|
||||
<Transition :name="!settingsStore.isReloading ? 'slide-right' : ''" mode="out-in">
|
||||
<KeepAlive :include="keepAliveStore.list">
|
||||
<component :is="Component" v-show="!isLink" :key="route.fullPath" />
|
||||
</KeepAlive>
|
||||
@@ -142,7 +105,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
|
||||
</RouterView>
|
||||
<LinkView v-if="isLink" />
|
||||
</div>
|
||||
<Copyright />
|
||||
<FaCopyright />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -153,7 +116,6 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
|
||||
</div>
|
||||
<AppSetting />
|
||||
</template>
|
||||
<BackTop />
|
||||
<component :is="useSlots('free-position')" />
|
||||
</div>
|
||||
</template>
|
||||
@@ -211,7 +173,9 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
|
||||
transition: width 0.3s, transform 0.3s, box-shadow 0.3s, top 0.3s;
|
||||
|
||||
&:has(> .main-sidebar-container.main-sidebar-enter-active),
|
||||
&:has(> .main-sidebar-container.main-sidebar-leave-active) {
|
||||
&:has(> .main-sidebar-container.main-sidebar-leave-active),
|
||||
&:has(> .sub-sidebar-container.sub-sidebar-enter-active),
|
||||
&:has(> .sub-sidebar-container.sub-sidebar-leave-active) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
@@ -233,7 +197,7 @@ const enableAppSetting = import.meta.env.VITE_APP_SETTING
|
||||
position: relative;
|
||||
flex: auto;
|
||||
height: 100%;
|
||||
margin: var(--g-topbar-actual-height) 0 0;
|
||||
margin: calc(var(--g-tabbar-actual-height) + var(--g-toolbar-actual-height)) 0 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
+2
-4
@@ -1,22 +1,20 @@
|
||||
// 加载 iconify 图标
|
||||
import { downloadAndInstall } from '@/iconify'
|
||||
|
||||
import icons from '@/iconify/index.json'
|
||||
// 自定义指令
|
||||
import directive from '@/utils/directive'
|
||||
|
||||
import App from './App.vue'
|
||||
|
||||
import router from './router'
|
||||
import pinia from './store'
|
||||
import uiProvider from './ui/provider'
|
||||
|
||||
import '@/utils/systemCopyright'
|
||||
|
||||
// 加载 svg 图标
|
||||
import 'virtual:svg-icons-register'
|
||||
import 'virtual:uno.css'
|
||||
// UnoCSS
|
||||
import '@unocss/reset/tailwind-compat.css'
|
||||
import 'virtual:uno.css'
|
||||
// 全局样式
|
||||
import '@/assets/styles/globals.css'
|
||||
|
||||
|
||||
@@ -18,7 +18,6 @@ export default defineFakeRoute([
|
||||
{
|
||||
path: '/multilevel_menu_example',
|
||||
component: 'Layout',
|
||||
redirect: '/multilevel_menu_example/page',
|
||||
name: 'multilevelMenuExample',
|
||||
meta: {
|
||||
title: '多级导航',
|
||||
@@ -36,7 +35,6 @@ export default defineFakeRoute([
|
||||
{
|
||||
path: 'level2',
|
||||
name: 'multilevelMenuExample2',
|
||||
redirect: '/multilevel_menu_example/level2/page',
|
||||
meta: {
|
||||
title: '导航2',
|
||||
},
|
||||
@@ -52,7 +50,6 @@ export default defineFakeRoute([
|
||||
{
|
||||
path: 'level3',
|
||||
name: 'multilevelMenuExample2-2',
|
||||
redirect: '/multilevel_menu_example/level2/level3/page1',
|
||||
meta: {
|
||||
title: '导航2-2',
|
||||
},
|
||||
|
||||
+1
-1
@@ -12,7 +12,7 @@ export default defineFakeRoute([
|
||||
data: {
|
||||
account: body.account,
|
||||
token: `${body.account}:${faker.internet.jwt()}`,
|
||||
avatar: 'https://fantastic-admin.hurui.me/logo.png',
|
||||
avatar: 'https://fantastic-admin.hurui.me/logo.svg',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
import type { RouteLocationRaw, Router } from 'vue-router'
|
||||
import pinia from '@/store'
|
||||
|
||||
function getId(router: Router) {
|
||||
return router.currentRoute.value.fullPath
|
||||
}
|
||||
|
||||
function extendPush(router: Router) {
|
||||
const originalPush = router.push
|
||||
router.push = function (to: RouteLocationRaw) {
|
||||
const settingsStore = useSettingsStore(pinia)
|
||||
if (settingsStore.settings.tabbar.enable) {
|
||||
const tabbarStore = useTabbarStore(pinia)
|
||||
const index = tabbarStore.list.findIndex(item => item.tabId === getId(router))
|
||||
tabbarStore.$patch({
|
||||
leaveIndex: index,
|
||||
})
|
||||
}
|
||||
return originalPush(to)
|
||||
}
|
||||
}
|
||||
|
||||
function extendGo(router: Router) {
|
||||
const originalGo = router.go
|
||||
router.go = function (delta: number) {
|
||||
const settingsStore = useSettingsStore(pinia)
|
||||
if (settingsStore.settings.tabbar.enable) {
|
||||
const tabId = getId(router)
|
||||
const tabbarStore = useTabbarStore(pinia)
|
||||
originalGo(delta)
|
||||
if (delta < 0) {
|
||||
tabbarStore.remove(tabId)
|
||||
}
|
||||
}
|
||||
else {
|
||||
originalGo(delta)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function extendReplace(router: Router) {
|
||||
const originalReplace = router.replace
|
||||
router.replace = function (to: RouteLocationRaw) {
|
||||
const settingsStore = useSettingsStore(pinia)
|
||||
if (settingsStore.settings.tabbar.enable) {
|
||||
const tabId = getId(router)
|
||||
const tabbarStore = useTabbarStore(pinia)
|
||||
return originalReplace(to).then(() => {
|
||||
tabbarStore.remove(tabId)
|
||||
})
|
||||
}
|
||||
else {
|
||||
return originalReplace(to)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
declare module 'vue-router' {
|
||||
interface Router {
|
||||
/**
|
||||
* 本方法为框架扩展语法，等同于 `push` 方法，并且同时会关闭当前标签页
|
||||
*/
|
||||
close: (to: RouteLocationRaw) => Promise<NavigationFailure | void | undefined>
|
||||
}
|
||||
}
|
||||
|
||||
function extendClose(router: Router) {
|
||||
router.close = function (to: RouteLocationRaw) {
|
||||
const currentRoute = router.currentRoute.value
|
||||
const tabId = getId(router)
|
||||
return router.push(to).then(() => {
|
||||
const settingsStore = useSettingsStore(pinia)
|
||||
if (settingsStore.settings.tabbar.enable && currentRoute.meta.tabMerge !== 'activeMenu') {
|
||||
const tabbarStore = useTabbarStore(pinia)
|
||||
tabbarStore.remove(tabId)
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default function setupExtensions(router: Router) {
|
||||
extendPush(router)
|
||||
extendGo(router)
|
||||
extendReplace(router)
|
||||
extendClose(router)
|
||||
}
|
||||
+68
-55
@@ -1,9 +1,4 @@
|
||||
import type { Router, RouteRecordRaw } from 'vue-router'
|
||||
import useKeepAliveStore from '@/store/modules/keepAlive'
|
||||
import useMenuStore from '@/store/modules/menu'
|
||||
import useRouteStore from '@/store/modules/route'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { useNProgress } from '@vueuse/integrations/useNProgress'
|
||||
import { asyncRoutes, asyncRoutesByFilesystem } from './routes'
|
||||
import '@/assets/styles/nprogress.css'
|
||||
@@ -47,7 +42,7 @@ function setupRoutes(router: Router) {
|
||||
}
|
||||
else {
|
||||
try {
|
||||
// 获取用户权限
|
||||
// 获取用户权限
|
||||
settingsStore.settings.app.enablePermission && await userStore.getPermissions()
|
||||
// 生成动态路由
|
||||
switch (settingsStore.settings.app.routeBaseOn) {
|
||||
@@ -73,19 +68,21 @@ function setupRoutes(router: Router) {
|
||||
// 注册并记录路由数据
|
||||
// 记录的数据会在登出时会使用到，不使用 router.removeRoute 是考虑配置的路由可能不一定有设置 name ，则通过调用 router.addRoute() 返回的回调进行删除
|
||||
const removeRoutes: (() => void)[] = []
|
||||
routeStore.flatRoutes.forEach((route) => {
|
||||
routeStore.routes.forEach((route) => {
|
||||
if (!/^(?:https?:|mailto:|tel:)/.test(route.path)) {
|
||||
removeRoutes.push(router.addRoute(route as RouteRecordRaw))
|
||||
}
|
||||
})
|
||||
if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
|
||||
routeStore.flatSystemRoutes.forEach((route) => {
|
||||
routeStore.systemRoutes.forEach((route) => {
|
||||
removeRoutes.push(router.addRoute(route as RouteRecordRaw))
|
||||
})
|
||||
}
|
||||
routeStore.setCurrentRemoveRoutes(removeRoutes)
|
||||
}
|
||||
catch {}
|
||||
catch {
|
||||
userStore.logout()
|
||||
}
|
||||
// 动态路由生成并注册后，重新进入当前路由
|
||||
next({
|
||||
path: to.path,
|
||||
@@ -110,6 +107,26 @@ function setupRoutes(router: Router) {
|
||||
})
|
||||
}
|
||||
|
||||
// 当父级路由未配置重定向时，自动重定向到有访问权限的子路由
|
||||
function setupRedirectAuthChildrenRoute(router: Router) {
|
||||
router.beforeEach((to, _from, next) => {
|
||||
const { auth } = useAuth()
|
||||
const currentRoute = router.getRoutes().find(route => route.path === (to.matched.at(-1)?.path ?? ''))
|
||||
if (!currentRoute?.redirect) {
|
||||
const findAuthRoute = currentRoute?.children?.find(route => route.meta?.menu !== false && auth(route.meta?.auth ?? ''))
|
||||
if (findAuthRoute) {
|
||||
next(findAuthRoute)
|
||||
}
|
||||
else {
|
||||
next()
|
||||
}
|
||||
}
|
||||
else {
|
||||
next()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 进度条
|
||||
function setupProgress(router: Router) {
|
||||
const { isLoading } = useNProgress()
|
||||
@@ -133,7 +150,7 @@ function setupTitle(router: Router) {
|
||||
router.afterEach((to) => {
|
||||
const settingsStore = useSettingsStore()
|
||||
if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
|
||||
settingsStore.setTitle(to.meta.breadcrumbNeste?.at(-1)?.title ?? to.meta.title)
|
||||
settingsStore.setTitle(to.matched?.at(-1)?.meta?.title ?? to.meta.title)
|
||||
}
|
||||
else {
|
||||
settingsStore.setTitle(to.meta.title)
|
||||
@@ -143,54 +160,49 @@ function setupTitle(router: Router) {
|
||||
|
||||
// 页面缓存
|
||||
function setupKeepAlive(router: Router) {
|
||||
router.afterEach((to, from) => {
|
||||
router.afterEach(async (to, from) => {
|
||||
const keepAliveStore = useKeepAliveStore()
|
||||
// 判断当前页面是否开启缓存，如果开启，则将当前页面的 name 信息存入 keep-alive 全局状态
|
||||
if (to.meta.cache) {
|
||||
const componentName = to.matched.at(-1)?.components?.default.name
|
||||
if (componentName) {
|
||||
keepAliveStore.add(componentName)
|
||||
}
|
||||
else {
|
||||
// turbo-console-disable-next-line
|
||||
console.warn('[Fantastic-admin] 该页面组件未设置组件名，会导致缓存失效，请检查')
|
||||
}
|
||||
}
|
||||
// 判断离开页面是否开启缓存，如果开启，则根据缓存规则判断是否需要清空 keep-alive 全局状态里离开页面的 name 信息
|
||||
if (from.meta.cache) {
|
||||
const componentName = from.matched.at(-1)?.components?.default.name
|
||||
if (componentName) {
|
||||
// 通过 meta.cache 判断针对哪些页面进行缓存
|
||||
switch (typeof from.meta.cache) {
|
||||
case 'string':
|
||||
if (from.meta.cache !== to.name) {
|
||||
keepAliveStore.remove(componentName)
|
||||
}
|
||||
break
|
||||
case 'object':
|
||||
if (!from.meta.cache.includes(to.name as string)) {
|
||||
keepAliveStore.remove(componentName)
|
||||
}
|
||||
break
|
||||
}
|
||||
// 通过 meta.noCache 判断针对哪些页面不需要进行缓存
|
||||
if (from.meta.noCache) {
|
||||
switch (typeof from.meta.noCache) {
|
||||
case 'string':
|
||||
if (from.meta.noCache === to.name) {
|
||||
keepAliveStore.remove(componentName)
|
||||
}
|
||||
break
|
||||
case 'object':
|
||||
if (from.meta.noCache.includes(to.name as string)) {
|
||||
keepAliveStore.remove(componentName)
|
||||
}
|
||||
break
|
||||
if (to.fullPath !== from.fullPath) {
|
||||
if (to.meta.cache) {
|
||||
const componentName = to.matched.at(-1)?.components?.default.name
|
||||
if (componentName) {
|
||||
// 缓存当前页面前，先判断是否需要进行清除缓存，判断依据：
|
||||
// 1. 如果 to.meta.cache 为 boolean 类型，并且不为 true，则需要清除缓存
|
||||
// 2. 如果 to.meta.cache 为 string 类型，并且与 from.name 不一致，则需要清除缓存
|
||||
// 3. 如果 to.meta.cache 为 array 类型，并且不包含 from.name，则需要清除缓存
|
||||
// 4. 如果 to.meta.noCache 为 string 类型，并且与 from.name 一致，则需要清除缓存
|
||||
// 5. 如果 to.meta.noCache 为 array 类型，并且包含 from.name，则需要清除缓存
|
||||
// 6. 如果是刷新页面，则需要清除缓存
|
||||
let shouldClearCache = false
|
||||
if (typeof to.meta.cache === 'boolean') {
|
||||
shouldClearCache = !to.meta.cache
|
||||
}
|
||||
else if (typeof to.meta.cache === 'string') {
|
||||
shouldClearCache = to.meta.cache !== from.name
|
||||
}
|
||||
else if (Array.isArray(to.meta.cache)) {
|
||||
shouldClearCache = !to.meta.cache.includes(from.name as string)
|
||||
}
|
||||
if (to.meta.noCache) {
|
||||
if (typeof to.meta.noCache === 'string') {
|
||||
shouldClearCache = to.meta.noCache === from.name
|
||||
}
|
||||
else if (Array.isArray(to.meta.noCache)) {
|
||||
shouldClearCache = to.meta.noCache.includes(from.name as string)
|
||||
}
|
||||
}
|
||||
if (from.name === 'reload') {
|
||||
shouldClearCache = true
|
||||
}
|
||||
if (shouldClearCache) {
|
||||
keepAliveStore.remove(componentName)
|
||||
await nextTick()
|
||||
}
|
||||
keepAliveStore.add(componentName)
|
||||
}
|
||||
// 如果进入的是 reload 页面，则也将离开页面的缓存清空
|
||||
if (to.name === 'reload') {
|
||||
keepAliveStore.remove(componentName)
|
||||
else {
|
||||
// turbo-console-disable-next-line
|
||||
console.warn('[Fantastic-admin] 该页面组件未设置组件名，会导致缓存失效，请检查')
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -206,6 +218,7 @@ function setupOther(router: Router) {
|
||||
|
||||
export default function setupGuards(router: Router) {
|
||||
setupRoutes(router)
|
||||
setupRedirectAuthChildrenRoute(router)
|
||||
setupProgress(router)
|
||||
setupTitle(router)
|
||||
setupKeepAlive(router)
|
||||
|
||||
+3
-3
@@ -1,8 +1,7 @@
|
||||
import pinia from '@/store'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import { loadingFadeOut } from 'virtual:app-loading'
|
||||
|
||||
import { createRouter, createWebHashHistory } from 'vue-router'
|
||||
import pinia from '@/store'
|
||||
import setupExtensions from './extensions'
|
||||
import setupGuards from './guards'
|
||||
// 路由相关数据
|
||||
import { constantRoutes, constantRoutesByFilesystem } from './routes'
|
||||
@@ -13,6 +12,7 @@ const router = createRouter({
|
||||
})
|
||||
|
||||
setupGuards(router)
|
||||
setupExtensions(router)
|
||||
|
||||
router.isReady().then(() => {
|
||||
loadingFadeOut()
|
||||
|
||||
@@ -7,7 +7,6 @@ function Layout() {
|
||||
const routes: RouteRecordRaw = {
|
||||
path: '/multilevel_menu_example',
|
||||
component: Layout,
|
||||
redirect: '/multilevel_menu_example/page',
|
||||
name: 'multilevelMenuExample',
|
||||
meta: {
|
||||
title: '多级导航',
|
||||
@@ -25,7 +24,6 @@ const routes: RouteRecordRaw = {
|
||||
{
|
||||
path: 'level2',
|
||||
name: 'multilevelMenuExample2',
|
||||
redirect: '/multilevel_menu_example/level2/page',
|
||||
meta: {
|
||||
title: '导航2',
|
||||
},
|
||||
@@ -41,7 +39,6 @@ const routes: RouteRecordRaw = {
|
||||
{
|
||||
path: 'level3',
|
||||
name: 'multilevelMenuExample2-2',
|
||||
redirect: '/multilevel_menu_example/level2/level3/page1',
|
||||
meta: {
|
||||
title: '导航2-2',
|
||||
},
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import type { Route } from '#/global'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import useSettingsStore from '@/store/modules/settings'
|
||||
import generatedRoutes from 'virtual:generated-pages'
|
||||
import { setupLayouts } from 'virtual:meta-layouts'
|
||||
import MultilevelMenuExample from './modules/multilevel.menu.example'
|
||||
|
||||
@@ -39,6 +39,7 @@ const globalSettingsDefault: RecursiveRequired<Settings.all> = {
|
||||
enableHotkeys: false,
|
||||
},
|
||||
toolbar: {
|
||||
enable: true,
|
||||
breadcrumb: true,
|
||||
navSearch: true,
|
||||
fullscreen: false,
|
||||
|
||||
+1
-1
@@ -1,7 +1,7 @@
|
||||
import type { RecursiveRequired, Settings } from '#/global'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import settingsDefault from '@/settings.default'
|
||||
import { merge } from '@/utils/object'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
|
||||
const globalSettings: Settings.all = {
|
||||
// 请在此处编写或粘贴配置代码
|
||||
|
||||
+7
-7
@@ -1,12 +1,12 @@
|
||||
import { pascalCase } from 'scule'
|
||||
|
||||
type Slots =
|
||||
'header-start' | 'header-end' | 'header-after-logo' |
|
||||
'main-sidebar-top' | 'main-sidebar-bottom' | 'main-sidebar-after-logo' |
|
||||
'sub-sidebar-top' | 'sub-sidebar-bottom' | 'sub-sidebar-after-logo' |
|
||||
'tabbar-start' | 'tabbar-end' |
|
||||
'toolbar-start' | 'toolbar-end' |
|
||||
'free-position'
|
||||
type Slots
|
||||
= 'header-start' | 'header-after-logo' | 'header-after-menu' | 'header-end'
|
||||
| 'main-sidebar-top' | 'main-sidebar-after-logo' | 'main-sidebar-after-menu' | 'main-sidebar-bottom'
|
||||
| 'sub-sidebar-top' | 'sub-sidebar-after-logo' | 'sub-sidebar-after-menu' | 'sub-sidebar-bottom'
|
||||
| 'tabbar-start' | 'tabbar-end'
|
||||
| 'toolbar-start' | 'toolbar-end'
|
||||
| 'free-position'
|
||||
|
||||
function tryLoadComponent(name: Slots) {
|
||||
const componentMap = import.meta.glob('./*/index.vue', { eager: true })
|
||||
|
||||
Executable → Regular
@@ -1,4 +1,4 @@
|
||||
const useKeepAliveStore = defineStore(
|
||||
export const useKeepAliveStore = defineStore(
|
||||
// 唯一ID
|
||||
'keepAlive',
|
||||
() => {
|
||||
@@ -38,5 +38,3 @@ const useKeepAliveStore = defineStore(
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export default useKeepAliveStore
|
||||
|
||||
@@ -1,19 +1,15 @@
|
||||
import type { Menu, Route } from '#/global'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import apiApp from '@/api/modules/app'
|
||||
import menu from '@/menu'
|
||||
import { resolveRoutePath } from '@/utils'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import useRouteStore from './route'
|
||||
import useSettingsStore from './settings'
|
||||
import useUserStore from './user'
|
||||
|
||||
const useMenuStore = defineStore(
|
||||
export const useMenuStore = defineStore(
|
||||
// 唯一ID
|
||||
'menu',
|
||||
() => {
|
||||
const settingsStore = useSettingsStore()
|
||||
const userStore = useUserStore()
|
||||
const routeStore = useRouteStore()
|
||||
|
||||
const filesystemMenusRaw = ref<Menu.recordMainRaw[]>([])
|
||||
@@ -78,10 +74,7 @@ const useMenuStore = defineStore(
|
||||
else {
|
||||
returnMenus = filesystemMenusRaw.value
|
||||
}
|
||||
// 如果权限功能开启，则需要对导航数据进行筛选过滤
|
||||
if (settingsStore.settings.app.enablePermission) {
|
||||
returnMenus = filterAsyncMenus(returnMenus, userStore.permissions)
|
||||
}
|
||||
returnMenus = filterAsyncMenus(returnMenus)
|
||||
return returnMenus
|
||||
})
|
||||
// 次导航数据
|
||||
@@ -100,7 +93,7 @@ const useMenuStore = defineStore(
|
||||
})
|
||||
function getDeepestPath(menu: Menu.recordRaw, rootPath = '') {
|
||||
let retnPath = ''
|
||||
if (menu.children) {
|
||||
if (menu.children?.some(item => item.meta?.menu !== false)) {
|
||||
const item = menu.children.find(item => item.meta?.menu !== false)
|
||||
if (item) {
|
||||
retnPath = getDeepestPath(item, resolveRoutePath(rootPath, menu.path))
|
||||
@@ -155,35 +148,15 @@ const useMenuStore = defineStore(
|
||||
return defaultOpenedPaths
|
||||
}
|
||||
|
||||
// 判断是否有权限
|
||||
function hasPermission(permissions: string[], menu: Menu.recordMainRaw | Menu.recordRaw) {
|
||||
let isAuth = false
|
||||
if (menu.meta?.auth) {
|
||||
isAuth = permissions.some((auth) => {
|
||||
if (typeof menu.meta?.auth === 'string') {
|
||||
return menu.meta.auth !== '' ? menu.meta.auth === auth : true
|
||||
}
|
||||
else if (typeof menu.meta?.auth === 'object') {
|
||||
return menu.meta.auth.length > 0 ? menu.meta.auth.includes(auth) : true
|
||||
}
|
||||
else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
isAuth = true
|
||||
}
|
||||
return isAuth
|
||||
}
|
||||
const auth = useAuth()
|
||||
// 根据权限过滤导航
|
||||
function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T, permissions: string[]): T {
|
||||
function filterAsyncMenus<T extends Menu.recordMainRaw[] | Menu.recordRaw[]>(menus: T): T {
|
||||
const res: any = []
|
||||
menus.forEach((menu) => {
|
||||
if (hasPermission(permissions, menu)) {
|
||||
if (auth.auth(menu.meta?.auth ?? '')) {
|
||||
const tmpMenu = cloneDeep(menu)
|
||||
if (tmpMenu.children && tmpMenu.children.length > 0) {
|
||||
tmpMenu.children = filterAsyncMenus(tmpMenu.children, permissions) as Menu.recordRaw[]
|
||||
tmpMenu.children = filterAsyncMenus(tmpMenu.children) as Menu.recordRaw[]
|
||||
tmpMenu.children.length > 0 && res.push(tmpMenu)
|
||||
}
|
||||
else {
|
||||
@@ -242,5 +215,3 @@ const useMenuStore = defineStore(
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export default useMenuStore
|
||||
|
||||
+66
-84
@@ -1,91 +1,26 @@
|
||||
import type { Route } from '#/global'
|
||||
import type { RouteRecordRaw } from 'vue-router'
|
||||
import apiApp from '@/api/modules/app'
|
||||
import { systemRoutes } from '@/router/routes'
|
||||
import { resolveRoutePath } from '@/utils'
|
||||
import type { RouteRecordRaw, RouterMatcher } from 'vue-router'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import useSettingsStore from './settings'
|
||||
import { createRouterMatcher } from 'vue-router'
|
||||
import apiApp from '@/api/modules/app'
|
||||
import { systemRoutes as systemRoutesRaw } from '@/router/routes'
|
||||
|
||||
const useRouteStore = defineStore(
|
||||
export const useRouteStore = defineStore(
|
||||
// 唯一ID
|
||||
'route',
|
||||
() => {
|
||||
const settingsStore = useSettingsStore()
|
||||
|
||||
const isGenerate = ref(false)
|
||||
// 原始路由
|
||||
const routesRaw = ref<Route.recordMainRaw[]>([])
|
||||
// 文件系统原始路由
|
||||
const filesystemRoutesRaw = ref<RouteRecordRaw[]>([])
|
||||
// 已注册的路由，用于登出时删除路由
|
||||
const currentRemoveRoutes = ref<(() => void)[]>([])
|
||||
|
||||
// 将多层嵌套路由处理成两层，保留顶层和最子层路由，中间层级将被拍平
|
||||
function flatAsyncRoutes<T extends RouteRecordRaw>(route: T): T {
|
||||
if (route.children) {
|
||||
route.children = flatAsyncRoutesRecursive(route.children, [{
|
||||
path: route.path,
|
||||
title: route.meta?.title,
|
||||
icon: route.meta?.icon,
|
||||
hide: !route.meta?.breadcrumb && route.meta?.breadcrumb === false,
|
||||
}], route.path)
|
||||
}
|
||||
return route
|
||||
}
|
||||
function flatAsyncRoutesRecursive(routes: RouteRecordRaw[], breadcrumb: Route.breadcrumb[] = [], baseUrl = ''): RouteRecordRaw[] {
|
||||
const res: RouteRecordRaw[] = []
|
||||
routes.forEach((route) => {
|
||||
if (route.children) {
|
||||
const childrenBaseUrl = resolveRoutePath(baseUrl, route.path)
|
||||
const tmpBreadcrumb = cloneDeep(breadcrumb)
|
||||
tmpBreadcrumb.push({
|
||||
path: childrenBaseUrl,
|
||||
title: route.meta?.title,
|
||||
icon: route.meta?.icon,
|
||||
hide: !route.meta?.breadcrumb && route.meta?.breadcrumb === false,
|
||||
})
|
||||
const tmpRoute = cloneDeep(route)
|
||||
tmpRoute.path = childrenBaseUrl
|
||||
if (!tmpRoute.meta) {
|
||||
tmpRoute.meta = {}
|
||||
}
|
||||
tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
|
||||
delete tmpRoute.children
|
||||
res.push(tmpRoute)
|
||||
const childrenRoutes = flatAsyncRoutesRecursive(route.children, tmpBreadcrumb, childrenBaseUrl)
|
||||
childrenRoutes.forEach((item) => {
|
||||
// 如果 path 一样则覆盖，因为子路由的 path 可能设置为空，导致和父路由一样，直接注册会提示路由重复
|
||||
if (res.some(v => v.path === item.path)) {
|
||||
res.forEach((v, i) => {
|
||||
if (v.path === item.path) {
|
||||
res[i] = item
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
res.push(item)
|
||||
}
|
||||
})
|
||||
}
|
||||
else {
|
||||
const tmpRoute = cloneDeep(route)
|
||||
tmpRoute.path = resolveRoutePath(baseUrl, tmpRoute.path)
|
||||
// 处理面包屑导航
|
||||
const tmpBreadcrumb = cloneDeep(breadcrumb)
|
||||
tmpBreadcrumb.push({
|
||||
path: tmpRoute.path,
|
||||
title: tmpRoute.meta?.title,
|
||||
icon: tmpRoute.meta?.icon,
|
||||
hide: !tmpRoute.meta?.breadcrumb && tmpRoute.meta?.breadcrumb === false,
|
||||
})
|
||||
if (!tmpRoute.meta) {
|
||||
tmpRoute.meta = {}
|
||||
}
|
||||
tmpRoute.meta.breadcrumbNeste = tmpBreadcrumb
|
||||
res.push(tmpRoute)
|
||||
}
|
||||
})
|
||||
return res
|
||||
}
|
||||
// 扁平化路由（将三级及以上路由数据拍平成二级）
|
||||
const flatRoutes = computed(() => {
|
||||
// 实际路由
|
||||
const routes = computed(() => {
|
||||
const returnRoutes: RouteRecordRaw[] = []
|
||||
if (settingsStore.settings.app.routeBaseOn !== 'filesystem') {
|
||||
if (routesRaw.value) {
|
||||
@@ -100,7 +35,12 @@ const useRouteStore = defineStore(
|
||||
})
|
||||
returnRoutes.push(...tmpRoutes)
|
||||
})
|
||||
returnRoutes.forEach(item => flatAsyncRoutes(item))
|
||||
returnRoutes.forEach((item) => {
|
||||
if (item.children) {
|
||||
item.children = deleteMiddleRouteComponent(item.children)
|
||||
}
|
||||
return item
|
||||
})
|
||||
}
|
||||
}
|
||||
else {
|
||||
@@ -108,16 +48,51 @@ const useRouteStore = defineStore(
|
||||
}
|
||||
return returnRoutes
|
||||
})
|
||||
const flatSystemRoutes = computed(() => {
|
||||
const routes = [...systemRoutes]
|
||||
routes.forEach(item => flatAsyncRoutes(item))
|
||||
// 系统路由
|
||||
const systemRoutes = computed(() => {
|
||||
const routes = [...systemRoutesRaw]
|
||||
routes.forEach((item) => {
|
||||
if (item.children) {
|
||||
item.children = deleteMiddleRouteComponent(item.children)
|
||||
}
|
||||
})
|
||||
return routes
|
||||
})
|
||||
// 删除路由中间层级对应的组件
|
||||
function deleteMiddleRouteComponent(routes: RouteRecordRaw[]) {
|
||||
const res: RouteRecordRaw[] = []
|
||||
routes.forEach((route) => {
|
||||
if (route.children?.length) {
|
||||
delete route.component
|
||||
route.children = deleteMiddleRouteComponent(route.children)
|
||||
}
|
||||
else {
|
||||
delete route.children
|
||||
}
|
||||
res.push(route)
|
||||
})
|
||||
return res
|
||||
}
|
||||
|
||||
// 路由匹配器
|
||||
const routesMatcher = ref<RouterMatcher>()
|
||||
// 根据路径获取匹配的路由
|
||||
function getRouteMatchedByPath(path: string) {
|
||||
return routesMatcher.value?.resolve({ path }, undefined!)?.matched ?? []
|
||||
}
|
||||
|
||||
// 生成路由（前端生成）
|
||||
function generateRoutesAtFront(asyncRoutes: Route.recordMainRaw[]) {
|
||||
// 设置 routes 数据
|
||||
routesRaw.value = cloneDeep(asyncRoutes) as any
|
||||
// 创建路由匹配器
|
||||
const routes: RouteRecordRaw[] = []
|
||||
routesRaw.value.forEach((route) => {
|
||||
if (route.children) {
|
||||
routes.push(...route.children)
|
||||
}
|
||||
})
|
||||
routesMatcher.value = createRouterMatcher(routes, {})
|
||||
isGenerate.value = true
|
||||
}
|
||||
// 格式化后端路由数据
|
||||
@@ -146,8 +121,16 @@ const useRouteStore = defineStore(
|
||||
await apiApp.routeList().then((res) => {
|
||||
// 设置 routes 数据
|
||||
routesRaw.value = formatBackRoutes(res.data) as any
|
||||
// 创建路由匹配器
|
||||
const routes: RouteRecordRaw[] = []
|
||||
routesRaw.value.forEach((route) => {
|
||||
if (route.children) {
|
||||
routes.push(...route.children)
|
||||
}
|
||||
})
|
||||
routesMatcher.value = createRouterMatcher(routes, {})
|
||||
isGenerate.value = true
|
||||
}).catch(() => {})
|
||||
})
|
||||
}
|
||||
// 生成路由（文件系统生成）
|
||||
function generateRoutesAtFilesystem(asyncRoutes: RouteRecordRaw[]) {
|
||||
@@ -174,8 +157,9 @@ const useRouteStore = defineStore(
|
||||
isGenerate,
|
||||
routesRaw,
|
||||
currentRemoveRoutes,
|
||||
flatRoutes,
|
||||
flatSystemRoutes,
|
||||
routes,
|
||||
systemRoutes,
|
||||
getRouteMatchedByPath,
|
||||
generateRoutesAtFront,
|
||||
generateRoutesAtBack,
|
||||
generateRoutesAtFilesystem,
|
||||
@@ -184,5 +168,3 @@ const useRouteStore = defineStore(
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export default useRouteStore
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import type { Settings } from '#/global'
|
||||
import type { RouteMeta } from 'vue-router'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
import settingsDefault from '@/settings'
|
||||
import { merge } from '@/utils/object'
|
||||
import { cloneDeep } from 'es-toolkit'
|
||||
|
||||
const useSettingsStore = defineStore(
|
||||
export const useSettingsStore = defineStore(
|
||||
// 唯一ID
|
||||
'settings',
|
||||
() => {
|
||||
@@ -87,6 +87,13 @@ const useSettingsStore = defineStore(
|
||||
break
|
||||
}
|
||||
|
||||
// 页面是否刷新
|
||||
const isReloading = ref(false)
|
||||
// 切换当前页面是否刷新
|
||||
function setIsReloading(value?: boolean) {
|
||||
isReloading.value = value ?? !isReloading.value
|
||||
}
|
||||
|
||||
// 页面标题
|
||||
const title = ref<RouteMeta['title']>()
|
||||
// 记录页面标题
|
||||
@@ -152,6 +159,8 @@ const useSettingsStore = defineStore(
|
||||
settings,
|
||||
currentColorScheme,
|
||||
os,
|
||||
isReloading,
|
||||
setIsReloading,
|
||||
title,
|
||||
setTitle,
|
||||
mode,
|
||||
@@ -163,5 +172,3 @@ const useSettingsStore = defineStore(
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export default useSettingsStore
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import type { Tabbar } from '#/global'
|
||||
import type { RouteLocationNormalized } from 'vue-router'
|
||||
import useKeepAliveStore from './keepAlive'
|
||||
|
||||
const useTabbarStore = defineStore(
|
||||
export const useTabbarStore = defineStore(
|
||||
// 唯一ID
|
||||
'tabbar',
|
||||
() => {
|
||||
@@ -12,7 +11,7 @@ const useTabbarStore = defineStore(
|
||||
const leaveIndex = ref(-1)
|
||||
|
||||
// 添加标签页
|
||||
async function add(route: RouteLocationNormalized) {
|
||||
function add(route: RouteLocationNormalized) {
|
||||
const names: string[] = []
|
||||
route.matched.forEach((v, i) => {
|
||||
if (i > 0) {
|
||||
@@ -20,7 +19,7 @@ const useTabbarStore = defineStore(
|
||||
}
|
||||
})
|
||||
const meta = route.matched.at(-1)?.meta
|
||||
const tabId = route.fullPath
|
||||
const tabId = route.path
|
||||
if (route.name !== 'reload') {
|
||||
// 记录查找到的标签页
|
||||
const findTab = list.value.find((item) => {
|
||||
@@ -32,7 +31,7 @@ const useTabbarStore = defineStore(
|
||||
tabId,
|
||||
fullPath: route.fullPath,
|
||||
title: typeof meta?.title === 'function' ? meta.title() : meta?.title,
|
||||
icon: meta?.icon ?? meta?.breadcrumbNeste?.findLast(item => item.icon)?.icon,
|
||||
icon: meta?.icon ?? route.matched?.findLast(item => item.meta?.icon)?.meta?.icon,
|
||||
name: names,
|
||||
}
|
||||
if (leaveIndex.value >= 0) {
|
||||
@@ -159,5 +158,3 @@ const useTabbarStore = defineStore(
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export default useTabbarStore
|
||||
|
||||
@@ -1,11 +1,7 @@
|
||||
import apiUser from '@/api/modules/user'
|
||||
import router from '@/router'
|
||||
import useMenuStore from './menu'
|
||||
import useRouteStore from './route'
|
||||
import useSettingsStore from './settings'
|
||||
import useTabbarStore from './tabbar'
|
||||
|
||||
const useUserStore = defineStore(
|
||||
export const useUserStore = defineStore(
|
||||
// 唯一ID
|
||||
'user',
|
||||
() => {
|
||||
@@ -109,5 +105,3 @@ const useUserStore = defineStore(
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
export default useUserStore
|
||||
|
||||
+9
-2
@@ -19,12 +19,14 @@ declare global {
|
||||
const getActivePinia: typeof import('pinia')['getActivePinia']
|
||||
const getCurrentInstance: typeof import('vue')['getCurrentInstance']
|
||||
const getCurrentScope: typeof import('vue')['getCurrentScope']
|
||||
const getCurrentWatcher: typeof import('vue')['getCurrentWatcher']
|
||||
const h: typeof import('vue')['h']
|
||||
const inject: typeof import('vue')['inject']
|
||||
const isProxy: typeof import('vue')['isProxy']
|
||||
const isReactive: typeof import('vue')['isReactive']
|
||||
const isReadonly: typeof import('vue')['isReadonly']
|
||||
const isRef: typeof import('vue')['isRef']
|
||||
const isShallow: typeof import('vue')['isShallow']
|
||||
const mapActions: typeof import('pinia')['mapActions']
|
||||
const mapGetters: typeof import('pinia')['mapGetters']
|
||||
const mapState: typeof import('pinia')['mapState']
|
||||
@@ -71,16 +73,21 @@ declare global {
|
||||
const useCssVars: typeof import('vue')['useCssVars']
|
||||
const useGlobalProperties: typeof import('../utils/composables/useGlobalProperties')['default']
|
||||
const useId: typeof import('vue')['useId']
|
||||
const useKeepAliveStore: typeof import('../store/modules/keepAlive')['useKeepAliveStore']
|
||||
const useLink: typeof import('vue-router')['useLink']
|
||||
const useMainPage: typeof import('../utils/composables/useMainPage')['default']
|
||||
const useMenu: typeof import('../utils/composables/useMenu')['default']
|
||||
const useMenuStore: typeof import('../store/modules/menu')['useMenuStore']
|
||||
const useModel: typeof import('vue')['useModel']
|
||||
const useRoute: typeof import('vue-router')['useRoute']
|
||||
const useRouteStore: typeof import('../store/modules/route')['useRouteStore']
|
||||
const useRouter: typeof import('vue-router')['useRouter']
|
||||
const useSettingsStore: typeof import('../store/modules/settings')['useSettingsStore']
|
||||
const useSlots: typeof import('vue')['useSlots']
|
||||
const useTabbar: typeof import('../utils/composables/useTabbar')['default']
|
||||
const useTabbarStore: typeof import('../store/modules/tabbar')['useTabbarStore']
|
||||
const useTemplateRef: typeof import('vue')['useTemplateRef']
|
||||
const useViewTransition: typeof import('../utils/composables/useViewTransition')['default']
|
||||
const useUserStore: typeof import('../store/modules/user')['useUserStore']
|
||||
const watch: typeof import('vue')['watch']
|
||||
const watchEffect: typeof import('vue')['watchEffect']
|
||||
const watchPostEffect: typeof import('vue')['watchPostEffect']
|
||||
@@ -89,6 +96,6 @@ declare global {
|
||||
// for type re-export
|
||||
declare global {
|
||||
// @ts-ignore
|
||||
export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
export type { Component, Slot, Slots, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, ShallowRef, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
|
||||
import('vue')
|
||||
}
|
||||
|
||||
Vendored
+12
-4
@@ -2,22 +2,31 @@
|
||||
// @ts-nocheck
|
||||
// Generated by unplugin-vue-components
|
||||
// Read more: https://github.com/vuejs/core/pull/3399
|
||||
// biome-ignore lint: disable
|
||||
export {}
|
||||
|
||||
/* prettier-ignore */
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AccountButton: typeof import('./../components/AccountButton/index.vue')['default']
|
||||
FaAuth: typeof import('./../ui/components/FaAuth/index.vue')['default']
|
||||
FaAvatar: typeof import('./../ui/components/FaAvatar/index.vue')['default']
|
||||
FaBackToTop: typeof import('./../ui/components/FaBackToTop/index.vue')['default']
|
||||
FaButton: typeof import('./../ui/components/FaButton/index.vue')['default']
|
||||
FaButtonGroup: typeof import('./../ui/components/FaButtonGroup/index.vue')['default']
|
||||
FaCard: typeof import('./../ui/components/FaCard/index.vue')['default']
|
||||
FaCheckbox: typeof import('./../ui/components/FaCheckbox/index.vue')['default']
|
||||
FaContextMenu: typeof import('./../ui/components/FaContextMenu/index.vue')['default']
|
||||
FaCopyright: typeof import('./../ui/components/FaCopyright/index.vue')['default']
|
||||
FaDivider: typeof import('./../ui/components/FaDivider/index.vue')['default']
|
||||
FaDrawer: typeof import('./../ui/components/FaDrawer/index.vue')['default']
|
||||
FaDropdown: typeof import('./../ui/components/FaDropdown/index.vue')['default']
|
||||
FaFileUpload: typeof import('./../ui/components/FaFileUpload/index.vue')['default']
|
||||
FaFixedActionBar: typeof import('./../ui/components/FaFixedActionBar/index.vue')['default']
|
||||
FaHoverCard: typeof import('./../ui/components/FaHoverCard/index.vue')['default']
|
||||
FaIcon: typeof import('./../ui/components/FaIcon/index.vue')['default']
|
||||
FaImagePreview: typeof import('./../ui/components/FaImagePreview/index.vue')['default']
|
||||
FaImageUpload: typeof import('./../ui/components/FaImageUpload/index.vue')['default']
|
||||
FaInput: typeof import('./../ui/components/FaInput/index.vue')['default']
|
||||
FaKbd: typeof import('./../ui/components/FaKbd/index.vue')['default']
|
||||
FaModal: typeof import('./../ui/components/FaModal/index.vue')['default']
|
||||
@@ -28,19 +37,18 @@ declare module 'vue' {
|
||||
FaPasswordStrength: typeof import('./../ui/components/FaPasswordStrength/index.vue')['default']
|
||||
FaPinInput: typeof import('./../ui/components/FaPinInput/index.vue')['default']
|
||||
FaPopover: typeof import('./../ui/components/FaPopover/index.vue')['default']
|
||||
FaProgress: typeof import('./../ui/components/FaProgress/index.vue')['default']
|
||||
FaScrollArea: typeof import('./../ui/components/FaScrollArea/index.vue')['default']
|
||||
FaSearchBar: typeof import('./../ui/components/FaSearchBar/index.vue')['default']
|
||||
FaSelect: typeof import('./../ui/components/FaSelect/index.vue')['default']
|
||||
FaSlider: typeof import('./../ui/components/FaSlider/index.vue')['default']
|
||||
FaSmartFixedBlock: typeof import('./../ui/components/FaSmartFixedBlock/index.vue')['default']
|
||||
FaSwitch: typeof import('./../ui/components/FaSwitch/index.vue')['default']
|
||||
FaSystemInfo: typeof import('./../ui/components/FaSystemInfo/index.vue')['default']
|
||||
FaTabs: typeof import('./../ui/components/FaTabs/index.vue')['default']
|
||||
FaTextarea: typeof import('./../ui/components/FaTextarea/index.vue')['default']
|
||||
FaToast: typeof import('./../ui/components/FaToast/index.vue')['default']
|
||||
FaTooltip: typeof import('./../ui/components/FaTooltip/index.vue')['default']
|
||||
FileUpload: typeof import('./../components/FileUpload/index.vue')['default']
|
||||
ImagePreview: typeof import('./../components/ImagePreview/index.vue')['default']
|
||||
ImagesUpload: typeof import('./../components/ImagesUpload/index.vue')['default']
|
||||
ImageUpload: typeof import('./../components/ImageUpload/index.vue')['default']
|
||||
RouterLink: typeof import('vue-router')['RouterLink']
|
||||
RouterView: typeof import('vue-router')['RouterView']
|
||||
}
|
||||
|
||||
Vendored
-1
@@ -1,4 +1,3 @@
|
||||
/// <reference types="vite/client" />
|
||||
interface ImportMetaEnv {
|
||||
// Auto generate by env-parse
|
||||
/**
|
||||
|
||||
Vendored
+11
-13
@@ -11,17 +11,17 @@ declare namespace Settings {
|
||||
interface app {
|
||||
/**
|
||||
* 颜色方案
|
||||
* @默认值 `''` 跟随系统
|
||||
* @可选值 `'light'` 明亮模式
|
||||
* @默认值 `'light'` 明亮模式
|
||||
* @可选值 `'dark'` 暗黑模式
|
||||
* @可选值 `''` 跟随系统
|
||||
*/
|
||||
colorScheme?: '' | 'light' | 'dark'
|
||||
colorScheme?: 'light' | 'dark' | ''
|
||||
/**
|
||||
* 圆角系数
|
||||
* @默认值 `0.5`
|
||||
* @可选值 `0` / `0.25` / `0.5` / `0.75` / `1`
|
||||
* @可选值 `0到1区间的任意值`
|
||||
*/
|
||||
radius?: 0 | 0.25 | 0.5 | 0.75 | 1
|
||||
radius?: number
|
||||
/**
|
||||
* 是否开启哀悼模式
|
||||
* @默认值 `false`
|
||||
@@ -74,7 +74,7 @@ declare namespace Settings {
|
||||
}
|
||||
interface layout {
|
||||
/**
|
||||
* 是否开启移动端适配，开启后当页面宽度小于 992px 时自动切换为移动端展示
|
||||
* 是否开启移动端适配，开启后当页面宽度小于 1024px 时自动切换为移动端展示
|
||||
* @默认值 `false`
|
||||
*/
|
||||
enableMobileAdaptation?: boolean
|
||||
@@ -148,6 +148,11 @@ declare namespace Settings {
|
||||
enableHotkeys?: boolean
|
||||
}
|
||||
interface toolbar {
|
||||
/**
|
||||
* 是否开启工具栏
|
||||
* @默认值 `true`
|
||||
*/
|
||||
enable?: boolean
|
||||
/**
|
||||
* 是否开启面包屑导航
|
||||
* @默认值 `true`
|
||||
@@ -251,7 +256,6 @@ declare module 'vue-router' {
|
||||
cache?: boolean | string | string[]
|
||||
noCache?: string | string[]
|
||||
link?: string
|
||||
breadcrumbNeste?: Route.breadcrumb[]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -264,12 +268,6 @@ declare namespace Route {
|
||||
}
|
||||
children: RouteRecordRaw[]
|
||||
}
|
||||
interface breadcrumb {
|
||||
path: string
|
||||
title?: string | (() => string)
|
||||
icon?: string
|
||||
hide: boolean
|
||||
}
|
||||
}
|
||||
|
||||
declare namespace Menu {
|
||||
|
||||
Vendored
+1
@@ -0,0 +1 @@
|
||||
/// <reference types="vite/client" />
|
||||
@@ -16,6 +16,8 @@ const isCheck = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<slot v-if="isCheck" />
|
||||
<slot v-else name="no-auth" />
|
||||
<div class="contents">
|
||||
<slot v-if="isCheck" />
|
||||
<slot v-else name="no-auth" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import type { AvatarVariants } from '.'
|
||||
import { AvatarRoot } from 'reka-ui'
|
||||
import { cn } from '@/utils'
|
||||
import { AvatarRoot } from 'radix-vue'
|
||||
import { avatarVariant, type AvatarVariants } from '.'
|
||||
import { avatarVariant } from '.'
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { AvatarFallback, type AvatarFallbackProps } from 'radix-vue'
|
||||
import type { AvatarFallbackProps } from 'reka-ui'
|
||||
import { AvatarFallback } from 'reka-ui'
|
||||
|
||||
const props = defineProps<AvatarFallbackProps>()
|
||||
</script>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { AvatarImage, type AvatarImageProps } from 'radix-vue'
|
||||
import type { AvatarImageProps } from 'reka-ui'
|
||||
import { AvatarImage } from 'reka-ui'
|
||||
|
||||
const props = defineProps<AvatarImageProps>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AvatarImage v-bind="props" class="h-full w-full object-cover" />
|
||||
<AvatarImage v-bind="props" class="h-full w-full object-cover">
|
||||
<slot />
|
||||
</AvatarImage>
|
||||
</template>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
export { default as Avatar } from './Avatar.vue'
|
||||
export { default as AvatarFallback } from './AvatarFallback.vue'
|
||||
|
||||
@@ -3,6 +3,10 @@ import type { HTMLAttributes } from 'vue'
|
||||
import type { AvatarVariants } from './avatar'
|
||||
import { Avatar, AvatarFallback, AvatarImage } from './avatar'
|
||||
|
||||
defineOptions({
|
||||
name: 'FaAvatar',
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
src: string
|
||||
fallback?: string
|
||||
|
||||
@@ -62,7 +62,7 @@ function handleBackToTop() {
|
||||
<Teleport to="body">
|
||||
<Transition v-bind="transitionClass">
|
||||
<FaButton v-if="scrollTop >= 200" variant="outline" size="icon" class="fixed inset-b-4 z-1000 h-12 w-12 rounded-full transition-all -inset-e-9" :class="{ 'inset-e-3!': show }" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave" @click="handleBackToTop">
|
||||
<FaIcon name="i-icon-park-outline:to-top-one" :size="24" />
|
||||
<FaIcon name="i-icon-park-outline:to-top-one" class="size-6" />
|
||||
</FaButton>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
@@ -1,8 +1,10 @@
|
||||
<script setup lang="ts">
|
||||
import type { PrimitiveProps } from 'reka-ui'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import type { ButtonVariants } from '.'
|
||||
import { Primitive } from 'reka-ui'
|
||||
import { cn } from '@/utils'
|
||||
import { Primitive, type PrimitiveProps } from 'radix-vue'
|
||||
import { type ButtonVariants, buttonVariants } from '.'
|
||||
import { buttonVariants } from '.'
|
||||
|
||||
interface Props extends PrimitiveProps {
|
||||
variant?: ButtonVariants['variant']
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { cva, type VariantProps } from 'class-variance-authority'
|
||||
import type { VariantProps } from 'class-variance-authority'
|
||||
import { cva } from 'class-variance-authority'
|
||||
|
||||
export { default as Button } from './Button.vue'
|
||||
|
||||
@@ -7,22 +8,21 @@ export const buttonVariants = cva(
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default:
|
||||
'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
||||
destructive:
|
||||
'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
||||
outline:
|
||||
'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
||||
secondary:
|
||||
'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2',
|
||||
sm: 'h-8 rounded-md px-3 text-xs',
|
||||
lg: 'h-10 rounded-md px-8',
|
||||
icon: 'h-9 w-9',
|
||||
default: 'h-10 px-4 py-2',
|
||||
sm: 'h-9 rounded-md px-3',
|
||||
lg: 'h-11 rounded-md px-8',
|
||||
icon: 'h-10 w-10',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -0,0 +1,60 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/utils'
|
||||
|
||||
defineOptions({
|
||||
name: 'FaButtonGroup',
|
||||
})
|
||||
|
||||
const props = defineProps<{
|
||||
vertical?: boolean
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="cn('inline-flex gap-[1px] items-stretch', {
|
||||
'horizontal-group flex-row': !props.vertical,
|
||||
'vertical-group flex-col': props.vertical,
|
||||
})"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.horizontal-group {
|
||||
:deep(> button) {
|
||||
&:first-child:not(:last-child) {
|
||||
border-start-end-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
border-start-start-radius: 0;
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child, :last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vertical-group {
|
||||
:deep(> button) {
|
||||
&:first-child:not(:last-child) {
|
||||
border-end-start-radius: 0;
|
||||
border-end-end-radius: 0;
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
border-start-start-radius: 0;
|
||||
border-start-end-radius: 0;
|
||||
}
|
||||
|
||||
&:not(:first-child, :last-child) {
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,18 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue'
|
||||
import { cn } from '@/utils'
|
||||
import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { reactiveOmit } from '@vueuse/core'
|
||||
import { Check } from 'lucide-vue-next'
|
||||
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>()
|
||||
const emits = defineEmits<CheckboxRootEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
const delegatedProps = reactiveOmit(props, 'class')
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
@@ -16,7 +16,7 @@ const id = useId()
|
||||
|
||||
<template>
|
||||
<div class="flex-center-start gap-2">
|
||||
<Checkbox :id v-model:checked="value" :disabled />
|
||||
<Checkbox :id v-model="value" :disabled />
|
||||
<label :for="id" class="cursor-pointer text-sm">
|
||||
<slot />
|
||||
</label>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import type { ContextMenuRootEmits, ContextMenuRootProps } from 'radix-vue'
|
||||
import { ContextMenuRoot, useForwardPropsEmits } from 'radix-vue'
|
||||
import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui'
|
||||
import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui'
|
||||
|
||||
const props = defineProps<ContextMenuRootProps>()
|
||||
const emits = defineEmits<ContextMenuRootEmits>()
|
||||
|
||||
@@ -1,23 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/utils'
|
||||
import type { ContextMenuCheckboxItemEmits, ContextMenuCheckboxItemProps } from 'reka-ui'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { reactiveOmit } from '@vueuse/core'
|
||||
import { Check } from 'lucide-vue-next'
|
||||
import {
|
||||
ContextMenuCheckboxItem,
|
||||
type ContextMenuCheckboxItemEmits,
|
||||
type ContextMenuCheckboxItemProps,
|
||||
ContextMenuItemIndicator,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
} from 'reka-ui'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
|
||||
const emits = defineEmits<ContextMenuCheckboxItemEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
const delegatedProps = reactiveOmit(props, 'class')
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
@@ -30,7 +26,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
props.class,
|
||||
)"
|
||||
>
|
||||
<span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
||||
<span class="absolute left-2 h-3.5 w-3.5 flex items-center justify-center">
|
||||
<ContextMenuItemIndicator>
|
||||
<Check class="h-4 w-4" />
|
||||
</ContextMenuItemIndicator>
|
||||
|
||||
@@ -1,22 +1,18 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/utils'
|
||||
import type { ContextMenuContentEmits, ContextMenuContentProps } from 'reka-ui'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { reactiveOmit } from '@vueuse/core'
|
||||
import {
|
||||
ContextMenuContent,
|
||||
type ContextMenuContentEmits,
|
||||
type ContextMenuContentProps,
|
||||
ContextMenuPortal,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
} from 'reka-ui'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<ContextMenuContentProps & { class?: HTMLAttributes['class'] }>()
|
||||
const emits = defineEmits<ContextMenuContentEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
const delegatedProps = reactiveOmit(props, 'class')
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { ContextMenuGroup, type ContextMenuGroupProps } from 'radix-vue'
|
||||
import type { ContextMenuGroupProps } from 'reka-ui'
|
||||
import { ContextMenuGroup } from 'reka-ui'
|
||||
|
||||
const props = defineProps<ContextMenuGroupProps>()
|
||||
</script>
|
||||
|
||||
@@ -1,21 +1,17 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '@/utils'
|
||||
import type { ContextMenuItemEmits, ContextMenuItemProps } from 'reka-ui'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { reactiveOmit } from '@vueuse/core'
|
||||
import {
|
||||
ContextMenuItem,
|
||||
type ContextMenuItemEmits,
|
||||
type ContextMenuItemProps,
|
||||
useForwardPropsEmits,
|
||||
} from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
} from 'reka-ui'
|
||||
import { cn } from '@/utils'
|
||||
|
||||
const props = defineProps<ContextMenuItemProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
|
||||
const emits = defineEmits<ContextMenuItemEmits>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
const delegatedProps = reactiveOmit(props, 'class')
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits)
|
||||
</script>
|
||||
|
||||
@@ -1,24 +1,19 @@
|
||||
<script setup lang="ts">
|
||||
import type { ContextMenuLabelProps } from 'reka-ui'
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
import { reactiveOmit } from '@vueuse/core'
|
||||
import { ContextMenuLabel } from 'reka-ui'
|
||||
import { cn } from '@/utils'
|
||||
import { ContextMenuLabel, type ContextMenuLabelProps } from 'radix-vue'
|
||||
import { computed, type HTMLAttributes } from 'vue'
|
||||
|
||||
const props = defineProps<ContextMenuLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
|
||||
|
||||
const delegatedProps = computed(() => {
|
||||
const { class: _, ...delegated } = props
|
||||
|
||||
return delegated
|
||||
})
|
||||
const delegatedProps = reactiveOmit(props, 'class')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ContextMenuLabel
|
||||
v-bind="delegatedProps"
|
||||
:class="
|
||||
cn('px-2 py-1.5 text-sm font-semibold text-foreground',
|
||||
inset && 'pl-8', props.class,
|
||||
)"
|
||||
:class="cn('px-2 py-1.5 text-sm font-semibold text-foreground', inset && 'pl-8', props.class)"
|
||||
>
|
||||
<slot />
|
||||
</ContextMenuLabel>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user