style(web): 薰衣草主题背景下沉与卡片阴影、面板紧凑度微调

- 主区背景下沉至约 92% 明度，卡片/KPI 改用更明显的紫色投影并上浮
- 修复 Dashboard 在 route-page flex 下被压扁导致快捷入口被裁切
- 车辆监控面板紧凑化

Co-authored-by: Cursor <cursoragent@cursor.com>

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;
+  border-radius: 6px;
-  padding: 6px 4px;
+  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;
+  border-radius: 4px;
-  padding: 6px 8px;
+  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;
+  gap: 6px;
-  font-size: 11.5px;
+  font-size: 10.5px;
 }
 .battery-mini {
   display: flex;

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: 1px solid #e2dbf0 !important;
-  border-radius: 12px !important;
+  border-radius: 14px !important;
   box-shadow:
-    0 1px 3px rgba(45, 27, 105, 0.04),
+    0 1px 2px rgba(45, 27, 105, 0.05),
-    0 4px 12px rgba(124, 58, 237, 0.04) !important;
+    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 4px 14px rgba(45, 27, 105, 0.10),
-    0 12px 28px rgba(124, 58, 237, 0.12) !important;
+    0 18px 40px rgba(108, 71, 200, 0.16) !important;
-  transform: translateY(-1px) !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: 1px solid #e2dbf0 !important;
-  border-radius: 10px !important;
+  border-radius: 12px !important;
-  box-shadow: 0 2px 8px rgba(45, 27, 105, 0.05) !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;
+  box-shadow:
-  transform: none !important;
+    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,

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 风格）
+      // 主区背景：浅薰衣草灰（v3：从近白下沉到 ~92% 明度，让白卡片靠阴影清晰浮起）
-      '--mg-bg-app-1':          '#f5f0fb',
+      '--mg-bg-app-1':          '#edeaf5',
-      '--mg-bg-app-2':          '#f0eaf6',
+      '--mg-bg-app-2':          '#e7e4f1',
-      '--mg-bg-app-3':          '#faf7fd',
+      '--mg-bg-app-3':          '#f1eef8',
-      '--mg-bg-app-deep-rgb':   '240, 234, 246',
+      '--mg-bg-app-deep-rgb':   '231, 228, 241',
 
       // 侧栏：FAME 深紫渐变 #2d1b69 -> #1a1040
       '--mg-bg-aside-1':        '#2d1b69',

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 1px 2px rgba(45, 27, 105, 0.05),
-    0 4px 14px rgba(124, 58, 237, 0.08);
+    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 1px 2px rgba(45, 27, 105, 0.05),
-    0 4px 12px rgba(124, 58, 237, 0.04);
+    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 4px 14px rgba(45, 27, 105, 0.10),
-    0 12px 28px rgba(124, 58, 237, 0.12);
+    0 18px 40px rgba(108, 71, 200, 0.16);
 }
 
 /* el-card 默认 padding 被我们包含 */