Browse Source

release: update `3.9.1`

i18n
xiaoxian521 2 years ago
parent
commit
17d1b98bdf
  1. 4
      package.json
  2. 20
      pnpm-lock.yaml
  3. 5
      public/serverConfig.json
  4. 4
      src/layout/components/notice/noticeItem.vue
  5. 103
      src/layout/components/setting/index.vue
  6. 8
      src/layout/components/sidebar/breadCrumb.vue
  7. 12
      src/layout/components/sidebar/leftCollapse.vue
  8. 8
      src/layout/components/sidebar/sidebarItem.vue
  9. 3
      src/layout/hooks/useNav.ts
  10. 6
      src/style/element-plus.scss
  11. 7
      src/style/transition.scss
  12. 2
      types/global.d.ts
  13. 2
      types/index.d.ts

4
package.json

@ -1,6 +1,6 @@
{ {
"name": "pure-admin-thin", "name": "pure-admin-thin",
"version": "3.9.0",
"version": "3.9.1",
"private": true, "private": true,
"scripts": { "scripts": {
"dev": "NODE_OPTIONS=--max-old-space-size=4096 vite", "dev": "NODE_OPTIONS=--max-old-space-size=4096 vite",
@ -39,7 +39,7 @@
"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",

20
pnpm-lock.yaml

@ -36,7 +36,7 @@ specifiers:
cssnano: ^5.1.14 cssnano: ^5.1.14
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
eslint: ^8.8.0 eslint: ^8.8.0
eslint-plugin-prettier: ^4.0.0 eslint-plugin-prettier: ^4.0.0
@ -94,8 +94,8 @@ specifiers:
dependencies: dependencies:
'@ctrl/tinycolor': 3.4.1 '@ctrl/tinycolor': 3.4.1
'@pureadmin/descriptions': 1.1.1_element-plus@2.2.25
'@pureadmin/table': 1.8.1_element-plus@2.2.25
'@pureadmin/descriptions': 1.1.1_element-plus@2.2.26
'@pureadmin/table': 1.8.1_element-plus@2.2.26
'@pureadmin/utils': 1.7.1_aotapuqn7htzdjltsyimavekky '@pureadmin/utils': 1.7.1_aotapuqn7htzdjltsyimavekky
'@vueuse/core': 9.6.0_vue@3.2.45 '@vueuse/core': 9.6.0_vue@3.2.45
'@vueuse/motion': 2.0.0-beta.12_vue@3.2.45 '@vueuse/motion': 2.0.0-beta.12_vue@3.2.45
@ -103,7 +103,7 @@ dependencies:
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_vue@3.2.45
element-plus: 2.2.26_vue@3.2.45
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
@ -910,22 +910,22 @@ packages:
fastq: 1.13.0 fastq: 1.13.0
dev: true dev: true
/@pureadmin/descriptions/1.1.1_element-plus@2.2.25:
/@pureadmin/descriptions/1.1.1_element-plus@2.2.26:
resolution: {integrity: sha512-4BHLKomLU/LxGs5EUA+h+aKNrJEkhrU6+QE8VoWfJZ8VTU6ddvFLT/Pi4WuO5CWNXM9ZjqvHLFFVwEPlKntqtg==} resolution: {integrity: sha512-4BHLKomLU/LxGs5EUA+h+aKNrJEkhrU6+QE8VoWfJZ8VTU6ddvFLT/Pi4WuO5CWNXM9ZjqvHLFFVwEPlKntqtg==}
peerDependencies: peerDependencies:
element-plus: ^2.0.0 element-plus: ^2.0.0
dependencies: dependencies:
'@element-plus/icons-vue': 2.0.10_vue@3.2.45 '@element-plus/icons-vue': 2.0.10_vue@3.2.45
element-plus: 2.2.25_vue@3.2.45
element-plus: 2.2.26_vue@3.2.45
vue: 3.2.45 vue: 3.2.45
dev: false dev: false
/@pureadmin/table/1.8.1_element-plus@2.2.25:
/@pureadmin/table/1.8.1_element-plus@2.2.26:
resolution: {integrity: sha512-oZ5GYmLTDgQ64U6+yKFjvpZG2Seuudk3hOWnUogMvKxhIvaRQsGBHbvyg47asMmXxUyeilq+nRumyuiuV7WJTg==} resolution: {integrity: sha512-oZ5GYmLTDgQ64U6+yKFjvpZG2Seuudk3hOWnUogMvKxhIvaRQsGBHbvyg47asMmXxUyeilq+nRumyuiuV7WJTg==}
peerDependencies: peerDependencies:
element-plus: ^2.0.0 element-plus: ^2.0.0
dependencies: dependencies:
element-plus: 2.2.25_vue@3.2.45
element-plus: 2.2.26_vue@3.2.45
vue: 3.2.45 vue: 3.2.45
dev: false dev: false
@ -2399,8 +2399,8 @@ packages:
resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==} resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
dev: true dev: true
/element-plus/2.2.25_vue@3.2.45:
resolution: {integrity: sha512-HC8CWY31e6pPyBpgqI0QnWkBgs0vRzdYnEw3mpdM/NlKfp0PtNFX7NESQLomqoIulH5ftL09hjQmJNvZBQpthQ==}
/element-plus/2.2.26_vue@3.2.45:
resolution: {integrity: sha512-O/rdY5m9DkclpVg8r3GynyqCunm7MxSR142xSsjrZA77bi7bcwA3SIy6SPEDqHi5R4KqgkGYgKSp4Q4e3irbYg==}
peerDependencies: peerDependencies:
vue: ^3.2.0 vue: ^3.2.0
dependencies: dependencies:

5
public/serverConfig.json

@ -1,5 +1,5 @@
{ {
"Version": "3.9.0",
"Version": "3.9.1",
"Title": "PureAdmin", "Title": "PureAdmin",
"FixedHeader": true, "FixedHeader": true,
"HiddenSideBar": false, "HiddenSideBar": false,
@ -17,5 +17,6 @@
"ShowLogo": true, "ShowLogo": true,
"ShowModel": "smart", "ShowModel": "smart",
"MenuArrowIconNoTransition": true, "MenuArrowIconNoTransition": true,
"CachingAsyncRoutes": true
"CachingAsyncRoutes": true,
"TooltipEffect": "light"
} }

4
src/layout/components/notice/noticeItem.vue

@ -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"

103
src/layout/components/setting/index.vue

@ -1,13 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { import {
ref,
unref,
watch,
reactive,
computed,
nextTick,
useCssModule
} from "vue";
useDark,
debounce,
useGlobal,
storageLocal,
storageSession
} from "@pureadmin/utils";
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 { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags"; import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import { ref, unref, watch, reactive, computed, nextTick } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import {
useDark,
debounce,
useGlobal,
storageLocal,
storageSession
} from "@pureadmin/utils";
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import dayIcon from "@/assets/svg/day.svg?component"; import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component"; import darkIcon from "@/assets/svg/dark.svg?component";
@ -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>
.isSelect {
<style lang="scss" scoped>
: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;

8
src/layout/components/sidebar/breadCrumb.vue

@ -97,8 +97,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">
<el-breadcrumb-item v-for="item in levelList" :key="item.path">
<transition-group name="breadcrumb">
<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)">
{{ transformI18n(item.meta.title) }} {{ transformI18n(item.meta.title) }}
</a> </a>

12
src/layout/components/sidebar/leftCollapse.vue

@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { useDark } from "@pureadmin/utils";
import { ref } 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"; import MenuUnfold from "@iconify-icons/ri/menu-unfold-fill";
@ -10,7 +11,9 @@ 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 emit = defineEmits<{ const emit = defineEmits<{
(e: "toggleClick"): void; (e: "toggleClick"): void;
@ -25,13 +28,16 @@ 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="props.isActive ? MenuFold : MenuUnfold"
class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1" class="cursor-pointer inline-block align-middle text-primary hover:text-primary dark:hover:!text-white w-[16px] h-[16px] ml-4 mb-1"
@click="toggleClick" @click="toggleClick"
@mouseenter="visible = true"
@mouseleave="visible = false"
/> />
</el-tooltip> </el-tooltip>
</div> </div>

8
src/layout/components/sidebar/sidebarItem.vue

@ -12,7 +12,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: {
@ -201,8 +201,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>
{{ transformI18n(onlyOneChild.meta.title) }} {{ transformI18n(onlyOneChild.meta.title) }}
@ -246,8 +247,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>
{{ transformI18n(props.item.meta.title) }} {{ transformI18n(props.item.meta.title) }}

3
src/layout/hooks/useNav.ts

@ -18,6 +18,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(() => {
@ -153,6 +155,7 @@ export function useNav() {
pureApp, pureApp,
username, username,
avatarsStyle, avatarsStyle,
tooltipEffect,
getDropdownItemStyle, getDropdownItemStyle,
getDropdownItemClass getDropdownItemClass
}; };

6
src/style/element-plus.scss

@ -46,6 +46,12 @@
padding: 0 !important; padding: 0 !important;
} }
/* 自定义 tooltip 的类名 */
.pure-tooltip {
// 右侧操作面板right-panel类名的z-index为40000tooltip需要大于它才能显示
z-index: 41000 !important;
}
/* nprogress 适配 element-plus 的主题色 */ /* nprogress 适配 element-plus 的主题色 */
#nprogress { #nprogress {
& .bar { & .bar {

7
src/style/transition.scss

@ -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,

2
types/global.d.ts

@ -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";
@ -96,6 +95,7 @@ declare global {
ShowModel?: string; ShowModel?: string;
MenuArrowIconNoTransition?: boolean; MenuArrowIconNoTransition?: boolean;
CachingAsyncRoutes?: boolean; CachingAsyncRoutes?: boolean;
TooltipEffect?: Effect;
} }
/** /**

2
types/index.d.ts

@ -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;
} }

Loading…
Cancel
Save