Compare commits

..

8 Commits

32 changed files with 2069 additions and 2118 deletions

3
.gitignore vendored
View File

@@ -1,9 +1,10 @@
node_modules
.DS_Store
dist
dist-ssr
*.local
.eslintcache
report.html
dist
vite.config.*.timestamp*
yarn.lock

8
.husky/commit-msg Executable file
View File

@@ -0,0 +1,8 @@
#!/bin/sh
# shellcheck source=./_/husky.sh
. "$(dirname "$0")/_/husky.sh"
PATH="/usr/local/bin:$PATH"
npx --no-install commitlint --edit "$1"

9
.husky/common.sh Normal file
View File

@@ -0,0 +1,9 @@
#!/bin/sh
command_exists () {
command -v "$1" >/dev/null 2>&1
}
# Workaround for Windows 10, Git Bash and Pnpm
if command_exists winpty && test -t 1; then
exec < /dev/tty
fi

10
.husky/pre-commit Executable file
View File

@@ -0,0 +1,10 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
. "$(dirname "$0")/common.sh"
[ -n "$CI" ] && exit 0
PATH="/usr/local/bin:$PATH"
# Perform lint check on files in the staging area through .lintstagedrc configuration
pnpm exec lint-staged

View File

@@ -1,3 +1,27 @@
# 6.3.0 (2025-12-10)
### ✔️ Refactor
- Renamed "Overall Style" in system configuration to "Theme Mode" and "Navigation Mode" to "Menu Layout" to improve naming professionalism and clarity.
- Migrated the deprecated `tseslint.config` configuration method of `typescript-eslint`.
### 🎫 Feat
- Added a color picker panel component.
### 🐞 Bug fixes
- Fixed an issue where the selected/activated state style of the navigation menu was displayed incorrectly when using `iconfont` icons.
- Fixed a style issue with the column settings pop-up of the `RePureTableBar` and `ReVxeTableBar` components.
### 🍏 Perf
- Adapting the `ReDialog` component to the latest version of `el-dialog` with API changes and supplementary examples
- Adapting the `ReDrawer` component to the latest version of `el-drawer` with API changes and supplementary examples
- Adapting the `message` utility function to the latest version of `ElMessage` with API changes and supplementary examples
- Importing the latest version of `element-plus` components
- Optimizing the tab layout and style for Google Chrome mode
# 6.2.0 (2025-10-16)
### 🎫 Features

View File

@@ -1,3 +1,27 @@
# 6.3.0 (2025-12-10)
### ✔️ Refactor
- Renamed "Overall Style" in system configuration to "Theme Mode" and "Navigation Mode" to "Menu Layout" to improve naming professionalism and clarity.
- Migrated the deprecated `tseslint.config` configuration method of `typescript-eslint`.
### 🎫 Feat
- Added a color picker panel component.
### 🐞 Bug fixes
- Fixed an issue where the selected/activated state style of the navigation menu was displayed incorrectly when using `iconfont` icons.
- Fixed a style issue with the column settings pop-up of the `RePureTableBar` and `ReVxeTableBar` components.
### 🍏 Perf
- Adapting the `ReDialog` component to the latest version of `el-dialog` with API changes and supplementary examples
- Adapting the `ReDrawer` component to the latest version of `el-drawer` with API changes and supplementary examples
- Adapting the `message` utility function to the latest version of `ElMessage` with API changes and supplementary examples
- Importing the latest version of `element-plus` components
- Optimizing the tab layout and style for Google Chrome mode
# 6.2.0 (2025-10-16)
### 🎫 Features

View File

