mirror of
https://github.com/pure-admin/pure-admin-thin.git
synced 2025-12-14 22:30:31 +08:00
Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c6e25d6933 | ||
|
|
cabf1f85ef | ||
|
|
cb3d7cd552 | ||
|
|
80453ec4b1 | ||
|
|
8ca8bbcee0 |
@@ -9,10 +9,12 @@ export function viteBuildInfo(): Plugin {
|
|||||||
let config: { command: string };
|
let config: { command: string };
|
||||||
let startTime: Dayjs;
|
let startTime: Dayjs;
|
||||||
let endTime: Dayjs;
|
let endTime: Dayjs;
|
||||||
|
let outDir: string;
|
||||||
return {
|
return {
|
||||||
name: "vite:buildInfo",
|
name: "vite:buildInfo",
|
||||||
configResolved(resolvedConfig: { command: string }) {
|
configResolved(resolvedConfig) {
|
||||||
config = resolvedConfig;
|
config = resolvedConfig;
|
||||||
|
outDir = resolvedConfig.build?.outDir ?? "dist";
|
||||||
},
|
},
|
||||||
buildStart() {
|
buildStart() {
|
||||||
console.log(
|
console.log(
|
||||||
@@ -32,6 +34,7 @@ export function viteBuildInfo(): Plugin {
|
|||||||
if (config.command === "build") {
|
if (config.command === "build") {
|
||||||
endTime = dayjs(new Date());
|
endTime = dayjs(new Date());
|
||||||
getPackageSize({
|
getPackageSize({
|
||||||
|
folder: outDir,
|
||||||
callback: (size: string) => {
|
callback: (size: string) => {
|
||||||
console.log(
|
console.log(
|
||||||
bold(
|
bold(
|
||||||
|
|||||||
10
package.json
10
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "pure-admin-thin",
|
"name": "pure-admin-thin",
|
||||||
"version": "3.9.0",
|
"version": "3.9.2",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
|
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
|
||||||
@@ -31,15 +31,15 @@
|
|||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@ctrl/tinycolor": "^3.4.1",
|
"@ctrl/tinycolor": "^3.4.1",
|
||||||
"@pureadmin/descriptions": "^1.1.0",
|
"@pureadmin/descriptions": "^1.1.0",
|
||||||
"@pureadmin/table": "^1.8.0",
|
"@pureadmin/table": "^1.8.2",
|
||||||
"@pureadmin/utils": "^1.6.7",
|
"@pureadmin/utils": "^1.7.2",
|
||||||
"@vueuse/core": "^9.6.0",
|
"@vueuse/core": "^9.6.0",
|
||||||
"@vueuse/motion": "2.0.0-beta.12",
|
"@vueuse/motion": "2.0.0-beta.12",
|
||||||
"animate.css": "^4.1.1",
|
"animate.css": "^4.1.1",
|
||||||
"axios": "^1.2.0",
|
"axios": "^1.2.0",
|
||||||
"dayjs": "^1.11.6",
|
"dayjs": "^1.11.6",
|
||||||
"echarts": "^5.4.0",
|
"echarts": "^5.4.0",
|
||||||
"element-plus": "^2.2.25",
|
"element-plus": "^2.2.26",
|
||||||
"element-resize-detector": "^1.2.4",
|
"element-resize-detector": "^1.2.4",
|
||||||
"js-cookie": "^3.0.1",
|
"js-cookie": "^3.0.1",
|
||||||
"lodash": "^4.17.21",
|
"lodash": "^4.17.21",
|
||||||
@@ -49,7 +49,7 @@
|
|||||||
"mockjs": "^1.1.0",
|
"mockjs": "^1.1.0",
|
||||||
"nprogress": "^0.2.0",
|
"nprogress": "^0.2.0",
|
||||||
"path": "^0.12.7",
|
"path": "^0.12.7",
|
||||||
"pinia": "^2.0.26",
|
"pinia": "^2.0.27",
|
||||||
"qs": "^6.11.0",
|
"qs": "^6.11.0",
|
||||||
"responsive-storage": "^2.1.0",
|
"responsive-storage": "^2.1.0",
|
||||||
"vue": "^3.2.45",
|
"vue": "^3.2.45",
|
||||||
|
|||||||
5225
pnpm-lock.yaml
generated
5225
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"Version": "3.9.0",
|
"Version": "3.9.2",
|
||||||
"Title": "PureAdmin",
|
"Title": "PureAdmin",
|
||||||
"FixedHeader": true,
|
"FixedHeader": true,
|
||||||
"HiddenSideBar": false,
|
"HiddenSideBar": false,
|
||||||
@@ -15,5 +15,7 @@
|
|||||||
"EpThemeColor": "#409EFF",
|
"EpThemeColor": "#409EFF",
|
||||||
"ShowLogo": true,
|
"ShowLogo": true,
|
||||||
"ShowModel": "smart",
|
"ShowModel": "smart",
|
||||||
"MenuArrowIconNoTransition": true
|
"MenuArrowIconNoTransition": true,
|
||||||
|
"CachingAsyncRoutes": true,
|
||||||
|
"TooltipEffect": "light"
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ListItem } from "./data";
|
import { ListItem } from "./data";
|
||||||
import { ref, PropType, nextTick } from "vue";
|
import { ref, PropType, nextTick } from "vue";
|
||||||
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
noticeItem: {
|
noticeItem: {
|
||||||
@@ -13,6 +14,7 @@ const titleRef = ref(null);
|
|||||||
const titleTooltip = ref(false);
|
const titleTooltip = ref(false);
|
||||||
const descriptionRef = ref(null);
|
const descriptionRef = ref(null);
|
||||||
const descriptionTooltip = ref(false);
|
const descriptionTooltip = ref(false);
|
||||||
|
const { tooltipEffect } = useNav();
|
||||||
|
|
||||||
function hoverTitle() {
|
function hoverTitle() {
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
@@ -57,6 +59,7 @@ function hoverDescription(event, description) {
|
|||||||
<div class="notice-text-title text-[#000000d9] dark:text-white">
|
<div class="notice-text-title text-[#000000d9] dark:text-white">
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
popper-class="notice-title-popper"
|
popper-class="notice-title-popper"
|
||||||
|
:effect="tooltipEffect"
|
||||||
:disabled="!titleTooltip"
|
:disabled="!titleTooltip"
|
||||||
:content="props.noticeItem.title"
|
:content="props.noticeItem.title"
|
||||||
placement="top-start"
|
placement="top-start"
|
||||||
@@ -81,6 +84,7 @@ function hoverDescription(event, description) {
|
|||||||
|
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
popper-class="notice-title-popper"
|
popper-class="notice-title-popper"
|
||||||
|
:effect="tooltipEffect"
|
||||||
:disabled="!descriptionTooltip"
|
:disabled="!descriptionTooltip"
|
||||||
:content="props.noticeItem.description"
|
:content="props.noticeItem.description"
|
||||||
placement="top-start"
|
placement="top-start"
|
||||||
|
|||||||
@@ -1,11 +1,27 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref } from "vue";
|
import { ref, computed } from "vue";
|
||||||
import { onClickOutside } from "@vueuse/core";
|
|
||||||
import { emitter } from "@/utils/mitt";
|
import { emitter } from "@/utils/mitt";
|
||||||
|
import { onClickOutside } from "@vueuse/core";
|
||||||
import Close from "@iconify-icons/ep/close";
|
import Close from "@iconify-icons/ep/close";
|
||||||
|
|
||||||
const show = ref<Boolean>(false);
|
|
||||||
const target = ref(null);
|
const target = ref(null);
|
||||||
|
const show = ref<Boolean>(false);
|
||||||
|
|
||||||
|
const iconClass = computed(() => {
|
||||||
|
return [
|
||||||
|
"mr-[20px]",
|
||||||
|
"outline-none",
|
||||||
|
"width-[20px]",
|
||||||
|
"height-[20px]",
|
||||||
|
"rounded-[4px]",
|
||||||
|
"cursor-pointer",
|
||||||
|
"transition-colors",
|
||||||
|
"hover:bg-[#0000000f]",
|
||||||
|
"dark:hover:bg-[#ffffff1f]",
|
||||||
|
"dark:hover:text-[#ffffffd9]"
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
onClickOutside(target, (event: any) => {
|
onClickOutside(target, (event: any) => {
|
||||||
if (event.clientX > target.value.offsetLeft) return;
|
if (event.clientX > target.value.offsetLeft) return;
|
||||||
show.value = false;
|
show.value = false;
|
||||||
@@ -23,9 +39,11 @@ emitter.on("openPanel", () => {
|
|||||||
<div class="right-panel-items">
|
<div class="right-panel-items">
|
||||||
<div class="project-configuration">
|
<div class="project-configuration">
|
||||||
<h4 class="dark:text-white">项目配置</h4>
|
<h4 class="dark:text-white">项目配置</h4>
|
||||||
<span title="关闭配置">
|
<span title="关闭配置" :class="iconClass">
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
class="dark:text-white"
|
class="dark:text-white"
|
||||||
|
width="20px"
|
||||||
|
height="20px"
|
||||||
:icon="Close"
|
:icon="Close"
|
||||||
@click="show = !show"
|
@click="show = !show"
|
||||||
/>
|
/>
|
||||||
@@ -69,7 +87,6 @@ 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;
|
|
||||||
z-index: 40000;
|
z-index: 40000;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -125,16 +142,6 @@ emitter.on("openPanel", () => {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
top: 15px;
|
top: 15px;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
|
|
||||||
svg {
|
|
||||||
font-size: 20px;
|
|
||||||
margin-right: 20px;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-divider--horizontal) {
|
:deep(.el-divider--horizontal) {
|
||||||
|
|||||||
@@ -1,13 +1,11 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {
|
import {
|
||||||
ref,
|
useDark,
|
||||||
unref,
|
debounce,
|
||||||
watch,
|
useGlobal,
|
||||||
reactive,
|
storageLocal,
|
||||||
computed,
|
storageSession
|
||||||
nextTick,
|
} from "@pureadmin/utils";
|
||||||
useCssModule
|
|
||||||
} from "vue";
|
|
||||||
import { getConfig } from "@/config";
|
import { getConfig } from "@/config";
|
||||||
import { useRouter } from "vue-router";
|
import { useRouter } from "vue-router";
|
||||||
import panel from "../panel/index.vue";
|
import panel from "../panel/index.vue";
|
||||||
@@ -17,16 +15,10 @@ import { removeToken } from "@/utils/auth";
|
|||||||
import { routerArrays } from "@/layout/types";
|
import { routerArrays } from "@/layout/types";
|
||||||
import { useNav } from "@/layout/hooks/useNav";
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
import { useAppStoreHook } from "@/store/modules/app";
|
import { useAppStoreHook } from "@/store/modules/app";
|
||||||
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
|
||||||
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
|
||||||
import {
|
|
||||||
useDark,
|
|
||||||
debounce,
|
|
||||||
useGlobal,
|
|
||||||
storageLocal,
|
|
||||||
storageSession
|
|
||||||
} from "@pureadmin/utils";
|
|
||||||
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
|
||||||
|
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
|
||||||
|
import { ref, unref, watch, reactive, computed, nextTick } from "vue";
|
||||||
|
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
|
||||||
|
|
||||||
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";
|
||||||
@@ -34,9 +26,8 @@ import Check from "@iconify-icons/ep/check";
|
|||||||
import Logout from "@iconify-icons/ri/logout-circle-r-line";
|
import Logout from "@iconify-icons/ri/logout-circle-r-line";
|
||||||
|
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { device } = useNav();
|
|
||||||
const { isDark } = useDark();
|
const { isDark } = useDark();
|
||||||
const { isSelect } = useCssModule();
|
const { device, tooltipEffect } = useNav();
|
||||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||||
|
|
||||||
const mixRef = ref();
|
const mixRef = ref();
|
||||||
@@ -161,30 +152,10 @@ function logoChange() {
|
|||||||
|
|
||||||
function setFalse(Doms): any {
|
function setFalse(Doms): any {
|
||||||
Doms.forEach(v => {
|
Doms.forEach(v => {
|
||||||
toggleClass(false, isSelect, unref(v));
|
toggleClass(false, "is-select", unref(v));
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
watch($storage, ({ layout }) => {
|
|
||||||
switch (layout["layout"]) {
|
|
||||||
case "vertical":
|
|
||||||
toggleClass(true, isSelect, unref(verticalRef));
|
|
||||||
debounce(setFalse([horizontalRef]), 50);
|
|
||||||
debounce(setFalse([mixRef]), 50);
|
|
||||||
break;
|
|
||||||
case "horizontal":
|
|
||||||
toggleClass(true, isSelect, unref(horizontalRef));
|
|
||||||
debounce(setFalse([verticalRef]), 50);
|
|
||||||
debounce(setFalse([mixRef]), 50);
|
|
||||||
break;
|
|
||||||
case "mix":
|
|
||||||
toggleClass(true, isSelect, unref(mixRef));
|
|
||||||
debounce(setFalse([verticalRef]), 50);
|
|
||||||
debounce(setFalse([horizontalRef]), 50);
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
/** 主题色 激活选择项 */
|
/** 主题色 激活选择项 */
|
||||||
const getThemeColor = computed(() => {
|
const getThemeColor = computed(() => {
|
||||||
return current => {
|
return current => {
|
||||||
@@ -227,6 +198,26 @@ nextTick(() => {
|
|||||||
settings.tabsVal && tagsChange();
|
settings.tabsVal && tagsChange();
|
||||||
dataThemeChange();
|
dataThemeChange();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
watch($storage, ({ layout }) => {
|
||||||
|
switch (layout["layout"]) {
|
||||||
|
case "vertical":
|
||||||
|
toggleClass(true, "is-select", unref(verticalRef));
|
||||||
|
debounce(setFalse([horizontalRef]), 50);
|
||||||
|
debounce(setFalse([mixRef]), 50);
|
||||||
|
break;
|
||||||
|
case "horizontal":
|
||||||
|
toggleClass(true, "is-select", unref(horizontalRef));
|
||||||
|
debounce(setFalse([verticalRef]), 50);
|
||||||
|
debounce(setFalse([mixRef]), 50);
|
||||||
|
break;
|
||||||
|
case "mix":
|
||||||
|
toggleClass(true, "is-select", unref(mixRef));
|
||||||
|
debounce(setFalse([verticalRef]), 50);
|
||||||
|
debounce(setFalse([horizontalRef]), 50);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@@ -243,9 +234,15 @@ nextTick(() => {
|
|||||||
|
|
||||||
<el-divider>导航栏模式</el-divider>
|
<el-divider>导航栏模式</el-divider>
|
||||||
<ul class="pure-theme">
|
<ul class="pure-theme">
|
||||||
<el-tooltip class="item" content="左侧模式" placement="bottom">
|
<el-tooltip
|
||||||
|
:effect="tooltipEffect"
|
||||||
|
class="item"
|
||||||
|
content="左侧模式"
|
||||||
|
placement="bottom"
|
||||||
|
popper-class="pure-tooltip"
|
||||||
|
>
|
||||||
<li
|
<li
|
||||||
:class="layoutTheme.layout === 'vertical' ? $style.isSelect : ''"
|
:class="layoutTheme.layout === 'vertical' ? 'is-select' : ''"
|
||||||
ref="verticalRef"
|
ref="verticalRef"
|
||||||
@click="setLayoutModel('vertical')"
|
@click="setLayoutModel('vertical')"
|
||||||
>
|
>
|
||||||
@@ -256,12 +253,14 @@ nextTick(() => {
|
|||||||
|
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
v-if="device !== 'mobile'"
|
v-if="device !== 'mobile'"
|
||||||
|
:effect="tooltipEffect"
|
||||||
class="item"
|
class="item"
|
||||||
content="顶部模式"
|
content="顶部模式"
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
|
popper-class="pure-tooltip"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
:class="layoutTheme.layout === 'horizontal' ? $style.isSelect : ''"
|
:class="layoutTheme.layout === 'horizontal' ? 'is-select' : ''"
|
||||||
ref="horizontalRef"
|
ref="horizontalRef"
|
||||||
@click="setLayoutModel('horizontal')"
|
@click="setLayoutModel('horizontal')"
|
||||||
>
|
>
|
||||||
@@ -272,12 +271,14 @@ nextTick(() => {
|
|||||||
|
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
v-if="device !== 'mobile'"
|
v-if="device !== 'mobile'"
|
||||||
|
:effect="tooltipEffect"
|
||||||
class="item"
|
class="item"
|
||||||
content="混合模式"
|
content="混合模式"
|
||||||
placement="bottom"
|
placement="bottom"
|
||||||
|
popper-class="pure-tooltip"
|
||||||
>
|
>
|
||||||
<li
|
<li
|
||||||
:class="layoutTheme.layout === 'mix' ? $style.isSelect : ''"
|
:class="layoutTheme.layout === 'mix' ? 'is-select' : ''"
|
||||||
ref="mixRef"
|
ref="mixRef"
|
||||||
@click="setLayoutModel('mix')"
|
@click="setLayoutModel('mix')"
|
||||||
>
|
>
|
||||||
@@ -392,13 +393,16 @@ nextTick(() => {
|
|||||||
</panel>
|
</panel>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style scoped module>
|
<style lang="scss" scoped>
|
||||||
.isSelect {
|
:deep(.el-divider__text) {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-select {
|
||||||
border: 2px solid var(--el-color-primary);
|
border: 2px solid var(--el-color-primary);
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.setting {
|
.setting {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
@@ -410,11 +414,6 @@ nextTick(() => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-divider__text) {
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pure-datatheme {
|
.pure-datatheme {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 50px;
|
height: 50px;
|
||||||
|
|||||||
@@ -96,8 +96,12 @@ watch(
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<el-breadcrumb class="!leading-[50px] select-none" separator="/">
|
<el-breadcrumb class="!leading-[50px] select-none" separator="/">
|
||||||
<transition-group appear name="breadcrumb">
|
<transition-group name="breadcrumb">
|
||||||
<el-breadcrumb-item v-for="item in levelList" :key="item.path">
|
<el-breadcrumb-item
|
||||||
|
class="!inline !items-stretch"
|
||||||
|
v-for="item in levelList"
|
||||||
|
:key="item.path"
|
||||||
|
>
|
||||||
<a @click.prevent="handleLink(item)">
|
<a @click.prevent="handleLink(item)">
|
||||||
{{ item.meta.title }}
|
{{ item.meta.title }}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useDark } from "@pureadmin/utils";
|
import { ref, computed } from "vue";
|
||||||
|
import { useNav } from "@/layout/hooks/useNav";
|
||||||
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
import MenuFold from "@iconify-icons/ri/menu-fold-fill";
|
||||||
import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
isActive: boolean;
|
isActive: boolean;
|
||||||
@@ -10,7 +10,25 @@ interface Props {
|
|||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
isActive: false
|
isActive: false
|
||||||
});
|
});
|
||||||
const { isDark } = useDark();
|
|
||||||
|
const visible = ref(false);
|
||||||
|
const { tooltipEffect } = useNav();
|
||||||
|
|
||||||
|
const iconClass = computed(() => {
|
||||||
|
return [
|
||||||
|
"ml-4",
|
||||||
|
"mb-1",
|
||||||
|
"w-[16px]",
|
||||||
|
"h-[16px]",
|
||||||
|
"inline-block",
|
||||||
|
"align-middle",
|
||||||
|
"text-primary",
|
||||||
|
"cursor-pointer",
|
||||||
|
"duration-[360ms]",
|
||||||
|
"hover:text-primary",
|
||||||
|
"dark:hover:!text-white"
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
const emit = defineEmits<{
|
const emit = defineEmits<{
|
||||||
(e: "toggleClick"): void;
|
(e: "toggleClick"): void;
|
||||||
@@ -25,13 +43,17 @@ const toggleClick = () => {
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<el-tooltip
|
<el-tooltip
|
||||||
placement="right"
|
placement="right"
|
||||||
:effect="isDark ? 'dark' : 'light'"
|
:visible="visible"
|
||||||
|
:effect="tooltipEffect"
|
||||||
:content="props.isActive ? '点击折叠' : '点击展开'"
|
:content="props.isActive ? '点击折叠' : '点击展开'"
|
||||||
>
|
>
|
||||||
<IconifyIconOffline
|
<IconifyIconOffline
|
||||||
:icon="props.isActive ? MenuFold : MenuUnfold"
|
:icon="MenuFold"
|
||||||
class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
|
:class="iconClass"
|
||||||
|
:style="{ transform: props.isActive ? 'none' : 'rotateY(180deg)' }"
|
||||||
@click="toggleClick"
|
@click="toggleClick"
|
||||||
|
@mouseenter="visible = true"
|
||||||
|
@mouseleave="visible = false"
|
||||||
/>
|
/>
|
||||||
</el-tooltip>
|
</el-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import EpArrowDown from "@iconify-icons/ep/arrow-down";
|
|||||||
import ArrowLeft from "@iconify-icons/ep/arrow-left";
|
import ArrowLeft from "@iconify-icons/ep/arrow-left";
|
||||||
import ArrowRight from "@iconify-icons/ep/arrow-right";
|
import ArrowRight from "@iconify-icons/ep/arrow-right";
|
||||||
|
|
||||||
const { layout, isCollapse } = useNav();
|
const { layout, isCollapse, tooltipEffect } = useNav();
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
item: {
|
item: {
|
||||||
@@ -200,8 +200,9 @@ function resolvePath(routePath) {
|
|||||||
<el-tooltip
|
<el-tooltip
|
||||||
v-else
|
v-else
|
||||||
placement="top"
|
placement="top"
|
||||||
|
:effect="tooltipEffect"
|
||||||
:offset="-10"
|
:offset="-10"
|
||||||
:disabled="!onlyOneChild.showTooltip"
|
:disabled="!isCollapse && !onlyOneChild.showTooltip"
|
||||||
>
|
>
|
||||||
<template #content>
|
<template #content>
|
||||||
{{ onlyOneChild.meta.title }}
|
{{ onlyOneChild.meta.title }}
|
||||||
@@ -245,8 +246,9 @@ function resolvePath(routePath) {
|
|||||||
<el-tooltip
|
<el-tooltip
|
||||||
v-else
|
v-else
|
||||||
placement="top"
|
placement="top"
|
||||||
|
:effect="tooltipEffect"
|
||||||
:offset="-10"
|
:offset="-10"
|
||||||
:disabled="!isCollapse || !props.item.showTooltip"
|
:disabled="!props.item.showTooltip"
|
||||||
>
|
>
|
||||||
<template #content>
|
<template #content>
|
||||||
{{ props.item.meta.title }}
|
{{ props.item.meta.title }}
|
||||||
|
|||||||
@@ -17,6 +17,8 @@ export function useNav() {
|
|||||||
const pureApp = useAppStoreHook();
|
const pureApp = useAppStoreHook();
|
||||||
const routers = useRouter().options.routes;
|
const routers = useRouter().options.routes;
|
||||||
const { wholeMenus } = storeToRefs(usePermissionStoreHook());
|
const { wholeMenus } = storeToRefs(usePermissionStoreHook());
|
||||||
|
/** 平台`layout`中所有`el-tooltip`的`effect`配置,默认`light` */
|
||||||
|
const tooltipEffect = getConfig()?.TooltipEffect ?? "light";
|
||||||
|
|
||||||
/** 用户名 */
|
/** 用户名 */
|
||||||
const username = computed(() => {
|
const username = computed(() => {
|
||||||
@@ -136,6 +138,7 @@ export function useNav() {
|
|||||||
isCollapse,
|
isCollapse,
|
||||||
pureApp,
|
pureApp,
|
||||||
username,
|
username,
|
||||||
avatarsStyle
|
avatarsStyle,
|
||||||
|
tooltipEffect
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,7 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import "animate.css";
|
import "animate.css";
|
||||||
|
// vxe-table的所有icon不支持component模式,间接依赖了font-awesome
|
||||||
|
// import "font-awesome/css/font-awesome.min.css";
|
||||||
import { setType } from "./types";
|
import { setType } from "./types";
|
||||||
import { emitter } from "@/utils/mitt";
|
import { emitter } from "@/utils/mitt";
|
||||||
import { useLayout } from "./hooks/useLayout";
|
import { useLayout } from "./hooks/useLayout";
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
import "xe-utils";
|
import "xe-utils";
|
||||||
import "./index.scss";
|
import "./index.scss";
|
||||||
import { App } from "vue";
|
import { App } from "vue";
|
||||||
import "font-awesome/css/font-awesome.min.css";
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
// 核心
|
// 核心
|
||||||
|
|||||||
@@ -16,6 +16,7 @@ import {
|
|||||||
storageSession,
|
storageSession,
|
||||||
isIncludeAllChildren
|
isIncludeAllChildren
|
||||||
} from "@pureadmin/utils";
|
} from "@pureadmin/utils";
|
||||||
|
import { getConfig } from "@/config";
|
||||||
import { buildHierarchyTree } from "@/utils/tree";
|
import { buildHierarchyTree } from "@/utils/tree";
|
||||||
import { cloneDeep, intersection } from "lodash-unified";
|
import { cloneDeep, intersection } from "lodash-unified";
|
||||||
import { sessionKey, type DataInfo } from "@/utils/auth";
|
import { sessionKey, type DataInfo } from "@/utils/auth";
|
||||||
@@ -151,42 +152,66 @@ function addPathMatch() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 初始化路由 */
|
/** 处理动态路由(后端返回的路由) */
|
||||||
function initRouter() {
|
function handleAsyncRoutes(routeList) {
|
||||||
return new Promise(resolve => {
|
if (routeList.length === 0) {
|
||||||
getAsyncRoutes().then(({ data }) => {
|
usePermissionStoreHook().handleWholeMenus(routeList);
|
||||||
if (data.length === 0) {
|
} else {
|
||||||
usePermissionStoreHook().handleWholeMenus(data);
|
formatFlatteningRoutes(addAsyncRoutes(routeList)).map(
|
||||||
resolve(router);
|
(v: RouteRecordRaw) => {
|
||||||
} else {
|
// 防止重复添加路由
|
||||||
formatFlatteningRoutes(addAsyncRoutes(data)).map(
|
if (
|
||||||
(v: RouteRecordRaw) => {
|
router.options.routes[0].children.findIndex(
|
||||||
// 防止重复添加路由
|
value => value.path === v.path
|
||||||
if (
|
) !== -1
|
||||||
router.options.routes[0].children.findIndex(
|
) {
|
||||||
value => value.path === v.path
|
return;
|
||||||
) !== -1
|
} else {
|
||||||
) {
|
// 切记将路由push到routes后还需要使用addRoute,这样路由才能正常跳转
|
||||||
return;
|
router.options.routes[0].children.push(v);
|
||||||
} else {
|
// 最终路由进行升序
|
||||||
// 切记将路由push到routes后还需要使用addRoute,这样路由才能正常跳转
|
ascending(router.options.routes[0].children);
|
||||||
router.options.routes[0].children.push(v);
|
if (!router.hasRoute(v?.name)) router.addRoute(v);
|
||||||
// 最终路由进行升序
|
const flattenRouters: any = router
|
||||||
ascending(router.options.routes[0].children);
|
.getRoutes()
|
||||||
if (!router.hasRoute(v?.name)) router.addRoute(v);
|
.find(n => n.path === "/");
|
||||||
const flattenRouters: any = router
|
router.addRoute(flattenRouters);
|
||||||
.getRoutes()
|
}
|
||||||
.find(n => n.path === "/");
|
|
||||||
router.addRoute(flattenRouters);
|
|
||||||
}
|
|
||||||
resolve(router);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
usePermissionStoreHook().handleWholeMenus(data);
|
|
||||||
}
|
}
|
||||||
addPathMatch();
|
);
|
||||||
|
usePermissionStoreHook().handleWholeMenus(routeList);
|
||||||
|
}
|
||||||
|
addPathMatch();
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 初始化路由(`new Promise` 写法防止在异步请求中造成无限循环)*/
|
||||||
|
function initRouter() {
|
||||||
|
if (getConfig()?.CachingAsyncRoutes) {
|
||||||
|
// 开启动态路由缓存本地sessionStorage
|
||||||
|
const key = "async-routes";
|
||||||
|
const asyncRouteList = storageSession.getItem(key) as any;
|
||||||
|
if (asyncRouteList && asyncRouteList?.length > 0) {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
handleAsyncRoutes(asyncRouteList);
|
||||||
|
resolve(router);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
getAsyncRoutes().then(({ data }) => {
|
||||||
|
handleAsyncRoutes(data);
|
||||||
|
storageSession.setItem(key, data);
|
||||||
|
resolve(router);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
return new Promise(resolve => {
|
||||||
|
getAsyncRoutes().then(({ data }) => {
|
||||||
|
handleAsyncRoutes(data);
|
||||||
|
resolve(router);
|
||||||
|
});
|
||||||
});
|
});
|
||||||
});
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -156,6 +156,19 @@ html.dark {
|
|||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式,表现更鲜明 */
|
||||||
|
.el-icon {
|
||||||
|
&.el-dialog__close,
|
||||||
|
&.el-drawer__close,
|
||||||
|
&.el-message-box__close,
|
||||||
|
&.el-notification__closeBtn {
|
||||||
|
&:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.85) !important;
|
||||||
|
background-color: rgba(255, 255, 255, 0.12);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 克隆并自定义 ElMessage 样式,不会影响 ElMessage 原本样式,在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可,非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
|
/* 克隆并自定义 ElMessage 样式,不会影响 ElMessage 原本样式,在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可,非暗黑模式在 src/style/element-plus.scss 文件进行了适配 */
|
||||||
.pure-message {
|
.pure-message {
|
||||||
background-image: initial !important;
|
background-image: initial !important;
|
||||||
|
|||||||
@@ -46,6 +46,12 @@
|
|||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 自定义 tooltip 的类名 */
|
||||||
|
.pure-tooltip {
|
||||||
|
// 右侧操作面板right-panel类名的z-index为40000,tooltip需要大于它才能显示
|
||||||
|
z-index: 41000 !important;
|
||||||
|
}
|
||||||
|
|
||||||
/* nprogress 适配 element-plus 的主题色 */
|
/* nprogress 适配 element-plus 的主题色 */
|
||||||
#nprogress {
|
#nprogress {
|
||||||
& .bar {
|
& .bar {
|
||||||
@@ -63,6 +69,33 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 全局覆盖element-plus的el-dialog、el-drawer、el-message-box、el-notification组件右上角关闭图标的样式,表现更鲜明 */
|
||||||
|
.el-dialog__headerbtn,
|
||||||
|
.el-message-box__headerbtn {
|
||||||
|
&:hover {
|
||||||
|
.el-dialog__close {
|
||||||
|
color: var(--el-color-info) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-icon {
|
||||||
|
&.el-dialog__close,
|
||||||
|
&.el-drawer__close,
|
||||||
|
&.el-message-box__close,
|
||||||
|
&.el-notification__closeBtn {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
outline: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
transition: background-color 0.2s, color 0.2s;
|
||||||
|
&:hover {
|
||||||
|
color: rgba(0, 0, 0, 0.88) !important;
|
||||||
|
background-color: rgba(0, 0, 0, 0.06);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/* 克隆并自定义 ElMessage 样式,不会影响 ElMessage 原本样式,在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可,暗黑模式在 src/style/dark.scss 文件进行了适配 */
|
/* 克隆并自定义 ElMessage 样式,不会影响 ElMessage 原本样式,在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可,暗黑模式在 src/style/dark.scss 文件进行了适配 */
|
||||||
.pure-message {
|
.pure-message {
|
||||||
border-width: 0 !important;
|
border-width: 0 !important;
|
||||||
|
|||||||
@@ -26,9 +26,12 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* breadcrumb transition */
|
/* breadcrumb transition */
|
||||||
.breadcrumb-enter-active,
|
.breadcrumb-enter-active {
|
||||||
|
transition: all 0.4s;
|
||||||
|
}
|
||||||
|
|
||||||
.breadcrumb-leave-active {
|
.breadcrumb-leave-active {
|
||||||
transition: all 0.5s;
|
transition: all 0.3s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.breadcrumb-enter-from,
|
.breadcrumb-enter-from,
|
||||||
|
|||||||
@@ -70,7 +70,7 @@ export function setToken(data: DataInfo<Date>) {
|
|||||||
/** 删除`token`以及key值为`user-info`的session信息 */
|
/** 删除`token`以及key值为`user-info`的session信息 */
|
||||||
export function removeToken() {
|
export function removeToken() {
|
||||||
Cookies.remove(TokenKey);
|
Cookies.remove(TokenKey);
|
||||||
sessionStorage.removeItem(sessionKey);
|
sessionStorage.clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 格式化token(jwt格式) */
|
/** 格式化token(jwt格式) */
|
||||||
|
|||||||
@@ -33,6 +33,7 @@ function onChange() {
|
|||||||
.loginByUsername({ username: username.value, password: "admin123" })
|
.loginByUsername({ username: username.value, password: "admin123" })
|
||||||
.then(res => {
|
.then(res => {
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
|
sessionStorage.removeItem("async-routes");
|
||||||
usePermissionStoreHook().clearAllCachePage();
|
usePermissionStoreHook().clearAllCachePage();
|
||||||
initRouter();
|
initRouter();
|
||||||
}
|
}
|
||||||
|
|||||||
19
types/global.d.ts
vendored
19
types/global.d.ts
vendored
@@ -6,7 +6,6 @@ import type {
|
|||||||
} from "vue";
|
} from "vue";
|
||||||
import type { ECharts } from "echarts";
|
import type { ECharts } from "echarts";
|
||||||
import type { IconifyIcon } from "@iconify/vue";
|
import type { IconifyIcon } from "@iconify/vue";
|
||||||
import type { ResponsiveStorage } from "./index";
|
|
||||||
import type { TableColumns } from "@pureadmin/table";
|
import type { TableColumns } from "@pureadmin/table";
|
||||||
import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
|
import { type RouteComponent, type RouteLocationNormalized } from "vue-router";
|
||||||
|
|
||||||
@@ -95,14 +94,8 @@ declare global {
|
|||||||
ShowLogo?: boolean;
|
ShowLogo?: boolean;
|
||||||
ShowModel?: string;
|
ShowModel?: string;
|
||||||
MenuArrowIconNoTransition?: boolean;
|
MenuArrowIconNoTransition?: boolean;
|
||||||
MapConfigure?: {
|
CachingAsyncRoutes?: boolean;
|
||||||
amapKey?: string;
|
TooltipEffect?: Effect;
|
||||||
options: {
|
|
||||||
resizeEnable?: boolean;
|
|
||||||
center?: number[];
|
|
||||||
zoom?: number;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@@ -127,14 +120,6 @@ declare global {
|
|||||||
epThemeColor?: string;
|
epThemeColor?: string;
|
||||||
showLogo?: boolean;
|
showLogo?: boolean;
|
||||||
showModel?: string;
|
showModel?: string;
|
||||||
mapConfigure?: {
|
|
||||||
amapKey?: string;
|
|
||||||
options: {
|
|
||||||
resizeEnable?: boolean;
|
|
||||||
center?: number[];
|
|
||||||
zoom?: number;
|
|
||||||
};
|
|
||||||
};
|
|
||||||
username?: string;
|
username?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
2
types/index.d.ts
vendored
2
types/index.d.ts
vendored
@@ -45,6 +45,8 @@ type TimeoutHandle = ReturnType<typeof setTimeout>;
|
|||||||
|
|
||||||
type IntervalHandle = ReturnType<typeof setInterval>;
|
type IntervalHandle = ReturnType<typeof setInterval>;
|
||||||
|
|
||||||
|
type Effect = "light" | "dark";
|
||||||
|
|
||||||
interface ChangeEvent extends Event {
|
interface ChangeEvent extends Event {
|
||||||
target: HTMLInputElement;
|
target: HTMLInputElement;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user