fix: 暗黑模式UI优化 — 导航栏/页面背景互换, Element Plus组件适配, 亮灯表卡片+仪表盘图标暗色适配

- 极简/科技深色: 导航栏和页面背景颜色互换(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 <noreply@anthropic.com>

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;
+}
 </style>

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); }
 </style>

frontend/src/views/desktop/LightBoard.vue

@@ -389,4 +389,17 @@ const statusLabel: Record<string, string> = { 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; }
 </style>