Compare commits

...

19 Commits

Author SHA1 Message Date
xiaoxian521
2b67efe771 release: update 3.9.0 2022-11-30 16:33:46 +08:00
xiaoxian521
bbe23ce0a2 release: update 3.8.7 2022-11-28 01:49:35 +08:00
xiaoxian521
68492ec362 docs: update 2022-11-27 18:05:55 +08:00
xiaoxian521
bc3b199860 release: update 3.8.6 2022-11-27 17:40:35 +08:00
xiaoxian521
4407dd5d10 perf: 无需安装 @vue/runtime-core,兼容 element-plus 的组件 volar 提示 2022-11-27 09:56:19 +08:00
xiaoxian521
b3cbdd6e87 release: update 3.8.5 2022-11-27 00:33:24 +08:00
xiaoxian521
b5f0ca52ce perf: 移除 @pureadmin/components , 打包大小未启用压缩前减少 0.48 MB , 首屏请求减少 2.3 MB 的资源,请务必升级哦 2022-11-26 21:23:43 +08:00
xiaoxian521
6110be29a1 release: update 3.8.0 2022-11-26 19:14:08 +08:00
xiaoxian521
d53496e495 chore: 同步完整版代码 2022-11-11 11:53:54 +08:00
xiaoxian521
1bafbeaab7 release: update 3.6.4 2022-11-10 12:28:10 +08:00
xiaoxian521
9a802296c7 perf: 优化路由守卫 2022-11-08 18:17:33 +08:00
xiaoxian521
e183ea75a0 feat: 菜单图标 icon 支持使用在线图标 2022-11-08 12:10:54 +08:00
xiaoxian521
969775c7cf perf: 优化代码 2022-11-08 01:25:44 +08:00
xiaoxian521
841c5bd53a release: update 3.6.3 2022-11-01 16:29:32 +08:00
xiaoxian521
761b0e5ec2 feat: 提交非国际化版本代码 2022-10-28 15:32:31 +08:00
xiaoxian521
b811256830 feat: 静态资源分类打包 2022-10-27 15:51:06 +08:00
xiaoxian521
6019739c16 chore: 同步完整版代码 2022-10-27 14:51:32 +08:00
xiaoxian521
0dd1c67280 release: update 3.6.2 2022-10-27 13:18:27 +08:00
xiaoxian521
7d419c3b35 refactor: 使用@/别名替换/@/别名 2022-10-27 13:17:56 +08:00
124 changed files with 2443 additions and 2637 deletions

2
.env
View File

@@ -1,2 +1,2 @@
# 项目本地运行端口号 # 平台本地运行端口号
VITE_PORT = 8848 VITE_PORT = 8848

View File

@@ -1,14 +1,8 @@
# 项目本地运行端口号 # 平台本地运行端口号
VITE_PORT = 8848 VITE_PORT = 8848
# 开发环境读取配置文件路径 # 开发环境读取配置文件路径
VITE_PUBLIC_PATH = / VITE_PUBLIC_PATH = /
# 开发环境代理 # 开发环境路由历史模式Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"
VITE_PROXY_DOMAIN = /api
# 开发环境路由历史模式
VITE_ROUTER_HISTORY = "hash" VITE_ROUTER_HISTORY = "hash"
# 开发环境后端地址
VITE_PROXY_DOMAIN_REAL = "http://127.0.0.1:3000"

View File

@@ -1,15 +1,9 @@
# 线上环境项目打包路径 # 线上环境平台打包路径
VITE_PUBLIC_PATH = / VITE_PUBLIC_PATH = /
# 线上环境路由历史模式 # 线上环境路由历史模式Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"
VITE_ROUTER_HISTORY = "hash" VITE_ROUTER_HISTORY = "hash"
# 线上环境后端地址
VITE_PROXY_DOMAIN_REAL = ""
# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
VITE_LEGACY = false
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
VITE_CDN = false VITE_CDN = false

View File

@@ -4,19 +4,13 @@ NODE_ENV=production
VITE_PUBLIC_PATH = / VITE_PUBLIC_PATH = /
# 线上环境路由历史模式 # 预发布环境路由历史模式Hash模式传"hash"、HTML5模式传"h5"、Hash模式带base参数传"hash,base参数"、HTML5模式带base参数传"h5,base参数"
VITE_ROUTER_HISTORY = "hash" VITE_ROUTER_HISTORY = "hash"
# 线上环境后端地址
VITE_PROXY_DOMAIN_REAL = ""
# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
VITE_LEGACY = false
# 是否在打包时使用cdn替换本地库 替换 true 不替换 false # 是否在打包时使用cdn替换本地库 替换 true 不替换 false
VITE_CDN = false VITE_CDN = true
# 是否启用gzip压缩或brotli压缩分两种情况删除原始文件和不删除原始文件 # 是否启用gzip压缩或brotli压缩分两种情况删除原始文件和不删除原始文件
# 压缩时不删除原始文件的配置gzip、brotli、both同时开启 gzip 与 brotli 压缩、none不开启压缩默认 # 压缩时不删除原始文件的配置gzip、brotli、both同时开启 gzip 与 brotli 压缩、none不开启压缩默认
# 压缩时删除原始文件的配置gzip-clear、brotli-clear、both-clear同时开启 gzip 与 brotli 压缩、none不开启压缩默认 # 压缩时删除原始文件的配置gzip-clear、brotli-clear、both-clear同时开启 gzip 与 brotli 压缩、none不开启压缩默认
VITE_COMPRESSION = "none" VITE_COMPRESSION = "both-clear"

View File

@@ -1,6 +1,7 @@
public public
dist dist
*.d.ts *.d.ts
/src/assets
package.json package.json
.eslintrc.js .eslintrc.js
.prettierrc.js .prettierrc.js

View File

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

View File

@@ -27,13 +27,5 @@
"editor.codeActionsOnSave": { "editor.codeActionsOnSave": {
"source.fixAll.eslint": true "source.fixAll.eslint": true
}, },
"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"] "iconify.excludes": ["el"]
} }

View File

