From daf385c8e0618965fd2f2e2b536fbc472cb6865b Mon Sep 17 00:00:00 2001
From: wikiboss <zacow@163.com>
Date: Mon, 21 Sep 2026 15:06:10 +0800
Subject: [PATCH] =?UTF-8?q?style(crm):=20=E9=A1=B6=E7=BA=A7UI/UX=E7=BE=8E?=
 =?UTF-8?q?=E5=AD=A6=E5=8D=87=E7=BB=B4=E7=8B=AC=E7=AB=8B=E7=BB=9F=E8=AE=A1?=
 =?UTF-8?q?=E4=B8=AD=E5=BF=83(stats.uvue)=EF=BC=8C=E6=B3=A8=E5=85=A5?=
 =?UTF-8?q?=E5=A4=A9=E5=B9=95=E5=BE=AE=E6=9E=81=E5=85=89=E3=80=81=E9=A9=BE?=
 =?UTF-8?q?=E9=A9=B6=E8=88=B1=E6=8E=A7=E5=88=B6=E5=8F=B0=E4=B8=8E=E6=B5=81?=
 =?UTF-8?q?=E4=BD=93=E6=BC=8F=E6=96=97?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 mpuniapp/pages/owner/card/edit.uvue |  42 +-
 mpuniapp/pages/owner/stats.uvue     | 645 ++++++++++++++++++++++------
 mpuniapp/pages/owner/useStats.uts   |  28 ++
 3 files changed, 563 insertions(+), 152 deletions(-)

diff --git a/mpuniapp/pages/owner/card/edit.uvue b/mpuniapp/pages/owner/card/edit.uvue
index b0d5b6a..201c5eb 100644
--- a/mpuniapp/pages/owner/card/edit.uvue
+++ b/mpuniapp/pages/owner/card/edit.uvue
@@ -34,24 +34,24 @@
             </view>
           </view>
 
-          <!-- Bento Quick Links: Cases & Articles -->
-          <view class="bento-entry-grid">
-            <view class="bento-entry-card" @click="handleGoCases">
-              <view class="bento-entry-top">
-                <text class="bento-entry-badge">PORTFOLIO</text>
-                <text class="bento-entry-arrow">↗</text>
+          <!-- Quick Links: Cases & Articles -->
+          <view class="quick-entry-grid">
+            <view class="quick-entry-card" @click="handleGoCases">
+              <view class="quick-entry-top">
+                <text class="quick-entry-badge">PORTFOLIO</text>
+                <text class="quick-entry-arrow">↗</text>
               </view>
-              <text class="bento-entry-title">{{ casesEntryTitle }}</text>
-              <text class="bento-entry-sub">{{ casesEntrySub }}</text>
+              <text class="quick-entry-title">{{ casesEntryTitle }}</text>
+              <text class="quick-entry-sub">{{ casesEntrySub }}</text>
             </view>
 
-            <view class="bento-entry-card" @click="handleGoArticles">
-              <view class="bento-entry-top">
-                <text class="bento-entry-badge">INSIGHTS</text>
-                <text class="bento-entry-arrow">↗</text>
+            <view class="quick-entry-card" @click="handleGoArticles">
+              <view class="quick-entry-top">
+                <text class="quick-entry-badge">INSIGHTS</text>
+                <text class="quick-entry-arrow">↗</text>
               </view>
-              <text class="bento-entry-title">{{ articlesEntryTitle }}</text>
-              <text class="bento-entry-sub">{{ articlesEntrySub }}</text>
+              <text class="quick-entry-title">{{ articlesEntryTitle }}</text>
+              <text class="quick-entry-sub">{{ articlesEntrySub }}</text>
             </view>
           </view>
 
