From af3d3bfc89297396a9c437e3aeeb9edba0323a6b Mon Sep 17 00:00:00 2001 From: v6ole Date: Mon, 13 Jul 2026 08:29:58 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E6=9A=97=E9=BB=91=E6=A8=A1=E5=BC=8FUI?= =?UTF-8?q?=E4=BC=98=E5=8C=96=20=E2=80=94=20=E5=AF=BC=E8=88=AA=E6=A0=8F/?= =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=83=8C=E6=99=AF=E4=BA=92=E6=8D=A2,=20Eleme?= =?UTF-8?q?nt=20Plus=E7=BB=84=E4=BB=B6=E9=80=82=E9=85=8D,=20=E4=BA=AE?= =?UTF-8?q?=E7=81=AF=E8=A1=A8=E5=8D=A1=E7=89=87+=E4=BB=AA=E8=A1=A8?= =?UTF-8?q?=E7=9B=98=E5=9B=BE=E6=A0=87=E6=9A=97=E8=89=B2=E9=80=82=E9=85=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 极简/科技深色: 导航栏和页面背景颜色互换(sidebar更亮,page更暗) - 新增20+条 Element Plus 暗色全局覆盖(input/select/table/pagination/button/dialog/tabs/date-picker等) - Dashboard: stat-glyph在暗色下移除背景色(参考本周请假), progress-row背景降低亮度 - LightBoard: 卡片文字固定深色(card背景是浅色), light-dot适配暗色背景 - 新增 --c-bg-light token 防止暗色下summary-bar回退到浅色 Co-Authored-By: Claude --- frontend/src/App.vue | 225 +++++++++++++++++++++- frontend/src/views/desktop/Dashboard.vue | 13 ++ frontend/src/views/desktop/LightBoard.vue | 13 ++ 3 files changed, 245 insertions(+), 6 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 7cda89e..8ccb7fa 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -192,8 +192,8 @@ const isMobile = computed(() => { --gold: #A78BFA; --gold-light: #C4B5FD; --gold-dark: #8B5CF6; - --paper: #1A1A1A; - --paper-dark: #141414; + --paper: #141414; + --paper-dark: #0D0D0D; --surface: #2D2D2D; --sage: #4ADE80; --amber: #FBBF24; @@ -228,8 +228,11 @@ const isMobile = computed(() => { --radius-xs: 0px; --transition: 0.18s cubic-bezier(0.4, 0, 0.2, 1); + /* ── Misc dark tokens ── */ + --c-bg-light: #1E1E1E; + /* ── Sidebar — dark minimal ── */ - --sidebar-bg: #141414; + --sidebar-bg: #1A1A1A; --sidebar-color: #E5E5E5; --sidebar-accent: var(--gold); --sidebar-nav-text: #777777; @@ -272,8 +275,8 @@ const isMobile = computed(() => { --gold: #5B8DEF; --gold-light: #7BA5F5; --gold-dark: #4070D0; - --paper: #0B1120; - --paper-dark: #080C18; + --paper: #070D1A; + --paper-dark: #050910; --surface: #111B2E; --sage: #4EC9B0; --amber: #E5C07B; @@ -308,8 +311,11 @@ const isMobile = computed(() => { --radius-xs: 2px; --transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1); + /* ── Misc dark tokens ── */ + --c-bg-light: #101A28; + /* ── Sidebar — dark tech ── */ - --sidebar-bg: #070D1A; + --sidebar-bg: #0B1120; --sidebar-color: #C8D6E5; --sidebar-accent: var(--gold); --sidebar-nav-text: rgba(200,214,229,0.45); @@ -626,4 +632,211 @@ body.col-resizing { cursor: col-resize !important; user-select: none !important; } + +/* ═══════════════════════════════════════════════════════════ + Dark Mode — Element Plus Global Overrides + ═══════════════════════════════════════════════════════════ */ + +html.dark .el-input__wrapper { + background: var(--surface) !important; + box-shadow: 0 0 0 1px var(--warm-border) inset !important; +} +html.dark .el-input__inner { + color: var(--c-text) !important; +} +html.dark .el-input__wrapper:hover { + box-shadow: 0 0 0 1px var(--c-text-muted) inset !important; +} +html.dark .el-input__wrapper.is-focus { + box-shadow: 0 0 0 2px var(--gold) inset !important; +} + +/* Select dropdown */ +html.dark .el-select-dropdown { + background: var(--surface) !important; + border-color: var(--warm-border) !important; +} +html.dark .el-select-dropdown__item { + color: var(--c-text) !important; +} +html.dark .el-select-dropdown__item:hover { + background: var(--c-primary-bg) !important; +} +html.dark .el-select-dropdown__item.selected { + color: var(--gold) !important; +} + +/* Table */ +html.dark .el-table { + --el-table-bg-color: var(--surface) !important; + --el-table-tr-bg-color: var(--surface) !important; + --el-table-header-bg-color: var(--c-primary-bg) !important; + --el-table-row-hover-bg-color: var(--c-primary-bg) !important; + --el-table-border-color: var(--warm-border) !important; + --el-table-text-color: var(--c-text) !important; + --el-table-header-text-color: var(--c-text) !important; +} +html.dark .el-table th.el-table__cell { + background: var(--c-primary-bg) !important; + color: var(--c-text) !important; +} +html.dark .el-table td.el-table__cell { + background: var(--surface) !important; +} +html.dark .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { + background: var(--c-primary-bg) !important; +} +html.dark .el-table__body tr:hover > td.el-table__cell { + background: var(--c-primary-bg) !important; +} + +/* Pagination */ +html.dark .el-pagination button, +html.dark .el-pager li { + background: var(--surface) !important; + color: var(--c-text) !important; +} +html.dark .el-pager li.is-active { + background: var(--ink) !important; + color: #fff !important; +} +html.dark .el-pagination button:hover, +html.dark .el-pager li:hover { + color: var(--gold) !important; +} + +/* Button — default / text variant */ +html.dark .el-button--default { + --el-button-bg-color: var(--surface); + --el-button-border-color: var(--warm-border); + --el-button-text-color: var(--c-text); + --el-button-hover-bg-color: var(--c-primary-bg); + --el-button-hover-border-color: var(--c-text-muted); + --el-button-hover-text-color: var(--c-text); +} + +/* Dialog */ +html.dark .el-dialog { + --el-dialog-bg-color: var(--surface); +} +html.dark .el-dialog__title { + color: var(--c-text) !important; +} +html.dark .el-dialog__header { + border-bottom: 1px solid var(--warm-border); +} + +/* Tabs */ +html.dark .el-tabs__item { + color: var(--c-text-secondary) !important; +} +html.dark .el-tabs__item.is-active { + color: var(--c-text) !important; +} +html.dark .el-tabs__header { + border-bottom-color: var(--warm-border); +} + +/* Tag */ +html.dark .el-tag { + --el-tag-bg-color: var(--c-primary-bg); + --el-tag-border-color: var(--warm-border); + --el-tag-text-color: var(--c-text); +} + +/* Form label */ +html.dark .el-form-item__label { + color: var(--c-text) !important; +} + +/* Progress */ +html.dark .el-progress-bar__outer { + background: var(--paper-dark) !important; +} + +/* Date picker panel */ +html.dark .el-picker-panel { + background: var(--surface) !important; + border-color: var(--warm-border) !important; +} +html.dark .el-date-picker__header-label { + color: var(--c-text) !important; +} +html.dark .el-date-table td { + color: var(--c-text); +} +html.dark .el-date-table td.current:not(.disabled) .el-date-table-cell__text { + background: var(--gold) !important; + color: #fff !important; +} +html.dark .el-date-table td.today .el-date-table-cell__text { + color: var(--gold) !important; +} + +/* Time picker panel */ +html.dark .el-time-panel { + background: var(--surface) !important; + border-color: var(--warm-border) !important; +} +html.dark .el-time-spinner__item { + color: var(--c-text-muted) !important; +} +html.dark .el-time-spinner__item.is-active { + color: var(--c-text) !important; +} + +/* Popover / tooltip */ +html.dark .el-popover, +html.dark .el-tooltip__popper { + background: var(--surface) !important; + border-color: var(--warm-border) !important; + color: var(--c-text) !important; +} + +/* Message box confirm */ +html.dark .el-message-box { + --el-messagebox-bg-color: var(--surface); + --el-messagebox-title-color: var(--c-text); + --el-messagebox-content-color: var(--c-text-secondary); +} + +/* Empty state */ +html.dark .el-empty__description p { + color: var(--c-text-muted) !important; +} + +/* Radio / Checkbox label */ +html.dark .el-radio__label, +html.dark .el-checkbox__label { + color: var(--c-text) !important; +} + +/* Cascader / Tree select */ +html.dark .el-cascader-node__label { + color: var(--c-text) !important; +} +html.dark .el-cascader-menu { + background: var(--surface) !important; + border-color: var(--warm-border) !important; +} + +/* Alert */ +html.dark .el-alert { + --el-alert-bg-color: var(--c-primary-bg); +} + +/* Drawer */ +html.dark .el-drawer { + background: var(--surface) !important; +} + +/* Divider */ +html.dark .el-divider__text { + background: var(--surface) !important; +} + +/* Loading mask */ +html.dark .el-loading-mask { + background-color: rgba(0,0,0,0.5) !important; +} diff --git a/frontend/src/views/desktop/Dashboard.vue b/frontend/src/views/desktop/Dashboard.vue index a8716c4..ea5c97f 100644 --- a/frontend/src/views/desktop/Dashboard.vue +++ b/frontend/src/views/desktop/Dashboard.vue @@ -426,4 +426,17 @@ function rowState(p: any): 'full' | 'catching' | 'missing' | 'on_leave' | 'rest_ .leave-text { font-size: 13px; color: #5B7FA5; font-family: var(--font-body); } .rest-text { font-size: 13px; color: #9CA3AF; font-family: var(--font-body); } .empty { text-align: center; color: var(--c-text-muted); padding: 40px 0; font-family: var(--font-body); } + +/* ═══ Dark Mode — Dashboard ═══ */ +html.dark .stat-glyph--ink, +html.dark .stat-glyph--sage, +html.dark .stat-glyph--gold, +html.dark .stat-glyph--vermilion { + background: transparent; +} +html.dark .progress-row--missing { background: rgba(248,113,113,0.06); } +html.dark .progress-row--catching { background: rgba(251,191,36,0.05); } +html.dark .progress-row--full { background: rgba(74,222,128,0.05); } +html.dark .progress-row--on_leave { background: rgba(96,165,250,0.05); } +html.dark .progress-row--rest_day { background: rgba(156,163,175,0.03); } diff --git a/frontend/src/views/desktop/LightBoard.vue b/frontend/src/views/desktop/LightBoard.vue index ac1cae6..b64c923 100644 --- a/frontend/src/views/desktop/LightBoard.vue +++ b/frontend/src/views/desktop/LightBoard.vue @@ -389,4 +389,17 @@ const statusLabel: Record = { green: '近30天已拜访', yellow .dlg-plan-item.dlg-plan-overdue { background: #FBF1EE; margin: 2px -4px; padding: 4px; border-radius: 4px; } .dlg-plan-form { background: var(--c-bg-light, #faf9f6); padding: 10px 12px; border-radius: 6px; } .plan-form-row { display: flex; gap: 8px; align-items: center; } + +/* ═══ Dark Mode — light card text stays dark ═══ */ +html.dark .customer-card .card-name { color: #1A1A1A; } +html.dark .customer-card .card-industry, +html.dark .customer-card .card-services, +html.dark .customer-card .card-last-visit { color: #555; } +html.dark .customer-card .card-method { color: #555; border-color: #999; } +html.dark .customer-card .card-last-visit--never { color: #B8472E; } +html.dark .plan-badge { background: #2D2D2D; color: var(--sage); } +html.dark .plan-badge.plan-overdue { background: #3D2020; } +html.dark .light-dot--green { background: #1E2F1E; } +html.dark .light-dot--yellow { background: #2F2818; } +html.dark .light-dot--red { background: #2F1E1E; }