tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 枚举、常量和插件文件重构优化

Browse Source
This commit is contained in:
Ray.Hao
2025-12-12 23:16:32 +08:00
parent f125473b93
commit 6e0597437e
27 changed files with 111 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/store/styles/dark/css-vars.css
View File

@@ -1,7 +0,0 @@
/* 暗黑模式通过 CSS 自定义变量，官方链接：https://element-plus.org/zh-CN/guide/dark-mode.html#%E9%80%9A%E8%BF%87-css */
html.dark {
.el-table {
/* 自定义表格选中高亮时当前行的背景颜色 */
--el-table-current-row-bg-color: var(--el-fill-color-light);
}
}

45
src/store/styles/element-plus.scss
View File

@@ -1,45 +0,0 @@
$border: 1px solid var(--el-border-color-light);
/* el-dialog */
.el-dialog {
.el-dialog__header {
padding: 15px 20px;
margin: 0;
border-bottom: $border;
}
.el-dialog__body {
padding: 20px;
}
.el-dialog__footer {
padding: 15px;
border-top: $border;
}
}
/* el-drawer */
.el-drawer {
.el-drawer__header {
padding: 15px 20px;
margin: 0;
color: inherit;
border-bottom: $border;
}
.el-drawer__body {
padding: 20px;
}
.el-drawer__footer {
padding: 15px;
border-top: $border;
}
}
// 抽屉和对话框底部按钮区域
.dialog-footer {
display: flex;
gap: 8px;
justify-content: flex-end;
}

121
src/store/styles/index.scss
View File

@@ -1,121 +0,0 @@
@use "./reset";
@use "./element-plus";
// Vxe Table
@use "./vxe-table";
@import url("./vxe-table.css");
.app-container {
padding: 15px;
}
// 进度条颜色
#nprogress .bar {
background-color: var(--el-color-primary);
}
// 混合布局左侧菜单的hover样式
.layout-mix .layout__sidebar--left .el-menu {
.el-menu-item {
&:hover {
// 极简白主题：使用浅灰色背景
background-color: var(--el-fill-color-light) !important;
}
}
.el-sub-menu__title {
&:hover {
// 极简白主题：使用浅灰色背景
background-color: var(--el-fill-color-light) !important;
}
}
}
// 深色主题或深蓝色侧边栏配色下的左侧菜单hover样式
html.dark .layout-mix .layout__sidebar--left .el-menu,
html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
.el-menu-item {
&:hover {
// 深色背景：使用CSS变量
background-color: var(--menu-hover) !important;
}
}
.el-sub-menu__title {
&:hover {
// 深色背景：使用CSS变量
background-color: var(--menu-hover) !important;
}
}
}
// 窄屏时隐藏菜单文字，只显示图标
.hideSidebar {
// Top布局和Mix布局的水平菜单
&.layout-top .layout__header .el-menu--horizontal,
&.layout-mix .layout__header .el-menu--horizontal {
.el-menu-item,
.el-sub-menu__title {
.menu-title,
span:not([class*="i-svg"]):not(.el-icon) {
display: none !important;
}
}
}
// Mix布局的左侧菜单
&.layout-mix .layout__sidebar--left .el-menu {
.el-menu-item,
.el-sub-menu__title {
.menu-title,
span:not([class*="i-svg"]):not(.el-icon) {
display: none !important;
}
}
}
}
// 全局筛选区域样式
.filter-section {
padding: 8px 12px 0;
margin-bottom: 8px;
background-color: var(--el-bg-color-overlay);
border: 1px solid var(--el-border-color-light);
border-radius: 4px;
.search-buttons {
margin-right: 0;
}
.el-form-item {
margin-bottom: 8px;
}
}
// 表格区域样式
.table-section {
margin-bottom: 12px;
// 表格工具栏区域
&__toolbar {
display: flex;
justify-content: space-between;
margin-bottom: 4px;
&--actions,
&--tools {
display: flex;
gap: 4px;
}
}
// 表格内容区域
&__content {
margin: 8px 0;
}
// 分页区域
.el-pagination {
justify-content: flex-end;
margin-top: 12px;
}
}

77
src/store/styles/reset.scss
View File

