xiaozhi/xiaozhi-admin-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update 优化 前端样式初步调整并删除无用样式

Browse Source
This commit is contained in:
lau
2026-03-25 22:33:41 +08:00
parent fed0ac99e8
commit 2502de3081
72 changed files with 274 additions and 485 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/base/_document.scss
+17 -65
View File
@@ -1,5 +1,6 @@
/* Global document styles and lightweight utility helpers. */
// --- 视口与排版根 ---
body {
height: 100%;
margin: 0;
@@ -48,14 +49,6 @@ body,
box-sizing: inherit;
}
.no-padding {
padding: 0px !important;
}
.padding-content {
padding: 4px 0;
}
a:focus,
a:active {
outline: none;
@@ -73,34 +66,6 @@ div:focus {
outline: none;
}
.fr {
float: right;
}
.fl {
float: left;
}
.pr-5 {
padding-right: 5px;
}
.pl-5 {
padding-left: 5px;
}
.block {
display: block;
}
.pointer {
cursor: pointer;
}
.inlineBlock {
display: block;
}
.clearfix {
&:after {
visibility: hidden;
@@ -112,33 +77,20 @@ div:focus {
}
}
aside {
background: #eef1f6;
padding: 8px 24px;
margin-bottom: 20px;
border-radius: var(--app-radius-md);
display: block;
line-height: 32px;
font-size: 16px;
font-family:
'MiSans',
'HarmonyOS Sans SC',
'PingFang SC',
'Source Han Sans SC',
'Noto Sans SC',
'Hiragino Sans GB',
'Microsoft YaHei',
sans-serif;
color: #2c3e50;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
a {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
src/assets/styles/btn.scss
-99
View File
@@ -1,99 +0,0 @@
@use './variables.module.scss' as *;
@mixin colorBtn($color) {
background: $color;
&:hover {
color: $color;
&:before,
&:after {
background: $color;
}
}
}
.blue-btn {
@include colorBtn($blue);
}
.light-blue-btn {
@include colorBtn($light-blue);
}
.red-btn {
@include colorBtn($red);
}
.pink-btn {
@include colorBtn($pink);
}
.green-btn {
@include colorBtn($green);
}
.tiffany-btn {
@include colorBtn($tiffany);
}
.yellow-btn {
@include colorBtn($yellow);
}
.pan-btn {
font-size: 14px;
color: #fff;
padding: 14px 36px;
border-radius: var(--app-radius-md);
border: none;
outline: none;
transition: 600ms ease all;
position: relative;
display: inline-block;
&:hover {
background: #fff;
&:before,
&:after {
width: 100%;
transition: 600ms ease all;
}
}
&:before,
&:after {
content: '';
position: absolute;
top: 0;
right: 0;
height: 2px;
width: 0;
transition: 400ms ease all;
}
&::after {
right: inherit;
top: inherit;
left: 0;
bottom: 0;
}
}
.custom-button {
display: inline-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
color: #fff;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: 0;
margin: 0;
padding: 10px 15px;
font-size: 14px;
border-radius: var(--app-radius-sm);
}
src/assets/styles/components/_card-shell.scss
+5 -49
View File
@@ -1,5 +1,7 @@
/* Shared cards, panels, and content surfaces. */
/* 业务列表/卡片页：分页、树、列表、el-card 等（与 vendors/element-plus 通用覆盖叠加，入口顺序见 index.scss）。
* 属「页面模式」而非 EP 公共主题，故放在 components。 */
// --- 历史「表单分区标题」样式 ---
.form-header {
font-size: 15px;
color: #6379bb;
@@ -8,13 +10,7 @@
padding-bottom: 5px;
}
.pagination-container {
display: flex;
justify-content: flex-end;
margin-top: 18px;
padding: 10px 0 0 !important;
}
// --- 树形容器描边（暗色覆盖在 _search-panel） ---
.tree-border {
margin-top: 8px;
border: 1px solid rgba(148, 163, 184, 0.16);
@@ -34,52 +30,12 @@
}
}
.el-table .fixed-width .el-button--small {
padding-left: 0;
padding-right: 0;
width: inherit;
}
.el-table .el-dropdown-link {
cursor: pointer;
color: #409eff;
margin-left: 10px;
}
.el-table .el-dropdown,
.el-icon-arrow-down {
font-size: 12px;
}
.el-tree-node__content > .el-checkbox {
margin-right: 8px;
}
.list-group-striped > .list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.list-group {
padding-left: 0px;
list-style: none;
}
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
.pull-right {
float: right !important;
}
// --- el-card 本业务页外观（与 EP vendors 叠加） ---
.el-card__header {
padding: 14px 16px 10px !important;
min-height: auto;
src/assets/styles/components/_legacy-layout.scss
-54
View File
@@ -1,54 +0,0 @@
/* Legacy shared layout helpers that were previously kept in index.scss. */
.components-container {
margin: 30px 50px;
position: relative;
}
.text-center {
text-align: center;
}
.sub-navbar {
height: 50px;
line-height: 50px;
position: relative;
width: 100%;
text-align: right;
padding-right: 20px;
transition: 600ms ease position;
background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
.subtitle {
font-size: 20px;
color: #fff;
}
&.draft {
background: #d0d0d0;
}
&.deleted {
background: #d0d0d0;
}
}
.link-type,
.link-type:focus {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
.filter-container {
padding-bottom: 10px;
.filter-item {
display: inline-block;
vertical-align: middle;
margin-bottom: 10px;
}
}
src/assets/styles/components/_legacy-utilities.scss
+7 -48
View File
@@ -1,6 +1,5 @@
/* Legacy shared utility classes that are still used across pages. */
/* 工具类 */
@use '../variables.module.scss' as *;
.pt5 {
padding-top: 5px;
@@ -10,6 +9,11 @@
padding-right: 5px;
}
.pl5 {
padding-left: 5px;
}
.pb5 {
padding-bottom: 5px;
}
@@ -66,31 +70,6 @@
margin-left: 20px;
}
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: inherit;
font-weight: 500;
line-height: 1.1;
color: inherit;
}
.el-form .el-form-item__label {
font-weight: 600;
}
.el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important;
}
.el-dialog.scrollbar .el-dialog__body {
overflow: auto;
@@ -99,26 +78,6 @@ h6 {
padding: 14px 22px 4px;
}
.el-table {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: $table-header-bg !important;
color: $table-header-text-color;
height: 40px !important;
font-size: 13px;
}
}
.el-table__body-wrapper {
.el-button [class*='el-icon-'] + span {
margin-left: 1px;
}
}
}
.el-menu--horizontal .el-menu-item .svg-icon + span,
.el-menu--horizontal .el-sub-menu__title .svg-icon + span {
margin-left: 3px;
}
src/assets/styles/components/_misc.scss
+13
View File
@@ -0,0 +1,13 @@
.link-type,
.link-type:focus {
color: #337ab7;
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
}
}
src/assets/styles/components/_page-shell.scss
+2 -17
View File
@@ -6,14 +6,7 @@
gap: 12px;
}
.page-shell {
display: flex;
flex-direction: column;
gap: 12px;
}
.app-main > .page-shell,
.app-main > .page-shell.p-2 {
.app-main > .p-2 {
padding: 0 !important;
margin: 0 !important;
}
@@ -26,15 +19,7 @@
margin-bottom: 0 !important;
}
.page-shell > .el-row,
.page-shell > .el-card,
.page-shell > .search-wrap,
.page-shell > div,
.page-shell > section {
margin-bottom: 0 !important;
}
/* Scoped mixins for CRUD pages so view-level styles stay focused on page-specific rules. */
// --- CRUD / 树表页用混入（在 .vue 内 @use 后 @include） ---
@mixin action-link-buttons($background: rgba(53, 109, 255, 0.08)) {
.data-table {
src/assets/styles/components/_search-panel.scss
+1 -33
View File
@@ -1,5 +1,6 @@
/* Search panel, table actions, and responsive panel shells. */
// --- 表格工具列链接按钮（全局） ---
.data-table .el-button.is-link {
width: 28px !important;
height: 28px !important;
@@ -17,39 +18,6 @@
margin-bottom: 0 !important;
}
.el-card.search-panel,
.el-card.side-panel {
border-radius: 16px !important;
overflow: hidden;
}
.el-card.table-panel {
border-radius: 14px !important;
overflow: hidden;
}
.el-card.search-panel .el-card__header,
.el-card.side-panel .el-card__header {
border-top-left-radius: 16px;
border-top-right-radius: 16px;
}
.el-card.table-panel .el-card__header {
border-top-left-radius: 14px;
border-top-right-radius: 14px;
}
.el-card.search-panel .el-card__body,
.el-card.side-panel .el-card__body {
border-bottom-left-radius: 16px;
border-bottom-right-radius: 16px;
}
.el-card.table-panel .el-card__body {
border-bottom-left-radius: 14px;
border-bottom-right-radius: 14px;
}
.search-panel {
.el-card__header {
display: block;
src/assets/styles/components/_selector-dialog.scss
+5
View File
@@ -1,5 +1,6 @@
/* Reusable scoped mixins for selector dialogs backed by cards and vxe tables. */
/* 为多个根选择器统一设置 gap */
@mixin shell-gap($selectors...) {
@each $selector in $selectors {
#{$selector} {
@@ -8,18 +9,21 @@
}
}
/* 卡片区域撑满弹窗 */
@mixin card-shell {
.selector-card {
height: 100%;
}
}
/* 按弹窗根 class 收紧 body 顶内边距 */
@mixin dialog-body-padding($dialog-class) {
.#{$dialog-class} :deep(.el-dialog__body) {
padding-top: 12px;
}
}
/* 头部标题与已选 tag 换行、窄屏左对齐 */
@mixin selector-header-tags($mobile-breakpoint: 768px) {
.selector-header {
align-items: flex-start;
@@ -45,6 +49,7 @@
}
}
/* vxe 表格圆角与表头色，与全局表格 token 一致 */
@mixin selector-table {
.selector-table {
border-radius: 10px;
src/assets/styles/components/_theme-helpers.scss
+1 -13
View File
@@ -48,14 +48,6 @@
color: #888888;
}
.img-circle {
border-radius: 50%;
}
.img-lg {
width: 120px;
height: 120px;
}
.avatar-upload-preview {
position: absolute;
@@ -68,8 +60,4 @@
overflow: hidden;
}
.sortable-ghost {
opacity: 0.8;
color: #fff !important;
background: #42b983 !important;
}
src/assets/styles/index.scss
+5 -15
View File
@@ -1,3 +1,6 @@
// =============================================================================
// 全局样式入口（加载顺序即最终 CSS 层叠顺序，后载入的同优先级规则会覆盖先载入的）
// =============================================================================
@use './variables.module.scss' as *;
@use './mixin.scss';
@use './transition.scss';
@@ -8,7 +11,6 @@
@use './layout/sidebar/collapsed';
@use './layout/sidebar/responsive';
@use './layout/sidebar/popper' as sidebar-popper;
@use './components/legacy-layout';
@use './components/legacy-utilities';
@use './components/page-shell';
@use './components/card-shell';
@@ -16,18 +18,6 @@
@use './components/table-toolbar';
@use './components/query-form';
@use './components/search-panel';
// element样式放最上面，让下面的自定义样式可以覆盖默认样式
@use 'element-plus/dist/index.css';
@use './vendors/element-plus/primitives';
@use './vendors/element-plus/base';
@use './vendors/element-plus/dialog';
@use './vendors/element-plus/dropdown';
@use './vendors/element-plus/form';
@use './vendors/element-plus/feedback';
@use './vendors/element-plus/popper' as element-popper;
@use './vendors/element-plus/shell' as element-shell;
@use './vendors/element-plus/navigation';
@use './vendors/element-plus/table';
@use './btn.scss';
@use 'animate.css';
@use './vendors/element-plus/index' as element-custom;
@use 'animate.css';
src/assets/styles/layout/_surface.scss
+4 -6
View File
@@ -1,13 +1,11 @@
/* Shared page shells that are not tied to a specific component library. */
/* 主内容区面板（.app-container、.panel、.search）：不依赖 Element 类名，与 components 中 EP 类补丁区分。 */
// --- 整块内容容器（常见于路由视图外包一层） ---
.app-container {
padding: 16px;
background: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
border-radius: var(--app-radius-lg);
box-shadow: var(--app-shadow-sm);
}
// --- 可复用面板条（hover 抬升阴影，非 el-card） ---
.panel,
.search {
margin-bottom: 0.75rem;
src/assets/styles/layout/sidebar/_collapsed.scss
+1 -1
View File
@@ -1,4 +1,4 @@
/* Collapsed desktop sidebar behavior and compact trigger states. */
/* 桌面端折叠侧栏：窄宽、仅图标、子菜单箭头隐藏与 tooltip 触发区域（类名 .hideSidebar）。 */
#app {
.hideSidebar {
src/assets/styles/layout/sidebar/_menu.scss
+1 -1
View File
@@ -1,4 +1,4 @@
/* Menu hover, active states, and nested item styling. */
/* 侧栏内 el-menu：一级/嵌套项的 hover、active、浅色与 theme-dark 分支（与 _shell 中变量定义配合）。 */
@use '../../variables.module.scss' as *;
src/assets/styles/layout/sidebar/_popper.scss
+1 -1
View File
@@ -1,4 +1,4 @@
/* Collapsed navigation poppers and popup menu refinements. */
/* 折叠后弹出子菜单（el-popper.is-pure）：圆角与弹出层内 menu 项样式。 */
.el-menu--vertical {
& > .el-menu {
src/assets/styles/layout/sidebar/_responsive.scss
+1 -1
View File
@@ -1,4 +1,4 @@
/* Responsive sidebar behavior for mobile and transition disabling. */
/* 移动端侧栏：抽屉式滑出、隐藏时 translate；.withoutAnimation 关闭过渡（与布局组件 class 约定一致）。 */
@use '../../variables.module.scss' as *;
src/assets/styles/layout/sidebar/_shell.scss
+3 -1
View File
@@ -1,8 +1,9 @@
/* Sidebar shell, base sizing, and main container offsets. */
/* 侧栏外壳：固定定位宽度、主区左边距、滚动条与 el-menu 根级样式；与 _menu/_collapsed/_responsive 分工。 */
@use '../../variables.module.scss' as *;
#app {
// --- 主内容区相对侧栏的偏移 ---
.main-container {
height: 100%;
transition: margin-left 0.28s;
@@ -15,6 +16,7 @@
margin-left: 0 !important;
}
// --- 侧栏固定列：宽度过渡、主题下滚动条内菜单色变量 ---
.sidebar-container {
-webkit-transition: width 0.28s;
transition: width 0.28s;
src/assets/styles/mixin.scss
+6
View File
@@ -1,3 +1,5 @@
// 清除浮动（嵌套用）
@mixin clearfix {
&:after {
content: '';
@@ -6,6 +8,7 @@
}
}
// WebKit 滚动条配色（用于可滚动容器）
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
@@ -21,18 +24,21 @@
}
}
// 铺满父级的相对定位层
@mixin relative {
position: relative;
width: 100%;
height: 100%;
}
// 百分比宽度水平居中块
@mixin pct($pct) {
width: #{$pct};
position: relative;
margin: 0 auto;
}
// CSS 三角箭头（极少用，保留兼容）
@mixin triangle($width, $height, $color, $direction) {
$width: $width/2;
$color-border-style: $height solid $color;
src/assets/styles/tokens/_theme-dark.scss
+6 -1
View File
@@ -1,4 +1,4 @@
/* Dark theme CSS variables and component token overrides. */
/* 暗色主题：在 html.dark 上覆写与浅色同名的业务/app 变量 */
html.dark {
--menuBg: #111827;
@@ -15,10 +15,12 @@ html.dark {
--tableHeaderBg: var(--el-bg-color);
--tableHeaderTextColor: var(--el-text-color);
// --- 树节点：暗色下修正 primary 浅底色 ---
.el-tree-node__content {
--el-color-primary-light-9: #262727;
}
// --- 各类型按钮（含 plain）在暗色下的 EP CSS 变量 ---
.el-button--primary {
--el-button-bg-color: #2b6bd3;
--el-button-border-color: #3a7be8;
@@ -119,6 +121,7 @@ html.dark {
--el-button-active-border-color: rgba(75, 85, 99, 0.85);
}
// --- Switch / Tag 暗色适配 ---
.el-switch {
--el-switch-on-color: var(--el-color-primary-dark-6);
--el-switch-border-color: var(--el-color-primary-light-2);
@@ -153,6 +156,7 @@ html.dark {
--el-tag-text-color: #e5e7eb;
}
// --- tags-view 与 app 壳变量（暗色） ---
--tags-view-active-bg: var(--el-color-primary-dark-6);
--tags-view-active-border-color: var(--el-color-primary-light-2);
@@ -178,6 +182,7 @@ html.dark {
--app-elevated-close-hover-bg: rgba(96, 165, 250, 0.18);
--el-bg-color-page: var(--app-shell-bg);
// --- vxe-table 暗色（与 vxe 业务表并存） ---
--vxe-font-color: #98989e;
--vxe-primary-color: #2c7ecf;
--vxe-icon-background-color: #98989e;
src/assets/styles/tokens/_theme.scss
+10 -1
View File
@@ -1,6 +1,7 @@
/* Light theme CSS variables and shared design tokens. */
/* 浅色主题：仅声明 CSS 自定义属性，无具体选择器样式。 */
:root {
// --- 侧栏与顶栏表格区域 ---
--menuBg: #ffffff;
--menuColor: #1f2937;
--menuActiveText: #111827;
@@ -24,12 +25,19 @@
--tags-view-active-bg: var(--el-color-primary);
--tags-view-active-border-color: var(--el-color-primary);
// --- 应用壳：圆角、阴影、表面、导航、强调色与文案色 ---
--app-radius-sm: 6px;
--app-radius-md: 12px;
--app-radius-lg: 18px;
--app-space-base: 12px;
--app-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.05);
--app-shadow-md: 0 8px 24px rgba(15, 23, 42, 0.06);
--app-shadow-lg: 0 14px 36px rgba(15, 23, 42, 0.1);
--app-font-size-base: 14px;
--app-surface-bg: #ffffff;
--app-surface-border: #e5e7eb;
--app-shell-bg: #f5f7fa;
@@ -48,6 +56,7 @@
--app-elevated-close-bg: rgba(148, 163, 184, 0.14);
--app-elevated-close-hover-bg: rgba(64, 158, 255, 0.14);
// --- 与 Element Plus 主题变量的桥接（页面背景、默认圆角/阴影） ---
--el-border-radius-base: var(--app-radius-md);
--el-border-radius-small: var(--app-radius-sm);
--el-border-radius-round: 999px;
src/assets/styles/transition.scss
+4 -1
View File
@@ -1,5 +1,6 @@
// global transition css
// 全局 Vue transition 类名（fade / fade-transform / breadcrumb），与业务模块无关
// --- 淡入淡出 ---
/* fade */
.fade-enter-active,
.fade-leave-active {
@@ -11,6 +12,7 @@
opacity: 0;
}
// --- 带水平位移的淡入淡出（常用于主视图切换） ---
/* fade-transform */
.fade-transform--move,
.fade-transform-leave-active,
@@ -28,6 +30,7 @@
transform: translateX(30px);
}
// --- 面包屑列表项进出场 ---
/* breadcrumb transition */
.breadcrumb-enter-active,
.breadcrumb-leave-active {
src/assets/styles/vendors/element-plus/_card.scss
Vendored
+13
View File
@@ -0,0 +1,13 @@
.el-card {
overflow: hidden;
}
.el-card .el-card__header {
border-top-left-radius: var(--app-radius-lg);
border-top-right-radius: var(--app-radius-lg);
}
.el-card .el-card__body {
border-bottom-left-radius: var(--app-radius-lg);
border-bottom-right-radius: var(--app-radius-lg);
}
src/assets/styles/vendors/element-plus/_dialog.scss
Vendored
+1 -10
View File
@@ -1,4 +1,4 @@
/* Dialog and upload-related overlays. */
/* 弹窗：遮罩模糊、居中 el-dialog 头身脚与关闭按钮；底部 .upload-container 为上传区宽度占位。 */
.el-overlay {
overflow: hidden;
@@ -99,13 +99,4 @@
gap: 12px;
}
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
src/assets/styles/vendors/element-plus/_dropdown.scss
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/* Dropdown and inline menu helpers. */
/* 下拉菜单面板项样式；日期范围分隔符；折叠菜单隐藏箭头；dropdown-link 主色。 */
.el-dropdown-menu {
padding: 8px;
src/assets/styles/vendors/element-plus/_element-tokens.scss
Vendored
+6
View File
@@ -0,0 +1,6 @@
:root {
--el-font-size-base: var(--app-font-size-base)
}
src/assets/styles/vendors/element-plus/_feedback.scss
Vendored
+2 -1
View File
@@ -1,4 +1,4 @@
/* Toast, alert, and message-box feedback components. */
/* 反馈：MessageBox 卡片化；Message / Notification / Alert 圆角与暗色下 success 等背景微调。 */
.el-message-box .el-message-box__message {
word-break: break-word;
@@ -206,6 +206,7 @@
border-color: var(--el-color-primary-light-7);
}
// --- 暗色下 Message 类型背景（与 tokens 中按钮色阶独立） ---
html.dark {
.el-message--success {
background: rgba(31, 138, 90, 0.18);
src/assets/styles/vendors/element-plus/_form.scss
Vendored
+5 -1
View File
@@ -1,4 +1,8 @@
/* Form controls and generic rounded inputs. */
/* 表单：inline 默认宽度；输入类圆角与 focus 环；按钮/tag/单选复选按钮组圆角。 */
.el-form .el-form-item__label {
font-weight: 1000;
}
.el-form--inline .el-form-item__label {
width: 68px;
src/assets/styles/vendors/element-plus/_index.scss
Vendored
+7 -5
View File
@@ -1,10 +1,12 @@
@use './primitives';
@use './base';
@use 'element-plus/dist/index.css';
@use 'overrides';
@use './misc';
@use './dialog';
@use './dropdown';
@use './form';
@use './feedback';
@use './popper' as element-popper;
@use './shell' as element-shell;
@use './popper';
@use './shell';
@use './navigation';
@use './table';
@use './table';
@use './card';
src/assets/styles/vendors/element-plus/_base.scss → src/assets/styles/vendors/element-plus/_misc.scss
Vendored
+18 -1
View File
@@ -1,5 +1,6 @@
/* Baseline Element Plus tweaks reused by the rest of the overrides. */
/* 零散 EP 覆盖：折叠、面包屑、上传、表格 .cell 与列辅助 class 等；主题级共用壳层见 _overrides。 */
// --- 折叠面板标题与内容缩进 ---
.el-collapse {
.collapse__title {
font-weight: 600;
@@ -13,16 +14,19 @@
}
}
// --- 水平分割线上下边距 ---
.el-divider--horizontal {
margin-bottom: 10px;
margin-top: 10px;
}
// --- 面包屑链接字重 ---
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
font-weight: 400 !important;
}
// --- 隐藏原生 file input（配合 EP 上传 UI） ---
.el-upload {
input[type='file'] {
display: none !important;
@@ -33,12 +37,14 @@
display: none;
}
// --- 表格默认 .cell 内 tag 去右间距 ---
.cell {
.el-tag {
margin-right: 0px;
}
}
// --- 列 class：窄内边距 / 固定宽操作列 / 状态列居中 ---
.small-padding {
.cell {
padding-left: 5px;
@@ -63,3 +69,14 @@
}
}
}
.upload-container {
.el-upload {
width: 100%;
.el-upload-dragger {
width: 100%;
height: 200px;
}
}
}
src/assets/styles/vendors/element-plus/_navigation.scss
Vendored
+1 -16
View File
@@ -1,19 +1,4 @@
/* Navigation and collection views: tables, tabs, pagination, breadcrumb. */
.el-table {
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--app-surface-border);
}
.el-table__header-wrapper,
.el-table__body-wrapper {
background: transparent;
}
.el-table__row:hover td.el-table__cell {
background-color: rgba(53, 109, 255, 0.05) !important;
}
/* 导航类组件：Tabs、Pagination、面包屑容 */
.el-tabs__header {
margin: 0 0 12px 0;
src/assets/styles/vendors/element-plus/_primitives.scss → src/assets/styles/vendors/element-plus/_overrides.scss
Vendored
+8 -1
View File
@@ -1,5 +1,7 @@
/* Shared Element Plus primitives used across multiple component overrides. */
/* 跨多个 Element Plus 组件的共用覆盖（圆角、描边、阴影、主按钮、表格变量、输入框等）。
* 注意：本文件在入口中晚于 components/_card-shell 载入，其中 .el-card 等与卡片壳层重叠的属性以本文件为准（例如阴影强度）。 */
// --- 卡片、弹层、抽屉及常见 popper 容器的圆角/边线/阴影 ---
.el-card,
.el-dialog,
.el-drawer,
@@ -12,16 +14,19 @@
box-shadow: var(--app-shadow-md);
}
// --- 实体「面板」背景 ---
.el-card,
.el-dialog,
.el-drawer {
background: var(--app-surface-bg);
}
// --- 按钮默认字重 ---
.el-button {
font-weight: 500;
}
// --- primary 品牌色（亮色；暗色见 tokens/_theme-dark） ---
.el-button--primary {
--el-button-bg-color: var(--app-accent-strong);
--el-button-border-color: var(--app-accent-strong);
@@ -31,6 +36,7 @@
--el-button-active-border-color: #2e5ce0;
}
// --- 表格 CSS 变量接业务 token ---
.el-table {
--el-table-border-color: var(--app-surface-border);
--el-table-header-bg-color: var(--tableHeaderBg);
@@ -38,6 +44,7 @@
background: transparent;
}
// --- 输入类默认内描边（与 _form 中 focus 环配合） ---
.el-input__wrapper,
.el-textarea__inner,
.el-select__wrapper {
src/assets/styles/vendors/element-plus/_popper.scss
Vendored
+1 -1
View File
@@ -1,4 +1,4 @@
/* Popper-backed widgets: dropdowns, date pickers, popovers, autocomplete. */
/* 各类浮层：Select/Cascader/DatePicker/Tooltip/Popover 等边框、列表项 hover、暗色箭头与日历格选中态。 */
.el-select__popper.el-popper,
.el-picker__popper.el-popper,
src/assets/styles/vendors/element-plus/_table.scss
Vendored
+49 -3
View File
@@ -1,9 +1,10 @@
// 覆盖element plus 表格样式
/* Element Plus 表格：通用容器圆角、边线、overflow、行 hover、四角单元格、border/fit 清理（不含业务页表头 token，表头见 components/_legacy-utilities）。 */
@use '../../tokens/sass-vars' as *;
.el-table {
border-radius: var(--app-radius-md);
border: 1px solid var(--app-surface-border);
overflow: hidden;
// 给右上角表头单元格增加右上角圆角
thead tr:first-child th:last-child {
@@ -21,6 +22,15 @@
}
}
.el-table__header-wrapper,
.el-table__body-wrapper {
background: transparent;
}
.el-table__row:hover td.el-table__cell {
background-color: rgba(53, 109, 255, 0.05) !important;
}
// 去掉额外的表格边线，使用表格border
.el-table--border:after,
.el-table--border:before,
@@ -34,4 +44,40 @@
.el-table--fit {
border-bottom: 0;
border-right: 0;
}
}
// --- 表格内操作列：固定宽按钮、下拉链接色 ---
.el-table .fixed-width .el-button--small {
padding-left: 0;
padding-right: 0;
width: inherit;
}
.el-table .el-dropdown-link {
cursor: pointer;
color: #409eff;
margin-left: 10px;
}
.el-table {
.el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th {
word-break: break-word;
background-color: $table-header-bg !important;
color: $table-header-text-color;
height: 40px !important;
font-size: 13px;
}
}
.el-table__body-wrapper {
.el-button [class*='el-icon-'] + span {
margin-left: 1px;
}
}
}
src/components/Pagination/index.vue
+1 -1
View File
@@ -71,7 +71,7 @@ function handleCurrentChange(val: number) {
display: flex;
align-items: center;
justify-content: flex-end;
padding-top: 18px;
padding-top: 10px;
margin-top: 18px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
src/components/RoleSelect/index.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<div>
<el-dialog v-model="roleDialog.visible.value" :title="roleDialog.title.value" width="80%" append-to-body class="role-select-dialog">
<div class="page-shell role-select-shell">
<div class="p-2 role-select-shell">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch">
<el-card shadow="hover" class="search-panel selector-card">
src/components/UserSelect/index.vue
+2 -2
View File
@@ -1,7 +1,7 @@
<template>
<div>
<el-dialog v-model="userDialog.visible.value" :title="userDialog.title.value" width="80%" append-to-body class="user-select-dialog">
<div class="page-shell user-select-shell">
<div class="p-2 user-select-shell">
<el-row :gutter="12" class="selector-layout">
<!-- 部门树 -->
<el-col :lg="5" :xs="24">
@@ -27,7 +27,7 @@
</el-card>
</el-col>
<el-col :lg="19" :xs="24">
<div class="page-shell user-select-main">
<div class="p-2user-select-main">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div v-show="showSearch">
<el-card shadow="hover" class="search-panel selector-card">
src/layout/components/TopBar/index.vue
+5
View File
@@ -123,6 +123,11 @@ onMounted(() => {
transform: none !important;
}
#app .topbar-menu.el-menu--horizontal .el-menu-item .svg-icon + span,
#app .topbar-menu.el-menu--horizontal .el-sub-menu__title .svg-icon + span {
margin-left: 2px;
}
#app .topbar-menu.el-menu--horizontal > div > a > .el-menu-item .svg-icon,
#app .topbar-menu.el-menu--horizontal > div > .el-sub-menu > .el-sub-menu__title .svg-icon,
#app .topbar-menu.el-menu--horizontal > .el-sub-menu > .el-sub-menu__title .svg-icon {
src/views/demo/demo/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell demo-demo-page">
<div class="p-2 app-container demo-demo-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/demo/tree/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell demo-tree-page">
<div class="p-2 app-container demo-tree-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/monitor/admin/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell iframe-page">
<div class="p-2 app-container iframe-page">
<div class="iframe-page__inner">
<i-frame v-model:src="url"></i-frame>
</div>
src/views/monitor/cache/index.vue
Vendored
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell monitor-cache-page">
<div class="p-2 app-container monitor-cache-page">
<el-row :gutter="12" class="cache-grid">
<el-col :span="24">
<el-card shadow="hover" class="table-panel">
src/views/monitor/logininfo/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell monitor-logininfo-page">
<div class="p-2 app-container monitor-logininfo-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/monitor/online/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell monitor-online-page">
<div class="p-2 app-container monitor-online-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel">
<template #header>
src/views/monitor/operlog/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell monitor-operlog-page">
<div class="p-2 app-container monitor-operlog-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/monitor/snailjob/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell iframe-page">
<div class="p-2 app-container iframe-page">
<div class="iframe-page__inner">
<i-frame v-model:src="url"></i-frame>
</div>
src/views/system/client/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell system-client-page">
<div class="p-2 app-container system-client-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/config/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell system-config-page">
<div class="p-2 app-container system-config-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/dept/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell system-dept-page">
<div class="p-2 app-container system-dept-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/dict/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell dict-page">
<div class="p-2 app-container dict-page">
<el-row :gutter="16" class="dict-grid">
<!-- 字典类型 -->
<el-col :xs="24" :lg="12">
src/views/system/menu/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell system-menu-page">
<div class="p-2 app-container system-menu-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/notice/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell system-notice-page">
<div class="p-2 app-container system-notice-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/oss/config.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell system-oss-config-page">
<div class="p-2 app-container system-oss-config-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/oss/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell system-oss-page">
<div class="p-2 app-container system-oss-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/post/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell system-post-page">
<div class="p-2 app-container system-post-page">
<el-row :gutter="20" class="content-grid">
<!-- 部门树 -->
<el-col :lg="5" :xs="24">
src/views/system/role/authUser.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell role-auth-user-page">
<div class="p-2 app-container role-auth-user-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/role/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="page-shell system-role-page">
<div class="p-2 system-role-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/system/role/selectUser.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<el-row>
<el-dialog v-model="visible" title="选择用户" width="800px" top="5vh" append-to-body class="select-user-dialog">
<div class="page-shell select-user-shell">
<div class="p-2 select-user-shell">
<el-card shadow="hover" class="search-panel select-user-card">
<el-form ref="queryFormRef" :model="queryParams" :inline="true" class="query-form">
<el-form-item label="用户名称" prop="userName">
src/views/system/user/authRole.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell auth-role-page">
<div class="p-2 app-container auth-role-page">
<el-card shadow="hover" class="search-panel auth-role-info">
<template #header>
<div class="panel-heading">
src/views/system/user/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="page-shell system-user-page">
<div class="p-2 system-user-page">
<el-row :gutter="20" class="content-grid">
<!-- 部门树 -->
<el-col :lg="5" :xs="24">
src/views/system/user/profile/index.vue
+22 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell profile-page">
<div class="p-2 app-container profile-page">
<el-row :gutter="20" class="profile-grid">
<el-col :span="6" :xs="24">
<el-card shadow="hover" class="side-panel profile-summary-card">
@@ -226,4 +226,25 @@ onMounted(() => {
max-width: 50%;
}
}
.list-group-striped > .list-group-item {
border-left: 0;
border-right: 0;
border-radius: 0;
padding-left: 0;
padding-right: 0;
}
.list-group {
padding-left: 0px;
list-style: none;
}
.list-group-item {
border-bottom: 1px solid #e7eaec;
border-top: 1px solid #e7eaec;
margin-bottom: -1px;
padding: 11px 0px;
font-size: 13px;
}
</style>
src/views/system/user/profile/userAvatar.vue
+5
View File
@@ -156,6 +156,11 @@ const closeDialog = () => {
</script>
<style lang="scss" scoped>
.img-lg {
width: 120px;
height: 120px;
}
.user-info-head {
position: relative;
display: inline-block;
src/views/tool/gen/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell tool-gen-page">
<div class="p-2 app-container tool-gen-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/workflow/category/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-category-page">
<div class="p-2 app-container workflow-category-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/workflow/leave/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-leave-page">
<div class="p-2 app-container workflow-leave-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/workflow/processDefinition/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-process-definition-page">
<div class="p-2 app-container workflow-process-definition-page">
<el-row :gutter="20" class="content-grid">
<!-- 流程分类树 -->
<el-col :lg="4" :xs="24">
src/views/workflow/processInstance/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-process-instance-page">
<div class="p-2 app-container workflow-process-instance-page">
<el-row :gutter="20" class="content-grid">
<!-- 流程分类树 -->
<el-col :lg="4" :xs="24">
src/views/workflow/spel/index.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-spel-page">
<div class="p-2 app-container workflow-spel-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/workflow/task/allTaskWaiting.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-all-task-page">
<div class="p-2 app-container workflow-all-task-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/workflow/task/myDocument.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-my-document-page">
<div class="p-2 app-container workflow-my-document-page">
<el-row :gutter="20" class="content-grid">
<!-- 流程分类树 -->
<el-col :lg="4" :xs="24">
src/views/workflow/task/taskCopyList.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-task-copy-page">
<div class="p-2 app-container workflow-task-copy-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/workflow/task/taskFinish.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-task-finish-page">
<div class="p-2 app-container workflow-task-finish-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>
src/views/workflow/task/taskWaiting.vue
+1 -1
View File
@@ -1,5 +1,5 @@
<template>
<div class="p-2 page-shell workflow-task-waiting-page">
<div class="p-2 app-container workflow-task-waiting-page">
<div class="search-wrap">
<el-card shadow="hover" class="search-panel" :class="{ 'is-collapsed': !showSearch }">
<template #header>