mirror of
https://gitee.com/yiming_chang/vue-pure-admin.git
synced 2024-11-29 17:57:37 +08:00
Merge branch 'main' into feat/ep-theme
This commit is contained in:
commit
eebd76e21e
@ -28,6 +28,7 @@ Github Address: <https://github.com/xiaoxian521/pure-admin-thin>
|
||||
<p align="center">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4857fc7eb7d4c0f8deeefc644c1f7dd~tplv-k3u1fbpfcp-watermark.awebp?">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/549c3184697f4d268a78c9833e5ec2ea~tplv-k3u1fbpfcp-watermark.awebp?">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/381fc957fac143db9f06efdd389d88a3~tplv-k3u1fbpfcp-watermark.awebp?">
|
||||
</p>
|
||||
|
||||
### Use Gitpod
|
||||
|
@ -28,6 +28,7 @@ UI 设计:<https://www.bilibili.com/video/BV17g411T7rq/>
|
||||
<p align="center">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b4857fc7eb7d4c0f8deeefc644c1f7dd~tplv-k3u1fbpfcp-watermark.awebp?">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/549c3184697f4d268a78c9833e5ec2ea~tplv-k3u1fbpfcp-watermark.awebp?">
|
||||
<img alt="PureAdmin Logo" width="100%" src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/381fc957fac143db9f06efdd389d88a3~tplv-k3u1fbpfcp-watermark.awebp?">
|
||||
</p>
|
||||
|
||||
### 使用 Gitpod
|
||||
|
@ -38,7 +38,6 @@
|
||||
"@vueuse/core": "^6.7.1",
|
||||
"@vueuse/motion": "^2.0.0-beta.4",
|
||||
"animate.css": "^4.1.1",
|
||||
"await-to-js": "^3.0.0",
|
||||
"axios": "^0.21.1",
|
||||
"cropperjs": "^1.5.11",
|
||||
"css-color-function": "^1.3.3",
|
||||
@ -49,20 +48,16 @@
|
||||
"font-awesome": "^4.7.0",
|
||||
"js-cookie": "^3.0.1",
|
||||
"lodash-es": "^4.17.21",
|
||||
"lowdb": "^3.0.0",
|
||||
"mitt": "^3.0.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"path": "^0.12.7",
|
||||
"path-to-regexp": "^6.2.0",
|
||||
"pinia": "^2.0.0-rc.14",
|
||||
"qs": "^6.10.1",
|
||||
"remixicon": "^2.5.0",
|
||||
"resize-observer-polyfill": "^1.5.1",
|
||||
"responsive-storage": "^1.0.11",
|
||||
"rgb-hex": "^4.0.0",
|
||||
"sortablejs": "1.13.0",
|
||||
"typescript-cookie": "^1.0.0",
|
||||
"v-contextmenu": "3.0.0",
|
||||
"vue": "^3.2.24",
|
||||
"vue-i18n": "^9.2.0-beta.3",
|
||||
@ -96,7 +91,6 @@
|
||||
"@zougt/vite-plugin-theme-preprocessor": "^1.4.0",
|
||||
"autoprefixer": "10.2.4",
|
||||
"babel-plugin-transform-remove-console": "6.9.4",
|
||||
"chalk": "2.4.2",
|
||||
"cross-env": "7.0.3",
|
||||
"eslint": "7.30.0",
|
||||
"eslint-plugin-prettier": "3.4.0",
|
||||
|
@ -29,10 +29,8 @@ specifiers:
|
||||
"@zougt/vite-plugin-theme-preprocessor": ^1.4.0
|
||||
animate.css: ^4.1.1
|
||||
autoprefixer: 10.2.4
|
||||
await-to-js: ^3.0.0
|
||||
axios: ^0.21.1
|
||||
babel-plugin-transform-remove-console: 6.9.4
|
||||
chalk: 2.4.2
|
||||
cropperjs: ^1.5.11
|
||||
cross-env: 7.0.3
|
||||
css-color-function: ^1.3.3
|
||||
@ -48,12 +46,10 @@ specifiers:
|
||||
js-cookie: ^3.0.1
|
||||
lint-staged: 11.1.2
|
||||
lodash-es: ^4.17.21
|
||||
lowdb: ^3.0.0
|
||||
mitt: ^3.0.0
|
||||
mockjs: ^1.1.0
|
||||
nprogress: ^0.2.0
|
||||
path: ^0.12.7
|
||||
path-to-regexp: ^6.2.0
|
||||
pinia: ^2.0.0-rc.14
|
||||
postcss: 8.2.6
|
||||
postcss-import: 14.0.0
|
||||
@ -67,13 +63,11 @@ specifiers:
|
||||
rimraf: 3.0.2
|
||||
sass: ^1.45.0
|
||||
sass-loader: ^12.3.0
|
||||
sortablejs: 1.13.0
|
||||
stylelint: 13.13.1
|
||||
stylelint-config-prettier: 8.0.2
|
||||
stylelint-config-standard: 22.0.0
|
||||
stylelint-order: 4.1.0
|
||||
typescript: 4.4.2
|
||||
typescript-cookie: ^1.0.0
|
||||
unplugin-element-plus: ^0.1.3
|
||||
v-contextmenu: 3.0.0
|
||||
vite: 2.6.14
|
||||
@ -104,7 +98,6 @@ dependencies:
|
||||
"@vueuse/core": 6.7.5_vue@3.2.24
|
||||
"@vueuse/motion": 2.0.0-beta.4_vue@3.2.24
|
||||
animate.css: 4.1.1
|
||||
await-to-js: 3.0.0
|
||||
axios: 0.21.4
|
||||
cropperjs: 1.5.12
|
||||
css-color-function: 1.3.3
|
||||
@ -115,20 +108,16 @@ dependencies:
|
||||
font-awesome: 4.7.0
|
||||
js-cookie: 3.0.1
|
||||
lodash-es: 4.17.21
|
||||
lowdb: 3.0.0
|
||||
mitt: 3.0.0
|
||||
mockjs: 1.1.0
|
||||
nprogress: 0.2.0
|
||||
path: 0.12.7
|
||||
path-to-regexp: 6.2.0
|
||||
pinia: 2.0.2_typescript@4.4.2+vue@3.2.24
|
||||
qs: 6.10.1
|
||||
remixicon: 2.5.0
|
||||
resize-observer-polyfill: 1.5.1
|
||||
responsive-storage: 1.0.11_vue@3.2.24
|
||||
rgb-hex: 4.0.0
|
||||
sortablejs: 1.13.0
|
||||
typescript-cookie: 1.0.0
|
||||
v-contextmenu: 3.0.0_vue@3.2.24
|
||||
vue: 3.2.24
|
||||
vue-i18n: 9.2.0-beta.17_vue@3.2.24
|
||||
@ -162,7 +151,6 @@ devDependencies:
|
||||
"@zougt/vite-plugin-theme-preprocessor": 1.4.0_sass@1.45.0
|
||||
autoprefixer: 10.2.4_postcss@8.2.6
|
||||
babel-plugin-transform-remove-console: 6.9.4
|
||||
chalk: 2.4.2
|
||||
cross-env: 7.0.3
|
||||
eslint: 7.30.0
|
||||
eslint-plugin-prettier: 3.4.0_eslint@7.30.0+prettier@2.3.2
|
||||
@ -1598,10 +1586,10 @@ packages:
|
||||
vue-demi: 0.12.1_vue@3.2.24
|
||||
dev: false
|
||||
|
||||
/@vueuse/core/7.2.2_vue@3.2.24:
|
||||
/@vueuse/core/7.4.0_vue@3.2.24:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-T9oksrPflNhsgG/Y/7IeCSmITPZ0VKDnTpK8y7SQl4ZIdLIL8L7fJyhJEgSMWyo497j/XK3RKFkOTh4GFTVeIQ==
|
||||
integrity: sha512-CgYouxjXOE63gMn3l9cOsgzPTEAk3yoncsSmJUxXAi/to25rCPVWB/39jXTPhWZboR43EDDMWoEhHaSoMzaldg==
|
||||
}
|
||||
peerDependencies:
|
||||
"@vue/composition-api": ^1.1.0
|
||||
@ -1612,7 +1600,7 @@ packages:
|
||||
vue:
|
||||
optional: true
|
||||
dependencies:
|
||||
"@vueuse/shared": 7.2.2_vue@3.2.24
|
||||
"@vueuse/shared": 7.4.0_vue@3.2.24
|
||||
vue: 3.2.24
|
||||
vue-demi: 0.12.1_vue@3.2.24
|
||||
dev: false
|
||||
@ -1653,10 +1641,10 @@ packages:
|
||||
vue-demi: 0.12.1_vue@3.2.24
|
||||
dev: false
|
||||
|
||||
/@vueuse/shared/7.2.2_vue@3.2.24:
|
||||
/@vueuse/shared/7.4.0_vue@3.2.24:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-9vevEvvQgx4snSrDfZ5BFd7FmlIl9rwTtr8ySzPZhZQslx6lbcsXK3Q97I06Fv8S2TedR//X9fn2QbNtbFmdog==
|
||||
integrity: sha512-x5Jn6jUB8gS1mGnVCoNWFEpAoDkm2QwtacZTUgKMn0Ow8tlUBKIfGVOt4vn9qZB10froED/ARHEj79WKLXRieA==
|
||||
}
|
||||
peerDependencies:
|
||||
"@vue/composition-api": ^1.1.0
|
||||
@ -1947,14 +1935,6 @@ packages:
|
||||
postcss-value-parser: 4.1.0
|
||||
dev: true
|
||||
|
||||
/await-to-js/3.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-zJAaP9zxTcvTHRlejau3ZOY4V7SRpiByf3/dxx2uyKxxor19tpmpV2QRsTKikckwhaPmr2dVpxxMr7jOCYVp5g==
|
||||
}
|
||||
engines: { node: ">=6.0.0" }
|
||||
dev: false
|
||||
|
||||
/axios/0.21.4:
|
||||
resolution:
|
||||
{
|
||||
@ -3001,7 +2981,7 @@ packages:
|
||||
dependencies:
|
||||
"@element-plus/icons-vue": 0.2.4_vue@3.2.24
|
||||
"@popperjs/core": 2.11.0
|
||||
"@vueuse/core": 7.2.2_vue@3.2.24
|
||||
"@vueuse/core": 7.4.0_vue@3.2.24
|
||||
async-validator: 4.0.7
|
||||
dayjs: 1.10.7
|
||||
lodash: 4.17.21
|
||||
@ -4782,16 +4762,6 @@ packages:
|
||||
}
|
||||
dev: true
|
||||
|
||||
/lowdb/3.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-9KZRulmIcU8fZuWiaM0d5e2/nPnrFyXkeXVpqT+MJS+vgbgOf1EbtvgQmba8HwUFgDl1oeZR6XqEJnkJmQdKmg==
|
||||
}
|
||||
engines: { node: ^12.20.0 || ^14.13.1 || >=16.0.0 }
|
||||
dependencies:
|
||||
steno: 2.1.0
|
||||
dev: false
|
||||
|
||||
/lower-case/2.0.2:
|
||||
resolution:
|
||||
{
|
||||
@ -5410,6 +5380,7 @@ packages:
|
||||
{
|
||||
integrity: sha512-f66KywYG6+43afgE/8j/GoiNyygk/bnoCbps++3ErRKsIYkGGupyv07R2Ok5m9i67Iqc+T2g1eAUGUPzWhYTyg==
|
||||
}
|
||||
dev: true
|
||||
|
||||
/path-type/4.0.0:
|
||||
resolution:
|
||||
@ -6582,13 +6553,6 @@ packages:
|
||||
tslib: 2.3.1
|
||||
dev: true
|
||||
|
||||
/sortablejs/1.13.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-RBJirPY0spWCrU5yCmWM1eFs/XgX2J5c6b275/YyxFRgnzPhKl/TDeU2hNR8Dt7ITq66NRPM4UlOt+e5O4CFHg==
|
||||
}
|
||||
dev: false
|
||||
|
||||
/sortablejs/1.14.0:
|
||||
resolution:
|
||||
{
|
||||
@ -6705,14 +6669,6 @@ packages:
|
||||
engines: { node: ">= 0.6" }
|
||||
dev: true
|
||||
|
||||
/steno/2.1.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-mauOsiaqTNGFkWqIfwcm3y/fq+qKKaIWf1vf3ocOuTdco9XoHCO2AGF1gFYXuZFSWuP38Q8LBHBGJv2KnJSXyA==
|
||||
}
|
||||
engines: { node: ^14.13.1 || >=16.0.0 }
|
||||
dev: false
|
||||
|
||||
/string-argv/0.3.1:
|
||||
resolution:
|
||||
{
|
||||
@ -7194,14 +7150,6 @@ packages:
|
||||
is-typedarray: 1.0.0
|
||||
dev: true
|
||||
|
||||
/typescript-cookie/1.0.0:
|
||||
resolution:
|
||||
{
|
||||
integrity: sha512-oYHAgQWDqheZXiq1ODzVwwl+8lGzK/ApsxAu1a4uyl+Yd9BuF0M5I3bowgb5oAlU3Qyqejcj5kDyOZe+y+W4SA==
|
||||
}
|
||||
engines: { node: ">=14" }
|
||||
dev: false
|
||||
|
||||
/typescript/4.4.2:
|
||||
resolution:
|
||||
{
|
||||
|
1
src/assets/svg/dark.svg
Normal file
1
src/assets/svg/dark.svg
Normal file
@ -0,0 +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>
|
After Width: | Height: | Size: 263 B |
1
src/assets/svg/day.svg
Normal file
1
src/assets/svg/day.svg
Normal file
@ -0,0 +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>
|
After Width: | Height: | Size: 480 B |
@ -16,7 +16,9 @@ import { getConfig } from "/@/config";
|
||||
import { useRouter } from "vue-router";
|
||||
import { emitter } from "/@/utils/mitt";
|
||||
import { templateRef } from "@vueuse/core";
|
||||
import dayIcon from "/@/assets/svg/day.svg";
|
||||
import { debounce } from "/@/utils/debounce";
|
||||
import darkIcon from "/@/assets/svg/dark.svg";
|
||||
import { themeColorsType } from "../../types";
|
||||
import { useAppStoreHook } from "/@/store/modules/app";
|
||||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
||||
@ -258,11 +260,33 @@ const setEpThemeColor = (color: string) => {
|
||||
writeNewStyle(createNewStyle(color));
|
||||
useEpThemeStoreHook().setEpThemeColor(color);
|
||||
};
|
||||
|
||||
let dataTheme = ref<boolean>(false);
|
||||
|
||||
// 日间、夜间主题切换
|
||||
function dataThemeChange() {
|
||||
const body = document.documentElement as HTMLElement;
|
||||
if (dataTheme.value) {
|
||||
body.setAttribute("data-theme", "dark");
|
||||
setLayoutThemeColor("light");
|
||||
} else body.setAttribute("data-theme", "");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<panel>
|
||||
<el-divider>主题风格</el-divider>
|
||||
<el-divider>主题</el-divider>
|
||||
<el-switch
|
||||
v-model="dataTheme"
|
||||
inline-prompt
|
||||
class="pure-datatheme"
|
||||
:active-icon="dayIcon"
|
||||
:inactive-icon="darkIcon"
|
||||
@change="dataThemeChange"
|
||||
>
|
||||
</el-switch>
|
||||
|
||||
<el-divider>导航栏模式</el-divider>
|
||||
<ul class="pure-theme">
|
||||
<el-tooltip class="item" content="左侧菜单模式" placement="bottom">
|
||||
<li
|
||||
@ -287,8 +311,8 @@ const setEpThemeColor = (color: string) => {
|
||||
</el-tooltip>
|
||||
</ul>
|
||||
|
||||
<el-divider>主题色</el-divider>
|
||||
<ul class="theme-color">
|
||||
<el-divider v-if="!dataTheme">主题色</el-divider>
|
||||
<ul class="theme-color" v-if="!dataTheme">
|
||||
<li
|
||||
v-for="(item, index) in themeColors"
|
||||
:key="index"
|
||||
@ -414,6 +438,14 @@ const setEpThemeColor = (color: string) => {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.pure-datatheme {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
text-align: center;
|
||||
display: block;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.pure-theme {
|
||||
margin-top: 25px;
|
||||
width: 100%;
|
||||
|
@ -89,7 +89,7 @@ router.beforeEach((to: toRouteType, _from, next) => {
|
||||
});
|
||||
};
|
||||
// 未开启标签页缓存,刷新页面重定向到顶级路由(参考标签页操作例子,只针对静态路由)
|
||||
if (to.meta?.realPath) {
|
||||
if (to.meta?.dynamicLevel) {
|
||||
const routes = router.options.routes;
|
||||
const { refreshRedirect } = to.meta;
|
||||
const { name, meta } = findRouteByPath(refreshRedirect, routes);
|
||||
|
@ -4,6 +4,6 @@ export interface toRouteType extends RouteLocationNormalized {
|
||||
meta: {
|
||||
keepAlive: boolean;
|
||||
refreshRedirect: string;
|
||||
realPath: string;
|
||||
dynamicLevel: string;
|
||||
};
|
||||
}
|
||||
|
@ -55,31 +55,30 @@ export const useMultiTagsStore = defineStore({
|
||||
case "push":
|
||||
{
|
||||
const tagVal = value as multiType;
|
||||
const tagPath = tagVal?.path;
|
||||
// 判断tag是否已存在
|
||||
const tagHasExits = this.multiTags.some(tag => {
|
||||
return tag.path === tagVal?.path;
|
||||
return tag.path === tagPath;
|
||||
});
|
||||
|
||||
// 判断tag中的query键值是否相等
|
||||
const tagQueryHasExits = this.multiTags.some(tag => {
|
||||
return isEqual(tag.query, tagVal.query);
|
||||
return isEqual(tag.query, tagVal?.query);
|
||||
});
|
||||
|
||||
if (tagHasExits && tagQueryHasExits) return;
|
||||
|
||||
const meta = tagVal?.meta;
|
||||
const dynamicLevel = meta?.dynamicLevel ?? -1;
|
||||
const dynamicLevel = tagVal?.meta?.dynamicLevel ?? -1;
|
||||
if (dynamicLevel > 0) {
|
||||
// dynamicLevel动态路由可打开的数量
|
||||
const realPath = meta?.realPath ?? "";
|
||||
// 获取到已经打开的动态路由数, 判断是否大于dynamicLevel
|
||||
if (
|
||||
this.multiTags.filter(e => e.meta?.realPath ?? "" === realPath)
|
||||
.length >= dynamicLevel
|
||||
this.multiTags.filter(e => e?.path === tagPath).length >=
|
||||
dynamicLevel
|
||||
) {
|
||||
// 关闭第一个
|
||||
const index = this.multiTags.findIndex(
|
||||
item => item.meta?.realPath === realPath
|
||||
item => item?.path === tagPath
|
||||
);
|
||||
index !== -1 && this.multiTags.splice(index, 1);
|
||||
}
|
||||
|
@ -25,8 +25,8 @@ export type multiType = {
|
||||
path: string;
|
||||
parentPath: string;
|
||||
name: string;
|
||||
query: object;
|
||||
meta: any;
|
||||
query?: object;
|
||||
};
|
||||
|
||||
export type setType = {
|
||||
|
29
src/style/dark.scss
Normal file
29
src/style/dark.scss
Normal file
@ -0,0 +1,29 @@
|
||||
/* 暗黑模式 */
|
||||
[data-theme="dark"] {
|
||||
filter: invert(0.9) hue-rotate(180deg);
|
||||
|
||||
#mse,
|
||||
img,
|
||||
.icon-svg,
|
||||
.login-container {
|
||||
filter: invert(1) hue-rotate(180deg);
|
||||
}
|
||||
|
||||
// element plus
|
||||
.el-radio-button__original-radio:checked + .el-radio-button__inner,
|
||||
.el-image-viewer__close,
|
||||
.el-image-viewer__actions__inner,
|
||||
.el-image-viewer__next,
|
||||
.el-image-viewer__prev {
|
||||
color: #000 !important;
|
||||
}
|
||||
|
||||
.el-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.05) !important;
|
||||
}
|
||||
|
||||
.el-drawer {
|
||||
box-shadow: 0 8px 10px -5px rgb(0 0 0 / 1%), 0 16px 24px 2px rgb(0 0 0 / 2%),
|
||||
0 6px 30px 5px rgb(0 0 0 / 1%);
|
||||
}
|
||||
}
|
@ -2,6 +2,7 @@
|
||||
@import "./transition.scss";
|
||||
@import "./element-plus.scss";
|
||||
@import "./sidebar.scss";
|
||||
@import "./dark.scss";
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
|
@ -6,7 +6,7 @@
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.container {
|
||||
.login-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
display: grid;
|
||||
@ -183,7 +183,7 @@ a:hover {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.container {
|
||||
.login-container {
|
||||
grid-gap: 9rem;
|
||||
}
|
||||
}
|
||||
@ -217,7 +217,7 @@ a:hover {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.container {
|
||||
.login-container {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
|
@ -71,7 +71,7 @@ function onPwdBlur() {
|
||||
|
||||
<template>
|
||||
<img :src="bg" class="wave" />
|
||||
<div class="container">
|
||||
<div class="login-container">
|
||||
<div class="img">
|
||||
<component :is="currentWeek"></component>
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user