@@ -1,77 +0,0 @@
*,
::before,
::after {
box-sizing: border-box;
border-color: currentcolor;
border-style: solid;
border-width: 0;
}
#app {
width: 100%;
height: 100%;
}
html {
box-sizing: border-box;
width: 100%;
height: 100%;
line-height: 1.5;
tab-size: 4;
text-size-adjust: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
font-family:
"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
Arial, sans-serif;
line-height: inherit;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
a {
color: inherit;
text-decoration: inherit;
}
img,
svg {
display: inline-block;
}
svg {
// 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
vertical-align: -0.15em;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
a,
a:focus,
a:hover {
color: inherit;
text-decoration: none;
cursor: pointer;
}
a:focus,
a:active,
div:focus {
outline: none;
}

11
src/store/styles/variables.module.scss
View File

@@ -1,11 +0,0 @@
/* stylelint-disable property-no-unknown */
:export {
sidebar-width: $sidebar-width;
navbar-height: $navbar-height;
tags-view-height: $tags-view-height;
menu-background: $menu-background;
menu-text: $menu-text;
menu-active-text: $menu-active-text;
menu-hover: $menu-hover;
}
/* stylelint-enable property-no-unknown */

93
src/store/styles/variables.scss
View File

@@ -1,93 +0,0 @@
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
// 默认主题色 - 修改此值时需同步修改 src/settings.ts 中的 themeColor
"base": #4080ff,
),
"success": (
"base": #23c343,
),
"warning": (
"base": #ff9a2e,
),
"danger": (
"base": #f76560,
),
"info": (
"base": #a9aeb8,
),
),
$bg-color: (
"page": #f5f8fd,
)
);
/** 全局SCSS变量 */
:root {
--menu-background: #fff; // 菜单背景色
--menu-text: #212121; // 菜单文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
--menu-active-text: var(
--el-menu-active-color
); // 菜单激活文字颜色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
--menu-hover: #e6f4ff; // 菜单悬停背景色 浅色主题-白色侧边栏配色下仅占位，实际颜色由 el-menu-item 组件决定
--sidebar-logo-background: #f5f5f5; // 侧边栏 Logo 背景色
--sidebar-logo-text-color: #333; // 侧边栏 Logo 文字颜色
}
/** 浅色主题-深蓝色侧边栏配色 */
html.sidebar-color-blue {
--menu-background: #304156; // 菜单背景色
--menu-text: #bfcbd9; // 菜单文字颜色
--menu-active-text: var(--el-menu-active-color); // 菜单激活文字颜色
--menu-hover: #263445; // 菜单悬停背景色
--sidebar-logo-background: #2d3748; // 侧边栏 Logo 背景色
--sidebar-logo-text-color: #fff; // 侧边栏 Logo 文字颜色
}
/** 暗黑主题 */
html.dark {
--menu-background: var(--el-bg-color-overlay);
--menu-text: #fff;
--menu-active-text: var(--el-menu-active-color);
--menu-hover: rgb(0 0 0 / 20%);
--sidebar-logo-background: rgb(0 0 0 / 20%);
--sidebar-logo-text-color: #fff;
/** WangEditor Dark */
/* Textarea - css vars */
--w-e-textarea-bg-color: var(--el-bg-color); /* 深色背景 */
--w-e-textarea-color: var(--el-text-color-primary); /* 浅色文字 */
--w-e-textarea-border-color: var(--el-border-color); /* 较深的边框颜色 */
--w-e-textarea-slight-border-color: var(--el-border-color-lighter); /* 更淡一些的边框颜色 */
--w-e-textarea-slight-color: var(--el-text-color-secondary); /* 浅灰色，用于不那么重要的元素 */
--w-e-textarea-slight-bg-color: var(--el-bg-color-overlay); /* 稍微亮一点的背景色 */
--w-e-textarea-selected-border-color: var(--el-color-info-light-5); /* 选中元素时的高亮边框 */
--w-e-textarea-handler-bg-color: var(--el-color-primary); /* 工具按钮或交互元素的背景色 */
/* Toolbar - css vars */
--w-e-toolbar-color: var(--el-text-color-regular); /* 工具栏文字颜色 */
--w-e-toolbar-bg-color: var(--el-bg-color); /* 工具栏背景颜色 */
--w-e-toolbar-active-color: var(--el-text-color-primary); /* 当前激活项的文字颜色 */
--w-e-toolbar-active-bg-color: var(--el-fill-color-light); /* 当前激活项的背景颜色 */
--w-e-toolbar-disabled-color: var(--el-text-color-secondary); /* 禁用项的颜色 */
--w-e-toolbar-border-color: var(--el-border-color-base); /* 工具栏边框颜色 */
/* Modal - css vars */
--w-e-modal-button-bg-color: var(--el-bg-color-light-3); /* 弹出框按钮背景色 */
--w-e-modal-button-border-color: var(--el-border-color-light); /* 弹出框按钮边框颜色 */
}
$menu-background: var(--menu-background); // 菜单背景色
$menu-text: var(--menu-text); // 菜单文字颜色
$menu-active-text: var(--menu-active-text); // 菜单激活文字颜色
$menu-hover: var(--menu-hover); // 菜单悬停背景色
$sidebar-logo-background: var(--sidebar-logo-background); // 侧边栏 Logo 背景色
$sidebar-logo-text-color: var(--sidebar-logo-text-color); // 侧边栏 Logo 文字颜色
$sidebar-width: 210px; // 侧边栏宽度
$sidebar-width-collapsed: 54px; // 侧边栏收缩宽度
$navbar-height: 50px; // 导航栏高度
$tags-view-height: 34px; // TagsView 高度

92
src/store/styles/vxe-table.css
View File

