mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-11-03 13:44:47 +08:00
RealityBoy
GitHub
parent
708ce43e00
commit
d824c99489
@ -32,10 +32,10 @@
|
|||||||
"@ctrl/tinycolor": "^3.4.1",
|
"@ctrl/tinycolor": "^3.4.1",
|
||||||
"@logicflow/core": "^1.1.22",
|
"@logicflow/core": "^1.1.22",
|
||||||
"@logicflow/extension": "^1.1.22",
|
"@logicflow/extension": "^1.1.22",
|
||||||
"@pureadmin/components": "^1.0.6",
|
"@pureadmin/components": "^1.1.0",
|
||||||
"@pureadmin/descriptions": "^1.1.0",
|
"@pureadmin/descriptions": "^1.1.0",
|
||||||
"@pureadmin/table": "^1.2.0",
|
"@pureadmin/table": "^1.2.0",
|
||||||
"@pureadmin/utils": "^0.0.32",
|
"@pureadmin/utils": "^0.0.33",
|
||||||
"@vueuse/core": "^8.9.4",
|
"@vueuse/core": "^8.9.4",
|
||||||
"@vueuse/motion": "^2.0.0-beta.12",
|
"@vueuse/motion": "^2.0.0-beta.12",
|
||||||
"@vueuse/shared": "^8.9.4",
|
"@vueuse/shared": "^8.9.4",
|
||||||
@ -143,7 +143,7 @@
|
|||||||
"typescript": "^4.6.3",
|
"typescript": "^4.6.3",
|
||||||
"unocss": "^0.44.3",
|
"unocss": "^0.44.3",
|
||||||
"unplugin-vue-define-options": "^0.6.1",
|
"unplugin-vue-define-options": "^0.6.1",
|
||||||
"vite": "^3.0.1",
|
"vite": "^3.0.2",
|
||||||
"vite-plugin-mock": "^2.9.6",
|
"vite-plugin-mock": "^2.9.6",
|
||||||
"vite-plugin-remove-console": "^1.1.0",
|
"vite-plugin-remove-console": "^1.1.0",
|
||||||
"vite-svg-loader": "^3.4.0",
|
"vite-svg-loader": "^3.4.0",
|
||||||
|
|||||||
735
pnpm-lock.yaml
generated
735
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -42,7 +42,6 @@ export default defineComponent({
|
|||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
class="scroll-num"
|
class="scroll-num"
|
||||||
// @ts-ignore
|
|
||||||
style={{ "--i": props.i, "--delay": props.delay }}
|
style={{ "--i": props.i, "--delay": props.delay }}
|
||||||
>
|
>
|
||||||
<ul ref="ul" style={{ fontSize: "32px" }}>
|
<ul ref="ul" style={{ fontSize: "32px" }}>
|
||||||
|
|||||||
@ -102,6 +102,7 @@ onMounted(() => {
|
|||||||
v-for="(item, key) in titleLists"
|
v-for="(item, key) in titleLists"
|
||||||
:key="key"
|
:key="key"
|
||||||
:title="item.text"
|
:title="item.text"
|
||||||
|
class="dark:color-bg_color"
|
||||||
@mouseenter.prevent="onEnter(key)"
|
@mouseenter.prevent="onEnter(key)"
|
||||||
@mouseleave.prevent="focusIndex = -1"
|
@mouseleave.prevent="focusIndex = -1"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -35,7 +35,7 @@ const nodeDragNode = item => {
|
|||||||
<!-- 左侧bpmn元素选择器 -->
|
<!-- 左侧bpmn元素选择器 -->
|
||||||
<div class="node-panel">
|
<div class="node-panel">
|
||||||
<div
|
<div
|
||||||
class="node-item"
|
class="node-item dark:color-bg_color"
|
||||||
v-for="item in props.nodeList"
|
v-for="item in props.nodeList"
|
||||||
:key="item.text"
|
:key="item.text"
|
||||||
@mousedown="nodeDragNode(item)"
|
@mousedown="nodeDragNode(item)"
|
||||||
|
|||||||
@ -87,6 +87,8 @@ import Ppt from "@iconify-icons/ri/file-ppt-2-line";
|
|||||||
import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
|
import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
|
||||||
import User from "@iconify-icons/ri/user-3-fill";
|
import User from "@iconify-icons/ri/user-3-fill";
|
||||||
import Lock from "@iconify-icons/ri/lock-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";
|
||||||
addIcon("arrow-right-s-line", ArrowRightSLine);
|
addIcon("arrow-right-s-line", ArrowRightSLine);
|
||||||
addIcon("arrow-left-s-line", ArrowLeftSLine);
|
addIcon("arrow-left-s-line", ArrowLeftSLine);
|
||||||
addIcon("logout-circle-r-line", LogoutCircleRLine);
|
addIcon("logout-circle-r-line", LogoutCircleRLine);
|
||||||
@ -112,6 +114,8 @@ addIcon("ppt", Ppt);
|
|||||||
addIcon("terminal-window-line", TerminalWindowLine);
|
addIcon("terminal-window-line", TerminalWindowLine);
|
||||||
addIcon("user", User);
|
addIcon("user", User);
|
||||||
addIcon("lock", Lock);
|
addIcon("lock", Lock);
|
||||||
|
addIcon("menu-unfold", MenuUnfold);
|
||||||
|
addIcon("menu-fold", MenuFold);
|
||||||
|
|
||||||
// Font Awesome 4
|
// Font Awesome 4
|
||||||
import FaUser from "@iconify-icons/fa/user";
|
import FaUser from "@iconify-icons/fa/user";
|
||||||
@ -161,6 +165,9 @@ export default defineComponent({
|
|||||||
IconifyIcon,
|
IconifyIcon,
|
||||||
{
|
{
|
||||||
icon: `${this.icon}`,
|
icon: `${this.icon}`,
|
||||||
|
style: attrs?.style
|
||||||
|
? Object.assign(attrs.style, { outline: "none" })
|
||||||
|
: { outline: "none" },
|
||||||
...attrs
|
...attrs
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -17,6 +17,9 @@ export default defineComponent({
|
|||||||
IconifyIcon,
|
IconifyIcon,
|
||||||
{
|
{
|
||||||
icon: `${this.icon}`,
|
icon: `${this.icon}`,
|
||||||
|
style: attrs?.style
|
||||||
|
? Object.assign(attrs.style, { outline: "none" })
|
||||||
|
: { outline: "none" },
|
||||||
...attrs
|
...attrs
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -246,7 +246,7 @@ export default defineComponent({
|
|||||||
>
|
>
|
||||||
<div class="absolute top-[50%] left-[50%] font-bold">
|
<div class="absolute top-[50%] left-[50%] font-bold">
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
class="cursor-pointer outline-none"
|
class="cursor-pointer"
|
||||||
icon="refresh-right"
|
icon="refresh-right"
|
||||||
width="30"
|
width="30"
|
||||||
color="var(--el-color-primary)"
|
color="var(--el-color-primary)"
|
||||||
|
|||||||
@ -57,7 +57,7 @@ export default defineComponent({
|
|||||||
return {
|
return {
|
||||||
background:
|
background:
|
||||||
s === size.value ? useEpThemeStoreHook().epThemeColor : "",
|
s === size.value ? useEpThemeStoreHook().epThemeColor : "",
|
||||||
color: s === size.value ? "#f4f4f5" : "#000"
|
color: s === size.value ? "#fff" : "var(--el-text-color-primary)"
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
@ -104,10 +104,10 @@ export default defineComponent({
|
|||||||
const reference = {
|
const reference = {
|
||||||
reference: () => (
|
reference: () => (
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
class="cursor-pointer outline-none"
|
class="cursor-pointer"
|
||||||
icon="setting"
|
icon="setting"
|
||||||
width="16"
|
width="16"
|
||||||
color="#606266"
|
color="text_color_regular"
|
||||||
onMouseover={e => (buttonRef.value = e.currentTarget)}
|
onMouseover={e => (buttonRef.value = e.currentTarget)}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
@ -117,7 +117,7 @@ export default defineComponent({
|
|||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
{...attrs}
|
{...attrs}
|
||||||
class="w-99/100 mt-6 pt-2 pl-2 pr-2 pb-1 bg-white"
|
class="w-99/100 mt-6 p-2 bg-white dark:bg-dark"
|
||||||
v-loading={props.loading}
|
v-loading={props.loading}
|
||||||
element-loading-svg={loadingSvg}
|
element-loading-svg={loadingSvg}
|
||||||
element-loading-svg-view-box="-10, -10, 50, 50"
|
element-loading-svg-view-box="-10, -10, 50, 50"
|
||||||
@ -134,10 +134,10 @@ export default defineComponent({
|
|||||||
placement="top"
|
placement="top"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
class="cursor-pointer outline-none"
|
class="cursor-pointer"
|
||||||
icon={isExpandAll.value ? "unExpand" : "expand"}
|
icon={isExpandAll.value ? "unExpand" : "expand"}
|
||||||
width="16"
|
width="16"
|
||||||
color="#606266"
|
color="text_color_regular"
|
||||||
onClick={() => onExpand()}
|
onClick={() => onExpand()}
|
||||||
/>
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
@ -146,10 +146,10 @@ export default defineComponent({
|
|||||||
) : undefined}
|
) : undefined}
|
||||||
<el-tooltip effect="dark" content="刷新" placement="top">
|
<el-tooltip effect="dark" content="刷新" placement="top">
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
class="cursor-pointer outline-none"
|
class="cursor-pointer"
|
||||||
icon="refresh-right"
|
icon="refresh-right"
|
||||||
width="16"
|
width="16"
|
||||||
color="#606266"
|
color="text_color_regular"
|
||||||
onClick={() => emit("refresh")}
|
onClick={() => emit("refresh")}
|
||||||
/>
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
@ -158,10 +158,10 @@ export default defineComponent({
|
|||||||
<el-tooltip effect="dark" content="密度" placement="top">
|
<el-tooltip effect="dark" content="密度" placement="top">
|
||||||
<el-dropdown v-slots={dropdown} trigger="click">
|
<el-dropdown v-slots={dropdown} trigger="click">
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
class="cursor-pointer outline-none"
|
class="cursor-pointer"
|
||||||
icon="density"
|
icon="density"
|
||||||
width="16"
|
width="16"
|
||||||
color="#606266"
|
color="text_color_regular"
|
||||||
/>
|
/>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
|
|||||||
@ -6,7 +6,6 @@ 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 avatars from "/@/assets/avatars.jpg";
|
||||||
import Hamburger from "./sidebar/hamBurger.vue";
|
|
||||||
import { watch, getCurrentInstance } from "vue";
|
import { watch, getCurrentInstance } from "vue";
|
||||||
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
import Breadcrumb from "./sidebar/breadCrumb.vue";
|
||||||
import { deviceDetection } from "@pureadmin/utils";
|
import { deviceDetection } from "@pureadmin/utils";
|
||||||
@ -21,11 +20,11 @@ const {
|
|||||||
logout,
|
logout,
|
||||||
onPanel,
|
onPanel,
|
||||||
changeTitle,
|
changeTitle,
|
||||||
toggleSideBar,
|
|
||||||
pureApp,
|
pureApp,
|
||||||
username,
|
username,
|
||||||
avatarsStyle,
|
avatarsStyle,
|
||||||
getDropdownItemStyle,
|
getDropdownItemStyle,
|
||||||
|
getDropdownItemClass,
|
||||||
changeWangeditorLanguage
|
changeWangeditorLanguage
|
||||||
} = useNav();
|
} = useNav();
|
||||||
|
|
||||||
@ -51,14 +50,9 @@ function translationEn() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="navbar">
|
<div
|
||||||
<Hamburger
|
class="navbar bg-[#fff] shadow-sm shadow-[rgba(0, 21, 41, 0.08)] dark:shadow-[#0d0d0d]"
|
||||||
v-if="pureApp.layout !== 'mix'"
|
>
|
||||||
:is-active="pureApp.sidebar.opened"
|
|
||||||
class="hamburger-container"
|
|
||||||
@toggleClick="toggleSideBar"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Breadcrumb v-if="pureApp.layout !== 'mix'" class="breadcrumb-container" />
|
<Breadcrumb v-if="pureApp.layout !== 'mix'" class="breadcrumb-container" />
|
||||||
|
|
||||||
<mixNav v-if="pureApp.layout === 'mix'" />
|
<mixNav v-if="pureApp.layout === 'mix'" />
|
||||||
@ -72,11 +66,14 @@ function translationEn() {
|
|||||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||||
<!-- 国际化 -->
|
<!-- 国际化 -->
|
||||||
<el-dropdown id="header-translation" trigger="click">
|
<el-dropdown id="header-translation" trigger="click">
|
||||||
<globalization />
|
<globalization
|
||||||
|
class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
|
||||||
|
/>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu class="translation">
|
<el-dropdown-menu class="translation">
|
||||||
<el-dropdown-item
|
<el-dropdown-item
|
||||||
:style="getDropdownItemStyle(locale, 'zh')"
|
:style="getDropdownItemStyle(locale, 'zh')"
|
||||||
|
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
|
||||||
@click="translationCh"
|
@click="translationCh"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
@ -88,6 +85,7 @@ function translationEn() {
|
|||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
<el-dropdown-item
|
<el-dropdown-item
|
||||||
:style="getDropdownItemStyle(locale, 'en')"
|
:style="getDropdownItemStyle(locale, 'en')"
|
||||||
|
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
|
||||||
@click="translationEn"
|
@click="translationEn"
|
||||||
>
|
>
|
||||||
<span class="check-en" v-show="locale === 'en'">
|
<span class="check-en" v-show="locale === 'en'">
|
||||||
@ -100,9 +98,9 @@ function translationEn() {
|
|||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<!-- 退出登录 -->
|
<!-- 退出登录 -->
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link navbar-bg-hover">
|
||||||
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
|
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
|
||||||
<p v-if="username">{{ username }}</p>
|
<p v-if="username" class="dark:color-white">{{ username }}</p>
|
||||||
</span>
|
</span>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu class="logout">
|
<el-dropdown-menu class="logout">
|
||||||
@ -117,7 +115,7 @@ function translationEn() {
|
|||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<span
|
<span
|
||||||
class="el-icon-setting"
|
class="el-icon-setting navbar-bg-hover"
|
||||||
:title="t('buttons.hssystemSet')"
|
:title="t('buttons.hssystemSet')"
|
||||||
@click="onPanel"
|
@click="onPanel"
|
||||||
>
|
>
|
||||||
@ -132,17 +130,6 @@ function translationEn() {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 48px;
|
height: 48px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
|
|
||||||
|
|
||||||
.hamburger-container {
|
|
||||||
line-height: 48px;
|
|
||||||
height: 100%;
|
|
||||||
float: left;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: background 0.3s;
|
|
||||||
-webkit-tap-highlight-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vertical-header-right {
|
.vertical-header-right {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -152,31 +139,6 @@ function translationEn() {
|
|||||||
color: #000000d9;
|
color: #000000d9;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
:deep(.dropdown-badge) {
|
|
||||||
&:hover {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.screen-full {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.globalization {
|
|
||||||
height: 48px;
|
|
||||||
width: 40px;
|
|
||||||
padding: 11px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-dropdown-link {
|
.el-dropdown-link {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
@ -186,10 +148,6 @@ function translationEn() {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #000000d9;
|
color: #000000d9;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
@ -208,15 +166,12 @@ function translationEn() {
|
|||||||
display: flex;
|
display: flex;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-container {
|
.breadcrumb-container {
|
||||||
float: left;
|
float: left;
|
||||||
|
margin-left: 16px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -22,7 +22,7 @@ function tabClick() {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
|
<el-dropdown ref="dropdownDom" trigger="click" placement="bottom-end">
|
||||||
<span class="dropdown-badge">
|
<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" />
|
||||||
|
|||||||
@ -44,7 +44,9 @@ function hoverDescription(event, description) {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="notice-container">
|
<div
|
||||||
|
class="notice-container border-b-1 border-[#f0f0f0] dark:border-[#303030]"
|
||||||
|
>
|
||||||
<el-avatar
|
<el-avatar
|
||||||
v-if="props.noticeItem.avatar"
|
v-if="props.noticeItem.avatar"
|
||||||
:size="30"
|
:size="30"
|
||||||
@ -52,7 +54,7 @@ function hoverDescription(event, description) {
|
|||||||
class="notice-container-avatar"
|
class="notice-container-avatar"
|
||||||
/>
|
/>
|
||||||
<div class="notice-container-text">
|
<div class="notice-container-text">
|
||||||
<div class="notice-text-title">
|
<div class="notice-text-title color-[#000000d9] dark:color-white">
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
popper-class="notice-title-popper"
|
popper-class="notice-title-popper"
|
||||||
:disabled="!titleTooltip"
|
:disabled="!titleTooltip"
|
||||||
@ -91,7 +93,7 @@ function hoverDescription(event, description) {
|
|||||||
{{ props.noticeItem.description }}
|
{{ props.noticeItem.description }}
|
||||||
</div>
|
</div>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
<div class="notice-text-datetime">
|
<div class="notice-text-datetime color-[#00000073] dark:color-white">
|
||||||
{{ props.noticeItem.datetime }}
|
{{ props.noticeItem.datetime }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -109,7 +111,7 @@ function hoverDescription(event, description) {
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 12px 0;
|
padding: 12px 0;
|
||||||
border-bottom: 1px solid #f0f0f0;
|
// border-bottom: 1px solid #f0f0f0;
|
||||||
|
|
||||||
.notice-container-avatar {
|
.notice-container-avatar {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
@ -128,7 +130,6 @@ function hoverDescription(event, description) {
|
|||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
line-height: 1.5715;
|
line-height: 1.5715;
|
||||||
color: rgba(0, 0, 0, 0.85);
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
|
||||||
.notice-title-content {
|
.notice-title-content {
|
||||||
@ -150,7 +151,6 @@ function hoverDescription(event, description) {
|
|||||||
.notice-text-datetime {
|
.notice-text-datetime {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
line-height: 1.5715;
|
line-height: 1.5715;
|
||||||
color: rgba(0, 0, 0, 0.45);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-text-description {
|
.notice-text-description {
|
||||||
|
|||||||
@ -18,7 +18,7 @@ emitter.on("openPanel", () => {
|
|||||||
<template>
|
<template>
|
||||||
<div :class="{ show: show }" class="right-panel-container">
|
<div :class="{ show: show }" class="right-panel-container">
|
||||||
<div class="right-panel-background" />
|
<div class="right-panel-background" />
|
||||||
<div ref="target" class="right-panel">
|
<div ref="target" class="right-panel bg-white dark:bg-dark">
|
||||||
<div class="right-panel-items">
|
<div class="right-panel-items">
|
||||||
<div class="project-configuration">
|
<div class="project-configuration">
|
||||||
<h3>项目配置</h3>
|
<h3>项目配置</h3>
|
||||||
@ -26,7 +26,7 @@ emitter.on("openPanel", () => {
|
|||||||
<IconifyIconOffline icon="close" />
|
<IconifyIconOffline icon="close" />
|
||||||
</el-icon>
|
</el-icon>
|
||||||
</div>
|
</div>
|
||||||
<div style="border-bottom: 1px solid #dcdfe6" />
|
<div class="border-b-1 border-[#dcdfe6] dark:border-[#303030]" />
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -62,7 +62,7 @@ emitter.on("openPanel", () => {
|
|||||||
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
|
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05);
|
||||||
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
|
transition: all 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||||
transform: translate(100%);
|
transform: translate(100%);
|
||||||
background: #fff;
|
// background: #fff;
|
||||||
z-index: 40000;
|
z-index: 40000;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,13 +1,16 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useFullscreen } from "@vueuse/core";
|
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
|
import { useFullscreen } from "@vueuse/core";
|
||||||
|
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
const { isFullscreen, toggle } = useFullscreen();
|
const { isFullscreen, toggle } = useFullscreen();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="screen-full" @click="toggle">
|
<div
|
||||||
|
class="screen-full w-36px h-48px flex-ac cursor-pointer navbar-bg-hover"
|
||||||
|
@click="toggle"
|
||||||
|
>
|
||||||
<FontIcon
|
<FontIcon
|
||||||
:title="
|
:title="
|
||||||
isFullscreen ? t('buttons.hsexitfullscreen') : t('buttons.hsfullscreen')
|
isFullscreen ? t('buttons.hsexitfullscreen') : t('buttons.hsfullscreen')
|
||||||
@ -16,13 +19,3 @@ const { isFullscreen, toggle } = useFullscreen();
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.screen-full {
|
|
||||||
width: 36px;
|
|
||||||
height: 48px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="search-footer">
|
<div class="search-footer color-[#333] dark:color-white">
|
||||||
<span class="search-footer-item">
|
<span class="search-footer-item">
|
||||||
<enterOutlined class="icon" />
|
<enterOutlined class="icon" />
|
||||||
确认
|
确认
|
||||||
@ -23,7 +23,6 @@ import mdiKeyboardEsc from "/@/assets/svg/mdi_keyboard_esc.svg?component";
|
|||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.search-footer {
|
.search-footer {
|
||||||
display: flex;
|
display: flex;
|
||||||
color: #333;
|
|
||||||
|
|
||||||
.search-footer-item {
|
.search-footer-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,24 +1,3 @@
|
|||||||
<template>
|
|
||||||
<div class="result">
|
|
||||||
<template v-for="item in options" :key="item.path">
|
|
||||||
<div
|
|
||||||
class="result-item"
|
|
||||||
:style="{
|
|
||||||
background:
|
|
||||||
item?.path === active ? useEpThemeStoreHook().epThemeColor : '',
|
|
||||||
color: item.path === active ? '#fff' : ''
|
|
||||||
}"
|
|
||||||
@click="handleTo"
|
|
||||||
@mouseenter="handleMouse(item)"
|
|
||||||
>
|
|
||||||
<component :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')" />
|
|
||||||
<span class="result-item-title">{{ t(item.meta?.title) }}</span>
|
|
||||||
<enterOutlined />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed } from "vue";
|
import { computed } from "vue";
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
@ -49,6 +28,17 @@ interface Emits {
|
|||||||
const props = withDefaults(defineProps<Props>(), {});
|
const props = withDefaults(defineProps<Props>(), {});
|
||||||
const emit = defineEmits<Emits>();
|
const emit = defineEmits<Emits>();
|
||||||
|
|
||||||
|
const itemStyle = computed(() => {
|
||||||
|
return item => {
|
||||||
|
return {
|
||||||
|
background:
|
||||||
|
item?.path === active.value ? useEpThemeStoreHook().epThemeColor : "",
|
||||||
|
color: item.path === active.value ? "#fff" : "",
|
||||||
|
fontSize: item.path === active.value ? "16px" : "14px"
|
||||||
|
};
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
const active = computed({
|
const active = computed({
|
||||||
get() {
|
get() {
|
||||||
return props.value;
|
return props.value;
|
||||||
@ -67,6 +57,24 @@ function handleTo() {
|
|||||||
emit("enter");
|
emit("enter");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="result">
|
||||||
|
<template v-for="item in options" :key="item.path">
|
||||||
|
<div
|
||||||
|
class="result-item dark:bg-[#1d1d1d]"
|
||||||
|
:style="itemStyle(item)"
|
||||||
|
@click="handleTo"
|
||||||
|
@mouseenter="handleMouse(item)"
|
||||||
|
>
|
||||||
|
<component :is="useRenderIcon(item.meta?.icon ?? 'bookmark-2-line')" />
|
||||||
|
<span class="result-item-title">{{ t(item.meta?.title) }}</span>
|
||||||
|
<enterOutlined />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.result {
|
.result {
|
||||||
padding-bottom: 12px;
|
padding-bottom: 12px;
|
||||||
@ -78,8 +86,9 @@ function handleTo() {
|
|||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding: 14px;
|
padding: 14px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: #e5e7eb;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border: 0.1px solid #ccc;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
&-title {
|
&-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -8,23 +8,11 @@ function handleSearch() {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="search-container" @click="handleSearch">
|
<div
|
||||||
|
class="search-container w-40px h-48px flex-c cursor-pointer navbar-bg-hover"
|
||||||
|
@click="handleSearch"
|
||||||
|
>
|
||||||
<IconifyIconOffline icon="search" />
|
<IconifyIconOffline icon="search" />
|
||||||
</div>
|
</div>
|
||||||
<SearchModal v-model:value="show" />
|
<SearchModal v-model:value="show" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.search-container {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 48px;
|
|
||||||
width: 40px;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: #f6f6f6;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import {
|
||||||
reactive,
|
|
||||||
ref,
|
ref,
|
||||||
unref,
|
unref,
|
||||||
watch,
|
watch,
|
||||||
|
reactive,
|
||||||
computed,
|
computed,
|
||||||
nextTick,
|
nextTick,
|
||||||
useCssModule,
|
useCssModule,
|
||||||
@ -15,21 +15,30 @@ 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 { templateRef } from "@vueuse/core";
|
import { templateRef } from "@vueuse/core";
|
||||||
|
import { TinyColor } from "@ctrl/tinycolor";
|
||||||
import { themeColorsType } from "../../types";
|
import { themeColorsType } from "../../types";
|
||||||
import { routerArrays } from "/@/layout/types";
|
import { routerArrays } from "/@/layout/types";
|
||||||
import type { StorageConfigs } from "/#/index";
|
import type { StorageConfigs } from "/#/index";
|
||||||
import { useAppStoreHook } from "/@/store/modules/app";
|
import { useAppStoreHook } from "/@/store/modules/app";
|
||||||
import { shadeBgColor } from "../../theme/element-plus";
|
|
||||||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
||||||
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
|
||||||
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
|
import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
|
||||||
import { createNewStyle, writeNewStyle } from "../../theme/element-plus";
|
import {
|
||||||
import { debounce, storageLocal, storageSession } from "@pureadmin/utils";
|
useDark,
|
||||||
|
debounce,
|
||||||
|
storageLocal,
|
||||||
|
storageSession
|
||||||
|
} from "@pureadmin/utils";
|
||||||
|
import {
|
||||||
|
darken,
|
||||||
|
lighten,
|
||||||
|
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";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
|
const { isDark } = useDark();
|
||||||
const { isSelect } = useCssModule();
|
const { isSelect } = useCssModule();
|
||||||
const body = document.documentElement as HTMLElement;
|
const body = document.documentElement as HTMLElement;
|
||||||
const instance =
|
const instance =
|
||||||
@ -39,29 +48,29 @@ const instanceConfig =
|
|||||||
getCurrentInstance().appContext.app.config.globalProperties.$config;
|
getCurrentInstance().appContext.app.config.globalProperties.$config;
|
||||||
|
|
||||||
let themeColors = ref<Array<themeColorsType>>([
|
let themeColors = ref<Array<themeColorsType>>([
|
||||||
// 道奇蓝（默认）
|
/* 道奇蓝（默认） */
|
||||||
{ color: "#1b2a47", themeColor: "default" },
|
{ color: "#1b2a47", themeColor: "default" },
|
||||||
// 亮白色
|
/* 亮白色 */
|
||||||
{ color: "#ffffff", themeColor: "light" },
|
{ color: "#ffffff", themeColor: "light" },
|
||||||
// 猩红色
|
/* 猩红色 */
|
||||||
{ color: "#f5222d", themeColor: "dusk" },
|
{ color: "#f5222d", themeColor: "dusk" },
|
||||||
// 橙红色
|
/* 橙红色 */
|
||||||
{ color: "#fa541c", themeColor: "volcano" },
|
{ color: "#fa541c", themeColor: "volcano" },
|
||||||
// 金色
|
/* 金色 */
|
||||||
{ color: "#fadb14", themeColor: "yellow" },
|
{ color: "#fadb14", themeColor: "yellow" },
|
||||||
// 绿宝石
|
/* 绿宝石 */
|
||||||
{ color: "#13c2c2", themeColor: "mingQing" },
|
{ color: "#13c2c2", themeColor: "mingQing" },
|
||||||
// 酸橙绿
|
/* 酸橙绿 */
|
||||||
{ color: "#52c41a", themeColor: "auroraGreen" },
|
{ color: "#52c41a", themeColor: "auroraGreen" },
|
||||||
// 深粉色
|
/* 深粉色 */
|
||||||
{ color: "#eb2f96", themeColor: "pink" },
|
{ color: "#eb2f96", themeColor: "pink" },
|
||||||
// 深紫罗兰色
|
/* 深紫罗兰色 */
|
||||||
{ color: "#722ed1", themeColor: "saucePurple" }
|
{ color: "#722ed1", themeColor: "saucePurple" }
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
const mixRef = templateRef<HTMLElement | null>("mixRef", null);
|
||||||
const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
|
const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
|
||||||
const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);
|
const horizontalRef = templateRef<HTMLElement | null>("horizontalRef", null);
|
||||||
const mixRef = templateRef<HTMLElement | null>("mixRef", null);
|
|
||||||
|
|
||||||
let layoutTheme =
|
let layoutTheme =
|
||||||
ref(storageLocal.getItem<StorageConfigs>("responsive-layout")) ||
|
ref(storageLocal.getItem<StorageConfigs>("responsive-layout")) ||
|
||||||
@ -70,7 +79,7 @@ let layoutTheme =
|
|||||||
theme: instanceConfig?.Theme ?? "default"
|
theme: instanceConfig?.Theme ?? "default"
|
||||||
});
|
});
|
||||||
|
|
||||||
// body添加layout属性，作用于src/style/sidebar.scss
|
/* body添加layout属性，作用于src/style/sidebar.scss */
|
||||||
if (unref(layoutTheme)) {
|
if (unref(layoutTheme)) {
|
||||||
let layout = unref(layoutTheme).layout;
|
let layout = unref(layoutTheme).layout;
|
||||||
let theme = unref(layoutTheme).theme;
|
let theme = unref(layoutTheme).theme;
|
||||||
@ -80,13 +89,11 @@ if (unref(layoutTheme)) {
|
|||||||
setLayoutModel(layout);
|
setLayoutModel(layout);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 默认灵动模式
|
/** 默认灵动模式 */
|
||||||
const markValue = ref(instance.configure?.showModel ?? "smart");
|
const markValue = ref(instance.configure?.showModel ?? "smart");
|
||||||
|
|
||||||
const logoVal = ref(instance.configure?.showLogo ?? true);
|
const logoVal = ref(instance.configure?.showLogo ?? true);
|
||||||
|
|
||||||
const epThemeColor = ref(useEpThemeStoreHook().getEpThemeColor);
|
|
||||||
|
|
||||||
const settings = reactive({
|
const settings = reactive({
|
||||||
greyVal: instance.configure.grey,
|
greyVal: instance.configure.grey,
|
||||||
weakVal: instance.configure.weak,
|
weakVal: instance.configure.weak,
|
||||||
@ -102,6 +109,13 @@ const getThemeColorStyle = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/** 当网页为暗黑模式时不显示亮白色切换选项 */
|
||||||
|
const showThemeColors = computed(() => {
|
||||||
|
return themeColor => {
|
||||||
|
return themeColor === "light" && isDark.value ? false : true;
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
function storageConfigureChange<T>(key: string, val: T): void {
|
function storageConfigureChange<T>(key: string, val: T): void {
|
||||||
const storageConfigure = instance.configure;
|
const storageConfigure = instance.configure;
|
||||||
storageConfigure[key] = val;
|
storageConfigure[key] = val;
|
||||||
@ -115,13 +129,13 @@ function toggleClass(flag: boolean, clsName: string, target?: HTMLElement) {
|
|||||||
targetEl.className = flag ? `${className} ${clsName} ` : className;
|
targetEl.className = flag ? `${className} ${clsName} ` : className;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 灰色模式设置
|
/** 灰色模式设置 */
|
||||||
const greyChange = (value): void => {
|
const greyChange = (value): void => {
|
||||||
toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
|
toggleClass(settings.greyVal, "html-grey", document.querySelector("html"));
|
||||||
storageConfigureChange("grey", value);
|
storageConfigureChange("grey", value);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 色弱模式设置
|
/** 色弱模式设置 */
|
||||||
const weekChange = (value): void => {
|
const weekChange = (value): void => {
|
||||||
toggleClass(
|
toggleClass(
|
||||||
settings.weakVal,
|
settings.weakVal,
|
||||||
@ -143,7 +157,7 @@ const multiTagsCacheChange = () => {
|
|||||||
useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
|
useMultiTagsStoreHook().multiTagsCacheChange(multiTagsCache);
|
||||||
};
|
};
|
||||||
|
|
||||||
// 清空缓存并返回登录页
|
/** 清空缓存并返回登录页 */
|
||||||
function onReset() {
|
function onReset() {
|
||||||
router.push("/login");
|
router.push("/login");
|
||||||
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
|
const { Grey, Weak, MultiTagsCache, EpThemeColor, Layout } = getConfig();
|
||||||
@ -162,7 +176,7 @@ function onChange(label) {
|
|||||||
emitter.emit("tagViewsShowModel", label);
|
emitter.emit("tagViewsShowModel", label);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 侧边栏Logo
|
/** 侧边栏Logo */
|
||||||
function logoChange() {
|
function logoChange() {
|
||||||
unref(logoVal)
|
unref(logoVal)
|
||||||
? storageConfigureChange("showLogo", true)
|
? storageConfigureChange("showLogo", true)
|
||||||
@ -177,7 +191,7 @@ function setFalse(Doms): any {
|
|||||||
}
|
}
|
||||||
|
|
||||||
watch(instance, ({ layout }) => {
|
watch(instance, ({ layout }) => {
|
||||||
// 设置wangeditorV5主题色
|
/* 设置wangeditorV5主题色 */
|
||||||
body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
|
body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
|
||||||
switch (layout["layout"]) {
|
switch (layout["layout"]) {
|
||||||
case "vertical":
|
case "vertical":
|
||||||
@ -198,7 +212,7 @@ watch(instance, ({ layout }) => {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
// 主题色 激活选择项
|
/** 主题色 激活选择项 */
|
||||||
const getThemeColor = computed(() => {
|
const getThemeColor = computed(() => {
|
||||||
return current => {
|
return current => {
|
||||||
if (
|
if (
|
||||||
@ -217,7 +231,7 @@ const getThemeColor = computed(() => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
// 设置导航模式
|
/** 设置导航模式 */
|
||||||
function setLayoutModel(layout: string) {
|
function setLayoutModel(layout: string) {
|
||||||
layoutTheme.value.layout = layout;
|
layoutTheme.value.layout = layout;
|
||||||
window.document.body.setAttribute("layout", layout);
|
window.document.body.setAttribute("layout", layout);
|
||||||
@ -231,12 +245,8 @@ function setLayoutModel(layout: string) {
|
|||||||
useAppStoreHook().setLayout(layout);
|
useAppStoreHook().setLayout(layout);
|
||||||
}
|
}
|
||||||
|
|
||||||
// 存放夜间主题切换前的导航主题色
|
/** 设置导航主题色 */
|
||||||
let tempLayoutThemeColor;
|
|
||||||
|
|
||||||
// 设置导航主题色
|
|
||||||
function setLayoutThemeColor(theme: string) {
|
function setLayoutThemeColor(theme: string) {
|
||||||
tempLayoutThemeColor = instance.layout.theme;
|
|
||||||
layoutTheme.value.theme = theme;
|
layoutTheme.value.theme = theme;
|
||||||
toggleTheme({
|
toggleTheme({
|
||||||
scopeName: `layout-theme-${theme}`
|
scopeName: `layout-theme-${theme}`
|
||||||
@ -257,43 +267,60 @@ function setLayoutThemeColor(theme: string) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 设置ep主题色
|
/**
|
||||||
|
* @description 自动计算hover和active颜色
|
||||||
|
* @see {@link https://element-plus.org/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2}
|
||||||
|
*/
|
||||||
|
const shadeBgColor = (color: string): string => {
|
||||||
|
return new TinyColor(color).shade(10).toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 设置ep主题色 */
|
||||||
const setEpThemeColor = (color: string) => {
|
const setEpThemeColor = (color: string) => {
|
||||||
// @ts-expect-error
|
|
||||||
writeNewStyle(createNewStyle(color));
|
|
||||||
useEpThemeStoreHook().setEpThemeColor(color);
|
useEpThemeStoreHook().setEpThemeColor(color);
|
||||||
body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
|
body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
|
||||||
|
document.documentElement.style.setProperty("--el-color-primary", color);
|
||||||
|
for (let i = 1; i <= 9; i++) {
|
||||||
|
document.documentElement.style.setProperty(
|
||||||
|
`--el-color-primary-light-${i}`,
|
||||||
|
lighten(color, i / 10)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
for (let i = 1; i <= 2; i++) {
|
||||||
|
document.documentElement.style.setProperty(
|
||||||
|
`--el-color-primary-dark-${i}`,
|
||||||
|
darken(color, i / 10)
|
||||||
|
);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
let dataTheme = ref<boolean>(instance.layout.darkMode);
|
let dataTheme = ref<boolean>(instance.layout.darkMode);
|
||||||
|
|
||||||
// 日间、夜间主题切换
|
/** 日间、夜间主题切换 */
|
||||||
function dataThemeChange() {
|
function dataThemeChange() {
|
||||||
if (dataTheme.value) {
|
/* 如果当前是light夜间主题，默认切换到default主题 */
|
||||||
body.setAttribute("data-theme", "dark");
|
if (useEpThemeStoreHook().epTheme === "light" && dataTheme.value) {
|
||||||
setLayoutThemeColor("light");
|
setLayoutThemeColor("default");
|
||||||
} else {
|
} else {
|
||||||
body.setAttribute("data-theme", "");
|
setLayoutThemeColor(useEpThemeStoreHook().epTheme);
|
||||||
tempLayoutThemeColor && setLayoutThemeColor(tempLayoutThemeColor);
|
}
|
||||||
instance.layout = {
|
|
||||||
layout: useAppStoreHook().layout,
|
if (dataTheme.value) {
|
||||||
theme: instance.layout.theme,
|
instance.layout.darkMode = true;
|
||||||
darkMode: dataTheme.value,
|
document.documentElement.classList.add("dark");
|
||||||
sidebarStatus: instance.layout.sidebarStatus,
|
} else {
|
||||||
epThemeColor: instance.layout.epThemeColor
|
instance.layout.darkMode = false;
|
||||||
};
|
document.documentElement.classList.remove("dark");
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//初始化项目配置
|
/* 初始化项目配置 */
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
settings.greyVal &&
|
settings.greyVal &&
|
||||||
document.querySelector("html")?.setAttribute("class", "html-grey");
|
document.querySelector("html")?.setAttribute("class", "html-grey");
|
||||||
settings.weakVal &&
|
settings.weakVal &&
|
||||||
document.querySelector("html")?.setAttribute("class", "html-weakness");
|
document.querySelector("html")?.setAttribute("class", "html-weakness");
|
||||||
settings.tabsVal && tagsChange();
|
settings.tabsVal && tagsChange();
|
||||||
// @ts-expect-error
|
|
||||||
writeNewStyle(createNewStyle(epThemeColor.value));
|
|
||||||
dataThemeChange();
|
dataThemeChange();
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
@ -346,11 +373,12 @@ nextTick(() => {
|
|||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<el-divider v-show="!dataTheme">主题色</el-divider>
|
<el-divider>主题色</el-divider>
|
||||||
<ul class="theme-color" v-show="!dataTheme">
|
<ul class="theme-color">
|
||||||
<li
|
<li
|
||||||
v-for="(item, index) in themeColors"
|
v-for="(item, index) in themeColors"
|
||||||
:key="index"
|
:key="index"
|
||||||
|
v-show="showThemeColors(item.themeColor)"
|
||||||
:style="getThemeColorStyle(item.color)"
|
:style="getThemeColorStyle(item.color)"
|
||||||
@click="setLayoutThemeColor(item.themeColor)"
|
@click="setLayoutThemeColor(item.themeColor)"
|
||||||
>
|
>
|
||||||
@ -366,7 +394,7 @@ nextTick(() => {
|
|||||||
|
|
||||||
<el-divider>界面显示</el-divider>
|
<el-divider>界面显示</el-divider>
|
||||||
<ul class="setting">
|
<ul class="setting">
|
||||||
<li v-show="!dataTheme">
|
<li>
|
||||||
<span>灰色模式</span>
|
<span>灰色模式</span>
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="settings.greyVal"
|
v-model="settings.greyVal"
|
||||||
@ -377,7 +405,7 @@ nextTick(() => {
|
|||||||
@change="greyChange"
|
@change="greyChange"
|
||||||
/>
|
/>
|
||||||
</li>
|
</li>
|
||||||
<li v-show="!dataTheme">
|
<li>
|
||||||
<span>色弱模式</span>
|
<span>色弱模式</span>
|
||||||
<el-switch
|
<el-switch
|
||||||
v-model="settings.weakVal"
|
v-model="settings.weakVal"
|
||||||
|
|||||||
@ -98,7 +98,7 @@ const handleLink = (item: RouteLocationMatched): any => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-breadcrumb class="app-breadcrumb" separator="/">
|
<el-breadcrumb class="app-breadcrumb select-none" separator="/">
|
||||||
<transition-group appear name="breadcrumb">
|
<transition-group appear name="breadcrumb">
|
||||||
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
|
||||||
<span
|
<span
|
||||||
|
|||||||
@ -1,15 +1,14 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { useDark } from "@pureadmin/utils";
|
||||||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
|
||||||
export interface Props {
|
interface Props {
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
isActive: false
|
isActive: false
|
||||||
});
|
});
|
||||||
|
const { isDark } = useDark();
|
||||||
const fillColor = ref<string>("");
|
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: "toggleClick"): void;
|
(e: "toggleClick"): void;
|
||||||
@ -21,43 +20,28 @@ const toggleClick = () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div
|
<div class="hamburger-container">
|
||||||
:class="classes.container"
|
<el-tooltip
|
||||||
:title="props.isActive ? '点击折叠' : '点击展开'"
|
placement="right"
|
||||||
@click="toggleClick"
|
:effect="isDark ? 'dark' : 'light'"
|
||||||
@mouseenter="fillColor = useEpThemeStoreHook().epThemeColor"
|
:content="props.isActive ? '点击折叠' : '点击展开'"
|
||||||
@mouseleave="fillColor = ''"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
:fill="fillColor"
|
|
||||||
:class="['hamburger', props.isActive ? 'is-active' : '']"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="64"
|
|
||||||
height="64"
|
|
||||||
>
|
>
|
||||||
<path
|
<IconifyIconOffline
|
||||||
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
|
:icon="props.isActive ? 'menu-fold' : 'menu-unfold'"
|
||||||
|
class="cursor-pointer inline-block align-middle color-primary hover:color-primary !dark:hover:color-white w-16px h-16px ml-4 mb-1"
|
||||||
|
@click="toggleClick"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style module="classes" scoped>
|
<style lang="scss" scoped>
|
||||||
.container {
|
.hamburger-container {
|
||||||
padding: 0 15px;
|
position: absolute;
|
||||||
}
|
bottom: 0;
|
||||||
</style>
|
width: 210px;
|
||||||
|
height: 40px;
|
||||||
<style scoped>
|
line-height: 40px;
|
||||||
.hamburger {
|
box-shadow: 0 0 6px -2px var(--el-color-primary);
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-active {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -32,6 +32,7 @@ const {
|
|||||||
username,
|
username,
|
||||||
avatarsStyle,
|
avatarsStyle,
|
||||||
getDropdownItemStyle,
|
getDropdownItemStyle,
|
||||||
|
getDropdownItemClass,
|
||||||
changeWangeditorLanguage
|
changeWangeditorLanguage
|
||||||
} = useNav();
|
} = useNav();
|
||||||
|
|
||||||
@ -78,11 +79,11 @@ function translationEn() {
|
|||||||
<h4>{{ title }}</h4>
|
<h4>{{ title }}</h4>
|
||||||
</div>
|
</div>
|
||||||
<el-menu
|
<el-menu
|
||||||
ref="menu"
|
|
||||||
class="horizontal-header-menu"
|
|
||||||
mode="horizontal"
|
|
||||||
:default-active="route.path"
|
|
||||||
router
|
router
|
||||||
|
ref="menu"
|
||||||
|
mode="horizontal"
|
||||||
|
class="horizontal-header-menu"
|
||||||
|
:default-active="route.path"
|
||||||
@select="indexPath => menuSelect(indexPath, routers)"
|
@select="indexPath => menuSelect(indexPath, routers)"
|
||||||
>
|
>
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
@ -101,11 +102,14 @@ function translationEn() {
|
|||||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||||
<!-- 国际化 -->
|
<!-- 国际化 -->
|
||||||
<el-dropdown id="header-translation" trigger="click">
|
<el-dropdown id="header-translation" trigger="click">
|
||||||
<globalization />
|
<globalization
|
||||||
|
class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
|
||||||
|
/>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu class="translation">
|
<el-dropdown-menu class="translation">
|
||||||
<el-dropdown-item
|
<el-dropdown-item
|
||||||
:style="getDropdownItemStyle(locale, 'zh')"
|
:style="getDropdownItemStyle(locale, 'zh')"
|
||||||
|
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
|
||||||
@click="translationCh"
|
@click="translationCh"
|
||||||
>
|
>
|
||||||
<span class="check-zh" v-show="locale === 'zh'">
|
<span class="check-zh" v-show="locale === 'zh'">
|
||||||
@ -115,6 +119,7 @@ function translationEn() {
|
|||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
<el-dropdown-item
|
<el-dropdown-item
|
||||||
:style="getDropdownItemStyle(locale, 'en')"
|
:style="getDropdownItemStyle(locale, 'en')"
|
||||||
|
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
|
||||||
@click="translationEn"
|
@click="translationEn"
|
||||||
>
|
>
|
||||||
<span class="check-en" v-show="locale === 'en'">
|
<span class="check-en" v-show="locale === 'en'">
|
||||||
@ -127,9 +132,9 @@ function translationEn() {
|
|||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<!-- 退出登录 -->
|
<!-- 退出登录 -->
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link navbar-bg-hover">
|
||||||
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
|
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
|
||||||
<p v-if="username">{{ username }}</p>
|
<p v-if="username" class="dark:color-white">{{ username }}</p>
|
||||||
</span>
|
</span>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu class="logout">
|
<el-dropdown-menu class="logout">
|
||||||
@ -144,7 +149,7 @@ function translationEn() {
|
|||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<span
|
<span
|
||||||
class="el-icon-setting"
|
class="el-icon-setting navbar-bg-hover"
|
||||||
:title="t('buttons.hssystemSet')"
|
:title="t('buttons.hssystemSet')"
|
||||||
@click="onPanel"
|
@click="onPanel"
|
||||||
>
|
>
|
||||||
|
|||||||
@ -10,11 +10,17 @@ import screenfull from "../screenfull/index.vue";
|
|||||||
import { useRoute, useRouter } from "vue-router";
|
import { useRoute, useRouter } from "vue-router";
|
||||||
import { deviceDetection } from "@pureadmin/utils";
|
import { deviceDetection } from "@pureadmin/utils";
|
||||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||||
import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
|
|
||||||
import { getParentPaths, findRouteByPath } from "/@/router/utils";
|
import { getParentPaths, findRouteByPath } from "/@/router/utils";
|
||||||
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
import { usePermissionStoreHook } from "/@/store/modules/permission";
|
||||||
import globalization from "/@/assets/svg/globalization.svg?component";
|
import globalization from "/@/assets/svg/globalization.svg?component";
|
||||||
import { ref, watch, nextTick, onMounted, getCurrentInstance } from "vue";
|
import {
|
||||||
|
ref,
|
||||||
|
toRaw,
|
||||||
|
watch,
|
||||||
|
nextTick,
|
||||||
|
onMounted,
|
||||||
|
getCurrentInstance
|
||||||
|
} from "vue";
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { locale, t } = useI18n();
|
const { locale, t } = useI18n();
|
||||||
@ -27,14 +33,13 @@ const {
|
|||||||
logout,
|
logout,
|
||||||
onPanel,
|
onPanel,
|
||||||
changeTitle,
|
changeTitle,
|
||||||
toggleSideBar,
|
|
||||||
handleResize,
|
handleResize,
|
||||||
menuSelect,
|
menuSelect,
|
||||||
resolvePath,
|
resolvePath,
|
||||||
pureApp,
|
|
||||||
username,
|
username,
|
||||||
avatarsStyle,
|
avatarsStyle,
|
||||||
getDropdownItemStyle,
|
getDropdownItemStyle,
|
||||||
|
getDropdownItemClass,
|
||||||
changeWangeditorLanguage
|
changeWangeditorLanguage
|
||||||
} = useNav();
|
} = useNav();
|
||||||
|
|
||||||
@ -89,33 +94,12 @@ function translationEn() {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="horizontal-header">
|
<div class="horizontal-header">
|
||||||
<div
|
|
||||||
:class="classes.container"
|
|
||||||
:title="pureApp.sidebar.opened ? '点击折叠' : '点击展开'"
|
|
||||||
@click="toggleSideBar"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
:fill="useEpThemeStoreHook().fill"
|
|
||||||
:class="[
|
|
||||||
'hamburger',
|
|
||||||
pureApp.sidebar.opened ? 'is-active-hamburger' : ''
|
|
||||||
]"
|
|
||||||
viewBox="0 0 1024 1024"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="64"
|
|
||||||
height="64"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM142.4 642.1L298.7 519a8.84 8.84 0 0 0 0-13.9L142.4 381.9c-5.8-4.6-14.4-.5-14.4 6.9v246.3a8.9 8.9 0 0 0 14.4 7z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<el-menu
|
<el-menu
|
||||||
ref="menu"
|
|
||||||
class="horizontal-header-menu"
|
|
||||||
mode="horizontal"
|
|
||||||
:default-active="defaultActive"
|
|
||||||
router
|
router
|
||||||
|
ref="menu"
|
||||||
|
mode="horizontal"
|
||||||
|
class="horizontal-header-menu"
|
||||||
|
:default-active="defaultActive"
|
||||||
@select="indexPath => menuSelect(indexPath, routers)"
|
@select="indexPath => menuSelect(indexPath, routers)"
|
||||||
>
|
>
|
||||||
<el-menu-item
|
<el-menu-item
|
||||||
@ -124,10 +108,15 @@ function translationEn() {
|
|||||||
:index="resolvePath(route) || route.redirect"
|
:index="resolvePath(route) || route.redirect"
|
||||||
>
|
>
|
||||||
<template #title>
|
<template #title>
|
||||||
<div v-show="route.meta.icon" :class="['el-icon', route.meta.icon]">
|
<div
|
||||||
<component :is="useRenderIcon(route.meta && route.meta.icon)" />
|
v-if="toRaw(route.meta.icon)"
|
||||||
|
:class="['sub-menu-icon', route.meta.icon]"
|
||||||
|
>
|
||||||
|
<component
|
||||||
|
:is="useRenderIcon(route.meta && toRaw(route.meta.icon))"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span>{{ transformI18n(route.meta.title) }}</span>
|
<span class="select-none">{{ transformI18n(route.meta.title) }}</span>
|
||||||
<FontIcon
|
<FontIcon
|
||||||
v-if="route.meta.extraIcon"
|
v-if="route.meta.extraIcon"
|
||||||
width="30px"
|
width="30px"
|
||||||
@ -148,11 +137,14 @@ function translationEn() {
|
|||||||
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
<screenfull id="header-screenfull" v-show="!deviceDetection()" />
|
||||||
<!-- 国际化 -->
|
<!-- 国际化 -->
|
||||||
<el-dropdown id="header-translation" trigger="click">
|
<el-dropdown id="header-translation" trigger="click">
|
||||||
<globalization />
|
<globalization
|
||||||
|
class="navbar-bg-hover w-40px h-48px p-11px cursor-pointer outline-none"
|
||||||
|
/>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu class="translation">
|
<el-dropdown-menu class="translation">
|
||||||
<el-dropdown-item
|
<el-dropdown-item
|
||||||
:style="getDropdownItemStyle(locale, 'zh')"
|
:style="getDropdownItemStyle(locale, 'zh')"
|
||||||
|
:class="['!dark:color-white', getDropdownItemClass(locale, 'zh')]"
|
||||||
@click="translationCh"
|
@click="translationCh"
|
||||||
>
|
>
|
||||||
<span class="check-zh" v-show="locale === 'zh'">
|
<span class="check-zh" v-show="locale === 'zh'">
|
||||||
@ -162,6 +154,7 @@ function translationEn() {
|
|||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
<el-dropdown-item
|
<el-dropdown-item
|
||||||
:style="getDropdownItemStyle(locale, 'en')"
|
:style="getDropdownItemStyle(locale, 'en')"
|
||||||
|
:class="['!dark:color-white', getDropdownItemClass(locale, 'en')]"
|
||||||
@click="translationEn"
|
@click="translationEn"
|
||||||
>
|
>
|
||||||
<span class="check-en" v-show="locale === 'en'">
|
<span class="check-en" v-show="locale === 'en'">
|
||||||
@ -174,9 +167,9 @@ function translationEn() {
|
|||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<!-- 退出登录 -->
|
<!-- 退出登录 -->
|
||||||
<el-dropdown trigger="click">
|
<el-dropdown trigger="click">
|
||||||
<span class="el-dropdown-link">
|
<span class="el-dropdown-link navbar-bg-hover">
|
||||||
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
|
<img v-if="avatars" :src="avatars" :style="avatarsStyle" />
|
||||||
<p v-if="username">{{ username }}</p>
|
<p v-if="username" class="dark:color-white">{{ username }}</p>
|
||||||
</span>
|
</span>
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu class="logout">
|
<el-dropdown-menu class="logout">
|
||||||
@ -191,7 +184,7 @@ function translationEn() {
|
|||||||
</template>
|
</template>
|
||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
<span
|
<span
|
||||||
class="el-icon-setting"
|
class="el-icon-setting navbar-bg-hover"
|
||||||
:title="t('buttons.hssystemSet')"
|
:title="t('buttons.hssystemSet')"
|
||||||
@click="onPanel"
|
@click="onPanel"
|
||||||
>
|
>
|
||||||
@ -201,26 +194,7 @@ function translationEn() {
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style module="classes" scoped>
|
|
||||||
.container {
|
|
||||||
padding: 0 15px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.hamburger {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-active-hamburger {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.translation {
|
.translation {
|
||||||
::v-deep(.el-dropdown-menu__item) {
|
::v-deep(.el-dropdown-menu__item) {
|
||||||
padding: 5px 40px;
|
padding: 5px 40px;
|
||||||
|
|||||||
@ -5,7 +5,7 @@ import { childrenType } from "../../types";
|
|||||||
import { transformI18n } from "/@/plugins/i18n";
|
import { transformI18n } from "/@/plugins/i18n";
|
||||||
import { useAppStoreHook } from "/@/store/modules/app";
|
import { useAppStoreHook } from "/@/store/modules/app";
|
||||||
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
|
||||||
import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
|
import { ref, toRaw, PropType, nextTick, computed, CSSProperties } from "vue";
|
||||||
|
|
||||||
const { pureApp } = useNav();
|
const { pureApp } = useNav();
|
||||||
const menuMode = ["vertical", "mix"].includes(pureApp.layout);
|
const menuMode = ["vertical", "mix"].includes(pureApp.layout);
|
||||||
@ -54,9 +54,9 @@ const getDivStyle = computed((): CSSProperties => {
|
|||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const getMenuTextStyle = computed((): CSSProperties => {
|
const getMenuTextStyle = computed(() => {
|
||||||
return {
|
return {
|
||||||
width: pureApp.sidebar.opened ? "125px" : "",
|
width: pureApp.sidebar.opened ? "210px" : "",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
textOverflow: "ellipsis",
|
textOverflow: "ellipsis",
|
||||||
outline: "none"
|
outline: "none"
|
||||||
@ -65,14 +65,14 @@ const getMenuTextStyle = computed((): CSSProperties => {
|
|||||||
|
|
||||||
const getSubTextStyle = computed((): CSSProperties => {
|
const getSubTextStyle = computed((): CSSProperties => {
|
||||||
return {
|
return {
|
||||||
width: pureApp.sidebar.opened ? "125px" : "",
|
width: pureApp.sidebar.opened ? "210px" : "",
|
||||||
display: "inline-block",
|
display: "inline-block",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
textOverflow: "ellipsis"
|
textOverflow: "ellipsis"
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
const getSpanStyle = computed((): CSSProperties => {
|
const getSpanStyle = computed(() => {
|
||||||
return {
|
return {
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
textOverflow: "ellipsis"
|
textOverflow: "ellipsis"
|
||||||
@ -148,12 +148,12 @@ function resolvePath(routePath) {
|
|||||||
:class="{ 'submenu-title-noDropdown': !isNest }"
|
:class="{ 'submenu-title-noDropdown': !isNest }"
|
||||||
:style="getNoDropdownStyle"
|
:style="getNoDropdownStyle"
|
||||||
>
|
>
|
||||||
<div class="sub-menu-icon" v-show="props.item.meta.icon">
|
<div class="sub-menu-icon" v-if="toRaw(props.item.meta.icon)">
|
||||||
<component
|
<component
|
||||||
:is="
|
:is="
|
||||||
useRenderIcon(
|
useRenderIcon(
|
||||||
onlyOneChild.meta.icon ||
|
toRaw(onlyOneChild.meta.icon) ||
|
||||||
(props.item.meta && props.item.meta.icon)
|
(props.item.meta && toRaw(props.item.meta.icon))
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
@ -205,19 +205,14 @@ function resolvePath(routePath) {
|
|||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<el-sub-menu
|
<el-sub-menu v-else ref="subMenu" :index="resolvePath(props.item.path)">
|
||||||
v-else
|
|
||||||
ref="subMenu"
|
|
||||||
:index="resolvePath(props.item.path)"
|
|
||||||
popper-append-to-body
|
|
||||||
>
|
|
||||||
<template #title>
|
<template #title>
|
||||||
<div v-show="props.item.meta.icon" class="sub-menu-icon">
|
<div v-if="toRaw(props.item.meta.icon)" class="sub-menu-icon">
|
||||||
<component
|
<component
|
||||||
:is="useRenderIcon(props.item.meta && props.item.meta.icon)"
|
:is="useRenderIcon(props.item.meta && toRaw(props.item.meta.icon))"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<span v-if="!menuMode">{{ transformI18n(props.item.meta.title) }}</span>
|
<span v-if="!menuMode"> {{ transformI18n(props.item.meta.title) }}</span>
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
v-else
|
v-else
|
||||||
placement="top"
|
placement="top"
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import Logo from "./logo.vue";
|
import Logo from "./logo.vue";
|
||||||
|
import Hamburger from "./hamBurger.vue";
|
||||||
import { emitter } from "/@/utils/mitt";
|
import { emitter } from "/@/utils/mitt";
|
||||||
import { useNav } from "../../hooks/nav";
|
import { useNav } from "../../hooks/nav";
|
||||||
import SidebarItem from "./sidebarItem.vue";
|
import SidebarItem from "./sidebarItem.vue";
|
||||||
@ -16,7 +17,7 @@ const showLogo = ref(
|
|||||||
storageLocal.getItem<StorageConfigs>("responsive-configure")?.showLogo ?? true
|
storageLocal.getItem<StorageConfigs>("responsive-configure")?.showLogo ?? true
|
||||||
);
|
);
|
||||||
|
|
||||||
const { pureApp, isCollapse, menuSelect } = useNav();
|
const { pureApp, isCollapse, menuSelect, toggleSideBar } = useNav();
|
||||||
|
|
||||||
let subMenuData = ref([]);
|
let subMenuData = ref([]);
|
||||||
|
|
||||||
@ -62,13 +63,13 @@ watch(
|
|||||||
<Logo v-if="showLogo" :collapse="isCollapse" />
|
<Logo v-if="showLogo" :collapse="isCollapse" />
|
||||||
<el-scrollbar wrap-class="scrollbar-wrapper">
|
<el-scrollbar wrap-class="scrollbar-wrapper">
|
||||||
<el-menu
|
<el-menu
|
||||||
:default-active="route.path"
|
|
||||||
:collapse="isCollapse"
|
|
||||||
unique-opened
|
|
||||||
router
|
router
|
||||||
:collapse-transition="false"
|
unique-opened
|
||||||
mode="vertical"
|
mode="vertical"
|
||||||
class="outer-most"
|
class="outer-most"
|
||||||
|
:collapse="isCollapse"
|
||||||
|
:default-active="route.path"
|
||||||
|
:collapse-transition="false"
|
||||||
@select="indexPath => menuSelect(indexPath, routers)"
|
@select="indexPath => menuSelect(indexPath, routers)"
|
||||||
>
|
>
|
||||||
<sidebar-item
|
<sidebar-item
|
||||||
@ -80,5 +81,9 @@ watch(
|
|||||||
/>
|
/>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
|
<Hamburger
|
||||||
|
:is-active="pureApp.sidebar.opened"
|
||||||
|
@toggleClick="toggleSideBar"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -43,7 +43,7 @@
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
color: var(--el-text-color-regular);
|
color: var(--el-text-color-primary);
|
||||||
background: #fff;
|
background: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
box-shadow: 0 0 1px #888;
|
box-shadow: 0 0 1px #888;
|
||||||
@ -92,7 +92,7 @@
|
|||||||
|
|
||||||
a {
|
a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #666;
|
color: var(--el-text-color-primary);
|
||||||
padding: 0 4px;
|
padding: 0 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -144,7 +144,7 @@
|
|||||||
list-style-type: none;
|
list-style-type: none;
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: #000000d9;
|
color: var(--el-text-color-primary);
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -160,7 +160,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: var(--el-color-primary-light-9);
|
// background: var(--el-color-primary-light-9);
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -207,7 +207,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.scroll-item.is-active {
|
.scroll-item.is-active {
|
||||||
background-color: var(--el-color-primary-light-9);
|
// background-color: var(--el-color-primary-light-9);
|
||||||
position: relative;
|
position: relative;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|
||||||
@ -220,7 +220,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary) !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -228,7 +228,7 @@
|
|||||||
.arrow-right {
|
.arrow-right {
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 38px;
|
height: 38px;
|
||||||
color: #00000073;
|
color: var(--el-text-color-primary);
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
|
|||||||
@ -665,7 +665,10 @@ const getContextMenuStyle = computed((): CSSProperties => {
|
|||||||
@mouseleave.prevent="onMouseleave(index)"
|
@mouseleave.prevent="onMouseleave(index)"
|
||||||
@click="tagOnClick(item)"
|
@click="tagOnClick(item)"
|
||||||
>
|
>
|
||||||
<router-link :to="item.path">
|
<router-link
|
||||||
|
:to="item.path"
|
||||||
|
class="!dark:color-text_color_primary !dark:hover:color-primary"
|
||||||
|
>
|
||||||
{{ transformI18n(item.meta.title) }}
|
{{ transformI18n(item.meta.title) }}
|
||||||
</router-link>
|
</router-link>
|
||||||
<span
|
<span
|
||||||
@ -729,7 +732,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
|
|||||||
placement="bottom-end"
|
placement="bottom-end"
|
||||||
@command="handleCommand"
|
@command="handleCommand"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline icon="arrow-down" />
|
<IconifyIconOffline icon="arrow-down" class="dark:color-white" />
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item
|
<el-dropdown-item
|
||||||
|
|||||||
@ -1,13 +1,3 @@
|
|||||||
<template>
|
|
||||||
<div
|
|
||||||
class="frame"
|
|
||||||
v-loading="loading"
|
|
||||||
:element-loading-text="t('status.hsLoad')"
|
|
||||||
>
|
|
||||||
<iframe :src="frameSrc" class="frame-iframe" ref="frameRef" />
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { useRoute } from "vue-router";
|
import { useRoute } from "vue-router";
|
||||||
@ -54,6 +44,16 @@ onMounted(() => {
|
|||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="frame"
|
||||||
|
v-loading="loading"
|
||||||
|
:element-loading-text="t('status.hsLoad')"
|
||||||
|
>
|
||||||
|
<iframe :src="frameSrc" class="frame-iframe" ref="frameRef" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.frame {
|
.frame {
|
||||||
height: calc(100vh - 88px);
|
height: calc(100vh - 88px);
|
||||||
|
|||||||
@ -30,6 +30,11 @@ export function useNav() {
|
|||||||
};
|
};
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
const getDropdownItemClass = computed(() => {
|
||||||
|
return (locale, t) => {
|
||||||
|
return locale === t ? "" : "!dark:hover:color-primary";
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
const avatarsStyle = computed(() => {
|
const avatarsStyle = computed(() => {
|
||||||
return username ? { marginRight: "10px" } : "";
|
return username ? { marginRight: "10px" } : "";
|
||||||
@ -137,6 +142,7 @@ export function useNav() {
|
|||||||
username,
|
username,
|
||||||
avatarsStyle,
|
avatarsStyle,
|
||||||
getDropdownItemStyle,
|
getDropdownItemStyle,
|
||||||
|
getDropdownItemClass,
|
||||||
changeWangeditorLanguage
|
changeWangeditorLanguage
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,8 +11,8 @@ import { setType } from "./types";
|
|||||||
import { useI18n } from "vue-i18n";
|
import { useI18n } from "vue-i18n";
|
||||||
import { routerArrays } from "./types";
|
import { routerArrays } from "./types";
|
||||||
import { emitter } from "/@/utils/mitt";
|
import { emitter } from "/@/utils/mitt";
|
||||||
import { deviceDetection } from "@pureadmin/utils";
|
|
||||||
import { useAppStoreHook } from "/@/store/modules/app";
|
import { useAppStoreHook } from "/@/store/modules/app";
|
||||||
|
import { deviceDetection, useDark } from "@pureadmin/utils";
|
||||||
import { useMultiTagsStore } from "/@/store/modules/multiTags";
|
import { useMultiTagsStore } from "/@/store/modules/multiTags";
|
||||||
import { useSettingStoreHook } from "/@/store/modules/settings";
|
import { useSettingStoreHook } from "/@/store/modules/settings";
|
||||||
|
|
||||||
@ -27,6 +27,7 @@ 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";
|
||||||
|
|
||||||
|
const { isDark } = useDark();
|
||||||
const isMobile = deviceDetection();
|
const isMobile = deviceDetection();
|
||||||
const pureSetting = useSettingStoreHook();
|
const pureSetting = useSettingStoreHook();
|
||||||
const instance = getCurrentInstance().appContext.app.config.globalProperties;
|
const instance = getCurrentInstance().appContext.app.config.globalProperties;
|
||||||
@ -165,7 +166,9 @@ const layoutHeader = defineComponent({
|
|||||||
class: { "fixed-header": set.fixedHeader },
|
class: { "fixed-header": set.fixedHeader },
|
||||||
style: [
|
style: [
|
||||||
set.hideTabs && layout.value.includes("horizontal")
|
set.hideTabs && layout.value.includes("horizontal")
|
||||||
? "box-shadow: 0 1px 4px rgb(0 21 41 / 8%);"
|
? isDark.value
|
||||||
|
? "box-shadow: 0 1px 4px #0d0d0d"
|
||||||
|
: "box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08)"
|
||||||
: ""
|
: ""
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
@ -185,10 +188,14 @@ const layoutHeader = defineComponent({
|
|||||||
default: () => [
|
default: () => [
|
||||||
h(
|
h(
|
||||||
"span",
|
"span",
|
||||||
{ onClick: onFullScreen },
|
{
|
||||||
|
onClick: onFullScreen
|
||||||
|
},
|
||||||
{
|
{
|
||||||
default: () => [
|
default: () => [
|
||||||
!pureSetting.hiddenSideBar ? h(fullScreen) : h(exitScreen)
|
!pureSetting.hiddenSideBar
|
||||||
|
? h(fullScreen, { class: "dark:color-white" })
|
||||||
|
: h(exitScreen, { class: "dark:color-white" })
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,84 +0,0 @@
|
|||||||
/* 动态改变element-plus主题色 */
|
|
||||||
import rgbHex from "rgb-hex";
|
|
||||||
import epCss from "./element.scss";
|
|
||||||
import { TinyColor } from "@ctrl/tinycolor";
|
|
||||||
import { convert } from "css-color-function";
|
|
||||||
|
|
||||||
// 色值表
|
|
||||||
const formula = {
|
|
||||||
"shade-1": "color(primary shade(10%))",
|
|
||||||
"light-1": "color(primary tint(10%))",
|
|
||||||
"light-2": "color(primary tint(20%))",
|
|
||||||
"light-3": "color(primary tint(30%))",
|
|
||||||
"light-4": "color(primary tint(40%))",
|
|
||||||
"light-5": "color(primary tint(50%))",
|
|
||||||
"light-6": "color(primary tint(60%))",
|
|
||||||
"light-7": "color(primary tint(70%))",
|
|
||||||
"light-8": "color(primary tint(80%))",
|
|
||||||
"light-9": "color(primary tint(90%))"
|
|
||||||
};
|
|
||||||
|
|
||||||
// 把生成的样式表写入到style中
|
|
||||||
export const writeNewStyle = (newStyle: string): void => {
|
|
||||||
const style = window.document.createElement("style");
|
|
||||||
style.innerText = newStyle;
|
|
||||||
window.document.head.appendChild(style);
|
|
||||||
};
|
|
||||||
|
|
||||||
// 根据主题色，生成最新的样式表
|
|
||||||
export const createNewStyle = (
|
|
||||||
primaryStyle: Record<string, any>
|
|
||||||
): Record<string, any> => {
|
|
||||||
// 根据主色生成色值表
|
|
||||||
const colors = createColors(primaryStyle);
|
|
||||||
// 在当前ep的默认样式表中标记需要替换的色值
|
|
||||||
let cssText = getStyleTemplate(epCss);
|
|
||||||
// 遍历生成的色值表，在 默认样式表 进行全局替换
|
|
||||||
Object.keys(colors).forEach(key => {
|
|
||||||
cssText = cssText.replace(
|
|
||||||
new RegExp("(:|\\s+)" + key, "g"),
|
|
||||||
"$1" + colors[key]
|
|
||||||
);
|
|
||||||
});
|
|
||||||
return cssText;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const createColors = (
|
|
||||||
primary: Record<string, any>
|
|
||||||
): Record<string, any> => {
|
|
||||||
if (!primary) return;
|
|
||||||
const colors = {
|
|
||||||
primary
|
|
||||||
};
|
|
||||||
Object.keys(formula).forEach(key => {
|
|
||||||
const value = formula[key].replace(/primary/, primary);
|
|
||||||
colors[key] = "#" + rgbHex(convert(value));
|
|
||||||
});
|
|
||||||
return colors;
|
|
||||||
};
|
|
||||||
|
|
||||||
const getStyleTemplate = (data: Record<string, any>): Record<string, any> => {
|
|
||||||
const colorMap = {
|
|
||||||
"#3a8ee6": "shade-1",
|
|
||||||
"#409eff": "primary",
|
|
||||||
"#53a8ff": "light-1",
|
|
||||||
"#66b1ff": "light-2",
|
|
||||||
"#79bbff": "light-3",
|
|
||||||
"#8cc5ff": "light-4",
|
|
||||||
"#a0cfff": "light-5",
|
|
||||||
"#b3d8ff": "light-6",
|
|
||||||
"#c6e2ff": "light-7",
|
|
||||||
"#d9ecff": "light-8",
|
|
||||||
"#ecf5ff": "light-9"
|
|
||||||
};
|
|
||||||
Object.keys(colorMap).forEach(key => {
|
|
||||||
const value = colorMap[key];
|
|
||||||
data = data.replace(new RegExp(key, "ig"), value);
|
|
||||||
});
|
|
||||||
return data;
|
|
||||||
};
|
|
||||||
|
|
||||||
// 自动计算hover和active颜色（https://element-plus.org/zh-CN/component/button.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E9%A2%9C%E8%89%B2）
|
|
||||||
export const shadeBgColor = (color: string): string => {
|
|
||||||
return new TinyColor(color).shade(10).toString();
|
|
||||||
};
|
|
||||||
@ -1,2 +0,0 @@
|
|||||||
/* 通过scss模块本地导入element-plus的全局样式文件，解决vite2.7.13版本后使用 import epCss from "element-plus/dist/index.css"，打包后加载不到样式的问题 */
|
|
||||||
@import "element-plus/dist/index.css";
|
|
||||||
@ -1,7 +1,17 @@
|
|||||||
|
/**
|
||||||
|
* @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
|
||||||
|
*/
|
||||||
|
|
||||||
import { EpThemeColor } from "../../../public/serverConfig.json";
|
import { EpThemeColor } from "../../../public/serverConfig.json";
|
||||||
|
|
||||||
// 将vxe默认主题色和ep默认主题色保持一致
|
type MultipleScopeVarsItem = {
|
||||||
|
scopeName: string;
|
||||||
|
varsContent: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
/** 将vxe默认主题色和ep默认主题色保持一致 */
|
||||||
const vxeColor = EpThemeColor;
|
const vxeColor = EpThemeColor;
|
||||||
|
/** 预设主题色 */
|
||||||
const themeColors = {
|
const themeColors = {
|
||||||
default: {
|
default: {
|
||||||
vxeColor,
|
vxeColor,
|
||||||
@ -122,12 +132,10 @@ const themeColors = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
type MultipleScopeVarsItem = {
|
/**
|
||||||
scopeName: string;
|
* @description 将预设主题色处理成主题插件所需格式
|
||||||
varsContent: string;
|
*/
|
||||||
};
|
export const genScssMultipleScopeVars = (): MultipleScopeVarsItem[] => {
|
||||||
|
|
||||||
export function genScssMultipleScopeVars(): MultipleScopeVarsItem[] {
|
|
||||||
const result = [] as MultipleScopeVarsItem[];
|
const result = [] as MultipleScopeVarsItem[];
|
||||||
Object.keys(themeColors).forEach(key => {
|
Object.keys(themeColors).forEach(key => {
|
||||||
result.push({
|
result.push({
|
||||||
@ -148,4 +156,4 @@ export function genScssMultipleScopeVars(): MultipleScopeVarsItem[] {
|
|||||||
} as MultipleScopeVarsItem);
|
} as MultipleScopeVarsItem);
|
||||||
});
|
});
|
||||||
return result;
|
return result;
|
||||||
}
|
};
|
||||||
|
|||||||
@ -23,6 +23,7 @@ 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/index.css";
|
||||||
import "@pureadmin/components/dist/theme.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";
|
||||||
|
|||||||
@ -48,14 +48,11 @@ export const useAppStore = defineStore({
|
|||||||
}
|
}
|
||||||
storageLocal.setItem("responsive-layout", layout);
|
storageLocal.setItem("responsive-layout", layout);
|
||||||
},
|
},
|
||||||
TOGGLE_DEVICE(device: string) {
|
|
||||||
this.device = device;
|
|
||||||
},
|
|
||||||
async toggleSideBar(opened?: boolean, resize?: string) {
|
async toggleSideBar(opened?: boolean, resize?: string) {
|
||||||
await this.TOGGLE_SIDEBAR(opened, resize);
|
await this.TOGGLE_SIDEBAR(opened, resize);
|
||||||
},
|
},
|
||||||
toggleDevice(device) {
|
toggleDevice(device: string) {
|
||||||
this.TOGGLE_DEVICE(device);
|
this.device = device;
|
||||||
},
|
},
|
||||||
setLayout(layout) {
|
setLayout(layout) {
|
||||||
this.layout = layout;
|
this.layout = layout;
|
||||||
|
|||||||
@ -1,29 +1,188 @@
|
|||||||
/* 暗黑模式 */
|
@import "element-plus/theme-chalk/src/dark/css-vars.scss";
|
||||||
[data-theme="dark"] {
|
|
||||||
filter: invert(0.9) hue-rotate(180deg);
|
|
||||||
|
|
||||||
#mse,
|
/* 暗黑模式适配 */
|
||||||
img,
|
html.dark {
|
||||||
.icon-svg,
|
/* 自定义深色背景颜色 */
|
||||||
.login-container {
|
// --el-bg-color: #020409;
|
||||||
filter: invert(1) hue-rotate(180deg);
|
$border-style: #303030;
|
||||||
|
$color-white: #fff;
|
||||||
|
|
||||||
|
.navbar,
|
||||||
|
.tags-view,
|
||||||
|
.contextmenu,
|
||||||
|
.sidebar-container,
|
||||||
|
.horizontal-header,
|
||||||
|
.sidebar-logo-container,
|
||||||
|
.horizontal-header .el-sub-menu__title,
|
||||||
|
.horizontal-header .submenu-title-noDropdown {
|
||||||
|
background: var(--el-bg-color) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
// element plus
|
.app-main {
|
||||||
.el-radio-button__original-radio:checked + .el-radio-button__inner,
|
background: #020409 !important;
|
||||||
.el-image-viewer__close,
|
|
||||||
.el-image-viewer__actions__inner,
|
|
||||||
.el-image-viewer__next,
|
|
||||||
.el-image-viewer__prev {
|
|
||||||
color: #000 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-overlay {
|
.frame,
|
||||||
background-color: rgb(0 0 0 / 5%) !important;
|
.logic-flow-view,
|
||||||
|
.wangeditor {
|
||||||
|
filter: invert(0.9) hue-rotate(180deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-drawer {
|
.ant-tabs {
|
||||||
box-shadow: 0 8px 10px -5px rgb(0 0 0 / 1%), 0 16px 24px 2px rgb(0 0 0 / 2%),
|
background: var(--el-bg-color);
|
||||||
0 6px 30px 5px rgb(0 0 0 / 1%);
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 标签页 */
|
||||||
|
.tags-view {
|
||||||
|
.arrow-left,
|
||||||
|
.arrow-right {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-right {
|
||||||
|
border-left: 1px solid $border-style;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow-left,
|
||||||
|
.arrow-right,
|
||||||
|
.right-button li {
|
||||||
|
border-right: 1px solid $border-style;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* vxe-table */
|
||||||
|
.vxe-table--header-wrapper,
|
||||||
|
.vxe-table--body-wrapper {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
background: var(--el-bg-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-table--render-default.border--full .vxe-header--column,
|
||||||
|
.vxe-table--render-default.border--full .vxe-body--column,
|
||||||
|
.vxe-table--render-default.border--full .vxe-footer--column {
|
||||||
|
background-image: linear-gradient(
|
||||||
|
var(--el-border-color-lighter),
|
||||||
|
var(--el-border-color-lighter)
|
||||||
|
),
|
||||||
|
linear-gradient(
|
||||||
|
var(--el-border-color-lighter),
|
||||||
|
var(--el-border-color-lighter)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表头 */
|
||||||
|
.vxe-table--header-wrapper {
|
||||||
|
background: #262727 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-table--render-wrapper,
|
||||||
|
.vxe-table--main-wrapper {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-pager.is--perfect,
|
||||||
|
.vxe-table--render-default .vxe-table--border-line {
|
||||||
|
border: 1px solid var(--el-border-color-lighter);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-table--header-border-line {
|
||||||
|
border-bottom: 1px solid var(--el-border-color-lighter) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-body--row.row--hover,
|
||||||
|
.vxe-pager {
|
||||||
|
background-color: #262727;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-input--inner,
|
||||||
|
.vxe-pager .vxe-pager--jump-prev,
|
||||||
|
.vxe-pager .vxe-pager--prev-btn,
|
||||||
|
.vxe-pager .vxe-pager--next-btn,
|
||||||
|
.vxe-pager .vxe-pager--jump-next,
|
||||||
|
.vxe-pager .vxe-pager--num-btn,
|
||||||
|
.vxe-pager .vxe-pager--jump .vxe-pager--goto {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
// outline: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-select-option--wrapper {
|
||||||
|
background: var(--el-bg-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-select-option:not(.is--disabled).is--hover {
|
||||||
|
background: var(--el-color-primary-light-6) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-modal--wrapper.type--modal .vxe-modal--box,
|
||||||
|
.vxe-modal--wrapper.type--alert .vxe-modal--box,
|
||||||
|
.vxe-modal--wrapper.type--confirm .vxe-modal--box,
|
||||||
|
.vxe-form {
|
||||||
|
background: var(--el-bg-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-modal--box,
|
||||||
|
.vxe-modal--header {
|
||||||
|
border: none;
|
||||||
|
background: var(--el-bg-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-modal--title,
|
||||||
|
.vxe-button--content {
|
||||||
|
color: var(--el-text-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.vxe-button.type--button.size--medium:hover {
|
||||||
|
background: var(--el-color-primary) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 项目配置面板 */
|
||||||
|
.right-panel-items {
|
||||||
|
.el-divider__text {
|
||||||
|
--el-bg-color: var(--el-bg-color);
|
||||||
|
}
|
||||||
|
.el-divider--horizontal {
|
||||||
|
border-top: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 表单设计器 */
|
||||||
|
.design-form {
|
||||||
|
.el-main.config-content,
|
||||||
|
.el-header,
|
||||||
|
.el-main.widget-empty,
|
||||||
|
.widget-form-list,
|
||||||
|
.el-aside,
|
||||||
|
.widget-view {
|
||||||
|
background: var(--el-bg-color) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-edit-widget-label a {
|
||||||
|
background: var(--el-color-primary);
|
||||||
|
border: none;
|
||||||
|
border-radius: 5px;
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-aside {
|
||||||
|
color: $color-white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* element-plus */
|
||||||
|
.el-table__cell {
|
||||||
|
background: var(--el-bg-color);
|
||||||
|
}
|
||||||
|
.el-card {
|
||||||
|
--el-card-bg-color: var(--el-bg-color);
|
||||||
|
// border: none !important;
|
||||||
|
}
|
||||||
|
.el-backtop {
|
||||||
|
--el-backtop-bg-color: var(--el-color-primary-light-9);
|
||||||
|
--el-backtop-hover-bg-color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
.el-dropdown-menu__item:not(.is-disabled):hover {
|
||||||
|
background: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -46,13 +46,6 @@
|
|||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 动态改变cssvar 用于主题切换 https://github.com/element-plus/element-plus/issues/4856#issuecomment-1000174357 */
|
|
||||||
.el-button--primary,
|
|
||||||
.el-button--primary.is-plain {
|
|
||||||
--el-button-active-bg-color: var(--el-color-primary) !important;
|
|
||||||
--el-button-active-border-color: var(--el-color-primary) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* nprogress适配ep的primary */
|
/* nprogress适配ep的primary */
|
||||||
#nprogress {
|
#nprogress {
|
||||||
& .bar {
|
& .bar {
|
||||||
|
|||||||
@ -4,6 +4,10 @@
|
|||||||
@import "./sidebar.scss";
|
@import "./sidebar.scss";
|
||||||
@import "./dark.scss";
|
@import "./dark.scss";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--pure-transition-duration: 0.016s;
|
||||||
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|||||||
@ -6,6 +6,12 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin relative {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
@mixin scrollBar {
|
@mixin scrollBar {
|
||||||
&::-webkit-scrollbar-track-piece {
|
&::-webkit-scrollbar-track-piece {
|
||||||
background: #d3dce6;
|
background: #d3dce6;
|
||||||
@ -20,9 +26,3 @@
|
|||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@mixin relative {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -16,17 +16,18 @@
|
|||||||
|
|
||||||
.sub-menu-icon {
|
.sub-menu-icon {
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
margin-right: 5px;
|
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
margin-right: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
transition: margin-left 0.1s;
|
/* main-content属性动画 */
|
||||||
|
transition: margin-left var(--pure-transition-duration);
|
||||||
margin-left: $sideBarWidth;
|
margin-left: $sideBarWidth;
|
||||||
position: relative;
|
position: relative;
|
||||||
background: #f0f2f5;
|
background: #f0f2f5;
|
||||||
@ -43,7 +44,8 @@
|
|||||||
right: 0;
|
right: 0;
|
||||||
z-index: 998;
|
z-index: 998;
|
||||||
width: calc(100% - 210px);
|
width: calc(100% - 210px);
|
||||||
transition: width 0.1s;
|
/* fixed-header属性左上角动画 */
|
||||||
|
transition: width var(--pure-transition-duration);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-hidden {
|
.main-hidden {
|
||||||
@ -63,7 +65,8 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: width 0.1s;
|
/* 展开动画 */
|
||||||
|
transition: width var(--pure-transition-duration);
|
||||||
width: $sideBarWidth !important;
|
width: $sideBarWidth !important;
|
||||||
background: $menuBg;
|
background: $menuBg;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -80,22 +83,18 @@
|
|||||||
overflow-x: hidden !important;
|
overflow-x: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.horizontal-collapse-transition {
|
|
||||||
transition: 0s width ease-in-out, 0s padding-left ease-in-out,
|
|
||||||
0s padding-right ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-scrollbar__bar.is-vertical {
|
.el-scrollbar__bar.is-vertical {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
height: 100%;
|
height: calc(100% - 44px);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.has-logo {
|
&.has-logo {
|
||||||
.el-scrollbar {
|
.el-scrollbar {
|
||||||
height: calc(100% - 50px);
|
/* logo: 48px、Hamburger: 40px、Hamburger-shadow: 4px */
|
||||||
|
height: calc(100% - 92px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -189,7 +188,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
padding-left: 10px;
|
padding-left: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.125s ease;
|
||||||
|
|
||||||
i {
|
i {
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
@ -219,54 +218,46 @@
|
|||||||
color: $subMenuActiveText;
|
color: $subMenuActiveText;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
|
||||||
|
/* 搜索 */
|
||||||
|
.search-container,
|
||||||
|
/* 告警 */
|
||||||
|
.dropdown-badge,
|
||||||
|
/* 全屏 */
|
||||||
|
.screen-full,
|
||||||
|
/* 国际化 */
|
||||||
|
.globalization,
|
||||||
|
/* 登陆名 */
|
||||||
|
.el-dropdown-link,
|
||||||
|
/* 设置 */
|
||||||
|
.el-icon-setting {
|
||||||
|
&:hover {
|
||||||
|
background: $menuHover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown-badge {
|
.dropdown-badge {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
color: $subMenuActiveText;
|
color: $subMenuActiveText;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menuHover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-container {
|
|
||||||
&:hover {
|
|
||||||
background: $menuHover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.screen-full {
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menuHover;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.globalization {
|
.globalization {
|
||||||
height: 48px;
|
|
||||||
width: 40px;
|
width: 40px;
|
||||||
|
height: 48px;
|
||||||
padding: 11px;
|
padding: 11px;
|
||||||
|
outline: none;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: $subMenuActiveText;
|
color: $subMenuActiveText;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menuHover;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dropdown-link {
|
.el-dropdown-link {
|
||||||
height: 48px;
|
height: 48px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
cursor: pointer;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
cursor: pointer;
|
|
||||||
color: $subMenuActiveText;
|
color: $subMenuActiveText;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menuHover;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
p {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
@ -285,18 +276,14 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: $menuHover;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu {
|
.el-menu {
|
||||||
border: none;
|
border: none;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-color: transparent;
|
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-menu-item,
|
.el-menu-item,
|
||||||
@ -322,7 +309,6 @@
|
|||||||
.is-active > .el-sub-menu__title,
|
.is-active > .el-sub-menu__title,
|
||||||
.is-active.submenu-title-noDropdown {
|
.is-active.submenu-title-noDropdown {
|
||||||
color: $subMenuActiveText !important;
|
color: $subMenuActiveText !important;
|
||||||
border-bottom-color: #409eff;
|
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: $subMenuActiveText !important;
|
color: $subMenuActiveText !important;
|
||||||
@ -332,7 +318,6 @@
|
|||||||
.is-active {
|
.is-active {
|
||||||
transition: color 0.3s;
|
transition: color 0.3s;
|
||||||
color: $subMenuActiveText !important;
|
color: $subMenuActiveText !important;
|
||||||
border-bottom-color: #409eff;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -344,15 +329,6 @@
|
|||||||
.el-menu-item {
|
.el-menu-item {
|
||||||
span {
|
span {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-sub-menu__title {
|
|
||||||
color: $menuText;
|
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -402,15 +378,19 @@
|
|||||||
|
|
||||||
.el-menu-item,
|
.el-menu-item,
|
||||||
.el-sub-menu {
|
.el-sub-menu {
|
||||||
i {
|
// i {
|
||||||
width: 20px;
|
// width: 20px;
|
||||||
text-align: center;
|
// text-align: center;
|
||||||
font-size: 16px;
|
// font-size: 16px;
|
||||||
}
|
// }
|
||||||
|
|
||||||
i.fa {
|
// i.fa {
|
||||||
margin-right: 5px;
|
// margin-right: 5px;
|
||||||
font-size: 16px;
|
// font-size: 16px;
|
||||||
|
// }
|
||||||
|
.el-menu-tooltip__trigger {
|
||||||
|
width: 54px;
|
||||||
|
padding: 18px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -431,16 +411,11 @@
|
|||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin-left: 10px;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-sub-menu__title {
|
.el-sub-menu__title {
|
||||||
color: $menuText;
|
color: $menuText;
|
||||||
|
|
||||||
span {
|
|
||||||
margin-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -495,7 +470,9 @@
|
|||||||
/* 有子菜单 */
|
/* 有子菜单 */
|
||||||
.el-menu--collapse
|
.el-menu--collapse
|
||||||
.is-active.outer-most.el-sub-menu
|
.is-active.outer-most.el-sub-menu
|
||||||
> .el-sub-menu__title::before {
|
> .el-sub-menu__title::before,
|
||||||
|
/* 无子菜单 */
|
||||||
|
.el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 2px;
|
left: 2px;
|
||||||
@ -504,20 +481,7 @@
|
|||||||
background-color: $menuActiveBefore;
|
background-color: $menuActiveBefore;
|
||||||
content: "";
|
content: "";
|
||||||
clear: both;
|
clear: both;
|
||||||
transition: all 0.2s ease-in-out;
|
transition: all 0.125s ease-in-out;
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 无子菜单 */
|
|
||||||
.el-menu--collapse .is-active.submenu-title-noDropdown.outer-most::before {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 2px;
|
|
||||||
height: 100%;
|
|
||||||
background-color: $menuActiveBefore;
|
|
||||||
content: "";
|
|
||||||
clear: both;
|
|
||||||
transition: all 0.2s ease-in-out;
|
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -536,7 +500,7 @@
|
|||||||
.mobile {
|
.mobile {
|
||||||
.fixed-header {
|
.fixed-header {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
transition: width 0.1s;
|
transition: width var(--pure-transition-duration);
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-container {
|
.main-container {
|
||||||
@ -544,7 +508,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
transition: transform 0.1s;
|
transition: transform var(--pure-transition-duration);
|
||||||
width: $sideBarWidth;
|
width: $sideBarWidth;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -556,14 +520,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* vertical菜单下hideSidebar去除动画 */
|
|
||||||
.withoutAnimation {
|
|
||||||
.main-container,
|
|
||||||
.sidebar-container {
|
|
||||||
transition: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
body[layout="vertical"] {
|
body[layout="vertical"] {
|
||||||
@ -581,10 +537,11 @@ body[layout="vertical"] {
|
|||||||
.hideSidebar {
|
.hideSidebar {
|
||||||
.fixed-header {
|
.fixed-header {
|
||||||
width: calc(100% - 54px);
|
width: calc(100% - 54px);
|
||||||
transition: width 0.1s;
|
transition: width var(--pure-transition-duration);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
|
transition: width 0.125s;
|
||||||
width: 54px !important;
|
width: 54px !important;
|
||||||
|
|
||||||
.is-active.submenu-title-noDropdown.outer-most {
|
.is-active.submenu-title-noDropdown.outer-most {
|
||||||
@ -596,15 +553,6 @@ body[layout="vertical"] {
|
|||||||
margin-left: 54px;
|
margin-left: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submenu-title-noDropdown {
|
|
||||||
padding: 0 !important;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.el-tooltip {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 菜单折叠 */
|
/* 菜单折叠 */
|
||||||
.el-menu--collapse {
|
.el-menu--collapse {
|
||||||
.el-sub-menu {
|
.el-sub-menu {
|
||||||
@ -623,20 +571,31 @@ body[layout="vertical"] {
|
|||||||
background: transparent !important;
|
background: transparent !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 有无子菜单 */
|
.el-sub-menu__title {
|
||||||
.el-sub-menu__title,
|
padding: 0 18px !important;
|
||||||
.el-menu-item [class^="el-icon"] {
|
|
||||||
right: 2px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.el-menu-tooltip__trigger {
|
.sub-menu-icon {
|
||||||
padding: 0 18px;
|
margin-right: 0;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sub-menu-icon {
|
/* 搜索 */
|
||||||
width: 24px;
|
.search-container,
|
||||||
|
/* 告警 */
|
||||||
|
.dropdown-badge,
|
||||||
|
/* 全屏 */
|
||||||
|
.screen-full,
|
||||||
|
/* 国际化 */
|
||||||
|
.globalization,
|
||||||
|
/* 登陆名 */
|
||||||
|
.el-dropdown-link,
|
||||||
|
/* 设置 */
|
||||||
|
.el-icon-setting {
|
||||||
|
&:hover {
|
||||||
|
background: #f6f6f6;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -654,6 +613,10 @@ body[layout="mix"] {
|
|||||||
$sideBarWidth: 210px;
|
$sideBarWidth: 210px;
|
||||||
@include merge-style($sideBarWidth);
|
@include merge-style($sideBarWidth);
|
||||||
|
|
||||||
|
.el-menu--collapse {
|
||||||
|
width: 54px;
|
||||||
|
}
|
||||||
|
|
||||||
.el-menu {
|
.el-menu {
|
||||||
--el-menu-hover-bg-color: transparent !important;
|
--el-menu-hover-bg-color: transparent !important;
|
||||||
}
|
}
|
||||||
@ -661,10 +624,11 @@ body[layout="mix"] {
|
|||||||
.hideSidebar {
|
.hideSidebar {
|
||||||
.fixed-header {
|
.fixed-header {
|
||||||
width: calc(100% - 54px);
|
width: calc(100% - 54px);
|
||||||
transition: width 0.1s;
|
transition: width var(--pure-transition-duration);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-container {
|
.sidebar-container {
|
||||||
|
transition: width 0.125s;
|
||||||
width: 54px !important;
|
width: 54px !important;
|
||||||
|
|
||||||
.is-active.submenu-title-noDropdown.outer-most {
|
.is-active.submenu-title-noDropdown.outer-most {
|
||||||
@ -676,15 +640,6 @@ body[layout="mix"] {
|
|||||||
margin-left: 54px;
|
margin-left: 54px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.submenu-title-noDropdown {
|
|
||||||
padding: 0 !important;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
.el-tooltip {
|
|
||||||
padding: 0 !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 菜单折叠 */
|
/* 菜单折叠 */
|
||||||
.el-menu--collapse {
|
.el-menu--collapse {
|
||||||
.el-sub-menu {
|
.el-sub-menu {
|
||||||
@ -698,15 +653,6 @@ body[layout="mix"] {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 无子菜单 */
|
|
||||||
.el-menu-item [class^="el-icon"] {
|
|
||||||
right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-sub-menu__title [class^="el-icon"] {
|
|
||||||
right: 2px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -40,3 +40,16 @@
|
|||||||
.breadcrumb-leave-active {
|
.breadcrumb-leave-active {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @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-enter-active {
|
||||||
|
transition: 0.12s all ease-in-out !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.horizontal-collapse-transition {
|
||||||
|
transition: var(--pure-transition-duration) all !important;
|
||||||
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
### 备注
|
### 注意
|
||||||
|
|
||||||
- [文档](https://pure-admin-utils.vercel.app)
|
- [文档](https://pure-admin-utils.vercel.app)
|
||||||
- [npm](https://www.npmjs.com/package/@pureadmin/utils)
|
- [npm](https://www.npmjs.com/package/@pureadmin/utils)
|
||||||
|
|||||||
@ -18,13 +18,12 @@ const url = ref(`${VITE_PUBLIC_PATH}html/button.html`);
|
|||||||
<span class="font-medium">通过iframe引入按钮页面</span>
|
<span class="font-medium">通过iframe引入按钮页面</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<iframe :src="url" frameborder="0" class="iframe" />
|
<iframe :src="url" frameborder="0" class="iframe w-full h-60vh" />
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped>
|
<style lang="scss" scoped>
|
||||||
.iframe {
|
.iframe {
|
||||||
width: 100%;
|
filter: invert(0.9) hue-rotate(180deg);
|
||||||
height: 60vh;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -34,14 +34,3 @@ defineOptions({
|
|||||||
</div>
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.flex {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.el-card) {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -54,18 +54,20 @@ const handleCreated = editor => {
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<Toolbar
|
<div class="wangeditor">
|
||||||
style="border-bottom: 1px solid #ccc"
|
<Toolbar
|
||||||
:editor="editorRef"
|
style="border-bottom: 1px solid #ccc"
|
||||||
:defaultConfig="toolbarConfig"
|
:editor="editorRef"
|
||||||
:mode="mode"
|
:defaultConfig="toolbarConfig"
|
||||||
/>
|
:mode="mode"
|
||||||
<Editor
|
/>
|
||||||
style="height: 500px; overflow-y: hidden"
|
<Editor
|
||||||
v-model="valueHtml"
|
style="height: 500px; overflow-y: hidden"
|
||||||
:defaultConfig="editorConfig"
|
v-model="valueHtml"
|
||||||
:mode="mode"
|
:defaultConfig="editorConfig"
|
||||||
@onCreated="handleCreated"
|
:mode="mode"
|
||||||
/>
|
@onCreated="handleCreated"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -20,7 +20,7 @@ onBeforeMount(() => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<ElDesignForm v-loading="loading" style="height: 100vh" />
|
<ElDesignForm v-loading="loading" style="height: 100vh" class="design-form" />
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@ -6,17 +6,17 @@ import serviceIcon from "/@/assets/svg/service.svg?component";
|
|||||||
import calendarIcon from "/@/assets/svg/calendar.svg?component";
|
import calendarIcon from "/@/assets/svg/calendar.svg?component";
|
||||||
import userAvatarIcon from "/@/assets/svg/user_avatar.svg?component";
|
import userAvatarIcon from "/@/assets/svg/user_avatar.svg?component";
|
||||||
|
|
||||||
export interface CardProductType {
|
defineOptions({
|
||||||
|
name: "ReCard"
|
||||||
|
});
|
||||||
|
|
||||||
|
interface CardProductType {
|
||||||
type: number;
|
type: number;
|
||||||
isSetup: boolean;
|
isSetup: boolean;
|
||||||
description: string;
|
description: string;
|
||||||
name: string;
|
name: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
defineOptions({
|
|
||||||
name: "ReCard"
|
|
||||||
});
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
product: {
|
product: {
|
||||||
type: Object as PropType<CardProductType>
|
type: Object as PropType<CardProductType>
|
||||||
@ -46,7 +46,7 @@ const cardLogoClass = computed(() => [
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div :class="cardClass">
|
<div :class="cardClass">
|
||||||
<div class="list-card-item_detail">
|
<div class="list-card-item_detail !bg-white !dark:bg-dark">
|
||||||
<el-row justify="space-between">
|
<el-row justify="space-between">
|
||||||
<div :class="cardLogoClass">
|
<div :class="cardLogoClass">
|
||||||
<shopIcon v-if="product.type === 1" />
|
<shopIcon v-if="product.type === 1" />
|
||||||
@ -68,7 +68,7 @@ const cardLogoClass = computed(() => [
|
|||||||
:disabled="!product.isSetup"
|
:disabled="!product.isSetup"
|
||||||
max-height="2"
|
max-height="2"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline icon="more-vertical" class="icon-more" />
|
<IconifyIconOffline icon="more-vertical" class="text-size-24px" />
|
||||||
<template #dropdown>
|
<template #dropdown>
|
||||||
<el-dropdown-menu :disabled="!product.isSetup">
|
<el-dropdown-menu :disabled="!product.isSetup">
|
||||||
<el-dropdown-item @click="handleClickManage(product)">
|
<el-dropdown-item @click="handleClickManage(product)">
|
||||||
@ -82,15 +82,17 @@ const cardLogoClass = computed(() => [
|
|||||||
</el-dropdown>
|
</el-dropdown>
|
||||||
</div>
|
</div>
|
||||||
</el-row>
|
</el-row>
|
||||||
<p class="list-card-item_detail--name">{{ product.name }}</p>
|
<p class="list-card-item_detail--name color-text_color_primary">
|
||||||
<p class="list-card-item_detail--desc">{{ product.description }}</p>
|
{{ product.name }}
|
||||||
|
</p>
|
||||||
|
<p class="list-card-item_detail--desc color-text_color_regular">
|
||||||
|
{{ product.description }}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
$text-color-disabled: rgba(0, 0, 0, 0.26);
|
|
||||||
|
|
||||||
.list-card-item {
|
.list-card-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -98,11 +100,9 @@ $text-color-disabled: rgba(0, 0, 0, 0.26);
|
|||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: rgba(0, 0, 0, 0.6);
|
|
||||||
|
|
||||||
&_detail {
|
&_detail {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
background: #fff;
|
|
||||||
padding: 24px 32px;
|
padding: 24px 32px;
|
||||||
min-height: 140px;
|
min-height: 140px;
|
||||||
|
|
||||||
@ -131,16 +131,10 @@ $text-color-disabled: rgba(0, 0, 0, 0.26);
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icon-more {
|
|
||||||
font-size: 24px;
|
|
||||||
color: rgba(36, 36, 36, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
&--name {
|
&--name {
|
||||||
margin: 24px 0 8px 0;
|
margin: 24px 0 8px 0;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
color: rgba(0, 0, 0, 0.9);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&--desc {
|
&--desc {
|
||||||
@ -157,14 +151,9 @@ $text-color-disabled: rgba(0, 0, 0, 0.26);
|
|||||||
}
|
}
|
||||||
|
|
||||||
&__disabled {
|
&__disabled {
|
||||||
color: $text-color-disabled;
|
.list-card-item_detail--name,
|
||||||
|
.list-card-item_detail--desc {
|
||||||
.icon-more {
|
color: var(--el-text-color-disabled);
|
||||||
color: $text-color-disabled;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-card-item_detail--name {
|
|
||||||
color: $text-color-disabled;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-card-item_detail--operation--tag {
|
.list-card-item_detail--operation--tag {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { getCardList } from "/@/api/list";
|
|
||||||
import Card from "./components/Card.vue";
|
import Card from "./components/Card.vue";
|
||||||
|
import { getCardList } from "/@/api/list";
|
||||||
import { ref, onMounted, nextTick } from "vue";
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
import dialogForm from "./components/DialogForm.vue";
|
import dialogForm from "./components/DialogForm.vue";
|
||||||
import { ElMessage, ElMessageBox } from "element-plus";
|
import { ElMessage, ElMessageBox } from "element-plus";
|
||||||
|
|||||||
@ -26,8 +26,7 @@ const { columns } = useColumns();
|
|||||||
<PureDescriptions
|
<PureDescriptions
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
title="您提交的内容有如下错误："
|
title="您提交的内容有如下错误："
|
||||||
style="background: rgb(250, 250, 250)"
|
class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]"
|
||||||
class="p-6 ml-10 mr-10"
|
|
||||||
/>
|
/>
|
||||||
</el-card>
|
</el-card>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@ -41,7 +41,7 @@ const columns = [
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</el-result>
|
</el-result>
|
||||||
<div style="background: rgb(250, 250, 250)" class="p-6 ml-10 mr-10">
|
<div class="p-6 ml-10 mr-10 bg-[#fafafa] dark:bg-[#1d1d1d]">
|
||||||
<PureDescriptions title="项目名称" :columns="columns" class="mb-5" />
|
<PureDescriptions title="项目名称" :columns="columns" class="mb-5" />
|
||||||
<el-steps :active="2">
|
<el-steps :active="2">
|
||||||
<el-step title="创建项目">
|
<el-step title="创建项目">
|
||||||
|
|||||||
@ -60,7 +60,7 @@ onMounted(() => {
|
|||||||
ref="formRef"
|
ref="formRef"
|
||||||
:inline="true"
|
:inline="true"
|
||||||
:model="form"
|
:model="form"
|
||||||
class="bg-white w-99/100 pl-8 pt-4"
|
class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
|
||||||
>
|
>
|
||||||
<el-form-item label="部门名称：" prop="user">
|
<el-form-item label="部门名称：" prop="user">
|
||||||
<el-input v-model="form.user" placeholder="请输入部门名称" clearable />
|
<el-input v-model="form.user" placeholder="请输入部门名称" clearable />
|
||||||
@ -110,7 +110,10 @@ onMounted(() => {
|
|||||||
:data="dataList"
|
:data="dataList"
|
||||||
:columns="columns"
|
:columns="columns"
|
||||||
:checkList="checkList"
|
:checkList="checkList"
|
||||||
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-table-row-hover-bg-color)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
>
|
>
|
||||||
<template #operation="{ row }">
|
<template #operation="{ row }">
|
||||||
|
|||||||
@ -82,12 +82,14 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
|||||||
<div class="config">
|
<div class="config">
|
||||||
<el-drawer
|
<el-drawer
|
||||||
:model-value="drawer"
|
:model-value="drawer"
|
||||||
:title="drawTitle"
|
|
||||||
:direction="direction"
|
:direction="direction"
|
||||||
:before-close="handleClose"
|
:before-close="handleClose"
|
||||||
destroy-on-close
|
destroy-on-close
|
||||||
size="680px"
|
size="680px"
|
||||||
>
|
>
|
||||||
|
<template #header>
|
||||||
|
<span class="color-black dark:color-white">{{ drawTitle }}</span>
|
||||||
|
</template>
|
||||||
<el-divider />
|
<el-divider />
|
||||||
<!-- 列表 -->
|
<!-- 列表 -->
|
||||||
<div class="p-2">
|
<div class="p-2">
|
||||||
@ -162,10 +164,8 @@ const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({ records }) => {
|
|||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-drawer__header span) {
|
:deep(.el-drawer__body) {
|
||||||
color: rgba(0, 0, 0, 0.85);
|
padding: 0;
|
||||||
font-weight: 500;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-divider--horizontal) {
|
:deep(.el-divider--horizontal) {
|
||||||
|
|||||||
@ -222,13 +222,19 @@ function onHide() {
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 工具栏 -->
|
<!-- 工具栏 -->
|
||||||
<vxe-toolbar>
|
<vxe-toolbar class="dark:bg-dark">
|
||||||
<template #buttons>
|
<template #buttons>
|
||||||
<vxe-input
|
<div class="ml-20px">
|
||||||
v-model="dictData.filterName"
|
<label>字典名称：</label>
|
||||||
:placeholder="t('buttons.hssearch')"
|
<el-input
|
||||||
@keyup="searchEvent"
|
class="!w-200px"
|
||||||
/>
|
v-model="dictData.filterName"
|
||||||
|
:placeholder="t('buttons.hssearch')"
|
||||||
|
@keyup.prevent="searchEvent"
|
||||||
|
@input="searchEvent"
|
||||||
|
clearable
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #tools>
|
<template #tools>
|
||||||
<el-button-group>
|
<el-button-group>
|
||||||
|
|||||||
@ -77,7 +77,7 @@ onMounted(() => {
|
|||||||
ref="formRef"
|
ref="formRef"
|
||||||
:inline="true"
|
:inline="true"
|
||||||
:model="form"
|
:model="form"
|
||||||
class="bg-white w-99/100 pl-8 pt-4"
|
class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
|
||||||
>
|
>
|
||||||
<el-form-item label="角色名称：" prop="name">
|
<el-form-item label="角色名称：" prop="name">
|
||||||
<el-input v-model="form.name" placeholder="请输入角色名称" clearable />
|
<el-input v-model="form.name" placeholder="请输入角色名称" clearable />
|
||||||
@ -129,7 +129,10 @@ onMounted(() => {
|
|||||||
:checkList="checkList"
|
:checkList="checkList"
|
||||||
:pagination="pagination"
|
:pagination="pagination"
|
||||||
:paginationSmall="size === 'small' ? true : false"
|
:paginationSmall="size === 'small' ? true : false"
|
||||||
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-table-row-hover-bg-color)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
@size-change="handleSizeChange"
|
@size-change="handleSizeChange"
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
|
|||||||
@ -79,7 +79,7 @@ onMounted(() => {
|
|||||||
ref="formRef"
|
ref="formRef"
|
||||||
:inline="true"
|
:inline="true"
|
||||||
:model="form"
|
:model="form"
|
||||||
class="bg-white w-99/100 pl-8 pt-4"
|
class="bg-white dark:bg-dark w-99/100 pl-8 pt-4"
|
||||||
>
|
>
|
||||||
<el-form-item label="用户名称：" prop="username">
|
<el-form-item label="用户名称：" prop="username">
|
||||||
<el-input
|
<el-input
|
||||||
@ -141,7 +141,10 @@ onMounted(() => {
|
|||||||
:checkList="checkList"
|
:checkList="checkList"
|
||||||
:pagination="pagination"
|
:pagination="pagination"
|
||||||
:paginationSmall="size === 'small' ? true : false"
|
:paginationSmall="size === 'small' ? true : false"
|
||||||
:header-cell-style="{ background: '#fafafa', color: '#606266' }"
|
:header-cell-style="{
|
||||||
|
background: 'var(--el-table-row-hover-bg-color)',
|
||||||
|
color: 'var(--el-text-color-primary)'
|
||||||
|
}"
|
||||||
@selection-change="handleSelectionChange"
|
@selection-change="handleSelectionChange"
|
||||||
@size-change="handleSizeChange"
|
@size-change="handleSizeChange"
|
||||||
@current-change="handleCurrentChange"
|
@current-change="handleCurrentChange"
|
||||||
|
|||||||
@ -70,7 +70,7 @@ onMounted(async () => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="max-w-260px h-full min-h-780px bg-white">
|
<div class="max-w-260px h-full min-h-780px bg-white dark:bg-dark">
|
||||||
<div class="flex items-center h-34px">
|
<div class="flex items-center h-34px">
|
||||||
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
|
<p class="flex-1 ml-2 font-bold text-base truncate" title="部门列表">
|
||||||
部门列表
|
部门列表
|
||||||
@ -101,7 +101,7 @@ onMounted(async () => {
|
|||||||
<el-dropdown-menu>
|
<el-dropdown-menu>
|
||||||
<el-dropdown-item>
|
<el-dropdown-item>
|
||||||
<el-button
|
<el-button
|
||||||
class="reset-margin !h-20px !text-gray-500"
|
class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
|
||||||
link
|
link
|
||||||
type="primary"
|
type="primary"
|
||||||
:icon="useRenderIcon('expand')"
|
:icon="useRenderIcon('expand')"
|
||||||
@ -112,7 +112,7 @@ onMounted(async () => {
|
|||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
<el-dropdown-item>
|
<el-dropdown-item>
|
||||||
<el-button
|
<el-button
|
||||||
class="reset-margin !h-20px !text-gray-500"
|
class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
|
||||||
link
|
link
|
||||||
type="primary"
|
type="primary"
|
||||||
:icon="useRenderIcon('unExpand')"
|
:icon="useRenderIcon('unExpand')"
|
||||||
@ -123,7 +123,7 @@ onMounted(async () => {
|
|||||||
</el-dropdown-item>
|
</el-dropdown-item>
|
||||||
<el-dropdown-item>
|
<el-dropdown-item>
|
||||||
<el-button
|
<el-button
|
||||||
class="reset-margin !h-20px !text-gray-500"
|
class="reset-margin !h-20px !text-gray-500 !dark:hover:color-primary"
|
||||||
link
|
link
|
||||||
type="primary"
|
type="primary"
|
||||||
:icon="useRenderIcon('reset')"
|
:icon="useRenderIcon('reset')"
|
||||||
@ -159,7 +159,8 @@ onMounted(async () => {
|
|||||||
'select-none',
|
'select-none',
|
||||||
searchValue.trim().length > 0 &&
|
searchValue.trim().length > 0 &&
|
||||||
node.label.includes(searchValue) &&
|
node.label.includes(searchValue) &&
|
||||||
'text-red-500'
|
'text-red-500',
|
||||||
|
highlightMap[node.id]?.highlight ? 'dark:color-primary' : ''
|
||||||
]"
|
]"
|
||||||
:style="{
|
:style="{
|
||||||
background: highlightMap[node.id]?.highlight
|
background: highlightMap[node.id]?.highlight
|
||||||
|
|||||||
@ -1,9 +1,17 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, type Ref } from "vue";
|
import { ref, computed, type Ref } from "vue";
|
||||||
import { useECharts } from "@pureadmin/utils";
|
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
|
||||||
|
|
||||||
|
const { isDark } = useDark();
|
||||||
|
|
||||||
|
let theme: EchartOptions["theme"] = computed(() => {
|
||||||
|
return isDark.value ? "dark" : "light";
|
||||||
|
});
|
||||||
|
|
||||||
const barChartRef = ref<HTMLDivElement | null>(null);
|
const barChartRef = ref<HTMLDivElement | null>(null);
|
||||||
const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>);
|
const { setOptions } = useECharts(barChartRef as Ref<HTMLDivElement>, {
|
||||||
|
theme
|
||||||
|
});
|
||||||
|
|
||||||
setOptions(
|
setOptions(
|
||||||
{
|
{
|
||||||
|
|||||||
@ -64,7 +64,7 @@ let classOption = reactive({
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="infinite">
|
<div class="infinite bg-[#fafafa] dark:bg-dark">
|
||||||
<ul class="top">
|
<ul class="top">
|
||||||
<li>更新日期</li>
|
<li>更新日期</li>
|
||||||
<li>项目名称</li>
|
<li>项目名称</li>
|
||||||
@ -98,7 +98,7 @@ let classOption = reactive({
|
|||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #909399;
|
color: #909399;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
background: #fafafa;
|
// background: #fafafa;
|
||||||
|
|
||||||
li {
|
li {
|
||||||
width: 34%;
|
width: 34%;
|
||||||
|
|||||||
@ -1,9 +1,17 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, type Ref } from "vue";
|
import { ref, computed, type Ref } from "vue";
|
||||||
import { useECharts } from "@pureadmin/utils";
|
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
|
||||||
|
|
||||||
|
const { isDark } = useDark();
|
||||||
|
|
||||||
|
let theme: EchartOptions["theme"] = computed(() => {
|
||||||
|
return isDark.value ? "dark" : "light";
|
||||||
|
});
|
||||||
|
|
||||||
const lineChartRef = ref<HTMLDivElement | null>(null);
|
const lineChartRef = ref<HTMLDivElement | null>(null);
|
||||||
const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>);
|
const { setOptions } = useECharts(lineChartRef as Ref<HTMLDivElement>, {
|
||||||
|
theme
|
||||||
|
});
|
||||||
|
|
||||||
setOptions(
|
setOptions(
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,9 +1,17 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, type Ref } from "vue";
|
import { ref, computed, type Ref } from "vue";
|
||||||
import { useECharts } from "@pureadmin/utils";
|
import { useDark, useECharts, type EchartOptions } from "@pureadmin/utils";
|
||||||
|
|
||||||
|
const { isDark } = useDark();
|
||||||
|
|
||||||
|
let theme: EchartOptions["theme"] = computed(() => {
|
||||||
|
return isDark.value ? "dark" : "light";
|
||||||
|
});
|
||||||
|
|
||||||
const pieChartRef = ref<HTMLDivElement | null>(null);
|
const pieChartRef = ref<HTMLDivElement | null>(null);
|
||||||
const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>);
|
const { setOptions } = useECharts(pieChartRef as Ref<HTMLDivElement>, {
|
||||||
|
theme
|
||||||
|
});
|
||||||
|
|
||||||
setOptions(
|
setOptions(
|
||||||
{
|
{
|
||||||
|
|||||||
@ -35,7 +35,7 @@ const openDepot = (): void => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="welcome">
|
<div class="welcome">
|
||||||
<el-card class="top-content">
|
<el-card class="top-content dark:border-none">
|
||||||
<div class="left-mark">
|
<div class="left-mark">
|
||||||
<img :src="avatars" title="直达仓库地址" @click="openDepot" />
|
<img :src="avatars" title="直达仓库地址" @click="openDepot" />
|
||||||
<span>{{ greetings }}</span>
|
<span>{{ greetings }}</span>
|
||||||
@ -233,7 +233,7 @@ const openDepot = (): void => {
|
|||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
height: 60px;
|
height: 60px;
|
||||||
background: #fff;
|
background: var(--el-bg-color);
|
||||||
|
|
||||||
.left-mark {
|
.left-mark {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
6
types/global.d.ts
vendored
6
types/global.d.ts
vendored
@ -5,6 +5,7 @@ import type {
|
|||||||
FunctionalComponent,
|
FunctionalComponent,
|
||||||
PropType as VuePropType
|
PropType as VuePropType
|
||||||
} from "vue";
|
} from "vue";
|
||||||
|
import type { ECharts } from "echarts";
|
||||||
|
|
||||||
// GlobalComponents for Volar
|
// GlobalComponents for Volar
|
||||||
declare module "vue" {
|
declare module "vue" {
|
||||||
@ -108,6 +109,11 @@ declare global {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
declare interface GlobalPropertiesApi {
|
||||||
|
$echarts: ECharts;
|
||||||
|
$storage: ServerConfigs;
|
||||||
|
}
|
||||||
|
|
||||||
function parseInt(s: string | number, radix?: number): number;
|
function parseInt(s: string | number, radix?: number): number;
|
||||||
|
|
||||||
function parseFloat(string: string | number): number;
|
function parseFloat(string: string | number): number;
|
||||||
|
|||||||
@ -13,9 +13,22 @@ export default defineConfig({
|
|||||||
transformers: [transformerDirectives(), transformerVariantGroup()],
|
transformers: [transformerDirectives(), transformerVariantGroup()],
|
||||||
exclude: [`${__dirname}/node_modules/**/*`],
|
exclude: [`${__dirname}/node_modules/**/*`],
|
||||||
shortcuts: {
|
shortcuts: {
|
||||||
|
"bg-dark": "bg-bg_color",
|
||||||
"wh-full": "w-full h-full",
|
"wh-full": "w-full h-full",
|
||||||
|
"cp-on": "cursor-pointer outline-none",
|
||||||
|
"flex-c": "flex justify-center items-center",
|
||||||
"flex-ac": "flex justify-around items-center",
|
"flex-ac": "flex justify-around items-center",
|
||||||
"flex-bc": "flex justify-between items-center"
|
"flex-bc": "flex justify-between items-center",
|
||||||
|
"navbar-bg-hover": "dark:color-white !dark:hover:bg-[#242424]"
|
||||||
},
|
},
|
||||||
theme: {}
|
theme: {
|
||||||
|
colors: {
|
||||||
|
bg_color: "var(--el-bg-color)",
|
||||||
|
primary: "var(--el-color-primary)",
|
||||||
|
primary_light_9: "var(--el-color-primary-light-9)",
|
||||||
|
text_color_primary: "var(--el-text-color-primary)",
|
||||||
|
text_color_regular: "var(--el-text-color-regular)",
|
||||||
|
text_color_disabled: "var(--el-text-color-disabled)"
|
||||||
|
}
|
||||||
|
}
|
||||||
});
|
});
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user