Compare commits

..

76 Commits
v5.9.0 ... i18n

Author SHA1 Message Date
xiaoxian521
2395bb11b5 release: update 6.2.0 2025-10-30 09:50:04 +08:00
xiaoxian521
00256f7843 release: update 6.1.0 2025-08-07 15:50:52 +08:00
xiaoxian521
0ac157201e docs: update README 2025-05-27 18:56:12 +08:00
xiaoxian521
1bc940500c release: update 6.0.0 2025-04-25 09:51:57 +08:00
xiaoxian521
c50bb9981b release: update 5.9.0 2024-12-15 10:47:55 +08:00
xiaoxian521
a4f9251789 chore: update 2024-08-20 16:06:46 +08:00
xiaoxian521
3ac71be372 release: update 5.8.0 2024-08-20 12:59:22 +08:00
xiaoxian521
8c01eeab7f chore: 同步完整版代码 2024-07-03 12:07:44 +08:00
xiaoxian521
fa1b397c33 chore(deps): update 2024-06-14 14:23:57 +08:00
xiaoxian521
3ebf0bda2f chore: 同步完整版代码 2024-06-13 12:26:24 +08:00
xiaoxian521
31a9a10d1b docs: update 2024-06-12 07:47:20 +08:00
xiaoxian521
1a24c56d92 release: update 5.7.0 2024-06-07 09:55:20 +08:00
xiaoxian521
c4ee2e1235 chore: 同步完整版代码 2024-05-28 14:17:28 +08:00
xiaoxian521
df842d93e6 release: update 5.6.0 2024-05-14 12:21:31 +08:00
xiaoxian521
67926cf915 release: update 5.5.0 2024-05-10 15:19:30 +08:00
xiaoxian521
f3e3d60e22 chore: 同步完整版代码 2024-04-25 12:34:18 +08:00
xiaoxian521
b4893be543 chore: 同步完整版代码 2024-04-23 10:56:16 +08:00
xiaoxian521
a8953d009f release: update 5.4.0 2024-04-23 10:50:06 +08:00
xiaoxian521
b76600a981 release: update 5.3.0 2024-03-29 00:55:40 +08:00
xiaoxian521
b20157fa2e chore: 同步完整版代码 2024-03-23 09:05:11 +08:00
xiaoming
a5752a0493 Merge pull request #20 from pure-admin/release/i18n5.2.0
release: update `5.2.0`
2024-03-22 23:40:51 +08:00
xiaoxian521
9d1f3089d0 chore: update 2024-03-22 23:36:07 +08:00
xiaoxian521
b058952e45 chore: update 2024-03-22 23:35:27 +08:00
xiaoxian521
b4c80166be release: update 5.2.0 2024-03-22 23:16:15 +08:00
xiaoming
5a0ce44307 release: update 5.1.0
release: update `5.1.0`
2024-03-10 00:10:55 +08:00
xiaoxian521
12a5adb842 chore: update 2024-03-10 00:07:10 +08:00
xiaoxian521
2cebae520c chore: 测试完毕 2024-03-10 00:02:16 +08:00
xiaoxian521
77d3923439 chore: Files changed完全检查 2024-03-09 23:08:41 +08:00
xiaoxian521
c819ef1ff3 chore: 第二次同步 2024-03-09 23:06:33 +08:00
xiaoxian521
70772864ac release: update 5.1.0 2024-03-09 22:45:04 +08:00
xiaoxian521
d543b57e34 chore: 同步完整版代码 2023-06-26 18:15:34 +08:00
xiaoxian521
a9ba7cbe61 release: update 4.5.0 2023-06-26 12:49:06 +08:00
xiaoxian521
96a39b3974 chore: 同步完整版代码 2023-06-19 12:11:06 +08:00
xiaoxian521
496feeb005 chore: 同步完整版代码 2023-06-15 18:44:10 +08:00
xiaoxian521
97f0e1531c release: update 4.4.0 2023-06-14 17:14:33 +08:00
xiaoxian521
e0f28acdc4 chore: 同步完整版代码 2023-06-07 11:43:41 +08:00
xiaoxian521
9b9ff10be1 feat: 添加vscode-docker插件 2023-06-05 23:04:24 +08:00
xiaoxian521
94e2943608 fix: 修复国际化切换到英文模式刷新会回到中文模式 2023-06-05 19:39:23 +08:00
xiaoxian521
d19e7849cc release: update 4.3.0 2023-06-05 17:33:41 +08:00
xiaoxian521
91f915462a release: update 4.1.0 2023-05-12 14:24:15 +08:00
xiaoxian521
1038f16783 perf: export addPathMatch utils 2023-03-07 21:05:23 +08:00
xiaoxian521
dedde7d47f chore: update propTypes 2023-03-01 20:07:26 +08:00
xiaoxian521
f220db4eed chore: 同步完整版代码 2023-03-01 00:48:36 +08:00
xiaoxian521
b043cf76f5 fix: 调整登录页initRouter方法顺序,防止登录页热更新报错 2023-02-12 19:02:55 +08:00
xiaoxian521
ca76b12cc6 chore: update link 2023-02-08 20:18:46 +08:00
xiaoxian521
1508afa7c3 release: update 3.9.7 2022-12-26 14:56:02 +08:00
xiaoxian521
f2cf1d0af7 chore: update 2022-12-23 18:43:40 +08:00
xiaoxian521
14f1e8cc97 docs: update README.md 2022-12-21 11:55:49 +08:00
xiaoxian521
cdf4abeb58 release: update 3.9.6 2022-12-19 14:01:20 +08:00
xiaoxian521
6faffacf77 chore: update @pureadmin/theme latest 2022-12-15 12:51:18 +08:00
xiaoxian521
806f56d80c release: update 3.9.5 2022-12-13 14:48:23 +08:00
xiaoxian521
0b8e10f964 fix: 修复暗黑主题样式问题 2022-12-09 20:38:18 +08:00
xiaoxian521
d4c2e139a3 chore: update 2022-12-09 12:52:28 +08:00
xiaoxian521
17ec8c6af4 fix: 修复动态路由 rank 问题 2022-12-07 17:26:40 +08:00
xiaoxian521
3075dc61f7 perf: 优化路由 rank,当rank 不存在时,根据顺序自动创建,首页路由永远在第一位 2022-12-06 21:22:12 +08:00
xiaoxian521
23d9cdaf81 release: update 3.9.4 2022-12-05 14:33:37 +08:00
xiaoxian521
1154c0b9f8 release: update 3.9.3 2022-12-04 17:58:02 +08:00
xiaoxian521
ab772081ec release: update 3.9.2 2022-12-03 15:27:44 +08:00
xiaoxian521
17d1b98bdf release: update 3.9.1 2022-12-02 20:19:33 +08:00
xiaoxian521
fba17f188d perf: 优化 initRouter ,兼容 sso 场景 2022-12-01 16:06:05 +08:00
xiaoxian521
5cb19eec75 feat: 添加 CachingAsyncRoutes 是否开启动态路由缓存本地,默认 true 2022-12-01 11:46:18 +08:00
xiaoxian521
cac6d8071f chore: update 2022-11-30 18:22:48 +08:00
xiaoxian521
12a003a430 release: update 3.9.0 2022-11-30 16:58:56 +08:00
xiaoxian521
d6af3e9d33 release: update 3.8.7 2022-11-28 01:47:28 +08:00
xiaoxian521
28267cf22e docs: update 2022-11-27 18:08:48 +08:00
xiaoxian521
2e6733cbc7 release: update 3.8.6 2022-11-27 17:50:16 +08:00
xiaoxian521
2d56e471cb perf: 无需安装 @vue/runtime-core,兼容 element-plus 的组件 volar 提示 2022-11-27 10:00:30 +08:00
xiaoxian521
24b33b5401 release: update 3.8.5 2022-11-27 01:21:49 +08:00
xiaoxian521
6dc29c134f chore: 同步完整版代码 2022-11-11 12:07:08 +08:00
xiaoxian521
12973dcf5b release: update 3.6.4 2022-11-10 12:34:03 +08:00
xiaoxian521
d0d02d7128 perf: 优化路由守卫 2022-11-08 18:18:42 +08:00
xiaoxian521
9839746b00 feat: 菜单图标 icon 支持使用在线图标 2022-11-08 12:13:19 +08:00
xiaoxian521
3069785575 perf: 优化代码 2022-11-08 01:24:00 +08:00
xiaoxian521
0bc8a4e9df release: update 3.6.3 2022-11-01 16:41:31 +08:00
xiaoxian521
ea28240d56 perf: 优化代码 2022-11-01 16:40:32 +08:00
xiaoxian521
758a84f5c6 docs: update 2022-10-27 18:03:51 +08:00
106 changed files with 4792 additions and 3437 deletions

2
.nvmrc
View File

@@ -1 +1 @@
v22.12.0
v22.20.0

View File

@@ -9,6 +9,7 @@
"bradlc.vscode-tailwindcss",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"lokalise.i18n-ally",
"redhat.vscode-yaml",
"csstools.postcss",
"mikestead.dotenv",

14
.vscode/settings.json vendored
View File