@@ -1,12 +1,12 @@
<h1>vue-pure-admin Lite Edition</h1> <h1>vue-pure-admin Lite Editionno i18n version</h1>
[![license](https://img.shields.io/github/license/xiaoxian521/vue-pure-admin.svg)](LICENSE) [![license](https://img.shields.io/github/license/xiaoxian521/vue-pure-admin.svg)](LICENSE)
**English** | [中文](./README.md) **English** | [中文](./README.md)
## introduce ## Introduce
The lite version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains the main functions and is more suitable for actual project development, the packaged size is only `3MB`, and will permanently sync the full version of the code The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`
## Supporting Video ## Supporting Video
@@ -15,9 +15,8 @@ The lite version is based on the shelf extracted from [vue-pure-admin](https://g
## Docs ## Docs
- [Click me to view the domestic documentation site](http://yiming_chang.gitee.io/pure-admin-doc) - [Click me to view the domestic documentation site](https://yiming_chang.gitee.io/pure-admin-doc)
- [Click me to view foreign document site 1](https://xiaoxian521.github.io/pure-admin-doc) - [Click me to view foreign document site](https://xiaoxian521.github.io/pure-admin-doc)
- [Click me to view foreign document site 2](https://pure-admin-doc.vercel.app)
## Usage ## Usage
@@ -42,7 +41,6 @@ bilibili: https://www.bilibili.com/video/BV1534y1S7HV/
## ⚠️ Attention ## ⚠️ Attention
- The Lite version does not accept any issues and prs. If you have any questions, please go to the full version https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose to mention, thank you! ! ! - The Lite version does not accept any issues and prs. If you have any questions, please go to the full version https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose to mention, thank you! ! !
- Don't use the `delete-i18n` branch code, this branch is just for you to completely delete the internationalized references, it won't sync the code! ! ! [Completely remove the internationalization tutorial](https://www.bilibili.com/video/BV1Ru411B7k3/), please be sure to use the code from the `main` branch! ! !
## License ## License

View File

@@ -1,4 +1,4 @@
<h1>vue-pure-admin精简版</h1> <h1>vue-pure-admin精简版(非国际化版本)</h1>
[![license](https://img.shields.io/github/license/xiaoxian521/vue-pure-admin.svg)](LICENSE) [![license](https://img.shields.io/github/license/xiaoxian521/vue-pure-admin.svg)](LICENSE)
@@ -6,7 +6,11 @@
## 介绍 ## 介绍
精简版是基于 [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin) 提炼出的架子,包含主体功能,更适合实际项目开发,打包后的大小 `3MB`,并且会永久同步完整版的代码 精简版是基于 [vue-pure-admin](https://github.com/xiaoxian521/vue-pure-admin) 提炼出的架子,包含主体功能,更适合实际项目开发,打包后的大小在全局引入 [element-plus](https://element-plus.org) 的情况下仍然低于 `2.3MB`,并且会永久同步完整版的代码。开启 `brotli` 压缩和 `cdn` 替换本地库模式后,打包大小低于 `350kb`
## 版本选择
当前是非国际化版本哦,如果您需要国际化版本 [请点击](https://github.com/xiaoxian521/pure-admin-thin/tree/i18n)
## 配套视频 ## 配套视频
@@ -15,9 +19,8 @@
## 配套文档 ## 配套文档
- [点我查看国内文档站](http://yiming_chang.gitee.io/pure-admin-doc) - [点我查看国内文档站](https://yiming_chang.gitee.io/pure-admin-doc)
- [点我查看国外文档站 1](https://xiaoxian521.github.io/pure-admin-doc) - [点我查看国外文档站](https://xiaoxian521.github.io/pure-admin-doc)
- [点我查看国外文档站 2](https://pure-admin-doc.vercel.app)
## 维护者 ## 维护者
@@ -54,7 +57,6 @@ pnpm remove 包名
## ⚠️ 注意 ## ⚠️ 注意
- 精简版不接受任何 `issues``pr`,如果有问题请到完整版 [issues](https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose) 去提,谢谢!!! - 精简版不接受任何 `issues``pr`,如果有问题请到完整版 [issues](https://github.com/xiaoxian521/vue-pure-admin/issues/new/choose) 去提,谢谢!!!
- 不要使用 `delete-i18n` 分支代码,这个分支只是给你们完全删除国际化的参考,不会同步代码的!!! [完全删除国际化教程](https://www.bilibili.com/video/BV1Ru411B7k3/) ,请务必使用 `main` 分支的代码!!!
## 许可证 ## 许可证

View File

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

View File

@@ -1,13 +1,10 @@
/** 处理环境变量 */ /** 处理环境变量 */
const warpperEnv = (envConf: Recordable): ViteEnv => { const warpperEnv = (envConf: Recordable): ViteEnv => {
/** 此处为默认值,无需修改 */ /** 此处为默认值 */
const ret: ViteEnv = { const ret: ViteEnv = {
VITE_PORT: 8848, VITE_PORT: 8848,
VITE_PUBLIC_PATH: "", VITE_PUBLIC_PATH: "",
VITE_PROXY_DOMAIN: "",
VITE_PROXY_DOMAIN_REAL: "",
VITE_ROUTER_HISTORY: "", VITE_ROUTER_HISTORY: "",
VITE_LEGACY: false,
VITE_CDN: false, VITE_CDN: false,
VITE_COMPRESSION: "none" VITE_COMPRESSION: "none"
}; };
@@ -30,14 +27,9 @@ const warpperEnv = (envConf: Recordable): ViteEnv => {
return ret; return ret;
}; };
/** 跨域代理重写 */ /** 获取环境变量 */
const regExps = (value: string, reg: string): string => {
return value.replace(new RegExp(`^${reg}`, "g"), "");
};
/** 环境变量 */
const loadEnv = (): ViteEnv => { const loadEnv = (): ViteEnv => {
return import.meta.env; return import.meta.env;
}; };
export { warpperEnv, regExps, loadEnv }; export { warpperEnv, loadEnv };

37
build/optimize.ts Normal file
View File

@@ -0,0 +1,37 @@
/**
* 此文件作用于 `vite.config.ts` 的 `optimizeDeps.include` 依赖预构建配置项
* 依赖预构建,`vite` 启动时会将下面 include 里的模块,编译成 esm 格式并缓存到 node_modules/.vite 文件夹,页面加载到对应模块时如果浏览器有缓存就读取浏览器缓存,如果没有会读取本地缓存并按需加载
* 尤其当您禁用浏览器缓存时(这种情况只应该发生在调试阶段)必须将对应模块加入到 include里否则会遇到开发环境切换页面卡顿的问题vite 会认为它是一个新的依赖包会重新加载并强制刷新页面),因为它既无法使用浏览器缓存,又没有在本地 node_modules/.vite 里缓存
* 温馨提示:如果您使用的第三方库是全局引入,也就是引入到 src/main.ts 文件里,就不需要再添加到 include 里了,因为 vite 会自动将它们缓存到 node_modules/.vite
*/
const include = [
"qs",
"mitt",
"dayjs",
"axios",
"pinia",
"lodash",
"echarts",
"xe-utils",
"vxe-table",
"js-cookie",
"lodash-es",
"@vueuse/core",
"lodash-unified",
"@ctrl/tinycolor",
"@pureadmin/utils",
"responsive-storage",
"element-resize-detector"
];
/**
* 在预构建中强制排除的依赖项
* 温馨提示:所有以 `@iconify-icons/` 开头引入的的本地图标模块,都应该加入到下面的 `exclude` 里,因为平台推荐的使用方式是哪里需要哪里引入而且都是单个的引入,不需要预构建,直接让浏览器加载就好
*/
const exclude = [
"@iconify-icons/ep",
"@iconify-icons/ri",
"@pureadmin/theme/dist/browser-utils"
];
export { include, exclude };

View File

@@ -1,23 +1,19 @@
import { cdn } from "./cdn"; import { cdn } from "./cdn";
import { resolve } from "path";
import vue from "@vitejs/plugin-vue"; import vue from "@vitejs/plugin-vue";
import { viteBuildInfo } from "./info"; import { viteBuildInfo } from "./info";
import svgLoader from "vite-svg-loader"; import svgLoader from "vite-svg-loader";
import legacy from "@vitejs/plugin-legacy";
import vueJsx from "@vitejs/plugin-vue-jsx"; import vueJsx from "@vitejs/plugin-vue-jsx";
import { viteMockServe } from "vite-plugin-mock"; import { viteMockServe } from "vite-plugin-mock";
import { configCompressPlugin } from "./compress"; import { configCompressPlugin } from "./compress";
import VueI18n from "@intlify/vite-plugin-vue-i18n";
// import ElementPlus from "unplugin-element-plus/vite"; // import ElementPlus from "unplugin-element-plus/vite";
import { visualizer } from "rollup-plugin-visualizer"; import { visualizer } from "rollup-plugin-visualizer";
import removeConsole from "vite-plugin-remove-console"; import removeConsole from "vite-plugin-remove-console";
import themePreprocessorPlugin from "@pureadmin/theme"; import themePreprocessorPlugin from "@pureadmin/theme";
import { genScssMultipleScopeVars } from "/@/layout/theme";
import DefineOptions from "unplugin-vue-define-options/vite"; import DefineOptions from "unplugin-vue-define-options/vite";
import { genScssMultipleScopeVars } from "../src/layout/theme";
export function getPluginsList( export function getPluginsList(
command: string, command: string,
VITE_LEGACY: boolean,
VITE_CDN: boolean, VITE_CDN: boolean,
VITE_COMPRESSION: ViteCompression VITE_COMPRESSION: ViteCompression
) { ) {
@@ -25,12 +21,6 @@ export function getPluginsList(
const lifecycle = process.env.npm_lifecycle_event; const lifecycle = process.env.npm_lifecycle_event;
return [ return [
vue(), vue(),
// https://github.com/intlify/bundle-tools/tree/main/packages/vite-plugin-vue-i18n
VueI18n({
runtimeOnly: true,
compositionOnly: true,
include: [resolve("locales/**")]
}),
// jsx、tsx语法支持 // jsx、tsx语法支持
vueJsx(), vueJsx(),
VITE_CDN ? cdn : null, VITE_CDN ? cdn : null,
@@ -67,13 +57,6 @@ export function getPluginsList(
`, `,
logger: false logger: false
}), }),
// 是否为打包后的文件提供传统浏览器兼容性支持
VITE_LEGACY
? legacy({
targets: ["ie >= 11"],
additionalLegacyPolyfills: ["regenerator-runtime/runtime"]
})
: null,
// 打包分析 // 打包分析
lifecycle === "report" lifecycle === "report"
? visualizer({ open: true, brotliSize: true, filename: "report.html" }) ? visualizer({ open: true, brotliSize: true, filename: "report.html" })

View File

@@ -1,43 +0,0 @@
buttons:
hsLoginOut: LoginOut
hsfullscreen: FullScreen
hsexitfullscreen: ExitFullscreen
hsrefreshRoute: RefreshRoute
hslogin: Login
hsadd: Add
hsmark: Mark/Cancel
hssave: Save
hssearch: Search
hsexpendAll: Expand All
hscollapseAll: Collapse All
hssystemSet: Open ProjectConfig
hsdelete: Delete
hsreload: Reload
hscloseCurrentTab: Close CurrentTab
hscloseLeftTabs: Close LeftTabs
hscloseRightTabs: Close RightTabs
hscloseOtherTabs: Close OtherTabs
hscloseAllTabs: Close AllTabs
hswholeFullScreen: Whole FullScreen
hswholeExitFullScreen: Whole ExitFullScreen
hscontentFullScreen: Content FullScreen
hscontentExitFullScreen: Content ExitFullScreen
menus:
hshome: Home
hslogin: Login
hsabnormal: Abnormal Page
hsfourZeroFour: "404"
hsfourZeroOne: "403"
hsFive: "500"
permission: Permission Manage
permissionPage: Page Permission
permissionButton: Button Permission
status:
hsLoad: Loading...
login:
username: Username
password: Password
login: Login
usernameReg: Please enter username
passwordReg: Please enter password
passwordRuleReg: The password format should be any combination of 8-18 digits

View File

@@ -1,43 +0,0 @@
buttons:
hsLoginOut: 退出系统
hsfullscreen: 全屏
hsexitfullscreen: 退出全屏
hsrefreshRoute: 刷新路由
hslogin: 登录
hsadd: 新增
hsmark: 标记/取消
hssave: 保存
hssearch: 搜索
hsexpendAll: 全部展开
hscollapseAll: 全部折叠
hssystemSet: 打开项目配置
hsdelete: 删除
hsreload: 重新加载
hscloseCurrentTab: 关闭当前标签页
hscloseLeftTabs: 关闭左侧标签页
hscloseRightTabs: 关闭右侧标签页
hscloseOtherTabs: 关闭其他标签页
hscloseAllTabs: 关闭全部标签页
hswholeFullScreen: 整体页面全屏
hswholeExitFullScreen: 整体页面退出全屏
hscontentFullScreen: 内容区全屏
hscontentExitFullScreen: 内容区退出全屏
menus:
hshome: 首页
hslogin: 登录
hsabnormal: 异常页面
hsfourZeroFour: "404"
hsfourZeroOne: "403"
hsFive: "500"
permission: 权限管理
permissionPage: 页面权限
permissionButton: 按钮权限
status:
hsLoad: 加载中...
login:
username: 账号
password: 密码
login: 登录
usernameReg: 请输入账号
passwordReg: 请输入密码
passwordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合

View File

@@ -1,6 +1,8 @@
// 模拟后端动态生成路由 // 模拟后端动态生成路由
import { MockMethod } from "vite-plugin-mock"; import { MockMethod } from "vite-plugin-mock";
import Lollipop from "@iconify-icons/ep/lollipop";
/** /**
* roles页面级别权限这里模拟二种 "admin"、"common" * roles页面级别权限这里模拟二种 "admin"、"common"
* admin管理员角色 * admin管理员角色
@@ -10,8 +12,8 @@ import { MockMethod } from "vite-plugin-mock";
const permissionRouter = { const permissionRouter = {
path: "/permission", path: "/permission",
meta: { meta: {
title: "menus.permission", title: "权限管理",
icon: "lollipop", icon: Lollipop,
rank: 10 rank: 10
}, },
children: [ children: [
@@ -19,15 +21,15 @@ const permissionRouter = {
path: "/permission/page/index", path: "/permission/page/index",
name: "PermissionPage", name: "PermissionPage",
meta: { meta: {
roles: ["admin", "common"], title: "页面权限",
title: "menus.permissionPage" roles: ["admin", "common"]
} }
}, },
{ {
path: "/permission/button/index", path: "/permission/button/index",
name: "PermissionButton", name: "PermissionButton",
meta: { meta: {
title: "menus.permissionButton", title: "按钮权限",
roles: ["admin", "common"], roles: ["admin", "common"],
auths: ["btn_add", "btn_edit", "btn_delete"] auths: ["btn_add", "btn_edit", "btn_delete"]
} }

View File

@@ -10,8 +10,8 @@ export default [
return { return {
success: true, success: true,
data: { data: {
accessToken: "eyJhbGciOiJIUzUxMiJ9.admin", accessToken: "eyJhbGciOiJIUzUxMiJ9.newAdmin",
refreshToken: "eyJhbGciOiJIUzUxMiJ9.adminRefresh", refreshToken: "eyJhbGciOiJIUzUxMiJ9.newAdminRefresh",
// `expires`选择这种日期格式是为了方便调试,后端直接设置时间戳或许更方便(每次都应该递增)。如果后端返回的是时间戳格式,前端开发请来到这个目录`src/utils/auth.ts`,把第`38`行的代码换成expires = data.expires即可。 // `expires`选择这种日期格式是为了方便调试,后端直接设置时间戳或许更方便(每次都应该递增)。如果后端返回的是时间戳格式,前端开发请来到这个目录`src/utils/auth.ts`,把第`38`行的代码换成expires = data.expires即可。
expires: "2023/10/30 23:59:59" expires: "2023/10/30 23:59:59"
} }

View File

@@ -1,6 +1,6 @@
{ {
"name": "pure-admin-thin", "name": "pure-admin-thin",
"version": "3.6.1", "version": "3.9.0",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite", "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@@ -11,6 +11,7 @@
"preview": "vite preview", "preview": "vite preview",
"preview:build": "pnpm build && vite preview", "preview:build": "pnpm build && vite preview",
"typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck", "typecheck": "tsc --noEmit && vue-tsc --noEmit --skipLibCheck",
"svgo": "svgo -f src/assets/svg -o src/assets/svg",
"cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML", "cloc": "NODE_OPTIONS=--max-old-space-size=4096 cloc . --exclude-dir=node_modules --exclude-lang=YAML",
"clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install", "clean:cache": "rm -rf node_modules && rm -rf .eslintcache && pnpm install",
"lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix", "lint:eslint": "eslint --cache --max-warnings 0 \"{src,mock,build}/**/*.{vue,js,ts,tsx}\" --fix",
@@ -29,19 +30,17 @@
], ],
"dependencies": { "dependencies": {
"@ctrl/tinycolor": "^3.4.1", "@ctrl/tinycolor": "^3.4.1",
"@pureadmin/components": "^1.1.0",
"@pureadmin/descriptions": "^1.1.0", "@pureadmin/descriptions": "^1.1.0",
"@pureadmin/table": "^1.2.0", "@pureadmin/table": "^1.8.0",
"@pureadmin/utils": "^1.1.5", "@pureadmin/utils": "^1.6.7",
"@vueuse/core": "^9.4.0", "@vueuse/core": "^9.6.0",
"@vueuse/motion": "^2.0.0-beta.12", "@vueuse/motion": "2.0.0-beta.12",
"@vueuse/shared": "^9.4.0",
"animate.css": "^4.1.1", "animate.css": "^4.1.1",
"axios": "^1.1.3", "axios": "^1.2.0",
"dayjs": "^1.11.4", "dayjs": "^1.11.6",
"echarts": "^5.3.3", "echarts": "^5.4.0",
"element-plus": "^2.2.16", "element-plus": "^2.2.25",
"element-resize-detector": "^1.2.3", "element-resize-detector": "^1.2.4",
"js-cookie": "^3.0.1", "js-cookie": "^3.0.1",
"lodash": "^4.17.21", "lodash": "^4.17.21",
"lodash-es": "^4.17.21", "lodash-es": "^4.17.21",
@@ -50,79 +49,76 @@
"mockjs": "^1.1.0", "mockjs": "^1.1.0",
"nprogress": "^0.2.0", "nprogress": "^0.2.0",
"path": "^0.12.7", "path": "^0.12.7",
"pinia": "^2.0.21", "pinia": "^2.0.26",
"qs": "^6.11.0", "qs": "^6.11.0",
"resize-observer-polyfill": "^1.5.1",
"responsive-storage": "^2.1.0", "responsive-storage": "^2.1.0",
"vue": "^3.2.40", "vue": "^3.2.45",
"vue-i18n": "^9.2.2",
"vue-router": "^4.1.6", "vue-router": "^4.1.6",
"vue-types": "^4.2.1", "vue-types": "^4.2.1",
"vxe-table": "^4.3.2", "vxe-table": "^4.3.6",
"xe-utils": "^3.5.6" "xe-utils": "^3.5.7"
}, },
"devDependencies": { "devDependencies": {
"@commitlint/cli": "13.1.0", "@commitlint/cli": "13.1.0",
"@commitlint/config-conventional": "13.1.0", "@commitlint/config-conventional": "13.1.0",
"@iconify-icons/ep": "^1.2.7", "@iconify-icons/ep": "^1.2.7",
"@iconify-icons/ri": "^1.2.3", "@iconify-icons/ri": "^1.2.3",
"@iconify/vue": "^3.2.1", "@iconify/vue": "^4.0.0",
"@intlify/vite-plugin-vue-i18n": "^6.0.3",
"@pureadmin/theme": "^2.4.0", "@pureadmin/theme": "^2.4.0",
"@types/element-resize-detector": "1.1.3", "@types/element-resize-detector": "1.1.3",
"@types/js-cookie": "^3.0.1", "@types/js-cookie": "^3.0.1",
"@types/lodash": "^4.14.180", "@types/lodash": "^4.14.180",
"@types/lodash-es": "^4.17.6", "@types/lodash-es": "^4.17.6",
"@types/mockjs": "1.0.3", "@types/mockjs": "^1.0.7",
"@types/node": "14.14.14", "@types/node": "^18.11.9",
"@types/nprogress": "0.2.0", "@types/nprogress": "0.2.0",
"@types/qs": "^6.9.7", "@types/qs": "^6.9.7",
"@typescript-eslint/eslint-plugin": "^5.10.2", "@typescript-eslint/eslint-plugin": "^5.42.1",
"@typescript-eslint/parser": "^5.10.2", "@typescript-eslint/parser": "^5.42.1",
"@vitejs/plugin-legacy": "^2.2.0", "@vitejs/plugin-legacy": "^2.3.1",
"@vitejs/plugin-vue": "^3.1.2", "@vitejs/plugin-vue": "^3.2.0",
"@vitejs/plugin-vue-jsx": "^2.0.1", "@vitejs/plugin-vue-jsx": "^2.1.1",
"@vue/eslint-config-prettier": "^7.0.0", "@vue/eslint-config-prettier": "^7.0.0",
"@vue/eslint-config-typescript": "^10.0.0", "@vue/eslint-config-typescript": "^11.0.2",
"@vue/runtime-core": "^3.2.40", "autoprefixer": "^10.4.13",
"autoprefixer": "^10.4.12",
"cloc": "^2.10.0", "cloc": "^2.10.0",
"cssnano": "^5.1.13", "cssnano": "^5.1.14",
"eslint": "^8.8.0", "eslint": "^8.8.0",
"eslint-plugin-prettier": "^4.0.0", "eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-vue": "^8.4.1", "eslint-plugin-vue": "^9.7.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"husky": "^7.0.4", "husky": "^7.0.4",
"lint-staged": "11.1.2", "lint-staged": "11.1.2",
"picocolors": "^1.0.0", "picocolors": "^1.0.0",
"postcss": "^8.4.17", "postcss": "^8.4.18",
"postcss-html": "^1.5.0", "postcss-html": "^1.5.0",
"postcss-import": "^15.0.0", "postcss-import": "^15.0.0",
"postcss-scss": "^4.0.5", "postcss-scss": "^4.0.5",
"prettier": "^2.5.1", "prettier": "^2.5.1",
"pretty-quick": "3.1.1", "pretty-quick": "3.1.1",
"rimraf": "3.0.2", "rimraf": "3.0.2",
"rollup-plugin-visualizer": "^5.8.2", "rollup-plugin-visualizer": "^5.8.3",
"sass": "^1.53.0", "sass": "^1.56.1",
"sass-loader": "^13.0.2", "sass-loader": "^13.2.0",
"stylelint": "^14.3.0", "stylelint": "^14.3.0",
"stylelint-config-html": "^1.0.0", "stylelint-config-html": "^1.0.0",
"stylelint-config-prettier": "^9.0.3", "stylelint-config-prettier": "^9.0.3",
"stylelint-config-recommended": "^6.0.0", "stylelint-config-recommended": "^9.0.0",
"stylelint-config-standard": "^24.0.0", "stylelint-config-standard": "^29.0.0",
"stylelint-order": "^5.0.0", "stylelint-order": "^5.0.0",
"tailwindcss": "^3.2.1", "svgo": "^3.0.2",
"terser": "^5.15.0", "tailwindcss": "^3.2.4",
"typescript": "^4.7.4", "terser": "^5.15.1",
"unplugin-vue-define-options": "0.7.3", "typescript": "^4.9.3",
"vite": "^3.1.8", "unplugin-vue-define-options": "^1.0.0",
"vite": "3.1.8",
"vite-plugin-cdn-import": "^0.3.5", "vite-plugin-cdn-import": "^0.3.5",
"vite-plugin-compression": "^0.5.1", "vite-plugin-compression": "^0.5.1",
"vite-plugin-mock": "^2.9.6", "vite-plugin-mock": "^2.9.6",
"vite-plugin-remove-console": "^1.1.0", "vite-plugin-remove-console": "^1.3.0",
"vite-svg-loader": "^3.6.0", "vite-svg-loader": "^3.6.0",
"vue-eslint-parser": "^8.2.0", "vue-eslint-parser": "^9.1.0",
"vue-tsc": "^0.40.13" "vue-tsc": "^1.0.9"
}, },
"pnpm": { "pnpm": {
"peerDependencyRules": { "peerDependencyRules": {

2125
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,11 +1,10 @@
{ {
"Version": "3.6.1", "Version": "3.9.0",
"Title": "PureAdmin", "Title": "PureAdmin",
"FixedHeader": true, "FixedHeader": true,
"HiddenSideBar": false, "HiddenSideBar": false,
"MultiTagsCache": false, "MultiTagsCache": false,
"KeepAlive": true, "KeepAlive": true,
"Locale": "zh",
"Layout": "vertical", "Layout": "vertical",
"Theme": "default", "Theme": "default",
"DarkMode": false, "DarkMode": false,
@@ -15,5 +14,6 @@
"SidebarStatus": true, "SidebarStatus": true,
"EpThemeColor": "#409EFF", "EpThemeColor": "#409EFF",
"ShowLogo": true, "ShowLogo": true,
"ShowModel": "smart" "ShowModel": "smart",
"MenuArrowIconNoTransition": true
} }

View File

@@ -8,7 +8,6 @@
import { defineComponent } from "vue"; import { defineComponent } from "vue";
import { ElConfigProvider } from "element-plus"; import { ElConfigProvider } from "element-plus";
import zhCn from "element-plus/lib/locale/lang/zh-cn"; import zhCn from "element-plus/lib/locale/lang/zh-cn";
import en from "element-plus/lib/locale/lang/en";
export default defineComponent({ export default defineComponent({
name: "app", name: "app",
components: { components: {
@@ -16,7 +15,7 @@ export default defineComponent({
}, },
computed: { computed: {
currentLocale() { currentLocale() {
return this.$storage.locale?.locale === "zh" ? zhCn : en; return zhCn;
} }
} }
}); });

View File

@@ -1,4 +1,4 @@
import { http } from "../utils/http"; import { http } from "@/utils/http";
type Result = { type Result = {
success: boolean; success: boolean;

View File

@@ -1,4 +1,4 @@
import { http } from "../utils/http"; import { http } from "@/utils/http";
export type UserResult = { export type UserResult = {
success: boolean; success: boolean;

Binary file not shown.

Before

Width:  |  Height:  |  Size: 23 KiB

View File

@@ -1 +1 @@
<svg t="1636193306629" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1847" width="32" height="32"><path d="M410.558481 0.10861C410.558481 211.083075 109.682285 361.860579 109.682285 633.656511c0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527C711.407525 361.751969 410.558481 210.974465 410.558481 0.10861z" fill="#386BF3" p-id="1848"></path><path d="M613.468671 73.664572c0 211.055922-300.876197 361.914883-300.876196 633.547901 0 174.943176 134.703259 316.787527 300.876196 316.787527s300.876197-141.817198 300.876197-316.787527c-0.054305-271.633018-300.876197-422.491979-300.876197-633.547901z" fill="#C3D2FB" p-id="1849"></path><path d="M312.592475 707.212473c0-183.713414 137.635722-312.171612 226.72288-441.390078 81.701694 106.111739 172.119322 218.740063 172.119323 367.725506a309.755045 309.755045 0 0 1-291.074166 316.516003 323.114046 323.114046 0 0 1-107.768037-242.851431z" fill="#303F5B" p-id="1850"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" class="icon" viewBox="0 0 1024 1024"><path fill="#386BF3" d="M410.558.109c0 210.974-300.876 361.752-300.876 633.548 0 174.943 134.704 316.787 300.876 316.787s300.877-141.817 300.877-316.787C711.408 361.752 410.558 210.974 410.558.109z"/><path fill="#C3D2FB" d="M613.469 73.665c0 211.055-300.877 361.914-300.877 633.547C312.592 882.156 447.296 1024 613.47 1024s300.876-141.817 300.876-316.788C914.29 435.58 613.469 284.72 613.469 73.665z"/><path fill="#303F5B" d="M312.592 707.212c0-183.713 137.636-312.171 226.723-441.39 81.702 106.112 172.12 218.74 172.12 367.726A309.755 309.755 0 0 1 420.36 950.064a323.114 323.114 0 0 1-107.769-242.852z"/></svg>

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 712 B

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 14 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 10 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 13 KiB

After

Width:  |  Height:  |  Size: 11 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 13 KiB

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123l1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2.88 18.054a35.897 35.897 0 0 1 8.531-16.32.8.8 0 0 1 1.178 0c.166.18.304.332.413.455a35.897 35.897 0 0 1 8.118 15.865c-2.141.451-4.34.747-6.584.874l-2.089 4.178a.5.5 0 0 1-.894 0l-2.089-4.178a44.019 44.019 0 0 1-6.584-.874zm6.698-1.123 1.157.066L12 19.527l1.265-2.53 1.157-.066a42.137 42.137 0 0 0 4.227-.454A33.913 33.913 0 0 0 12 4.09a33.913 33.913 0 0 0-6.649 12.387c1.395.222 2.805.374 4.227.454zM12 15a3 3 0 1 1 0-6 3 3 0 0 1 0 6zm0-2a1 1 0 1 0 0-2 1 1 0 0 0 0 2z"/></svg>

Before

Width:  |  Height:  |  Size: 608 B

After

Width:  |  Height:  |  Size: 588 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M11.38 2.019a7.5 7.5 0 1 0 10.6 10.6C21.662 17.854 17.316 22 12.001 22 6.477 22 2 17.523 2 12c0-5.315 4.146-9.661 9.38-9.981z"/></svg>

Before

Width:  |  Height:  |  Size: 263 B

After

Width:  |  Height:  |  Size: 263 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85 1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>

Before

Width:  |  Height:  |  Size: 480 B

After

Width:  |  Height:  |  Size: 480 B

View File

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

Before

Width:  |  Height:  |  Size: 448 B

After

Width:  |  Height:  |  Size: 352 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" color="#00000073" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5l-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"></path></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3.5 4H1V3h2V1h1v2.5l-.5.5zM13 3V1h-1v2.5l.5.5H15V3h-2zm-1 9.5V15h1v-2h2v-1h-2.5l-.5.5zM1 12v1h2v2h1v-2.5l-.5-.5H1zm11-1.5-.5.5h-7l-.5-.5v-5l.5-.5h7l.5.5v5zM10 7H6v2h4V7z"/></svg>

Before

Width:  |  Height:  |  Size: 452 B

After

Width:  |  Height:  |  Size: 348 B

View File

@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" class="re-screen" color="#00000073" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><g fill="currentColor"><path d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"></path></g></svg> <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" aria-hidden="true" class="re-screen" color="#00000073" viewBox="0 0 16 16"><path fill="currentColor" d="M3 12h10V4H3v8zm2-6h6v4H5V6zM2 6H1V2.5l.5-.5H5v1H2v3zm13-3.5V6h-1V3h-3V2h3.5l.5.5zM14 10h1v3.5l-.5.5H11v-1h3v-3zM2 13h3v1H1.5l-.5-.5V10h1v3z"/></svg>

Before

Width:  |  Height:  |  Size: 421 B

After

Width:  |  Height:  |  Size: 318 B

View File

@@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="globalization" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 512 512"><path d="M478.33 433.6l-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 362L368 281.65L401.17 362z" fill="currentColor"></path><path d="M267.84 342.92a22 22 0 0 0-4.89-30.7c-.2-.15-15-11.13-36.49-34.73c39.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.36c-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.93c.92 1.19 1.83 2.35 2.74 3.51c-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.59c22.52 24.08 38 35.44 38.93 36.1a22 22 0 0 0 30.75-4.9z" fill="currentColor"></path></svg>

Before

Width:  |  Height:  |  Size: 965 B

View File

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

After

Width:  |  Height:  |  Size: 381 B

View File

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

Before

Width:  |  Height:  |  Size: 477 B

View File

@@ -1,5 +1,5 @@
import { defineComponent, Fragment } from "vue"; import { defineComponent, Fragment } from "vue";
import { hasAuth } from "/@/router/utils"; import { hasAuth } from "@/router/utils";
export default defineComponent({ export default defineComponent({
name: "Auth", name: "Auth",

View File

@@ -2,7 +2,7 @@ import iconifyIconOffline from "./src/iconifyIconOffline";
import iconifyIconOnline from "./src/iconifyIconOnline"; import iconifyIconOnline from "./src/iconifyIconOnline";
import fontIcon from "./src/iconfont"; import fontIcon from "./src/iconfont";
/** 离线图标组件 */ /** 本地图标组件 */
const IconifyIconOffline = iconifyIconOffline; const IconifyIconOffline = iconifyIconOffline;
/** 在线图标组件 */ /** 在线图标组件 */
const IconifyIconOnline = iconifyIconOnline; const IconifyIconOnline = iconifyIconOnline;

View File

@@ -3,7 +3,8 @@ import { h, defineComponent, Component } from "vue";
import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index"; import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
/** /**
* 支持fontawesome4、5+、iconfont、remixicon、element-plus的icons、自定义svg * 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
* @see 点击查看文档图标篇 {@link https://yiming_chang.gitee.io/pure-admin-doc/pages/icon/}
* @param icon 必传 图标 * @param icon 必传 图标
* @param attrs 可选 iconType 属性 * @param attrs 可选 iconType 属性
* @returns Component * @returns Component
@@ -33,12 +34,23 @@ export function useRenderIcon(icon: any, attrs?: iconType): Component {
} else if (typeof icon === "function" || typeof icon?.render === "function") { } else if (typeof icon === "function" || typeof icon?.render === "function") {
// svg // svg
return icon; return icon;
} else if (typeof icon === "object") {
return defineComponent({
name: "OfflineIcon",
render() {
return h(IconifyIconOffline, {
icon: icon,
...attrs
});
}
});
} else { } else {
// 通过是否存在 : 符号来判断是在线还是本地图标,存在即是在线图标,反之
return defineComponent({ return defineComponent({
name: "Icon", name: "Icon",
render() { render() {
const IconifyIcon = const IconifyIcon =
attrs && attrs["online"] ? IconifyIconOnline : IconifyIconOffline; icon && icon.includes(":") ? IconifyIconOnline : IconifyIconOffline;
return h(IconifyIcon, { return h(IconifyIcon, {
icon: icon, icon: icon,
...attrs ...attrs

View File

@@ -1,80 +1,22 @@
import { h, defineComponent } from "vue"; import { h, defineComponent } from "vue";
import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline"; import { Icon as IconifyIcon, addIcon } from "@iconify/vue/dist/offline";
// element-plus icon // Iconify Icon在Vue里本地使用用于内网环境https://docs.iconify.design/icon-components/vue/offline.html
import Check from "@iconify-icons/ep/check";
import HomeFilled from "@iconify-icons/ep/home-filled";
import Lollipop from "@iconify-icons/ep/lollipop";
import RefreshRight from "@iconify-icons/ep/refresh-right";
import Close from "@iconify-icons/ep/close";
import CloseBold from "@iconify-icons/ep/close-bold";
import Bell from "@iconify-icons/ep/bell";
import Search from "@iconify-icons/ep/search";
addIcon("check", Check);
addIcon("home-filled", HomeFilled);
addIcon("lollipop", Lollipop);
addIcon("refresh-right", RefreshRight);
addIcon("close", Close);
addIcon("close-bold", CloseBold);
addIcon("bell", Bell);
addIcon("search", Search);
// remixicon
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import InformationLine from "@iconify-icons/ri/information-line";
import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
import User from "@iconify-icons/ri/user-3-fill";
import Lock from "@iconify-icons/ri/lock-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import Setting from "@iconify-icons/ri/settings-3-line";
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
import CloseRightTags from "@iconify-icons/ri/text-direction-l";
import CloseOtherTags from "@iconify-icons/ri/text-spacing";
import CloseAllTags from "@iconify-icons/ri/subtract-line";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
addIcon("arrow-right-s-line", ArrowRightSLine);
addIcon("arrow-left-s-line", ArrowLeftSLine);
addIcon("logout-circle-r-line", LogoutCircleRLine);
addIcon("information-line", InformationLine);
addIcon("arrow-up-line", ArrowUpLine);
addIcon("arrow-down-line", ArrowDownLine);
addIcon("bookmark-2-line", Bookmark2Line);
addIcon("user", User);
addIcon("lock", Lock);
addIcon("menu-unfold", MenuUnfold);
addIcon("menu-fold", MenuFold);
addIcon("setting", Setting);
addIcon("arrow-down", ArrowDown);
addIcon("close-left-tags", CloseLeftTags);
addIcon("close-right-tags", CloseRightTags);
addIcon("close-other-tags", CloseOtherTags);
addIcon("close-all-tags", CloseAllTags);
addIcon("fullscreen", Fullscreen);
addIcon("exit-fullscreen", ExitFullscreen);
// Iconify Icon在Vue里离线使用用于内网环境https://docs.iconify.design/icon-components/vue/offline.html
export default defineComponent({ export default defineComponent({
name: "IconifyIconOffline", name: "IconifyIconOffline",
components: { IconifyIcon }, components: { IconifyIcon },
props: { props: {
icon: { icon: {
type: String, default: null
default: ""
} }
}, },
render() { render() {
if (typeof this.icon === "object") addIcon(this.icon, this.icon);
const attrs = this.$attrs; const attrs = this.$attrs;
return h( return h(
IconifyIcon, IconifyIcon,
{ {
icon: `${this.icon}`, icon: this.icon,
style: attrs?.style style: attrs?.style
? Object.assign(attrs.style, { outline: "none" }) ? Object.assign(attrs.style, { outline: "none" })
: { outline: "none" }, : { outline: "none" },

View File

@@ -11,7 +11,6 @@ export interface iconType {
horizontalAlign?: boolean; horizontalAlign?: boolean;
verticalAlign?: boolean; verticalAlign?: boolean;
align?: string; align?: string;
online?: boolean;
onLoad?: Function; onLoad?: Function;
includes?: Function; includes?: Function;

View File

@@ -31,7 +31,6 @@ const getConfig = (key?: string): ServerConfigs => {
export const getServerConfig = async (app: App): Promise<undefined> => { export const getServerConfig = async (app: App): Promise<undefined> => {
app.config.globalProperties.$config = getConfig(); app.config.globalProperties.$config = getConfig();
return axios({ return axios({
baseURL: "",
method: "get", method: "get",
url: `${VITE_PUBLIC_PATH}serverConfig.json` url: `${VITE_PUBLIC_PATH}serverConfig.json`
}) })
@@ -44,8 +43,6 @@ export const getServerConfig = async (app: App): Promise<undefined> => {
// 设置全局配置 // 设置全局配置
setConfig($config); setConfig($config);
} }
// 设置全局baseURL
app.config.globalProperties.$baseUrl = $config.baseURL;
return $config; return $config;
}) })
.catch(() => { .catch(() => {

View File

@@ -1,4 +1,4 @@
import { hasAuth } from "/@/router/utils"; import { hasAuth } from "@/router/utils";
import { Directive, type DirectiveBinding } from "vue"; import { Directive, type DirectiveBinding } from "vue";
export const auth: Directive = { export const auth: Directive = {

View File

@@ -1,7 +1,7 @@
import { Directive, type DirectiveBinding, type VNode } from "vue"; import { Directive, type DirectiveBinding, type VNode } from "vue";
import elementResizeDetectorMaker from "element-resize-detector"; import elementResizeDetectorMaker from "element-resize-detector";
import type { Erd } from "element-resize-detector"; import type { Erd } from "element-resize-detector";
import { emitter } from "/@/utils/mitt"; import { emitter } from "@/utils/mitt";
const erd: Erd = elementResizeDetectorMaker({ const erd: Erd = elementResizeDetectorMaker({
strategy: "scroll" strategy: "scroll"

View File

@@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { useGlobal } from "@pureadmin/utils"; import { useGlobal } from "@pureadmin/utils";
import backTop from "/@/assets/svg/back_top.svg?component"; import backTop from "@/assets/svg/back_top.svg?component";
import { h, computed, Transition, defineComponent } from "vue"; import { h, computed, Transition, defineComponent } from "vue";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
const props = defineProps({ const props = defineProps({
fixedHeader: Boolean fixedHeader: Boolean

View File

@@ -2,12 +2,11 @@
import Search from "./search/index.vue"; import Search from "./search/index.vue";
import Notice from "./notice/index.vue"; import Notice from "./notice/index.vue";
import mixNav from "./sidebar/mixNav.vue"; import mixNav from "./sidebar/mixNav.vue";
import avatars from "/@/assets/avatars.jpg"; import { useNav } from "@/layout/hooks/useNav";
import { useNav } from "/@/layout/hooks/useNav";
import Breadcrumb from "./sidebar/breadCrumb.vue"; import Breadcrumb from "./sidebar/breadCrumb.vue";
import topCollapse from "./sidebar/topCollapse.vue"; import topCollapse from "./sidebar/topCollapse.vue";
import { useTranslationLang } from "../hooks/useTranslationLang"; import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import globalization from "/@/assets/svg/globalization.svg?component"; import Setting from "@iconify-icons/ri/settings-3-line";
const { const {
layout, layout,
@@ -17,12 +16,8 @@ const {
pureApp, pureApp,
username, username,
avatarsStyle, avatarsStyle,
toggleSideBar, toggleSideBar
getDropdownItemStyle,
getDropdownItemClass
} = useNav(); } = useNav();
const { t, locale, translationCh, translationEn } = useTranslationLang();
</script> </script>
<template> <template>
@@ -48,62 +43,33 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<Search /> <Search />
<!-- 通知 --> <!-- 通知 -->
<Notice id="header-notice" /> <Notice id="header-notice" />
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<globalization
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
class="check-zh"
v-show="locale === 'zh'"
icon="check"
/>
简体中文
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span class="check-en" v-show="locale === 'en'">
<IconifyIconOffline icon="check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 退出登录 --> <!-- 退出登录 -->
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover"> <span class="el-dropdown-link navbar-bg-hover select-none">
<img v-if="avatars" :src="avatars" :style="avatarsStyle" /> <img
src="https://avatars.githubusercontent.com/u/44761321?v=4"
:style="avatarsStyle"
/>
<p v-if="username" class="dark:text-white">{{ username }}</p> <p v-if="username" class="dark:text-white">{{ username }}</p>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="logout"> <el-dropdown-menu class="logout">
<el-dropdown-item @click="logout"> <el-dropdown-item @click="logout">
<IconifyIconOffline <IconifyIconOffline
icon="logout-circle-r-line" :icon="LogoutCircleRLine"
style="margin: 5px" style="margin: 5px"
/> />
{{ t("buttons.hsLoginOut") }} 退出系统
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<span <span
class="set-icon navbar-bg-hover" class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')" title="打开项目配置"
@click="onPanel" @click="onPanel"
> >
<IconifyIconOffline icon="setting" /> <IconifyIconOffline :icon="Setting" />
</span> </span>
</div> </div>
</div> </div>
@@ -157,22 +123,6 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
} }
} }
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
.logout { .logout {
max-width: 120px; max-width: 120px;

View File

@@ -2,61 +2,45 @@
import { ref } from "vue"; import { ref } from "vue";
import { noticesData } from "./data"; import { noticesData } from "./data";
import NoticeList from "./noticeList.vue"; import NoticeList from "./noticeList.vue";
import { templateRef } from "@vueuse/core"; import Bell from "@iconify-icons/ep/bell";
import { Tabs, TabPane } from "@pureadmin/components";
const dropdownDom = templateRef<ElRef | null>("dropdownDom", null); const noticesNum = ref(0);
const activeName = ref(noticesData[0].name);
const notices = ref(noticesData); const notices = ref(noticesData);
const activeKey = ref(noticesData[0].key);
let noticesNum = ref(0); notices.value.map(v => (noticesNum.value += v.list.length));
notices.value.forEach(notice => {
noticesNum.value += notice.list.length;
});
function tabClick() {
(dropdownDom as any).value.handleOpen();
}
</script> </script>
<template> <template>
<el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end"> <el-dropdown trigger="click" placement="bottom-end">
<span class="dropdown-badge navbar-bg-hover select-none"> <span class="dropdown-badge navbar-bg-hover select-none">
<el-badge :value="noticesNum" :max="99"> <el-badge :value="noticesNum" :max="99">
<span class="header-notice-icon"> <span class="header-notice-icon">
<IconifyIconOffline icon="bell" /> <IconifyIconOffline :icon="Bell" />
</span> </span>
</el-badge> </el-badge>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<Tabs <el-tabs :stretch="true" v-model="activeKey" class="dropdown-tabs">
centered
class="dropdown-tabs"
v-model:activeName="activeName"
@tabClick="tabClick"
>
<template v-for="item in notices" :key="item.key"> <template v-for="item in notices" :key="item.key">
<TabPane :tab="`${item.name}(${item.list.length})`"> <el-tab-pane
:label="`${item.name}(${item.list.length})`"
:name="`${item.key}`"
>
<el-scrollbar max-height="330px"> <el-scrollbar max-height="330px">
<div class="noticeList-container"> <div class="noticeList-container">
<NoticeList :list="item.list" /> <NoticeList :list="item.list" />
</div> </div>
</el-scrollbar> </el-scrollbar>
</TabPane> </el-tab-pane>
</template> </template>
</Tabs> </el-tabs>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</template> </template>
<style>
.ant-tabs-dropdown {
z-index: 2900 !important;
}
</style>
<style lang="scss" scoped> <style lang="scss" scoped>
.dropdown-badge { .dropdown-badge {
display: flex; display: flex;
@@ -72,30 +56,28 @@ function tabClick() {
} }
.dropdown-tabs { .dropdown-tabs {
width: 336px; width: 330px;
background-color: #fff;
box-shadow: 0 2px 8px rgb(0 0 0 / 15%); .noticeList-container {
border-radius: 4px; padding: 15px 24px 0 24px;
}
:deep(.el-tabs__header) { :deep(.el-tabs__header) {
margin: 0; margin: 0;
} }
:deep(.el-tabs__nav-scroll) {
display: flex;
justify-content: center;
}
:deep(.el-tabs__nav-wrap)::after { :deep(.el-tabs__nav-wrap)::after {
height: 1px; height: 1px;
} }
:deep(.noticeList-container) { // 如果上面的 notices 长度大于 3 请注释掉下面代码
padding: 15px 24px 0 24px; :deep(.el-tabs__nav-wrap) {
padding: 0 36px 0 36px;
}
// 如果上面的 notices 长度大于 3 请注释掉下面代码
:deep(.el-tabs__active-bar) {
margin: 0 36px 0 36px;
} }
} }
:deep(.ant-tabs-nav) {
margin-bottom: 0;
}
</style> </style>

View File

@@ -24,11 +24,11 @@ function hoverTitle() {
function hoverDescription(event, description) { function hoverDescription(event, description) {
// currentWidth 为文本在页面中所占的宽度创建标签加入到页面获取currentWidth ,最后在移除 // currentWidth 为文本在页面中所占的宽度创建标签加入到页面获取currentWidth ,最后在移除
let tempTag = document.createElement("span"); const tempTag = document.createElement("span");
tempTag.innerText = description; tempTag.innerText = description;
tempTag.className = "getDescriptionWidth"; tempTag.className = "getDescriptionWidth";
document.querySelector("body").appendChild(tempTag); document.querySelector("body").appendChild(tempTag);
let currentWidth = ( const currentWidth = (
document.querySelector(".getDescriptionWidth") as HTMLSpanElement document.querySelector(".getDescriptionWidth") as HTMLSpanElement
).offsetWidth; ).offsetWidth;
document.querySelector(".getDescriptionWidth").remove(); document.querySelector(".getDescriptionWidth").remove();

View File

@@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from "vue"; import { ref } from "vue";
import { onClickOutside } from "@vueuse/core"; import { onClickOutside } from "@vueuse/core";
import { emitter } from "/@/utils/mitt"; import { emitter } from "@/utils/mitt";
import Close from "@iconify-icons/ep/close";
let show = ref<Boolean>(false); const show = ref<Boolean>(false);
const target = ref(null); const target = ref(null);
onClickOutside(target, (event: any) => { onClickOutside(target, (event: any) => {
if (event.clientX > target.value.offsetLeft) return; if (event.clientX > target.value.offsetLeft) return;
@@ -21,11 +22,11 @@ emitter.on("openPanel", () => {
<div ref="target" class="right-panel bg-bg_color"> <div ref="target" class="right-panel bg-bg_color">
<div class="right-panel-items"> <div class="right-panel-items">
<div class="project-configuration"> <div class="project-configuration">
<h3 class="dark:text-white">项目配置</h3> <h4 class="dark:text-white">项目配置</h4>
<span title="关闭配置"> <span title="关闭配置">
<IconifyIconOffline <IconifyIconOffline
class="dark:text-white" class="dark:text-white"
icon="close" :icon="Close"
@click="show = !show" @click="show = !show"
/> />
</span> </span>

View File

@@ -1,8 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from "vue-i18n";
import { useFullscreen } from "@vueuse/core"; import { useFullscreen } from "@vueuse/core";
const { t } = useI18n();
const { isFullscreen, toggle } = useFullscreen(); const { isFullscreen, toggle } = useFullscreen();
</script> </script>
@@ -12,9 +10,7 @@ const { isFullscreen, toggle } = useFullscreen();
@click="toggle" @click="toggle"
> >
<FontIcon <FontIcon
:title=" :title="isFullscreen ? '退出全屏' : '全屏'"
isFullscreen ? t('buttons.hsexitfullscreen') : t('buttons.hsfullscreen')
"
:icon="isFullscreen ? 'team-iconexit-fullscreen' : 'team-iconfullscreen'" :icon="isFullscreen ? 'team-iconexit-fullscreen' : 'team-iconfullscreen'"
/> />
</div> </div>

View File

@@ -5,8 +5,8 @@
确认 确认
</span> </span>
<span class="search-footer-item"> <span class="search-footer-item">
<IconifyIconOffline icon="arrow-up-line" class="icon" /> <IconifyIconOffline :icon="ArrowUpLine" class="icon" />
<IconifyIconOffline icon="arrow-down-line" class="icon" /> <IconifyIconOffline :icon="ArrowDownLine" class="icon" />
切换 切换
</span> </span>
<span class="search-footer-item"> <span class="search-footer-item">
@@ -16,10 +16,13 @@
</div> </div>
</template> </template>
<script lang="ts" setup> <script setup lang="ts">
import enterOutlined from "/@/assets/svg/enter_outlined.svg?component"; import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
import mdiKeyboardEsc from "/@/assets/svg/mdi_keyboard_esc.svg?component"; import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
import mdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.search-footer { .search-footer {
display: flex; display: flex;

View File

@@ -1,14 +1,14 @@
<script lang="ts" setup> <script setup lang="ts">
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { cloneDeep } from "lodash-unified"; import { cloneDeep } from "lodash-unified";
import SearchResult from "./SearchResult.vue"; import SearchResult from "./SearchResult.vue";
import SearchFooter from "./SearchFooter.vue"; import SearchFooter from "./SearchFooter.vue";
import { useNav } from "/@/layout/hooks/useNav"; import { deleteChildren } from "@/utils/tree";
import { transformI18n } from "/@/plugins/i18n"; import { useNav } from "@/layout/hooks/useNav";
import { deleteChildren } from "@pureadmin/utils";
import { useDebounceFn, onKeyStroke } from "@vueuse/core"; import { useDebounceFn, onKeyStroke } from "@vueuse/core";
import { ref, watch, computed, nextTick, shallowRef } from "vue"; import { ref, watch, computed, nextTick, shallowRef } from "vue";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
import Search from "@iconify-icons/ep/search";
interface Props { interface Props {
/** 弹窗显隐 */ /** 弹窗显隐 */
@@ -71,7 +71,7 @@ function search() {
resultOptions.value = flatMenusData.filter( resultOptions.value = flatMenusData.filter(
menu => menu =>
keyword.value && keyword.value &&
transformI18n(menu.meta?.title) menu.meta?.title
.toLocaleLowerCase() .toLocaleLowerCase()
.includes(keyword.value.toLocaleLowerCase().trim()) .includes(keyword.value.toLocaleLowerCase().trim())
); );
@@ -148,7 +148,7 @@ onKeyStroke("ArrowDown", handleDown);
> >
<template #prefix> <template #prefix>
<span class="el-input__icon"> <span class="el-input__icon">
<IconifyIconOffline icon="search" /> <IconifyIconOffline :icon="Search" />
</span> </span>
</template> </template>
</el-input> </el-input>

View File

@@ -1,11 +1,9 @@
<script lang="ts" setup> <script setup lang="ts">
import { computed } from "vue"; import { computed } from "vue";
import { useI18n } from "vue-i18n"; import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { useEpThemeStoreHook } from "/@/store/modules/epTheme"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; import enterOutlined from "@/assets/svg/enter_outlined.svg?component";
import enterOutlined from "/@/assets/svg/enter_outlined.svg?component"; import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
const { t } = useI18n();
interface optionsItem { interface optionsItem {
path: string; path: string;
@@ -67,8 +65,8 @@ function handleTo() {
@click="handleTo" @click="handleTo"
@mouseenter="handleMouse(item)" @mouseenter="handleMouse(item)"
> >
<component :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')" /> <component :is="useRenderIcon(item.meta?.icon ?? Bookmark2Line)" />
<span class="result-item-title">{{ t(item.meta?.title) }}</span> <span class="result-item-title">{{ item.meta?.title }}</span>
<enterOutlined /> <enterOutlined />
</div> </div>
</template> </template>

View File

@@ -1,6 +1,8 @@
<script lang="ts" setup> <script setup lang="ts">
import { SearchModal } from "./components"; import { SearchModal } from "./components";
import { useBoolean } from "../../hooks/useBoolean"; import { useBoolean } from "../../hooks/useBoolean";
import Search from "@iconify-icons/ep/search";
const { bool: show, toggle } = useBoolean(); const { bool: show, toggle } = useBoolean();
function handleSearch() { function handleSearch() {
toggle(); toggle();
@@ -12,7 +14,7 @@ function handleSearch() {
class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover" class="search-container w-[40px] h-[48px] flex-c cursor-pointer navbar-bg-hover"
@click="handleSearch" @click="handleSearch"
> >
<IconifyIconOffline icon="search" /> <IconifyIconOffline :icon="Search" />
</div> </div>
<SearchModal v-model:value="show" /> <SearchModal v-model:value="show" />
</template> </template>

View File

@@ -8,18 +8,17 @@ import {
nextTick, nextTick,
useCssModule useCssModule
} from "vue"; } from "vue";
import { getConfig } from "/@/config"; import { getConfig } from "@/config";
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import panel from "../panel/index.vue"; import panel from "../panel/index.vue";
import { emitter } from "/@/utils/mitt"; import { emitter } from "@/utils/mitt";
import { resetRouter } from "/@/router"; import { resetRouter } from "@/router";
import { templateRef } from "@vueuse/core"; import { removeToken } from "@/utils/auth";
import { removeToken } from "/@/utils/auth"; import { routerArrays } from "@/layout/types";
import { routerArrays } from "/@/layout/types"; import { useNav } from "@/layout/hooks/useNav";
import { useNav } from "/@/layout/hooks/useNav"; import { useAppStoreHook } from "@/store/modules/app";
import { useAppStoreHook } from "/@/store/modules/app"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
import { import {
useDark, useDark,
debounce, debounce,
@@ -29,8 +28,10 @@ import {
} from "@pureadmin/utils"; } from "@pureadmin/utils";
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils"; import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import dayIcon from "/@/assets/svg/day.svg?component"; import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "/@/assets/svg/dark.svg?component"; import darkIcon from "@/assets/svg/dark.svg?component";
import Check from "@iconify-icons/ep/check";
import Logout from "@iconify-icons/ri/logout-circle-r-line";
const router = useRouter(); const router = useRouter();
const { device } = useNav(); const { device } = useNav();
@@ -38,12 +39,11 @@ const { isDark } = useDark();
const { isSelect } = useCssModule(); const { isSelect } = useCssModule();
const { $storage } = useGlobal<GlobalPropertiesApi>(); const { $storage } = useGlobal<GlobalPropertiesApi>();
const mixRef = templateRef<HTMLElement | null>("mixRef", null); const mixRef = ref();
const verticalRef = templateRef<HTMLElement | null>("verticalRef", null); const verticalRef = ref();
const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null); const horizontalRef = ref();
const { const {
body,
dataTheme, dataTheme,
layoutTheme, layoutTheme,
themeColors, themeColors,
@@ -54,8 +54,8 @@ const {
/* body添加layout属性作用于src/style/sidebar.scss */ /* body添加layout属性作用于src/style/sidebar.scss */
if (unref(layoutTheme)) { if (unref(layoutTheme)) {
let layout = unref(layoutTheme).layout; const layout = unref(layoutTheme).layout;
let theme = unref(layoutTheme).theme; const theme = unref(layoutTheme).theme;
toggleTheme({ toggleTheme({
scopeName: `layout-theme-${theme}` scopeName: `layout-theme-${theme}`
}); });
@@ -119,13 +119,13 @@ const weekChange = (value): void => {
}; };
const tagsChange = () => { const tagsChange = () => {
let showVal = settings.tabsVal; const showVal = settings.tabsVal;
storageConfigureChange("hideTabs", showVal); storageConfigureChange("hideTabs", showVal);
emitter.emit("tagViewsChange", showVal as unknown as string); emitter.emit("tagViewsChange", showVal as unknown as string);
}; };
const multiTagsCacheChange = () => { const multiTagsCacheChange = () => {
let multiTagsCache = settings.multiTagsCache; const multiTagsCache = settings.multiTagsCache;
storageConfigureChange("multiTagsCache", multiTagsCache); storageConfigureChange("multiTagsCache", multiTagsCache);
useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache); useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
}; };
@@ -166,8 +166,6 @@ function setFalse(Doms): any {
} }
watch($storage, ({ layout }) => { watch($storage, ({ layout }) => {
/* 设置wangeditorV5主题色 */
body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
switch (layout["layout"]) { switch (layout["layout"]) {
case "vertical": case "vertical":
toggleClass(true, isSelect, unref(verticalRef)); toggleClass(true, isSelect, unref(verticalRef));
@@ -303,7 +301,7 @@ nextTick(() => {
:size="17" :size="17"
:color="getThemeColor(item.themeColor)" :color="getThemeColor(item.themeColor)"
> >
<IconifyIconOffline icon="check" /> <IconifyIconOffline :icon="Check" />
</el-icon> </el-icon>
</li> </li>
</ul> </ul>
@@ -384,7 +382,7 @@ nextTick(() => {
@click="onReset" @click="onReset"
> >
<IconifyIconOffline <IconifyIconOffline
icon="fa-sign-out" :icon="Logout"
width="15" width="15"
height="15" height="15"
style="margin-right: 4px" style="margin-right: 4px"

View File

@@ -1,9 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import { isEqual } from "lodash-unified"; import { isEqual } from "@pureadmin/utils";
import { transformI18n } from "/@/plugins/i18n";
import { ref, watch, onMounted, toRaw } from "vue"; import { ref, watch, onMounted, toRaw } from "vue";
import { getParentPaths, findRouteByPath } from "/@/router/utils"; import { getParentPaths, findRouteByPath } from "@/router/utils";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router"; import { useRoute, useRouter, RouteLocationMatched } from "vue-router";
const route = useRoute(); const route = useRoute();
@@ -53,7 +52,7 @@ const getBreadcrumb = (): void => {
{ {
path: "/welcome", path: "/welcome",
parentPath: "/", parentPath: "/",
meta: { title: "menus.hshome" } meta: { title: "首页" }
} as unknown as RouteLocationMatched } as unknown as RouteLocationMatched
].concat(matched); ].concat(matched);
} }
@@ -100,7 +99,7 @@ watch(
<transition-group appear name="breadcrumb"> <transition-group appear name="breadcrumb">
<el-breadcrumb-item v-for="item in levelList" :key="item.path"> <el-breadcrumb-item v-for="item in levelList" :key="item.path">
<a @click.prevent="handleLink(item)"> <a @click.prevent="handleLink(item)">
{{ transformI18n(item.meta.title) }} {{ item.meta.title }}
</a> </a>
</el-breadcrumb-item> </el-breadcrumb-item>
</transition-group> </transition-group>

View File

@@ -3,17 +3,15 @@ import Search from "../search/index.vue";
import Notice from "../notice/index.vue"; import Notice from "../notice/index.vue";
import { ref, watch, nextTick } from "vue"; import { ref, watch, nextTick } from "vue";
import SidebarItem from "./sidebarItem.vue"; import SidebarItem from "./sidebarItem.vue";
import avatars from "/@/assets/avatars.jpg"; import { useNav } from "@/layout/hooks/useNav";
import { useNav } from "/@/layout/hooks/useNav"; import { usePermissionStoreHook } from "@/store/modules/permission";
import { useTranslationLang } from "../../hooks/useTranslationLang"; import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import Setting from "@iconify-icons/ri/settings-3-line";
import globalization from "/@/assets/svg/globalization.svg?component";
const menuRef = ref(); const menuRef = ref();
const { t, route, locale, translationCh, translationEn } =
useTranslationLang(menuRef);
const { const {
route,
title, title,
routers, routers,
logout, logout,
@@ -21,9 +19,7 @@ const {
onPanel, onPanel,
menuSelect, menuSelect,
username, username,
avatarsStyle, avatarsStyle
getDropdownItemStyle,
getDropdownItemClass
} = useNav(); } = useNav();
nextTick(() => { nextTick(() => {
@@ -64,82 +60,39 @@ watch(
<Search /> <Search />
<!-- 通知 --> <!-- 通知 -->
<Notice id="header-notice" /> <Notice id="header-notice" />
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<globalization
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span class="check-zh" v-show="locale === '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 class="check-en" v-show="locale === 'en'">
<IconifyIconOffline icon="check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 退出登录 --> <!-- 退出登录 -->
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover"> <span class="el-dropdown-link navbar-bg-hover">
<img v-if="avatars" :src="avatars" :style="avatarsStyle" /> <img
src="https://avatars.githubusercontent.com/u/44761321?v=4"
:style="avatarsStyle"
/>
<p v-if="username" class="dark:text-white">{{ username }}</p> <p v-if="username" class="dark:text-white">{{ username }}</p>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="logout"> <el-dropdown-menu class="logout">
<el-dropdown-item @click="logout"> <el-dropdown-item @click="logout">
<IconifyIconOffline <IconifyIconOffline
icon="logout-circle-r-line" :icon="LogoutCircleRLine"
style="margin: 5px" style="margin: 5px"
/> />
{{ t("buttons.hsLoginOut") }} 退出系统
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<span <span
class="set-icon navbar-bg-hover" class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')" title="打开项目配置"
@click="onPanel" @click="onPanel"
> >
<IconifyIconOffline icon="setting" /> <IconifyIconOffline :icon="Setting" />
</span> </span>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
.logout { .logout {
max-width: 120px; max-width: 120px;

View File

@@ -1,5 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useDark } from "@pureadmin/utils"; import { useDark } from "@pureadmin/utils";
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
interface Props { interface Props {
isActive: boolean; isActive: boolean;
@@ -27,7 +29,7 @@ const toggleClick = () => {
:content="props.isActive ? '点击折叠' : '点击展开'" :content="props.isActive ? '点击折叠' : '点击展开'"
> >
<IconifyIconOffline <IconifyIconOffline
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'" :icon="props.isActive ? MenuFold : MenuUnfold"
class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1" class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
@click="toggleClick" @click="toggleClick"
/> />

View File

@@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import { useNav } from "/@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
const props = defineProps({ const props = defineProps({
collapse: Boolean collapse: Boolean
@@ -9,7 +9,7 @@ const { title } = useNav();
</script> </script>
<template> <template>
<div class="sidebar-logo-container" :class="{ collapse: props.collapse }"> <div class="sidebar-logo-container" :class="{ collapses: props.collapse }">
<transition name="sidebarLogoFade"> <transition name="sidebarLogoFade">
<router-link <router-link
v-if="props.collapse" v-if="props.collapse"
@@ -65,7 +65,7 @@ const { title } = useNav();
} }
} }
.collapse { .collapses {
.sidebar-logo { .sidebar-logo {
margin-right: 0; margin-right: 0;
} }

View File

@@ -1,22 +1,19 @@
<script setup lang="ts"> <script setup lang="ts">
import Search from "../search/index.vue"; import Search from "../search/index.vue";
import Notice from "../notice/index.vue"; import Notice from "../notice/index.vue";
import avatars from "/@/assets/avatars.jpg"; import { useNav } from "@/layout/hooks/useNav";
import { useNav } from "/@/layout/hooks/useNav";
import { transformI18n } from "/@/plugins/i18n";
import { ref, toRaw, watch, onMounted, nextTick } from "vue"; import { ref, toRaw, watch, onMounted, nextTick } from "vue";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { getParentPaths, findRouteByPath } from "/@/router/utils"; import { getParentPaths, findRouteByPath } from "@/router/utils";
import { useTranslationLang } from "../../hooks/useTranslationLang"; import { usePermissionStoreHook } from "@/store/modules/permission";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import globalization from "/@/assets/svg/globalization.svg?component"; import Setting from "@iconify-icons/ri/settings-3-line";
const menuRef = ref(); const menuRef = ref();
let defaultActive = ref(null); const defaultActive = ref(null);
const { t, route, locale, translationCh, translationEn } =
useTranslationLang(menuRef);
const { const {
route,
device, device,
routers, routers,
logout, logout,
@@ -24,9 +21,7 @@ const {
menuSelect, menuSelect,
resolvePath, resolvePath,
username, username,
avatarsStyle, avatarsStyle
getDropdownItemStyle,
getDropdownItemClass
} = useNav(); } = useNav();
function getDefaultActive(routePath) { function getDefaultActive(routePath) {
@@ -79,7 +74,7 @@ watch(
:is="useRenderIcon(route.meta && toRaw(route.meta.icon))" :is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
/> />
</div> </div>
<span class="select-none">{{ transformI18n(route.meta.title) }}</span> <span class="select-none">{{ route.meta.title }}</span>
<FontIcon <FontIcon
v-if="route.meta.extraIcon" v-if="route.meta.extraIcon"
width="30px" width="30px"
@@ -96,82 +91,39 @@ watch(
<Search /> <Search />
<!-- 通知 --> <!-- 通知 -->
<Notice id="header-notice" /> <Notice id="header-notice" />
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<globalization
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span class="check-zh" v-show="locale === '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 class="check-en" v-show="locale === 'en'">
<IconifyIconOffline icon="check" />
</span>
English
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!-- 退出登录 --> <!-- 退出登录 -->
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="el-dropdown-link navbar-bg-hover"> <span class="el-dropdown-link navbar-bg-hover select-none">
<img v-if="avatars" :src="avatars" :style="avatarsStyle" /> <img
src="https://avatars.githubusercontent.com/u/44761321?v=4"
:style="avatarsStyle"
/>
<p v-if="username" class="dark:text-white">{{ username }}</p> <p v-if="username" class="dark:text-white">{{ username }}</p>
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu class="logout"> <el-dropdown-menu class="logout">
<el-dropdown-item @click="logout"> <el-dropdown-item @click="logout">
<IconifyIconOffline <IconifyIconOffline
icon="logout-circle-r-line" :icon="LogoutCircleRLine"
style="margin: 5px" style="margin: 5px"
/> />
{{ t("buttons.hsLoginOut") }} 退出系统
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
<span <span
class="set-icon navbar-bg-hover" class="set-icon navbar-bg-hover"
:title="t('buttons.hssystemSet')" title="打开项目配置"
@click="onPanel" @click="onPanel"
> >
<IconifyIconOffline icon="setting" /> <IconifyIconOffline :icon="Setting" />
</span> </span>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped> <style lang="scss" scoped>
.translation {
::v-deep(.el-dropdown-menu__item) {
padding: 5px 40px;
}
.check-zh {
position: absolute;
left: 20px;
}
.check-en {
position: absolute;
left: 20px;
}
}
.logout { .logout {
max-width: 120px; max-width: 120px;

View File

@@ -1,11 +1,16 @@
<script setup lang="ts"> <script setup lang="ts">
import path from "path"; import path from "path";
import { getConfig } from "@/config";
import { childrenType } from "../../types"; import { childrenType } from "../../types";
import { useNav } from "/@/layout/hooks/useNav"; import { useNav } from "@/layout/hooks/useNav";
import { transformI18n } from "/@/plugins/i18n"; import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue"; import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
import ArrowUp from "@iconify-icons/ep/arrow-up";
import EpArrowDown from "@iconify-icons/ep/arrow-down";
import ArrowLeft from "@iconify-icons/ep/arrow-left";
import ArrowRight from "@iconify-icons/ep/arrow-right";
const { layout, isCollapse } = useNav(); const { layout, isCollapse } = useNav();
const props = defineProps({ const props = defineProps({
@@ -76,6 +81,16 @@ const getSpanStyle = computed(() => {
}; };
}); });
const expandCloseIcon = computed(() => {
if (!getConfig()?.MenuArrowIconNoTransition) return "";
return {
"expand-close-icon": useRenderIcon(EpArrowDown),
"expand-open-icon": useRenderIcon(ArrowUp),
"collapse-close-icon": useRenderIcon(ArrowRight),
"collapse-open-icon": useRenderIcon(ArrowLeft)
};
});
const onlyOneChild: childrenType = ref(null); const onlyOneChild: childrenType = ref(null);
// 存放菜单是否存在showTooltip属性标识 // 存放菜单是否存在showTooltip属性标识
const hoverMenuMap = new WeakMap(); const hoverMenuMap = new WeakMap();
@@ -164,7 +179,7 @@ function resolvePath(routePath) {
:style="getDivStyle" :style="getDivStyle"
> >
<span :style="getMenuTextStyle"> <span :style="getMenuTextStyle">
{{ transformI18n(onlyOneChild.meta.title) }} {{ onlyOneChild.meta.title }}
</span> </span>
</div> </div>
<div <div
@@ -174,13 +189,13 @@ function resolvePath(routePath) {
:style="getDivStyle" :style="getDivStyle"
> >
<span :style="getMenuTextStyle"> <span :style="getMenuTextStyle">
{{ transformI18n(onlyOneChild.meta.title) }} {{ onlyOneChild.meta.title }}
</span> </span>
</div> </div>
<template #title> <template #title>
<div :style="getDivStyle"> <div :style="getDivStyle">
<span v-if="layout === 'horizontal'"> <span v-if="layout === 'horizontal'">
{{ transformI18n(onlyOneChild.meta.title) }} {{ onlyOneChild.meta.title }}
</span> </span>
<el-tooltip <el-tooltip
v-else v-else
@@ -189,14 +204,14 @@ function resolvePath(routePath) {
:disabled="!onlyOneChild.showTooltip" :disabled="!onlyOneChild.showTooltip"
> >
<template #content> <template #content>
{{ transformI18n(onlyOneChild.meta.title) }} {{ onlyOneChild.meta.title }}
</template> </template>
<span <span
ref="menuTextRef" ref="menuTextRef"
:style="getMenuTextStyle" :style="getMenuTextStyle"
@mouseover="hoverMenu(onlyOneChild)" @mouseover="hoverMenu(onlyOneChild)"
> >
{{ transformI18n(onlyOneChild.meta.title) }} {{ onlyOneChild.meta.title }}
</span> </span>
</el-tooltip> </el-tooltip>
<FontIcon <FontIcon
@@ -212,7 +227,12 @@ function resolvePath(routePath) {
</el-menu-item> </el-menu-item>
</template> </template>
<el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)"> <el-sub-menu
v-else
ref="subMenu"
v-bind="expandCloseIcon"
:index="resolvePath(props.item.path)"
>
<template #title> <template #title>
<div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon"> <div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
<component <component
@@ -220,7 +240,7 @@ function resolvePath(routePath) {
/> />
</div> </div>
<span v-if="layout === 'horizontal'"> <span v-if="layout === 'horizontal'">
{{ transformI18n(props.item.meta.title) }} {{ props.item.meta.title }}
</span> </span>
<el-tooltip <el-tooltip
v-else v-else
@@ -229,7 +249,7 @@ function resolvePath(routePath) {
:disabled="!isCollapse || !props.item.showTooltip" :disabled="!isCollapse || !props.item.showTooltip"
> >
<template #content> <template #content>
{{ transformI18n(props.item.meta.title) }} {{ props.item.meta.title }}
</template> </template>
<div <div
ref="menuTextRef" ref="menuTextRef"
@@ -237,7 +257,7 @@ function resolvePath(routePath) {
@mouseover="hoverMenu(props.item)" @mouseover="hoverMenu(props.item)"
> >
<span :style="getSpanStyle"> <span :style="getSpanStyle">
{{ transformI18n(props.item.meta.title) }} {{ props.item.meta.title }}
</span> </span>
</div> </div>
</el-tooltip> </el-tooltip>

View File

@@ -1,4 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
interface Props { interface Props {
isActive: boolean; isActive: boolean;
} }
@@ -23,7 +26,7 @@ const toggleClick = () => {
@click="toggleClick" @click="toggleClick"
> >
<IconifyIconOffline <IconifyIconOffline
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'" :icon="props.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> </div>

View File

@@ -1,15 +1,14 @@
<script setup lang="ts"> <script setup lang="ts">
import Logo from "./logo.vue"; import Logo from "./logo.vue";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { emitter } from "/@/utils/mitt"; import { emitter } from "@/utils/mitt";
import SidebarItem from "./sidebarItem.vue"; import SidebarItem from "./sidebarItem.vue";
import leftCollapse from "./leftCollapse.vue"; import leftCollapse from "./leftCollapse.vue";
import type { StorageConfigs } from "/#/index"; import { useNav } from "@/layout/hooks/useNav";
import { useNav } from "/@/layout/hooks/useNav";
import { storageLocal } from "@pureadmin/utils"; import { storageLocal } from "@pureadmin/utils";
import { ref, computed, watch, onBeforeMount } from "vue"; import { ref, computed, watch, onBeforeMount } from "vue";
import { findRouteByPath, getParentPaths } from "/@/router/utils"; import { findRouteByPath, getParentPaths } from "@/router/utils";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
const route = useRoute(); const route = useRoute();
const showLogo = ref( const showLogo = ref(
@@ -19,7 +18,7 @@ const showLogo = ref(
const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } = const { routers, device, pureApp, isCollapse, menuSelect, toggleSideBar } =
useNav(); useNav();
let subMenuData = ref([]); const subMenuData = ref([]);
const menuData = computed(() => { const menuData = computed(() => {
return pureApp.layout === "mix" && device.value !== "mobile" return pureApp.layout === "mix" && device.value !== "mobile"

View File

@@ -1,16 +1,22 @@
<script setup lang="ts"> <script setup lang="ts">
import { $t } from "/@/plugins/i18n"; import { emitter } from "@/utils/mitt";
import { emitter } from "/@/utils/mitt";
import { RouteConfigs } from "../../types"; import { RouteConfigs } from "../../types";
import { useTags } from "../../hooks/useTag"; import { useTags } from "../../hooks/useTag";
import { routerArrays } from "/@/layout/types"; import { routerArrays } from "@/layout/types";
import { isEqual, isEmpty } from "lodash-unified"; import { isEqual, isEmpty } from "lodash-unified";
import { useSettingStoreHook } from "/@/store/modules/settings"; import { useSettingStoreHook } from "@/store/modules/settings";
import { ref, watch, unref, nextTick, onBeforeMount } from "vue"; import { ref, watch, unref, nextTick, onBeforeMount } from "vue";
import { handleAliveRoute, delAliveRoutes } from "/@/router/utils"; import { handleAliveRoute, delAliveRoutes } from "@/router/utils";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core"; import { useResizeObserver, useDebounceFn, useFullscreen } from "@vueuse/core";
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 CloseBold from "@iconify-icons/ep/close-bold";
const { const {
route, route,
router, router,
@@ -35,14 +41,13 @@ const {
onMounted, onMounted,
onMouseenter, onMouseenter,
onMouseleave, onMouseleave,
transformI18n,
onContentFullScreen onContentFullScreen
} = useTags(); } = useTags();
const tabDom = ref(); const tabDom = ref();
const containerDom = ref(); const containerDom = ref();
const scrollbarDom = ref(); const scrollbarDom = ref();
let isShowArrow = ref(false); const isShowArrow = ref(false);
const { isFullscreen, toggle } = useFullscreen(); const { isFullscreen, toggle } = useFullscreen();
const dynamicTagView = () => { const dynamicTagView = () => {
@@ -129,7 +134,7 @@ function dynamicRouteTag(value: string, parentPath: string): void {
function concatPath(arr: object[], value: string, parentPath: string) { function concatPath(arr: object[], value: string, parentPath: string) {
if (!hasValue) { if (!hasValue) {
arr.forEach((arrItem: any) => { arr.forEach((arrItem: any) => {
let pathConcat = parentPath + arrItem.path; const pathConcat = parentPath + arrItem.path;
if (arrItem.path === value || pathConcat === value) { if (arrItem.path === value || pathConcat === value) {
useMultiTagsStoreHook().handleTags("push", { useMultiTagsStoreHook().handleTags("push", {
path: value, path: value,
@@ -160,7 +165,7 @@ function onFresh() {
function deleteDynamicTag(obj: any, current: any, tag?: string) { function deleteDynamicTag(obj: any, current: any, tag?: string) {
// 存放被删除的缓存路由 // 存放被删除的缓存路由
let delAliveRouteList = []; let delAliveRouteList = [];
let valueIndex: number = multiTags.value.findIndex((item: any) => { const valueIndex: number = multiTags.value.findIndex((item: any) => {
if (item.query) { if (item.query) {
if (item.path === obj.path) { if (item.path === obj.path) {
return item.query === obj.query; return item.query === obj.query;
@@ -199,7 +204,7 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
// 从当前匹配到的路径中删除 // 从当前匹配到的路径中删除
spliceRoute(valueIndex, 1); spliceRoute(valueIndex, 1);
} }
let newRoute = useMultiTagsStoreHook().handleTags("slice"); const newRoute = useMultiTagsStoreHook().handleTags("slice");
if (current === route.path) { if (current === route.path) {
// 删除缓存路由 // 删除缓存路由
tag tag
@@ -284,11 +289,11 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
toggle(); toggle();
setTimeout(() => { setTimeout(() => {
if (isFullscreen.value) { if (isFullscreen.value) {
tagsViews[6].icon = "exit-fullscreen"; tagsViews[6].icon = ExitFullscreen;
tagsViews[6].text = $t("buttons.hswholeExitFullScreen"); tagsViews[6].text = "退出全屏";
} else { } else {
tagsViews[6].icon = "fullscreen"; tagsViews[6].icon = Fullscreen;
tagsViews[6].text = $t("buttons.hswholeFullScreen"); tagsViews[6].text = "全屏";
} }
}, 100); }, 100);
break; break;
@@ -297,11 +302,11 @@ function onClickDrop(key, item, selectRoute?: RouteConfigs) {
onContentFullScreen(); onContentFullScreen();
setTimeout(() => { setTimeout(() => {
if (pureSetting.hiddenSideBar) { if (pureSetting.hiddenSideBar) {
tagsViews[7].icon = "exit-fullscreen"; tagsViews[7].icon = ExitFullscreen;
tagsViews[7].text = $t("buttons.hscontentExitFullScreen"); tagsViews[7].text = "内容区退出全屏";
} else { } else {
tagsViews[7].icon = "fullscreen"; tagsViews[7].icon = Fullscreen;
tagsViews[7].text = $t("buttons.hscontentFullScreen"); tagsViews[7].text = "内容区全屏";
} }
}, 100); }, 100);
break; break;
@@ -339,8 +344,8 @@ function showMenuModel(
query: object = {}, query: object = {},
refresh = false refresh = false
) { ) {
let allRoute = multiTags.value; const allRoute = multiTags.value;
let routeLength = multiTags.value.length; const routeLength = multiTags.value.length;
let currentIndex = -1; let currentIndex = -1;
if (isEmpty(query)) { if (isEmpty(query)) {
currentIndex = allRoute.findIndex(v => v.path === currentPath); currentIndex = allRoute.findIndex(v => v.path === currentPath);
@@ -496,10 +501,10 @@ onMounted(() => {
<template> <template>
<div ref="containerDom" class="tags-view" v-if="!showTags"> <div ref="containerDom" class="tags-view" v-if="!showTags">
<span v-show="isShowArrow" class="arrow-left"> <span v-show="isShowArrow" class="arrow-left">
<IconifyIconOffline icon="arrow-left-s-line" @click="handleScroll(200)" /> <IconifyIconOffline :icon="ArrowLeftSLine" @click="handleScroll(200)" />
</span> </span>
<div ref="scrollbarDom" class="scroll-container"> <div ref="scrollbarDom" class="scroll-container">
<div class="tab" ref="tabDom" :style="getTabStyle"> <div class="tab select-none" ref="tabDom" :style="getTabStyle">
<div <div
:ref="'dynamic' + index" :ref="'dynamic' + index"
v-for="(item, index) in multiTags" v-for="(item, index) in multiTags"
@@ -520,7 +525,7 @@ onMounted(() => {
:to="item.path" :to="item.path"
class="dark:!text-text_color_primary dark:hover:!text-primary" class="dark:!text-text_color_primary dark:hover:!text-primary"
> >
{{ transformI18n(item.meta.title) }} {{ item.meta.title }}
</router-link> </router-link>
<span <span
v-if=" v-if="
@@ -530,7 +535,7 @@ onMounted(() => {
class="el-icon-close" class="el-icon-close"
@click.stop="deleteMenu(item)" @click.stop="deleteMenu(item)"
> >
<IconifyIconOffline icon="close-bold" /> <IconifyIconOffline :icon="CloseBold" />
</span> </span>
<div <div
:ref="'schedule' + index" :ref="'schedule' + index"
@@ -541,10 +546,7 @@ onMounted(() => {
</div> </div>
</div> </div>
<span v-show="isShowArrow" class="arrow-right"> <span v-show="isShowArrow" class="arrow-right">
<IconifyIconOffline <IconifyIconOffline :icon="ArrowRightSLine" @click="handleScroll(-200)" />
icon="arrow-right-s-line"
@click="handleScroll(-200)"
/>
</span> </span>
<!-- 右键菜单按钮 --> <!-- 右键菜单按钮 -->
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
@@ -561,7 +563,7 @@ onMounted(() => {
> >
<li v-if="item.show" @click="selectTag(key, item)"> <li v-if="item.show" @click="selectTag(key, item)">
<IconifyIconOffline :icon="item.icon" /> <IconifyIconOffline :icon="item.icon" />
{{ transformI18n(item.text) }} {{ item.text }}
</li> </li>
</div> </div>
</ul> </ul>
@@ -573,7 +575,7 @@ onMounted(() => {
@command="handleCommand" @command="handleCommand"
> >
<span class="arrow-down"> <span class="arrow-down">
<IconifyIconOffline icon="arrow-down" class="dark:text-white" /> <IconifyIconOffline :icon="ArrowDown" class="dark:text-white" />
</span> </span>
<template #dropdown> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
@@ -585,7 +587,7 @@ onMounted(() => {
:disabled="item.disabled" :disabled="item.disabled"
> >
<IconifyIconOffline :icon="item.icon" /> <IconifyIconOffline :icon="item.icon" />
{{ transformI18n(item.text) }} {{ item.text }}
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>

View File

@@ -1,5 +1,4 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router"; import { useRoute } from "vue-router";
import { ref, unref, onMounted, nextTick } from "vue"; import { ref, unref, onMounted, nextTick } from "vue";
@@ -7,7 +6,6 @@ defineOptions({
name: "FrameView" name: "FrameView"
}); });
const { t } = useI18n();
const loading = ref(true); const loading = ref(true);
const currentRoute = useRoute(); const currentRoute = useRoute();
const frameSrc = ref<string>(""); const frameSrc = ref<string>("");
@@ -45,11 +43,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div <div class="frame" v-loading="loading" element-loading-text="加载中...">
class="frame"
v-loading="loading"
:element-loading-text="t('status.hsLoad')"
>
<iframe :src="frameSrc" class="frame-iframe" ref="frameRef" /> <iframe :src="frameSrc" class="frame-iframe" ref="frameRef" />
</div> </div>
</template> </template>

View File

@@ -1,11 +1,11 @@
import { ref } from "vue"; import { ref } from "vue";
import { getConfig } from "/@/config"; import { getConfig } from "@/config";
import { find } from "lodash-unified"; import { find } from "lodash-unified";
import { useLayout } from "./useLayout"; import { useLayout } from "./useLayout";
import { themeColorsType } from "../types"; import { themeColorsType } from "../types";
import { TinyColor } from "@ctrl/tinycolor"; import { TinyColor } from "@ctrl/tinycolor";
import { useGlobal } from "@pureadmin/utils"; import { useGlobal } from "@pureadmin/utils";
import { useEpThemeStoreHook } from "/@/store/modules/epTheme"; import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { import {
darken, darken,
lighten, lighten,
@@ -69,7 +69,7 @@ export function useDataThemeChange() {
return new TinyColor(color).shade(10).toString(); return new TinyColor(color).shade(10).toString();
}; };
/** 设置ep主题色 */ /** 设置 `element-plus` 主题色 */
const setEpThemeColor = (color: string) => { const setEpThemeColor = (color: string) => {
useEpThemeStoreHook().setEpThemeColor(color); useEpThemeStoreHook().setEpThemeColor(color);
body.style.setProperty("--el-color-primary-active", shadeBgColor(color)); body.style.setProperty("--el-color-primary-active", shadeBgColor(color));

View File

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

View File

@@ -1,42 +1,28 @@
import { computed } from "vue"; import { computed } from "vue";
import { getConfig } from "/@/config"; import { storeToRefs } from "pinia";
import { useRouter } from "vue-router"; import { getConfig } from "@/config";
import { emitter } from "/@/utils/mitt"; import { emitter } from "@/utils/mitt";
import { routeMetaType } from "../types"; import { routeMetaType } from "../types";
import { useGlobal } from "@pureadmin/utils"; import { useGlobal } from "@pureadmin/utils";
import { transformI18n } from "/@/plugins/i18n"; import { useRouter, useRoute } from "vue-router";
import { router, remainingPaths } from "/@/router"; import { router, remainingPaths } from "@/router";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "@/store/modules/app";
import { useUserStoreHook } from "/@/store/modules/user"; import { useUserStoreHook } from "@/store/modules/user";
import { useEpThemeStoreHook } from "/@/store/modules/epTheme"; import { usePermissionStoreHook } from "@/store/modules/permission";
const errorInfo = "当前路由配置不正确,请检查配置"; const errorInfo = "当前路由配置不正确,请检查配置";
export function useNav() { export function useNav() {
const route = useRoute();
const pureApp = useAppStoreHook(); const pureApp = useAppStoreHook();
const routers = useRouter().options.routes; const routers = useRouter().options.routes;
const { wholeMenus } = storeToRefs(usePermissionStoreHook());
/** 用户名 */ /** 用户名 */
const username = computed(() => { const username = computed(() => {
return useUserStoreHook()?.username; return useUserStoreHook()?.username;
}); });
/** 设置国际化选中后的样式 */
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(() => { const avatarsStyle = computed(() => {
return username.value ? { marginRight: "10px" } : ""; return username.value ? { marginRight: "10px" } : "";
}); });
@@ -61,8 +47,8 @@ export function useNav() {
/** 动态title */ /** 动态title */
function changeTitle(meta: routeMetaType) { function changeTitle(meta: routeMetaType) {
const Title = getConfig().Title; const Title = getConfig().Title;
if (Title) document.title = `${transformI18n(meta.title)} | ${Title}`; if (Title) document.title = `${meta.title} | ${Title}`;
else document.title = transformI18n(meta.title); else document.title = meta.title;
} }
/** 退出登录 */ /** 退出登录 */
@@ -98,6 +84,7 @@ export function useNav() {
} }
function menuSelect(indexPath: string, routers): void { function menuSelect(indexPath: string, routers): void {
if (wholeMenus.value.length === 0) return;
if (isRemaining(indexPath)) return; if (isRemaining(indexPath)) return;
let parentPath = ""; let parentPath = "";
const parentPathIndex = indexPath.lastIndexOf("/"); const parentPathIndex = indexPath.lastIndexOf("/");
@@ -132,6 +119,7 @@ export function useNav() {
} }
return { return {
route,
title, title,
device, device,
layout, layout,
@@ -148,8 +136,6 @@ export function useNav() {
isCollapse, isCollapse,
pureApp, pureApp,
username, username,
avatarsStyle, avatarsStyle
getDropdownItemStyle,
getDropdownItemClass
}; };
} }

View File

@@ -9,15 +9,21 @@ import {
getCurrentInstance getCurrentInstance
} from "vue"; } from "vue";
import { tagsViewsType } from "../types"; import { tagsViewsType } from "../types";
import { isEqual } from "lodash-unified";
import type { StorageConfigs } from "/#/index";
import { useEventListener } from "@vueuse/core"; import { useEventListener } from "@vueuse/core";
import { useRoute, useRouter } from "vue-router"; import { useRoute, useRouter } from "vue-router";
import { transformI18n, $t } from "/@/plugins/i18n"; import { isEqual, isBoolean } from "@pureadmin/utils";
import { useSettingStoreHook } from "/@/store/modules/settings"; import { useSettingStoreHook } from "@/store/modules/settings";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { storageLocal, toggleClass, hasClass } from "@pureadmin/utils"; import { storageLocal, toggleClass, 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";
export function useTags() { export function useTags() {
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@@ -48,57 +54,57 @@ export function useTags() {
const tagsViews = reactive<Array<tagsViewsType>>([ const tagsViews = reactive<Array<tagsViewsType>>([
{ {
icon: "refresh-right", icon: RefreshRight,
text: $t("buttons.hsreload"), text: "重新加载",
divided: false, divided: false,
disabled: false, disabled: false,
show: true show: true
}, },
{ {
icon: "close", icon: Close,
text: $t("buttons.hscloseCurrentTab"), text: "关闭当前标签页",
divided: false, divided: false,
disabled: multiTags.value.length > 1 ? false : true, disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: "close-left-tags", icon: CloseLeftTags,
text: $t("buttons.hscloseLeftTabs"), text: "关闭左侧标签页",
divided: true, divided: true,
disabled: multiTags.value.length > 1 ? false : true, disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: "close-right-tags", icon: CloseRightTags,
text: $t("buttons.hscloseRightTabs"), text: "关闭右侧标签页",
divided: false, divided: false,
disabled: multiTags.value.length > 1 ? false : true, disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: "close-other-tags", icon: CloseOtherTags,
text: $t("buttons.hscloseOtherTabs"), text: "关闭其他标签页",
divided: true, divided: true,
disabled: multiTags.value.length > 2 ? false : true, disabled: multiTags.value.length > 2 ? false : true,
show: true show: true
}, },
{ {
icon: "close-all-tags", icon: CloseAllTags,
text: $t("buttons.hscloseAllTabs"), text: "关闭全部标签页",
divided: false, divided: false,
disabled: multiTags.value.length > 1 ? false : true, disabled: multiTags.value.length > 1 ? false : true,
show: true show: true
}, },
{ {
icon: "fullscreen", icon: Fullscreen,
text: $t("buttons.hswholeFullScreen"), text: "整体页面全屏",
divided: true, divided: true,
disabled: false, disabled: false,
show: true show: true
}, },
{ {
icon: "fullscreen", icon: Fullscreen,
text: $t("buttons.hscontentFullScreen"), text: "内容区全屏",
divided: false, divided: false,
disabled: false, disabled: false,
show: true show: true
@@ -106,15 +112,14 @@ export function useTags() {
]); ]);
function conditionHandle(item, previous, next) { function conditionHandle(item, previous, next) {
if ( if (isBoolean(route?.meta?.showLink) && route?.meta?.showLink === false) {
Object.keys(route.query).length === 0 && if (Object.keys(route.query).length > 0) {
Object.keys(route.params).length === 0 return isEqual(route.query, item.query) ? previous : next;
) { } else {
return route.path === item.path ? previous : next; return isEqual(route.params, item.params) ? previous : next;
} else if (Object.keys(route.query).length > 0) { }
return isEqual(route.query, item.query) ? previous : next;
} else { } else {
return isEqual(route.params, item.params) ? previous : next; return route.path === item.path ? previous : next;
} }
} }
@@ -224,12 +229,10 @@ export function useTags() {
currentSelect, currentSelect,
scheduleIsActive, scheduleIsActive,
getContextMenuStyle, getContextMenuStyle,
$t,
closeMenu, closeMenu,
onMounted, onMounted,
onMouseenter, onMouseenter,
onMouseleave, onMouseleave,
transformI18n,
onContentFullScreen onContentFullScreen
}; };
} }

View File

@@ -1,37 +0,0 @@
import { useNav } from "./useNav";
import { useI18n } from "vue-i18n";
import { useRoute } from "vue-router";
import { watch, 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);
}
);
return {
t,
route,
locale,
translationCh,
translationEn
};
}

View File

@@ -1,9 +1,10 @@
<script setup lang="ts"> <script setup lang="ts">
import "animate.css";
import { setType } from "./types"; import { setType } from "./types";
import { emitter } from "/@/utils/mitt"; import { emitter } from "@/utils/mitt";
import { useLayout } from "./hooks/useLayout"; import { useLayout } from "./hooks/useLayout";
import { useAppStoreHook } from "/@/store/modules/app"; import { useAppStoreHook } from "@/store/modules/app";
import { useSettingStoreHook } from "/@/store/modules/settings"; import { useSettingStoreHook } from "@/store/modules/settings";
import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils"; import { deviceDetection, useDark, useGlobal } from "@pureadmin/utils";
import { h, reactive, computed, onMounted, defineComponent } from "vue"; import { h, reactive, computed, onMounted, defineComponent } from "vue";
@@ -13,7 +14,7 @@ import appMain from "./components/appMain.vue";
import setting from "./components/setting/index.vue"; import setting from "./components/setting/index.vue";
import Vertical from "./components/sidebar/vertical.vue"; import Vertical from "./components/sidebar/vertical.vue";
import Horizontal from "./components/sidebar/horizontal.vue"; import Horizontal from "./components/sidebar/horizontal.vue";
import backTop from "/@/assets/svg/back_top.svg?component"; import backTop from "@/assets/svg/back_top.svg?component";
const { isDark } = useDark(); const { isDark } = useDark();
const { layout } = useLayout(); const { layout } = useLayout();
@@ -70,7 +71,7 @@ let isAutoCloseSidebar = true;
// 监听容器 // 监听容器
emitter.on("resize", ({ detail }) => { emitter.on("resize", ({ detail }) => {
if (isMobile) return; if (isMobile) return;
let { width } = detail; const { width } = detail;
width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout); width <= 760 ? setTheme("vertical") : setTheme(useAppStoreHook().layout);
/** width app-wrapper类容器宽度 /** width app-wrapper类容器宽度
* 0 < width <= 760 隐藏侧边栏 * 0 < width <= 760 隐藏侧边栏

View File

@@ -20,7 +20,6 @@ const themeColors = {
menuHover: "#4091f7", menuHover: "#4091f7",
subMenuBg: "#0f0303", subMenuBg: "#0f0303",
subMenuActiveBg: "#4091f7", subMenuActiveBg: "#4091f7",
navTextColor: "#fff",
menuText: "rgb(254 254 254 / 65%)", menuText: "rgb(254 254 254 / 65%)",
sidebarLogo: "#002140", sidebarLogo: "#002140",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@@ -33,7 +32,6 @@ const themeColors = {
menuHover: "#e0ebf6", menuHover: "#e0ebf6",
subMenuBg: "#fff", subMenuBg: "#fff",
subMenuActiveBg: "#e0ebf6", subMenuActiveBg: "#e0ebf6",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#fff", sidebarLogo: "#fff",
menuTitleHover: "#000", menuTitleHover: "#000",
@@ -46,7 +44,6 @@ const themeColors = {
menuHover: "#e13c39", menuHover: "#e13c39",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#e13c39", subMenuActiveBg: "#e13c39",
navTextColor: "#red",
menuText: "rgb(254 254 254 / 65.1%)", menuText: "rgb(254 254 254 / 65.1%)",
sidebarLogo: "#42090c", sidebarLogo: "#42090c",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@@ -59,7 +56,6 @@ const themeColors = {
menuHover: "#e85f33", menuHover: "#e85f33",
subMenuBg: "#0f0603", subMenuBg: "#0f0603",
subMenuActiveBg: "#e85f33", subMenuActiveBg: "#e85f33",
navTextColor: "#fff",
menuText: "rgb(254 254 254 / 65%)", menuText: "rgb(254 254 254 / 65%)",
sidebarLogo: "#441708", sidebarLogo: "#441708",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@@ -72,7 +68,6 @@ const themeColors = {
menuHover: "#f6da4d", menuHover: "#f6da4d",
subMenuBg: "#0f0603", subMenuBg: "#0f0603",
subMenuActiveBg: "#f6da4d", subMenuActiveBg: "#f6da4d",
navTextColor: "#fff",
menuText: "rgb(254 254 254 / 65%)", menuText: "rgb(254 254 254 / 65%)",
sidebarLogo: "#443b05", sidebarLogo: "#443b05",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@@ -85,7 +80,6 @@ const themeColors = {
menuHover: "#59bfc1", menuHover: "#59bfc1",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#59bfc1", subMenuActiveBg: "#59bfc1",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#053434", sidebarLogo: "#053434",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@@ -98,7 +92,6 @@ const themeColors = {
menuHover: "#60ac80", menuHover: "#60ac80",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#60ac80", subMenuActiveBg: "#60ac80",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#112f21", sidebarLogo: "#112f21",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@@ -111,7 +104,6 @@ const themeColors = {
menuHover: "#d84493", menuHover: "#d84493",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#d84493", subMenuActiveBg: "#d84493",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#3f0d29", sidebarLogo: "#3f0d29",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@@ -124,7 +116,6 @@ const themeColors = {
menuHover: "#693ac9", menuHover: "#693ac9",
subMenuBg: "#000", subMenuBg: "#000",
subMenuActiveBg: "#693ac9", subMenuActiveBg: "#693ac9",
navTextColor: "#7a80b4",
menuText: "#7a80b4", menuText: "#7a80b4",
sidebarLogo: "#1f0c38", sidebarLogo: "#1f0c38",
menuTitleHover: "#fff", menuTitleHover: "#fff",
@@ -147,7 +138,6 @@ export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
$menuHover: ${themeColors[key].menuHover} !default; $menuHover: ${themeColors[key].menuHover} !default;
$subMenuBg: ${themeColors[key].subMenuBg} !default; $subMenuBg: ${themeColors[key].subMenuBg} !default;
$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default; $subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
$navTextColor: ${themeColors[key].navTextColor} !default;
$menuText: ${themeColors[key].menuText} !default; $menuText: ${themeColors[key].menuText} !default;
$sidebarLogo: ${themeColors[key].sidebarLogo} !default; $sidebarLogo: ${themeColors[key].sidebarLogo} !default;
$menuTitleHover: ${themeColors[key].menuTitleHover} !default; $menuTitleHover: ${themeColors[key].menuTitleHover} !default;

View File

@@ -1,17 +1,20 @@
import type { IconifyIcon } from "@iconify/vue";
import HomeFilled from "@iconify-icons/ep/home-filled";
export const routerArrays: Array<RouteConfigs> = [ export const routerArrays: Array<RouteConfigs> = [
{ {
path: "/welcome", path: "/welcome",
parentPath: "/", parentPath: "/",
meta: { meta: {
title: "menus.hshome", title: "首页",
icon: "home-filled" icon: HomeFilled
} }
} }
]; ];
export type routeMetaType = { export type routeMetaType = {
title?: string; title?: string;
icon?: string; icon?: string | IconifyIcon;
showLink?: boolean; showLink?: boolean;
savedPosition?: boolean; savedPosition?: boolean;
auths?: Array<string>; auths?: Array<string>;
@@ -32,7 +35,7 @@ export type multiTagsType = {
}; };
export type tagsViewsType = { export type tagsViewsType = {
icon: string; icon: string | IconifyIcon;
text: string; text: string;
divided: boolean; divided: boolean;
disabled: boolean; disabled: boolean;

View File

@@ -1,27 +1,22 @@
import App from "./App.vue"; import App from "./App.vue";
import router from "./router"; import router from "./router";
import { setupStore } from "/@/store"; import { setupStore } from "@/store";
import ElementPlus from "element-plus"; import ElementPlus from "element-plus";
import { getServerConfig } from "./config"; import { getServerConfig } from "./config";
import { createApp, Directive } from "vue"; import { createApp, Directive } from "vue";
import { useI18n } from "../src/plugins/i18n";
import { MotionPlugin } from "@vueuse/motion"; import { MotionPlugin } from "@vueuse/motion";
// import { useEcharts } from "/@/plugins/echarts"; // import { useEcharts } from "@/plugins/echarts";
// import { useTable } from "../src/plugins/vxe-table"; // import { useTable } from "@/plugins/vxe-table";
import { injectResponsiveStorage } from "/@/utils/responsive"; import { injectResponsiveStorage } from "@/utils/responsive";
// import Table from "@pureadmin/table"; // import Table from "@pureadmin/table";
// import PureDescriptions from "@pureadmin/descriptions"; // import PureDescriptions from "@pureadmin/descriptions";
import "animate.css";
// 引入重置样式 // 引入重置样式
import "./style/reset.scss"; import "./style/reset.scss";
// 导入公共样式 // 导入公共样式
import "./style/index.scss"; import "./style/index.scss";
import "element-plus/dist/index.css"; import "element-plus/dist/index.css";
import "@pureadmin/components/dist/index.css";
import "@pureadmin/components/dist/theme.css";
import "@pureadmin/components/dist/dark.scss";
// 导入字体图标 // 导入字体图标
import "./assets/iconfont/iconfont.js"; import "./assets/iconfont/iconfont.js";
import "./assets/iconfont/iconfont.css"; import "./assets/iconfont/iconfont.css";
@@ -29,7 +24,7 @@ import "./assets/iconfont/iconfont.css";
const app = createApp(App); const app = createApp(App);
// 自定义指令 // 自定义指令
import * as directives from "/@/directives"; import * as directives from "@/directives";
Object.keys(directives).forEach(key => { Object.keys(directives).forEach(key => {
app.directive(key, (directives as { [key: string]: Directive })[key]); app.directive(key, (directives as { [key: string]: Directive })[key]);
}); });
@@ -45,7 +40,7 @@ app.component("IconifyIconOnline", IconifyIconOnline);
app.component("FontIcon", FontIcon); app.component("FontIcon", FontIcon);
// 全局注册按钮级别权限组件 // 全局注册按钮级别权限组件
import { Auth } from "/@/components/ReAuth"; import { Auth } from "@/components/ReAuth";
app.component("Auth", Auth); app.component("Auth", Auth);
getServerConfig(app).then(async config => { getServerConfig(app).then(async config => {
@@ -53,7 +48,7 @@ getServerConfig(app).then(async config => {
await router.isReady(); await router.isReady();
injectResponsiveStorage(app, config); injectResponsiveStorage(app, config);
setupStore(app); setupStore(app);
app.use(MotionPlugin).use(useI18n).use(ElementPlus); app.use(MotionPlugin).use(ElementPlus);
// .use(useEcharts); // .use(useEcharts);
// .use(Table); // .use(Table);
// .use(PureDescriptions); // .use(PureDescriptions);

View File

@@ -1,6 +1,6 @@
import type { App } from "vue"; import type { App } from "vue";
import * as echarts from "echarts/core"; import * as echarts from "echarts/core";
import { SVGRenderer } from "echarts/renderers"; import { CanvasRenderer } from "echarts/renderers";
import { PieChart, BarChart, LineChart } from "echarts/charts"; import { PieChart, BarChart, LineChart } from "echarts/charts";
import { import {
GridComponent, GridComponent,
@@ -19,7 +19,7 @@ use([
PieChart, PieChart,
BarChart, BarChart,
LineChart, LineChart,
SVGRenderer, CanvasRenderer,
GridComponent, GridComponent,
TitleComponent, TitleComponent,
LegendComponent, LegendComponent,
@@ -33,6 +33,7 @@ use([
/** /**
* @description 按需引入echarts * @description 按需引入echarts
* @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6} * @see {@link https://echarts.apache.org/handbook/zh/basics/import#%E6%8C%89%E9%9C%80%E5%BC%95%E5%85%A5-echarts-%E5%9B%BE%E8%A1%A8%E5%92%8C%E7%BB%84%E4%BB%B6}
* @see 温馨提示:必须将 `$echarts` 添加到全局 `globalProperties` ,为了配合 https://pure-admin-utils.netlify.app/hooks/useEcharts/useEcharts.html 使用
*/ */
export function useEcharts(app: App) { export function useEcharts(app: App) {
app.config.globalProperties.$echarts = echarts; app.config.globalProperties.$echarts = echarts;

View File

@@ -1,74 +0,0 @@
// 多组件库的国际化和本地项目国际化兼容
import { App, WritableComputedRef } from "vue";
import type { StorageConfigs } from "/#/index";
import { storageLocal } from "@pureadmin/utils";
import { type I18n, createI18n } from "vue-i18n";
// element-plus国际化
import enLocale from "element-plus/lib/locale/lang/en";
import zhLocale from "element-plus/lib/locale/lang/zh-cn";
function siphonI18n(prefix = "zh-CN") {
return 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];
})
)[prefix];
}
export const localesConfigs = {
zh: {
...siphonI18n("zh-CN"),
...zhLocale
},
en: {
...siphonI18n("en"),
...enLocale
}
};
/**
* 国际化转换工具函数自动读取根目录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*)\./)?.[1];
if (key && Object.keys(siphonI18n("zh-CN")).includes(key)) {
return i18n.global.t.call(i18n.global.locale, message);
} else if (!key && Object.keys(siphonI18n("zh-CN")).includes(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>("responsive-locale")?.locale ?? "zh",
fallbackLocale: "en",
messages: localesConfigs
});
export function useI18n(app: App) {
app.use(i18n);
}

View File

@@ -1,11 +1,7 @@
import "xe-utils"; import "xe-utils";
import "./index.scss"; import "./index.scss";
import XEUtils from "xe-utils"; import { App } from "vue";
import { App, unref } from "vue";
import { i18n } from "/@/plugins/i18n";
import "font-awesome/css/font-awesome.min.css"; import "font-awesome/css/font-awesome.min.css";
import zh from "vxe-table/lib/locale/lang/zh-CN";
import en from "vxe-table/lib/locale/lang/en-US";
import { import {
// 核心 // 核心
@@ -60,18 +56,6 @@ VXETable.setup({
}, },
input: { input: {
clearable: true clearable: true
},
i18n: (key, args) => {
return unref(i18n.global.locale) === "zh"
? XEUtils.toFormatString(XEUtils.get(zh, key), args)
: XEUtils.toFormatString(XEUtils.get(en, key), args);
},
translate(key) {
const NAMESPACED = ["el.", "buttons."];
if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
return i18n.global.t.call(i18n.global.locale, key);
}
return key;
} }
}); });

View File

@@ -1,11 +1,10 @@
import { getConfig } from "/@/config"; // import "@/utils/sso";
import { toRouteType } from "./types"; import { getConfig } from "@/config";
import NProgress from "/@/utils/progress"; import NProgress from "@/utils/progress";
import { findIndex } from "lodash-unified"; import { findIndex } from "lodash-unified";
import { transformI18n } from "/@/plugins/i18n"; import { sessionKey, type DataInfo } from "@/utils/auth";
import { sessionKey, type DataInfo } from "/@/utils/auth"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { usePermissionStoreHook } from "@/store/modules/permission";
import { usePermissionStoreHook } from "/@/store/modules/permission";
import { import {
Router, Router,
createRouter, createRouter,
@@ -22,19 +21,28 @@ import {
formatTwoStageRoutes, formatTwoStageRoutes,
formatFlatteningRoutes formatFlatteningRoutes
} from "./utils"; } from "./utils";
import { import { buildHierarchyTree } from "@/utils/tree";
buildHierarchyTree, import { isUrl, openLink, storageSession } from "@pureadmin/utils";
openLink,
isUrl,
storageSession
} from "@pureadmin/utils";
import homeRouter from "./modules/home";
import errorRouter from "./modules/error";
import remainingRouter from "./modules/remaining"; import remainingRouter from "./modules/remaining";
/** 自动导入全部静态路由,无需再手动引入!匹配 src/router/modules 目录(任何嵌套级别)中具有 .ts 扩展名的所有文件,除了 remaining.ts 文件
* 如何匹配所有文件请看https://github.com/mrmlnc/fast-glob#basic-syntax
* 如何排除文件请看https://cn.vitejs.dev/guide/features.html#negative-patterns
*/
const modules: Record<string, any> = import.meta.glob(
["./modules/**/*.ts", "!./modules/**/remaining.ts"],
{
eager: true
}
);
/** 原始静态路由(未做任何处理) */ /** 原始静态路由(未做任何处理) */
const routes = [homeRouter, errorRouter]; const routes = [];
Object.keys(modules).forEach(key => {
routes.push(modules[key].default);
});
/** 导出处理后的静态路由(三级及以上的路由全部拍成二级) */ /** 导出处理后的静态路由(三级及以上的路由全部拍成二级) */
export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes( export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
@@ -104,11 +112,14 @@ router.beforeEach((to: toRouteType, _from, next) => {
to.matched.some(item => { to.matched.some(item => {
if (!item.meta.title) return ""; if (!item.meta.title) return "";
const Title = getConfig().Title; const Title = getConfig().Title;
if (Title) if (Title) document.title = `${item.meta.title} | ${Title}`;
document.title = `${transformI18n(item.meta.title)} | ${Title}`; else document.title = item.meta.title as string;
else document.title = transformI18n(item.meta.title);
}); });
} }
/** 如果已经登录并存在登录信息后不能跳转到路由白名单,而是继续保持在当前页面 */
function toCorrectRoute() {
whiteList.includes(to.fullPath) ? next(_from.fullPath) : next();
}
if (userInfo) { if (userInfo) {
// 无权限跳转403页面 // 无权限跳转403页面
if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) { if (to.meta?.roles && !isOneOfArray(to.meta?.roles, userInfo?.roles)) {
@@ -120,7 +131,7 @@ router.beforeEach((to: toRouteType, _from, next) => {
openLink(to?.name as string); openLink(to?.name as string);
NProgress.done(); NProgress.done();
} else { } else {
next(); toCorrectRoute();
} }
} else { } else {
// 刷新 // 刷新
@@ -150,7 +161,7 @@ router.beforeEach((to: toRouteType, _from, next) => {
} }
router.push(to.fullPath); router.push(to.fullPath);
}); });
next(); toCorrectRoute();
} }
} else { } else {
if (to.path !== "/login") { if (to.path !== "/login") {

View File

@@ -1,40 +1,37 @@
import { $t } from "/@/plugins/i18n"; import InformationLine from "@iconify-icons/ri/information-line";
import type { RouteConfigsTable } from "/#/index";
const errorRouter: RouteConfigsTable = { export default {
path: "/error", path: "/error",
redirect: "/error/403", redirect: "/error/403",
meta: { meta: {
icon: "information-line", icon: InformationLine,
title: $t("menus.hsabnormal"), title: "异常页面",
rank: 9 rank: 9
}, },
children: [ children: [
{ {
path: "/error/403", path: "/error/403",
name: "403", name: "403",
component: () => import("/@/views/error/403.vue"), component: () => import("@/views/error/403.vue"),
meta: { meta: {
title: $t("menus.hsfourZeroOne") title: "403"
} }
}, },
{ {
path: "/error/404", path: "/error/404",
name: "404", name: "404",
component: () => import("/@/views/error/404.vue"), component: () => import("@/views/error/404.vue"),
meta: { meta: {
title: $t("menus.hsfourZeroFour") title: "404"
} }
}, },
{ {
path: "/error/500", path: "/error/500",
name: "500", name: "500",
component: () => import("/@/views/error/500.vue"), component: () => import("@/views/error/500.vue"),
meta: { meta: {
title: $t("menus.hsFive") title: "500"
} }
} }
] ]
}; } as RouteConfigsTable;
export default errorRouter;

View File

@@ -1,27 +1,24 @@
import { $t } from "/@/plugins/i18n"; const Layout = () => import("@/layout/index.vue");
import type { RouteConfigsTable } from "/#/index"; import HomeFilled from "@iconify-icons/ep/home-filled";
const Layout = () => import("/@/layout/index.vue");
const homeRouter: RouteConfigsTable = { export default {
path: "/", path: "/",
name: "Home", name: "Home",
component: Layout, component: Layout,
redirect: "/welcome", redirect: "/welcome",
meta: { meta: {
icon: "home-filled", icon: HomeFilled,
title: $t("menus.hshome"), title: "首页",
rank: 0 rank: 0
}, },
children: [ children: [
{ {
path: "/welcome", path: "/welcome",
name: "Welcome", name: "Welcome",
component: () => import("/@/views/welcome/index.vue"), component: () => import("@/views/welcome/index.vue"),
meta: { meta: {
title: $t("menus.hshome") title: "首页"
} }
} }
] ]
}; } as RouteConfigsTable;
export default homeRouter;

View File

@@ -1,14 +1,13 @@
import { $t } from "/@/plugins/i18n"; const Layout = () => import("@/layout/index.vue");
import type { RouteConfigsTable } from "/#/index"; import HomeFilled from "@iconify-icons/ep/home-filled";
const Layout = () => import("/@/layout/index.vue");
const remainingRouter: Array<RouteConfigsTable> = [ export default [
{ {
path: "/login", path: "/login",
name: "Login", name: "Login",
component: () => import("/@/views/login/index.vue"), component: () => import("@/views/login/index.vue"),
meta: { meta: {
title: $t("menus.hslogin"), title: "登录",
showLink: false, showLink: false,
rank: 101 rank: 101
} }
@@ -17,8 +16,8 @@ const remainingRouter: Array<RouteConfigsTable> = [
path: "/redirect", path: "/redirect",
component: Layout, component: Layout,
meta: { meta: {
icon: "home-filled", icon: HomeFilled,
title: $t("menus.hshome"), title: "首页",
showLink: false, showLink: false,
rank: 104 rank: 104
}, },
@@ -26,10 +25,8 @@ const remainingRouter: Array<RouteConfigsTable> = [
{ {
path: "/redirect/:path(.*)", path: "/redirect/:path(.*)",
name: "Redirect", name: "Redirect",
component: () => import("/@/layout/redirect.vue") component: () => import("@/layout/redirect.vue")
} }
] ]
} }
]; ] as Array<RouteConfigsTable>;
export default remainingRouter;

View File

@@ -1,9 +0,0 @@
import { RouteLocationNormalized } from "vue-router";
export interface toRouteType extends RouteLocationNormalized {
meta: {
roles: Array<string>;
keepAlive?: boolean;
dynamicLevel?: string;
};
}

View File

@@ -10,22 +10,22 @@ import { router } from "./index";
import { isProxy, toRaw } from "vue"; import { isProxy, toRaw } from "vue";
import { loadEnv } from "../../build"; import { loadEnv } from "../../build";
import { useTimeoutFn } from "@vueuse/core"; import { useTimeoutFn } from "@vueuse/core";
import { RouteConfigs } from "/@/layout/types"; import { RouteConfigs } from "@/layout/types";
import { import {
isString, isString,
storageSession, storageSession,
buildHierarchyTree,
isIncludeAllChildren isIncludeAllChildren
} from "@pureadmin/utils"; } from "@pureadmin/utils";
import { buildHierarchyTree } from "@/utils/tree";
import { cloneDeep, intersection } from "lodash-unified"; import { cloneDeep, intersection } from "lodash-unified";
import { sessionKey, type DataInfo } from "/@/utils/auth"; import { sessionKey, type DataInfo } from "@/utils/auth";
import { usePermissionStoreHook } from "/@/store/modules/permission"; import { usePermissionStoreHook } from "@/store/modules/permission";
const IFrame = () => import("/@/layout/frameView.vue"); const IFrame = () => import("@/layout/frameView.vue");
// https://cn.vitejs.dev/guide/features.html#glob-import // https://cn.vitejs.dev/guide/features.html#glob-import
const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}"); const modulesRoutes = import.meta.glob("/src/views/**/*.{vue,tsx}");
// 动态路由 // 动态路由
import { getAsyncRoutes } from "/@/api/routes"; import { getAsyncRoutes } from "@/api/routes";
/** 按照路由中meta下的rank等级升序来排序路由 */ /** 按照路由中meta下的rank等级升序来排序路由 */
function ascending(arr: any[]) { function ascending(arr: any[]) {
@@ -76,7 +76,7 @@ function isOneOfArray(a: Array<string>, b: Array<string>) {
/** 从sessionStorage里取出当前登陆用户的角色roles过滤无权限的菜单 */ /** 从sessionStorage里取出当前登陆用户的角色roles过滤无权限的菜单 */
function filterNoPermissionTree(data: RouteComponent[]) { function filterNoPermissionTree(data: RouteComponent[]) {
const currentRoles = const currentRoles =
storageSession.getItem<DataInfo<number>>(sessionKey).roles ?? []; storageSession.getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
const newTree = cloneDeep(data).filter((v: any) => const newTree = cloneDeep(data).filter((v: any) =>
isOneOfArray(v.meta?.roles, currentRoles) isOneOfArray(v.meta?.roles, currentRoles)
); );

View File

@@ -1,8 +1,7 @@
import { store } from "/@/store"; import { store } from "@/store";
import { appType } from "./types"; import { appType } from "./types";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { getConfig } from "/@/config"; import { getConfig } from "@/config";
import type { StorageConfigs } from "/#/index";
import { deviceDetection, storageLocal } from "@pureadmin/utils"; import { deviceDetection, storageLocal } from "@pureadmin/utils";
export const useAppStore = defineStore({ export const useAppStore = defineStore({

View File

@@ -1,7 +1,6 @@
import { store } from "/@/store"; import { store } from "@/store";
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { getConfig } from "/@/config"; import { getConfig } from "@/config";
import type { StorageConfigs } from "/#/index";
import { storageLocal } from "@pureadmin/utils"; import { storageLocal } from "@pureadmin/utils";
export const useEpThemeStore = defineStore({ export const useEpThemeStore = defineStore({

View File

@@ -1,8 +1,7 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { store } from "/@/store"; import { store } from "@/store";
import { isEqual } from "lodash-unified"; import { isEqual } from "@pureadmin/utils";
import type { StorageConfigs } from "/#/index"; import { routerArrays } from "@/layout/types";
import { routerArrays } from "/@/layout/types";
import { multiType, positionType } from "./types"; import { multiType, positionType } from "./types";
import { isUrl, storageLocal } from "@pureadmin/utils"; import { isUrl, storageLocal } from "@pureadmin/utils";
@@ -11,11 +10,11 @@ export const useMultiTagsStore = defineStore({
state: () => ({ state: () => ({
// 存储标签页信息(路由信息) // 存储标签页信息(路由信息)
multiTags: storageLocal.getItem<StorageConfigs>("responsive-configure") multiTags: storageLocal.getItem<StorageConfigs>("responsive-configure")
.multiTagsCache ?.multiTagsCache
? storageLocal.getItem<StorageConfigs>("responsive-tags") ? storageLocal.getItem<StorageConfigs>("responsive-tags")
: [...routerArrays], : [...routerArrays],
multiTagsCache: storageLocal.getItem<StorageConfigs>("responsive-configure") multiTagsCache: storageLocal.getItem<StorageConfigs>("responsive-configure")
.multiTagsCache ?.multiTagsCache
}), }),
getters: { getters: {
getMultiTagsCache() { getMultiTagsCache() {

View File

@@ -1,8 +1,8 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { store } from "/@/store"; import { store } from "@/store";
import { cacheType } from "./types"; import { cacheType } from "./types";
import { constantMenus } from "/@/router"; import { constantMenus } from "@/router";
import { ascending, filterTree, filterNoPermissionTree } from "/@/router/utils"; import { ascending, filterTree, filterNoPermissionTree } from "@/router/utils";
export const usePermissionStore = defineStore({ export const usePermissionStore = defineStore({
id: "pure-permission", id: "pure-permission",

View File

@@ -1,7 +1,7 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { store } from "/@/store"; import { store } from "@/store";
import { setType } from "./types"; import { setType } from "./types";
import { getConfig } from "/@/config"; import { getConfig } from "@/config";
export const useSettingStore = defineStore({ export const useSettingStore = defineStore({
id: "pure-setting", id: "pure-setting",

View File

@@ -39,6 +39,4 @@ export type setType = {
export type userType = { export type userType = {
username?: string; username?: string;
roles?: Array<string>; roles?: Array<string>;
verifyCode?: string;
currentPage?: number;
}; };

View File

@@ -1,30 +1,22 @@
import { defineStore } from "pinia"; import { defineStore } from "pinia";
import { store } from "/@/store"; import { store } from "@/store";
import { userType } from "./types"; import { userType } from "./types";
import { routerArrays } from "/@/layout/types"; import { routerArrays } from "@/layout/types";
import { router, resetRouter } from "/@/router"; import { router, resetRouter } from "@/router";
import { storageSession } from "@pureadmin/utils"; import { storageSession } from "@pureadmin/utils";
import { getLogin, refreshTokenApi } from "/@/api/user"; import { getLogin, refreshTokenApi } from "@/api/user";
import { UserResult, RefreshTokenResult } from "/@/api/user"; import { UserResult, RefreshTokenResult } from "@/api/user";
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { import { type DataInfo, setToken, removeToken, sessionKey } from "@/utils/auth";
type DataInfo,
setToken,
removeToken,
sessionKey
} from "/@/utils/auth";
export const useUserStore = defineStore({ export const useUserStore = defineStore({
id: "pure-user", id: "pure-user",
state: (): userType => ({ state: (): userType => ({
// 用户名
username: username:
storageSession.getItem<DataInfo<number>>(sessionKey)?.username ?? "", storageSession.getItem<DataInfo<number>>(sessionKey)?.username ?? "",
// 页面级别权限 // 页面级别权限
roles: storageSession.getItem<DataInfo<number>>(sessionKey)?.roles ?? [], roles: storageSession.getItem<DataInfo<number>>(sessionKey)?.roles ?? []
// 前端生成的验证码(按实际需求替换)
verifyCode: "",
// 判断登录页面显示哪个组件0登录默认、1手机登录、2二维码登录、3注册、4忘记密码
currentPage: 0
}), }),
actions: { actions: {
/** 存储用户名 */ /** 存储用户名 */
@@ -35,14 +27,6 @@ export const useUserStore = defineStore({
SET_ROLES(roles: Array<string>) { SET_ROLES(roles: Array<string>) {
this.roles = roles; this.roles = roles;
}, },
/** 存储前端生成的验证码 */
SET_VERIFYCODE(verifyCode: string) {
this.verifyCode = verifyCode;
},
/** 存储登录页面显示哪个组件 */
SET_CURRENTPAGE(value: number) {
this.currentPage = value;
},
/** 登入 */ /** 登入 */
async loginByUsername(data) { async loginByUsername(data) {
return new Promise<UserResult>((resolve, reject) => { return new Promise<UserResult>((resolve, reject) => {
@@ -63,9 +47,9 @@ export const useUserStore = defineStore({
this.username = ""; this.username = "";
this.roles = []; this.roles = [];
removeToken(); removeToken();
router.push("/login");
useMultiTagsStoreHook().handleTags("equal", [...routerArrays]); useMultiTagsStoreHook().handleTags("equal", [...routerArrays]);
resetRouter(); resetRouter();
router.push("/login");
}, },
/** 刷新`token` */ /** 刷新`token` */
async handRefreshToken(data) { async handRefreshToken(data) {

View File

@@ -26,11 +26,6 @@ html.dark {
filter: invert(0.9) hue-rotate(180deg); filter: invert(0.9) hue-rotate(180deg);
} }
.ant-tabs {
background: var(--el-bg-color);
color: $color-white;
}
/* 标签页 */ /* 标签页 */
.tags-view { .tags-view {
.arrow-left, .arrow-left,
@@ -127,7 +122,7 @@ html.dark {
color: var(--el-text-color-primary); color: var(--el-text-color-primary);
} }
.vxe-button.type--button.size--medium:hover { .vxe-button.type--button:hover {
background: var(--el-color-primary) !important; background: var(--el-color-primary) !important;
} }
@@ -160,4 +155,25 @@ html.dark {
.el-dropdown-menu__item:not(.is-disabled):hover { .el-dropdown-menu__item:not(.is-disabled):hover {
background: transparent; background: transparent;
} }
/* 克隆并自定义 ElMessage 样式,不会影响 ElMessage 原本样式,在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可,非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
.pure-message {
background-image: initial !important;
background-color: rgb(36, 37, 37) !important;
box-shadow: rgb(13 13 13 / 12%) 0px 3px 6px -4px,
rgb(13 13 13 / 8%) 0px 6px 16px 0px, rgb(13 13 13 / 5%) 0px 9px 28px 8px !important;
& .el-message__content {
color: $color-white !important;
pointer-events: all !important;
background-image: initial !important;
}
& .el-message__closeBtn {
&:hover {
color: rgba(255, 255, 255, 0.85);
background-color: rgba(255, 255, 255, 0.12);
}
}
}
} }

View File

@@ -62,3 +62,37 @@
border-left-color: var(--el-color-primary); border-left-color: var(--el-color-primary);
} }
} }
/* 克隆并自定义 ElMessage 样式,不会影响 ElMessage 原本样式,在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可,暗黑模式在 src/style/dark.scss 文件进行了适配 */
.pure-message {
border-width: 0 !important;
background: #fff !important;
padding: 10px 13px !important;
box-shadow: 0 3px 6px -4px #0000001f, 0 6px 16px #00000014,
0 9px 28px 8px #0000000d !important;
&.el-message.is-closable .el-message__content {
padding-right: 17px !important;
}
& .el-message__content {
color: #000000d9 !important;
pointer-events: all !important;
background-image: initial !important;
}
& .el-message__icon {
margin-right: 8px !important;
}
& .el-message__closeBtn {
outline: none;
border-radius: 4px;
right: 9px !important;
transition: background-color 0.2s, color 0.2s;
&:hover {
background-color: rgba(0, 0, 0, 0.06);
}
}
}

View File

@@ -20,7 +20,8 @@
filter: invert(80%); filter: invert(80%);
} }
/* 重置 vxe-table 中 pager 样式 */ /* 重置 vxe-table 样式 */
.vxe-button.type--button.theme--primary:hover,
.vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active { .vxe-pager .vxe-pager--num-btn:not(.is--disabled).is--active {
color: #fff !important; color: #fff !important;
} }

View File

@@ -44,16 +44,6 @@ abbr:where([title]) {
text-decoration: underline dotted; text-decoration: underline dotted;
} }
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a { a {
color: inherit; color: inherit;
text-decoration: inherit; text-decoration: inherit;
@@ -121,7 +111,6 @@ button,
[type="button"], [type="button"],
[type="reset"], [type="reset"],
[type="submit"] { [type="submit"] {
-webkit-appearance: button;
background-image: none; background-image: none;
} }
@@ -143,16 +132,10 @@ progress {
} }
[type="search"] { [type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px; outline-offset: -2px;
} }
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button { ::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit; font: inherit;
} }
@@ -221,7 +204,6 @@ iframe,
embed, embed,
object { object {
display: block; display: block;
vertical-align: middle;
} }
img, img,

View File

@@ -68,10 +68,6 @@
} }
} }
.el-popper.is-light {
border: none !important;
}
.sidebar-container { .sidebar-container {
/* 展开动画 */ /* 展开动画 */
transition: width var(--pure-transition-duration); transition: width var(--pure-transition-duration);
@@ -233,11 +229,7 @@
.search-container, .search-container,
/* 告警 */ /* 告警 */
.dropdown-badge, .dropdown-badge,
/* 全屏 */ /* 用户名 */
.screen-full,
/* 国际化 */
.globalization,
/* 登录名 */
.el-dropdown-link, .el-dropdown-link,
/* 设置 */ /* 设置 */
.set-icon { .set-icon {
@@ -251,15 +243,6 @@
color: $subMenuActiveText; color: $subMenuActiveText;
} }
.globalization {
width: 40px;
height: 48px;
padding: 11px;
outline: none;
cursor: pointer;
color: $subMenuActiveText;
}
.el-dropdown-link { .el-dropdown-link {
height: 48px; height: 48px;
padding: 10px; padding: 10px;
@@ -587,11 +570,7 @@ body[layout="vertical"] {
.search-container, .search-container,
/* 告警 */ /* 告警 */
.dropdown-badge, .dropdown-badge,
/* 全屏 */ /* 用户名 */
.screen-full,
/* 国际化 */
.globalization,
/* 登录名 */
.el-dropdown-link, .el-dropdown-link,
/* 设置 */ /* 设置 */
.set-icon { .set-icon {

View File

@@ -43,11 +43,10 @@
/** /**
* @description 重置el-menu的展开收起动画时长 * @description 重置el-menu的展开收起动画时长
* @see {@link https://github.com/element-plus/element-plus/issues/4509#issuecomment-980165001}
*/ */
.outer-most .el-collapse-transition-leave-active, .outer-most .el-collapse-transition-leave-active,
.outer-most .el-collapse-transition-enter-active { .outer-most .el-collapse-transition-enter-active {
transition: 0.12s all ease-in-out !important; transition: 0.2s all ease-in-out !important;
} }
.horizontal-collapse-transition { .horizontal-collapse-transition {

View File

@@ -1,5 +0,0 @@
### 注意
- [文档](https://pure-admin-utils-docs.vercel.app/)
- [npm](https://www.npmjs.com/package/@pureadmin/utils)
- vue-pure-admin 从 3.3.0 版本之后(不包括 3.3.0 版本),大部分工具和 hooks 都集成到了[@pureadmin/utils](https://pure-admin-utils-docs.vercel.app/)

View File

@@ -1,6 +1,6 @@
import Cookies from "js-cookie"; import Cookies from "js-cookie";
import { storageSession } from "@pureadmin/utils"; import { storageSession } from "@pureadmin/utils";
import { useUserStoreHook } from "/@/store/modules/user"; import { useUserStoreHook } from "@/store/modules/user";
export interface DataInfo<T> { export interface DataInfo<T> {
/** token */ /** token */
@@ -35,7 +35,7 @@ export function getToken(): DataInfo<number> {
export function setToken(data: DataInfo<Date>) { export function setToken(data: DataInfo<Date>) {
let expires = 0; let expires = 0;
const { accessToken, refreshToken } = data; const { accessToken, refreshToken } = data;
expires = new Date(data.expires).getTime(); expires = new Date(data.expires).getTime(); // 如果后端直接设置时间戳将此处代码改为expires = data.expires然后把上面的DataInfo<Date>改成DataInfo<number>即可
const cookieString = JSON.stringify({ accessToken, expires }); const cookieString = JSON.stringify({ accessToken, expires });
expires > 0 expires > 0
@@ -59,8 +59,10 @@ export function setToken(data: DataInfo<Date>) {
const { username, roles } = data; const { username, roles } = data;
setSessionKey(username, roles); setSessionKey(username, roles);
} else { } else {
const { username, roles } = const username =
storageSession.getItem<DataInfo<number>>(sessionKey); storageSession.getItem<DataInfo<number>>(sessionKey)?.username ?? "";
const roles =
storageSession.getItem<DataInfo<number>>(sessionKey)?.roles ?? [];
setSessionKey(username, roles); setSessionKey(username, roles);
} }
} }
@@ -70,3 +72,8 @@ export function removeToken() {
Cookies.remove(TokenKey); Cookies.remove(TokenKey);
sessionStorage.removeItem(sessionKey); sessionStorage.removeItem(sessionKey);
} }
/** 格式化tokenjwt格式 */
export const formatToken = (token: string): string => {
return "Bearer " + token;
};

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