@@ -1,8 +1,32 @@
# 6.3.0 (2025-12-10)
### ✔️ Refactor
- 将系统配置中的“整体风格”更名为“主题模式”,“导航模式”更名为“菜单布局”,以提升命名的专业性与清晰度
- 迁移`typescript-eslint`已弃用的`tseslint.config`配置方式
### 🎫 Feat
- 添加颜色选择器面板组件
### 🐞 Bug fixes
- 修复导航菜单在使用`iconfont`图标时,选中/激活状态的样式显示异常问题
- 修复`RePureTableBar``ReVxeTableBar`组件的列设置弹窗样式问题
### 🍏 Perf
- `ReDialog`组件适配`el-dialog`最新版本的`API`变更以及补充相关示例
- `ReDrawer`组件适配`el-drawer`最新版本的`API`变更以及补充相关示例
- `message`工具函数适配`ElMessage`最新版本的`API`变更以及补充相关示例
- 导入`element-plus`最新版本的新组件
- 优化页签风格为谷歌模式下的布局和样式
# 6.2.0 (2025-10-16)
### 🎫 Feat
- 添加全屏`403``404``500`页面,全屏错误页面清晰且安全,提升用户体验
- 添加全屏`403``404``500`页面,全屏错误页面清晰且安全,提升用户体验
### 🐞 Bug fixes
@@ -26,7 +50,7 @@
### 🐞 Bug fixes
- 修复`ReSegmented`分段控制器组件在浅色和深色整体风格切换时的闪烁问题
- 修复`ReSegmented`分段控制器组件在浅色和深色主题模式切换时的闪烁问题
- 修复`resetRouter`未清空全部路由数据问题
- 修复标签页-关闭左侧标签页关闭异常问题
@@ -231,8 +255,8 @@
- 修复`windwos`下点击注册页面会出现滚动条问题
- 修复`windows`下页面切换,内容区会出现滚动条问题
- 修复`pure-table`带状态表格在深色整体风格下状态样式消失的问题
- 修复系统配置中开启灰色模式和深色整体风格,刷新页面整体风格异常
- 修复`pure-table`带状态表格在深色主题模式下状态样式消失的问题
- 修复系统配置中开启灰色模式和深色主题模式,刷新页面主题模式异常
### 🍏 Perf
@@ -285,7 +309,7 @@
- 内嵌`iframe`页支持设置`keepAlive`,保持页面状态
- 优化导航,弹出的菜单超出内容区自适应且可滚动
- 添加文件上传示例
- 添加整体风格自适应操作系统浅色、深色、自动主题功能
- 添加主题模式自适应操作系统浅色、深色、自动主题功能
- 添加页脚
- 支持多标签页打开已经登录的系统后无需再登录并添加内免登录功能(用户可选择免登录的天数)
- 带来高级感的终端命令行
@@ -485,7 +509,7 @@
- 修复菜单搜索功能弹框打开后搜索框未自动聚集的问题
- 修复按 `ESC` 退出全屏后,工具栏按钮文案展示问题
- 修复移动端通知栏 `tooltip` 点击穿透问题
- 修复当左侧菜单收起后,切换到 `horizontal` 导航模式时文字不展示的问题
- 修复当左侧菜单收起后,切换到 `horizontal` 菜单布局时文字不展示的问题
- 修复导航 `tab` 关闭其他标签页无法重置状态问题
- 修复 `getHistoryMode` 函数中环境变量未初始化带来的页面热更新报错
- 修复导航 `tab` 过多导致关闭左侧标签页无法正常显示

View File