@@ -1164,14 +1164,14 @@ onLoad((options: CardEditPageOptions) => {
   color: var(--oc-text-2, #667085);
 }
 
-.bento-entry-grid {
+.quick-entry-grid {
   display: flex;
   flex-direction: row;
   gap: 12px;
   margin-bottom: 16px;
 }
 
-.bento-entry-card {
+.quick-entry-card {
   flex: 1;
   background-color: var(--oc-surface, #FFFFFF);
   border-radius: var(--oc-radius-card, 20px);
@@ -1182,7 +1182,7 @@ onLoad((options: CardEditPageOptions) => {
   flex-direction: column;
 }
 
-.bento-entry-top {
+.quick-entry-top {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
@@ -1190,7 +1190,7 @@ onLoad((options: CardEditPageOptions) => {
   margin-bottom: 6px;
 }
 
-.bento-entry-badge {
+.quick-entry-badge {
   font-size: 10px;
   font-weight: 700;
   color: var(--oc-primary, #0088FF);
@@ -1199,19 +1199,19 @@ onLoad((options: CardEditPageOptions) => {
   border-radius: 4px;
 }
 
-.bento-entry-arrow {
+.quick-entry-arrow {
   font-size: 14px;
   color: var(--oc-text-2, #64748B);
 }
 
-.bento-entry-title {
+.quick-entry-title {
   font-size: 14px;
   font-weight: 700;
   color: var(--oc-text, #101828);
   margin-bottom: 2px;
 }
 
-.bento-entry-sub {
+.quick-entry-sub {
   font-size: 11px;
   color: var(--oc-text-2, #64748B);
 }
diff --git a/mpuniapp/pages/owner/stats.uvue b/mpuniapp/pages/owner/stats.uvue
index 01ca465..688f33f 100644
--- a/mpuniapp/pages/owner/stats.uvue
+++ b/mpuniapp/pages/owner/stats.uvue
@@ -1,19 +1,29 @@
 <template>
   <view class="stats-page" :class="pageRtlClass" :style="pageTheme">
-    <!-- Slim Cockpit Header -->
+    <!-- Ambient Aurora Top Glow (Subtle Luxury Mesh Gradient < 8%) -->
+    <view class="stats-aurora-glow"></view>
+
+    <!-- Header Cockpit: Bento Control Panel -->
     <view class="stats-header">
-      <view class="stats-header-top">
-        <view class="stats-title-group">
-          <text class="stats-title">{{ pageTitle }}</text>
-          <text class="stats-subtitle">{{ pageSubtitle }}</text>
+      <!-- Live Status & Sync Indicator -->
+      <view class="cockpit-top-bar">
+        <view class="live-pill">
+          <view class="live-pulse-dot"></view>
+          <text class="live-pill-text">{{ t('liveBadge') }}</text>
         </view>
-        <view class="stats-refresh-btn" @click="handleRefresh">
-          <text class="stats-refresh-text">{{ refreshText }}</text>
+        <view class="header-refresh-btn" @click="handleRefresh">
+          <text class="header-refresh-text">{{ refreshText }}</text>
         </view>
       </view>
 
-      <!-- Period Filter Chips -->
-      <view class="period-row">
+      <!-- Title & Subtitle Typography -->
+      <view class="stats-title-block">
+        <text class="stats-title">{{ pageTitle }}</text>
+        <text class="stats-subtitle">{{ pageSubtitle }}</text>
+      </view>
+
+      <!-- Period Filter Segmented Pill Control -->
+      <view class="period-segmented-track">
         <view
           class="period-chip"
           :class="{ 'period-chip-active': state.period === 'today' }"
@@ -63,54 +73,98 @@
 
     <!-- Stats Scrollable Body -->
     <scroll-view v-else class="stats-body" :scroll-y="true">
-      <!-- 2x2 Executive Bento Grid -->
+      <!-- 2x2 Executive Bento Grid (Polished Precision KPI Cards) -->
       <view class="kpi-grid">
         <!-- KPI 1: Total Leads -->
-        <view class="metric-card">
-          <text class="metric-label">{{ t('metricTotal') }}</text>
+        <view class="metric-card metric-card-total">
+          <view class="metric-header-row">
+            <text class="metric-label">{{ t('metricTotal') }}</text>
+            <view class="metric-badge metric-badge-brand">
+              <text class="metric-badge-text">TOTAL</text>
+            </view>
+          </view>
           <text class="metric-value text-brand">{{ state.summary.totalLeads }}</text>
-          <text class="metric-sub">{{ t('stepNew') }}</text>
+          <view class="metric-footer-row">
+            <view class="metric-indicator-dot bg-brand"></view>
+            <text class="metric-sub">{{ t('stepDescNew') }}</text>
+          </view>
         </view>
 
-        <!-- KPI 2: Hot Opportunities -->
+        <!-- KPI 2: Hot Opportunities (Pulse Highlight) -->
         <view class="metric-card metric-card-hot">
-          <view class="metric-hot-header">
+          <view class="metric-header-row">
             <text class="metric-label text-hot">{{ t('metricHot') }}</text>
-            <view class="metric-hot-dot"></view>
+            <view class="metric-badge metric-badge-hot">
+              <view class="hot-spark-dot"></view>
+              <text class="metric-badge-text text-hot">HOT</text>
+            </view>
           </view>
           <text class="metric-value text-hot">{{ state.summary.hotLeads }}</text>
-          <text class="metric-sub">{{ t('stepHot') }}</text>
+          <view class="metric-footer-row">
+            <view class="metric-indicator-dot bg-hot"></view>
+            <text class="metric-sub text-hot">{{ t('stepDescHot') }}</text>
+          </view>
         </view>
 
         <!-- KPI 3: Won Deals -->
-        <view class="metric-card">
-          <text class="metric-label">{{ t('metricWon') }}</text>
+        <view class="metric-card metric-card-won">
+          <view class="metric-header-row">
+            <text class="metric-label">{{ t('metricWon') }}</text>
+            <view class="metric-badge metric-badge-won">
+              <text class="metric-badge-text text-won">WON</text>
+            </view>
+          </view>
           <text class="metric-value text-won">{{ state.summary.wonLeads }}</text>
-          <text class="metric-sub">{{ t('stepWon') }}</text>
+          <view class="metric-footer-row">
+            <view class="metric-indicator-dot bg-won"></view>
+            <text class="metric-sub text-won">{{ t('stepDescWon') }}</text>
+          </view>
         </view>
 
         <!-- KPI 4: Overall Conversion Rate -->
         <view class="metric-card metric-card-rate">
-          <text class="metric-label">{{ t('metricRate') }}</text>
-          <text class="metric-value text-primary">{{ state.summary.overallRate }}%</text>
-          <text class="metric-sub">{{ t('stepContacted') }}</text>
+          <view class="metric-header-row">
+            <text class="metric-label">{{ t('metricRate') }}</text>
+            <view class="metric-badge metric-badge-rate">
+              <text class="metric-badge-text text-brand">CVR</text>
+            </view>
+          </view>
+          <text class="metric-value text-brand">{{ state.summary.overallRate }}%</text>
+          <view class="metric-footer-row">
+            <view class="metric-indicator-dot bg-brand"></view>
+            <text class="metric-sub">{{ t('stepDescContacted') }}</text>
+          </view>
         </view>
       </view>
 
-      <!-- Conversion Funnel Section -->
+      <!-- Conversion Funnel Section (Fluid Gradient Progress) -->
       <view class="stats-card stats-funnel">
-        <view class="card-header">
-          <text class="card-title">{{ t('funnelTitle') }}</text>
+        <view class="card-header-bar">
+          <view class="card-title-group">
+            <text class="card-title">{{ t('funnelTitle') }}</text>
+            <text class="card-title-badge">4 STAGES</text>
+          </view>
         </view>
+
         <view class="funnel-list">
-          <view v-for="step in state.funnel" :key="step.key" class="funnel-step-item">
+          <view
+            v-for="(step, index) in state.funnel"
+            :key="step.key"
+            class="funnel-step-item"
+          >
             <view class="funnel-step-header">
-              <text class="funnel-step-label">{{ step.label }}</text>
+              <view class="funnel-step-identity">
+                <text class="funnel-step-seq">0{{ index + 1 }}</text>
+                <text class="funnel-step-label">{{ step.label }}</text>
+              </view>
               <view class="funnel-step-values">
                 <text class="funnel-step-count">{{ step.count }}</text>
-                <text class="funnel-step-rate">{{ step.rate }}%</text>
+                <view class="funnel-step-rate-pill">
+                  <text class="funnel-step-rate-text">{{ step.rate }}%</text>
+                </view>
               </view>
             </view>
+
             <view class="funnel-track">
               <view
                 class="funnel-fill"
@@ -122,17 +176,29 @@
         </view>
       </view>
 
-      <!-- Acquisition Channels Matrix -->
+      <!-- Acquisition Channels Matrix (Multi-Channel Bento Grid) -->
       <view class="stats-card stats-channels">
-        <view class="card-header">
-          <text class="card-title">{{ t('channelTitle') }}</text>
+        <view class="card-header-bar">
+          <view class="card-title-group">
+            <text class="card-title">{{ t('channelTitle') }}</text>
+          </view>
         </view>
+
         <view class="channel-grid">
-          <view v-for="ch in state.channels" :key="ch.source" class="channel-card">
-            <view class="channel-header">
-              <text class="channel-name">{{ ch.label }}</text>
-              <text class="channel-rate">{{ ch.conversionRate }}%</text>
+          <view
+            v-for="ch in state.channels"
+            :key="ch.source"
+            class="channel-card"
+            :class="'channel-card-' + ch.source"
+          >
+            <view class="channel-card-top">
+              <view class="channel-tag-wrap">
+                <view class="channel-accent-dot" :class="'accent-dot-' + ch.source"></view>
+                <text class="channel-name">{{ ch.label }}</text>
+              </view>
+              <text class="channel-cvr-pill">{{ ch.conversionRate }}% CVR</text>
             </view>
+
             <view class="channel-data-row">
               <view class="channel-data-col">
                 <text class="channel-num">{{ ch.leadsCount }}</text>
@@ -147,6 +213,37 @@
           </view>
         </view>
       </view>
+
+      <!-- Intent Distribution Health Section -->
+      <view class="stats-card stats-health">
+        <view class="card-header-bar">
+          <view class="card-title-group">
+            <text class="card-title">{{ t('healthTitle') }}</text>
+          </view>
+        </view>
+
+        <!-- 3-Tier Multi-Segment Bar -->
+        <view class="health-segmented-bar">
+          <view class="health-segment-hot" :style="{ flex: healthHotFlex }"></view>
+          <view class="health-segment-warm" :style="{ flex: healthWarmFlex }"></view>
+          <view class="health-segment-cool" :style="{ flex: healthCoolFlex }"></view>
+        </view>
+
+        <view class="health-legend-row">
+          <view class="health-legend-item">
+            <view class="legend-dot bg-hot"></view>
+            <text class="legend-text">{{ t('tierHot') }}</text>
+          </view>
+          <view class="health-legend-item">
+            <view class="legend-dot bg-warm"></view>
+            <text class="legend-text">{{ t('tierWarm') }}</text>
+          </view>
+          <view class="health-legend-item">
+            <view class="legend-dot bg-cool"></view>
+            <text class="legend-text">{{ t('tierCool') }}</text>
+          </view>
+        </view>
+      </view>
     </scroll-view>
   </view>
 </template>
@@ -198,6 +295,19 @@ const pageRtlClass = computed((): string => {
   return isRtl(getCurrentLocale()) ? 'stats-rtl' : '';
 });
 
+const healthHotFlex = computed((): number => {
+  return state.summary.hotLeads > 0 ? state.summary.hotLeads : 1;
+});
+
+const healthWarmFlex = computed((): number => {
+  const warm = state.summary.totalLeads - state.summary.hotLeads - state.summary.wonLeads;
+  return warm > 0 ? warm : 1;
+});
+
+const healthCoolFlex = computed((): number => {
+  return 1;
+});
+
 function t(key: string): string {
   return resolveStatsText(key);
 }
@@ -221,89 +331,133 @@ onShow(() => {
 </script>
 
 <style scoped>
-/* Page Container */
+/* Page Root */
 .stats-page {
   display: flex;
   flex-direction: column;
   height: 100%;
   background-color: var(--oc-bg, #F5F8FC);
+  position: relative;
+  overflow: hidden;
 }
 
 .stats-rtl {
   direction: rtl;
 }
 
-/* Header & Filter Area */
-.stats-header {
-  padding-inline: var(--oc-space-16, 16px);
-  padding-block-start: var(--oc-space-16, 16px);
-  padding-block-end: var(--oc-space-12, 12px);
-  background-color: var(--oc-surface, #FFFFFF);
-  border-bottom: 1px solid var(--oc-border, #E3E7ED);
-  flex-shrink: 0;
+/* Ambient Top Aurora Glow (<8% area) */
+.stats-aurora-glow {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 140px;
+  background: radial-gradient(circle at 50% -20%, rgba(0, 163, 255, 0.12) 0%, rgba(99, 102, 241, 0.05) 55%, rgba(245, 248, 252, 0) 100%);
+  pointer-events: none;
+  z-index: 0;
 }
 
-.stats-header-top {
+/* Header Cockpit */
+.stats-header {
+  position: relative;
+  z-index: 1;
+  padding-inline: var(--oc-space-16, 16px);
+  padding-block-start: var(--oc-space-12, 12px);
+  padding-block-end: var(--oc-space-12, 12px);
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.9) 100%);
+  border-bottom: 1px solid var(--oc-border, #E3E7ED);
+  flex-shrink: 0;
+  backdrop-filter: blur(10px);
+}
+
+.cockpit-top-bar {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-  margin-block-end: var(--oc-space-12, 12px);
+  margin-block-end: var(--oc-space-8, 8px);
 }
 
-.stats-title-group {
+.live-pill {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
+  align-items: center;
+  padding-inline: 8px;
+  padding-block: 3px;
+  background-color: #ECFDF3;
+  border: 1px solid #A6F4C5;
+  border-radius: 9999px;
 }
 
-.stats-title {
-  font-size: 20px;
+.live-pulse-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  background-color: #12B76A;
+  margin-inline-end: 6px;
+}
+
+.live-pill-text {
+  font-size: 10px;
   font-weight: 700;
-  color: var(--oc-text, #101828);
-  line-height: 1.25;
+  color: #027A48;
+  letter-spacing: 0.5px;
 }
 
-.stats-subtitle {
-  font-size: 12px;
-  color: var(--oc-text-2, #667085);
-  margin-block-start: 2px;
-}
-
-.stats-refresh-btn {
-  min-height: 32px;
-  padding-inline: 12px;
+.header-refresh-btn {
+  min-height: 28px;
+  padding-inline: 10px;
   background-color: var(--oc-surface, #F7F8FA);
   border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-btn, 14px);
+  border-radius: 9999px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.stats-refresh-btn:active {
+.header-refresh-btn:active {
   opacity: 0.85;
 }
 
-.stats-refresh-text {
-  font-size: 12px;
+.header-refresh-text {
+  font-size: 11px;
   color: var(--oc-text-2, #667085);
-  font-weight: 500;
+  font-weight: 600;
 }
 
-/* Period Filter Chips */
-.period-row {
+.stats-title-block {
+  margin-block-end: var(--oc-space-12, 12px);
+}
+
+.stats-title {
+  font-size: 22px;
+  font-weight: 800;
+  color: var(--oc-text, #101828);
+  line-height: 1.2;
+}
+
+.stats-subtitle {
+  font-size: 12px;
+  color: var(--oc-text-2, #667085);
+  margin-block-start: 3px;
+}
+
+/* Period Segmented Track */
+.period-segmented-track {
   display: flex;
   flex-direction: row;
-  gap: 8px;
+  background-color: #EEF2F6;
+  border-radius: 9999px;
+  padding: 3px;
+  gap: 4px;
 }
 
 .period-chip {
   flex: 1;
-  height: 32px;
-  border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: var(--oc-radius-btn, 14px);
-  background-color: var(--oc-surface, #F7F8FA);
+  height: 30px;
+  border-radius: 9999px;
+  background-color: transparent;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -315,8 +469,8 @@ onShow(() => {
 }
 
 .period-chip-active {
-  background-color: var(--oc-primary-soft, #EBF5FF);
-  border-color: var(--oc-primary, #0B5CFF);
+  background-color: #FFFFFF;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
 }
 
 .period-chip-text {
@@ -327,7 +481,7 @@ onShow(() => {
 
 .period-chip-active .period-chip-text {
   color: var(--oc-primary, #0B5CFF);
-  font-weight: 600;
+  font-weight: 700;
 }
 
 /* Skeleton Loading */
@@ -345,7 +499,7 @@ onShow(() => {
 
 .skeleton-card {
   flex: 1;
-  height: 80px;
+  height: 84px;
   background-color: var(--oc-border, #E3E7ED);
   border-radius: var(--oc-radius-card, 20px);
 }
@@ -377,7 +531,7 @@ onShow(() => {
 }
 
 .feedback-title {
-  font-size: 16px;
+  font-size: 15px;
   font-weight: 600;
   color: var(--oc-text, #101828);
   margin-block-end: 6px;
@@ -389,13 +543,16 @@ onShow(() => {
   text-align: center;
 }
 
-/* Stats Body */
+/* Body Container */
 .stats-body {
+  position: relative;
+  z-index: 1;
   flex: 1;
-  padding: 16px;
+  padding-inline: var(--oc-space-16, 16px);
+  padding-block: var(--oc-space-12, 12px);
 }
 
-/* 2x2 Bento Grid KPI Cards */
+/* 2x2 Bento KPI Grid */
 .kpi-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
@@ -411,43 +568,92 @@ onShow(() => {
   padding: 12px 14px;
   display: flex;
   flex-direction: column;
+  justify-content: space-between;
+  min-height: 92px;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.metric-card:active {
+  opacity: 0.92;
+}
+
+.metric-card-total {
+  background: linear-gradient(150deg, #FFFFFF 0%, #F5F9FF 100%);
 }
 
 .metric-card-hot {
-  background: linear-gradient(145deg, #FFFFFF 0%, #FFF8F6 100%);
+  background: linear-gradient(150deg, #FFFFFF 0%, #FFF8F6 100%);
+  border-color: #FECDCA;
 }
 
-.metric-hot-header {
+.metric-card-won {
+  background: linear-gradient(150deg, #FFFFFF 0%, #F6FEF9 100%);
+  border-color: #D1FADF;
+}
+
+.metric-card-rate {
+  background: linear-gradient(150deg, #FFFFFF 0%, #F8FAFC 100%);
+}
+
+.metric-header-row {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
-}
-
-.metric-hot-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 3px;
-  background-color: var(--oc-error, #F04438);
-}
-
-.metric-card-rate {
-  background: linear-gradient(145deg, #FFFFFF 0%, #F5F9FF 100%);
-}
-
-.metric-label {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--oc-text-2, #667085);
   margin-block-end: 4px;
 }
 
+.metric-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--oc-text-2, #667085);
+}
+
+.metric-badge {
+  padding-inline: 6px;
+  padding-block: 2px;
+  border-radius: 9999px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.metric-badge-brand {
+  background-color: var(--oc-primary-soft, #EBF5FF);
+}
+
+.metric-badge-hot {
+  background-color: #FEE4E2;
+}
+
+.metric-badge-won {
+  background-color: #ECFDF3;
+}
+
+.metric-badge-rate {
+  background-color: #F2F4F7;
+}
+
+.metric-badge-text {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.hot-spark-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 3px;
+  background-color: var(--oc-error, #F04438);
+  margin-inline-end: 4px;
+}
+
 .metric-value {
-  font-size: 24px;
+  font-size: 26px;
   font-weight: 800;
   color: var(--oc-text, #101828);
   line-height: 1.15;
-  margin-block-end: 2px;
+  margin-block-end: 4px;
 }
 
 .text-brand {
@@ -462,16 +668,46 @@ onShow(() => {
   color: var(--oc-success, #12B76A);
 }
 
-.text-primary {
-  color: var(--oc-primary, #0B5CFF);
+.metric-footer-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.metric-indicator-dot {
+  width: 5px;
+  height: 5px;
+  border-radius: 3px;
+  margin-inline-end: 5px;
+}
+
+.bg-brand {
+  background-color: var(--oc-primary, #0B5CFF);
+}
+
+.bg-hot {
+  background-color: var(--oc-error, #F04438);
+}
+
+.bg-won {
+  background-color: var(--oc-success, #12B76A);
+}
+
+.bg-warm {
+  background-color: var(--oc-warning, #F79009);
+}
+
+.bg-cool {
+  background-color: #98A2B3;
 }
 
 .metric-sub {
-  font-size: 10px;
+  font-size: 11px;
   color: var(--oc-text-2, #667085);
+  font-weight: 500;
 }
 
-/* Generic Stats Card */
+/* Generic Bento Card */
 .stats-card {
   background-color: var(--oc-surface, #FFFFFF);
   border: 1px solid var(--oc-border, #E3E7ED);
@@ -481,16 +717,34 @@ onShow(() => {
   margin-block-end: 12px;
 }
 
-.card-header {
+.card-header-bar {
   margin-block-end: 12px;
 }
 
+.card-title-group {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .card-title {
-  font-size: 14px;
+  font-size: 15px;
   font-weight: 700;
   color: var(--oc-text, #101828);
 }
 
+.card-title-badge {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--oc-primary, #0B5CFF);
+  background-color: var(--oc-primary-soft, #EBF5FF);
+  padding-inline: 7px;
+  padding-block: 2px;
+  border-radius: 9999px;
+  letter-spacing: 0.5px;
+}
+
 /* Funnel Step List */
 .funnel-list {
   display: flex;
@@ -511,8 +765,25 @@ onShow(() => {
   margin-block-end: 6px;
 }
 
+.funnel-step-identity {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.funnel-step-seq {
+  font-size: 11px;
+  font-weight: 800;
+  color: var(--oc-primary, #0B5CFF);
+  background-color: var(--oc-primary-soft, #EBF5FF);
+  padding-inline: 5px;
+  padding-block: 1px;
+  border-radius: 4px;
+  margin-inline-end: 8px;
+}
+
 .funnel-step-label {
-  font-size: 12px;
+  font-size: 13px;
   font-weight: 600;
   color: var(--oc-text, #101828);
 }
@@ -525,19 +796,23 @@ onShow(() => {
 }
 
 .funnel-step-count {
-  font-size: 13px;
+  font-size: 14px;
   font-weight: 700;
   color: var(--oc-text, #101828);
 }
 
-.funnel-step-rate {
-  font-size: 11px;
-  font-weight: 600;
-  color: var(--oc-primary, #0B5CFF);
-  background-color: var(--oc-primary-soft, #EBF5FF);
+.funnel-step-rate-pill {
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  border-radius: 9999px;
   padding-inline: 6px;
   padding-block: 1px;
-  border-radius: 9999px;
+}
+
+.funnel-step-rate-text {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--oc-primary, #0B5CFF);
 }
 
 .funnel-track {
@@ -551,23 +826,23 @@ onShow(() => {
 .funnel-fill {
   height: 100%;
   border-radius: 4px;
-  transition: width 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+  transition: width 350ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
 .funnel-fill-new {
-  background-color: var(--oc-primary, #0B5CFF);
+  background: linear-gradient(90deg, #00A3FF 0%, #0B5CFF 100%);
 }
 
 .funnel-fill-hot {
-  background-color: var(--oc-error, #F04438);
+  background: linear-gradient(90deg, #FF6B4A 0%, #F04438 100%);
 }
 
 .funnel-fill-contacted {
-  background-color: var(--oc-warning, #F79009);
+  background: linear-gradient(90deg, #FDB022 0%, #F79009 100%);
 }
 
 .funnel-fill-won {
-  background-color: var(--oc-success, #12B76A);
+  background: linear-gradient(90deg, #32D583 0%, #12B76A 100%);
 }
 
 /* Channel Matrix Grid */
@@ -578,15 +853,39 @@ onShow(() => {
 }
 
 .channel-card {
-  background-color: var(--oc-surface, #F7F8FA);
   border: 1px solid var(--oc-border, #E3E7ED);
-  border-radius: 14px;
+  border-radius: 16px;
   padding: 10px 12px;
   display: flex;
   flex-direction: column;
+  transition: opacity 150ms cubic-bezier(0.2, 0.8, 0.2, 1);
 }
 
-.channel-header {
+.channel-card:active {
+  opacity: 0.9;
+}
+
+.channel-card-nfc {
+  background: linear-gradient(150deg, #FFFFFF 0%, #F5F9FF 100%);
+  border-color: #D1E4FF;
+}
+
+.channel-card-qr {
+  background: linear-gradient(150deg, #FFFFFF 0%, #F4FBFA 100%);
+  border-color: #B5EADB;
+}
+
+.channel-card-link {
+  background: linear-gradient(150deg, #FFFFFF 0%, #F8FAFC 100%);
+  border-color: #E2E8F0;
+}
+
+.channel-card-ai_chat {
+  background: linear-gradient(150deg, #FFFFFF 0%, #F9F7FE 100%);
+  border-color: #E0D7FE;
+}
+
+.channel-card-top {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -594,14 +893,43 @@ onShow(() => {
   margin-block-end: 8px;
 }
 
+.channel-tag-wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.channel-accent-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  margin-inline-end: 5px;
+}
+
+.accent-dot-nfc {
+  background-color: var(--oc-primary, #0B5CFF);
+}
+
+.accent-dot-qr {
+  background-color: #0E9384;
+}
+
+.accent-dot-link {
+  background-color: #475467;
+}
+
+.accent-dot-ai_chat {
+  background-color: #7F56D9;
+}
+
 .channel-name {
   font-size: 12px;
-  font-weight: 600;
+  font-weight: 700;
   color: var(--oc-text, #101828);
 }
 
-.channel-rate {
-  font-size: 11px;
+.channel-cvr-pill {
+  font-size: 10px;
   font-weight: 700;
   color: var(--oc-primary, #0B5CFF);
 }
@@ -611,6 +939,7 @@ onShow(() => {
   flex-direction: row;
   align-items: center;
   justify-content: space-around;
+  padding-block-start: 4px;
 }
 
 .channel-data-col {
@@ -620,9 +949,10 @@ onShow(() => {
 }
 
 .channel-num {
-  font-size: 14px;
-  font-weight: 700;
+  font-size: 15px;
+  font-weight: 800;
   color: var(--oc-text, #101828);
+  line-height: 1.2;
 }
 
 .channel-tag {
@@ -633,10 +963,63 @@ onShow(() => {
 
 .channel-data-divider {
   width: 1px;
-  height: 18px;
+  height: 20px;
   background-color: var(--oc-border, #E3E7ED);
 }
 
+/* Intent Health Section */
+.health-segmented-bar {
+  height: 10px;
+  border-radius: 5px;
+  background-color: var(--oc-surface, #F7F8FA);
+  border: 1px solid var(--oc-border, #E3E7ED);
+  display: flex;
+  flex-direction: row;
+  overflow: hidden;
+  margin-block-end: 10px;
+}
+
+.health-segment-hot {
+  background: linear-gradient(90deg, #FF6B4A, #F04438);
+  transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.health-segment-warm {
+  background: linear-gradient(90deg, #FDB022, #F79009);
+  transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.health-segment-cool {
+  background-color: #D0D5DD;
+  transition: flex 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+.health-legend-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.health-legend-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.legend-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 3px;
+  margin-inline-end: 5px;
+}
+
+.legend-text {
+  font-size: 11px;
+  color: var(--oc-text-2, #667085);
+  font-weight: 500;
+}
+
 @media (prefers-reduced-motion: reduce) {
   * {
     animation: none !important;
diff --git a/mpuniapp/pages/owner/useStats.uts b/mpuniapp/pages/owner/useStats.uts
index 0d2a618..235d59e 100644
--- a/mpuniapp/pages/owner/useStats.uts
+++ b/mpuniapp/pages/owner/useStats.uts
@@ -139,6 +139,34 @@ export function resolveStatsText(key: string): string {
     return isZhLocale() ? 'AI顾问' : 'AI Concierge';
   }
 
+  if (key === 'liveBadge') {
+    return isZhLocale() ? '实时大盘' : 'LIVE INSIGHTS';
+  }
+  if (key === 'healthTitle') {
+    return isZhLocale() ? '潜客意向度健康度' : 'Intent Distribution';
+  }
+  if (key === 'tierHot') {
+    return isZhLocale() ? '核心高意向 (80+)' : 'High Intent (80+)';
+  }
+  if (key === 'tierWarm') {
+    return isZhLocale() ? '重点跟进 (50-79)' : 'Warm Leads (50-79)';
+  }
+  if (key === 'tierCool') {
+    return isZhLocale() ? '待培育池 (<50)' : 'Cool Pool (<50)';
+  }
+  if (key === 'stepDescNew') {
+    return isZhLocale() ? '建档接入' : 'Captured';
+  }
+  if (key === 'stepDescHot') {
+    return isZhLocale() ? '高频互动' : 'Engaged';
+  }
+  if (key === 'stepDescContacted') {
+    return isZhLocale() ? '方案沟通' : 'Pitched';
+  }
+  if (key === 'stepDescWon') {
+    return isZhLocale() ? '签约成交' : 'Closed';
+  }
+
   return key;
 }