ui 优化

2026-07-10 15:00:49 +08:00
parent f88ff46427
commit b9ba1d5ed4
10 changed files with 1146 additions and 587 deletions
@@ -320,6 +320,7 @@ watch(
 .tabs-view-label-icon {
  font-size: 14px;
  color: #94a3b8;
+  transition: color 0.2s ease;
 }

 .tabs-view :deep(.el-tabs__nav-scroll) {
@@ -316,10 +316,12 @@ function handleUserMenuCommand(command) {
  color: #e0f2fe;
  background: linear-gradient(
    90deg,
-    rgba(56, 189, 248, 0.22),
-    rgba(99, 102, 241, 0.14)
+    rgba(56, 189, 248, 0.18),
+    rgba(251, 113, 133, 0.12)
  );
-  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25) inset;
+  box-shadow:
+    0 0 0 1px rgba(56, 189, 248, 0.2) inset,
+    inset 3px 0 0 rgba(251, 113, 133, 0.6);
 }

 .sidebar-rail-item .el-icon {
@@ -4,6 +4,787 @@ body {
  background: #0a0e14;
 }

+/**
+ * Luxsin CMS Design System
+ * Glassmorphism + Dimensional Layering + Dark Mode OLED
+ */
+:root {
+  /* ── 基础色板 ── */
+  --lux-font:
+    'Inter', 'Segoe UI', system-ui, -apple-system, 'PingFang SC', 'Microsoft YaHei',
+    sans-serif;
+  --lux-page-bg: #0a0e14;
+  --lux-page-gradient: radial-gradient(ellipse 120% 90% at 50% -15%, #1a2840 0%, #0d1117 48%, #0a0e14 100%);
+
+  /* 文本 */
+  --lux-text-strong: #e2e8f0;
+  --lux-text-body: #cbd5e1;
+  --lux-text-muted: #94a3b8;
+  --lux-text-dim: #64748b;
+
+  /* 品牌色 */
+  --lux-cyan: #38bdf8;
+  --lux-cyan-light: #7dd3fc;
+  --lux-cyan-glow: rgba(56, 189, 248, 0.25);
+  --lux-indigo: #6366f1;
+  --lux-violet: #7c3aed;
+  --lux-coral: #fb7185;
+  --lux-coral-light: #fda4af;
+  --lux-coral-glow: rgba(251, 113, 133, 0.25);
+
+  /* 玻璃表面 */
+  --lux-glass-bg-card: rgba(30, 41, 59, 0.55);
+  --lux-glass-bg-table: rgba(30, 41, 59, 0.45);
+  --lux-glass-bg-input: rgba(15, 23, 42, 0.45);
+  --lux-glass-bg-dialog: rgba(30, 41, 59, 0.72);
+  --lux-glass-bg-sidebar: rgba(15, 23, 42, 0.60);
+  --lux-glass-bg-header: rgba(30, 41, 59, 0.75);
+  --lux-glass-bg-tab: rgba(30, 41, 59, 0.35);
+  --lux-glass-bg-tab-active: rgba(30, 41, 59, 0.55);
+  --lux-glass-bg-dropdown: rgba(30, 41, 59, 0.82);
+
+  /* 玻璃边框 */
+  --lux-glass-border: rgba(255, 255, 255, 0.08);
+  --lux-glass-border-hover: rgba(255, 255, 255, 0.14);
+  --lux-glass-border-focus: rgba(56, 189, 248, 0.45);
+
+  /* 模糊 */
+  --lux-blur-sm: blur(8px);
+  --lux-blur-md: blur(14px);
+  --lux-blur-lg: blur(20px);
+  --lux-blur-xl: blur(24px);
+
+  /* Elevation shadows */
+  --lux-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.18);
+  --lux-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.25);
+  --lux-shadow-3: 0 8px 32px rgba(0, 0, 0, 0.35);
+  --lux-shadow-4: 0 25px 50px -12px rgba(0, 0, 0, 0.50);
+
+  /* 焦点 glow */
+  --lux-glow-cyan: 0 0 0 3px rgba(56, 189, 248, 0.15), 0 0 0 1px rgba(56, 189, 248, 0.45) inset;
+
+  /* 圆角 */
+  --lux-radius-sm: 8px;
+  --lux-radius-md: 10px;
+  --lux-radius-lg: 14px;
+  --lux-radius-xl: 18px;
+
+  /* 向后兼容旧变量 */
+  --lux-card-bg: var(--lux-glass-bg-card);
+  --lux-card-border: var(--lux-glass-border);
+  --lux-glass-sidebar: var(--lux-glass-bg-sidebar);
+  --lux-glass-header: var(--lux-glass-bg-header);
+  --lux-input-bg: var(--lux-glass-bg-input);
+}
+
+.lux-shell {
+  font-family: var(--lux-font);
+  position: relative;
+  min-height: 100vh;
+  height: 100vh;
+  overflow: hidden;
+  color: var(--lux-text-strong);
+  background: var(--lux-page-gradient);
+}
+
+.lux-shell-bg {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  z-index: 0;
+  overflow: hidden;
+}
+
+.lux-orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.34;
+}
+
+.lux-orb-1 {
+  width: min(52vw, 400px);
+  height: min(52vw, 400px);
+  background: #22d3ee;
+  top: -12%;
+  left: -8%;
+}
+
+.lux-orb-2 {
+  width: min(48vw, 360px);
+  height: min(48vw, 360px);
+  background: #a78bfa;
+  top: 40%;
+  right: -12%;
+  opacity: 0.28;
+}
+
+.lux-orb-3 {
+  width: min(42vw, 320px);
+  height: min(42vw, 320px);
+  background: #fb7185;
+  bottom: -8%;
+  left: 20%;
+  opacity: 0.18;
+}
+
+.lux-shell-body {
+  position: relative;
+  z-index: 1;
+  height: 100%;
+  background: transparent !important;
+}
+
+.lux-shell-body > .el-container {
+  height: 100%;
+  box-sizing: border-box;
+  padding-left: 64px;
+}
+
+.lux-shell-body > .el-container > .lux-right-col {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  position: relative;
+  z-index: 1;
+  isolation: isolate;
+}
+
+/* ──────────────────────────────────────────
+ * 侧栏玻璃 (L2 — Floating)
+ * ────────────────────────────────────────── */
+.lux-shell .sidebar-glass {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  flex: none;
+  width: 64px !important;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--lux-glass-bg-sidebar) !important;
+  backdrop-filter: var(--lux-blur-lg);
+  -webkit-backdrop-filter: var(--lux-blur-lg);
+  border-right: 1px solid var(--lux-glass-border);
+  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.04);
+  transition: width 0.30s ease, box-shadow 0.30s ease;
+  z-index: 100;
+}
+
+.lux-shell .sidebar-glass:not(.is-collapsed) {
+  width: 220px !important;
+  box-shadow:
+    var(--lux-shadow-3),
+    inset -1px 0 0 rgba(255, 255, 255, 0.04);
+}
+
+.lux-shell .sidebar-glass.is-collapsed {
+  width: 64px !important;
+}
+
+.lux-shell .sidebar-logo {
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: 0 14px;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, transparent 100%);
+  border-bottom: 1px solid var(--lux-glass-border);
+}
+
+.lux-shell .sidebar-glass.is-collapsed .sidebar-logo {
+  width: 64px;
+  min-width: 64px;
+  justify-content: center;
+  padding: 0;
+  overflow: visible;
+}
+
+.lux-shell .lux-menu.el-menu {
+  min-height: 0;
+  border-right: none !important;
+  background: transparent !important;
+  padding: 8px 6px 16px;
+}
+
+.lux-shell .lux-menu--expanded.is-active.el-menu {
+  flex: 1;
+  overflow-y: auto;
+}
+
+.lux-shell .lux-menu .el-sub-menu__title {
+  border-radius: var(--lux-radius-md);
+  margin: 2px 0;
+  color: var(--lux-text-body) !important;
+}
+
+.lux-shell .lux-menu .el-sub-menu__title:hover {
+  background: rgba(255, 255, 255, 0.06) !important;
+}
+
+.lux-shell .lux-menu .el-menu-item {
+  border-radius: var(--lux-radius-md);
+  margin: 3px 4px;
+  color: var(--lux-text-body) !important;
+}
+
+.lux-shell .lux-menu .el-menu-item:hover {
+  background: rgba(255, 255, 255, 0.07) !important;
+  color: var(--lux-text-strong) !important;
+}
+
+.lux-shell .lux-menu .el-menu-item.is-active {
+  color: #e0f2fe !important;
+  background: linear-gradient(
+    90deg,
+    rgba(56, 189, 248, 0.18),
+    rgba(251, 113, 133, 0.12)
+  ) !important;
+  box-shadow:
+    0 0 0 1px rgba(56, 189, 248, 0.2) inset,
+    inset 3px 0 0 rgba(251, 113, 133, 0.6);
+}
+
+.lux-shell .lux-menu .el-icon {
+  color: inherit;
+}
+
+/* ──────────────────────────────────────────
+ * 顶栏玻璃 (L2 — Floating)
+ * ────────────────────────────────────────── */
+.lux-shell .lux-header {
+  height: 44px !important;
+  min-height: 44px !important;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 14px !important;
+  margin: 8px 16px 0 8px;
+  border-radius: var(--lux-radius-md);
+  background: var(--lux-glass-bg-header) !important;
+  backdrop-filter: var(--lux-blur-md);
+  -webkit-backdrop-filter: var(--lux-blur-md);
+  border: 1px solid var(--lux-glass-border) !important;
+  box-shadow: var(--lux-shadow-1);
+}
+
+.lux-shell .lux-header-user-btn {
+  width: 34px !important;
+  height: 34px !important;
+  padding: 0 !important;
+  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.22) !important;
+}
+
+.lux-shell .lux-header-user-btn .el-icon {
+  margin: 0;
+}
+
+.lux-shell .lux-header-user-btn:hover,
+.lux-shell .lux-header-user-btn:focus {
+  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.3) !important;
+}
+
+/* ──────────────────────────────────────────
+ * 主内容区
+ * ────────────────────────────────────────── */
+.lux-shell .lux-main {
+  background: transparent !important;
+  padding: 12px 16px 24px 12px !important;
+  overflow: auto;
+  flex: 1;
+  min-height: 0;
+}
+
+/* 表格 loading 仅覆盖表格区域 */
+.lux-shell .table-loading-host {
+  position: relative;
+  overflow: hidden;
+  min-height: 120px;
+}
+
+.lux-shell .table-loading-host .el-loading-mask {
+  z-index: 8 !important;
+}
+
+/* ──────────────────────────────────────────
+ * 底栏
+ * ────────────────────────────────────────── */
+.lux-shell .lux-footer {
+  flex-shrink: 0;
+  height: auto !important;
+  padding: 10px 16px 14px !important;
+  margin: 0 16px 12px 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(15, 23, 42, 0.35) !important;
+  backdrop-filter: var(--lux-blur-sm);
+  -webkit-backdrop-filter: var(--lux-blur-sm);
+  border-radius: var(--lux-radius-lg);
+  border: none !important;
+  box-shadow: none;
+}
+
+.lux-shell .lux-footer-copy {
+  font-size: 12px;
+  color: rgba(203, 213, 225, 0.85);
+  letter-spacing: 0.03em;
+  user-select: none;
+}
+
+/* ──────────────────────────────────────────
+ * 卡片标题 (全局)
+ * ────────────────────────────────────────── */
+.lux-shell .card-header .title {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--lux-text-strong);
+}
+
+.lux-shell .brand-not-in-db-tip {
+  color: #f59e0b;
+}
+
+/* ══════════════════════════════════════════
+ *  L1 — CONTENT: 卡片 / 表格 (玻璃拟态)
+ * ══════════════════════════════════════════ */
+
+/* ── 卡片玻璃 ── */
+.lux-shell .el-card {
+  border-radius: var(--lux-radius-lg) !important;
+  background: var(--lux-glass-bg-card) !important;
+  backdrop-filter: var(--lux-blur-lg);
+  -webkit-backdrop-filter: var(--lux-blur-lg);
+  border: 1px solid var(--lux-glass-border) !important;
+  box-shadow: var(--lux-shadow-1);
+  color: var(--lux-text-strong);
+  transition: box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
+}
+
+.lux-shell .el-card:hover {
+  box-shadow: var(--lux-shadow-2);
+  border-color: var(--lux-glass-border-hover) !important;
+}
+
+.lux-shell .el-card__header {
+  border-bottom: 1px solid var(--lux-glass-border) !important;
+  font-weight: 600;
+  color: var(--lux-text-strong);
+}
+
+/* 搜索卡片 — 压缩高度 */
+.lux-shell .el-card.search-card {
+  margin-bottom: 14px !important;
+}
+
+.lux-shell .el-card.search-card:hover {
+  transform: none;
+}
+
+.lux-shell .el-card.search-card .el-card__body {
+  padding: 8px 14px 10px !important;
+}
+
+.lux-shell .search-form.el-form--inline .el-form-item {
+  margin-bottom: 4px;
+  margin-top: 0;
+}
+
+/* ── 表格玻璃 ── */
+.lux-shell .el-table {
+  --el-table-border-color: rgba(255, 255, 255, 0.06);
+  --el-table-header-bg-color: rgba(15, 23, 42, 0.65);
+  --el-table-row-hover-bg-color: rgba(251, 113, 133, 0.06);
+  --el-table-bg-color: transparent;
+  --el-table-tr-bg-color: transparent;
+  --el-table-header-text-color: var(--lux-text-muted);
+  --el-table-text-color: var(--lux-text-body);
+  --el-table-expanded-cell-bg-color: transparent;
+  color: var(--lux-text-body);
+  border-radius: 12px;
+  overflow: hidden;
+  background: transparent !important;
+}
+
+.lux-shell .el-table th.el-table__cell {
+  font-weight: 600;
+  color: var(--lux-text-muted);
+  background: rgba(15, 23, 42, 0.65) !important;
+  backdrop-filter: var(--lux-blur-md);
+  -webkit-backdrop-filter: var(--lux-blur-md);
+}
+
+/* 表格条纹行 */
+.lux-shell .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
+  background: rgba(255, 255, 255, 0.02) !important;
+}
+
+/* ── 分页玻璃 ── */
+.lux-shell .el-pagination {
+  --el-pagination-font-size: 13px;
+  --el-pagination-button-color: var(--lux-text-muted);
+  --el-pagination-hover-color: var(--lux-cyan);
+  --el-pagination-bg-color: transparent;
+}
+
+.lux-shell .el-pagination .el-pager li {
+  color: var(--lux-text-muted);
+}
+
+.lux-shell .el-pagination .el-pager li.is-active {
+  color: #fff !important;
+  background: var(--lux-cyan) !important;
+  border-radius: var(--lux-radius-sm);
+}
+
+/* ══════════════════════════════════════════
+ *  按钮 (玻璃拟态)
+ * ══════════════════════════════════════════ */
+
+/* 主按钮 (纯色，禁用渐变) */
+.lux-shell .el-button--primary {
+  --el-button-bg-color: transparent;
+  --el-button-border-color: transparent;
+  background: #38bdf8 !important;
+  border: none !important;
+  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
+  transition: box-shadow 0.2s ease, transform 0.15s ease, background 0.2s ease;
+}
+
+.lux-shell .el-button--primary:hover,
+.lux-shell .el-button--primary:focus {
+  background: #22d3ee !important;
+  box-shadow: 0 6px 16px rgba(56, 189, 248, 0.35);
+}
+
+.lux-shell .el-button--primary:active {
+  transform: scale(0.98);
+}
+
+.lux-shell .el-button--primary.is-plain {
+  background: rgba(56, 189, 248, 0.15) !important;
+  color: var(--lux-cyan-light) !important;
+  border: 1px solid rgba(56, 189, 248, 0.35) !important;
+  box-shadow: none;
+}
+
+.lux-shell .el-button--primary.is-plain:hover {
+  filter: none;
+  background: rgba(56, 189, 248, 0.22) !important;
+}
+
+.lux-shell .el-button--warning {
+  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.25);
+}
+
+.lux-shell .el-button--danger {
+  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.2);
+}
+
+/* ── 默认按钮玻璃化 ── */
+.lux-shell .el-button--default {
+  background: rgba(255, 255, 255, 0.06) !important;
+  border: 1px solid var(--lux-glass-border) !important;
+  color: var(--lux-text-body) !important;
+}
+
+.lux-shell .el-button--default:hover {
+  background: rgba(255, 255, 255, 0.10) !important;
+  border-color: var(--lux-glass-border-hover) !important;
+  color: var(--lux-text-strong) !important;
+}
+
+/* ══════════════════════════════════════════
+ *  输入框 / 下拉 (玻璃拟态)
+ * ══════════════════════════════════════════ */
+.lux-shell .el-input__wrapper {
+  border-radius: var(--lux-radius-md);
+  background-color: var(--lux-glass-bg-input) !important;
+  backdrop-filter: var(--lux-blur-sm);
+  -webkit-backdrop-filter: var(--lux-blur-sm);
+  box-shadow: 0 0 0 1px var(--lux-glass-border) inset !important;
+  transition: box-shadow 0.2s ease, border-color 0.2s ease;
+}
+
+.lux-shell .el-input__wrapper.is-focus {
+  box-shadow: var(--lux-glow-cyan) !important;
+}
+
+.lux-shell .el-input__inner {
+  color: var(--lux-text-strong) !important;
+}
+
+.lux-shell .el-input__inner::placeholder {
+  color: var(--lux-text-dim) !important;
+}
+
+.lux-shell .el-select .el-select__wrapper {
+  border-radius: var(--lux-radius-md);
+  background-color: var(--lux-glass-bg-input) !important;
+  backdrop-filter: var(--lux-blur-sm);
+  -webkit-backdrop-filter: var(--lux-blur-sm);
+}
+
+/* ── 数字输入 ── */
+.lux-shell .el-input-number .el-input__wrapper {
+  background-color: var(--lux-glass-bg-input) !important;
+}
+
+/* ── 日期选择器 ── */
+.lux-shell .el-date-editor .el-input__wrapper {
+  background-color: var(--lux-glass-bg-input) !important;
+}
+
+/* ══════════════════════════════════════════
+ *  标签 (Tag)
+ * ══════════════════════════════════════════ */
+.lux-shell .el-tag {
+  border-radius: var(--lux-radius-sm);
+}
+
+/* ══════════════════════════════════════════
+ *  L3 — OVERLAY: 对话框 / 下拉 / 消息 (玻璃拟态)
+ * ══════════════════════════════════════════ */
+
+/* ── 对话框 (对齐登录框质感) ── */
+.el-overlay .el-dialog {
+  border-radius: var(--lux-radius-xl);
+  overflow: hidden;
+  background: rgba(30, 41, 59, 0.72) !important;
+  backdrop-filter: blur(24px) saturate(1.5);
+  -webkit-backdrop-filter: blur(24px) saturate(1.5);
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  box-shadow:
+    var(--lux-shadow-4),
+    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
+    0 1px 0 rgba(255, 255, 255, 0.1) inset;
+  position: relative;
+}
+
+/* 光照渐变叠层 (登录框 ::before) */
+.el-overlay .el-dialog::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14) 0%, transparent 45%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+/* 顶部青色辉光 (登录框 ::after) */
+.el-overlay .el-dialog::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 16%;
+  right: 16%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(56, 189, 248, 0.4), transparent);
+  pointer-events: none;
+  z-index: 2;
+}
+
+.el-overlay .el-dialog > * {
+  position: relative;
+  z-index: 1;
+}
+
+.el-overlay .el-dialog__header {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 18px 24px 14px;
+}
+
+.el-overlay .el-dialog__title {
+  color: var(--lux-text-strong);
+  font-weight: 700;
+  font-size: 16px;
+  letter-spacing: -0.01em;
+}
+
+.el-overlay .el-dialog__body {
+  color: var(--lux-text-body);
+  padding: 20px 24px;
+}
+
+.el-overlay .el-dialog__footer {
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  padding: 14px 24px 18px;
+}
+
+.el-overlay .el-dialog__headerbtn {
+  top: 18px;
+  right: 18px;
+  font-size: 16px;
+  color: var(--lux-text-dim);
+  transition: color 0.2s ease;
+}
+
+.el-overlay .el-dialog__headerbtn:hover {
+  color: var(--lux-text-strong);
+}
+
+/* ── 下拉菜单 ── */
+.lux-shell .el-dropdown-menu,
+.lux-user-dropdown.el-popper {
+  background: var(--lux-glass-bg-dropdown) !important;
+  backdrop-filter: var(--lux-blur-lg);
+  -webkit-backdrop-filter: var(--lux-blur-lg);
+  border-color: var(--lux-glass-border) !important;
+  border-radius: var(--lux-radius-md);
+  box-shadow: var(--lux-shadow-3);
+}
+
+.lux-user-dropdown .el-dropdown-menu__item {
+  color: var(--lux-text-body);
+}
+
+.lux-user-dropdown .el-dropdown-menu__item:not(.is-disabled):hover {
+  background: rgba(56, 189, 248, 0.12);
+  color: #e0f2fe;
+}
+
+.lux-user-dropdown .lux-user-dropdown-name {
+  color: var(--lux-text-muted) !important;
+  font-size: 12px;
+  cursor: default;
+}
+
+/* ── 消息框 ── */
+.el-message-box {
+  background: var(--lux-glass-bg-dialog) !important;
+  backdrop-filter: var(--lux-blur-xl);
+  -webkit-backdrop-filter: var(--lux-blur-xl);
+  border-color: var(--lux-glass-border) !important;
+  border-radius: var(--lux-radius-xl);
+  box-shadow: var(--lux-shadow-4);
+}
+
+.el-message-box .el-message-box__title {
+  color: var(--lux-text-strong);
+}
+
+.el-message-box .el-message-box__content {
+  color: var(--lux-text-body);
+}
+
+/* ── 消息提示 ── */
+.el-message {
+  backdrop-filter: var(--lux-blur-md);
+  -webkit-backdrop-filter: var(--lux-blur-md);
+}
+
+/* ── Select 下拉面板 (Teleport) ── */
+.el-popper .el-select-dropdown__item {
+  color: var(--lux-text-body);
+}
+
+.el-popper .el-select-dropdown__item.is-hovering {
+  background: rgba(56, 189, 248, 0.10);
+}
+
+.el-popper .el-select-dropdown__item.is-selected {
+  color: var(--lux-cyan);
+}
+
+.el-select-dropdown {
+  background: var(--lux-glass-bg-dropdown) !important;
+  backdrop-filter: var(--lux-blur-lg);
+  -webkit-backdrop-filter: var(--lux-blur-lg);
+  border: 1px solid var(--lux-glass-border) !important;
+  border-radius: var(--lux-radius-md);
+  box-shadow: var(--lux-shadow-3) !important;
+}
+
+.el-select-dropdown .el-scrollbar__bar {
+  background: rgba(255, 255, 255, 0.08);
+}
+
+/* ── 表单标签 ── */
+.lux-shell .el-form-item__label {
+  color: var(--lux-text-muted) !important;
+}
+
+/* ── 开关 ── */
+.lux-shell .el-switch {
+  --el-switch-off-color: rgba(100, 116, 139, 0.5);
+}
+
+/* ── Upload ── */
+.lux-shell .el-upload-dragger {
+  background: var(--lux-glass-bg-input) !important;
+  border-color: var(--lux-glass-border) !important;
+  border-radius: var(--lux-radius-md);
+}
+
+/* ── 空状态 ── */
+.lux-shell .el-empty__description p {
+  color: var(--lux-text-muted);
+}
+
+/* ── 面包屑 ── */
+.lux-shell .el-breadcrumb__inner {
+  color: var(--lux-text-body) !important;
+}
+
+.lux-shell .el-breadcrumb__inner.is-link:hover {
+  color: var(--lux-cyan-light) !important;
+}
+
+.lux-shell .el-breadcrumb__separator {
+  color: var(--lux-text-dim) !important;
+}
+
+/* ── Tabs (el-tabs type=card) ── */
+.lux-shell .el-tabs--card > .el-tabs__header .el-tabs__item {
+  background: var(--lux-glass-bg-tab) !important;
+  border: 1px solid var(--lux-glass-border) !important;
+  border-radius: var(--lux-radius-md) var(--lux-radius-md) 0 0;
+  color: var(--lux-text-muted);
+  transition: background 0.2s ease, color 0.2s ease;
+}
+
+.lux-shell .el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
+  background: var(--lux-glass-bg-tab-active) !important;
+  color: var(--lux-text-strong);
+  border-bottom-color: transparent !important;
+  box-shadow: inset 0 2px 0 var(--lux-cyan);
+}
+
+.lux-shell .el-tabs--card > .el-tabs__header .el-tabs__item:hover {
+  color: var(--lux-text-strong);
+}
+
+.lux-shell .el-tabs--card > .el-tabs__header {
+  border-bottom: 1px solid var(--lux-glass-border) !important;
+}
+
+.lux-shell .el-tabs--card > .el-tabs__header .el-tabs__nav {
+  border: none !important;
+}
+
+/* ── Scrollbar ── */
+.lux-shell .el-scrollbar__bar.is-horizontal,
+.lux-shell .el-scrollbar__bar.is-vertical {
+  background: transparent;
+}
+
+.lux-shell .el-scrollbar__thumb {
+  background: rgba(255, 255, 255, 0.12);
+  border-radius: 4px;
+}
+
+.lux-shell .el-scrollbar__thumb:hover {
+  background: rgba(255, 255, 255, 0.20);
+}
+html,
+body {
+  min-height: 100%;
+  background: #0a0e14;
+}
+
 /**
 * 全站主题：深色宇宙底、深色卡片、青紫渐变主按钮
 */
