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

chore: 移除单元测试、升级Vite8的配置和依赖、css目录重构和WebSocket 迁移到 SSE 实现实时推送

Browse Source
This commit is contained in:
Ray.Hao
2026-03-18 17:47:16 +08:00
parent c35403e197
commit e49ca1ef54
45 changed files with 968 additions and 3727 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
src/styles/common.scss → src/styles/_layouts.scss
View File

@@ -1,15 +1,27 @@
/* 全局业务通用样式 */
/**
* 布局相关样式
*/
// ============================================
// 通用容器
// ============================================
.app-container {
padding: 15px;
}
/* 进度条颜色 */
// ============================================
// 进度条
// ============================================
#nprogress .bar {
background-color: var(--el-color-primary);
}
/* 弹出菜单统一使用主题变量（简化 hover 色） */
// ============================================
// 弹出菜单
// ============================================
.el-menu--popup {
--el-menu-bg-color: var(--menu-background);
--el-menu-text-color: var(--menu-text);
@@ -35,9 +47,10 @@
}
}
/* ============================================
混合布局左侧菜单 hover 样式
============================================ */
// ============================================
// 混合布局左侧菜单 hover 样式
// ============================================
.layout-mix .layout__sidebar--left .el-menu {
.el-menu-item {
&:hover {
@@ -52,7 +65,7 @@
}
}
/* 深色或深蓝侧边栏的 hover 样式 */
// 深色或深蓝侧边栏的 hover 样式
html.dark .layout-mix .layout__sidebar--left .el-menu,
html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
.el-menu-item,
@@ -63,7 +76,10 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
}
/* Top layout: let horizontal menu fill the remaining header space */
// ============================================
// 顶部布局菜单
// ============================================
.layout-top .layout__header-left .el-menu--horizontal,
.layout-mix .layout__header-menu .el-menu--horizontal {
display: flex;
@@ -74,7 +90,7 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
overflow: hidden;
}
/* 窄屏隐藏菜单文字，仅保留图标 */
// 窄屏隐藏菜单文字，仅保留图标
.hideSidebar {
&.layout-top .layout__header .el-menu--horizontal,
&.layout-mix .layout__header .el-menu--horizontal {
@@ -98,7 +114,10 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
}
/* 全局筛选区域 */
// ============================================
// 全局筛选区域
// ============================================
.filter-section {
padding: 8px 12px 0;
margin-bottom: 8px;
@@ -115,7 +134,10 @@ html.sidebar-color-blue .layout-mix .layout__sidebar--left .el-menu {
}
}
/* 表格区域 */
// ============================================
// 表格区域
// ============================================
.table-section {
margin-bottom: 12px;

17
src/styles/variables.scss → src/styles/_variables.scss
View File

@@ -1,15 +1,14 @@
/**
* 项目主题变量
* 全局变量定义
*
* 结构：
* 1. SCSS 变量 - 布局尺寸（供 JS 导出和组件使用）
* 2. CSS 变量 - 侧边栏/菜单主题色
* 3. 主题模式 - 深蓝侧边栏、暗黑模式
* 4. 无障碍模式 - 色弱模式
* 1. 布局尺寸（SCSS 变量）
* 2. 主题变量（CSS 变量）
* 3. 主题模式切换
*/
// ============================================
// 1. SCSS 变量 - 布局尺寸
// 1. 布局尺寸（SCSS 变量）
// ============================================
$sidebar-width: 210px;
@@ -18,7 +17,7 @@ $navbar-height: 50px;
$tags-view-height: 34px;
// ============================================
// 2. CSS 变量 - 默认主题（浅色 + 白色侧边栏）
// 2. 主题变量（CSS 变量）
// ============================================
:root {
@@ -70,10 +69,6 @@ html.dark {
}
}
// ============================================
// 4. 无障碍模式
// ============================================
// 色弱模式
html.color-weak {
filter: invert(80%);

30
src/styles/element-plus-vars.scss
View File

@@ -1,30 +0,0 @@
/**
* Element Plus 变量覆盖
*
* 此文件用于覆盖 Element Plus 的默认主题变量
* 需要在 element-plus.scss 中导入，而不是在 variables.scss 中
*/
@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,
)
);

48
src/styles/element-plus.scss
View File

@@ -1,48 +0,0 @@
// Element Plus 变量覆盖（必须在最前面）
@use "./element-plus-vars";
$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;
}

