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/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) {