twh_eastasia/pure-admin-thin
1
0
Fork 0
mirror of https://github.com/pure-admin/pure-admin-thin.git synced 2025-12-14 22:30:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

release: update 5.9.0

Browse Source
This commit is contained in:
xiaoxian521
2024-12-15 10:47:55 +08:00
parent a4f9251789
commit c50bb9981b
25 changed files with 2509 additions and 3163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,7 +4,7 @@ import { IconifyIconOnline, IconifyIconOffline, FontIcon } from "../index";
/**
* 支持 `iconfont`、自定义 `svg` 以及 `iconify` 中所有的图标
* @see 点击查看文档图标篇 {@link https://pure-admin.github.io/pure-admin-doc/pages/icon/}
* @see 点击查看文档图标篇 {@link https://pure-admin.cn/pages/icon/}
* @param icon 必传 图标
* @param attrs 可选 iconType 属性
* @returns Component

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

@@ -54,7 +54,7 @@ const props = {
export default defineComponent({
name: "PureTableBar",
props,
emits: ["refresh"],
emits: ["refresh", "fullscreen"],
setup(props, { emit, slots, attrs }) {
const size = ref("default");
const loading = ref(false);
@@ -117,6 +117,11 @@ export default defineComponent({
toggleRowExpansionAll(props.tableRef.data, isExpandAll.value);
}
function onFullscreen() {
isFullscreen.value = !isFullscreen.value;
emit("fullscreen", isFullscreen.value);
}
function toggleRowExpansionAll(data, isExpansion) {
data.forEach(item => {
props.tableRef.toggleRowExpansion(item, isExpansion);
@@ -378,7 +383,7 @@ export default defineComponent({
class={["w-[16px]", iconClass.value]}
icon={isFullscreen.value ? ExitFullscreen : Fullscreen}
v-tippy={isFullscreen.value ? "退出全屏" : "全屏"}
onClick={() => (isFullscreen.value = !isFullscreen.value)}
onClick={() => onFullscreen()}
/>
</div>
</div>

2
src/components/ReSegmented/src/type.ts
View File

@@ -6,7 +6,7 @@ export interface OptionsType {
label?: string | (() => VNode | Component);
/**
* @description 图标，采用平台内置的 `useRenderIcon` 函数渲染
* @see {@link 用法参考 https://pure-admin.github.io/pure-admin-doc/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
* @see {@link 用法参考 https://pure-admin.cn/pages/icon/#%E9%80%9A%E7%94%A8%E5%9B%BE%E6%A0%87-userendericon-hooks }
*/
icon?: string | Component;
/** 图标属性、样式配置 */

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

@@ -14,7 +14,6 @@ import { emitter } from "@/utils/mitt";
import LayPanel from "../lay-panel/index.vue";
import { useNav } from "@/layout/hooks/useNav";
import { useAppStoreHook } from "@/store/modules/app";
import { toggleTheme } from "@pureadmin/theme/dist/browser-utils";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import Segmented, { type OptionsType } from "@/components/ReSegmented";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
@@ -50,9 +49,7 @@ const {
if (unref(layoutTheme)) {
const layout = unref(layoutTheme).layout;
const theme = unref(layoutTheme).theme;
toggleTheme({
scopeName: `layout-theme-${theme}`
});
document.documentElement.setAttribute("data-theme", theme);
setLayoutModel(layout);
}

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

@@ -1,6 +1,6 @@
<script setup lang="ts">
import path from "path";
import { getConfig } from "@/config";
import { posix } from "path-browserify";
import { menuType } from "@/layout/types";
import { ReText } from "@/components/ReText";
import { useNav } from "@/layout/hooks/useNav";
@@ -99,8 +99,7 @@ function resolvePath(routePath) {
if (httpReg.test(routePath) || httpReg.test(props.basePath)) {
return routePath || props.basePath;
} else {
// 使用path.posix.resolve替代path.resolve 避免windows环境下使用electron出现盘符问题
return path.posix.resolve(props.basePath, routePath);
return posix.resolve(props.basePath, routePath);
}
}
</script>

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

@@ -63,7 +63,7 @@ const { title, getLogo } = useNav();
font-size: 18px;
font-weight: 600;
line-height: 32px;
color: $subMenuActiveText;
color: var(--pure-theme-sub-menu-active-text);
text-overflow: ellipsis;
white-space: nowrap;
}

11
src/layout/hooks/useDataThemeChange.ts
View File