80
src/styles/index.scss
View File

@@ -1,13 +1,75 @@
// 1. 基础重置
@use "./reset";
/**
* 样式入口文件
*
* 编译说明：
* - index.scss：✅ 编译成 index.css
* - _*.scss：❌ 不单独编译，仅被引入使用
*/
// ============================================
// 1. 变量和第三方库（@use 必须在所有规则之前）
// ============================================
// 2. 主题变量
@use "./variables" as *;
@use "./vendors";
@use "./layouts";
// 3. UI 框架适配
@use "./element-plus";
@use "./vxe-table";
@use "./wangeditor";
// ============================================
// 2. 基础重置
// ============================================
// 4. 业务通用样式
@use "./common";
#app,
html {
box-sizing: border-box;
width: 100%;
height: 100%;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
body {
margin: 0;
font-family:
"Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑",
Arial, sans-serif;
line-height: 1.5;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizelegibility;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
a,
a:focus,
a:hover {
color: inherit;
text-decoration: none;
cursor: pointer;
}
a:focus,
a:active,
div:focus {
outline: none;
}
img,
svg {
display: inline-block;
}
svg {
// 因 icon 大小被设置为和字体大小一致，而 span 等标签的下边缘会和字体的基线对齐，
// 故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
vertical-align: -0.15em;
}

70
src/styles/reset.scss
View File

@@ -1,70 +0,0 @@
// 全局基础重置：补充 UnoCSS 预设未覆盖的项目级样式
#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%;
}
#app,
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
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;
}
img,
svg {
display: inline-block;
}
svg {
// 因icon大小被设置为和字体大小一致，而span等标签的下边缘会和字体的基线对齐，故需设置一个往下的偏移比例，来纠正视觉上的未对齐效果
vertical-align: -0.15em;
}
ul,
li {
padding: 0;
margin: 0;
list-style: none;
}
a,
a:focus,
a:hover {
color: inherit;
text-decoration: none;
cursor: pointer;
}
a:focus,
a:active,
div:focus {
outline: none;
}

13
src/styles/variables.module.scss
View File

@@ -1,7 +1,12 @@
/* stylelint-disable property-no-unknown */
/**
* 导出变量供 JS/TS 使用
*
* 使用方式：
* import styles from "@/styles/variables.module.scss"
* console.log(styles['sidebar-width']) // "210px"
*/
// 通过 SCSS 变量导出给 JS/TS 使用的模块文件
// 注意：依赖 src/styles/variables.scss 中定义的 SCSS 变量
@use "./variables" as *;
:export {
sidebar-width: $sidebar-width;
@@ -12,5 +17,3 @@
menu-active-text: $menu-active-text;
menu-hover: $menu-hover;
}
/* stylelint-enable property-no-unknown */

81
src/styles/vendors/_element-plus.scss vendored Normal file
View File

@@ -0,0 +1,81 @@
/**
* Element Plus 变量覆盖和样式适配
*/
// ============================================
// 1. 变量覆盖（必须在最前面）
// ============================================
@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,
)
);
// ============================================
// 2. 样式覆盖
// ============================================
$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;
}

10
src/styles/vendors/_index.scss vendored Normal file
View File

@@ -0,0 +1,10 @@
/**
* 第三方库（vendors）样式适配入口
*
* vendors = 第三方供应商代码
* 包含：Element Plus、Vxe Table、WangEditor 等
*/
@use "./element-plus";
@use "./vxe-table";
@use "./wangeditor";

15
src/styles/vxe-table.scss → src/styles/vendors/_vxe-table.scss vendored
View File

@@ -1,10 +1,12 @@
/**
* Vxe Table 主题统一：
* 1) 用 Element Plus 的 CSS 变量覆写 Vxe Table 的 CSS 变量
* 2) 自定义局部样式
* Vxe Table 主题适配
* 使用 Element Plus CSS 变量实现主题统一
*/
/* 变量覆写 */
// ============================================
// 变量覆写
// ============================================
:root {
/* color */
--vxe-font-color: var(--el-text-color-regular);
@@ -92,7 +94,10 @@
--vxe-select-panel-background-color: var(--el-bg-color);
}
/* 自定义组件样式 */
// ============================================
// 自定义组件样式
// ============================================
.vxe-grid {
/* 表单 */
&--form-wrapper {

0
src/styles/wangeditor.scss → src/styles/vendors/_wangeditor.scss vendored
View File