@@ -72,8 +72,11 @@ export default defineConfig([
]
}
},
...tseslint.config({
extends: [...tseslint.configs.recommended],
...tseslint.configs.recommended.map(config => ({
...config,
files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"]
})),
{
files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
rules: {
"@typescript-eslint/no-redeclare": "error",
@@ -102,7 +105,7 @@ export default defineConfig([
}
]
}
}),
},
{
files: ["**/*.d.ts"],
rules: {

View File

@@ -1,94 +1,84 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0"
/>
<title>vue-pure-admin</title>
<link rel="icon" href="/favicon.ico" />
</head>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0" />
<title>vue-pure-admin</title>
<link rel="icon" href="/favicon.ico" />
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script")
hm.src = "https://hm.baidu.com/hm.js?d3824e75ef2bf6d851035f74ae1aec68"
var s = document.getElementsByTagName("script")[0]
s.parentNode.insertBefore(hm, s)
})();
</script>
</head>
<body>
<div id="app">
<style>
html,
body,
#app {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.loader,
.loader::before,
.loader::after {
width: 2.5em;
height: 2.5em;
border-radius: 50%;
animation: load-animation 1.8s infinite ease-in-out;
animation-fill-mode: both;
}
.loader {
position: relative;
top: 0;
margin: 80px auto;
font-size: 10px;
color: #406eeb;
text-indent: -9999em;
transform: translateZ(0);
transform: translate(-50%, 0);
animation-delay: -0.16s;
}
.loader::before,
.loader::after {
position: absolute;
top: 0;
content: "";
}
.loader::before {
left: -3.5em;
animation-delay: -0.32s;
}
.loader::after {
left: 3.5em;
}
@keyframes load-animation {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
<body>
<div id="app">
<style>
html,
body,
#app {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
overflow: hidden;
}
40% {
box-shadow: 0 2.5em 0 0;
.loader,
.loader::before,
.loader::after {
width: 2.5em;
height: 2.5em;
border-radius: 50%;
animation: load-animation 1.8s infinite ease-in-out;
animation-fill-mode: both;
}
}
</style>
<div class="loader"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>
.loader {
position: relative;
top: 0;
margin: 80px auto;
font-size: 10px;
color: #406eeb;
text-indent: -9999em;
transform: translateZ(0);
transform: translate(-50%, 0);
animation-delay: -0.16s;
}
.loader::before,
.loader::after {
position: absolute;
top: 0;
content: "";
}
.loader::before {
left: -3.5em;
animation-delay: -0.32s;
}
.loader::after {
left: 3.5em;
}
@keyframes load-animation {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
</style>
<div class="loader"></div>
</div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

View File

@@ -31,15 +31,15 @@ panel:
pureCloseSystemSet: Close System Configs
pureClearCacheAndToLogin: Clear cache and return to login page
pureClearCache: Clear Cache
pureOverallStyle: Overall Style
pureOverallStyleLight: Light
pureOverallStyleLightTip: Set sail freshly and light up the comfortable work interface
pureOverallStyleDark: Dark
pureOverallStyleDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
pureOverallStyleSystem: Auto
pureOverallStyleSystemTip: Synchronize time, the interface naturally responds to morning and dusk
pureThemeMode: Theme Mode
pureThemeModeLight: Light
pureThemeModeLightTip: Set sail freshly and light up the comfortable work interface
pureThemeModeDark: Dark
pureThemeModeDarkTip: Moonlight Overture, indulge in the tranquility and elegance of the night
pureThemeModeSystem: Auto
pureThemeModeSystemTip: Synchronize time, the interface naturally responds to morning and dusk
pureThemeColor: Theme Color
pureLayoutModel: Layout Model
pureMenuLayout: Menu Layout
pureVerticalTip: The menu on the left is familiar and friendly
pureHorizontalTip: Top menu, concise overview
pureMixTip: Mixed menu, flexible
@@ -55,6 +55,9 @@ panel:
pureTagsStyleCardTip: Card tags for efficient browsing
pureTagsStyleChrome: Chrome
pureTagsStyleChromeTip: Chrome style is classic and elegant
pureFullScreenWatermark: FullScreen Watermark
pureEnableWatermark: Watermark
pureWatermarkText: Text
pureInterfaceDisplay: Interface Display
pureGreyModel: Grey Model
pureWeakModel: Weak Model

View File

@@ -31,15 +31,15 @@ panel:
pureCloseSystemSet: 关闭配置
pureClearCacheAndToLogin: 清空缓存并返回登录页
pureClearCache: 清空缓存
pureOverallStyle: 整体风格
pureOverallStyleLight: 浅色
pureOverallStyleLightTip: 清新启航,点亮舒适的工作界面
pureOverallStyleDark: 深色
pureOverallStyleDarkTip: 月光序曲,沉醉于夜的静谧雅致
pureOverallStyleSystem: 自动
pureOverallStyleSystemTip: 同步时光,界面随晨昏自然呼应
pureThemeMode: 主题模式
pureThemeModeLight: 浅色
pureThemeModeLightTip: 清新启航,点亮舒适的工作界面
pureThemeModeDark: 深色
pureThemeModeDarkTip: 月光序曲,沉醉于夜的静谧雅致
pureThemeModeSystem: 自动
pureThemeModeSystemTip: 同步时光,界面随晨昏自然呼应
pureThemeColor: 主题色
pureLayoutModel: 导航模式
pureMenuLayout: 菜单布局
pureVerticalTip: 左侧菜单,亲切熟悉
pureHorizontalTip: 顶部菜单,简洁概览
pureMixTip: 混合菜单,灵活多变
@@ -55,6 +55,9 @@ panel:
pureTagsStyleCardTip: 卡片标签,高效浏览
pureTagsStyleChrome: 谷歌
pureTagsStyleChromeTip: 谷歌风格,经典美观
pureFullScreenWatermark: 全屏水印
pureEnableWatermark: 水印
pureWatermarkText: 文本
pureInterfaceDisplay: 界面显示
pureGreyModel: 灰色模式
pureWeakModel: 色弱模式

View File

@@ -1,6 +1,6 @@
{
"name": "vue-pure-admin",
"version": "6.2.0",
"version": "6.3.0",
"private": true,
"type": "module",
"scripts": {
@@ -54,25 +54,25 @@
"@logicflow/extension": "^1.2.28",
"@pureadmin/descriptions": "^1.2.1",
"@pureadmin/table": "^3.3.0",
"@pureadmin/utils": "^2.6.2",
"@pureadmin/utils": "^2.6.3",
"@vue-flow/background": "^1.3.2",
"@vue-flow/core": "^1.47.0",
"@vueuse/core": "^13.9.0",
"@vue-flow/core": "^1.48.0",
"@vueuse/core": "^14.1.0",
"@vueuse/motion": "^3.0.3",
"@wangeditor/editor": "^5.1.23",
"@wangeditor/editor-for-vue": "^5.1.12",
"@zxcvbn-ts/core": "^3.0.4",
"animate.css": "^4.1.1",
"axios": "^1.12.2",
"axios": "^1.13.2",
"china-area-data": "^5.0.1",
"codemirror": "^5.65.20",
"codemirror-editor-vue3": "^2.8.0",
"cropperjs": "^1.6.2",
"dayjs": "^1.11.18",
"deep-chat": "^2.2.2",
"dayjs": "^1.11.19",
"deep-chat": "^2.3.0",
"echarts": "^6.0.0",
"el-table-infinite-scroll": "^3.0.7",
"element-plus": "^2.11.7",
"el-table-infinite-scroll": "^3.0.8",
"element-plus": "^2.12.0",
"highlight.js": "^11.11.1",
"intro.js": "^7.2.0",
"js-cookie": "^3.0.5",
@@ -83,24 +83,24 @@
"mqtt": "4.3.7",
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"pinia": "^3.0.3",
"pinia": "^3.0.4",
"pinyin-pro": "^3.27.0",
"plus-pro-components": "^0.1.29",
"plus-pro-components": "^0.1.30",
"qrcode": "^1.5.4",
"qs": "^6.14.0",
"responsive-storage": "^2.2.0",
"sortablejs": "^1.15.6",
"swiper": "^12.0.2",
"swiper": "^12.0.3",
"typeit": "^8.8.7",
"v-contextmenu": "^3.2.0",
"v3-infinite-loading": "^1.3.2",
"vditor": "^3.11.2",
"version-rocket": "^1.7.4",
"vue": "^3.5.22",
"vue-i18n": "^11.1.12",
"vue-json-pretty": "^2.5.0",
"vue": "^3.5.25",
"vue-i18n": "^11.2.2",
"vue-json-pretty": "^2.6.0",
"vue-pdf-embed": "^2.1.3",
"vue-router": "^4.5.1",
"vue-router": "^4.6.3",
"vue-tippy": "^6.7.1",
"vue-types": "^6.0.0",
"vue-virtual-scroller": "2.0.0-beta.8",
@@ -109,70 +109,70 @@
"vue3-puzzle-vcode": "^1.1.7",
"vuedraggable": "^4.1.0",
"vxe-table": "4.6.25",
"wavesurfer.js": "^7.11.0",
"wavesurfer.js": "^7.12.1",
"xgplayer": "^3.0.23",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@commitlint/cli": "^20.1.0",
"@commitlint/config-conventional": "^20.0.0",
"@commitlint/types": "^20.0.0",
"@eslint/js": "^9.37.0",
"@faker-js/faker": "^10.0.0",
"@iconify/json": "^2.2.393",
"@commitlint/cli": "^20.2.0",
"@commitlint/config-conventional": "^20.2.0",
"@commitlint/types": "^20.2.0",
"@eslint/js": "^9.39.1",
"@faker-js/faker": "^10.1.0",
"@iconify/json": "^2.2.416",
"@iconify/vue": "4.2.0",
"@intlify/unplugin-vue-i18n": "^11.0.1",
"@tailwindcss/vite": "^4.1.14",
"@types/codemirror": "^5.60.16",
"@tailwindcss/vite": "^4.1.17",
"@types/codemirror": "^5.60.17",
"@types/dagre": "^0.7.53",
"@types/intro.js": "^5.1.5",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20.19.19",
"@types/node": "^20.19.26",
"@types/nprogress": "^0.2.3",
"@types/path-browserify": "^1.0.3",
"@types/qrcode": "^1.5.5",
"@types/qrcode": "^1.5.6",
"@types/qs": "^6.14.0",
"@types/sortablejs": "^1.15.8",
"@vitejs/plugin-vue": "^6.0.1",
"@vitejs/plugin-vue-jsx": "^5.1.1",
"@types/sortablejs": "^1.15.9",
"@vitejs/plugin-vue": "^6.0.2",
"@vitejs/plugin-vue-jsx": "^5.1.2",
"boxen": "^8.0.1",
"code-inspector-plugin": "^1.2.10",
"cssnano": "^7.1.1",
"code-inspector-plugin": "^1.3.0",
"cssnano": "^7.1.2",
"dagre": "^0.8.5",
"eslint": "^9.37.0",
"eslint": "^9.39.1",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-vue": "^10.5.0",
"eslint-plugin-vue": "^10.6.2",
"gradient-string": "^3.0.0",
"husky": "^9.1.7",
"lint-staged": "^16.2.3",
"lint-staged": "^16.2.7",
"postcss": "^8.5.6",
"postcss-html": "^1.8.0",
"postcss-load-config": "^6.0.1",
"postcss-scss": "^4.0.9",
"prettier": "^3.6.2",
"rimraf": "^6.0.1",
"rollup-plugin-visualizer": "^6.0.4",
"sass": "^1.93.2",
"stylelint": "^16.25.0",
"stylelint-config-recess-order": "^7.3.0",
"prettier": "^3.7.4",
"rimraf": "^6.1.2",
"rollup-plugin-visualizer": "^6.0.5",
"sass": "^1.95.1",
"stylelint": "^16.26.1",
"stylelint-config-recess-order": "^7.4.0",
"stylelint-config-recommended-vue": "^1.6.1",
"stylelint-config-standard-scss": "^14.0.0",
"stylelint-prettier": "^5.0.3",
"svgo": "^4.0.0",
"tailwindcss": "^4.1.14",
"tailwindcss": "^4.1.17",
"typescript": "^5.9.3",
"typescript-eslint": "^8.46.0",
"unplugin-icons": "^22.4.2",
"vite": "^7.1.9",
"typescript-eslint": "^8.49.0",
"unplugin-icons": "^22.5.0",
"vite": "^7.2.7",
"vite-plugin-cdn-import": "^1.0.1",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-fake-server": "^2.2.0",
"vite-plugin-fake-server": "^2.2.2",
"vite-plugin-remove-console": "^2.2.0",
"vite-plugin-router-warn": "^1.0.0",
"vite-plugin-router-warn": "^2.0.0",
"vite-svg-loader": "^5.1.0",
"vue-eslint-parser": "^10.2.0",
"vue-tsc": "^3.1.1"
"vue-tsc": "^3.1.8"
},
"engines": {
"node": "^20.19.0 || >=22.13.0",
@@ -206,4 +206,4 @@
"vue3-danmaku"
]
}
}
}