@@ -6,14 +6,9 @@ import { routerArrays } from "@/layout/types";
import { router, resetRouter } from "@/router";
import type { themeColorsType } from "../types";
import { useAppStoreHook } from "@/store/modules/app";
import { useGlobal, storageLocal } from "@pureadmin/utils";
import { useEpThemeStoreHook } from "@/store/modules/epTheme";
import { useMultiTagsStoreHook } from "@/store/modules/multiTags";
import {
darken,
lighten,
toggleTheme
} from "@pureadmin/theme/dist/browser-utils";
import { darken, lighten, useGlobal, storageLocal } from "@pureadmin/utils";
export function useDataThemeChange() {
const { layoutTheme, layout } = useLayout();
@@ -54,9 +49,7 @@ export function useDataThemeChange() {
isClick = true
) {
layoutTheme.value.theme = theme;
toggleTheme({
scopeName: `layout-theme-${theme}`
});
document.documentElement.setAttribute("data-theme", theme);
// 如果非isClick，保留之前的themeColor
const storageThemeColor = $storage.layout.themeColor;
$storage.layout = {

129
src/layout/theme/index.ts
View File

@@ -1,129 +0,0 @@
/**
* @description ⚠️：此文件仅供主题插件使用，请不要在此文件中导出别的工具函数（仅在页面加载前运行）
*/
import type { multipleScopeVarsOptions } from "@pureadmin/theme";
/** 预设主题色 */
const themeColors = {
/* 亮白色 */
light: {
subMenuActiveText: "#000000d9",
menuBg: "#fff",
menuHover: "#f6f6f6",
subMenuBg: "#fff",
subMenuActiveBg: "#e0ebf6",
menuText: "rgb(0 0 0 / 60%)",
sidebarLogo: "#fff",
menuTitleHover: "#000",
menuActiveBefore: "#4091f7"
},
/* 道奇蓝 */
default: {
subMenuActiveText: "#fff",
menuBg: "#001529",
menuHover: "rgb(64 145 247 / 15%)",
subMenuBg: "#0f0303",
subMenuActiveBg: "#4091f7",
menuText: "rgb(254 254 254 / 65%)",
sidebarLogo: "#002140",
menuTitleHover: "#fff",
menuActiveBefore: "#4091f7"
},
/* 深紫罗兰色 */
saucePurple: {
subMenuActiveText: "#fff",
menuBg: "#130824",
menuHover: "rgb(105 58 201 / 15%)",
subMenuBg: "#000",
subMenuActiveBg: "#693ac9",
menuText: "#7a80b4",
sidebarLogo: "#1f0c38",
menuTitleHover: "#fff",
menuActiveBefore: "#693ac9"
},
/* 深粉色 */
pink: {
subMenuActiveText: "#fff",
menuBg: "#28081a",
menuHover: "rgb(216 68 147 / 15%)",
subMenuBg: "#000",
subMenuActiveBg: "#d84493",
menuText: "#7a80b4",
sidebarLogo: "#3f0d29",
menuTitleHover: "#fff",
menuActiveBefore: "#d84493"
},
/* 猩红色 */
dusk: {
subMenuActiveText: "#fff",
menuBg: "#2a0608",
menuHover: "rgb(225 60 57 / 15%)",
subMenuBg: "#000",
subMenuActiveBg: "#e13c39",
menuText: "rgb(254 254 254 / 65.1%)",
sidebarLogo: "#42090c",
menuTitleHover: "#fff",
menuActiveBefore: "#e13c39"
},
/* 橙红色 */
volcano: {
subMenuActiveText: "#fff",
menuBg: "#2b0e05",
menuHover: "rgb(232 95 51 / 15%)",
subMenuBg: "#0f0603",
subMenuActiveBg: "#e85f33",
menuText: "rgb(254 254 254 / 65%)",
sidebarLogo: "#441708",
menuTitleHover: "#fff",
menuActiveBefore: "#e85f33"
},
/* 绿宝石 */
mingQing: {
subMenuActiveText: "#fff",
menuBg: "#032121",
menuHover: "rgb(89 191 193 / 15%)",
subMenuBg: "#000",
subMenuActiveBg: "#59bfc1",
menuText: "#7a80b4",
sidebarLogo: "#053434",
menuTitleHover: "#fff",
menuActiveBefore: "#59bfc1"
},
/* 酸橙绿 */
auroraGreen: {
subMenuActiveText: "#fff",
menuBg: "#0b1e15",
menuHover: "rgb(96 172 128 / 15%)",
subMenuBg: "#000",
subMenuActiveBg: "#60ac80",
menuText: "#7a80b4",
sidebarLogo: "#112f21",
menuTitleHover: "#fff",
menuActiveBefore: "#60ac80"
}
};
/**
* @description 将预设主题色处理成主题插件所需格式
*/
export const genScssMultipleScopeVars = (): multipleScopeVarsOptions[] => {
const result = [] as multipleScopeVarsOptions[];
Object.keys(themeColors).forEach(key => {
result.push({
scopeName: `layout-theme-${key}`,
varsContent: `
$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;
$menuBg: ${themeColors[key].menuBg} !default;
$menuHover: ${themeColors[key].menuHover} !default;
$subMenuBg: ${themeColors[key].subMenuBg} !default;
$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;
$menuText: ${themeColors[key].menuText} !default;
$sidebarLogo: ${themeColors[key].sidebarLogo} !default;
$menuTitleHover: ${themeColors[key].menuTitleHover} !default;
$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;
`
} as multipleScopeVarsOptions);
});
return result;
};

2
src/plugins/i18n.ts
View File

@@ -50,7 +50,7 @@ function getObjectKeys(obj) {
if (obj[k] && isObject(obj[k])) {
stack.push({ obj: obj[k], key: newKey });
} else {
keys.add(newKey);
keys.add(key);
}
}
}

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

@@ -163,9 +163,10 @@
/* 仿 el-scrollbar 滚动条样式，支持大多数浏览器，如Chrome、Edge、Firefox、Safari等。整体暗色风格在 src/style/dark.scss 文件进行了适配 */
.pure-scrollbar {
scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
/* Firefox */
scrollbar-width: thin; /* 可选值为 'auto', 'thin', 'none' */
scrollbar-color: rgb(221 222 224) transparent; /* 滑块颜色、轨道颜色 */
::-webkit-scrollbar {
width: 6px; /* 滚动条宽度 */
}

19
src/style/index.scss
View File

@@ -1,7 +1,8 @@
@import "./transition";
@import "./element-plus";
@import "./sidebar";
@import "./dark";
@use "theme";
@use "transition";
@use "element-plus";
@use "sidebar";
@use "dark";
/* 自定义全局 CssVar */
:root {
@@ -13,6 +14,16 @@
/* switch关闭状态下的color 需要时可取用 */
--pure-switch-off-color: #a6a6a6;
/** 主题色 */
--pure-theme-sub-menu-active-text: initial;
--pure-theme-menu-bg: none;
--pure-theme-menu-hover: none;
--pure-theme-sub-menu-bg: transparent;
--pure-theme-menu-text: initial;
--pure-theme-sidebar-logo: none;
--pure-theme-menu-title-hover: initial;
--pure-theme-menu-active-before: transparent;
}
/* 灰色模式 */

82
src/style/sidebar.scss
View File

@@ -1,7 +1,5 @@
/* $sideBarWidth: vertical 模式下主体内容距离网页文档左侧的距离 */
@mixin merge-style($sideBarWidth) {
$menuActiveText: #7a80b4;
@media screen and (width >= 150px) and (width <= 420px) {
.app-main-nofixed-header {
overflow-y: hidden;
@@ -94,7 +92,7 @@
height: 100%;
overflow: visible;
font-size: 0;
background: $menuBg;
background: var(--pure-theme-menu-bg) !important;
border-right: 1px solid var(--pure-border-color);
/* 展开动画 */
@@ -150,11 +148,11 @@
.el-menu-item,
.el-sub-menu__title {
height: 50px;
color: $menuText;
color: var(--pure-theme-menu-text);
background-color: transparent !important;
&:hover {
color: $menuTitleHover !important;
color: var(--pure-theme-menu-title-hover) !important;
}
div,
@@ -173,15 +171,15 @@
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
i {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
}
}
.is-active {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
transition: color 0.3s;
}
@@ -204,7 +202,7 @@
& .el-sub-menu .el-menu-item {
min-width: $sideBarWidth !important;
font-size: 14px;
background-color: $subMenuBg !important;
background-color: var(--pure-theme-sub-menu-bg) !important;
}
/* 有子集的激活菜单左侧小竖条 */
@@ -218,7 +216,7 @@
height: 100%;
clear: both;
content: "";
background-color: $menuActiveBefore;
background-color: var(--pure-theme-menu-active-before);
transition: all var(--pure-transition-duration) ease-in-out;
transform: translateY(0);
}
@@ -253,7 +251,7 @@
/* vertical 菜单折叠 */
.el-menu--vertical {
.el-menu--popup {
background-color: $subMenuBg !important;
background-color: var(--pure-theme-sub-menu-bg) !important;
.el-menu-item {
span {
@@ -271,10 +269,10 @@
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
i {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
}
}
@@ -282,23 +280,23 @@
.el-menu .el-sub-menu__title {
min-width: $sideBarWidth !important;
font-size: 14px;
background-color: $subMenuBg !important;
background-color: var(--pure-theme-sub-menu-bg) !important;
}
.el-menu-item,
.el-sub-menu__title {
height: 50px;
line-height: 50px;
color: $menuText;
background-color: $subMenuBg;
color: var(--pure-theme-menu-text);
background-color: var(--pure-theme-sub-menu-bg);
&:hover {
color: $menuTitleHover !important;
color: var(--pure-theme-menu-title-hover) !important;
}
}
.is-active {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
transition: color 0.3s;
}
@@ -342,15 +340,15 @@
}
.el-menu--popup {
background-color: $subMenuBg !important;
background-color: var(--pure-theme-sub-menu-bg) !important;
a > .is-active.submenu-title-noDropdown {
border-bottom: none;
}
.el-menu-item {
color: $menuText;
background-color: $subMenuBg;
color: var(--pure-theme-menu-text);
background-color: var(--pure-theme-sub-menu-bg);
span {
font-size: 14px;
@@ -358,7 +356,7 @@
}
.el-sub-menu__title {
color: $menuText;
color: var(--pure-theme-menu-text);
}
}
@@ -366,31 +364,31 @@
.el-menu .el-sub-menu__title {
min-width: $sideBarWidth !important;
font-size: 14px;
background-color: $subMenuBg !important;
background-color: var(--pure-theme-sub-menu-bg) !important;
&:hover {
color: $menuTitleHover !important;
color: var(--pure-theme-menu-title-hover) !important;
}
}
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
i {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
}
}
.nest-menu .el-sub-menu > .el-sub-menu__title,
.el-menu-item {
&:hover {
color: $menuTitleHover !important;
color: var(--pure-theme-menu-title-hover) !important;
}
}
.el-menu-item.is-active {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
transition: color 0.3s;
}
@@ -415,7 +413,7 @@
justify-content: space-around;
width: 100%;
height: 48px;
background: $menuBg;
background: var(--pure-theme-menu-bg) !important;
.horizontal-header-left {
display: flex;
@@ -440,7 +438,7 @@
font-size: 18px;
font-weight: 600;
line-height: 32px;
color: $subMenuActiveText;
color: var(--pure-theme-sub-menu-active-text);
text-overflow: ellipsis;
white-space: nowrap;
}
@@ -458,7 +456,7 @@
align-items: center;
justify-content: flex-end;
min-width: 340px;
color: $subMenuActiveText;
color: var(--pure-theme-sub-menu-active-text);
/* 搜索 */
.search-container,
@@ -473,20 +471,20 @@
/* 设置 */
.set-icon {
&:hover {
background: $menuHover;
background: var(--pure-theme-menu-hover);
}
}
.dropdown-badge {
height: 48px;
color: $subMenuActiveText;
color: var(--pure-theme-sub-menu-active-text);
}
.globalization {
width: 40px;
height: 48px;
padding: 11px;
color: $subMenuActiveText;
color: var(--pure-theme-sub-menu-active-text);
cursor: pointer;
outline: none;
}
@@ -497,7 +495,7 @@
justify-content: space-around;
height: 48px;
padding: 10px;
color: $subMenuActiveText;
color: var(--pure-theme-sub-menu-active-text);
cursor: pointer;
p {
@@ -522,10 +520,10 @@
.el-menu-item,
.el-sub-menu__title {
padding-right: var(--el-menu-base-level-padding);
color: $menuText;
color: var(--pure-theme-menu-text);
&:hover {
color: $menuTitleHover !important;
color: var(--pure-theme-menu-title-hover) !important;
}
}
@@ -533,7 +531,7 @@
.el-sub-menu__title {
height: 48px;
line-height: 48px;
background: $menuBg;
background: var(--pure-theme-menu-bg) !important;
svg {
position: static !important;
@@ -542,15 +540,15 @@
.is-active > .el-sub-menu__title,
.is-active.submenu-title-noDropdown {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
i {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
}
}
.is-active {
color: $subMenuActiveText !important;
color: var(--pure-theme-sub-menu-active-text) !important;
transition: color 0.3s;
}
}
@@ -596,7 +594,7 @@ body[layout="vertical"] {
}
.sidebar-logo-container {
background: $sidebarLogo;
background: var(--pure-theme-sidebar-logo);
}
.hideSidebar {

95
src/style/theme.scss Normal file
View File

@@ -0,0 +1,95 @@
/* 亮白色 */
html[data-theme="light"] {
--pure-theme-sub-menu-active-text: #000000d9;
--pure-theme-menu-bg: #fff;
--pure-theme-menu-hover: #f6f6f6;
--pure-theme-sub-menu-bg: #fff;
--pure-theme-menu-text: rgb(0 0 0 / 60%);
--pure-theme-sidebar-logo: #fff;
--pure-theme-menu-title-hover: #000;
--pure-theme-menu-active-before: #4091f7;
}
/* 道奇蓝 */
html[data-theme="default"] {
--pure-theme-sub-menu-active-text: #fff;
--pure-theme-menu-bg: #001529;
--pure-theme-menu-hover: rgb(64 145 247 / 15%);
--pure-theme-sub-menu-bg: #0f0303;
--pure-theme-menu-text: rgb(254 254 254 / 65%);
--pure-theme-sidebar-logo: #002140;
--pure-theme-menu-title-hover: #fff;
--pure-theme-menu-active-before: #4091f7;
}
/* 深紫罗兰色 */
html[data-theme="saucePurple"] {
--pure-theme-sub-menu-active-text: #fff;
--pure-theme-menu-bg: #130824;
--pure-theme-menu-hover: rgb(105 58 201 / 15%);
--pure-theme-sub-menu-bg: #000;
--pure-theme-menu-text: #7a80b4;
--pure-theme-sidebar-logo: #1f0c38;
--pure-theme-menu-title-hover: #fff;
--pure-theme-menu-active-before: #693ac9;
}
/* 深粉色 */
html[data-theme="pink"] {
--pure-theme-sub-menu-active-text: #fff;
--pure-theme-menu-bg: #28081a;
--pure-theme-menu-hover: rgb(216 68 147 / 15%);
--pure-theme-sub-menu-bg: #000;
--pure-theme-menu-text: #7a80b4;
--pure-theme-sidebar-logo: #3f0d29;
--pure-theme-menu-title-hover: #fff;
--pure-theme-menu-active-before: #d84493;
}
/* 猩红色 */
html[data-theme="dusk"] {
--pure-theme-sub-menu-active-text: #fff;
--pure-theme-menu-bg: #2a0608;
--pure-theme-menu-hover: rgb(225 60 57 / 15%);
--pure-theme-sub-menu-bg: #000;
--pure-theme-menu-text: rgb(254 254 254 / 65.1%);
--pure-theme-sidebar-logo: #42090c;
--pure-theme-menu-title-hover: #fff;
--pure-theme-menu-active-before: #e13c39;
}
/* 橙红色 */
html[data-theme="volcano"] {
--pure-theme-sub-menu-active-text: #fff;
--pure-theme-menu-bg: #2b0e05;
--pure-theme-menu-hover: rgb(232 95 51 / 15%);
--pure-theme-sub-menu-bg: #0f0603;
--pure-theme-menu-text: rgb(254 254 254 / 65%);
--pure-theme-sidebar-logo: #441708;
--pure-theme-menu-title-hover: #fff;
--pure-theme-menu-active-before: #e85f33;
}
/* 绿宝石 */
html[data-theme="mingQing"] {
--pure-theme-sub-menu-active-text: #fff;
--pure-theme-menu-bg: #032121;
--pure-theme-menu-hover: rgb(89 191 193 / 15%);
--pure-theme-sub-menu-bg: #000;
--pure-theme-menu-text: #7a80b4;
--pure-theme-sidebar-logo: #053434;
--pure-theme-menu-title-hover: #fff;
--pure-theme-menu-active-before: #59bfc1;
}
/* 酸橙绿 */
html[data-theme="auroraGreen"] {
--pure-theme-sub-menu-active-text: #fff;
--pure-theme-menu-bg: #0b1e15;
--pure-theme-menu-hover: rgb(96 172 128 / 15%);
--pure-theme-sub-menu-bg: #000;
--pure-theme-menu-text: #7a80b4;
--pure-theme-sidebar-logo: #112f21;
--pure-theme-menu-title-hover: #fff;
--pure-theme-menu-active-before: #60ac80;
}

2
src/utils/print.ts
View File

@@ -172,7 +172,7 @@ Print.prototype = {
if (!frameWindow.document.execCommand("print", false, null)) {
frameWindow.print();
}
} catch (e) {
} catch {
frameWindow.print();
}
frameWindow.close();