@@ -1,4 +1,5 @@
{
"tailwindCSS.experimental.configFile": "src/style/tailwind.css",
"editor.formatOnType": true,
"editor.formatOnSave": true,
"[vue]": {
@@ -27,6 +28,19 @@
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
},
"i18n-ally.localesPaths": "locales",
"i18n-ally.keystyle": "nested",
"i18n-ally.sortKeys": true,
"i18n-ally.namespace": true,
"i18n-ally.enabledParsers": [
"yaml",
"js"
],
"i18n-ally.sourceLanguage": "en",
"i18n-ally.displayLanguage": "zh-CN",
"i18n-ally.enabledFrameworks": [
"vue"
],
"iconify.excludes": [
"el"
],

View File

@@ -1,4 +1,4 @@
<h1>vue-pure-admin Lite Editionno i18n version</h1>
<h1>vue-pure-admin Lite Editioni18n version</h1>
[![license](https://img.shields.io/github/license/pure-admin/vue-pure-admin.svg)](LICENSE)
@@ -8,14 +8,6 @@
The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
## `js` version
[Click me to view js version](https://pure-admin.cn/pages/js/)
## `max` version
[Click me to view the max version](https://pure-admin.cn/pages/max/)
## Supporting video
[Click me to view UI design](https://www.bilibili.com/video/BV17g411T7rq)
@@ -26,7 +18,7 @@ The simplified version is based on the shelf extracted from [vue-pure-admin](htt
[Click me to view vue-pure-admin documentation](https://pure-admin.cn/)
[Click me to view @pureadmin/utils documentation](https://pure-admin-utils.netlify.app)
## Quality service, software outsourcing, sponsorship support
## Premium service
[Click me to view details](https://pure-admin.cn/pages/service/)

View File

@@ -1,4 +1,4 @@
<h1>vue-pure-admin精简版国际化版本)</h1>
<h1>vue-pure-admin精简版国际化版本</h1>
[![license](https://img.shields.io/github/license/pure-admin/vue-pure-admin.svg)](LICENSE)
@@ -10,15 +10,7 @@
## 版本选择
当前是国际化版本,如果您需要国际化版本 [请点击](https://github.com/pure-admin/pure-admin-thin/tree/i18n)
## `js` 版本
[点我查看 js 版本](https://pure-admin.cn/pages/js/)
## `max` 版本
[点我查看 max 版本](https://pure-admin.cn/pages/max/)
当前是国际化版本,如果您需要国际化版本 [请点击](https://github.com/pure-admin/pure-admin-thin)
## 配套视频
@@ -30,7 +22,7 @@
[点我查看 vue-pure-admin 文档](https://pure-admin.cn/)
[点我查看 @pureadmin/utils 文档](https://pure-admin-utils.netlify.app)
## 优质服务、软件外包、赞助支持
## 高级服务
[点我查看详情](https://pure-admin.cn/pages/service/)

View File

@@ -19,6 +19,11 @@ export const cdn = importToCDN({
var: "VueRouter",
path: "vue-router.global.min.js"
},
{
name: "vue-i18n",
var: "VueI18n",
path: "vue-i18n.runtime.global.prod.min.js"
},
// 项目中没有直接安装vue-demi但是pinia用到了所以需要在引入pinia前引入vue-demihttps://github.com/vuejs/pinia/blob/v2/packages/pinia/package.json#L77
{
name: "vue-demi",

View File

@@ -10,6 +10,7 @@ const include = [
"dayjs",
"axios",
"pinia",
"vue-i18n",
"vue-types",
"js-cookie",
"vue-tippy",
@@ -22,8 +23,8 @@ const include = [
/**
* 在预构建中强制排除的依赖项
* 温馨提示:所有以 `@iconify-icons/` 开头引入的的本地图标模块,都应该加入到下面的 `exclude` 里,因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入,不需要预构建,直接让浏览器加载就好
* 温馨提示:平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入,不需要预构建,直接让浏览器加载就好
*/
const exclude = ["@iconify-icons/ep", "@iconify-icons/ri"];
const exclude = ["@iconify/json"];
export { include, exclude };

View File

@@ -1,13 +1,17 @@
import { cdn } from "./cdn";
import vue from "@vitejs/plugin-vue";
import { pathResolve } from "./utils";
import { viteBuildInfo } from "./info";
import svgLoader from "vite-svg-loader";
import Icons from "unplugin-icons/vite";
import type { PluginOption } from "vite";
import vueJsx from "@vitejs/plugin-vue-jsx";
import tailwindcss from "@tailwindcss/vite";
import { configCompressPlugin } from "./compress";
import removeNoMatch from "vite-plugin-router-warn";
import { visualizer } from "rollup-plugin-visualizer";
import removeConsole from "vite-plugin-remove-console";
import VueI18nPlugin from "@intlify/unplugin-vue-i18n/vite";
import { codeInspectorPlugin } from "code-inspector-plugin";
import { vitePluginFakeServer } from "vite-plugin-fake-server";
@@ -17,9 +21,13 @@ export function getPluginsList(
): PluginOption[] {
const lifecycle = process.env.npm_lifecycle_event;
return [
tailwindcss(),
vue(),
// jsx、tsx语法支持
vueJsx(),
VueI18nPlugin({
include: [pathResolve("../locales/**")]
}),
/**
* 在页面上按住组合键时,鼠标在页面移动即会在 DOM 上出现遮罩层并显示相关信息,点击一下将自动打开 IDE 并将光标定位到元素对应的代码位置
* Mac 默认组合键 Option + Shift
@@ -46,6 +54,11 @@ export function getPluginsList(
}),
// svg组件化支持
svgLoader(),
// 自动按需加载图标
Icons({
compiler: "vue3",
scale: 1
}),
VITE_CDN ? cdn : null,
configCompressPlugin(VITE_COMPRESSION),
// 线上环境删除console

View File

@@ -1,26 +1,25 @@
import js from "@eslint/js";
import tseslint from "typescript-eslint";
import pluginVue from "eslint-plugin-vue";
import * as parserVue from "vue-eslint-parser";
import configPrettier from "eslint-config-prettier";
import pluginPrettier from "eslint-plugin-prettier";
import { defineFlatConfig } from "eslint-define-config";
import * as parserTypeScript from "@typescript-eslint/parser";
import pluginTypeScript from "@typescript-eslint/eslint-plugin";
import { defineConfig, globalIgnores } from "eslint/config";
export default defineFlatConfig([
{
...js.configs.recommended,
ignores: [
export default defineConfig([
globalIgnores([
"**/.*",
"dist/*",
"*.d.ts",
"public/*",
"src/assets/**",
"src/**/iconfont/**"
],
]),
{
...js.configs.recommended,
languageOptions: {
globals: {
// index.d.ts
// types/index.d.ts
RefType: "readonly",
EmitType: "readonly",
TargetContext: "readonly",
@@ -73,21 +72,10 @@ export default defineFlatConfig([
]
}
},
{
...tseslint.config({
extends: [...tseslint.configs.recommended],
files: ["**/*.?([cm])ts", "**/*.?([cm])tsx"],
languageOptions: {
parser: parserTypeScript,
parserOptions: {
sourceType: "module",
warnOnUnsupportedTypeScriptVersion: false
}
},
plugins: {
"@typescript-eslint": pluginTypeScript
},
rules: {
...pluginTypeScript.configs.strict.rules,
"@typescript-eslint/ban-types": "off",
"@typescript-eslint/no-redeclare": "error",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/no-explicit-any": "off",
@@ -114,20 +102,20 @@ export default defineFlatConfig([
}
]
}
},
}),
{
files: ["**/*.d.ts"],
rules: {
"eslint-comments/no-unlimited-disable": "off",
"import/no-duplicates": "off",
"no-restricted-syntax": "off",
"unused-imports/no-unused-vars": "off"
}
},
{
files: ["**/*.?([cm])js"],
rules: {
"@typescript-eslint/no-require-imports": "off",
"@typescript-eslint/no-var-requires": "off"
"@typescript-eslint/no-require-imports": "off"
}
},
{
@@ -148,18 +136,19 @@ export default defineFlatConfig([
jsx: true
},
extraFileExtensions: [".vue"],
parser: "@typescript-eslint/parser",
parser: tseslint.parser,
sourceType: "module"
}
},
plugins: {
"@typescript-eslint": tseslint.plugin,
vue: pluginVue
},
processor: pluginVue.processors[".vue"],
rules: {
...pluginVue.configs.base.rules,
...pluginVue.configs["vue3-essential"].rules,
...pluginVue.configs["vue3-recommended"].rules,
...pluginVue.configs.essential.rules,
...pluginVue.configs.recommended.rules,
"no-undef": "off",
"no-unused-vars": "off",
"vue/no-v-html": "off",

View File

@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@@ -10,9 +10,6 @@
/>
<title>pure-admin-thin</title>
<link rel="icon" href="/favicon.ico" />
<script>
window.process = {};
</script>
</head>
<body>

91
locales/en.yaml Normal file
View File

@@ -0,0 +1,91 @@
buttons:
pureLoginOut: LoginOut
pureLogin: Login
pureOpenSystemSet: Open System Configs
pureReload: Reload
pureCloseCurrentTab: Close CurrentTab
pureCloseLeftTabs: Close LeftTabs
pureCloseRightTabs: Close RightTabs
pureCloseOtherTabs: Close OtherTabs
pureCloseAllTabs: Close AllTabs
pureContentFullScreen: Content FullScreen
pureContentExitFullScreen: Content ExitFullScreen
pureClickCollapse: Collapse
pureClickExpand: Expand
pureConfirm: Confirm
pureSwitch: Switch
pureClose: Close
pureBackTop: BackTop
pureOpenText: Open
pureCloseText: Close
search:
pureTotal: Total
pureHistory: History
pureCollect: Collect
pureDragSort: Drag Sort
pureEmpty: Empty
purePlaceholder: Search Menu
panel:
pureSystemSet: System Configs
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
pureThemeColor: Theme Color
pureLayoutModel: Layout Model
pureVerticalTip: The menu on the left is familiar and friendly
pureHorizontalTip: Top menu, concise overview
pureMixTip: Mixed menu, flexible
pureStretch: Stretch Page
pureStretchFixed: Fixed
pureStretchFixedTip: Compact pages make it easy to find the information you need
pureStretchCustom: Custom
pureStretchCustomTip: Minimum 1280, maximum 1600
pureTagsStyle: Tags Style
pureTagsStyleSmart: Smart
pureTagsStyleSmartTip: Smart tags add fun and brilliance
pureTagsStyleCard: Card
pureTagsStyleCardTip: Card tags for efficient browsing
pureTagsStyleChrome: Chrome
pureTagsStyleChromeTip: Chrome style is classic and elegant
pureInterfaceDisplay: Interface Display
pureGreyModel: Grey Model
pureWeakModel: Weak Model
pureHiddenTags: Hidden Tags
pureHiddenFooter: Hidden Footer
pureMultiTagsCache: MultiTags Cache
menus:
pureHome: Home
pureLogin: Login
pureAbnormal: Abnormal Page
purePageNotFound: "404"
pureAccessDenied: "403"
pureServerError: "500"
purePermission: Permission Manage
purePermissionPage: Page Permission
purePermissionButton: Button Permission
purePermissionButtonRouter: Route return button permission
purePermissionButtonLogin: Login interface return button permission
status:
pureLoad: Loading...
pureMessage: Message
pureNotify: Notify
pureTodo: Todo
pureNoMessage: No Message
pureNoNotify: No Notify
pureNoTodo: No Todo
login:
pureUsername: Username
purePassword: Password
pureLogin: Login
pureLoginSuccess: Login Success
pureLoginFail: Login Fail
pureUsernameReg: Please enter username
purePassWordReg: Please enter password
purePassWordRuleReg: The password format should be any combination of 8-18 digits

91
locales/zh-CN.yaml Normal file
View File

@@ -0,0 +1,91 @@
buttons:
pureLoginOut: 退出系统
pureLogin: 登录
pureOpenSystemSet: 打开系统配置
pureReload: 重新加载
pureCloseCurrentTab: 关闭当前标签页
pureCloseLeftTabs: 关闭左侧标签页
pureCloseRightTabs: 关闭右侧标签页
pureCloseOtherTabs: 关闭其他标签页
pureCloseAllTabs: 关闭全部标签页
pureContentFullScreen: 内容区全屏
pureContentExitFullScreen: 内容区退出全屏
pureClickCollapse: 点击折叠
pureClickExpand: 点击展开
pureConfirm: 确认
pureSwitch: 切换
pureClose: 关闭
pureBackTop: 回到顶部
pureOpenText:
pureCloseText:
search:
pureTotal:
pureHistory: 搜索历史
pureCollect: 收藏
pureDragSort: (可拖拽排序)
pureEmpty: 暂无搜索结果
purePlaceholder: 搜索菜单(支持拼音搜索)
panel:
pureSystemSet: 系统配置
pureCloseSystemSet: 关闭配置
pureClearCacheAndToLogin: 清空缓存并返回登录页
pureClearCache: 清空缓存
pureOverallStyle: 整体风格
pureOverallStyleLight: 浅色
pureOverallStyleLightTip: 清新启航,点亮舒适的工作界面
pureOverallStyleDark: 深色
pureOverallStyleDarkTip: 月光序曲,沉醉于夜的静谧雅致
pureOverallStyleSystem: 自动
pureOverallStyleSystemTip: 同步时光,界面随晨昏自然呼应
pureThemeColor: 主题色
pureLayoutModel: 导航模式
pureVerticalTip: 左侧菜单,亲切熟悉
pureHorizontalTip: 顶部菜单,简洁概览
pureMixTip: 混合菜单,灵活多变
pureStretch: 页宽
pureStretchFixed: 固定
pureStretchFixedTip: 紧凑页面,轻松找到所需信息
pureStretchCustom: 自定义
pureStretchCustomTip: 最小1280、最大1600
pureTagsStyle: 页签风格
pureTagsStyleSmart: 灵动
pureTagsStyleSmartTip: 灵动标签,添趣生辉
pureTagsStyleCard: 卡片
pureTagsStyleCardTip: 卡片标签,高效浏览
pureTagsStyleChrome: 谷歌
pureTagsStyleChromeTip: 谷歌风格,经典美观
pureInterfaceDisplay: 界面显示
pureGreyModel: 灰色模式
pureWeakModel: 色弱模式
pureHiddenTags: 隐藏标签页
pureHiddenFooter: 隐藏页脚
pureMultiTagsCache: 页签持久化
menus:
pureHome: 首页
pureLogin: 登录
pureAbnormal: 异常页面
purePageNotFound: "404"
pureAccessDenied: "403"
pureServerError: "500"
purePermission: 权限管理
purePermissionPage: 页面权限
purePermissionButton: 按钮权限
purePermissionButtonRouter: 路由返回按钮权限
purePermissionButtonLogin: 登录接口返回按钮权限
status:
pureLoad: 加载中...
pureMessage: 消息
pureNotify: 通知
pureTodo: 待办
pureNoMessage: 暂无消息
pureNoNotify: 暂无通知
pureNoTodo: 暂无待办
login:
pureUsername: 账号
purePassword: 密码
pureLogin: 登录
pureLoginSuccess: 登录成功
pureLoginFail: 登录失败
pureUsernameReg: 请输入账号
purePassWordReg: 请输入密码
purePassWordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合

View File

@@ -9,7 +9,7 @@ import { defineFakeRoute } from "vite-plugin-fake-server/client";
const permissionRouter = {
path: "/permission",
meta: {
title: "权限管理",
title: "menus.purePermission",
icon: "ep:lollipop",
rank: 10
},
@@ -18,14 +18,14 @@ const permissionRouter = {
path: "/permission/page/index",
name: "PermissionPage",
meta: {
title: "页面权限",
title: "menus.purePermissionPage",
roles: ["admin", "common"]
}
},
{
path: "/permission/button",
meta: {
title: "按钮权限",
title: "menus.purePermissionButton",
roles: ["admin", "common"]
},
children: [
@@ -34,7 +34,7 @@ const permissionRouter = {
component: "permission/button/index",
name: "PermissionButtonRouter",
meta: {
title: "路由返回按钮权限",
title: "menus.purePermissionButtonRouter",
auths: [
"permission:btn:add",
"permission:btn:edit",
@@ -47,7 +47,7 @@ const permissionRouter = {
component: "permission/button/perms",
name: "PermissionButtonLogin",
meta: {
title: "登录接口返回按钮权限"
title: "menus.purePermissionButtonLogin"
}
}
]

View File

@@ -1,6 +1,6 @@
{
"name": "pure-admin-thin",
"version": "5.9.0",
"version": "6.2.0",
"private": true,
"type": "module",
"scripts": {
@@ -33,7 +33,7 @@
"vite",
"esm"
],
"homepage": "https://github.com/pure-admin/pure-admin-thin",
"homepage": "https://github.com/pure-admin/pure-admin-thin/tree/i18n",
"repository": {
"type": "git",
"url": "git+https://github.com/pure-admin/pure-admin-thin.git"
@@ -49,95 +49,96 @@
},
"dependencies": {
"@pureadmin/descriptions": "^1.2.1",
"@pureadmin/table": "^3.2.1",
"@pureadmin/utils": "^2.5.0",
"@vueuse/core": "^12.0.0",
"@vueuse/motion": "^2.2.6",
"@pureadmin/table": "^3.3.0",
"@pureadmin/utils": "^2.6.2",
"@vueuse/core": "^14.0.0",
"@vueuse/motion": "^3.0.3",
"animate.css": "^4.1.1",
"axios": "^1.7.9",
"dayjs": "^1.11.13",
"echarts": "^5.5.1",
"element-plus": "^2.9.0",
"axios": "^1.12.2",
"dayjs": "^1.11.18",
"echarts": "^6.0.0",
"element-plus": "^2.11.5",
"js-cookie": "^3.0.5",
"localforage": "^1.10.0",
"mitt": "^3.0.1",
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"pinia": "^2.3.0",
"pinyin-pro": "^3.26.0",
"qs": "^6.13.1",
"pinia": "^3.0.3",
"pinyin-pro": "^3.27.0",
"qs": "^6.14.0",
"responsive-storage": "^2.2.0",
"sortablejs": "^1.15.6",
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vue-tippy": "^6.5.0",
"vue-types": "^5.1.3"
"vue": "^3.5.22",
"vue-i18n": "^11.1.12",
"vue-router": "^4.6.3",
"vue-tippy": "^6.7.1",
"vue-types": "^6.0.0"
},
"devDependencies": {
"@commitlint/cli": "^19.6.0",
"@commitlint/config-conventional": "^19.6.0",
"@commitlint/types": "^19.5.0",
"@eslint/js": "^9.16.0",
"@faker-js/faker": "^9.3.0",
"@iconify-icons/ep": "^1.2.12",
"@iconify-icons/ri": "^1.2.10",
"@iconify/vue": "^4.2.0",
"@commitlint/cli": "^20.1.0",
"@commitlint/config-conventional": "^20.0.0",
"@commitlint/types": "^20.0.0",
"@eslint/js": "^9.38.0",
"@faker-js/faker": "^10.1.0",
"@iconify/json": "^2.2.400",
"@iconify/vue": "4.2.0",
"@intlify/unplugin-vue-i18n": "^11.0.1",
"@tailwindcss/vite": "^4.1.16",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20.17.9",
"@types/node": "^20.19.23",
"@types/nprogress": "^0.2.3",
"@types/path-browserify": "^1.0.3",
"@types/qs": "^6.9.17",
"@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^8.18.0",
"@typescript-eslint/parser": "^8.18.0",
"@vitejs/plugin-vue": "^5.2.1",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"autoprefixer": "^10.4.20",
"@types/qs": "^6.14.0",
"@types/sortablejs": "^1.15.9",
"@vitejs/plugin-vue": "^6.0.1",
"@vitejs/plugin-vue-jsx": "^5.1.1",
"boxen": "^8.0.1",
"code-inspector-plugin": "^0.18.2",
"cssnano": "^7.0.6",
"eslint": "^9.16.0",
"eslint-config-prettier": "^9.1.0",
"eslint-define-config": "^2.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-vue": "^9.32.0",
"code-inspector-plugin": "^1.2.10",
"cssnano": "^7.1.1",
"eslint": "^9.38.0",
"eslint-config-prettier": "^10.1.8",
"eslint-plugin-prettier": "^5.5.4",
"eslint-plugin-vue": "^10.5.1",
"gradient-string": "^3.0.0",
"husky": "^9.1.7",
"lint-staged": "^15.2.10",
"postcss": "^8.4.49",
"postcss-html": "^1.7.0",
"postcss-import": "^16.1.0",
"lint-staged": "^16.2.6",
"postcss": "^8.5.6",
"postcss-html": "^1.8.0",
"postcss-load-config": "^6.0.1",
"postcss-scss": "^4.0.9",
"prettier": "^3.4.2",
"prettier": "^3.6.2",
"rimraf": "^6.0.1",
"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.82.0",
"stylelint": "^16.11.0",
"stylelint-config-recess-order": "^5.1.1",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-prettier": "^5.0.2",
"svgo": "^3.3.2",
"tailwindcss": "^3.4.16",
"typescript": "5.6.3",
"vite": "^6.0.3",
"rollup-plugin-visualizer": "^6.0.5",
"sass": "^1.93.2",
"stylelint": "^16.25.0",
"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.16",
"typescript": "^5.9.3",
"typescript-eslint": "^8.46.2",
"unplugin-icons": "^22.5.0",
"vite": "^7.1.12",
"vite-plugin-cdn-import": "^1.0.1",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-fake-server": "^2.1.4",
"vite-plugin-fake-server": "^2.2.0",
"vite-plugin-remove-console": "^2.2.0",
"vite-plugin-router-warn": "^1.0.0",
"vite-svg-loader": "^5.1.0",
"vue-eslint-parser": "^9.4.3",
"vue-tsc": "^2.1.10"
"vue-eslint-parser": "^10.2.0",
"vue-tsc": "^3.1.2"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=22.0.0",
"node": "^20.19.0 || >=22.13.0",
"pnpm": ">=9"
},
"pnpm": {
"allowedDeprecatedVersions": {
"are-we-there-yet": "*",
"sourcemap-codec": "*",
"lodash.isequal": "*",
"domexception": "*",
"w3c-hr-time": "*",
"inflight": "*",
@@ -148,10 +149,16 @@
"abab": "*",
"glob": "*"
},
"peerDependencyRules": {
"allowedVersions": {
"eslint": "9"
}
}
"onlyBuiltDependencies": [
"@parcel/watcher",
"core-js",
"es5-ext",
"esbuild",
"typeit",
"vue-demi"
],
"ignoredBuiltDependencies": [
"@tailwindcss/oxide"
]
}
}

6112
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -3,10 +3,6 @@
/** @type {import('postcss-load-config').Config} */
export default {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {})
}
};

View File

@@ -1,10 +1,11 @@
{
"Version": "5.9.0",
"Version": "6.2.0",
"Title": "PureAdmin",
"FixedHeader": true,
"HiddenSideBar": false,
"MultiTagsCache": false,
"KeepAlive": true,
"Locale": "zh",
"Layout": "vertical",
"Theme": "light",
"DarkMode": false,

View File

@@ -9,6 +9,7 @@
import { defineComponent } from "vue";
import { ElConfigProvider } from "element-plus";
import { ReDialog } from "@/components/ReDialog";
import en from "element-plus/es/locale/lang/en";
import zhCn from "element-plus/es/locale/lang/zh-cn";
export default defineComponent({
@@ -19,7 +20,7 @@ export default defineComponent({
},
computed: {
currentLocale() {
return zhCn;
return this.$storage.locale?.locale === "zh" ? zhCn : en;
}
}
});

File diff suppressed because one or more lines are too long

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="iconify iconify--ant-design" viewBox="0 0 1024 1024"><path fill="currentColor" d="M864 170h-60c-4.4 0-8 3.6-8 8v518H310v-73c0-6.7-7.8-10.5-13-6.3l-141.9 112a8 8 0 0 0 0 12.6l141.9 112c5.3 4.2 13 .4 13-6.3v-75h498c35.3 0 64-28.7 64-64V178c0-4.4-3.6-8-8-8"/></svg>

Before

Width:  |  Height:  |  Size: 351 B

After

Width:  |  Height:  |  Size: 332 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5zM13 3V1h-1v2.5l.5.5H15V3zm-1 9.5V15h1v-2h2v-1h-2.5zM1 12v1h2v2h1v-2.5l-.5-.5zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5zM10 7H6v2h4z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5zM13 3V1h-1v2.5l.5.5H15V3zm-1 9.5V15h1v-2h2v-1h-2.5zM1 12v1h2v2h1v-2.5l-.5-.5zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5zM10 7H6v2h4z"/></svg>

Before

Width:  |  Height:  |  Size: 327 B

After

Width:  |  Height:  |  Size: 308 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3zm2-6h6v4H5zM2 6H1V2.5l.5-.5H5v1H2zm13-3.5V6h-1V3h-3V2h3.5zM14 10h1v3.5l-.5.5H11v-1h3zM2 13h3v1H1.5l-.5-.5V10h1z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3zm2-6h6v4H5zM2 6H1V2.5l.5-.5H5v1H2zm13-3.5V6h-1V3h-3V2h3.5zM14 10h1v3.5l-.5.5H11v-1h3zM2 13h3v1H1.5l-.5-.5V10h1z"/></svg>

Before

Width:  |  Height:  |  Size: 302 B

After

Width:  |  Height:  |  Size: 283 B

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" class="globalization" viewBox="0 0 512 512"><path fill="currentColor" d="m478.33 433.6-90-218a22 22 0 0 0-40.67 0l-90 218a22 22 0 1 0 40.67 16.79L316.66 406h102.67l18.33 44.39A22 22 0 0 0 458 464a22 22 0 0 0 20.32-30.4zM334.83 362 368 281.65 401.17 362zm-66.99-19.08a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73 39.65-53.68 62.11-114.75 71.27-143.49H330a22 22 0 0 0 0-44H214V70a22 22 0 0 0-44 0v20H54a22 22 0 0 0 0 44h197.25c-9.52 26.95-27.05 69.5-53.79 108.36-31.41-41.68-43.08-68.65-43.17-68.87a22 22 0 0 0-40.58 17c.58 1.38 14.55 34.23 52.86 83.93.92 1.19 1.83 2.35 2.74 3.51-39.24 44.35-77.74 71.86-93.85 80.74a22 22 0 1 0 21.07 38.63c2.16-1.18 48.6-26.89 101.63-85.59 22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z"/></svg>

After

Width:  |  Height:  |  Size: 807 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" aria-hidden="true" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" class="iconify iconify--mdi" viewBox="0 0 24 24"><path fill="currentColor" d="M1 7h6v2H3v2h4v2H3v2h4v2H1zm10 0h4v2h-4v2h2a2 2 0 0 1 2 2v2c0 1.11-.89 2-2 2H9v-2h4v-2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2m8 0h2a2 2 0 0 1 2 2v1h-2V9h-2v6h2v-1h2v1c0 1.11-.89 2-2 2h-2a2 2 0 0 1-2-2V9c0-1.1.9-2 2-2"/></svg>

Before

Width:  |  Height:  |  Size: 379 B

After

Width:  |  Height:  |  Size: 360 B

View File

@@ -1 +1 @@
<svg width="32" height="32" fill="currentColor" aria-hidden="true" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97m0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0m0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0M300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0"/></svg>
<svg width="32" height="32" fill="currentColor" data-icon="holder" viewBox="64 64 896 896"><path d="M300 276.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97m0 284a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 228a56 56 0 1 0 112 0 56 56 0 0 0-112 0m0 284a56 56 0 1 0 112 0 56 56 0 0 0-112 0M300 844.5a56 56 0 1 0 56-97 56 56 0 0 0-56 97M640 796a56 56 0 1 0 112 0 56 56 0 0 0-112 0"/></svg>

Before

Width:  |  Height:  |  Size: 392 B

After

Width:  |  Height:  |  Size: 373 B

View File

@@ -8,8 +8,8 @@ import {
} from "./index";
import { ref, computed } from "vue";
import { isFunction } from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "~icons/ri/fullscreen-fill";
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
defineOptions({
name: "ReDialog"
@@ -79,7 +79,7 @@ const fullscreenClass = computed(() => {
"el-dialog__close",
"-translate-x-2",
"cursor-pointer",
"hover:!text-[red]"
"hover:text-[red]!"
];
});

View File

@@ -1,6 +1,6 @@
import type { iconType } from "./types";
import { h, defineComponent, type Component } from "vue";
import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
import { FontIcon, IconifyIconOnline, IconifyIconOffline } from "../index";
/**
* 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
@@ -49,10 +49,12 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
return defineComponent({
name: "Icon",
render() {
const IconifyIcon =
icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
if (!icon) return;
const IconifyIcon = icon.includes(":")
? IconifyIconOnline
: IconifyIconOffline;
return h(IconifyIcon, {
icon: icon,
icon,
...attrs
});
}

View File

@@ -27,8 +27,7 @@ export default defineComponent({
return h(
"svg",
{
class: "icon-svg",
"aria-hidden": true
class: "icon-svg"
},
{
default: () => [

View File

@@ -13,10 +13,26 @@ export default defineComponent({
render() {
if (typeof this.icon === "object") addIcon(this.icon, this.icon);
const attrs = this.$attrs;
if (typeof this.icon === "string") {
return h(
IconifyIcon,
{
icon: this.icon,
"aria-hidden": false,
style: attrs?.style
? Object.assign(attrs.style, { outline: "none" })
: { outline: "none" },
...attrs
},
{
default: () => []
}
);
} else {
return h(
this.icon,
{
"aria-hidden": false,
style: attrs?.style
? Object.assign(attrs.style, { outline: "none" })
: { outline: "none" },
@@ -27,4 +43,5 @@ export default defineComponent({
}
);
}
}
});

View File

@@ -17,6 +17,7 @@ export default defineComponent({
IconifyIcon,
{
icon: `${this.icon}`,
"aria-hidden": false,
style: attrs?.style
? Object.assign(attrs.style, { outline: "none" })
: { outline: "none" },

View File

@@ -1,14 +1,23 @@
// 这里存放本地图标,在 src/layout/index.vue 文件中加载,避免在首启动加载
import { getSvgInfo } from "@pureadmin/utils";
import { addIcon } from "@iconify/vue/dist/offline";
// https://icon-sets.iconify.design/ep/?keyword=ep
import EpHomeFilled from "~icons/ep/home-filled?raw";
// https://icon-sets.iconify.design/ri/?keyword=ri
import RiSearchLine from "~icons/ri/search-line?raw";
import RiInformationLine from "~icons/ri/information-line?raw";
const icons = [
// Element Plus Icon: https://github.com/element-plus/element-plus-icons
["ep/home-filled", EpHomeFilled],
// Remix Icon: https://github.com/Remix-Design/RemixIcon
["ri/search-line", RiSearchLine],
["ri/information-line", RiInformationLine]
];
// 本地菜单图标,后端在路由的 icon 中返回对应的图标字符串并且前端在此处使用 addIcon 添加即可渲染菜单图标
// @iconify-icons/ep
import Lollipop from "@iconify-icons/ep/lollipop";
import HomeFilled from "@iconify-icons/ep/home-filled";
addIcon("ep:lollipop", Lollipop);
addIcon("ep:home-filled", HomeFilled);
// @iconify-icons/ri
import Search from "@iconify-icons/ri/search-line";
import InformationLine from "@iconify-icons/ri/information-line";
addIcon("ri:search-line", Search);
addIcon("ri:information-line", InformationLine);
icons.forEach(([name, icon]) => {
addIcon(name as string, getSvgInfo(icon as string));
});

View File

@@ -1,4 +1,5 @@
import Sortable from "sortablejs";
import { transformI18n } from "@/plugins/i18n";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import {
type PropType,
@@ -17,8 +18,8 @@ import {
getKeyList
} from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "~icons/ri/fullscreen-fill";
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import DragIcon from "@/assets/table-bar/drag.svg?component";
import ExpandIcon from "@/assets/table-bar/expand.svg?component";
import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
@@ -86,9 +87,9 @@ export default defineComponent({
"text-black",
"dark:text-white",
"duration-100",
"hover:!text-primary",
"hover:text-primary!",
"cursor-pointer",
"outline-none"
"outline-hidden"
];
});
@@ -147,7 +148,9 @@ export default defineComponent({
}
function handleCheckColumnListChange(val: boolean, label: string) {
dynamicColumns.value.filter(item => item.label === label)[0].hide = !val;
dynamicColumns.value.filter(
item => transformI18n(item.label) === transformI18n(label)
)[0].hide = !val;
}
async function onReset() {
@@ -220,7 +223,9 @@ export default defineComponent({
};
const isFixedColumn = (label: string) => {
return dynamicColumns.value.filter(item => item.label === label)[0].fixed
return dynamicColumns.value.filter(
item => transformI18n(item.label) === transformI18n(label)
)[0].fixed
? true
: false;
};
@@ -250,12 +255,12 @@ export default defineComponent({
<div
{...attrs}
class={[
"w-[99/100]",
"w-full",
"px-2",
"pb-2",
"bg-bg_color",
isFullscreen.value
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
? ["h-full!", "z-2002", "fixed", "inset-0"]
: "mt-2"
]}
>
@@ -312,7 +317,7 @@ export default defineComponent({
>
<div class={[topClass.value]}>
<el-checkbox
class="!-mr-1"
class="-mr-1!"
label="列展示"
v-model={checkAll.value}
indeterminate={isIndeterminate.value}
@@ -342,8 +347,8 @@ export default defineComponent({
class={[
"drag-btn w-[16px] mr-2",
isFixedColumn(item)
? "!cursor-no-drop"
: "!cursor-grab"
? "cursor-no-drop!"
: "cursor-grab!"
]}
onMouseenter={(event: {
preventDefault: () => void;
@@ -358,10 +363,10 @@ export default defineComponent({
}
>
<span
title={item}
title={transformI18n(item)}
class="inline-block w-[120px] truncate hover:text-text_color_primary"
>
{item}
{transformI18n(item)}
</span>
</el-checkbox>
</div>

View File

@@ -98,7 +98,6 @@
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
transition: 0.1s;
}
.pure-segmented-group {

View File

@@ -1,6 +1,6 @@
<script lang="ts" setup>
import { h, onMounted, ref, useSlots } from "vue";
import { type TippyOptions, useTippy } from "vue-tippy";
<script setup lang="ts">
import { h, onMounted, ref } from "vue";
import { type TippyOptions, type TippyContent, useTippy } from "vue-tippy";
defineOptions({
name: "ReText"
@@ -17,7 +17,10 @@ const props = defineProps({
}
});
const $slots = useSlots();
const slots = defineSlots<{
content: () => TippyContent;
default: () => any;
}>();
const textRef = ref();
const tippyFunc = ref();
@@ -33,7 +36,7 @@ const isTextEllipsis = (el: HTMLElement) => {
};
const getTippyProps = () => ({
content: h($slots.content || $slots.default),
content: h(slots.content || slots.default),
...props.tippyProps
});

View File

@@ -13,10 +13,10 @@ $ripple-animation-visible-opacity: 0.25 !default;
z-index: 0;
width: 100%;
height: 100%;
contain: strict;
overflow: hidden;
pointer-events: none;
border-radius: inherit;
contain: strict;
}
&__animation {

View File

@@ -32,8 +32,8 @@ const calculate = (
const offset = el.getBoundingClientRect();
// 获取点击位置距离 el 的垂直和水平距离
let localX = e.clientX - offset.left;
let localY = e.clientY - offset.top;
const localX = e.clientX - offset.left;
const localY = e.clientY - offset.top;
let radius = 0;
let scale = 0.3;

View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import LayFrame from "../lay-frame/index.vue";
import LayFooter from "../lay-footer/index.vue";
import { useTags } from "@/layout/hooks/useTag";
@@ -11,6 +12,7 @@ const props = defineProps({
fixedHeader: Boolean
});
const { t } = useI18n();
const { showModel } = useTags();
const { $storage, $config } = useGlobal<GlobalPropertiesApi>();
@@ -131,7 +133,7 @@ const transitionMain = defineComponent({
}"
>
<el-backtop
title="回到顶部"
:title="t('buttons.pureBackTop')"
target=".app-main .el-scrollbar__wrap"
>
<BackTopIcon />

View File

@@ -1,4 +1,4 @@
<script lang="ts" setup>
<script setup lang="ts">
import { getConfig } from "@/config";
const TITLE = getConfig("Title");
@@ -10,7 +10,7 @@ const TITLE = getConfig("Title");
>
Copyright © 2020-present
<a
class="hover:text-primary"
class="hover:text-primary!"
href="https://github.com/pure-admin"
target="_blank"
>

View File

@@ -3,12 +3,15 @@ import { useNav } from "@/layout/hooks/useNav";
import LaySearch from "../lay-search/index.vue";
import LayNotice from "../lay-notice/index.vue";
import LayNavMix from "../lay-sidebar/NavMix.vue";
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vue";
import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "~icons/ri/settings-3-line";
import Check from "~icons/ep/check";
const {
layout,
@@ -19,12 +22,16 @@ const {
username,
userAvatar,
avatarsStyle,
toggleSideBar
toggleSideBar,
getDropdownItemStyle,
getDropdownItemClass
} = useNav();
const { t, locale, translationCh, translationEn } = useTranslationLang();
</script>
<template>
<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
<div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
<LaySidebarTopCollapse
v-if="device === 'mobile'"
class="hamburger-container"
@@ -42,6 +49,38 @@ const {
<div v-if="layout === 'vertical'" class="vertical-header-right">
<!-- 菜单搜索 -->
<LaySearch id="header-search" />
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
v-show="locale === 'zh'"
class="check-zh"
:icon="Check"
/>
简体中文
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 全屏 -->
<LaySidebarFullScreen id="full-screen" />
<!-- 消息通知 -->
@@ -59,14 +98,14 @@ const {
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
退出系统
{{ t("buttons.pureLoginOut") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
title="打开系统配置"
:title="t('buttons.pureOpenSystemSet')"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />
@@ -123,6 +162,22 @@ const {
}
}
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
.logout {
width: 120px;

View File

@@ -49,7 +49,7 @@ function hoverDescription(event, description) {
<template>
<div
class="notice-container border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
class="notice-container border-0 border-b-[1px] border-solid border-[#f0f0f0] dark:border-[#303030]"
>
<el-avatar
v-if="noticeItem.avatar"
@@ -112,7 +112,7 @@ function hoverDescription(event, description) {
max-width: 238px;
}
</style>
<style scoped lang="scss">
<style lang="scss" scoped>
.notice-container {
display: flex;
align-items: flex-start;

View File

@@ -2,6 +2,7 @@
import { PropType } from "vue";
import { ListItem } from "../data";
import NoticeItem from "./NoticeItem.vue";
import { transformI18n } from "@/plugins/i18n";
defineProps({
list: {
@@ -19,5 +20,5 @@ defineProps({
<div v-if="list.length">
<NoticeItem v-for="(item, index) in list" :key="index" :noticeItem="item" />
</div>
<el-empty v-else :description="emptyText" />
<el-empty v-else :description="transformI18n(emptyText)" />
</template>

View File

@@ -1,3 +1,5 @@
import { $t } from "@/plugins/i18n";
export interface ListItem {
avatar: string;
title: string;
@@ -18,13 +20,13 @@ export interface TabItem {
export const noticesData: TabItem[] = [
{
key: "1",
name: "通知",
name: $t("status.pureNotify"),
list: [],
emptyText: "暂无通知"
emptyText: $t("status.pureNoNotify")
},
{
key: "2",
name: "消息",
name: $t("status.pureMessage"),
list: [
{
avatar: "https://xiaoxian521.github.io/hyperlink/svg/smile1.svg",
@@ -49,11 +51,11 @@ export const noticesData: TabItem[] = [
type: "2"
}
],
emptyText: "暂无消息"
emptyText: $t("status.pureNoMessage")
},
{
key: "3",
name: "待办",
name: $t("status.pureTodo"),
list: [
{
avatar: "",
@@ -92,6 +94,6 @@ export const noticesData: TabItem[] = [
type: "3"
}
],
emptyText: "暂无待办"
emptyText: $t("status.pureNoTodo")
}
];

View File

@@ -1,9 +1,11 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { ref, computed } from "vue";
import { noticesData } from "./data";
import NoticeList from "./components/NoticeList.vue";
import BellIcon from "@iconify-icons/ep/bell";
import BellIcon from "~icons/ep/bell";
const { t } = useI18n();
const noticesNum = ref(0);
const notices = ref(noticesData);
const activeKey = ref(noticesData[0]?.key);
@@ -12,7 +14,7 @@ notices.value.map(v => (noticesNum.value += v.list.length));
const getLabel = computed(
() => item =>
item.name + (item.list.length > 0 ? `(${item.list.length})` : "")
t(item.name) + (item.list.length > 0 ? `(${item.list.length})` : "")
);
</script>
@@ -42,7 +44,7 @@ const getLabel = computed(
>
<el-empty
v-if="notices.length === 0"
description="暂无消息"
:description="t('status.pureNoMessage')"
:image-size="60"
/>
<span v-else>

View File

@@ -1,9 +1,10 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { emitter } from "@/utils/mitt";
import { onClickOutside } from "@vueuse/core";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import CloseIcon from "@iconify-icons/ep/close";
import CloseIcon from "~icons/ep/close";
const target = ref(null);
const show = ref<Boolean>(false);
@@ -15,7 +16,7 @@ const iconClass = computed(() => {
"flex",
"justify-center",
"items-center",
"outline-none",
"outline-hidden",
"rounded-[4px]",
"cursor-pointer",
"transition-colors",
@@ -25,6 +26,7 @@ const iconClass = computed(() => {
];
});
const { t } = useI18n();
const { onReset } = useDataThemeChange();
onClickOutside(target, (event: any) => {
@@ -49,12 +51,14 @@ onBeforeUnmount(() => {
<div class="right-panel-background" />
<div ref="target" class="right-panel bg-bg_color">
<div
class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
>
<h4 class="dark:text-white">系统配置</h4>
<h4 class="dark:text-white">
{{ t("panel.pureSystemSet") }}
</h4>
<span
v-tippy="{
content: '关闭配置',
content: t('panel.pureCloseSystemSet'),
placement: 'bottom-start',
zIndex: 41000
}"
@@ -74,11 +78,11 @@ onBeforeUnmount(() => {
</el-scrollbar>
<div
class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]"
class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
>
<el-button
v-tippy="{
content: '清空缓存并返回登录页',
content: t('panel.pureClearCacheAndToLogin'),
placement: 'left-start',
zIndex: 41000
}"
@@ -87,7 +91,7 @@ onBeforeUnmount(() => {
bg
@click="onReset"
>
清空缓存
{{ t("panel.pureClearCache") }}
</el-button>
</div>
</div>
@@ -117,8 +121,8 @@ onBeforeUnmount(() => {
width: 100%;
max-width: 280px;
box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
}
.show {

View File

@@ -1,14 +1,16 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useNav } from "@/layout/hooks/useNav";
import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
import ArrowUpLine from "~icons/ri/arrow-up-line";
import ArrowDownLine from "~icons/ri/arrow-down-line";
withDefaults(defineProps<{ total: number }>(), {
withDefaults(defineProps<{ total?: number }>(), {
total: 0
});
const { t } = useI18n();
const { device } = useNav();
</script>
@@ -16,19 +18,19 @@ const { device } = useNav();
<div class="search-footer text-[#333] dark:text-white">
<span class="search-footer-item">
<EnterOutlined class="icon" />
确认
{{ t("buttons.pureConfirm") }}
</span>
<span class="search-footer-item">
<IconifyIconOffline :icon="ArrowUpLine" class="icon" />
<IconifyIconOffline :icon="ArrowDownLine" class="icon" />
切换
{{ t("buttons.pureSwitch") }}
</span>
<span class="search-footer-item">
<MdiKeyboardEsc class="icon" />
关闭
{{ t("buttons.pureClose") }}
</span>
<p v-if="device !== 'mobile' && total > 0" class="search-footer-total">
{{ ` ${total} ` }}
{{ `${t("search.pureTotal")} ${total}` }}
</p>
</div>
</template>

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import Sortable from "sortablejs";
import { useI18n } from "vue-i18n";
import SearchHistoryItem from "./SearchHistoryItem.vue";
import type { optionsItem, dragItem, Props } from "../types";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
@@ -19,6 +20,7 @@ const innerHeight = ref();
/** 判断是否停止鼠标移入事件处理 */
const stopMouseEvent = ref(false);
const { t } = useI18n();
const emit = defineEmits<Emits>();
const instance = getCurrentInstance()!;
const props = withDefaults(defineProps<Props>(), {});
@@ -141,7 +143,9 @@ defineExpose({ handleScroll });
<template>
<div ref="historyRef" class="history">
<template v-if="historyList.length">
<div :style="titleStyle">搜索历史</div>
<div :style="titleStyle">
{{ t("search.pureHistory") }}
</div>
<div
v-for="(item, index) in historyList"
:key="item.path"
@@ -160,7 +164,9 @@ defineExpose({ handleScroll });
</template>
<template v-if="collectList.length">
<div :style="titleStyle">
{{ `收藏${collectList.length > 1 ? "(可拖拽排序)" : ""}` }}
{{
`${t("search.pureCollect")}${collectList.length > 1 ? t("search.pureDragSort") : ""}`
}}
</div>
<div class="collect-container">
<div

View File

@@ -1,8 +1,9 @@
<script setup lang="ts">
import type { optionsItem } from "../types";
import { transformI18n } from "@/plugins/i18n";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import StarIcon from "@iconify-icons/ep/star";
import CloseIcon from "@iconify-icons/ep/close";
import StarIcon from "~icons/ep/star";
import CloseIcon from "~icons/ep/close";
interface Props {
item: optionsItem;
@@ -28,7 +29,7 @@ function handleDelete(item) {
<template>
<component :is="useRenderIcon(item.meta?.icon)" />
<span class="history-item-title">
{{ item.meta?.title }}
{{ transformI18n(item.meta?.title) }}
</span>
<IconifyIconOffline
v-show="item.type === 'history'"

View File

@@ -1,17 +1,19 @@
<script setup lang="ts">
import { match } from "pinyin-pro";
import { useI18n } from "vue-i18n";
import { getConfig } from "@/config";
import { useRouter } from "vue-router";
import SearchResult from "./SearchResult.vue";
import SearchFooter from "./SearchFooter.vue";
import { useNav } from "@/layout/hooks/useNav";
import { transformI18n } from "@/plugins/i18n";
import SearchHistory from "./SearchHistory.vue";
import type { optionsItem, dragItem } from "../types";
import { ref, computed, shallowRef, watch } from "vue";
import { useDebounceFn, onKeyStroke } from "@vueuse/core";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils";
import SearchIcon from "@iconify-icons/ri/search-line";
import SearchIcon from "~icons/ri/search-line";
interface Props {
/** 弹窗显隐 */
@@ -27,6 +29,7 @@ const emit = defineEmits<Emits>();
const props = withDefaults(defineProps<Props>(), {});
const router = useRouter();
const { t, locale } = useI18n();
const HISTORY_TYPE = "history";
const COLLECT_TYPE = "collect";
@@ -107,15 +110,16 @@ function search() {
const flatMenusData = flatTree(menusData.value);
resultOptions.value = flatMenusData.filter(menu =>
keyword.value
? menu.meta?.title
? transformI18n(menu.meta?.title)
.toLocaleLowerCase()
.includes(keyword.value.toLocaleLowerCase().trim()) ||
(locale.value === "zh" &&
!isAllEmpty(
match(
menu.meta?.title.toLocaleLowerCase(),
transformI18n(menu.meta?.title).toLocaleLowerCase(),
keyword.value.toLocaleLowerCase().trim()
)
)
))
: false
);
activePath.value =
@@ -289,7 +293,7 @@ onKeyStroke("ArrowDown", handleDown);
v-model="keyword"
size="large"
clearable
placeholder="搜索菜单(支持拼音搜索)"
:placeholder="t('search.purePlaceholder')"
@input="handleSearch"
>
<template #prefix>
@@ -301,7 +305,7 @@ onKeyStroke("ArrowDown", handleDown);
</el-input>
<div class="search-content">
<el-scrollbar ref="scrollbarRef" max-height="calc(90vh - 140px)">
<el-empty v-if="showEmpty" description="暂无搜索结果" />
<el-empty v-if="showEmpty" :description="t('search.pureEmpty')" />
<SearchHistory
v-if="showSearchHistory"
ref="historyRef"

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import type { Props } from "../types";
import { transformI18n } from "@/plugins/i18n";
import { useResizeObserver } from "@pureadmin/utils";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -81,7 +82,7 @@ defineExpose({ handleScroll });
>
<component :is="useRenderIcon(item.meta?.icon)" />
<span class="result-item-title">
{{ item.meta?.title }}
{{ transformI18n(item.meta?.title) }}
</span>
<EnterOutlined />
</div>

View File

@@ -14,7 +14,7 @@ function handleSearch() {
class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
@click="handleSearch"
>
<IconifyIconOffline icon="ri:search-line" />
<IconifyIconOffline icon="ri/search-line" />
</div>
<SearchModal v-model:value="show" />
</div>

View File

@@ -9,6 +9,7 @@ import {
onUnmounted,
onBeforeMount
} from "vue";
import { useI18n } from "vue-i18n";
import { emitter } from "@/utils/mitt";
import LayPanel from "../lay-panel/index.vue";
import { useNav } from "@/layout/hooks/useNav";
@@ -18,13 +19,14 @@ import Segmented, { type OptionsType } from "@/components/ReSegmented";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
import Check from "@iconify-icons/ep/check";
import LeftArrow from "@iconify-icons/ri/arrow-left-s-line";
import RightArrow from "@iconify-icons/ri/arrow-right-s-line";
import Check from "~icons/ep/check";
import LeftArrow from "~icons/ri/arrow-left-s-line?width=20&height=20";
import RightArrow from "~icons/ri/arrow-right-s-line?width=20&height=20";
import DayIcon from "@/assets/svg/day.svg?component";
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 { $storage } = useGlobal<GlobalPropertiesApi>();
@@ -145,13 +147,13 @@ function setFalse(Doms): any {
const stretchTypeOptions = computed<Array<OptionsType>>(() => {
return [
{
label: "固定",
tip: "紧凑页面,轻松找到所需信息",
label: t("panel.pureStretchFixed"),
tip: t("panel.pureStretchFixedTip"),
value: "fixed"
},
{
label: "自定义",
tip: "最小1280、最大1600",
label: t("panel.pureStretchCustom"),
tip: t("panel.pureStretchCustomTip"),
value: "custom"
}
];
@@ -187,30 +189,30 @@ const getThemeColor = computed(() => {
});
const pClass = computed(() => {
return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"];
return ["mb-[12px]!", "font-medium", "text-sm", "dark:text-white"];
});
const themeOptions = computed<Array<OptionsType>>(() => {
return [
{
label: "浅色",
label: t("panel.pureOverallStyleLight"),
icon: DayIcon,
theme: "light",
tip: "清新启航,点亮舒适的工作界面",
tip: t("panel.pureOverallStyleLightTip"),
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
},
{
label: "深色",
label: t("panel.pureOverallStyleDark"),
icon: DarkIcon,
theme: "dark",
tip: "月光序曲,沉醉于夜的静谧雅致",
tip: t("panel.pureOverallStyleDarkTip"),
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
},
{
label: "自动",
label: t("panel.pureOverallStyleSystem"),
icon: SystemIcon,
theme: "system",
tip: "同步时光,界面随晨昏自然呼应",
tip: t("panel.pureOverallStyleSystemTip"),
iconAttrs: { fill: isDark.value ? "#fff" : "#000" }
}
];
@@ -219,18 +221,18 @@ const themeOptions = computed<Array<OptionsType>>(() => {
const markOptions = computed<Array<OptionsType>>(() => {
return [
{
label: "灵动",
tip: "灵动标签,添趣生辉",
label: t("panel.pureTagsStyleSmart"),
tip: t("panel.pureTagsStyleSmartTip"),
value: "smart"
},
{
label: "卡片",
tip: "卡片标签,高效浏览",
label: t("panel.pureTagsStyleCard"),
tip: t("panel.pureTagsStyleCardTip"),
value: "card"
},
{
label: "谷歌",
tip: "谷歌风格,经典美观",
label: t("panel.pureTagsStyleChrome"),
tip: t("panel.pureTagsStyleChromeTip"),
value: "chrome"
}
];
@@ -315,7 +317,7 @@ onUnmounted(() => removeMatchMedia);
<template>
<LayPanel>
<div class="p-5">
<p :class="pClass">整体风格</p>
<p :class="pClass">{{ t("panel.pureOverallStyle") }}</p>
<Segmented
resize
class="select-none"
@@ -333,7 +335,7 @@ onUnmounted(() => removeMatchMedia);
"
/>
<p :class="['mt-5', pClass]">主题色</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureThemeColor") }}</p>
<ul class="theme-color">
<li
v-for="(item, index) in themeColors"
@@ -352,12 +354,12 @@ onUnmounted(() => removeMatchMedia);
</li>
</ul>
<p :class="['mt-5', pClass]">导航模式</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
<ul class="pure-theme">
<li
ref="verticalRef"
v-tippy="{
content: '左侧菜单,亲切熟悉',
content: t('panel.pureVerticalTip'),
zIndex: 41000
}"
:class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
@@ -370,7 +372,7 @@ onUnmounted(() => removeMatchMedia);
v-if="device !== 'mobile'"
ref="horizontalRef"
v-tippy="{
content: '顶部菜单,简洁概览',
content: t('panel.pureHorizontalTip'),
zIndex: 41000
}"
:class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
@@ -383,7 +385,7 @@ onUnmounted(() => removeMatchMedia);
v-if="device !== 'mobile'"
ref="mixRef"
v-tippy="{
content: '混合菜单,灵活多变',
content: t('panel.pureMixTip'),
zIndex: 41000
}"
:class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
@@ -395,7 +397,7 @@ onUnmounted(() => removeMatchMedia);
</ul>
<span v-if="useAppStoreHook().getViewportWidth > 1280">
<p :class="['mt-5', pClass]">页宽</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureStretch") }}</p>
<Segmented
resize
class="mb-2 select-none"
@@ -424,21 +426,19 @@ onUnmounted(() => removeMatchMedia);
>
<IconifyIconOffline
:icon="settings.stretch ? RightArrow : LeftArrow"
height="20"
/>
<div
class="flex-grow border-b border-dashed"
class="grow border-0 border-b border-dashed"
style="border-color: var(--el-color-primary)"
/>
<IconifyIconOffline
:icon="settings.stretch ? LeftArrow : RightArrow"
height="20"
/>
</div>
</button>
</span>
<p :class="['mt-4', pClass]">页签风格</p>
<p :class="['mt-4!', pClass]">{{ t("panel.pureTagsStyle") }}</p>
<Segmented
resize
class="select-none"
@@ -447,45 +447,47 @@ onUnmounted(() => removeMatchMedia);
@change="onChange"
/>
<p class="mt-5 font-medium text-sm dark:text-white">界面显示</p>
<p class="mt-5! font-medium text-sm dark:text-white">
{{ t("panel.pureInterfaceDisplay") }}
</p>
<ul class="setting">
<li>
<span class="dark:text-white">灰色模式</span>
<span class="dark:text-white">{{ t("panel.pureGreyModel") }}</span>
<el-switch
v-model="settings.greyVal"
inline-prompt
active-text=""
inactive-text=""
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="greyChange"
/>
</li>
<li>
<span class="dark:text-white">色弱模式</span>
<span class="dark:text-white">{{ t("panel.pureWeakModel") }}</span>
<el-switch
v-model="settings.weakVal"
inline-prompt
active-text=""
inactive-text=""
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="weekChange"
/>
</li>
<li>
<span class="dark:text-white">隐藏标签页</span>
<span class="dark:text-white">{{ t("panel.pureHiddenTags") }}</span>
<el-switch
v-model="settings.tabsVal"
inline-prompt
active-text=""
inactive-text=""
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="tagsChange"
/>
</li>
<li>
<span class="dark:text-white">隐藏页脚</span>
<span class="dark:text-white">{{ t("panel.pureHiddenFooter") }}</span>
<el-switch
v-model="settings.hideFooter"
inline-prompt
active-text=""
inactive-text=""
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="hideFooterChange"
/>
</li>
@@ -496,18 +498,20 @@ onUnmounted(() => removeMatchMedia);
inline-prompt
:active-value="true"
:inactive-value="false"
active-text=""
inactive-text=""
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="logoChange"
/>
</li>
<li>
<span class="dark:text-white">页签持久化</span>
<span class="dark:text-white">
{{ t("panel.pureMultiTagsCache") }}
</span>
<el-switch
v-model="settings.multiTagsCache"
inline-prompt
active-text=""
inactive-text=""
:active-text="t('buttons.pureOpenText')"
:inactive-text="t('buttons.pureCloseText')"
@change="multiTagsCacheChange"
/>
</li>

View File

@@ -6,12 +6,15 @@ import LayNotice from "../lay-notice/index.vue";
import { responsiveStorageNameSpace } from "@/config";
import { ref, nextTick, computed, onMounted } from "vue";
import { storageLocal, isAllEmpty } from "@pureadmin/utils";
import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "@/store/modules/permission";
import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "~icons/ri/settings-3-line";
import Check from "~icons/ep/check";
const menuRef = ref();
const showLogo = ref(
@@ -20,8 +23,9 @@ const showLogo = ref(
)?.showLogo ?? true
);
const { t, route, locale, translationCh, translationEn } =
useTranslationLang(menuRef);
const {
route,
title,
logout,
onPanel,
@@ -29,7 +33,9 @@ const {
username,
userAvatar,
backTopMenu,
avatarsStyle
avatarsStyle,
getDropdownItemStyle,
getDropdownItemClass
} = useNav();
const defaultActive = computed(() =>
@@ -73,6 +79,36 @@ onMounted(() => {
<div class="horizontal-header-right">
<!-- 菜单搜索 -->
<LaySearch id="header-search" />
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span v-show="locale === 'zh'" class="check-zh">
<IconifyIconOffline :icon="Check" />
</span>
简体中文
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 全屏 -->
<LaySidebarFullScreen id="full-screen" />
<!-- 消息通知 -->
@@ -90,14 +126,14 @@ onMounted(() => {
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
退出系统
{{ t("buttons.pureLoginOut") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
title="打开系统配置"
:title="t('buttons.pureOpenSystemSet')"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />
@@ -111,6 +147,22 @@ onMounted(() => {
opacity: 0.45;
}
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
.logout {
width: 120px;

View File

@@ -1,23 +1,28 @@
<script setup lang="ts">
import { isAllEmpty } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { transformI18n } from "@/plugins/i18n";
import LaySearch from "../lay-search/index.vue";
import LayNotice from "../lay-notice/index.vue";
import { ref, toRaw, watch, onMounted, nextTick } from "vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getParentPaths, findRouteByPath } from "@/router/utils";
import { useTranslationLang } from "../../hooks/useTranslationLang";
import { usePermissionStoreHook } from "@/store/modules/permission";
import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue";
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "~icons/ri/settings-3-line";
import Check from "~icons/ep/check";
const menuRef = ref();
const defaultActive = ref(null);
const { t, route, locale, translationCh, translationEn } =
useTranslationLang(menuRef);
const {
route,
device,
logout,
onPanel,
@@ -25,7 +30,9 @@ const {
username,
userAvatar,
getDivStyle,
avatarsStyle
avatarsStyle,
getDropdownItemStyle,
getDropdownItemClass
} = useNav();
function getDefaultActive(routePath) {
@@ -83,7 +90,7 @@ watch(
</div>
<div :style="getDivStyle">
<span class="select-none">
{{ route.meta.title }}
{{ transformI18n(route.meta.title) }}
</span>
<LaySidebarExtraIcon :extraIcon="route.meta.extraIcon" />
</div>
@@ -93,6 +100,36 @@ watch(
<div class="horizontal-header-right">
<!-- 菜单搜索 -->
<LaySearch id="header-search" />
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span v-show="locale === 'zh'" class="check-zh">
<IconifyIconOffline :icon="Check" />
</span>
简体中文
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 全屏 -->
<LaySidebarFullScreen id="full-screen" />
<!-- 消息通知 -->
@@ -110,14 +147,14 @@ watch(
:icon="LogoutCircleRLine"
style="margin: 5px"
/>
退出系统
{{ t("buttons.pureLoginOut") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<span
class="set-icon navbar-bg-hover"
title="打开系统配置"
:title="t('buttons.pureOpenSystemSet')"
@click="onPanel"
>
<IconifyIconOffline :icon="Setting" />
@@ -131,6 +168,22 @@ watch(
opacity: 0.45;
}
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
.logout {
width: 120px;

View File

@@ -1,5 +1,6 @@
<script setup lang="ts">
import { isEqual } from "@pureadmin/utils";
import { transformI18n } from "@/plugins/i18n";
import { useRoute, useRouter } from "vue-router";
import { ref, watch, onMounted, toRaw } from "vue";
import { getParentPaths, findRouteByPath } from "@/router/utils";
@@ -104,15 +105,15 @@ watch(
</script>
<template>
<el-breadcrumb class="!leading-[50px] select-none" separator="/">
<el-breadcrumb class="leading-[50px]! select-none" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item
v-for="item in levelList"
:key="item.path"
class="!inline !items-stretch"
class="inline! items-stretch!"
>
<a @click.prevent="handleLink(item)">
{{ item.meta.title }}
{{ transformI18n(item.meta.title) }}
</a>
</el-breadcrumb-item>
</transition-group>

View File

@@ -1,18 +1,20 @@
<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useGlobal } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
import ArrowLeft from "~icons/ri/arrow-left-double-fill";
interface Props {
isActive: boolean;
isActive?: boolean;
}
withDefaults(defineProps<Props>(), {
isActive: false
});
const { t } = useI18n();
const { tooltipEffect } = useNav();
const iconClass = computed(() => {
@@ -34,7 +36,9 @@ const toggleClick = () => {
<template>
<div
v-tippy="{
content: isActive ? '点击折叠' : '点击展开',
content: isActive
? t('buttons.pureClickCollapse')
: t('buttons.pureClickExpand'),
theme: tooltipEffect,
hideOnClick: 'toggle',
placement: 'right'

View File

@@ -4,6 +4,7 @@ import { posix } from "path-browserify";
import { menuType } from "@/layout/types";
import { ReText } from "@/components/ReText";
import { useNav } from "@/layout/hooks/useNav";
import { transformI18n } from "@/plugins/i18n";
import SidebarLinkItem from "./SidebarLinkItem.vue";
import SidebarExtraIcon from "./SidebarExtraIcon.vue";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
@@ -16,10 +17,10 @@ import {
useAttrs
} from "vue";
import ArrowUp from "@iconify-icons/ep/arrow-up-bold";
import EpArrowDown from "@iconify-icons/ep/arrow-down-bold";
import ArrowLeft from "@iconify-icons/ep/arrow-left-bold";
import ArrowRight from "@iconify-icons/ep/arrow-right-bold";
import ArrowUp from "~icons/ep/arrow-up-bold";
import EpArrowDown from "~icons/ep/arrow-down-bold";
import ArrowLeft from "~icons/ep/arrow-left-bold";
import ArrowRight from "~icons/ep/arrow-right-bold";
const attrs = useAttrs();
const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();
@@ -60,6 +61,21 @@ const getSubMenuIconStyle = computed((): CSSProperties => {
};
});
const textClass = computed(() => {
const item = props.item;
const baseClass = "w-full! text-inherit!";
if (
layout.value !== "horizontal" &&
isCollapse.value &&
!toRaw(item.meta.icon) &&
((layout.value === "vertical" && item.parentId === null) ||
(layout.value === "mix" && item.pathList.length === 2))
) {
return `${baseClass} min-w-[54px]! text-center! px-3!`;
}
return baseClass;
});
const expandCloseIcon = computed(() => {
if (!getConfig()?.MenuArrowIconNoTransition) return "";
return {
@@ -143,9 +159,9 @@ function resolvePath(routePath) {
item?.pathList?.length === 2)
"
truncated
class="!w-full !pl-4 !text-inherit"
class="w-full! px-3! min-w-[54px]! text-center! text-inherit!"
>
{{ onlyOneChild.meta.title }}
{{ transformI18n(onlyOneChild.meta.title) }}
</el-text>
<template #title>
@@ -155,9 +171,9 @@ function resolvePath(routePath) {
offset: [0, -10],
theme: tooltipEffect
}"
class="!w-full !text-inherit"
class="w-full! text-inherit!"
>
{{ onlyOneChild.meta.title }}
{{ transformI18n(onlyOneChild.meta.title) }}
</ReText>
<SidebarExtraIcon :extraIcon="onlyOneChild.meta.extraIcon" />
</div>
@@ -194,17 +210,9 @@ function resolvePath(routePath) {
offset: [0, -10],
theme: tooltipEffect
}"
:class="{
'!w-full': true,
'!text-inherit': true,
'!pl-4':
layout !== 'horizontal' &&
isCollapse &&
!toRaw(item.meta.icon) &&
item.parentId === null
}"
:class="textClass"
>
{{ item.meta.title }}
{{ transformI18n(item.meta.title) }}
</ReText>
<SidebarExtraIcon v-if="!isCollapse" :extraIcon="item.meta.extraIcon" />
</template>

View File

@@ -1,18 +1,20 @@
<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { useGlobal } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuFold from "~icons/ri/menu-fold-fill";
interface Props {
isActive: boolean;
isActive?: boolean;
}
withDefaults(defineProps<Props>(), {
isActive: false
});
const { t } = useI18n();
const { tooltipEffect } = useNav();
const iconClass = computed(() => {
@@ -21,7 +23,7 @@ const iconClass = computed(() => {
"mb-1",
"w-[16px]",
"h-[16px]",
"inline-block",
"inline-block!",
"align-middle",
"cursor-pointer",
"duration-[100ms]"
@@ -44,7 +46,9 @@ const toggleClick = () => {
<div class="left-collapse">
<IconifyIconOffline
v-tippy="{
content: isActive ? '点击折叠' : '点击展开',
content: isActive
? t('buttons.pureClickCollapse')
: t('buttons.pureClickExpand'),
theme: tooltipEffect,
hideOnClick: 'toggle',
placement: 'right'

View File

@@ -60,11 +60,11 @@ const { title, getLogo } = useNav();
height: 32px;
margin: 2px 0 0 12px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px;
font-weight: 600;
line-height: 32px;
color: var(--pure-theme-sub-menu-active-text);
text-overflow: ellipsis;
white-space: nowrap;
}
}

View File

@@ -1,15 +1,18 @@
<script setup lang="ts">
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
import { useI18n } from "vue-i18n";
import MenuFold from "~icons/ri/menu-fold-fill";
import MenuUnfold from "~icons/ri/menu-unfold-fill";
interface Props {
isActive: boolean;
isActive?: boolean;
}
withDefaults(defineProps<Props>(), {
isActive: false
});
const { t } = useI18n();
const emit = defineEmits<{
(e: "toggleClick"): void;
}>();
@@ -22,12 +25,14 @@ const toggleClick = () => {
<template>
<div
class="px-3 mr-1 navbar-bg-hover"
:title="isActive ? '点击折叠' : '点击展开'"
:title="
isActive ? t('buttons.pureClickCollapse') : t('buttons.pureClickExpand')
"
@click="toggleClick"
>
<IconifyIconOffline
:icon="isActive ? MenuFold : MenuUnfold"
class="inline-block align-middle hover:text-primary dark:hover:!text-white"
class="inline-block! align-middle hover:text-primary dark:hover:text-white!"
/>
</div>
</template>

View File

@@ -59,10 +59,10 @@
color: var(--el-color-primary);
cursor: pointer;
border-radius: 4px;
transform: translate(0, -50%);
transition:
background-color 0.12s,
color 0.12s;
transform: translate(0, -50%);
&:hover {
color: rgb(0 0 0 / 88%) !important;
@@ -127,10 +127,10 @@
font-weight: normal;
color: var(--el-text-color-primary);
white-space: nowrap;
outline: 0;
list-style-type: none;
background: #fff;
border-radius: 4px;
outline: 0;
box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
li {

View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
import { $t } from "@/plugins/i18n";
import { emitter } from "@/utils/mitt";
import NProgress from "@/utils/progress";
import { RouteConfigs } from "../../types";
import { useTags } from "../../hooks/useTag";
import { routerArrays } from "@/layout/types";
@@ -17,11 +19,11 @@ import {
useResizeObserver
} from "@pureadmin/utils";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import Fullscreen from "~icons/ri/fullscreen-fill";
import ArrowDown from "~icons/ri/arrow-down-s-line";
import ArrowRightSLine from "~icons/ri/arrow-right-s-line";
import ArrowLeftSLine from "~icons/ri/arrow-left-s-line";
const {
Close,
@@ -50,6 +52,7 @@ const {
onMounted,
onMouseenter,
onMouseleave,
transformI18n,
onContentFullScreen
} = useTags();
@@ -204,12 +207,14 @@ function dynamicRouteTag(value: string): void {
/** 刷新路由 */
function onFresh() {
NProgress.start();
const { fullPath, query } = unref(route);
router.replace({
path: "/redirect" + fullPath,
query
});
handleAliveRoute(route as ToRouteType, "refresh");
NProgress.done();
}
function deleteDynamicTag(obj: any, current: any, tag?: string) {
@@ -252,7 +257,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
if (tag === "other") {
spliceRoute(1, 1, true);
} else if (tag === "left") {
spliceRoute(fixedTags.length, valueIndex - 1, true);
spliceRoute(fixedTags.length, valueIndex - fixedTags.length);
} else if (tag === "right") {
spliceRoute(valueIndex + 1, multiTags.value.length);
} else {
@@ -342,16 +347,16 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
setTimeout(() => {
if (pureSetting.hiddenSideBar) {
tagsViews[6].icon = ExitFullscreen;
tagsViews[6].text = "内容区退出全屏";
tagsViews[6].text = $t("buttons.pureContentExitFullScreen");
} else {
tagsViews[6].icon = Fullscreen;
tagsViews[6].text = "内容区全屏";
tagsViews[6].text = $t("buttons.pureContentFullScreen");
}
}, 100);
break;
}
setTimeout(() => {
showMenuModel(route.fullPath, route.query);
showMenuModel(route.fullPath, route.query, route.params);
});
}
@@ -386,15 +391,18 @@ function disabledMenus(value: boolean, fixedTag = false) {
function showMenuModel(
currentPath: string,
query: object = {},
params: object = {},
refresh = false
) {
const allRoute = multiTags.value;
const routeLength = multiTags.value.length;
let currentIndex = -1;
if (isAllEmpty(query)) {
currentIndex = allRoute.findIndex(v => v.path === currentPath);
} else {
if (!isAllEmpty(params)) {
currentIndex = allRoute.findIndex(v => isEqual(v.params, params));
} else if (!isAllEmpty(query)) {
currentIndex = allRoute.findIndex(v => isEqual(v.query, query));
} else {
currentIndex = allRoute.findIndex(v => v.path === currentPath);
}
function fixedTagDisabled() {
if (allRoute[currentIndex]?.meta?.fixedTag) {
@@ -460,14 +468,14 @@ function openMenu(tag, e) {
} else if (route.path !== tag.path && route.name !== tag.name) {
// 右键菜单不匹配当前路由,隐藏刷新
tagsViews[0].show = false;
showMenuModel(tag.path, tag.query);
showMenuModel(tag.path, tag.query, tag.params);
} else if (multiTags.value.length === 2 && route.path !== tag.path) {
showMenus(true);
// 只有两个标签时不显示关闭其他标签页
tagsViews[4].show = false;
} else if (route.path === tag.path) {
// 右键当前激活的菜单
showMenuModel(tag.path, tag.query, true);
showMenuModel(tag.path, tag.query, tag.params);
} else {
showMenuModel(tag.path, tag.query, tag.params, true);
}
currentSelect.value = tag;
@@ -509,6 +517,7 @@ function tagOnClick(item) {
} else {
router.push({ path });
}
emitter.emit("tagOnClick", item);
}
onClickOutside(contextmenuRef, closeMenu, {
@@ -586,9 +595,9 @@ onBeforeUnmount(() => {
>
<template v-if="showModel !== 'chrome'">
<span
class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
>
{{ item.meta.title }}
{{ transformI18n(item.meta.title) }}
</span>
<span
v-if="
@@ -613,7 +622,7 @@ onBeforeUnmount(() => {
<TagChrome />
</div>
<span class="tag-title">
{{ item.meta.title }}
{{ transformI18n(item.meta.title) }}
</span>
<span
v-if="isFixedTag(item) ? false : index !== 0"
@@ -646,7 +655,7 @@ onBeforeUnmount(() => {
>
<li v-if="item.show" @click="selectTag(key, item)">
<IconifyIconOffline :icon="item.icon" />
{{ item.text }}
{{ transformI18n(item.text) }}
</li>
</div>
</ul>
@@ -670,7 +679,7 @@ onBeforeUnmount(() => {
:disabled="item.disabled"
>
<IconifyIconOffline :icon="item.icon" />
{{ item.text }}
{{ transformI18n(item.text) }}
</el-dropdown-item>
</el-dropdown-menu>
</template>

View File

@@ -1,4 +1,5 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { ref, unref, watch, onMounted, nextTick } from "vue";
@@ -13,17 +14,27 @@ const props = defineProps<{
};
}>();
const { t } = useI18n();
const loading = ref(true);
const currentRoute = useRoute();
const frameSrc = ref<string>("");
const frameRef = ref<HTMLElement | null>(null);
const fallbackTimer = ref<number | null>(null);
if (unref(currentRoute.meta)?.frameSrc) {
frameSrc.value = unref(currentRoute.meta)?.frameSrc as string;
}
unref(currentRoute.meta)?.frameLoading === false && hideLoading();
function clearFallbackTimer() {
if (fallbackTimer.value !== null) {
clearTimeout(fallbackTimer.value);
fallbackTimer.value = null;
}
}
function hideLoading() {
loading.value = false;
clearFallbackTimer();
}
function init() {
@@ -32,32 +43,42 @@ function init() {
if (!iframe) return;
const _frame = iframe as any;
if (_frame.attachEvent) {
_frame.attachEvent("onload", () => {
hideLoading();
});
_frame.attachEvent("onload", hideLoading);
} else {
iframe.onload = () => {
hideLoading();
};
iframe.onload = hideLoading;
}
});
}
let isRedirect = false;
watch(
() => currentRoute.fullPath,
path => {
if (
currentRoute.name === "Redirect" &&
path.includes(props.frameInfo?.fullPath)
props.frameInfo?.fullPath &&
path.includes(props.frameInfo.fullPath)
) {
frameSrc.value = path; // redirect时置换成任意值待重定向后 重新赋值
isRedirect = true;
loading.value = true;
return;
}
// 重新赋值
if (props.frameInfo?.fullPath === path) {
frameSrc.value = props.frameInfo?.frameSrc;
if (props.frameInfo?.fullPath === path && isRedirect) {
loading.value = true;
clearFallbackTimer();
const url = new URL(props.frameInfo.frameSrc, window.location.origin);
const joinChar = url.search ? "&" : "?";
frameSrc.value = `${props.frameInfo.frameSrc}${joinChar}t=${Date.now()}`;
fallbackTimer.value = window.setTimeout(() => {
if (loading.value) {
hideLoading();
}
}, 1500);
isRedirect = false;
}
},
{ immediate: true }
);
onMounted(() => {
@@ -66,7 +87,11 @@ onMounted(() => {
</script>
<template>
<div v-loading="loading" class="frame" element-loading-text="加载中...">
<div
v-loading="loading"
class="frame"
:element-loading-text="t('status.pureLoad')"
>
<iframe ref="frameRef" :src="frameSrc" class="frame-iframe" />
</div>
</template>

View File

@@ -1,4 +1,5 @@
import { computed } from "vue";
import { useI18n } from "vue-i18n";
import { routerArrays } from "../types";
import { useGlobal } from "@pureadmin/utils";
import { useMultiTagsStore } from "@/store/modules/multiTags";
@@ -14,6 +15,11 @@ export function useLayout() {
) {
$storage.tags = routerArrays;
}
/** 国际化 */
if (!$storage.locale) {
$storage.locale = { locale: $config?.Locale ?? "zh" };
useI18n().locale.value = $config?.Locale ?? "zh";
}
/** 导航 */
if (!$storage.layout) {
$storage.layout = {

View File

@@ -1,25 +1,26 @@
import { storeToRefs } from "pinia";
import { getConfig } from "@/config";
import { useRouter } from "vue-router";
import { emitter } from "@/utils/mitt";
import Avatar from "@/assets/user.jpg";
import { getTopMenu } from "@/router/utils";
import { useFullscreen } from "@vueuse/core";
import type { routeMetaType } from "../types";
import { useRouter, useRoute } from "vue-router";
import { transformI18n } from "@/plugins/i18n";
import { router, remainingPaths } from "@/router";
import { computed, type CSSProperties } from "vue";
import { useAppStoreHook } from "@/store/modules/app";
import { useUserStoreHook } from "@/store/modules/user";
import { useGlobal, isAllEmpty } from "@pureadmin/utils";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { usePermissionStoreHook } from "@/store/modules/permission";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import Fullscreen from "~icons/ri/fullscreen-fill";
const errorInfo =
"The current routing configuration is incorrect, please check the configuration";
export function useNav() {
const route = useRoute();
const pureApp = useAppStoreHook();
const routers = useRouter().options.routes;
const { isFullscreen, toggle } = useFullscreen();
@@ -51,6 +52,22 @@ export function useNav() {
: useUserStoreHook()?.nickname;
});
/** 设置国际化选中后的样式 */
const getDropdownItemStyle = computed(() => {
return (locale, t) => {
return {
background: locale === t ? useEpThemeStoreHook().epThemeColor : "",
color: locale === t ? "#f4f4f5" : "#000"
};
};
});
const getDropdownItemClass = computed(() => {
return (locale, t) => {
return locale === t ? "" : "dark:hover:text-primary!";
};
});
const avatarsStyle = computed(() => {
return username.value ? { marginRight: "10px" } : "";
});
@@ -75,8 +92,8 @@ export function useNav() {
/** 动态title */
function changeTitle(meta: routeMetaType) {
const Title = getConfig().Title;
if (Title) document.title = `${meta.title} | ${Title}`;
else document.title = meta.title;
if (Title) document.title = `${transformI18n(meta.title)} | ${Title}`;
else document.title = transformI18n(meta.title);
}
/** 退出登录 */
@@ -127,7 +144,6 @@ export function useNav() {
}
return {
route,
title,
device,
layout,
@@ -152,6 +168,8 @@ export function useNav() {
username,
userAvatar,
avatarsStyle,
tooltipEffect
tooltipEffect,
getDropdownItemStyle,
getDropdownItemClass
};
}

View File

@@ -9,6 +9,7 @@ import {
} from "vue";
import type { tagsViewsType } from "../types";
import { useRoute, useRouter } from "vue-router";
import { transformI18n, $t } from "@/plugins/i18n";
import { responsiveStorageNameSpace } from "@/config";
import { useSettingStoreHook } from "@/store/modules/settings";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
@@ -20,13 +21,13 @@ import {
hasClass
} from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import CloseAllTags from "@iconify-icons/ri/subtract-line";
import CloseOtherTags from "@iconify-icons/ri/text-spacing";
import CloseRightTags from "@iconify-icons/ri/text-direction-l";
import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
import RefreshRight from "@iconify-icons/ep/refresh-right";
import Close from "@iconify-icons/ep/close";
import Fullscreen from "~icons/ri/fullscreen-fill";
import CloseAllTags from "~icons/ri/subtract-line";
import CloseOtherTags from "~icons/ri/text-spacing";
import CloseRightTags from "~icons/ri/text-direction-l";
import CloseLeftTags from "~icons/ri/text-direction-r";
import RefreshRight from "~icons/ep/refresh-right";
import Close from "~icons/ep/close";
export function useTags() {
const route = useRoute();
@@ -63,49 +64,49 @@ export function useTags() {
const tagsViews = reactive<Array<tagsViewsType>>([
{
icon: RefreshRight,
text: "重新加载",
text: $t("buttons.pureReload"),
divided: false,
disabled: false,
show: true
},
{
icon: Close,
text: "关闭当前标签页",
text: $t("buttons.pureCloseCurrentTab"),
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
show: true
},
{
icon: CloseLeftTags,
text: "关闭左侧标签页",
text: $t("buttons.pureCloseLeftTabs"),
divided: true,
disabled: multiTags.value.length > 1 ? false : true,
show: true
},
{
icon: CloseRightTags,
text: "关闭右侧标签页",
text: $t("buttons.pureCloseRightTabs"),
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
show: true
},
{
icon: CloseOtherTags,
text: "关闭其他标签页",
text: $t("buttons.pureCloseOtherTabs"),
divided: true,
disabled: multiTags.value.length > 2 ? false : true,
show: true
},
{
icon: CloseAllTags,
text: "关闭全部标签页",
text: $t("buttons.pureCloseAllTabs"),
divided: false,
disabled: multiTags.value.length > 1 ? false : true,
show: true
},
{
icon: Fullscreen,
text: "内容区全屏",
text: $t("buttons.pureContentFullScreen"),
divided: true,
disabled: false,
show: true
@@ -113,14 +114,21 @@ export function useTags() {
]);
function conditionHandle(item, previous, next) {
const currentName = route.name || "";
const itemName = item.name || "";
if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
if (Object.keys(route.query).length > 0) {
return isEqual(route.query, item.query) ? previous : next;
return currentName === itemName && isEqual(route.query, item.query)
? previous
: next;
} else {
return isEqual(route.params, item.params) ? previous : next;
return currentName === itemName && isEqual(route.params, item.params)
? previous
: next;
}
} else {
return route.path === item.path ? previous : next;
return currentName === itemName ? previous : next;
}
}
@@ -236,10 +244,12 @@ export function useTags() {
currentSelect,
scheduleIsActive,
getContextMenuStyle,
$t,
closeMenu,
onMounted,
onMouseenter,
onMouseleave,
transformI18n,
onContentFullScreen
};
}

View File

@@ -0,0 +1,41 @@
import { useNav } from "./useNav";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { watch, onBeforeMount, type Ref } from "vue";
export function useTranslationLang(ref?: Ref) {
const { $storage, changeTitle, handleResize } = useNav();
const { locale, t } = useI18n();
const route = useRoute();
function translationCh() {
$storage.locale = { locale: "zh" };
locale.value = "zh";
ref && handleResize(ref.value);
}
function translationEn() {
$storage.locale = { locale: "en" };
locale.value = "en";
ref && handleResize(ref.value);
}
watch(
() => locale.value,
() => {
changeTitle(route.meta);
}
);
onBeforeMount(() => {
locale.value = $storage.locale?.locale ?? "zh";
});
return {
t,
route,
locale,
translationCh,
translationEn
};
}

View File

@@ -3,6 +3,7 @@ import "animate.css";
// 引入 src/components/ReIcon/src/offlineIcon.ts 文件中所有使用addIcon添加过的本地图标
import "@/components/ReIcon/src/offlineIcon";
import { setType } from "./types";
import { useI18n } from "vue-i18n";
import { useLayout } from "./hooks/useLayout";
import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "@/store/modules/settings";
@@ -31,6 +32,7 @@ import NavVertical from "./components/lay-sidebar/NavVertical.vue";
import NavHorizontal from "./components/lay-sidebar/NavHorizontal.vue";
import BackTopIcon from "@/assets/svg/back_top.svg?component";
const { t } = useI18n();
const appWrapperRef = ref();
const { isDark } = useDark();
const { layout } = useLayout();
@@ -186,7 +188,7 @@ const LayHeader = defineComponent({
</div>
<el-scrollbar v-else>
<el-backtop
title="回到顶部"
:title="t('buttons.pureBackTop')"
target=".main-container .el-scrollbar__wrap"
>
<BackTopIcon />
@@ -208,8 +210,8 @@ const LayHeader = defineComponent({
height: 100%;
&::after {
display: table;
clear: both;
display: table;
content: "";
}

View File

@@ -1,4 +1,4 @@
import type { IconifyIcon } from "@iconify/vue";
import type { FunctionalComponent } from "vue";
const { VITE_HIDE_HOME } = import.meta.env;
export const routerArrays: Array<RouteConfigs> =
@@ -6,9 +6,10 @@ export const routerArrays: Array<RouteConfigs> =
? [
{
path: "/welcome",
name: "Welcome",
meta: {
title: "首页",
icon: "ep:home-filled"
title: "menus.pureHome",
icon: "ep/home-filled"
}
}
]
@@ -16,7 +17,7 @@ export const routerArrays: Array<RouteConfigs> =
export type routeMetaType = {
title?: string;
icon?: string | IconifyIcon;
icon?: string | FunctionalComponent;
showLink?: boolean;
savedPosition?: boolean;
auths?: Array<string>;
@@ -36,7 +37,7 @@ export type multiTagsType = {
};
export type tagsViewsType = {
icon: string | IconifyIcon;
icon: string | FunctionalComponent;
text: string;
divided: boolean;
disabled: boolean;

View File

@@ -1,6 +1,7 @@
import App from "./App.vue";
import router from "./router";
import { setupStore } from "@/store";
import { useI18n } from "@/plugins/i18n";
import { getPlatformConfig } from "./config";
import { MotionPlugin } from "@vueuse/motion";
// import { useEcharts } from "@/plugins/echarts";
@@ -57,7 +58,7 @@ getPlatformConfig(app).then(async config => {
app.use(router);
await router.isReady();
injectResponsiveStorage(app, config);
app.use(MotionPlugin).use(useElementPlus).use(Table);
app.use(MotionPlugin).use(useI18n).use(useElementPlus).use(Table);
// .use(PureDescriptions)
// .use(useEcharts);
app.mount("#app");

116
src/plugins/i18n.ts Normal file
View File

@@ -0,0 +1,116 @@
// 多组件库的国际化和本地项目国际化兼容
import { type I18n, createI18n } from "vue-i18n";
import type { App, WritableComputedRef } from "vue";
import { responsiveStorageNameSpace } from "@/config";
import { storageLocal, isObject } from "@pureadmin/utils";
// element-plus国际化
import enLocale from "element-plus/es/locale/lang/en";
import zhLocale from "element-plus/es/locale/lang/zh-cn";
const siphonI18n = (function () {
// 仅初始化一次国际化配置
const cache = Object.fromEntries(
Object.entries(
import.meta.glob("../../locales/*.y(a)?ml", { eager: true })
).map(([key, value]: any) => {
const matched = key.match(/([A-Za-z0-9-_]+)\./i)[1];
return [matched, value.default];
})
);
return (prefix = "zh-CN") => {
return cache[prefix];
};
})();
export const localesConfigs = {
zh: {
...siphonI18n("zh-CN"),
...zhLocale
},
en: {
...siphonI18n("en"),
...enLocale
}
};
/** 获取对象中所有嵌套对象的key键并将它们用点号分割组成字符串 */
function getObjectKeys(obj) {
const stack = [];
const keys: Set<string> = new Set();
stack.push({ obj, key: "" });
while (stack.length > 0) {
const { obj, key } = stack.pop();
for (const k in obj) {
const newKey = key ? `${key}.${k}` : k;
if (obj[k] && isObject(obj[k])) {
stack.push({ obj: obj[k], key: newKey });
} else {
keys.add(key);
}
}
}
return keys;
}
/** 将展开的key缓存 */
const keysCache: Map<string, Set<string>> = new Map();
const flatI18n = (prefix = "zh-CN") => {
let cache = keysCache.get(prefix);
if (!cache) {
cache = getObjectKeys(siphonI18n(prefix));
keysCache.set(prefix, cache);
}
return cache;
};
/**
* 国际化转换工具函数自动读取根目录locales文件夹下文件进行国际化匹配
* @param message message
* @returns 转化后的message
*/
export function transformI18n(message: any = "") {
if (!message) {
return "";
}
// 处理存储动态路由的title,格式 {zh:"",en:""}
if (typeof message === "object") {
const locale: string | WritableComputedRef<string> | any =
i18n.global.locale;
return message[locale?.value];
}
const key = message.match(/(\S*)\./)?.input;
if (key && flatI18n("zh-CN").has(key)) {
return i18n.global.t.call(i18n.global.locale, message);
} else if (!key && Object.hasOwn(siphonI18n("zh-CN"), message)) {
// 兼容非嵌套形式的国际化写法
return i18n.global.t.call(i18n.global.locale, message);
} else {
return message;
}
}
/** 此函数只是配合i18n Ally插件来进行国际化智能提示并无实际意义只对提示起作用如果不需要国际化可删除 */
export const $t = (key: string) => key;
export const i18n: I18n = createI18n({
legacy: false,
locale:
storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}locale`
)?.locale ?? "zh",
fallbackLocale: "en",
messages: localesConfigs
});
export function useI18n(app: App) {
app.use(i18n);
}

View File

@@ -2,11 +2,18 @@
import Cookies from "js-cookie";
import { getConfig } from "@/config";
import NProgress from "@/utils/progress";
import { transformI18n } from "@/plugins/i18n";
import { buildHierarchyTree } from "@/utils/tree";
import remainingRouter from "./modules/remaining";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { isUrl, openLink, storageLocal, isAllEmpty } from "@pureadmin/utils";
import {
isUrl,
openLink,
cloneDeep,
isAllEmpty,
storageLocal
} from "@pureadmin/utils";
import {
ascending,
getTopMenu,
@@ -20,9 +27,9 @@ import {
} from "./utils";
import {
type Router,
createRouter,
type RouteRecordRaw,
type RouteComponent
type RouteComponent,
createRouter
} from "vue-router";
import {
type DataInfo,
@@ -54,6 +61,9 @@ export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
);
/** 初始的静态路由,用于退出登录时重置路由 */
const initConstantRoutes: Array<RouteRecordRaw> = cloneDeep(constantRoutes);
/** 用于渲染菜单,保持原始层级 */
export const constantMenus: Array<RouteComponent> = ascending(
routes.flat(Infinity)
@@ -84,20 +94,25 @@ export const router: Router = createRouter({
}
});
/** 记录已经加载的页面路径 */
const loadedPaths = new Set<string>();
/** 重置已加载页面记录 */
export function resetLoadedPaths() {
loadedPaths.clear();
}
/** 重置路由 */
export function resetRouter() {
router.getRoutes().forEach(route => {
const { name, meta } = route;
if (name && router.hasRoute(name) && meta?.backstage) {
router.removeRoute(name);
router.options.routes = formatTwoStageRoutes(
formatFlatteningRoutes(
buildHierarchyTree(ascending(routes.flat(Infinity)))
)
);
router.clearRoutes();
for (const route of initConstantRoutes.concat(...(remainingRouter as any))) {
router.addRoute(route);
}
});
router.options.routes = formatTwoStageRoutes(
formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
);
usePermissionStoreHook().clearAllCachePage();
resetLoadedPaths();
}
/** 路由白名单 */
@@ -106,6 +121,12 @@ const whiteList = ["/login"];
const { VITE_HIDE_HOME } = import.meta.env;
router.beforeEach((to: ToRouteType, _from, next) => {
to.meta.loaded = loadedPaths.has(to.path);
if (!to.meta.loaded) {
NProgress.start();
}
if (to.meta?.keepAlive) {
handleAliveRoute(to, "add");
// 页面整体刷新和点击标签页刷新
@@ -114,14 +135,14 @@ router.beforeEach((to: ToRouteType, _from, next) => {
}
}
const userInfo = storageLocal().getItem<DataInfo<number>>(userKey);
NProgress.start();
const externalLink = isUrl(to?.name as string);
if (!externalLink) {
to.matched.some(item => {
if (!item.meta.title) return "";
const Title = getConfig().Title;
if (Title) document.title = `${item.meta.title} | ${Title}`;
else document.title = item.meta.title as string;
if (Title)
document.title = `${transformI18n(item.meta.title)} | ${Title}`;
else document.title = transformI18n(item.meta.title);
});
}
/** 如果已经登录并存在登录信息后不能跳转到路由白名单,而是继续保持在当前页面 */
@@ -199,7 +220,8 @@ router.beforeEach((to: ToRouteType, _from, next) => {
}
});
router.afterEach(() => {
router.afterEach(to => {
loadedPaths.add(to.path);
NProgress.done();
});

View File

@@ -1,10 +1,12 @@
import { $t } from "@/plugins/i18n";
export default {
path: "/error",
redirect: "/error/403",
meta: {
icon: "ri:information-line",
icon: "ri/information-line",
// showLink: false,
title: "异常页面",
title: $t("menus.pureAbnormal"),
rank: 9
},
children: [
@@ -13,7 +15,7 @@ export default {
name: "403",
component: () => import("@/views/error/403.vue"),
meta: {
title: "403"
title: $t("menus.pureAccessDenied")
}
},
{
@@ -21,7 +23,7 @@ export default {
name: "404",
component: () => import("@/views/error/404.vue"),
meta: {
title: "404"
title: $t("menus.purePageNotFound")
}
},
{
@@ -29,7 +31,7 @@ export default {
name: "500",
component: () => import("@/views/error/500.vue"),
meta: {
title: "500"
title: $t("menus.pureServerError")
}
}
]

View File

@@ -1,3 +1,4 @@
import { $t } from "@/plugins/i18n";
const { VITE_HIDE_HOME } = import.meta.env;
const Layout = () => import("@/layout/index.vue");
@@ -7,8 +8,8 @@ export default {
component: Layout,
redirect: "/welcome",
meta: {
icon: "ep:home-filled",
title: "首页",
icon: "ep/home-filled",
title: $t("menus.pureHome"),
rank: 0
},
children: [
@@ -17,7 +18,7 @@ export default {
name: "Welcome",
component: () => import("@/views/welcome/index.vue"),
meta: {
title: "首页",
title: $t("menus.pureHome"),
showLink: VITE_HIDE_HOME === "true" ? false : true
}
}

View File

@@ -1,3 +1,4 @@
import { $t } from "@/plugins/i18n";
const Layout = () => import("@/layout/index.vue");
export default [
@@ -6,18 +7,36 @@ export default [
name: "Login",
component: () => import("@/views/login/index.vue"),
meta: {
title: "登录",
showLink: false,
rank: 101
title: $t("menus.pureLogin"),
showLink: false
}
},
// 全屏403无权访问页面
{
path: "/access-denied",
name: "AccessDenied",
component: () => import("@/views/error/403.vue"),
meta: {
title: $t("menus.pureAccessDenied"),
showLink: false
}
},
// 全屏500服务器出错页面
{
path: "/server-error",
name: "ServerError",
component: () => import("@/views/error/500.vue"),
meta: {
title: $t("menus.pureServerError"),
showLink: false
}
},
{
path: "/redirect",
component: Layout,
meta: {
title: "加载中...",
showLink: false,
rank: 102
title: $t("status.pureLoad"),
showLink: false
},
children: [
{

View File

@@ -139,12 +139,17 @@ function findRouteByPath(path: string, routes: RouteRecordRaw[]) {
}
}
/** 动态路由注册完成后再添加全屏404页面不存在页面避免刷新动态路由页面时误跳转到404页面 */
function addPathMatch() {
if (!router.hasRoute("pathMatch")) {
router.addRoute({
path: "/:pathMatch(.*)",
name: "pathMatch",
redirect: "/error/404"
path: "/:pathMatch(.*)*",
name: "PageNotFound",
component: () => import("@/views/error/404.vue"),
meta: {
title: "menus.purePageNotFound",
showLink: false
}
});
}
}
@@ -172,6 +177,8 @@ function handleAsyncRoutes(routeList) {
const flattenRouters: any = router
.getRoutes()
.find(n => n.path === "/");
// 保持router.options.routes[0].children与path为"/"的children一致防止数据不一致导致异常
flattenRouters.children = router.options.routes[0].children;
router.addRoute(flattenRouters);
}
}

View File

@@ -8,8 +8,7 @@ import {
responsiveStorageNameSpace
} from "../utils";
export const useAppStore = defineStore({
id: "pure-app",
export const useAppStore = defineStore("pure-app", {
state: (): appType => ({
sidebar: {
opened:
@@ -77,9 +76,6 @@ export const useAppStore = defineStore({
},
setViewportSize(size) {
this.viewportSize = size;
},
setSortSwap(val) {
this.sortSwap = val;
}
}
});

View File

@@ -6,8 +6,7 @@ import {
responsiveStorageNameSpace
} from "../utils";
export const useEpThemeStore = defineStore({
id: "pure-epTheme",
export const useEpThemeStore = defineStore("pure-epTheme", {
state: () => ({
epThemeColor:
storageLocal().getItem<StorageConfigs>(

View File

@@ -14,8 +14,7 @@ import {
} from "../utils";
import { usePermissionStoreHook } from "./permission";
export const useMultiTagsStore = defineStore({
id: "pure-multiTags",
export const useMultiTagsStore = defineStore("pure-multiTags", {
state: () => ({
// 存储标签页信息(路由信息)
multiTags: storageLocal().getItem<StorageConfigs>(
@@ -24,12 +23,12 @@ export const useMultiTagsStore = defineStore({
? storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}tags`
)
: [
: ([
...routerArrays,
...usePermissionStoreHook().flatteningRoutes.filter(
v => v?.meta?.fixedTag
)
],
] as any),
multiTagsCache: storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}configure`
)?.multiTagsCache
@@ -81,22 +80,15 @@ export const useMultiTagsStore = defineStore({
if (isBoolean(tagVal?.meta?.showLink) && !tagVal?.meta?.showLink)
return;
const tagPath = tagVal.path;
// 判断tag是否已存在
const tagHasExits = this.multiTags.some(tag => {
return tag.path === tagPath;
return (
tag.path === tagPath &&
isEqual(tag?.query, tagVal?.query) &&
isEqual(tag?.params, tagVal?.params)
);
});
// 判断tag中的query键值是否相等
const tagQueryHasExits = this.multiTags.some(tag => {
return isEqual(tag?.query, tagVal?.query);
});
// 判断tag中的params键值是否相等
const tagParamsHasExits = this.multiTags.some(tag => {
return isEqual(tag?.params, tagVal?.params);
});
if (tagHasExits && tagQueryHasExits && tagParamsHasExits) return;
if (tagHasExits) return;
// 动态路由可打开的最大数量
const dynamicLevel = tagVal?.meta?.dynamicLevel ?? -1;

View File

@@ -2,7 +2,6 @@ import { defineStore } from "pinia";
import {
type cacheType,
store,
debounce,
ascending,
getKeyList,
filterTree,
@@ -12,8 +11,7 @@ import {
} from "../utils";
import { useMultiTagsStoreHook } from "./multiTags";
export const usePermissionStore = defineStore({
id: "pure-permission",
export const usePermissionStore = defineStore("pure-permission", {
state: () => ({
// 静态路由生成的菜单
constantMenus,
@@ -31,24 +29,11 @@ export const usePermissionStore = defineStore({
filterTree(ascending(this.constantMenus.concat(routes)))
);
this.flatteningRoutes = formatFlatteningRoutes(
this.constantMenus.concat(routes)
this.constantMenus.concat(routes) as any
);
},
cacheOperate({ mode, name }: cacheType) {
const delIndex = this.cachePageList.findIndex(v => v === name);
switch (mode) {
case "refresh":
this.cachePageList = this.cachePageList.filter(v => v !== name);
break;
case "add":
this.cachePageList.push(name);
break;
case "delete":
delIndex !== -1 && this.cachePageList.splice(delIndex, 1);
break;
}
/** 监听缓存页面是否存在于标签页,不存在则删除 */
debounce(() => {
clearCache() {
let cacheLength = this.cachePageList.length;
const nameList = getKeyList(useMultiTagsStoreHook().multiTags, "name");
while (cacheLength > 0) {
@@ -60,7 +45,22 @@ export const usePermissionStore = defineStore({
);
cacheLength--;
}
})();
},
cacheOperate({ mode, name }: cacheType) {
const delIndex = this.cachePageList.findIndex(v => v === name);
switch (mode) {
case "refresh":
this.cachePageList = this.cachePageList.filter(v => v !== name);
this.clearCache();
break;
case "add":
this.cachePageList.push(name);
break;
case "delete":
delIndex !== -1 && this.cachePageList.splice(delIndex, 1);
this.clearCache();
break;
}
},
/** 清空缓存页面 */
clearAllCachePage() {

View File

@@ -1,8 +1,7 @@
import { defineStore } from "pinia";
import { type setType, store, getConfig } from "../utils";
export const useSettingStore = defineStore({
id: "pure-setting",
export const useSettingStore = defineStore("pure-setting", {
state: (): setType => ({
title: getConfig().Title,
fixedHeader: getConfig().FixedHeader,

View File

@@ -16,8 +16,7 @@ import {
import { useMultiTagsStoreHook } from "./multiTags";
import { type DataInfo, setToken, removeToken, userKey } from "@/utils/auth";
export const useUserStore = defineStore({
id: "pure-user",
export const useUserStore = defineStore("pure-user", {
state: (): userType => ({
// 头像
avatar: storageLocal().getItem<DataInfo<number>>(userKey)?.avatar ?? "",

View File

@@ -83,8 +83,8 @@
.el-upload-list__item.is-ready &.el-icon--close {
width: 24px;
height: 24px;
border-radius: 4px;
outline: none;
border-radius: 4px;
transition:
background-color 0.2s,
color 0.2s;
@@ -117,8 +117,8 @@
}
& .el-message__closeBtn {
border-radius: 4px;
outline: none;
border-radius: 4px;
transition:
background-color 0.2s,
color 0.2s;

View File

@@ -1,12 +1,3 @@
*,
::before,
::after {
box-sizing: border-box;
border-color: currentColor;
border-style: solid;
border-width: 0;
}
#app {
width: 100%;
height: 100%;
@@ -25,7 +16,8 @@ body {
width: 100%;
height: 100%;
margin: 0;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
font-family:
"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
line-height: inherit;
-moz-osx-font-smoothing: grayscale;
@@ -57,8 +49,9 @@ code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-family:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
"Courier New", monospace;
font-size: 1em;
}

View File

@@ -172,10 +172,6 @@
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: var(--pure-theme-sub-menu-active-text) !important;
i {
color: var(--pure-theme-sub-menu-active-text) !important;
}
}
.is-active {
@@ -191,8 +187,8 @@
.el-menu-item.is-active.nest-menu::before {
position: absolute;
inset: 0 8px;
margin: 4px 0;
clear: both;
margin: 4px 0;
content: "";
background: var(--el-color-primary) !important;
border-radius: 3px;
@@ -212,13 +208,13 @@
position: absolute;
top: 0;
left: 0;
clear: both;
width: 2px;
height: 100%;
clear: both;
content: "";
background-color: var(--pure-theme-menu-active-before);
transition: all var(--pure-transition-duration) ease-in-out;
transform: translateY(0);
transition: all var(--pure-transition-duration) ease-in-out;
}
.el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
@@ -240,8 +236,8 @@
.is-active.submenu-title-noDropdown.outer-most::before {
position: absolute;
inset: 0 8px;
margin: 4px 0;
clear: both;
margin: 4px 0;
content: "";
background: var(--el-color-primary) !important;
border-radius: 3px;
@@ -270,10 +266,6 @@
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: var(--pure-theme-sub-menu-active-text) !important;
i {
color: var(--pure-theme-sub-menu-active-text) !important;
}
}
/* 子菜单中还有子菜单 */
@@ -374,10 +366,6 @@
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: var(--pure-theme-sub-menu-active-text) !important;
i {
color: var(--pure-theme-sub-menu-active-text) !important;
}
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
@@ -435,11 +423,11 @@
height: 32px;
margin: 2px 0 0 12px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px;
font-weight: 600;
line-height: 32px;
color: var(--pure-theme-sub-menu-active-text);
text-overflow: ellipsis;
white-space: nowrap;
}
}
@@ -460,6 +448,8 @@
/* 搜索 */
.search-container,
/* 国际化 */
.globalization,
/* 全屏 */
.fullscreen-icon,
/* 消息通知 */
@@ -478,6 +468,15 @@
color: var(--pure-theme-sub-menu-active-text);
}
.globalization {
width: 40px;
height: 48px;
padding: 11px;
color: var(--pure-theme-sub-menu-active-text);
cursor: pointer;
outline: none;
}
.el-dropdown-link {
display: flex;
align-items: center;
@@ -530,10 +529,6 @@
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: var(--pure-theme-sub-menu-active-text) !important;
i {
color: var(--pure-theme-sub-menu-active-text) !important;
}
}
.is-active {
@@ -566,8 +561,8 @@
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
transition-duration: 0.3s;
}
}
}
@@ -610,10 +605,10 @@ body[layout="vertical"] {
.el-sub-menu {
& > .el-sub-menu__title {
& > span {
visibility: visible;
width: 100%;
height: 100%;
text-align: center;
visibility: visible;
}
}
}
@@ -634,6 +629,8 @@ body[layout="vertical"] {
/* 搜索 */
.search-container,
/* 国际化 */
.globalization,
/* 全屏 */
.fullscreen-icon,
/* 消息通知 */
@@ -653,6 +650,10 @@ body[layout="horizontal"] {
@include merge-style($sideBarWidth);
.el-menu {
--el-menu-hover-text-color: var(--pure-theme-menu-text) !important;
}
.fixed-header,
.main-container {
transition: none !important;
@@ -674,6 +675,7 @@ body[layout="mix"] {
.el-menu {
--el-menu-hover-bg-color: transparent !important;
--el-menu-hover-text-color: var(--pure-theme-menu-text) !important;
}
.hideSidebar {
@@ -702,10 +704,10 @@ body[layout="mix"] {
padding: 0;
& > span {
visibility: visible;
width: 100%;
height: 100%;
text-align: center;
visibility: visible;
}
}
}

View File

@@ -1,21 +1,46 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer theme, base, components, utilities;
@import "tailwindcss/theme.css" layer(theme);
@import "tailwindcss/utilities.css" layer(utilities);
@layer components {
.flex-c {
@custom-variant dark (&:is(.dark *));
@theme {
--color-bg_color: var(--el-bg-color);
--color-primary: var(--el-color-primary);
--color-text_color_primary: var(--el-text-color-primary);
--color-text_color_regular: var(--el-text-color-regular);
}
/*
The default border color has changed to `currentColor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentColor);
}
}
@utility flex-c {
@apply flex justify-center items-center;
}
.flex-ac {
@utility flex-ac {
@apply flex justify-around items-center;
}
.flex-bc {
@utility flex-bc {
@apply flex justify-between items-center;
}
.navbar-bg-hover {
@apply dark:text-white dark:hover:!bg-[#242424];
}
@utility navbar-bg-hover {
@apply dark:text-white dark:hover:bg-[#242424]!;
}

View File

@@ -10,7 +10,6 @@ import type {
PureHttpRequestConfig
} from "./types.d";
import { stringify } from "qs";
import NProgress from "../progress";
import { getToken, formatToken } from "@/utils/auth";
import { useUserStoreHook } from "@/store/modules/user";
@@ -61,8 +60,6 @@ class PureHttp {
private httpInterceptorsRequest(): void {
PureHttp.axiosInstance.interceptors.request.use(
async (config: PureHttpRequestConfig): Promise<any> => {
// 开启进度条动画
NProgress.start();
// 优先判断post/get等方法是否传入回调否则执行初始化设置等回调
if (typeof config.beforeRequestCallback === "function") {
config.beforeRequestCallback(config);
@@ -121,8 +118,6 @@ class PureHttp {
instance.interceptors.response.use(
(response: PureHttpResponse) => {
const $config = response.config;
// 关闭进度条动画
NProgress.done();
// 优先判断post/get等方法是否传入回调否则执行初始化设置等回调
if (typeof $config.beforeResponseCallback === "function") {
$config.beforeResponseCallback(response);
@@ -137,8 +132,6 @@ class PureHttp {
(error: PureHttpError) => {
const $error = error;
$error.isCancelRequest = Axios.isCancel($error);
// 关闭进度条动画
NProgress.done();
// 所有的响应异常 区分来源为取消请求/非取消请求
return Promise.reject($error);
}

View File

@@ -8,6 +8,8 @@ type messageTypes = "info" | "success" | "warning" | "error";
interface MessageParams {
/** 消息类型,可选 `info` 、`success` 、`warning` 、`error` ,默认 `info` */
type?: messageTypes;
/** 是否纯色,默认 `false` */
plain?: boolean;
/** 自定义图标,该属性会覆盖 `type` 的图标 */
icon?: any;
/** 是否将 `message` 属性作为 `HTML` 片段处理,默认 `false` */
@@ -18,14 +20,14 @@ interface MessageParams {
duration?: number;
/** 是否显示关闭按钮,默认值 `false` */
showClose?: boolean;
/** 文字是否居中,默认 `false` */
center?: boolean;
/** `Message` 距离窗口顶部的偏移量,默认 `20` */
/** `Message` 距离窗口顶部的偏移量,默认 `16` */
offset?: number;
/** 设置组件的根元素,默认 `document.body` */
appendTo?: string | HTMLElement;
/** 合并内容相同的消息,不支持 `VNode` 类型的消息,默认值 `false` */
grouping?: boolean;
/** 重复次数,类似于 `Badge` 。当和 `grouping` 属性一起使用时作为初始数量使用,默认值 `1` */
repeatNum?: number;
/** 关闭时的回调函数, 参数为被关闭的 `message` 实例 */
onClose?: Function | null;
}
@@ -48,28 +50,30 @@ const message = (
const {
icon,
type = "info",
plain = false,
dangerouslyUseHTMLString = false,
customClass = "antd",
duration = 2000,
showClose = false,
center = false,
offset = 20,
offset = 16,
appendTo = document.body,
grouping = false,
repeatNum = 1,
onClose
} = params;
return ElMessage({
message,
type,
icon,
type,
plain,
dangerouslyUseHTMLString,
duration,
showClose,
center,
offset,
appendTo,
grouping,
repeatNum,
// 全局搜 pure-message 即可知道该类的样式位置
customClass: customClass === "antd" ? "pure-message" : "",
onClose: () => (isFunction(onClose) ? onClose() : null)

View File

@@ -4,10 +4,11 @@ import mitt from "mitt";
/** 全局公共事件需要在此处添加类型 */
type Events = {
openPanel: string;
tagViewsChange: string;
tagViewsShowModel: string;
tagOnClick: string;
logoChange: boolean;
tagViewsChange: string;
changLayoutRoute: string;
tagViewsShowModel: string;
};
export const emitter: Emitter<Events> = mitt<Events>();

View File

@@ -9,6 +9,7 @@ const Print = function (dom, options?: object): PrintFunction {
options = options || {};
// @ts-expect-error
if (!(this instanceof Print)) return new Print(dom, options);
// @ts-expect-error
this.conf = {
styleStr: "",
// Elements that need to dynamically get and set the height
@@ -18,19 +19,26 @@ const Print = function (dom, options?: object): PrintFunction {
// Callback after printing
printDoneCallBack: null
};
// @ts-expect-error
for (const key in this.conf) {
if (key && options.hasOwnProperty(key)) {
// @ts-expect-error
this.conf[key] = options[key];
}
}
if (typeof dom === "string") {
// @ts-expect-error
this.dom = document.querySelector(dom);
} else {
// @ts-expect-error
this.dom = this.isDOM(dom) ? dom : dom.$el;
}
// @ts-expect-error
if (this.conf.setDomHeightArr && this.conf.setDomHeightArr.length) {
// @ts-expect-error
this.setDomHeight(this.conf.setDomHeightArr);
}
// @ts-expect-error
this.init();
};
@@ -132,8 +140,10 @@ Print.prototype = {
"position:absolute;width:0;height:0;top:-10px;left:-10px;"
);
// eslint-disable-next-line prefer-const
w = f.contentWindow || f.contentDocument;
// eslint-disable-next-line prefer-const
doc = f.contentDocument || f.contentWindow.document;
doc.open();
doc.write(content);

View File

@@ -8,6 +8,10 @@ export const injectResponsiveStorage = (app: App, config: PlatformConfigs) => {
const nameSpace = responsiveStorageNameSpace();
const configObj = Object.assign(
{
// 国际化 默认中文zh
locale: Storage.getData("locale", nameSpace) ?? {
locale: config.Locale ?? "zh"
},
// layout模式以及主题
layout: Storage.getData("layout", nameSpace) ?? {
layout: config.Layout ?? "vertical",

View File

@@ -10,12 +10,14 @@ const router = useRouter();
</script>
<template>
<div class="flex justify-center items-center h-[640px]">
<div
class="flex flex-col md:flex-row justify-center items-center min-h-full w-full p-4 md:p-0"
>
<noAccess />
<div class="ml-12">
<div class="mt-8 md:ml-12 md:mt-0 text-center md:text-left">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@@ -32,7 +34,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="text-xl mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100
@@ -50,6 +52,7 @@ const router = useRouter();
<el-button
v-motion
type="primary"
class="block mx-auto md:inline-block md:mx-0"
:initial="{
opacity: 0,
y: 100
@@ -68,3 +71,9 @@ const router = useRouter();
</div>
</div>
</template>
<style scoped>
.main-content {
margin: 0 !important;
}
</style>

View File

@@ -10,12 +10,14 @@ const router = useRouter();
</script>
<template>
<div class="flex justify-center items-center h-[640px]">
<div
class="flex flex-col md:flex-row justify-center items-center min-h-full w-full p-4 md:p-0"
>
<noExist />
<div class="ml-12">
<div class="mt-8 md:ml-12 md:mt-0 text-center md:text-left">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@@ -32,7 +34,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="text-xl mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100
@@ -50,6 +52,7 @@ const router = useRouter();
<el-button
v-motion
type="primary"
class="block mx-auto md:inline-block md:mx-0"
:initial="{
opacity: 0,
y: 100
@@ -68,3 +71,9 @@ const router = useRouter();
</div>
</div>
</template>
<style scoped>
.main-content {
margin: 0 !important;
}
</style>

View File

@@ -10,12 +10,14 @@ const router = useRouter();
</script>
<template>
<div class="flex justify-center items-center h-[640px]">
<div
class="flex flex-col md:flex-row justify-center items-center min-h-full w-full p-4 md:p-0"
>
<noServer />
<div class="ml-12">
<div class="mt-8 md:ml-12 md:mt-0 text-center md:text-left">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@@ -32,7 +34,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="text-xl mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100
@@ -50,6 +52,7 @@ const router = useRouter();
<el-button
v-motion
type="primary"
class="block mx-auto md:inline-block md:mx-0"
:initial="{
opacity: 0,
y: 100
@@ -68,3 +71,9 @@ const router = useRouter();
</div>
</div>
</template>
<style scoped>
.main-content {
margin: 0 !important;
}
</style>

View File

@@ -1,36 +1,47 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import Motion from "./utils/motion";
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
import { loginRules } from "./utils/rule";
import { ref, reactive, toRaw } from "vue";
import { debounce } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { useEventListener } from "@vueuse/core";
import type { FormInstance } from "element-plus";
import { $t, transformI18n } from "@/plugins/i18n";
import { useLayout } from "@/layout/hooks/useLayout";
import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
import { bg, avatar, illustration } from "./utils/static";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import Lock from "@iconify-icons/ri/lock-fill";
import User from "@iconify-icons/ri/user-3-fill";
import globalization from "@/assets/svg/globalization.svg?component";
import Lock from "~icons/ri/lock-fill";
import Check from "~icons/ep/check";
import User from "~icons/ri/user-3-fill";
defineOptions({
name: "Login"
});
const router = useRouter();
const loading = ref(false);
const disabled = ref(false);
const ruleFormRef = ref<FormInstance>();
const { initStorage } = useLayout();
initStorage();
const { t } = useI18n();
const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
dataThemeChange(overallStyle.value);
const { title } = useNav();
const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
const { locale, translationCh, translationEn } = useTranslationLang();
const ruleForm = reactive({
username: "admin",
@@ -39,21 +50,28 @@ const ruleForm = reactive({
const onLogin = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
await formEl.validate(valid => {
if (valid) {
loading.value = true;
useUserStoreHook()
.loginByUsername({ username: ruleForm.username, password: "admin123" })
.loginByUsername({
username: ruleForm.username,
password: ruleForm.password
})
.then(res => {
if (res.success) {
// 获取后端路由
return initRouter().then(() => {
router.push(getTopMenu(true).path).then(() => {
message("登录成功", { type: "success" });
});
disabled.value = true;
router
.push(getTopMenu(true).path)
.then(() => {
message(t("login.pureLoginSuccess"), { type: "success" });
})
.finally(() => (disabled.value = false));
});
} else {
message("登录失败", { type: "error" });
message(t("login.pureLoginFail"), { type: "error" });
}
})
.finally(() => (loading.value = false));
@@ -61,19 +79,19 @@ const onLogin = async (formEl: FormInstance | undefined) => {
});
};
/** 使用公共函数,避免`removeEventListener`失效 */
function onkeypress({ code }: KeyboardEvent) {
if (["Enter", "NumpadEnter"].includes(code)) {
onLogin(ruleFormRef.value);
}
}
const immediateDebounce: any = debounce(
formRef => onLogin(formRef),
1000,
true
);
onMounted(() => {
window.document.addEventListener("keypress", onkeypress);
});
onBeforeUnmount(() => {
window.document.removeEventListener("keypress", onkeypress);
useEventListener(document, "keydown", ({ code }) => {
if (
["Enter", "NumpadEnter"].includes(code) &&
!disabled.value &&
!loading.value
)
immediateDebounce(ruleFormRef.value);
});
</script>
@@ -89,6 +107,38 @@ onBeforeUnmount(() => {
:inactive-icon="darkIcon"
@change="dataThemeChange"
/>
<!-- 国际化 -->
<el-dropdown trigger="click">
<globalization
class="hover:text-primary hover:bg-[transparent]! w-[20px] h-[20px] ml-1.5 cursor-pointer outline-hidden duration-300"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
v-show="locale === 'zh'"
class="check-zh"
:icon="Check"
/>
简体中文
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">
<IconifyIconOffline :icon="Check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="login-container">
<div class="img">
@@ -98,7 +148,7 @@ onBeforeUnmount(() => {
<div class="login-form">
<avatar class="avatar" />
<Motion>
<h2 class="outline-none">{{ title }}</h2>
<h2 class="outline-hidden">{{ title }}</h2>
</Motion>
<el-form
@@ -112,7 +162,7 @@ onBeforeUnmount(() => {
:rules="[
{
required: true,
message: '请输入账号',
message: transformI18n($t('login.pureUsernameReg')),
trigger: 'blur'
}
]"
@@ -121,7 +171,7 @@ onBeforeUnmount(() => {
<el-input
v-model="ruleForm.username"
clearable
placeholder="账号"
:placeholder="t('login.pureUsername')"
:prefix-icon="useRenderIcon(User)"
/>
</el-form-item>
@@ -133,7 +183,7 @@ onBeforeUnmount(() => {
v-model="ruleForm.password"
clearable
show-password
placeholder="密码"
:placeholder="t('login.purePassword')"
:prefix-icon="useRenderIcon(Lock)"
/>
</el-form-item>
@@ -141,13 +191,14 @@ onBeforeUnmount(() => {
<Motion :delay="250">
<el-button
class="w-full mt-4"
class="w-full mt-4!"
size="default"
type="primary"
:loading="loading"
:disabled="disabled"
@click="onLogin(ruleFormRef)"
>
登录
{{ t("login.pureLogin") }}
</el-button>
</Motion>
</el-form>
@@ -165,4 +216,20 @@ onBeforeUnmount(() => {
:deep(.el-input-group__append, .el-input-group__prepend) {
padding: 0;
}
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
</style>

View File

@@ -1,21 +1,20 @@
import { reactive } from "vue";
import type { FormRules } from "element-plus";
import { $t, transformI18n } from "@/plugins/i18n";
/** 密码正则密码格式应为8-18位数字、字母、符号的任意两种组合 */
export const REGEXP_PWD =
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
/** 登录校验 */
const loginRules = reactive(<FormRules>{
const loginRules = reactive<FormRules>({
password: [
{
validator: (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入密码"));
callback(new Error(transformI18n($t("login.purePassWordReg"))));
} else if (!REGEXP_PWD.test(value)) {
callback(
new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
);
callback(new Error(transformI18n($t("login.purePassWordRuleReg"))));
} else {
callback();
}

View File

@@ -8,7 +8,7 @@ defineOptions({
<template>
<div>
<p class="mb-2">当前拥有的code列表{{ getAuths() }}</p>
<p class="mb-2!">当前拥有的code列表{{ getAuths() }}</p>
<el-card shadow="never" class="mb-2">
<template #header>

View File

@@ -11,8 +11,8 @@ defineOptions({
<template>
<div>
<p class="mb-2">当前拥有的code列表{{ permissions }}</p>
<p v-show="permissions?.[0] === '*:*:*'" class="mb-2">
<p class="mb-2!">当前拥有的code列表{{ permissions }}</p>
<p v-show="permissions?.[0] === '*:*:*'" class="mb-2!">
*:*:* 代表拥有全部按钮级别权限
</p>

View File

@@ -44,7 +44,7 @@ function onChange() {
<template>
<div>
<p class="mb-2">
<p class="mb-2!">
模拟后台根据不同角色返回对应路由观察左侧菜单变化管理员角色可查看系统管理菜单普通角色不可查看系统管理菜单
</p>
<el-card shadow="never" :style="elStyle">
@@ -53,7 +53,7 @@ function onChange() {
<span>当前角色{{ username }}</span>
</div>
</template>
<el-select v-model="username" class="!w-[160px]" @change="onChange">
<el-select v-model="username" class="w-[160px]!" @change="onChange">
<el-option
v-for="item in options"
:key="item.value"

View File

@@ -5,5 +5,5 @@ defineOptions({
</script>
<template>
<h1>Pure-Admin-Thin国际化版本</h1>
<h1>Pure-Admin-Thin国际化版本</h1>
</template>

View File

@@ -1,19 +0,0 @@
import type { Config } from "tailwindcss";
export default {
darkMode: "class",
corePlugins: {
preflight: false
},
content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
theme: {
extend: {
colors: {
bg_color: "var(--el-bg-color)",
primary: "var(--el-color-primary)",
text_color_primary: "var(--el-text-color-primary)",
text_color_regular: "var(--el-text-color-regular)"
}
}
}
} satisfies Config;

Some files were not shown because too many files have changed in this diff Show More