3503
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,5 +1,5 @@
{
"Version": "6.2.0",
"Version": "6.3.0",
"Title": "PureAdmin",
"FixedHeader": true,
"HiddenSideBar": false,
@@ -9,7 +9,7 @@
"Layout": "vertical",
"Theme": "light",
"DarkMode": false,
"OverallStyle": "light",
"ThemeMode": "light",
"Grey": false,
"Weak": false,
"HideTabs": false,

View File

@@ -16,7 +16,6 @@ import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";
import plusEn from "plus-pro-components/es/locale/lang/en";
import plusZhCn from "plus-pro-components/es/locale/lang/zh-cn";
import { ElNotification } from "element-plus";
export default defineComponent({
name: "app",
@@ -55,31 +54,5 @@ export default defineComponent({
);
}
}
// mounted() {
// ElNotification({
// title: "平台最新活动与动态",
// duration: 0,
// customClass: "fullpage-notification",
// // @ts-expect-error
// style: { width: "260px" },
// position: "bottom-right",
// dangerouslyUseHTMLString: true,
// message: `
// <a target='_blank' class='block text-base text-center border mt-4 rounded hover:text-[red]!' href='https://pure-admin.cn/pages/service/#%E6%9C%80%E6%96%B0%E6%B4%BB%E5%8A%A8%E4%B8%8E%E5%8A%A8%E6%80%81'>
// 点我查看
// </a>
// `
// });
// }
});
</script>
<style>
.fullpage-notification > .el-notification__group > .el-notification__closeBtn {
top: 15px;
}
.fullpage-notification > div > h2 {
color: red;
font-size: 18px;
}
</style>