@@ -1,92 +0,0 @@
/**
* @description 所有主题模式下的 Vxe Table CSS 变量
* @description 用 Element Plus 的 CSS 变量来覆写 Vxe Table 的 CSS 变量，目的是使 Vxe Table 支持多主题模式且样式统一
* @description 在此查阅所有可自定义的变量：https://github.com/x-extends/vxe-table/blob/master/styles/css-variable.scss
*/
:root {
/* color */
--vxe-font-color: var(--el-text-color-regular);
--vxe-primary-color: var(--el-color-primary);
--vxe-success-color: var(--el-color-success);
--vxe-info-color: var(--el-color-info);
--vxe-warning-color: var(--el-color-warning);
--vxe-danger-color: var(--el-color-danger);
--vxe-font-lighten-color: var(--el-text-color-primary);
--vxe-primary-lighten-color: var(--el-color-primary-light-3);
--vxe-success-lighten-color: var(--el-color-success-light-3);
--vxe-info-lighten-color: var(--el-color-info-light-3);
--vxe-warning-lighten-color: var(--el-color-warning-light-3);
--vxe-danger-lighten-color: var(--el-color-danger-light-3);
--vxe-font-darken-color: var(--el-text-color-secondary);
--vxe-primary-darken-color: var(--el-color-primary-dark-2);
--vxe-success-darken-color: var(--el-color-success-dark-2);
--vxe-info-darken-color: var(--el-color-info-dark-2);
--vxe-warning-darken-color: var(--el-color-warning-dark-2);
--vxe-danger-darken-color: var(--el-color-danger-dark-2);
--vxe-font-disabled-color: var(--el-text-color-disabled);
--vxe-primary-disabled-color: var(--el-color-primary-light-5);
--vxe-success-disabled-color: var(--el-color-success-light-5);
--vxe-info-disabled-color: var(--el-color-info-light-5);
--vxe-warning-disabled-color: var(--el-color-warning-light-5);
--vxe-danger-disabled-color: var(--el-color-danger-light-5);
/* input/radio/checkbox */
--vxe-input-border-color: var(--el-border-color);
--vxe-input-disabled-color: var(--el-text-color-disabled);
--vxe-input-disabled-background-color: var(--el-fill-color-light);
--vxe-input-placeholder-color: var(--el-text-color-placeholder);
/* popup */
--vxe-table-popup-border-color: var(--el-border-color);
/* table */
--vxe-table-header-font-color: var(--el-text-color-regular);
--vxe-table-footer-font-color: var(--el-text-color-regular);
--vxe-table-border-color: var(--el-border-color-lighter);
--vxe-table-header-background-color: var(--el-bg-color);
--vxe-table-body-background-color: var(--el-bg-color);
--vxe-table-footer-background-color: var(--el-bg-color);
--vxe-table-row-hover-background-color: var(--el-fill-color-light);
--vxe-table-row-current-background-color: var(--el-fill-color-light);
--vxe-table-row-hover-current-background-color: var(--el-fill-color-light);
--vxe-table-checkbox-range-background-color: var(--el-fill-color-light);
/* menu */
--vxe-table-menu-background-color: var(--el-bg-color-overlay);
/* loading */
--vxe-loading-color: var(--el-color-primary);
--vxe-loading-background-color: var(--el-mask-color);
/* validate */
--vxe-table-validate-error-color: var(--el-color-danger);
/* toolbar */
--vxe-toolbar-background-color: var(--el-bg-color);
--vxe-toolbar-custom-active-background-color: var(--el-bg-color-overlay);
--vxe-toolbar-panel-background-color: var(--el-bg-color-overlay);
/* pager */
--vxe-pager-background-color: var(--el-bg-color);
/* modal */
--vxe-modal-header-background-color: var(--el-bg-color);
--vxe-modal-body-background-color: var(--el-bg-color);
--vxe-modal-border-color: var(--el-border-color);
/* button */
--vxe-button-default-background-color: var(--el-bg-color-overlay);
/* input */
--vxe-input-background-color: var(--el-fill-color-blank);
--vxe-input-panel-background-color: var(--el-fill-color-blank);
/* form */
--vxe-form-background-color: var(--el-bg-color);
--vxe-form-validate-error-color: var(--el-color-danger);
/* select */
--vxe-select-option-hover-background-color: var(--el-bg-color-overlay);
--vxe-select-panel-background-color: var(--el-bg-color);
}

39
src/store/styles/vxe-table.scss
View File

@@ -1,39 +0,0 @@
// 自定义 Vxe Table 样式
.vxe-grid {
// 表单
&--form-wrapper {
.vxe-form {
padding: 10px 20px;
margin-bottom: 20px;
}
}
// 工具栏
&--toolbar-wrapper {
.vxe-toolbar {
padding: 20px;
}
}
// 分页
&--pager-wrapper {
.vxe-pager {
height: 70px;
padding: 0 20px;
&--wrapper {
// 参考 Bootstrap 的响应式设计 WIDTH = 768
@media screen and (width <= 768px) {
.vxe-pager--total,
.vxe-pager--sizes,
.vxe-pager--jump,
.vxe-pager--jump-prev,
.vxe-pager--jump-next {
display: none;
}
}
}
}
}
}