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:
疯狂的狮子Li
2026-04-01 19:18:07 +08:00
parent 3f30bac6f3
commit 38c67fba25
31 changed files with 163 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/assets/styles/components/_card-shell.scss
+6 -6
View File
@@ -4,8 +4,8 @@
// --- 历史「表单分区标题」样式 ---
.form-header {
font-size: 15px;
color: #6379bb;
border-bottom: 1px solid #ddd;
color: var(--el-color-primary);
border-bottom: 1px solid var(--app-surface-border);
margin: 8px 10px 25px 10px;
padding-bottom: 5px;
}
@@ -13,8 +13,8 @@
// --- 树形容器描边（暗色覆盖在 _search-panel） ---
.tree-border {
margin-top: 8px;
border: 1px solid rgba(148, 163, 184, 0.16);
background: rgba(255, 255, 255, 0.42) none;
border: 1px solid var(--app-surface-border);
background: var(--app-surface-bg);
border-radius: 22px;
width: 100%;
padding: 12px;
@@ -39,7 +39,7 @@
padding: 14px 16px 10px !important;
min-height: auto;
background: transparent;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid var(--app-surface-border);
}
.el-card__body {
@@ -59,7 +59,7 @@
.el-card:hover {
box-shadow: var(--app-shadow-md);
border-color: rgba(64, 158, 255, 0.16);
border-color: var(--app-accent-soft);
}
.card-box {
src/assets/styles/components/_misc.scss
+2 -2
View File
@@ -1,9 +1,9 @@
.link-type,
.link-type:focus {
color: #337ab7;
color: var(--el-color-primary);
cursor: pointer;
&:hover {
color: rgb(32, 160, 255);
color: var(--app-accent-strong);
}
}
src/assets/styles/components/_page-shell.scss
+2 -1
View File
@@ -144,7 +144,8 @@
.dept-tree::-webkit-scrollbar-thumb,
.selector-tree::-webkit-scrollbar-thumb {
border-radius: 999px;
background: rgba(148, 163, 184, 0.55);
background: var(--app-text-muted);
opacity: 0.55;
}
.dept-tree::-webkit-scrollbar-track,
src/assets/styles/components/_search-panel.scss
+3 -3
View File
@@ -7,7 +7,7 @@
min-width: 28px !important;
padding: 0 !important;
border-radius: 10px !important;
background: rgba(53, 109, 255, 0.08) !important;
background: var(--app-accent-soft) !important;
}
.data-table .el-button.is-link + .el-button.is-link {
@@ -77,7 +77,7 @@
:global(html.dark) {
.tree-border {
background: rgba(15, 23, 42, 0.42);
border-color: rgba(100, 116, 139, 0.22);
background: var(--app-surface-bg);
border-color: var(--app-surface-border);
}
}
src/assets/styles/mixin.scss
+2 -2
View File
@@ -10,7 +10,7 @@
// WebKit 滚动条配色（用于可滚动容器）
@mixin scrollBar {
&::-webkit-scrollbar-track-piece {
background: #d3dce6;
background: var(--app-surface-border);
}
&::-webkit-scrollbar {
@@ -18,7 +18,7 @@
}
&::-webkit-scrollbar-thumb {
background: #99a9bf;
background: var(--app-text-muted);
border-radius: 20px;
}
}
src/assets/styles/tokens/_theme-dark.scss
+8 -2
View File
@@ -15,9 +15,15 @@ html.dark {
--tableHeaderBg: var(--el-bg-color);
--tableHeaderTextColor: var(--el-text-color);
// --- 树节点：暗色下修正 primary 浅底色 ---
// --- 表格：暗色下选中行背景 ---
--el-table-current-row-bg-color: rgba(53, 109, 255, 0.14);
--el-table-row-hover-bg-color: rgba(148, 163, 184, 0.07);
// --- 全局：暗色下修正 primary 浅底色（表格行选中、树节点等） ---
--el-color-primary-light-9: rgba(53, 109, 255, 0.14);
.el-tree-node__content {
--el-color-primary-light-9: #262727;
--el-color-primary-light-9: rgba(53, 109, 255, 0.14);
}
// --- 各类型按钮（含 plain）在暗色下的 EP CSS 变量 ---
src/assets/styles/vendors/element-plus/_dialog.scss
Vendored
+2 -2
View File
@@ -26,7 +26,7 @@
.el-dialog__header {
padding: 18px 20px 14px;
box-sizing: border-box;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid var(--app-surface-border);
margin-right: 0;
background: var(--app-elevated-soft-bg);
}
@@ -76,7 +76,7 @@
justify-content: flex-end;
gap: 8px;
padding: 14px 20px 20px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-top: 1px solid var(--app-surface-border);
}
}
}
src/assets/styles/vendors/element-plus/_dropdown.scss
Vendored
+1 -1
View File
@@ -37,7 +37,7 @@
right: 2px;
top: -6px;
width: auto;
background: rgba(148, 163, 184, 0.14);
background: var(--app-surface-border);
}
}
src/assets/styles/vendors/element-plus/_feedback.scss
Vendored
+1 -1
View File
@@ -82,7 +82,7 @@
justify-content: flex-end;
gap: 8px;
padding: 16px 20px 20px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-top: 1px solid var(--app-surface-border);
}
.el-message-box__btns .el-button {
src/assets/styles/vendors/element-plus/_navigation.scss
Vendored
+1 -1
View File
@@ -40,7 +40,7 @@
.el-pagination .el-pagination__sizes .el-input__wrapper {
min-width: 32px;
height: 32px;
border: 1px solid rgba(148, 163, 184, 0.14);
border: 1px solid var(--app-surface-border);
background: var(--app-surface-bg);
}
src/assets/styles/vendors/element-plus/_overrides.scss
Vendored
+34 -2
View File
@@ -40,8 +40,40 @@
.el-table {
--el-table-border-color: var(--app-surface-border);
--el-table-header-bg-color: var(--tableHeaderBg);
--el-table-tr-bg-color: transparent;
background: transparent;
--el-table-tr-bg-color: var(--el-bg-color);
--el-table-bg-color: var(--el-bg-color);
--el-table-row-hover-bg-color: var(--el-fill-color-light);
--el-table-current-row-bg-color: var(--el-color-primary-light-9);
background: var(--el-bg-color);
}
// 暗色模式：行背景、hover、选中全部用不透明色，防止固定列透视
html.dark .el-table {
--el-table-tr-bg-color: var(--app-surface-bg);
--el-table-bg-color: var(--app-surface-bg);
--el-table-row-hover-bg-color: #2a3a55;
--el-table-current-row-bg-color: #1e3a6e;
--el-color-primary-light-9: #1e3a6e;
background: var(--app-surface-bg);
}
// 固定列单元格基底背景与普通行保持一致（亮/暗均适用）
.el-table .el-table__cell {
background-color: var(--el-table-tr-bg-color);
}
// hover 行的所有单元格（含固定列）覆写为不透明背景
.el-table__body tr.hover-row > td.el-table__cell,
.el-table__body tr.hover-row.current-row > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped.current-row > td.el-table__cell,
.el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
background-color: var(--el-table-row-hover-bg-color) !important;
}
// 选中行的所有单元格（含固定列）覆写为不透明背景
.el-table__body tr.current-row > td.el-table__cell {
background-color: var(--el-table-current-row-bg-color) !important;
}
// --- 输入类默认内描边（与 _form 中 focus 环配合） ---
src/assets/styles/vendors/element-plus/_popper.scss
Vendored
+4 -3
View File
@@ -98,7 +98,7 @@
.el-cascader-menu {
min-width: 180px;
border-right-color: rgba(148, 163, 184, 0.12);
border-right-color: var(--app-surface-border);
}
.el-cascader-node__prefix,
@@ -184,11 +184,12 @@
.el-time-panel__content::before,
.el-time-panel__content::after {
border-color: rgba(148, 163, 184, 0.14);
border-color: var(--app-surface-border);
}
.el-scrollbar__thumb {
background: rgba(148, 163, 184, 0.42);
background: var(--app-text-muted);
opacity: 0.42;
}
.el-scrollbar__thumb:hover {
src/assets/styles/vendors/element-plus/_shell.scss
Vendored
+3 -8
View File
@@ -9,7 +9,7 @@
.el-drawer__header {
margin-bottom: 0;
padding: 18px 20px 16px;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid var(--app-surface-border);
background: var(--app-elevated-soft-bg);
color: var(--app-text-title);
}
@@ -43,7 +43,7 @@
}
.el-loading-mask {
background: rgba(248, 250, 252, 0.76);
background: color-mix(in srgb, var(--app-surface-bg) 82%, transparent);
backdrop-filter: blur(4px);
}
@@ -52,7 +52,7 @@
}
.el-descriptions {
--el-descriptions-table-border: rgba(148, 163, 184, 0.14);
--el-descriptions-table-border: var(--app-surface-border);
}
.el-descriptions__body .el-descriptions__table {
@@ -103,8 +103,3 @@
box-shadow: var(--app-shadow-md);
}
html.dark {
.el-loading-mask {
background: rgba(6, 11, 22, 0.7);
}
}
src/assets/styles/vendors/element-plus/_table.scss
Vendored
+8 -1
View File
@@ -32,6 +32,13 @@
background-color: var(--el-bg-color);
}
html.dark {
.el-table__fixed-body-wrapper,
.el-table__fixed-right-body-wrapper {
background-color: var(--app-surface-bg);
}
}
// 去掉额外的表格边线，使用表格border
.el-table--border:after,
.el-table--border:before,
@@ -56,7 +63,7 @@
.el-table .el-dropdown-link {
cursor: pointer;
color: #409eff;
color: var(--el-color-primary);
margin-left: 10px;
}
src/components/IconSelect/index.vue
+1 -1
View File
@@ -144,7 +144,7 @@ watch(
flex-direction: column;
justify-content: center;
align-items: center;
border: 1px solid rgba(148, 163, 184, 0.16);
border: 1px solid var(--app-surface-border);
border-radius: 12px;
background: var(--app-surface-bg);
transition:
src/components/ImagePreview/index.vue
+2 -2
View File
@@ -60,8 +60,8 @@ const realHeight = computed(() => (typeof props.height == 'string' ? props.heigh
<style lang="scss" scoped>
.el-image {
border-radius: 5px;
background-color: #ebeef5;
box-shadow: 0 0 5px 1px #ccc;
background-color: var(--app-elevated-soft-bg);
box-shadow: var(--app-shadow-sm);
:deep(.el-image__inner) {
transition: all 0.3s;
src/components/Pagination/index.vue
+1 -1
View File
@@ -73,7 +73,7 @@ function handleCurrentChange(val: number) {
justify-content: flex-end;
padding-top: 10px;
margin-top: 18px;
border-top: 1px solid rgba(148, 163, 184, 0.14);
border-top: 1px solid var(--app-surface-border);
.el-pagination {
float: none;
src/components/RightToolbar/index.vue
+2 -9
View File
@@ -115,8 +115,8 @@ onMounted(() => {
width: 38px;
height: 38px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.62);
border: 1px solid rgba(148, 163, 184, 0.16);
background: var(--app-elevated-soft-bg);
border: 1px solid var(--app-surface-border);
color: var(--app-text-muted);
transition:
transform 0.25s ease,
@@ -160,11 +160,4 @@ onMounted(() => {
.show-btn {
margin-left: 0;
}
:global(html.dark) {
.top-right-btn :deep(.el-button.is-circle) {
background: rgba(15, 23, 42, 0.56);
border-color: rgba(100, 116, 139, 0.22);
}
}
</style>
src/components/TopNav/index.vue
+8 -10
View File
@@ -177,13 +177,13 @@ onMounted(() => {
<style lang="scss">
.mix-topnav-menu.el-menu--horizontal {
--topbar-pill-bg: rgba(255, 255, 255, 0.7);
--topbar-pill-hover-bg: rgba(255, 255, 255, 0.9);
--topbar-pill-active-bg: rgba(255, 255, 255, 0.82);
--topbar-pill-bg: var(--app-elevated-soft-bg);
--topbar-pill-hover-bg: var(--app-elevated-close-bg);
--topbar-pill-active-bg: var(--app-elevated-close-bg);
--topbar-pill-text: var(--app-text-title);
--topbar-pill-muted: var(--app-text-muted);
--topbar-pill-border: rgba(148, 163, 184, 0.12);
--topbar-pill-active-border: rgba(148, 163, 184, 0.14);
--topbar-pill-border: var(--app-surface-border);
--topbar-pill-active-border: var(--app-surface-border);
display: flex;
align-items: center;
@@ -287,12 +287,10 @@ onMounted(() => {
.mix-topnav-popper .el-menu--popup {
min-width: 188px;
padding: 10px !important;
border: 1px solid rgba(148, 163, 184, 0.14);
border: 1px solid var(--app-surface-border);
border-radius: 18px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)) !important;
box-shadow:
0 18px 40px rgba(15, 23, 42, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
background: var(--app-surface-bg) !important;
box-shadow: var(--app-shadow-md);
}
.mix-topnav-popper .el-menu--popup .el-menu-item,
src/layout/components/Navbar.vue
+7 -11
View File
@@ -181,11 +181,9 @@ const handleCommand = (command: string) => {
margin-right: 12px;
flex-shrink: 0;
border-radius: 14px;
border: 1px solid rgba(148, 163, 184, 0.18);
background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 252, 0.82));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 6px 14px rgba(15, 23, 42, 0.04);
border: 1px solid var(--app-surface-border);
background: var(--app-surface-bg);
box-shadow: var(--app-shadow-sm);
transition:
transform 0.2s ease,
border-color 0.2s ease,
@@ -213,11 +211,9 @@ const handleCommand = (command: string) => {
margin-left: 0;
padding: 4px 8px;
border-radius: 16px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.58));
border: 1px solid rgba(148, 163, 184, 0.14);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.72),
0 6px 18px rgba(15, 23, 42, 0.04);
background: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
box-shadow: var(--app-shadow-sm);
}
}
@@ -402,7 +398,7 @@ const handleCommand = (command: string) => {
gap: 12px;
padding: 4px 8px 4px 4px;
border-radius: 16px;
background: #fff;
background: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
min-width: 0;
cursor: pointer;
src/layout/components/Settings/index.vue
+4 -6
View File
@@ -278,7 +278,7 @@ defineExpose({
.setting-drawer-title {
margin-bottom: 12px;
color: rgba(0, 0, 0, 0.85);
color: var(--app-text-title);
line-height: 22px;
font-weight: bold;
.drawer-title {
@@ -298,7 +298,7 @@ defineExpose({
border-radius: 12px;
cursor: pointer;
overflow: hidden;
border: 1px solid rgba(148, 163, 184, 0.16);
border: 1px solid var(--app-surface-border);
transition:
border-color 0.2s ease,
transform 0.2s ease;
@@ -329,9 +329,7 @@ defineExpose({
height: 100%;
padding-top: 15px;
padding-left: 24px;
color: #1890ff;
font-weight: 700;
font-size: 14px;
color: var(--app-accent-strong);
}
}
}
@@ -340,7 +338,7 @@ defineExpose({
padding: 12px 0;
font-size: 14px;
color: var(--app-text-title);
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
border-bottom: 1px solid var(--app-surface-border);
.comp-style {
float: right;
src/layout/components/TagsView/index.vue
+18 -19
View File
@@ -482,13 +482,12 @@ onBeforeUnmount(() => {
align-items: flex-start;
height: 38px;
width: 100%;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
background-color: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
border-radius: var(--app-radius-md);
box-shadow: var(--app-shadow-sm);
$btn-width: 26px;
$btn-color: #71717a;
$btn-hover-bg: var(--el-fill-color-light);
$btn-hover-color: var(--el-text-color-primary);
@@ -501,10 +500,10 @@ onBeforeUnmount(() => {
height: 26px;
margin-top: 4px;
cursor: pointer;
color: $btn-color;
color: var(--app-text-muted);
user-select: none;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
background-color: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
border-radius: var(--app-radius-md);
transition:
box-shadow 0.2s ease,
@@ -542,9 +541,9 @@ onBeforeUnmount(() => {
cursor: pointer;
height: 26px;
line-height: 25px;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
color: #495060;
background-color: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
color: var(--el-text-color-regular);
padding: 0 8px;
font-size: 12px;
margin-left: 5px;
@@ -572,13 +571,13 @@ onBeforeUnmount(() => {
}
&.active {
background-color: #42b983;
color: #fff;
border-color: #42b983;
background-color: var(--tags-view-active-bg);
color: var(--el-color-white);
border-color: var(--tags-view-active-border-color);
&::before {
content: '';
background: #fff;
background: var(--el-color-white);
display: inline-block;
width: 8px;
height: 8px;
@@ -616,10 +615,10 @@ onBeforeUnmount(() => {
height: 26px;
padding: 0 8px;
cursor: pointer;
color: $btn-color;
color: var(--app-text-muted);
user-select: none;
background-color: var(--el-bg-color);
border: 1px solid var(--el-border-color-light);
background-color: var(--app-surface-bg);
border: 1px solid var(--app-surface-border);
border-radius: var(--app-radius-md);
transition:
box-shadow 0.2s ease,
@@ -646,7 +645,7 @@ onBeforeUnmount(() => {
.contextmenu {
margin: 0;
background: var(--el-bg-color);
background: var(--app-surface-bg);
z-index: 3000;
position: fixed;
list-style-type: none;
@@ -688,8 +687,8 @@ onBeforeUnmount(() => {
}
&:hover {
background-color: #b4bccc;
color: #fff;
background-color: var(--app-surface-border);
color: var(--el-color-white);
width: 12px !important;
height: 12px !important;
}
src/layout/components/TopBar/index.vue
+5 -5
View File
@@ -81,13 +81,13 @@ onMounted(() => {
<style lang="scss">
.topbar-menu.el-menu--horizontal {
--topbar-pill-bg: rgba(255, 255, 255, 0.7);
--topbar-pill-hover-bg: rgba(255, 255, 255, 0.9);
--topbar-pill-active-bg: rgba(255, 255, 255, 0.82);
--topbar-pill-bg: var(--app-elevated-soft-bg);
--topbar-pill-hover-bg: var(--app-elevated-close-bg);
--topbar-pill-active-bg: var(--app-elevated-close-bg);
--topbar-pill-text: var(--app-text-title);
--topbar-pill-muted: var(--app-text-muted);
--topbar-pill-border: rgba(148, 163, 184, 0.12);
--topbar-pill-active-border: rgba(148, 163, 184, 0.14);
--topbar-pill-border: var(--app-surface-border);
--topbar-pill-active-border: var(--app-surface-border);
display: flex;
align-items: center;
src/layout/components/TopBar/search.vue
+5 -32
View File
@@ -407,7 +407,7 @@ defineExpose({
.empty-icon {
font-size: 40px;
margin-bottom: 14px;
color: #cbd5e1;
color: var(--app-text-muted);
}
.empty-text {
@@ -429,7 +429,7 @@ defineExpose({
align-items: center;
gap: 24px;
padding: 14px 18px 16px;
border-top: 1px solid rgba(148, 163, 184, 0.12);
border-top: 1px solid var(--app-surface-border);
color: var(--app-text-muted);
font-size: 12px;
}
@@ -447,40 +447,13 @@ kbd {
min-width: 20px;
height: 20px;
padding: 0 5px;
border: 1px solid rgba(148, 163, 184, 0.28);
border: 1px solid var(--app-surface-border);
border-radius: 6px;
background: rgba(248, 250, 252, 0.9);
background: var(--app-elevated-soft-bg);
color: var(--app-text-title);
font-size: 11px;
line-height: 1;
box-shadow: inset 0 -1px 0 rgba(148, 163, 184, 0.18);
box-shadow: inset 0 -1px 0 var(--app-surface-border);
}
:global(html.dark) {
.layout-search-dialog {
:deep(.el-dialog) {
background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.95));
}
:deep(.el-input__wrapper) {
background: rgba(15, 23, 42, 0.92);
box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.38);
}
}
.search-item:hover {
background: rgba(59, 130, 246, 0.16);
}
.empty-icon {
color: #64748b;
}
kbd {
background: rgba(30, 41, 59, 0.9);
border-color: rgba(71, 85, 105, 0.48);
color: #e2e8f0;
box-shadow: inset 0 -1px 0 rgba(15, 23, 42, 0.5);
}
}
</style>
src/layout/components/notice/index.vue
+2 -2
View File
@@ -96,7 +96,7 @@ const readAll = () => {
.head-box {
display: flex;
border-bottom: 1px solid rgba(148, 163, 184, 0.14);
border-bottom: 1px solid var(--app-surface-border);
box-sizing: border-box;
color: var(--app-text-title);
justify-content: space-between;
@@ -130,7 +130,7 @@ const readAll = () => {
}
:deep(.el-tabs__nav-wrap::after) {
background: rgba(148, 163, 184, 0.14);
background: var(--app-surface-border);
}
:deep(.el-tabs__item) {
src/views/index.vue
+8 -15
View File
@@ -131,7 +131,7 @@ const goTarget = (url: string) => {
padding: 30px;
background:
radial-gradient(circle at top left, rgba(53, 109, 255, 0.16), transparent 30%),
linear-gradient(135deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.42));
var(--app-surface-bg);
}
.hero-copy {
@@ -184,8 +184,8 @@ const goTarget = (url: string) => {
.stat-card {
padding: 18px 20px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.54);
border: 1px solid rgba(148, 163, 184, 0.14);
background: var(--app-elevated-soft-bg);
border: 1px solid var(--app-surface-border);
display: flex;
flex-direction: column;
gap: 6px;
@@ -243,8 +243,8 @@ const goTarget = (url: string) => {
.product-card {
padding: 22px;
border-radius: 24px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid rgba(148, 163, 184, 0.14);
background: var(--app-elevated-soft-bg);
border: 1px solid var(--app-surface-border);
transition:
transform 0.25s ease,
box-shadow 0.25s ease,
@@ -308,8 +308,8 @@ const goTarget = (url: string) => {
.capability-group {
padding: 18px 18px 18px 20px;
border-radius: 22px;
background: rgba(255, 255, 255, 0.46);
border: 1px solid rgba(148, 163, 184, 0.14);
background: var(--app-elevated-soft-bg);
border: 1px solid var(--app-surface-border);
h3 {
margin: 0 0 12px;
@@ -368,14 +368,7 @@ const goTarget = (url: string) => {
.hero-panel {
background:
radial-gradient(circle at top left, rgba(53, 109, 255, 0.18), transparent 30%),
linear-gradient(135deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.48));
}
.stat-card,
.product-card,
.capability-group {
background: rgba(15, 23, 42, 0.5);
border-color: rgba(100, 116, 139, 0.16);
var(--app-surface-bg);
}
}
</style>
src/views/login.vue
+11 -26
View File
@@ -347,7 +347,7 @@ onMounted(() => {
width: 100%;
padding: 34px 30px 26px;
z-index: 1;
background: rgba(248, 250, 252, 0.92);
background: var(--app-surface-bg);
}
.title-box {
@@ -386,8 +386,8 @@ onMounted(() => {
color: var(--app-text-muted);
padding: 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(148, 163, 184, 0.14);
background: var(--app-elevated-soft-bg);
border: 1px solid var(--app-surface-border);
}
}
@@ -425,8 +425,8 @@ onMounted(() => {
padding: 14px 16px;
margin-bottom: 22px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.58);
border: 1px solid rgba(148, 163, 184, 0.14);
background: var(--app-elevated-soft-bg);
border: 1px solid var(--app-surface-border);
}
.social-label {
@@ -455,9 +455,9 @@ onMounted(() => {
.login-form :deep(.el-input__wrapper) {
min-height: 48px;
background-color: rgba(255, 255, 255, 0.88);
background-color: var(--el-bg-color);
border-radius: 16px;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12) inset;
box-shadow: 0 0 0 1px var(--app-surface-border) inset;
}
.login-form :deep(.el-input__wrapper.is-focus) {
@@ -471,8 +471,8 @@ onMounted(() => {
}
.login-form :deep(.el-button.is-circle) {
background: rgba(255, 255, 255, 0.82);
border: 1px solid rgba(148, 163, 184, 0.16);
background: var(--app-elevated-soft-bg);
border: 1px solid var(--app-surface-border);
color: var(--app-text-muted);
}
@@ -487,8 +487,8 @@ onMounted(() => {
box-sizing: border-box;
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(148, 163, 184, 0.14);
background: var(--el-bg-color);
border: 1px solid var(--app-surface-border);
img {
cursor: pointer;
@@ -562,19 +562,4 @@ onMounted(() => {
}
}
:global(html.dark) {
.login-form {
background: rgba(12, 18, 30, 0.88);
border-color: rgba(100, 116, 139, 0.2);
}
.login-form :deep(.el-input__wrapper),
.login-code,
.title-box :deep(.lang-select--style),
.social-panel,
.login-form :deep(.el-button.is-circle) {
background: rgba(15, 23, 42, 0.56);
border-color: rgba(100, 116, 139, 0.2);
}
}
</style>
src/views/register.vue
+7 -20
View File
@@ -328,7 +328,7 @@ onMounted(() => {
width: 100%;
padding: 34px 30px 26px;
z-index: 1;
background: rgba(248, 250, 252, 0.92);
background: var(--app-surface-bg);
}
.title-box {
@@ -367,8 +367,8 @@ onMounted(() => {
color: var(--app-text-muted);
padding: 10px;
border-radius: 14px;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(148, 163, 184, 0.14);
background: var(--app-elevated-soft-bg);
border: 1px solid var(--app-surface-border);
}
}
@@ -408,8 +408,8 @@ onMounted(() => {
box-sizing: border-box;
border-radius: 16px;
overflow: hidden;
background: rgba(255, 255, 255, 0.88);
border: 1px solid rgba(148, 163, 184, 0.14);
background: var(--el-bg-color);
border: 1px solid var(--app-surface-border);
img {
cursor: pointer;
@@ -434,9 +434,9 @@ onMounted(() => {
.register-form :deep(.el-input__wrapper) {
min-height: 48px;
background-color: rgba(255, 255, 255, 0.88);
background-color: var(--el-bg-color);
border-radius: 16px;
box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.12) inset;
box-shadow: 0 0 0 1px var(--app-surface-border) inset;
}
.register-form :deep(.el-input__wrapper.is-focus) {
@@ -503,17 +503,4 @@ onMounted(() => {
}
}
:global(html.dark) {
.register-form {
background: rgba(12, 18, 30, 0.88);
border-color: rgba(100, 116, 139, 0.2);
}
.register-form :deep(.el-input__wrapper),
.register-code,
.title-box :deep(.lang-select--style) {
background: rgba(15, 23, 42, 0.56);
border-color: rgba(100, 116, 139, 0.2);
}
}
</style>
src/views/system/user/profile/thirdParty.vue
+1 -1
View File
@@ -130,7 +130,7 @@ const authUrl = (source: string) => {
padding: 12px 10px;
border: 1px solid var(--app-surface-border);
border-radius: 12px;
background: rgba(248, 250, 252, 0.82);
background: var(--app-elevated-soft-bg);
transition:
transform 0.2s ease,
border-color 0.2s ease,
src/views/system/user/profile/userAvatar.vue
+2 -2
View File
@@ -174,7 +174,7 @@ const closeDialog = () => {
height: 120px;
object-fit: cover;
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.92);
border: 4px solid var(--app-surface-border);
box-shadow: var(--app-shadow-sm);
}
@@ -203,7 +203,7 @@ const closeDialog = () => {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: 0 0 4px #ccc;
box-shadow: var(--app-shadow-md);
overflow: hidden;
}
</style>
src/views/workflow/spel/index.vue
+2 -2
View File
@@ -403,9 +403,9 @@ onMounted(() => {
.preview-box {
width: 100%;
padding: 10px 12px;
background-color: #f5f7fa;
background-color: var(--el-fill-color-light);
border-radius: 4px;
color: #333;
color: var(--el-text-color-primary);
font-family: monospace; /* 等宽字体更清晰 */
white-space: nowrap; /* 禁止换行 */
overflow-x: auto; /* 超出宽度时显示水平滚动条 */