View File

@@ -10,8 +10,10 @@ export interface RippleOptions {
circle?: boolean;
}
export interface RippleDirectiveBinding
extends Omit<DirectiveBinding, "modifiers" | "value"> {
export interface RippleDirectiveBinding extends Omit<
DirectiveBinding,
"modifiers" | "value"
> {
value?: boolean | { class: string };
modifiers: {
center?: boolean;

View File

@@ -8,7 +8,7 @@ const TITLE = getConfig("Title");
<footer
class="layout-footer text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
>
Copyright © 2020-2025
Copyright © 2020-present
<a
class="hover:text-primary!"
href="https://github.com/pure-admin"
@@ -16,23 +16,12 @@ const TITLE = getConfig("Title");
>
&nbsp;{{ TITLE }}
</a>
<!-- <div class="ml-8">
<span>赞助商</span>
<a
class="hover:text-primary"
href="https://ai-tools.cn/resume/start"
target="_blank"
>
二猫 AI 简历
</a>
</div> -->
</footer>
</template>
<style lang="scss" scoped>
.layout-footer {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
width: 100%;

View File

@@ -9,6 +9,14 @@ import {
onUnmounted,
onBeforeMount
} from "vue";
import {
useDark,
debounce,
isNumber,
useGlobal,
isAllEmpty,
useWatermark
} from "@pureadmin/utils";
import { useI18n } from "vue-i18n";
import { emitter } from "@/utils/mitt";
import LayPanel from "../lay-panel/index.vue";
@@ -17,7 +25,6 @@ import { useAppStoreHook } from "@/store/modules/app";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import Segmented, { type OptionsType } from "@/components/ReSegmented";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
import Check from "~icons/ep/check";
import LeftArrow from "~icons/ri/arrow-left-s-line?width=20&height=20";
@@ -27,8 +34,9 @@ import DarkIcon from "@/assets/svg/dark.svg?component";
import SystemIcon from "@/assets/svg/system.svg?component";
const { t } = useI18n();
const { device } = useNav();
const { isDark } = useDark();
const { device, title } = useNav();
const { setWatermark, clear } = useWatermark();
const { $storage } = useGlobal<GlobalPropertiesApi>();
const mixRef = ref();
@@ -37,7 +45,7 @@ const horizontalRef = ref();
const {
dataTheme,
overallStyle,
themeMode,
layoutTheme,
themeColors,
toggleClass,
@@ -50,7 +58,7 @@ if (unref(layoutTheme)) {
const layout = unref(layoutTheme).layout;
const theme = unref(layoutTheme).theme;
document.documentElement.setAttribute("data-theme", theme);
setLayoutModel(layout);
setMenuLayout(layout);
}
/** 默认灵动模式 */
@@ -58,6 +66,12 @@ const markValue = ref($storage.configure?.showModel ?? "smart");
const logoVal = ref($storage.configure?.showLogo ?? true);
/** WIP... */
const watermarkConfigs = reactive({
enable: false,
text: null
});
const settings = reactive({
greyVal: $storage.configure.grey,
weakVal: $storage.configure.weak,
@@ -129,6 +143,21 @@ function onChange({ option }) {
emitter.emit("tagViewsShowModel", value);
}
function onWatermarkSwitchChange(value) {
const text = isAllEmpty(watermarkConfigs.text)
? title.value
: watermarkConfigs.text;
if (value) {
setWatermark(text);
} else {
clear();
}
}
function onWatermarkInputChange(value) {
setWatermark(value);
}
/** 侧边栏Logo */
function logoChange() {
unref(logoVal)
@@ -195,24 +224,24 @@ const pClass = computed(() => {
const themeOptions = computed<Array<OptionsType>>(() => {
return [
{
label: t("panel.pureOverallStyleLight"),
label: t("panel.pureThemeModeLight"),
icon: DayIcon,
theme: "light",
tip: t("panel.pureOverallStyleLightTip"),
tip: t("panel.pureThemeModeLightTip"),
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
},
{
label: t("panel.pureOverallStyleDark"),
label: t("panel.pureThemeModeDark"),
icon: DarkIcon,
theme: "dark",
tip: t("panel.pureOverallStyleDarkTip"),
tip: t("panel.pureThemeModeDarkTip"),
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
},
{
label: t("panel.pureOverallStyleSystem"),
label: t("panel.pureThemeModeSystem"),
icon: SystemIcon,
theme: "system",
tip: t("panel.pureOverallStyleSystemTip"),
tip: t("panel.pureThemeModeSystemTip"),
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
}
];
@@ -238,8 +267,8 @@ const markOptions = computed<Array<OptionsType>>(() => {
];
});
/** 设置导航模式 */
function setLayoutModel(layout: string) {
/** 设置菜单布局 */
function setMenuLayout(layout: string) {
layoutTheme.value.layout = layout;
window.document.body.setAttribute("layout", layout);
$storage.layout = {
@@ -249,7 +278,7 @@ function setLayoutModel(layout: string) {
sidebarStatus: $storage.layout?.sidebarStatus,
epThemeColor: $storage.layout?.epThemeColor,
themeColor: $storage.layout?.themeColor,
overallStyle: $storage.layout?.overallStyle
themeMode: $storage.layout?.themeMode
};
useAppStoreHook().setLayout(layout);
}
@@ -276,15 +305,15 @@ watch($storage, ({ layout }) => {
const mediaQueryList = window.matchMedia("(prefers-color-scheme: dark)");
/** 根据操作系统主题设置平台整体风格 */
/** 根据操作系统主题设置平台主题模式 */
function updateTheme() {
if (overallStyle.value !== "system") return;
if (themeMode.value !== "system") return;
if (mediaQueryList.matches) {
dataTheme.value = true;
} else {
dataTheme.value = false;
}
dataThemeChange(overallStyle.value);
dataThemeChange(themeMode.value);
}
function removeMatchMedia() {
@@ -317,18 +346,18 @@ onUnmounted(() => removeMatchMedia);
<template>
<LayPanel>
<div class="p-5">
<p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
<p :class="pClass">{{ t("panel.pureThemeMode") }}</p>
<Segmented
resize
class="select-none"
:modelValue="overallStyle === 'system' ? 2 : dataTheme ? 1 : 0"
:modelValue="themeMode === 'system' ? 2 : dataTheme ? 1 : 0"
:options="themeOptions"
@change="
theme => {
theme.index === 1 && theme.index !== 2
? (dataTheme = true)
: (dataTheme = false);
overallStyle = theme.option.theme;
themeMode = theme.option.theme;
dataThemeChange(theme.option.theme);
theme.index === 2 && watchSystemThemeChange();
}
@@ -354,7 +383,7 @@ onUnmounted(() => removeMatchMedia);
</li>
</ul>
<p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureMenuLayout") }}</p>
<ul class="pure-theme">
<li
ref="verticalRef"
@@ -363,7 +392,7 @@ onUnmounted(() => removeMatchMedia);
zIndex: 41000
}"
:class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
@click="setLayoutModel('vertical')"
@click="setMenuLayout('vertical')"
>
<div />
<div />
@@ -376,7 +405,7 @@ onUnmounted(() => removeMatchMedia);
zIndex: 41000
}"
:class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
@click="setLayoutModel('horizontal')"
@click="setMenuLayout('horizontal')"
>
<div />
<div />
@@ -389,7 +418,7 @@ onUnmounted(() => removeMatchMedia);
zIndex: 41000
}"
:class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
@click="setLayoutModel('mix')"
@click="setMenuLayout('mix')"
>
<div />
<div />
@@ -448,29 +477,38 @@ onUnmounted(() => removeMatchMedia);
/>
<p class="mt-5! font-medium text-sm dark:text-white">
{{ t("panel.pureInterfaceDisplay") }}
{{ t("panel.pureFullScreenWatermark") }}
</p>
<ul class="setting">
<li>
<span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
<span class="dark:text-white">
{{ t("panel.pureEnableWatermark") }}
</span>
<el-switch
v-model="settings.greyVal"
v-model="watermarkConfigs.enable"
inline-prompt
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="greyChange"
@change="onWatermarkSwitchChange"
/>
</li>
<li>
<span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
<el-switch
v-model="settings.weakVal"
inline-prompt
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="weekChange"
<span class="dark:text-white">
{{ t("panel.pureWatermarkText") }}
</span>
<el-input
v-model="watermarkConfigs.text"
class="w-[100px]!"
:placeholder="title"
@input="onWatermarkInputChange"
/>
</li>
</ul>
<p class="mt-5! font-medium text-sm dark:text-white">
{{ t("panel.pureInterfaceDisplay") }}
</p>
<ul class="setting">
<li>
<span class="dark:text-white">{{ t("panel.pureHiddenTags") }}</span>
<el-switch
@@ -491,6 +529,18 @@ onUnmounted(() => removeMatchMedia);
@change="hideFooterChange"
/>
</li>
<li>
<span class="dark:text-white">
{{ t("panel.pureMultiTagsCache") }}
</span>
<el-switch
v-model="settings.multiTagsCache"
inline-prompt
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="multiTagsCacheChange"
/>
</li>
<li>
<span class="dark:text-white">Logo</span>
<el-switch
@@ -504,15 +554,23 @@ onUnmounted(() => removeMatchMedia);
/>
</li>
<li>
<span class="dark:text-white">
{{ t("panel.pureMultiTagsCache") }}
</span>
<span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
<el-switch
v-model="settings.multiTagsCache"
v-model="settings.greyVal"
inline-prompt
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="multiTagsCacheChange"
@change="greyChange"
/>
</li>
<li>
<span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
<el-switch
v-model="settings.weakVal"
inline-prompt
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="weekChange"
/>
</li>
</ul>

View File

@@ -321,10 +321,9 @@
.chrome-tab-divider {
position: absolute;
right: 7px;
left: 7px;
width: 1px;
height: 14px;
background-color: #2b2d2f;
}
&:hover {

View File

@@ -618,6 +618,10 @@ onBeforeUnmount(() => {
/>
</template>
<div v-else class="chrome-tab">
<span
v-if="index !== 0 && index !== activeIndex"
class="chrome-tab-divider bg-[#e2e2e2] dark:bg-[#2d2d2d]"
/>
<div class="chrome-tab__bg">
<TagChrome />
</div>
@@ -631,7 +635,6 @@ onBeforeUnmount(() => {
>
<IconifyIconOffline :icon="Close" />
</span>
<span class="chrome-tab-divider" />
</div>
</div>
</div>

View File

@@ -33,7 +33,7 @@ export function useDataThemeChange() {
const { $storage } = useGlobal<GlobalPropertiesApi>();
const dataTheme = ref<boolean>($storage?.layout?.darkMode);
const overallStyle = ref<string>($storage?.layout?.overallStyle);
const themeMode = ref<string>($storage?.layout?.themeMode);
const body = document.documentElement as HTMLElement;
function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
@@ -59,7 +59,7 @@ export function useDataThemeChange() {
sidebarStatus: $storage.layout?.sidebarStatus,
epThemeColor: $storage.layout?.epThemeColor,
themeColor: isClick ? theme : storageThemeColor,
overallStyle: overallStyle.value
themeMode: themeMode.value
};
if (theme === "default" || theme === "light") {
@@ -89,9 +89,9 @@ export function useDataThemeChange() {
}
};
/** 浅色、深色整体风格切换 */
function dataThemeChange(overall?: string) {
overallStyle.value = overall;
/** 浅色、深色主题模式切换 */
function dataThemeChange(mode?: string) {
themeMode.value = mode;
if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
setLayoutThemeColor("default", false);
} else {
@@ -126,7 +126,7 @@ export function useDataThemeChange() {
return {
body,
dataTheme,
overallStyle,
themeMode,
layoutTheme,
themeColors,
onReset,

View File

@@ -29,7 +29,7 @@ export function useLayout() {
sidebarStatus: $config?.SidebarStatus ?? true,
epThemeColor: $config?.EpThemeColor ?? "#409EFF",
themeColor: $config?.Theme ?? "light",
overallStyle: $config?.OverallStyle ?? "light"
themeMode: $config?.ThemeMode ?? "light"
};
}
/** 灰色模式、色弱模式、隐藏标签页 */

View File

@@ -67,16 +67,16 @@ const set: setType = reactive({
})
});
function setTheme(layoutModel: string) {
window.document.body.setAttribute("layout", layoutModel);
function setTheme(menuLayout: string) {
window.document.body.setAttribute("layout", menuLayout);
$storage.layout = {
layout: `${layoutModel}`,
layout: `${menuLayout}`,
theme: $storage.layout?.theme,
darkMode: $storage.layout?.darkMode,
sidebarStatus: $storage.layout?.sidebarStatus,
epThemeColor: $storage.layout?.epThemeColor,
themeColor: $storage.layout?.themeColor,
overallStyle: $storage.layout?.overallStyle
themeMode: $storage.layout?.themeMode
};
}
@@ -123,7 +123,7 @@ onMounted(() => {
});
onBeforeMount(() => {
useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
useDataThemeChange().dataThemeChange($storage.layout?.themeMode);
});
const LayHeader = defineComponent({

View File

@@ -18,7 +18,7 @@ export const useAppStore = defineStore("pure-app", {
withoutAnimation: false,
isClickCollapse: false
},
// 这里的layout用于监听容器拖拉后恢复对应的导航模式
// 这里的layout用于监听容器拖拉后恢复对应的菜单布局
layout:
storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}layout`

View File

@@ -21,7 +21,7 @@ export const useEpThemeStore = defineStore("pure-epTheme", {
getEpThemeColor(state) {
return state.epThemeColor;
},
/** 用于mix导航模式下hamburger-svg的fill属性 */
/** 用于mix菜单布局下hamburger-svg的fill属性 */
fill(state) {
if (state.epTheme === "light") {
return "#409eff";

View File

@@ -231,7 +231,6 @@
.is-active.submenu-title-noDropdown.outer-most > * {
z-index: 1;
color: #fff;
background: transparent !important;
}
.is-active.submenu-title-noDropdown.outer-most::before {

View File

@@ -65,8 +65,7 @@ interface LocalForageDbMethodsOptional {
}
interface LocalForageDriverDbMethods
extends LocalForageDbMethodsCore,
LocalForageDriverMethodsOptional {}
extends LocalForageDbMethodsCore, LocalForageDriverMethodsOptional {}
interface LocalForageDriverSupportFunc {
(): Promise<boolean>;
@@ -94,8 +93,7 @@ interface LocalForageSerializer {
}
interface LocalForageDbMethods
extends LocalForageDbMethodsCore,
LocalForageDbMethodsOptional {}
extends LocalForageDbMethodsCore, LocalForageDbMethodsOptional {}
export interface LocalForage extends LocalForageDbMethods {
LOCALSTORAGE: string;

View File

@@ -19,8 +19,8 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
darkMode: config.DarkMode ?? false,
sidebarStatus: config.SidebarStatus ?? true,
epThemeColor: config.EpThemeColor ?? "#409EFF",
themeColor: config.Theme ?? "light", // 主题色对应系统配置中的主题色与theme不同的是它不会受到浅色、深色整体风格切换的影响,只会在手动点击主题色时改变)
overallStyle: config.OverallStyle ?? "light" // 整体风格浅色light、深色dark、自动system
themeColor: config.Theme ?? "light", // 主题色对应系统配置中的主题色与theme不同的是它不会受到浅色、深色主题模式切换的影响,只会在手动点击主题色时改变)
themeMode: config.ThemeMode ?? "light" // 主题模式浅色light、深色dark、自动system
},
// 系统配置-界面显示
configure: Storage.getData("configure", nameSpace) ?? {

View File

@@ -25,7 +25,7 @@ const router = useRouter();
const isOpen = ref(deviceDetection() ? false : true);
const { $storage } = useGlobal<GlobalPropertiesApi>();
onBeforeMount(() => {
useDataThemeChange().dataThemeChange($storage.layout?.overallStyle);
useDataThemeChange().dataThemeChange($storage.layout?.themeMode);
});
const userInfo = ref({

View File

@@ -52,8 +52,8 @@ const currentPage = computed(() => {
const { t } = useI18n();
const { initStorage } = useLayout();
initStorage();
const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
dataThemeChange(overallStyle.value);
const { dataTheme, themeMode, dataThemeChange } = useDataThemeChange();
dataThemeChange(themeMode.value);
const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
const { locale, translationCh, translationEn } = useTranslationLang();
@@ -336,9 +336,9 @@ watch(loginDay, value => {
</div>
</div>
<div
class="w-full flex-c flex-wrap absolute bottom-3 text-sm text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
class="w-full flex-c absolute bottom-3 text-sm text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
>
Copyright © 2020-2025
Copyright © 2020-present
<a
class="hover:text-primary!"
href="https://github.com/pure-admin"
@@ -346,16 +346,6 @@ watch(loginDay, value => {
>
&nbsp;{{ title }}
</a>
<!-- <div class="ml-8">
<span>赞助商:</span>
<a
class="hover:text-primary"
href="https://ai-tools.cn/resume/start"
target="_blank"
>
二猫 AI 简历
</a>
</div> -->
</div>
</div>
</template>

6
types/global.d.ts vendored
View File

@@ -93,7 +93,7 @@ declare global {
Layout?: string;
Theme?: string;
DarkMode?: boolean;
OverallStyle?: string;
ThemeMode?: string;
Grey?: boolean;
Weak?: boolean;
HideTabs?: boolean;
@@ -140,7 +140,7 @@ declare global {
sidebarStatus?: boolean;
epThemeColor?: string;
themeColor?: string;
overallStyle?: string;
themeMode?: string;
showLogo?: boolean;
showModel?: string;
menuSearchHistory?: number;
@@ -169,7 +169,7 @@ declare global {
sidebarStatus?: boolean;
epThemeColor?: string;
themeColor?: string;
overallStyle?: string;
themeMode?: string;
};
configure: {
grey?: boolean;

View File

@@ -59,4 +59,4 @@ export default ({ mode }: ConfigEnv): UserConfigExport => {
__APP_INFO__: JSON.stringify(__APP_INFO__)
}
};
};
};