@@ -15,6 +796,7 @@ body {
  --lux-text-strong: #e2e8f0;
  --lux-text-muted: #94a3b8;
  --lux-cyan: #38bdf8;
+  --lux-coral: #fb7185;
  --lux-indigo: #6366f1;
  --lux-violet: #7c3aed;
  --lux-card-bg: #1e293b;
@@ -69,10 +851,10 @@ body {
 .lux-orb-3 {
  width: min(42vw, 320px);
  height: min(42vw, 320px);
-  background: #38bdf8;
+  background: #fb7185;
  bottom: -8%;
  left: 20%;
-  opacity: 0.22;
+  opacity: 0.18;
 }

 .lux-shell-body {
@@ -184,10 +966,12 @@ body {
  color: #e0f2fe !important;
  background: linear-gradient(
    90deg,
-    rgba(56, 189, 248, 0.22),
-    rgba(99, 102, 241, 0.14)
+    rgba(56, 189, 248, 0.18),
+    rgba(251, 113, 133, 0.12)
  ) !important;
-  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.25) inset;
+  box-shadow:
+    0 0 0 1px rgba(56, 189, 248, 0.2) inset,
+    inset 3px 0 0 rgba(251, 113, 133, 0.6);
 }

 .lux-shell .lux-menu .el-icon {
@@ -315,7 +1099,7 @@ body {
 .lux-shell .el-table {
  --el-table-border-color: rgba(148, 163, 184, 0.1);
  --el-table-header-bg-color: #0f172a;
-  --el-table-row-hover-bg-color: rgba(56, 189, 248, 0.08);
+  --el-table-row-hover-bg-color: rgba(251, 113, 133, 0.06);
  --el-table-bg-color: #1e293b;
  --el-table-tr-bg-color: #1e293b;
  --el-table-header-text-color: #cbd5e1;
@@ -412,14 +1196,18 @@ body {
  border-radius: 8px;
 }

-/* 对话框（Teleport 到 body，不用 .lux-shell 前缀，深色风格） */
+/* 对话框（Teleport 到 body，继承新版玻璃拟态风格） */
 .el-overlay .el-dialog {
  border-radius: 18px;
  overflow: hidden;
-  background: #1e293b !important;
+  background: rgba(30, 41, 59, 0.72) !important;
+  backdrop-filter: blur(24px) saturate(1.5);
+  -webkit-backdrop-filter: blur(24px) saturate(1.5);
+  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 25px 50px -12px rgba(0, 0, 0, 0.5),
-    0 0 0 1px rgba(148, 163, 184, 0.1) inset;
+    0 0 0 1px rgba(255, 255, 255, 0.06) inset,
+    0 1px 0 rgba(255, 255, 255, 0.1) inset;
 }

 .el-overlay .el-dialog__header {
@@ -366,7 +366,7 @@ onMounted(() => {
 .title {
  font-size: 18px;
  font-weight: 600;
-  color: #333;
+  color: #e2e8f0;
 }
 .pagination {
  margin-top: 20px;
@@ -299,7 +299,7 @@ onMounted(() => {
 .title {
  font-size: 18px;
  font-weight: 600;
-  color: #333;
+  color: #e2e8f0;
 }

 .pagination {
@@ -22,7 +22,7 @@
        @click="go(item.path)"
      >
        <div class="home-link-inner">
-          <el-icon class="home-link-icon"><component :is="item.icon" /></el-icon>
+          <el-icon class="home-link-icon" :class="item.colorClass"><component :is="item.icon" /></el-icon>
          <div>
            <div class="home-link-title">{{ item.title }}</div>
            <div class="home-link-desc">{{ item.desc }}</div>
@@ -111,10 +111,10 @@ const todayModels = ref([])
 const todayOtas = ref([])

 const quickLinks = [
-  { path: '/brand', title: '耳机品牌管理', desc: '维护耳机品牌信息', icon: Collection },
-  { path: '/model', title: '耳机型号管理', desc: '维护耳机型号与配置', icon: List },
-  { path: '/ota', title: 'OTA 管理', desc: '固件升级包管理', icon: Document },
-  { path: '/share-code/log', title: '分享日志', desc: '查看分享码使用记录', icon: Share }
+  { path: '/brand', title: '耳机品牌管理', desc: '维护耳机品牌信息', icon: Collection, colorClass: 'icon-cyan' },
+  { path: '/model', title: '耳机型号管理', desc: '维护耳机型号与配置', icon: List, colorClass: 'icon-coral' },
+  { path: '/ota', title: 'OTA 管理', desc: '固件升级包管理', icon: Document, colorClass: 'icon-cyan' },
+  { path: '/share-code/log', title: '分享日志', desc: '查看分享码使用记录', icon: Share, colorClass: 'icon-coral' }
 ]

 function formatTime(isoStr) {
@@ -173,9 +173,9 @@ onMounted(() => {
  display: flex;
  align-items: center;
  justify-content: center;
-  color: #38bdf8;
+  color: #fb7185;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.9), rgba(30, 41, 59, 0.9));
-  box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.2) inset;
+  box-shadow: 0 0 0 1px rgba(251, 113, 133, 0.2) inset;
 }

 .home-title {
@@ -307,10 +307,17 @@ onMounted(() => {

 .home-link-icon {
  font-size: 22px;
-  color: #7dd3fc;
  margin-top: 2px;
 }

+.home-link-icon.icon-cyan {
+  color: #7dd3fc;
+}
+
+.home-link-icon.icon-coral {
+  color: #fda4af;
+}
+
 .home-link-title {
  font-size: 15px;
  font-weight: 600;
@@ -389,11 +389,7 @@ const handleSubmit = async () => {
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff !important;
-  background: linear-gradient(
-    135deg,
-    rgba(56, 189, 248, 0.92) 0%,
-    rgba(34, 211, 238, 0.88) 100%
-  ) !important;
+  background: rgba(56, 189, 248, 0.92) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
@@ -406,11 +402,7 @@ const handleSubmit = async () => {
 }

 .login-btn:hover {
-  background: linear-gradient(
-    135deg,
-    rgba(34, 211, 238, 0.95) 0%,
-    rgba(56, 189, 248, 0.92) 100%
-  ) !important;
+  background: rgba(34, 211, 238, 0.95) !important;
  box-shadow:
    0 6px 24px rgba(56, 189, 248, 0.42),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
@@ -371,7 +371,7 @@ onMounted(() => {
 .title {
  font-size: 18px;
  font-weight: 600;
-  color: #333;
+  color: #e2e8f0;
 }
 .pagination {
  margin-top: 20px;
@@ -965,7 +965,7 @@ onMounted(() => {
 .title {
  font-size: 18px;
  font-weight: 600;
-  color: #333;
+  color: #e2e8f0;
 }
 .pagination {
  margin-top: 20px;