From 745ab03a84f5bf27948c997ff4a46ba24976169c Mon Sep 17 00:00:00 2001 From: "zhaowei.huang" <228127304@qq.com> Date: Sun, 31 May 2026 00:16:54 +0800 Subject: [PATCH] =?UTF-8?q?style(web):=20=E8=96=B0=E8=A1=A3=E8=8D=89?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=83=8C=E6=99=AF=E4=B8=8B=E6=B2=89=E4=B8=8E?= =?UTF-8?q?=E5=8D=A1=E7=89=87=E9=98=B4=E5=BD=B1=E3=80=81=E9=9D=A2=E6=9D=BF?= =?UTF-8?q?=E7=B4=A7=E5=87=91=E5=BA=A6=E5=BE=AE=E8=B0=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 主区背景下沉至约 92% 明度，卡片/KPI 改用更明显的紫色投影并上浮 - 修复 Dashboard 在 route-page flex 下被压扁导致快捷入口被裁切 - 车辆监控面板紧凑化 Co-authored-by: Cursor --- .../workbench/VehicleMonitorPanel.vue | 30 ++++++++++--------- .../simple-platform-vue/src/styles/theme.css | 30 +++++++++++-------- .../simple-platform-vue/src/styles/themes.ts | 10 +++---- .../src/views/admin/DashboardView.vue | 22 +++++++++----- 4 files changed, 52 insertions(+), 40 deletions(-) diff --git a/frontends/apps/simple-platform-vue/src/components/workbench/VehicleMonitorPanel.vue b/frontends/apps/simple-platform-vue/src/components/workbench/VehicleMonitorPanel.vue index 4dfcade..400721d 100644 --- a/frontends/apps/simple-platform-vue/src/components/workbench/VehicleMonitorPanel.vue +++ b/frontends/apps/simple-platform-vue/src/components/workbench/VehicleMonitorPanel.vue @@ -285,22 +285,23 @@ function detailIdForCar(car: Car): string { .vehicle-monitor { display: flex; flex-direction: column; - gap: 10px; + gap: 6px; min-height: 0; height: 100%; + overflow: hidden; } .overview-row { display: grid; grid-template-columns: repeat(5, 1fr); - gap: 6px; + gap: 4px; flex: none; } .overview-item { background: var(--mg-veil-1); border: 1px solid var(--mg-veil-border); - border-radius: 8px; - padding: 6px 4px; + border-radius: 6px; + padding: 4px 2px; text-align: center; transition: var(--mg-transition, all 0.2s ease); } @@ -309,7 +310,7 @@ function detailIdForCar(car: Car): string { border-color: rgba(var(--mg-accent-rgb, 142, 200, 252), 0.4); } .overview-num { - font-size: 18px; + font-size: 15px; font-weight: 600; color: var(--mg-text-light); line-height: 1.2; @@ -333,24 +334,25 @@ function detailIdForCar(car: Car): string { .toolbar .filter { width: 100px; flex: none; } .vehicle-list { - flex: 1; + flex: 1 1 0; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; - gap: 6px; + gap: 4px; padding-right: 2px; } .vehicle-row { background: var(--mg-veil-1); border: 1px solid var(--mg-veil-border); - border-radius: 6px; - padding: 6px 8px; + border-radius: 4px; + padding: 4px 6px; cursor: pointer; display: flex; flex-direction: column; - gap: 3px; + gap: 2px; + flex: none; transition: all 0.18s ease; } .vehicle-row:hover { @@ -369,7 +371,7 @@ function detailIdForCar(car: Car): string { gap: 6px; } .vid { - font-size: 11.5px; + font-size: 10.5px; color: var(--mg-text-muted); font-family: ui-monospace, 'SFMono-Regular', 'Menlo', monospace; flex: none; @@ -379,7 +381,7 @@ function detailIdForCar(car: Car): string { min-width: 0; color: var(--mg-text-light); font-weight: 600; - font-size: 12.5px; + font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; @@ -413,8 +415,8 @@ function detailIdForCar(car: Car): string { .vehicle-sub { display: flex; align-items: center; - gap: 10px; - font-size: 11.5px; + gap: 6px; + font-size: 10.5px; } .battery-mini { display: flex; diff --git a/frontends/apps/simple-platform-vue/src/styles/theme.css b/frontends/apps/simple-platform-vue/src/styles/theme.css index 6d0d763..8586fec 100644 --- a/frontends/apps/simple-platform-vue/src/styles/theme.css +++ b/frontends/apps/simple-platform-vue/src/styles/theme.css @@ -956,7 +956,7 @@ a:hover { color: rgba(var(--mg-accent-rgb), 0.85); } /* body：纯净紫白渐变（更柔和、长时间阅读不刺眼） */ :root[data-theme="fame-lavender"] body { background: - linear-gradient(180deg, #fafaff 0%, #f5f3fb 60%, #f0eaf6 100%) !important; + linear-gradient(160deg, #edeaf5 0%, #e7e4f1 55%, #f1eef8 100%) !important; color: #1a0f3d; } @@ -1133,11 +1133,11 @@ a:hover { color: rgba(var(--mg-accent-rgb), 0.85); } /* el-card：白底紫描边 + 双层阴影（紫色阴影更显品牌） */ :root[data-theme="fame-lavender"] .mg-content .el-card { background: #ffffff !important; - border: 1px solid #e8e1f0 !important; - border-radius: 12px !important; + border: 1px solid #e2dbf0 !important; + border-radius: 14px !important; box-shadow: - 0 1px 3px rgba(45, 27, 105, 0.04), - 0 4px 12px rgba(124, 58, 237, 0.04) !important; + 0 1px 2px rgba(45, 27, 105, 0.05), + 0 10px 26px rgba(108, 71, 200, 0.10) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; color: #1a0f3d !important; @@ -1148,9 +1148,9 @@ a:hover { color: rgba(var(--mg-accent-rgb), 0.85); } background: #ffffff !important; border-color: #c4b5fd !important; box-shadow: - 0 4px 12px rgba(45, 27, 105, 0.08), - 0 12px 28px rgba(124, 58, 237, 0.12) !important; - transform: translateY(-1px) !important; + 0 4px 14px rgba(45, 27, 105, 0.10), + 0 18px 40px rgba(108, 71, 200, 0.16) !important; + transform: translateY(-2px) !important; } :root[data-theme="fame-lavender"] .mg-content .el-card .el-card { background: #faf7fd !important; @@ -1172,9 +1172,11 @@ a:hover { color: rgba(var(--mg-accent-rgb), 0.85); } :root[data-theme="fame-lavender"] .mg-content .kpi-row .el-statistic, :root[data-theme="fame-lavender"] .mg-content .kpi-card { background: #fff !important; - border: 1px solid #ebe5f4 !important; - border-radius: 10px !important; - box-shadow: 0 2px 8px rgba(45, 27, 105, 0.05) !important; + border: 1px solid #e2dbf0 !important; + border-radius: 12px !important; + box-shadow: + 0 1px 2px rgba(45, 27, 105, 0.05), + 0 8px 22px rgba(108, 71, 200, 0.10) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 16px 18px !important; @@ -1183,8 +1185,10 @@ a:hover { color: rgba(var(--mg-accent-rgb), 0.85); } :root[data-theme="fame-lavender"] .mg-content .kpi-card:hover { background: #fff !important; border-color: #c4b5fd !important; - box-shadow: 0 6px 18px rgba(124, 58, 237, 0.10) !important; - transform: none !important; + box-shadow: + 0 4px 14px rgba(45, 27, 105, 0.09), + 0 14px 32px rgba(108, 71, 200, 0.15) !important; + transform: translateY(-2px) !important; } :root[data-theme="fame-lavender"] .mg-content .el-statistic__head { color: #4a3d6e !important; font-weight: 500; } :root[data-theme="fame-lavender"] .mg-content .el-statistic__number, diff --git a/frontends/apps/simple-platform-vue/src/styles/themes.ts b/frontends/apps/simple-platform-vue/src/styles/themes.ts index 5bec551..cf5ebfc 100644 --- a/frontends/apps/simple-platform-vue/src/styles/themes.ts +++ b/frontends/apps/simple-platform-vue/src/styles/themes.ts @@ -44,11 +44,11 @@ export const THEMES: ThemePreset[] = [ '--mg-primary-light-9': '#f5f3ff', '--mg-primary-dark-2': '#6d28d9', - // 主区背景：浅紫白色（FAME content #f0eaf6 风格） - '--mg-bg-app-1': '#f5f0fb', - '--mg-bg-app-2': '#f0eaf6', - '--mg-bg-app-3': '#faf7fd', - '--mg-bg-app-deep-rgb': '240, 234, 246', + // 主区背景：浅薰衣草灰（v3：从近白下沉到 ~92% 明度，让白卡片靠阴影清晰浮起） + '--mg-bg-app-1': '#edeaf5', + '--mg-bg-app-2': '#e7e4f1', + '--mg-bg-app-3': '#f1eef8', + '--mg-bg-app-deep-rgb': '231, 228, 241', // 侧栏：FAME 深紫渐变 #2d1b69 -> #1a1040 '--mg-bg-aside-1': '#2d1b69', diff --git a/frontends/apps/simple-platform-vue/src/views/admin/DashboardView.vue b/frontends/apps/simple-platform-vue/src/views/admin/DashboardView.vue index e62b1b3..04ff763 100644 --- a/frontends/apps/simple-platform-vue/src/views/admin/DashboardView.vue +++ b/frontends/apps/simple-platform-vue/src/views/admin/DashboardView.vue @@ -697,6 +697,12 @@ onUnmounted(() => { flex-direction: column; gap: 18px; } +/* AppShell 给路由页加了 .route-page{flex:1;min-height:0}，会把本页高度钉死在视口。 + * 若不锁定，纵向 flex 会按默认 flex-shrink:1 压扁各区块——hero-banner 又是 + * overflow:hidden，快捷入口就被裁掉。这里固定各区块自然高度，溢出交给 .main 滚动。 */ +.dashboard > * { + flex-shrink: 0; +} /* ───────────── Hero Banner（深色沉浸背景跨主题响应） ───────────── * 设计策略：Hero 区始终是深色（参考 SaaS Dashboard 标杆），但色调跟随主题切换。 @@ -977,11 +983,11 @@ onUnmounted(() => { border-radius: 12px; /* 浅紫白底 + 左侧紫色色条 + 明显紫色描边阴影（视觉跳出主区背景） */ background: linear-gradient(135deg, #ffffff 0%, #fbf9ff 100%); - border: 1px solid #d8d0e8; + border: 1px solid #ddd5ec; border-left: 3px solid #7c3aed; box-shadow: - 0 1px 3px rgba(45, 27, 105, 0.06), - 0 4px 14px rgba(124, 58, 237, 0.08); + 0 1px 2px rgba(45, 27, 105, 0.05), + 0 8px 22px rgba(108, 71, 200, 0.10); color: #1a0f3d; font-size: 13px; } @@ -1078,10 +1084,10 @@ onUnmounted(() => { position: relative; border-radius: 14px; background: #ffffff; - border: 1px solid #e8e1f0; + border: 1px solid #e2dbf0; box-shadow: - 0 1px 3px rgba(45, 27, 105, 0.04), - 0 4px 12px rgba(124, 58, 237, 0.04); + 0 1px 2px rgba(45, 27, 105, 0.05), + 0 10px 26px rgba(108, 71, 200, 0.10); color: #2d1b69; transition: transform .25s cubic-bezier(.25,.8,.25,1), box-shadow .25s, border-color .25s; overflow: hidden; @@ -1090,8 +1096,8 @@ onUnmounted(() => { transform: translateY(-2px); border-color: #c4b5fd; box-shadow: - 0 4px 12px rgba(45, 27, 105, 0.08), - 0 12px 28px rgba(124, 58, 237, 0.12); + 0 4px 14px rgba(45, 27, 105, 0.10), + 0 18px 40px rgba(108, 71, 200, 0.16); } /* el-card 默认 padding 被我们包含 */