twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-04-26 08:17:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

release: update 6.0.0

Browse Source
This commit is contained in:
xiaoxian521 2025-04-25 09:51:57 +08:00
parent c50bb9981b
commit 1bc940500c
83 changed files with 2980 additions and 2613 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.nvmrc
View File

@ -1 +1 @@
v22.12.0
v22.14.0

4
build/optimize.ts
View File

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

8
build/plugins.ts
View File

@ -3,8 +3,10 @@ import vue from "@vitejs/plugin-vue";
import { pathResolve } from "./utils";
import { viteBuildInfo } from "./info";
import svgLoader from "vite-svg-loader";
import Icons from "unplugin-icons/vite";
import type { PluginOption } from "vite";
import vueJsx from "@vitejs/plugin-vue-jsx";
import tailwindcss from "@tailwindcss/vite";
import { configCompressPlugin } from "./compress";
import removeNoMatch from "vite-plugin-router-warn";
import { visualizer } from "rollup-plugin-visualizer";
@ -19,6 +21,7 @@ export function getPluginsList(
): PluginOption[] {
const lifecycle = process.env.npm_lifecycle_event;
return [
tailwindcss(),
vue(),
// jsx、tsx语法支持
vueJsx(),
@ -51,6 +54,11 @@ export function getPluginsList(
}),
// svg组件化支持
svgLoader(),
// 自动按需加载图标
Icons({
compiler: "vue3",
scale: 1
}),
VITE_CDN ? cdn : null,
configCompressPlugin(VITE_COMPRESSION),
// 线上环境删除console

45
eslint.config.js
View File

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

5
index.html
View File

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

116
package.json
View File

@ -1,6 +1,6 @@
{
"name": "pure-admin-thin",
"version": "5.9.0",
"version": "6.0.0",
"private": true,
"type": "module",
"scripts": {
@ -50,87 +50,85 @@
"dependencies": {
"@pureadmin/descriptions": "^1.2.1",
"@pureadmin/table": "^3.2.1",
"@pureadmin/utils": "^2.5.0",
"@vueuse/core": "^12.0.0",
"@vueuse/motion": "^2.2.6",
"@pureadmin/utils": "^2.6.0",
"@vueuse/core": "^13.1.0",
"@vueuse/motion": "^3.0.3",
"animate.css": "^4.1.1",
"axios": "^1.7.9",
"axios": "^1.9.0",
"dayjs": "^1.11.13",
"echarts": "^5.5.1",
"element-plus": "^2.9.0",
"echarts": "^5.6.0",
"element-plus": "^2.9.8",
"js-cookie": "^3.0.5",
"localforage": "^1.10.0",
"mitt": "^3.0.1",
"nprogress": "^0.2.0",
"path-browserify": "^1.0.1",
"pinia": "^2.3.0",
"pinia": "^3.0.2",
"pinyin-pro": "^3.26.0",
"qs": "^6.13.1",
"qs": "^6.14.0",
"responsive-storage": "^2.2.0",
"sortablejs": "^1.15.6",
"vue": "^3.5.13",
"vue-i18n": "^10.0.5",
"vue-i18n": "^11.1.3",
"vue-router": "^4.5.0",
"vue-tippy": "^6.5.0",
"vue-types": "^5.1.3"
"vue-tippy": "^6.7.0",
"vue-types": "^6.0.0"
},
"devDependencies": {
"@commitlint/cli": "^19.6.0",
"@commitlint/config-conventional": "^19.6.0",
"@commitlint/types": "^19.5.0",
"@eslint/js": "^9.16.0",
"@faker-js/faker": "^9.3.0",
"@iconify-icons/ep": "^1.2.12",
"@iconify-icons/ri": "^1.2.10",
"@iconify/vue": "^4.2.0",
"@intlify/unplugin-vue-i18n": "^6.0.1",
"@commitlint/cli": "^19.8.0",
"@commitlint/config-conventional": "^19.8.0",
"@commitlint/types": "^19.8.0",
"@eslint/js": "^9.25.1",
"@faker-js/faker": "^9.7.0",
"@iconify/json": "^2.2.331",
"@iconify/vue": "4.2.0",
"@intlify/unplugin-vue-i18n": "^6.0.8",
"@tailwindcss/vite": "^4.1.4",
"@types/js-cookie": "^3.0.6",
"@types/node": "^20.17.9",
"@types/node": "^20.17.30",
"@types/nprogress": "^0.2.3",
"@types/path-browserify": "^1.0.3",
"@types/qs": "^6.9.17",
"@types/qs": "^6.9.18",
"@types/sortablejs": "^1.15.8",
"@typescript-eslint/eslint-plugin": "^8.18.0",
"@typescript-eslint/parser": "^8.18.0",
"@vitejs/plugin-vue": "^5.2.1",
"@vitejs/plugin-vue-jsx": "^4.1.1",
"autoprefixer": "^10.4.20",
"@vitejs/plugin-vue": "^5.2.3",
"@vitejs/plugin-vue-jsx": "^4.1.2",
"boxen": "^8.0.1",
"code-inspector-plugin": "^0.18.2",
"code-inspector-plugin": "^0.20.10",
"cssnano": "^7.0.6",
"eslint": "^9.16.0",
"eslint-config-prettier": "^9.1.0",
"eslint-define-config": "^2.1.0",
"eslint-plugin-prettier": "^5.2.1",
"eslint-plugin-vue": "^9.32.0",
"eslint": "^9.25.1",
"eslint-config-prettier": "^10.1.2",
"eslint-plugin-prettier": "^5.2.6",
"eslint-plugin-vue": "^10.0.0",
"gradient-string": "^3.0.0",
"husky": "^9.1.7",
"lint-staged": "^15.2.10",
"postcss": "^8.4.49",
"postcss-html": "^1.7.0",
"postcss-import": "^16.1.0",
"lint-staged": "^15.5.1",
"postcss": "^8.5.3",
"postcss-html": "^1.8.0",
"postcss-load-config": "^6.0.1",
"postcss-scss": "^4.0.9",
"prettier": "^3.4.2",
"prettier": "^3.5.3",
"rimraf": "^6.0.1",
"rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.82.0",
"stylelint": "^16.11.0",
"stylelint-config-recess-order": "^5.1.1",
"stylelint-config-recommended-vue": "^1.5.0",
"stylelint-config-standard-scss": "^13.1.0",
"stylelint-prettier": "^5.0.2",
"rollup-plugin-visualizer": "^5.14.0",
"sass": "^1.87.0",
"stylelint": "^16.19.0",
"stylelint-config-recess-order": "^6.0.0",
"stylelint-config-recommended-vue": "^1.6.0",
"stylelint-config-standard-scss": "^14.0.0",
"stylelint-prettier": "^5.0.3",
"svgo": "^3.3.2",
"tailwindcss": "^3.4.16",
"typescript": "5.6.3",
"vite": "^6.0.3",
"tailwindcss": "^4.1.4",
"typescript": "^5.8.3",
"typescript-eslint": "^8.31.0",
"unplugin-icons": "^22.1.0",
"vite": "^6.3.3",
"vite-plugin-cdn-import": "^1.0.1",
"vite-plugin-compression": "^0.5.1",
"vite-plugin-fake-server": "^2.1.4",
"vite-plugin-fake-server": "^2.2.0",
"vite-plugin-remove-console": "^2.2.0",
"vite-plugin-router-warn": "^1.0.0",
"vite-svg-loader": "^5.1.0",
"vue-eslint-parser": "^9.4.3",
"vue-tsc": "^2.1.10"
"vue-eslint-parser": "^10.1.3",
"vue-tsc": "^2.2.10"
},
"engines": {
"node": "^18.18.0 || ^20.9.0 || >=22.0.0",
@ -140,6 +138,7 @@
"allowedDeprecatedVersions": {
"are-we-there-yet": "*",
"sourcemap-codec": "*",
"lodash.isequal": "*",
"domexception": "*",
"w3c-hr-time": "*",
"inflight": "*",
@ -150,10 +149,13 @@
"abab": "*",
"glob": "*"
},
"peerDependencyRules": {
"allowedVersions": {
"eslint": "9"
}
}
"onlyBuiltDependencies": [
"@parcel/watcher",
"core-js",
"es5-ext",
"esbuild",
"typeit",
"vue-demi"
]
}
}

4729
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

4
postcss.config.js
View File

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

2
public/platform-config.json
View File

@ -1,5 +1,5 @@
{
"Version": "5.9.0",
"Version": "6.0.0",
"Title": "PureAdmin",
"FixedHeader": true,
"HiddenSideBar": false,

3
src/assets/iconfont/iconfont.js
View File

@ -28,8 +28,7 @@
c = document.createElement("div");
(c.innerHTML = e._iconfont_svg_string_2208059),
(c = c.getElementsByTagName("svg")[0]) &&
(c.setAttribute("aria-hidden", "true"),
(c.style.position = "absolute"),
((c.style.position = "absolute"),
(c.style.width = 0),
(c.style.height = 0),
(c.style.overflow = "hidden"),

2
src/assets/svg/enter_outlined.svg
View File

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

Before

Width:  |  Height:  |  Size: 351 B

After

Width:  |  Height:  |  Size: 332 B

2
src/assets/svg/exit_screen.svg
View File

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

Before

Width:  |  Height:  |  Size: 327 B

After

Width:  |  Height:  |  Size: 308 B

2
src/assets/svg/full_screen.svg
View File

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

Before

Width:  |  Height:  |  Size: 302 B

After

Width:  |  Height:  |  Size: 283 B

2
src/assets/svg/globalization.svg
View File

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

Before

Width:  |  Height:  |  Size: 826 B

After

Width:  |  Height:  |  Size: 807 B

2
src/assets/svg/keyboard_esc.svg
View File

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

Before

Width:  |  Height:  |  Size: 379 B

After

Width:  |  Height:  |  Size: 360 B

2
src/assets/table-bar/drag.svg
View File

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

Before

Width:  |  Height:  |  Size: 392 B

After

Width:  |  Height:  |  Size: 373 B

6
src/components/ReDialog/index.vue
View File

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

10
src/components/ReIcon/src/hooks.ts
View File

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

3
src/components/ReIcon/src/iconfont.ts
View File

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

17
src/components/ReIcon/src/iconifyIconOffline.ts
View File

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

1
src/components/ReIcon/src/iconifyIconOnline.ts
View File

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

29
src/components/ReIcon/src/offlineIcon.ts
View File

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

18
src/components/RePureTableBar/src/bar.tsx
View File

@ -18,8 +18,8 @@ import {
getKeyList
} from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "~icons/ri/fullscreen-fill";
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import DragIcon from "@/assets/table-bar/drag.svg?component";
import ExpandIcon from "@/assets/table-bar/expand.svg?component";
import RefreshIcon from "@/assets/table-bar/refresh.svg?component";
@ -87,9 +87,9 @@ export default defineComponent({
"text-black",
"dark:text-white",
"duration-100",
"hover:!text-primary",
"hover:text-primary!",
"cursor-pointer",
"outline-none"
"outline-hidden"
];
});
@ -255,12 +255,12 @@ export default defineComponent({
<div
{...attrs}
class={[
"w-[99/100]",
"w-full",
"px-2",
"pb-2",
"bg-bg_color",
isFullscreen.value
? ["!w-full", "!h-full", "z-[2002]", "fixed", "inset-0"]
? ["h-full!", "z-2002", "fixed", "inset-0"]
: "mt-2"
]}
>
@ -317,7 +317,7 @@ export default defineComponent({
>
<div class={[topClass.value]}>
<el-checkbox
class="!-mr-1"
class="-mr-1!"
label="列展示"
v-model={checkAll.value}
indeterminate={isIndeterminate.value}
@ -347,8 +347,8 @@ export default defineComponent({
class={[
"drag-btn w-[16px] mr-2",
isFixedColumn(item)
? "!cursor-no-drop"
: "!cursor-grab"
? "cursor-no-drop!"
: "cursor-grab!"
]}
onMouseenter={(event: {
preventDefault: () => void;

1
src/components/ReSegmented/src/index.css
View File

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

13
src/components/ReText/src/index.vue
View File

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

4
src/directives/ripple/index.ts
View File

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

2
src/layout/components/lay-footer/index.vue
View File

@ -1,4 +1,4 @@
<script lang="ts" setup>
<script setup lang="ts">
import { getConfig } from "@/config";
const TITLE = getConfig("Title");

15
src/layout/components/lay-navbar/index.vue
View File

@ -9,10 +9,9 @@ import LaySidebarBreadCrumb from "../lay-sidebar/components/SidebarBreadCrumb.vu
import LaySidebarTopCollapse from "../lay-sidebar/components/SidebarTopCollapse.vue";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check";
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "~icons/ri/settings-3-line";
import Check from "~icons/ep/check";
const {
layout,
@ -32,7 +31,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
</script>
<template>
<div class="navbar bg-[#fff] shadow-sm shadow-[rgba(0,21,41,0.08)]">
<div class="navbar bg-[#fff] shadow-xs shadow-[rgba(0,21,41,0.08)]">
<LaySidebarTopCollapse
v-if="device === 'mobile'"
class="hamburger-container"
@ -53,13 +52,13 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
@ -71,7 +70,7 @@ const { t, locale, translationCh, translationEn } = useTranslationLang();
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">

4
src/layout/components/lay-notice/components/NoticeItem.vue
View File

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

2
src/layout/components/lay-notice/index.vue
View File

@ -3,7 +3,7 @@ import { useI18n } from "vue-i18n";
import { ref, computed } from "vue";
import { noticesData } from "./data";
import NoticeList from "./components/NoticeList.vue";
import BellIcon from "@iconify-icons/ep/bell";
import BellIcon from "~icons/ep/bell";
const { t } = useI18n();
const noticesNum = ref(0);

10
src/layout/components/lay-panel/index.vue
View File

@ -4,7 +4,7 @@ import { emitter } from "@/utils/mitt";
import { onClickOutside } from "@vueuse/core";
import { ref, computed, onMounted, onBeforeUnmount } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import CloseIcon from "@iconify-icons/ep/close";
import CloseIcon from "~icons/ep/close";
const target = ref(null);
const show = ref<Boolean>(false);
@ -16,7 +16,7 @@ const iconClass = computed(() => {
"flex",
"justify-center",
"items-center",
"outline-none",
"outline-hidden",
"rounded-[4px]",
"cursor-pointer",
"transition-colors",
@ -51,7 +51,7 @@ onBeforeUnmount(() => {
<div class="right-panel-background" />
<div ref="target" class="right-panel bg-bg_color">
<div
class="project-configuration border-b-[1px] border-solid border-[var(--pure-border-color)]"
class="project-configuration border-0 border-b-[1px] border-solid border-[var(--pure-border-color)]"
>
<h4 class="dark:text-white">
{{ t("panel.pureSystemSet") }}
@ -78,7 +78,7 @@ onBeforeUnmount(() => {
</el-scrollbar>
<div
class="flex justify-end p-3 border-t-[1px] border-solid border-[var(--pure-border-color)]"
class="flex justify-end p-3 border-0 border-t-[1px] border-solid border-[var(--pure-border-color)]"
>
<el-button
v-tippy="{
@ -121,8 +121,8 @@ onBeforeUnmount(() => {
width: 100%;
max-width: 280px;
box-shadow: 0 0 15px 0 rgb(0 0 0 / 5%);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
transform: translate(100%);
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
}
.show {

6
src/layout/components/lay-search/components/SearchFooter.vue
View File

@ -3,10 +3,10 @@ import { useI18n } from "vue-i18n";
import { useNav } from "@/layout/hooks/useNav";
import MdiKeyboardEsc from "@/assets/svg/keyboard_esc.svg?component";
import EnterOutlined from "@/assets/svg/enter_outlined.svg?component";
import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
import ArrowUpLine from "~icons/ri/arrow-up-line";
import ArrowDownLine from "~icons/ri/arrow-down-line";
withDefaults(defineProps<{ total: number }>(), {
withDefaults(defineProps<{ total?: number }>(), {
total: 0
});

4
src/layout/components/lay-search/components/SearchHistoryItem.vue
View File

@ -2,8 +2,8 @@
import type { optionsItem } from "../types";
import { transformI18n } from "@/plugins/i18n";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import StarIcon from "@iconify-icons/ep/star";
import CloseIcon from "@iconify-icons/ep/close";
import StarIcon from "~icons/ep/star";
import CloseIcon from "~icons/ep/close";
interface Props {
item: optionsItem;

2
src/layout/components/lay-search/components/SearchModal.vue
View File

@ -13,7 +13,7 @@ import { ref, computed, shallowRef, watch } from "vue";
import { useDebounceFn, onKeyStroke } from "@vueuse/core";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { cloneDeep, isAllEmpty, storageLocal } from "@pureadmin/utils";
import SearchIcon from "@iconify-icons/ri/search-line";
import SearchIcon from "~icons/ri/search-line";
interface Props {
/** 弹窗显隐 */

2
src/layout/components/lay-search/index.vue
View File

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

22
src/layout/components/lay-setting/index.vue
View File

@ -19,9 +19,9 @@ import Segmented, { type OptionsType } from "@/components/ReSegmented";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import { useDark, useGlobal, debounce, isNumber } from "@pureadmin/utils";
import Check from "@iconify-icons/ep/check";
import LeftArrow from "@iconify-icons/ri/arrow-left-s-line";
import RightArrow from "@iconify-icons/ri/arrow-right-s-line";
import Check from "~icons/ep/check";
import LeftArrow from "~icons/ri/arrow-left-s-line?width=20&height=20";
import RightArrow from "~icons/ri/arrow-right-s-line?width=20&height=20";
import DayIcon from "@/assets/svg/day.svg?component";
import DarkIcon from "@/assets/svg/dark.svg?component";
import SystemIcon from "@/assets/svg/system.svg?component";
@ -189,7 +189,7 @@ const getThemeColor = computed(() => {
});
const pClass = computed(() => {
return ["mb-[12px]", "font-medium", "text-sm", "dark:text-white"];
return ["mb-[12px]!", "font-medium", "text-sm", "dark:text-white"];
});
const themeOptions = computed<Array<OptionsType>>(() => {
@ -335,7 +335,7 @@ onUnmounted(() => removeMatchMedia);
"
/>
<p :class="['mt-5', pClass]">{{ t("panel.pureThemeColor") }}</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureThemeColor") }}</p>
<ul class="theme-color">
<li
v-for="(item, index) in themeColors"
@ -354,7 +354,7 @@ onUnmounted(() => removeMatchMedia);
</li>
</ul>
<p :class="['mt-5', pClass]">{{ t("panel.pureLayoutModel") }}</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureLayoutModel") }}</p>
<ul class="pure-theme">
<li
ref="verticalRef"
@ -397,7 +397,7 @@ onUnmounted(() => removeMatchMedia);
</ul>
<span v-if="useAppStoreHook().getViewportWidth > 1280">
<p :class="['mt-5', pClass]">{{ t("panel.pureStretch") }}</p>
<p :class="['mt-5!', pClass]">{{ t("panel.pureStretch") }}</p>
<Segmented
resize
class="mb-2 select-none"
@ -426,21 +426,19 @@ onUnmounted(() => removeMatchMedia);
>
<IconifyIconOffline
:icon="settings.stretch ? RightArrow : LeftArrow"
height="20"
/>
<div
class="flex-grow border-b border-dashed"
class="grow border-0 border-b border-dashed"
style="border-color: var(--el-color-primary)"
/>
<IconifyIconOffline
:icon="settings.stretch ? LeftArrow : RightArrow"
height="20"
/>
</div>
</button>
</span>
<p :class="['mt-4', pClass]">{{ t("panel.pureTagsStyle") }}</p>
<p :class="['mt-4!', pClass]">{{ t("panel.pureTagsStyle") }}</p>
<Segmented
resize
class="select-none"
@ -449,7 +447,7 @@ onUnmounted(() => removeMatchMedia);
@change="onChange"
/>
<p class="mt-5 font-medium text-sm dark:text-white">
<p class="mt-5! font-medium text-sm dark:text-white">
{{ t("panel.pureInterfaceDisplay") }}
</p>
<ul class="setting">

13
src/layout/components/lay-sidebar/NavHorizontal.vue
View File

@ -12,10 +12,9 @@ import LaySidebarItem from "../lay-sidebar/components/SidebarItem.vue";
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check";
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "~icons/ri/settings-3-line";
import Check from "~icons/ep/check";
const menuRef = ref();
const showLogo = ref(
@ -83,13 +82,13 @@ onMounted(() => {
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span v-show="locale === 'zh'" class="check-zh">
@ -99,7 +98,7 @@ onMounted(() => {
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">

13
src/layout/components/lay-sidebar/NavMix.vue
View File

@ -13,10 +13,9 @@ import LaySidebarExtraIcon from "../lay-sidebar/components/SidebarExtraIcon.vue"
import LaySidebarFullScreen from "../lay-sidebar/components/SidebarFullScreen.vue";
import GlobalizationIcon from "@/assets/svg/globalization.svg?component";
import AccountSettingsIcon from "@iconify-icons/ri/user-settings-line";
import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
import Setting from "@iconify-icons/ri/settings-3-line";
import Check from "@iconify-icons/ep/check";
import LogoutCircleRLine from "~icons/ri/logout-circle-r-line";
import Setting from "~icons/ri/settings-3-line";
import Check from "~icons/ep/check";
const menuRef = ref();
const defaultActive = ref(null);
@ -104,13 +103,13 @@ watch(
<!-- 国际化 -->
<el-dropdown id="header-translation" trigger="click">
<GlobalizationIcon
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-none"
class="navbar-bg-hover w-[40px] h-[48px] p-[11px] cursor-pointer outline-hidden"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<span v-show="locale === 'zh'" class="check-zh">
@ -120,7 +119,7 @@ watch(
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">

4
src/layout/components/lay-sidebar/components/SidebarBreadCrumb.vue
View File

@ -105,12 +105,12 @@ watch(
</script>
<template>
<el-breadcrumb class="!leading-[50px] select-none" separator="/">
<el-breadcrumb class="leading-[50px]! select-none" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item
v-for="item in levelList"
:key="item.path"
class="!inline !items-stretch"
class="inline! items-stretch!"
>
<a @click.prevent="handleLink(item)">
{{ transformI18n(item.meta.title) }}

4
src/layout/components/lay-sidebar/components/SidebarCenterCollapse.vue
View File

@ -4,10 +4,10 @@ import { useI18n } from "vue-i18n";
import { useGlobal } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import ArrowLeft from "@iconify-icons/ri/arrow-left-double-fill";
import ArrowLeft from "~icons/ri/arrow-left-double-fill";
interface Props {
isActive: boolean;
isActive?: boolean;
}
withDefaults(defineProps<Props>(), {

37
src/layout/components/lay-sidebar/components/SidebarItem.vue
View File

@ -17,10 +17,10 @@ import {
useAttrs
} from "vue";
import ArrowUp from "@iconify-icons/ep/arrow-up-bold";
import EpArrowDown from "@iconify-icons/ep/arrow-down-bold";
import ArrowLeft from "@iconify-icons/ep/arrow-left-bold";
import ArrowRight from "@iconify-icons/ep/arrow-right-bold";
import ArrowUp from "~icons/ep/arrow-up-bold";
import EpArrowDown from "~icons/ep/arrow-down-bold";
import ArrowLeft from "~icons/ep/arrow-left-bold";
import ArrowRight from "~icons/ep/arrow-right-bold";
const attrs = useAttrs();
const { layout, isCollapse, tooltipEffect, getDivStyle } = useNav();
@ -61,6 +61,21 @@ const getSubMenuIconStyle = computed((): CSSProperties => {
};
});
const textClass = computed(() => {
const item = props.item;
const baseClass = "w-full! text-inherit!";
if (
layout.value !== "horizontal" &&
isCollapse.value &&
!toRaw(item.meta.icon) &&
((layout.value === "vertical" && item.parentId === null) ||
(layout.value === "mix" && item.pathList.length === 2))
) {
return `${baseClass} min-w-[54px]! text-center! px-3!`;
}
return baseClass;
});
const expandCloseIcon = computed(() => {
if (!getConfig()?.MenuArrowIconNoTransition) return "";
return {
@ -144,7 +159,7 @@ function resolvePath(routePath) {
item?.pathList?.length === 2)
"
truncated
class="!w-full !pl-4 !text-inherit"
class="w-full! px-3! min-w-[54px]! text-center! text-inherit!"
>
{{ transformI18n(onlyOneChild.meta.title) }}
</el-text>
@ -156,7 +171,7 @@ function resolvePath(routePath) {
offset: [0, -10],
theme: tooltipEffect
}"
class="!w-full !text-inherit"
class="w-full! text-inherit!"
>
{{ transformI18n(onlyOneChild.meta.title) }}
</ReText>
@ -195,15 +210,7 @@ function resolvePath(routePath) {
offset: [0, -10],
theme: tooltipEffect
}"
:class="{
'!w-full': true,
'!text-inherit': true,
'!pl-4':
layout !== 'horizontal' &&
isCollapse &&
!toRaw(item.meta.icon) &&
item.parentId === null
}"
:class="textClass"
>
{{ transformI18n(item.meta.title) }}
</ReText>

6
src/layout/components/lay-sidebar/components/SidebarLeftCollapse.vue
View File

@ -4,10 +4,10 @@ import { useI18n } from "vue-i18n";
import { useGlobal } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuFold from "~icons/ri/menu-fold-fill";
interface Props {
isActive: boolean;
isActive?: boolean;
}
withDefaults(defineProps<Props>(), {
@ -23,7 +23,7 @@ const iconClass = computed(() => {
"mb-1",
"w-[16px]",
"h-[16px]",
"inline-block",
"inline-block!",
"align-middle",
"cursor-pointer",
"duration-[100ms]"

2
src/layout/components/lay-sidebar/components/SidebarLogo.vue
View File

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

8
src/layout/components/lay-sidebar/components/SidebarTopCollapse.vue
View File

@ -1,10 +1,10 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
import MenuFold from "~icons/ri/menu-fold-fill";
import MenuUnfold from "~icons/ri/menu-unfold-fill";
interface Props {
isActive: boolean;
isActive?: boolean;
}
withDefaults(defineProps<Props>(), {
@ -32,7 +32,7 @@ const toggleClick = () => {
>
<IconifyIconOffline
:icon="isActive ? MenuFold : MenuUnfold"
class="inline-block align-middle hover:text-primary dark:hover:!text-white"
class="inline-block! align-middle hover:text-primary dark:hover:text-white!"
/>
</div>
</template>

4
src/layout/components/lay-tag/index.scss
View File

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

13
src/layout/components/lay-tag/index.vue
View File

@ -18,11 +18,11 @@ import {
useResizeObserver
} from "@pureadmin/utils";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ArrowDown from "@iconify-icons/ri/arrow-down-s-line";
import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import Fullscreen from "~icons/ri/fullscreen-fill";
import ArrowDown from "~icons/ri/arrow-down-s-line";
import ArrowRightSLine from "~icons/ri/arrow-right-s-line";
import ArrowLeftSLine from "~icons/ri/arrow-left-s-line";
const {
Close,
@ -511,6 +511,7 @@ function tagOnClick(item) {
} else {
router.push({ path });
}
emitter.emit("tagOnClick", item);
}
onClickOutside(contextmenuRef, closeMenu, {
@ -588,7 +589,7 @@ onBeforeUnmount(() => {
>
<template v-if="showModel !== 'chrome'">
<span
class="tag-title dark:!text-text_color_primary dark:hover:!text-primary"
class="tag-title dark:text-text_color_primary! dark:hover:text-primary!"
>
{{ transformI18n(item.meta.title) }}
</span>

6
src/layout/hooks/useNav.ts
View File

@ -14,8 +14,8 @@ import { useUserStoreHook } from "@/store/modules/user";
import { useGlobal, isAllEmpty } from "@pureadmin/utils";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { usePermissionStoreHook } from "@/store/modules/permission";
import ExitFullscreen from "@iconify-icons/ri/fullscreen-exit-fill";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import ExitFullscreen from "~icons/ri/fullscreen-exit-fill";
import Fullscreen from "~icons/ri/fullscreen-fill";
const errorInfo =
"The current routing configuration is incorrect, please check the configuration";
@ -64,7 +64,7 @@ export function useNav() {
const getDropdownItemClass = computed(() => {
return (locale, t) => {
return locale === t ? "" : "dark:hover:!text-primary";
return locale === t ? "" : "dark:hover:text-primary!";
};
});

14
src/layout/hooks/useTag.ts
View File

@ -21,13 +21,13 @@ import {
hasClass
} from "@pureadmin/utils";
import Fullscreen from "@iconify-icons/ri/fullscreen-fill";
import CloseAllTags from "@iconify-icons/ri/subtract-line";
import CloseOtherTags from "@iconify-icons/ri/text-spacing";
import CloseRightTags from "@iconify-icons/ri/text-direction-l";
import CloseLeftTags from "@iconify-icons/ri/text-direction-r";
import RefreshRight from "@iconify-icons/ep/refresh-right";
import Close from "@iconify-icons/ep/close";
import Fullscreen from "~icons/ri/fullscreen-fill";
import CloseAllTags from "~icons/ri/subtract-line";
import CloseOtherTags from "~icons/ri/text-spacing";
import CloseRightTags from "~icons/ri/text-direction-l";
import CloseLeftTags from "~icons/ri/text-direction-r";
import RefreshRight from "~icons/ep/refresh-right";
import Close from "~icons/ep/close";
export function useTags() {
const route = useRoute();

2
src/layout/index.vue
View File

@ -210,8 +210,8 @@ const LayHeader = defineComponent({
height: 100%;
&::after {
display: table;
clear: both;
display: table;
content: "";
}

8
src/layout/types.ts
View File

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

2
src/plugins/i18n.ts
View File

@ -10,7 +10,7 @@ import zhLocale from "element-plus/es/locale/lang/zh-cn";
const siphonI18n = (function () {
// 仅初始化一次国际化配置
let cache = Object.fromEntries(
const cache = Object.fromEntries(
Object.entries(
import.meta.glob("../../locales/*.y(a)?ml", { eager: true })
).map(([key, value]: any) => {

31
src/router/index.ts
View File

@ -7,7 +7,13 @@ import { buildHierarchyTree } from "@/utils/tree";
import remainingRouter from "./modules/remaining";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { usePermissionStoreHook } from "@/store/modules/permission";
import { isUrl, openLink, storageLocal, isAllEmpty } from "@pureadmin/utils";
import {
isUrl,
openLink,
cloneDeep,
isAllEmpty,
storageLocal
} from "@pureadmin/utils";
import {
ascending,
getTopMenu,
@ -21,9 +27,9 @@ import {
} from "./utils";
import {
type Router,
createRouter,
type RouteRecordRaw,
type RouteComponent
type RouteComponent,
createRouter
} from "vue-router";
import {
type DataInfo,
@ -55,6 +61,9 @@ export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
);
/** 初始的静态路由，用于退出登录时重置路由 */
const initConstantRoutes: Array<RouteRecordRaw> = cloneDeep(constantRoutes);
/** 用于渲染菜单，保持原始层级 */
export const constantMenus: Array<RouteComponent> = ascending(
routes.flat(Infinity)
@ -87,17 +96,13 @@ export const router: Router = createRouter({
/** 重置路由 */
export function resetRouter() {
router.getRoutes().forEach(route => {
const { name, meta } = route;
if (name && router.hasRoute(name) && meta?.backstage) {
router.removeRoute(name);
router.options.routes = formatTwoStageRoutes(
formatFlatteningRoutes(
buildHierarchyTree(ascending(routes.flat(Infinity)))
)
);
router.clearRoutes();
for (const route of initConstantRoutes.concat(...(remainingRouter as any))) {
router.addRoute(route);
}
});
router.options.routes = formatTwoStageRoutes(
formatFlatteningRoutes(buildHierarchyTree(ascending(routes.flat(Infinity))))
);
usePermissionStoreHook().clearAllCachePage();
}

2
src/router/modules/error.ts
View File

@ -4,7 +4,7 @@ export default {
path: "/error",
redirect: "/error/403",
meta: {
icon: "ri:information-line",
icon: "ri/information-line",
// showLink: false,
title: $t("menus.pureAbnormal"),
rank: 9

2
src/router/modules/home.ts
View File

@ -8,7 +8,7 @@ export default {
component: Layout,
redirect: "/welcome",
meta: {
icon: "ep:home-filled",
icon: "ep/home-filled",
title: $t("menus.pureHome"),
rank: 0
},

2
src/router/utils.ts
View File

@ -172,6 +172,8 @@ function handleAsyncRoutes(routeList) {
const flattenRouters: any = router
.getRoutes()
.find(n => n.path === "/");
// 保持router.options.routes[0].children与path为"/"的children一致，防止数据不一致导致异常
flattenRouters.children = router.options.routes[0].children;
router.addRoute(flattenRouters);
}
}

6
src/store/modules/app.ts
View File

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

3
src/store/modules/epTheme.ts
View File

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

7
src/store/modules/multiTags.ts
View File

@ -14,8 +14,7 @@ import {
} from "../utils";
import { usePermissionStoreHook } from "./permission";
export const useMultiTagsStore = defineStore({
id: "pure-multiTags",
export const useMultiTagsStore = defineStore("pure-multiTags", {
state: () => ({
// 存储标签页信息（路由信息）
multiTags: storageLocal().getItem<StorageConfigs>(
@ -24,12 +23,12 @@ export const useMultiTagsStore = defineStore({
? storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}tags`
)
: [
: ([
...routerArrays,
...usePermissionStoreHook().flatteningRoutes.filter(
v => v?.meta?.fixedTag
)
],
] as any),
multiTagsCache: storageLocal().getItem<StorageConfigs>(
`${responsiveStorageNameSpace()}configure`
)?.multiTagsCache

5
src/store/modules/permission.ts
View File

@ -12,8 +12,7 @@ import {
} from "../utils";
import { useMultiTagsStoreHook } from "./multiTags";
export const usePermissionStore = defineStore({
id: "pure-permission",
export const usePermissionStore = defineStore("pure-permission", {
state: () => ({
// 静态路由生成的菜单
constantMenus,
@ -31,7 +30,7 @@ export const usePermissionStore = defineStore({
filterTree(ascending(this.constantMenus.concat(routes)))
);
this.flatteningRoutes = formatFlatteningRoutes(
this.constantMenus.concat(routes)
this.constantMenus.concat(routes) as any
);
},
cacheOperate({ mode, name }: cacheType) {

3
src/store/modules/settings.ts
View File

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

3
src/store/modules/user.ts
View File

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

4
src/style/element-plus.scss
View File

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

17
src/style/reset.scss
View File

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

21
src/style/sidebar.scss
View File

@ -191,8 +191,8 @@
.el-menu-item.is-active.nest-menu::before {
position: absolute;
inset: 0 8px;
margin: 4px 0;
clear: both;
margin: 4px 0;
content: "";
background: var(--el-color-primary) !important;
border-radius: 3px;
@ -212,13 +212,13 @@
position: absolute;
top: 0;
left: 0;
clear: both;
width: 2px;
height: 100%;
clear: both;
content: "";
background-color: var(--pure-theme-menu-active-before);
transition: all var(--pure-transition-duration) ease-in-out;
transform: translateY(0);
transition: all var(--pure-transition-duration) ease-in-out;
}
.el-menu--collapse .outer-most.el-sub-menu > .el-sub-menu__title::before {
@ -240,8 +240,8 @@
.is-active.submenu-title-noDropdown.outer-most::before {
position: absolute;
inset: 0 8px;
margin: 4px 0;
clear: both;
margin: 4px 0;
content: "";
background: var(--el-color-primary) !important;
border-radius: 3px;
@ -435,11 +435,11 @@
height: 32px;
margin: 2px 0 0 12px;
overflow: hidden;
text-overflow: ellipsis;
font-size: 18px;
font-weight: 600;
line-height: 32px;
color: var(--pure-theme-sub-menu-active-text);
text-overflow: ellipsis;
white-space: nowrap;
}
}
@ -577,8 +577,8 @@
&.hideSidebar {
.sidebar-container {
pointer-events: none;
transition-duration: 0.3s;
transform: translate3d(-$sideBarWidth, 0, 0);
transition-duration: 0.3s;
}
}
}
@ -621,10 +621,10 @@ body[layout="vertical"] {
.el-sub-menu {
& > .el-sub-menu__title {
& > span {
visibility: visible;
width: 100%;
height: 100%;
text-align: center;
visibility: visible;
}
}
}
@ -666,6 +666,10 @@ body[layout="horizontal"] {
@include merge-style($sideBarWidth);
.el-menu {
--el-menu-hover-text-color: var(--pure-theme-menu-text) !important;
}
.fixed-header,
.main-container {
transition: none !important;
@ -687,6 +691,7 @@ body[layout="mix"] {
.el-menu {
--el-menu-hover-bg-color: transparent !important;
--el-menu-hover-text-color: var(--pure-theme-menu-text) !important;
}
.hideSidebar {
@ -715,10 +720,10 @@ body[layout="mix"] {
padding: 0;
& > span {
visibility: visible;
width: 100%;
height: 100%;
text-align: center;
visibility: visible;
}
}
}

45
src/style/tailwind.css
View File

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

18
src/utils/message.ts
View File

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

5
src/utils/mitt.ts
View File

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

10
src/utils/print.ts
View File

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

4
src/views/error/403.vue
View File

@ -15,7 +15,7 @@ const router = useRouter();
<div class="ml-12">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@ -32,7 +32,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100

4
src/views/error/404.vue
View File

@ -15,7 +15,7 @@ const router = useRouter();
<div class="ml-12">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@ -32,7 +32,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100

4
src/views/error/500.vue
View File

@ -15,7 +15,7 @@ const router = useRouter();
<div class="ml-12">
<p
v-motion
class="font-medium text-4xl mb-4 dark:text-white"
class="font-medium text-4xl mb-4! dark:text-white"
:initial="{
opacity: 0,
y: 100
@ -32,7 +32,7 @@ const router = useRouter();
</p>
<p
v-motion
class="mb-4 text-gray-500"
class="mb-4! text-gray-500"
:initial="{
opacity: 0,
y: 100

62
src/views/login/index.vue
View File

@ -4,7 +4,10 @@ import Motion from "./utils/motion";
import { useRouter } from "vue-router";
import { message } from "@/utils/message";
import { loginRules } from "./utils/rule";
import { ref, reactive, toRaw } from "vue";
import { debounce } from "@pureadmin/utils";
import { useNav } from "@/layout/hooks/useNav";
import { useEventListener } from "@vueuse/core";
import type { FormInstance } from "element-plus";
import { $t, transformI18n } from "@/plugins/i18n";
import { useLayout } from "@/layout/hooks/useLayout";
@ -12,22 +15,23 @@ import { useUserStoreHook } from "@/store/modules/user";
import { initRouter, getTopMenu } from "@/router/utils";
import { bg, avatar, illustration } from "./utils/static";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";
import globalization from "@/assets/svg/globalization.svg?component";
import Lock from "@iconify-icons/ri/lock-fill";
import Check from "@iconify-icons/ep/check";
import User from "@iconify-icons/ri/user-3-fill";
import Lock from "~icons/ri/lock-fill";
import Check from "~icons/ep/check";
import User from "~icons/ri/user-3-fill";
defineOptions({
name: "Login"
});
const router = useRouter();
const loading = ref(false);
const disabled = ref(false);
const ruleFormRef = ref<FormInstance>();
const { initStorage } = useLayout();
@ -46,18 +50,25 @@ const ruleForm = reactive({
const onLogin = async (formEl: FormInstance | undefined) => {
if (!formEl) return;
await formEl.validate((valid, fields) => {
await formEl.validate(valid => {
if (valid) {
loading.value = true;
useUserStoreHook()
.loginByUsername({ username: ruleForm.username, password: "admin123" })
.loginByUsername({
username: ruleForm.username,
password: ruleForm.password
})
.then(res => {
if (res.success) {
// 获取后端路由
return initRouter().then(() => {
router.push(getTopMenu(true).path).then(() => {
disabled.value = true;
router
.push(getTopMenu(true).path)
.then(() => {
message(t("login.pureLoginSuccess"), { type: "success" });
});
})
.finally(() => (disabled.value = false));
});
} else {
message(t("login.pureLoginFail"), { type: "error" });
@ -68,19 +79,19 @@ const onLogin = async (formEl: FormInstance | undefined) => {
});
};
/** 使用公共函数，避免`removeEventListener`失效 */
function onkeypress({ code }: KeyboardEvent) {
if (["Enter", "NumpadEnter"].includes(code)) {
onLogin(ruleFormRef.value);
}
}
const immediateDebounce: any = debounce(
formRef => onLogin(formRef),
1000,
true
);
onMounted(() => {
window.document.addEventListener("keypress", onkeypress);
});
onBeforeUnmount(() => {
window.document.removeEventListener("keypress", onkeypress);
useEventListener(document, "keydown", ({ code }) => {
if (
["Enter", "NumpadEnter"].includes(code) &&
!disabled.value &&
!loading.value
)
immediateDebounce(ruleFormRef.value);
});
</script>
@ -99,13 +110,13 @@ onBeforeUnmount(() => {
<!-- 国际化 -->
<el-dropdown trigger="click">
<globalization
class="hover:text-primary hover:!bg-[transparent] w-[20px] h-[20px] ml-1.5 cursor-pointer outline-none duration-300"
class="hover:text-primary hover:bg-[transparent]! w-[20px] h-[20px] ml-1.5 cursor-pointer outline-hidden duration-300"
/>
<template #dropdown>
<el-dropdown-menu class="translation">
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'zh')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'zh')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'zh')]"
@click="translationCh"
>
<IconifyIconOffline
@ -117,7 +128,7 @@ onBeforeUnmount(() => {
</el-dropdown-item>
<el-dropdown-item
:style="getDropdownItemStyle(locale, 'en')"
:class="['dark:!text-white', getDropdownItemClass(locale, 'en')]"
:class="['dark:text-white!', getDropdownItemClass(locale, 'en')]"
@click="translationEn"
>
<span v-show="locale === 'en'" class="check-en">
@ -137,7 +148,7 @@ onBeforeUnmount(() => {
<div class="login-form">
<avatar class="avatar" />
<Motion>
<h2 class="outline-none">{{ title }}</h2>
<h2 class="outline-hidden">{{ title }}</h2>
</Motion>
<el-form
@ -180,10 +191,11 @@ onBeforeUnmount(() => {
<Motion :delay="250">
<el-button
class="w-full mt-4"
class="w-full mt-4!"
size="default"
type="primary"
:loading="loading"
:disabled="disabled"
@click="onLogin(ruleFormRef)"
>
{{ t("login.pureLogin") }}

2
src/views/login/utils/rule.ts
View File

@ -7,7 +7,7 @@ export const REGEXP_PWD =
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
/** 登录校验 */
const loginRules = reactive(<FormRules>{
const loginRules = reactive<FormRules>({
password: [
{
validator: (rule, value, callback) => {

2
src/views/permission/button/index.vue
View File

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

4
src/views/permission/button/perms.vue
View File

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

4
src/views/permission/page/index.vue
View File

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

19
tailwind.config.ts
View File

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

4
tsconfig.json
View File

@ -4,10 +4,11 @@
"module": "ESNext",
"moduleResolution": "bundler",
"strict": false,
"strictFunctionTypes": false,
"noImplicitThis": true,
"jsx": "preserve",
"importHelpers": true,
"experimentalDecorators": true,
"strictFunctionTypes": false,
"skipLibCheck": true,
"esModuleInterop": true,
"isolatedModules": true,
@ -34,6 +35,7 @@
"vite/client",
"element-plus/global",
"@pureadmin/table/volar",
"unplugin-icons/types/vue",
"@pureadmin/descriptions/volar"
]
},

1
types/global-components.d.ts vendored
View File

@ -120,6 +120,7 @@ declare module "vue" {
}
interface ComponentCustomProperties {
$storage: ResponsiveStorage;
$message: (typeof import("element-plus"))["ElMessage"];
$notify: (typeof import("element-plus"))["ElNotification"];
$msgbox: (typeof import("element-plus"))["ElMessageBox"];

2
types/index.d.ts vendored
View File

@ -75,8 +75,6 @@ interface ComponentElRef<T extends HTMLElement = HTMLDivElement> {
$el: T;
}
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function parseInt(s: string | number, radix?: number): number;
// eslint-disable-next-line @typescript-eslint/no-unused-vars
function parseFloat(string: string | number): number;

7
types/router.d.ts vendored
View File

@ -15,9 +15,9 @@ declare global {
/** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加） `必填` */
title: string;
/** 菜单图标 `可选` */
icon?: string | FunctionalComponent | IconifyIcon;
icon?: string | FunctionalComponent;
/** 菜单名称右侧的额外图标 */
extraIcon?: string | FunctionalComponent | IconifyIcon;
extraIcon?: string | FunctionalComponent;
/** 是否在菜单中显示（默认`true`）`可选` */
showLink?: boolean;
/** 是否显示父级菜单 `可选` */
@ -91,7 +91,7 @@ declare global {
/** 菜单名称（兼容国际化、非国际化，如何用国际化的写法就必须在根目录的`locales`文件夹下对应添加）`必填` */
title: string;
/** 菜单图标 `可选` */
icon?: string | FunctionalComponent | IconifyIcon;
icon?: string | FunctionalComponent;
/** 是否在菜单中显示（默认`true`）`可选` */
showLink?: boolean;
/** 菜单升序排序，值越高排的越后（只针对顶级路由）`可选` */
@ -104,5 +104,6 @@ declare global {
// https://router.vuejs.org/zh/guide/advanced/meta.html#typescript
declare module "vue-router" {
// eslint-disable-next-line
interface RouteMeta extends CustomizeRouteMeta {}
}

4
types/shims-tsx.d.ts vendored
View File

@ -1,4 +1,4 @@
import Vue, { VNode } from "vue";
import type Vue, { type VNode } from "vue";
declare module "*.tsx" {
import Vue from "compatible-vue";
@ -7,7 +7,9 @@ declare module "*.tsx" {
declare global {
namespace JSX {
// eslint-disable-next-line
interface Element extends VNode {}
// eslint-disable-next-line
interface ElementClass extends Vue {}
interface ElementAttributesProperty {
$props: any;

1
types/shims-vue.d.ts vendored
View File

@ -1,5 +1,6 @@
declare module "*.vue" {
import type { DefineComponent } from "vue";
// eslint-disable-next-line
const component: DefineComponent<{}, {}, any>;
export default component;
}