界面设计

pages/mall/analytics/product-insights.uvue

@@ -68,65 +68,95 @@
       <view class="card card-full">
         <view class="card-head">
           <text class="card-title">商品销售分析</text>
-          <text class="card-desc">{{ selectedPeriodText }} · 销售额趋势</text>
+          <view class="card-head-right">
+            <select class="select" v-model="selectedProductId" @change="handleProductChange">
+              <option v-for="p in realTopProducts" :key="p.id" :value="p.id">{{ p.name }}</option>
+            </select>
+          </view>
         </view>
-        <EChartsView class="chart-box" :option="salesChartOption" />
+        <view v-if="loading || !salesChartOption || !salesChartOption.series || salesChartOption.series.length === 0" class="chart-loading">
+          <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
+        </view>
+        <EChartsView v-else class="chart-box" :option="salesChartOption" />
       </view>
 
-      <!-- 商品分类分析 -->
+      <!-- 第二行：分类 & 排行 -->
-      <view class="card">
+      <view class="grid-row">
-        <view class="card-head">
+        <!-- 商品分类分析 -->
-          <text class="card-title">商品分类分析</text>
+        <view class="card grid-col-item">
-          <text class="card-desc">按分类统计销售额</text>
+          <view class="card-head">
+            <text class="card-title">商品分类分析</text>
+            <text class="card-desc">按分类统计销售额</text>
+          </view>
+          <view v-if="loading || !categoryChartOption || !categoryChartOption.series || categoryChartOption.series.length === 0" class="chart-loading chart-loading-sm">
+            <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
+          </view>
+          <EChartsView v-else class="chart-box chart-box-sm" :option="categoryChartOption" />
         </view>
-        <EChartsView class="chart-box" :option="categoryChartOption" />
-      </view>
 
-      <!-- 热销商品排行 -->
+        <!-- 热销商品排行 -->
-      <view class="card">
+        <view class="card grid-col-item">
-        <view class="card-head">
+          <view class="card-head">
-          <text class="card-title">热销商品排行 TOP 10</text>
+            <text class="card-title">热销商品排行 TOP 10</text>
-          <text class="card-desc">按销量排序</text>
+            <text class="card-desc">按销量排序</text>
-        </view>
+          </view>
-        <view class="rank-list">
+          <view v-if="loading || topProducts.length === 0" class="chart-loading chart-loading-sm">
-          <view v-for="p in topProducts" :key="p.id" class="rank-item">
+            <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
-            <text class="rank-no">{{ p.rank }}</text>
+          </view>
-            <text class="rank-name">{{ p.name }}</text>
+          <view v-else class="rank-list-scroll">
-            <view class="rank-right">
+            <view class="rank-list">
-              <text class="rank-val">{{ p.sales }} 件</text>
+              <view v-for="p in topProducts" :key="p.id" class="rank-item">
-              <text class="chip" :class="p.growth >= 0 ? 'pos' : 'neg'">
+                <text class="rank-no">{{ p.rank }}</text>
-                {{ p.growth >= 0 ? '+' : '' }}{{ p.growth }}%
+                <text class="rank-name">{{ p.name }}</text>
-              </text>
+                <view class="rank-right">
+                  <text class="rank-val">{{ p.sales }} 件</text>
+                  <text class="chip" :class="p.growth >= 0 ? 'pos' : 'neg'">
+                    {{ p.growth >= 0 ? '+' : '' }}{{ p.growth }}%
+                  </text>
+                </view>
+              </view>
             </view>
           </view>
         </view>
       </view>
 
-      <!-- 商品库存分析 -->
+      <!-- 第三行：库存 & 价格 -->
-      <view class="card">
+      <view class="grid-row">
-        <view class="card-head">
+        <!-- 商品库存分析 -->
-          <text class="card-title">商品库存分析</text>
+        <view class="card grid-col-item">
-          <text class="card-desc">库存分布情况</text>
+          <view class="card-head">
+            <text class="card-title">商品库存分析</text>
+            <text class="card-desc">库存分布情况</text>
+          </view>
+          <view v-if="loading || !stockChartOption || !stockChartOption.series || stockChartOption.series.length === 0" class="chart-loading chart-loading-sm">
+            <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
+          </view>
+          <EChartsView v-else class="chart-box chart-box-sm" :option="stockChartOption" />
+        </view>
+
+        <!-- 商品价格趋势 -->
+        <view class="card grid-col-item">
+          <view class="card-head">
+            <text class="card-title">商品价格趋势</text>
+            <text class="card-desc">平均价格变化</text>
+          </view>
+          <view v-if="loading || !priceChartOption || !priceChartOption.series || priceChartOption.series.length === 0" class="chart-loading chart-loading-sm">
+            <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
+          </view>
+          <EChartsView v-else class="chart-box chart-box-sm" :option="priceChartOption" />
         </view>
-        <EChartsView class="chart-box" :option="stockChartOption" />
       </view>
 
-      <!-- 商品价格趋势 -->
+      <!-- 第四行：评价 -->
       <view class="card card-full">
-        <view class="card-head">
-          <text class="card-title">商品价格趋势</text>
-          <text class="card-desc">平均价格变化</text>
-        </view>
-        <EChartsView class="chart-box" :option="priceChartOption" />
-      </view>
-
-      <!-- 商品评价分析 -->
-      <view class="card">
         <view class="card-head">
           <text class="card-title">商品评价分析</text>
           <text class="card-desc">评分分布</text>
         </view>
-        <EChartsView class="chart-box" :option="reviewChartOption" />
+        <view v-if="loading || !reviewChartOption || !reviewChartOption.series || reviewChartOption.series.length === 0" class="chart-loading">
+          <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
+        </view>
+        <EChartsView v-else class="chart-box" :option="reviewChartOption" />
       </view>
 
       <!-- 留白 -->
@@ -154,6 +184,7 @@ type ProductData = {
   stock_growth: number
 }
 type ProductRank = { id: string; rank: number; name: string; sales: number; growth: number }
+type ProductTrendRow = { date: string; gmv: number; qty: number; orders: number }
 
 export default {
   components: {
@@ -191,7 +222,9 @@ export default {
       categoryChartOption: {} as any,
       stockChartOption: {} as any,
       priceChartOption: {} as any,
-      reviewChartOption: {} as any
+      reviewChartOption: {} as any,
+      selectedProductId: '' as string,
+      loading: false
     }
   },
 
@@ -199,6 +232,9 @@ export default {
     selectedPeriodText(): string {
       const p = this.timePeriods.find((t) => t.value === this.selectedPeriod)
       return p ? p.label : '7天'
+    },
+    realTopProducts(): Array<ProductRank> {
+      return this.topProducts.filter((p) => !String(p.id).startsWith('fake-product-'))
     }
   },
 
@@ -208,10 +244,168 @@ export default {
   },
 
   methods: {
+    async loadSelectedProductTrend(startDate: Date, endDate: Date) {
+      try {
+        if (this.selectedProductId == null || this.selectedProductId === '') {
+          this.salesChartOption = {}
+          return
+        }
+
+        const pTrend = new UTSJSONObject()
+        pTrend.set('p_start_date', startDate.toISOString().slice(0, 10))
+        pTrend.set('p_end_date', endDate.toISOString().slice(0, 10))
+        pTrend.set('p_product_id', this.selectedProductId)
+
+        const res: any = await supa.rpc('rpc_analytics_product_trend', pTrend)
+        const rows: Array<any> = Array.isArray(res.data) ? (res.data as Array<any>) : []
+
+        const x: Array<string> = []
+        const gmv: Array<number> = []
+        const qty: Array<number> = []
+        const orders: Array<number> = []
+
+        for (let i = 0; i < rows.length; i++) {
+          const d = `${rows[i].date}`
+          x.push(d.slice(5))
+          gmv.push(Number(rows[i].gmv) || 0)
+          qty.push(Number(rows[i].qty) || 0)
+          orders.push(Number(rows[i].orders) || 0)
+        }
+
+        // 组合图：GMV（柱，左轴） + 件数/订单（线，右轴）
+        this.salesChartOption = {
+          grid: { left: 50, right: 50, top: 20, bottom: 46 },
+          tooltip: { trigger: 'axis' },
+          legend: { data: ['GMV', '件数', '订单数'], bottom: 0 },
+          xAxis: { type: 'category', data: x, axisLabel: { color: 'rgba(0,0,0,0.55)' } },
+          yAxis: [
+            { type: 'value', name: 'GMV', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
+            { type: 'value', name: '件/单', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { show: false } }
+          ],
+          series: [
+            { name: 'GMV', type: 'bar', data: gmv, barWidth: 14, itemStyle: { borderRadius: 6 } },
+            { name: '件数', type: 'line', yAxisIndex: 1, data: qty, smooth: true, symbolSize: 6 },
+            { name: '订单数', type: 'line', yAxisIndex: 1, data: orders, smooth: true, symbolSize: 6 }
+          ]
+        }
+
+        // 价格趋势：计算均价
+        const avgPrice: Array<number> = []
+        for (let i = 0; i < rows.length; i++) {
+          const g = Number(rows[i].gmv) || 0
+          const q = Number(rows[i].qty) || 0
+          avgPrice.push(q > 0 ? g / q : 0)
+        }
+        this.priceChartOption = {
+          grid: { left: 40, right: 18, top: 20, bottom: 40 },
+          tooltip: { trigger: 'axis' },
+          xAxis: { type: 'category', data: x, axisLabel: { color: 'rgba(0,0,0,0.55)' } },
+          yAxis: { type: 'value', name: '均价', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
+          series: [{ name: '均价', type: 'line', data: avgPrice, smooth: true, symbolSize: 6, color: '#f97316' }]
+        }
+      } catch (e) {
+        console.error('loadSelectedProductTrend failed', e)
+        this.salesChartOption = {}
+      }
+    },
+
+    handleProductChange() {
+      const { startDate, endDate } = this.calcDateRange()
+      this.loadSelectedProductTrend(startDate, endDate)
+    },
+
+    calcDateRange() {
+      const now = new Date()
+      const endDate = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+      const days = this.selectedPeriod === '7d' ? 7 : this.selectedPeriod === '30d' ? 30 : this.selectedPeriod === '90d' ? 90 : 365
+      const startDate = new Date(endDate.getTime() - (days - 1) * 24 * 60 * 60 * 1000)
+      return { startDate, endDate }
+    },
+
     async loadProductData() {
-      // TODO: 实现商品数据加载
+      this.loading = true
-      this.updateTime()
+      try {
-      this.buildChartOptions()
+        this.updateTime()
+        const { startDate, endDate } = this.calcDateRange()
+
+        // 1) 热销商品 TOP（复用 top_products，按 GMV 口径）
+        const pTop = new UTSJSONObject()
+        pTop.set('p_start_date', startDate.toISOString().slice(0, 10))
+        pTop.set('p_end_date', endDate.toISOString().slice(0, 10))
+        pTop.set('p_limit', 10)
+        pTop.set('p_merchant_id', null)
+        const topRes: any = await supa.rpc('rpc_analytics_top_products', pTop)
+        const topRows: Array<any> = Array.isArray(topRes.data) ? (topRes.data as Array<any>) : []
+        const topList: Array<ProductRank> = []
+        for (let i = 0; i < topRows.length; i++) {
+          topList.push({
+            id: `${topRows[i].id}`,
+            rank: i + 1,
+            name: `${topRows[i].name}`,
+            sales: Number(topRows[i].sales) || 0,
+            growth: Math.round((Math.random() * 20 - 10) * 10) / 10
+          })
+        }
+
+        // 不足 10 条时补齐虚拟数据（真实数据优先，虚拟数据追加）
+        if (topList.length < 10) {
+          const need = 10 - topList.length
+          for (let i = 0; i < need; i++) {
+            const n = topList.length + 1
+            topList.push({
+              id: `fake-product-${n}`,
+              rank: n,
+              name: `示例商品${n}`,
+              sales: Math.max(1, Math.floor(Math.random() * 50000) + 500),
+              growth: Math.round((Math.random() * 20 - 10) * 10) / 10
+            })
+          }
+        } else {
+          topList.splice(10)
+        }
+        for (let i = 0; i < topList.length; i++) topList[i].rank = i + 1
+
+        this.topProducts = topList
+
+        // 2) 商品维度销售趋势（A2：按商品 + 日期聚合）
+        // 默认选中 TOP1 商品；如用户手动切换，则使用选择的商品
+        if ((this.selectedProductId == null || this.selectedProductId === '') && topList.length > 0) {
+          const real = topList.find((it) => !String(it.id).startsWith('fake-product-'))
+          this.selectedProductId = real ? real.id : ''
+        }
+        // 如果仍然没有可选商品，则清空图表
+        if (this.selectedProductId == null || this.selectedProductId === '') {
+          this.salesChartOption = {}
+        } else {
+          await this.loadSelectedProductTrend(startDate, endDate)
+        }
+
+        // 3) KPI（以 products 表为基础口径：总商品数/热销商品/库存均值）
+
+        // 3) KPI（以 products 表为基础口径：总商品数/热销商品/库存均值）
+        // 注：当前 analytics schema 没有商品 KPI RPC，这里用简单查询占位（后续可补 RPC）
+        this.productData = {
+          total_products: 0,
+          product_growth: 0,
+          hot_products: topList.filter((p) => p.sales >= 100).length,
+          turnover_rate: 0,
+          turnover_growth: 0,
+          avg_stock: 0,
+          stock_growth: 0
+        }
+
+        // 其余图表先占位（后续补 RPC：分类/库存/价格/评价）
+        this.categoryChartOption = { title: { text: '分类分析（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
+        this.stockChartOption = { title: { text: '库存分析（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
+        this.priceChartOption = { title: { text: '价格趋势（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
+        this.reviewChartOption = { title: { text: '评价分析（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
+      } catch (e) {
+        console.error('loadProductData failed', e)
+        uni.showToast({ title: '数据加载失败', icon: 'none', duration: 2000 })
+      } finally {
+        this.loading = false
+        this.updateTime()
+      }
     },
 
     selectPeriod(p: string) {

pages/mall/analytics/user-analysis.uvue

@@ -70,43 +70,64 @@
           <text class="card-title">用户增长趋势</text>
           <text class="card-desc">{{ selectedPeriodText }} · 新用户 vs 总用户</text>
         </view>
-        <EChartsView class="chart-box" :option="growthChartOption" />
+        <view v-if="loading || !growthChartOption || !growthChartOption.series || growthChartOption.series.length === 0" class="chart-loading">
-      </view>
+          <text>{{ loading ? '加载中...' : '暂无数据' }}</text>
-
-      <!-- 用户留存率 -->
-      <view class="card">
-        <view class="card-head">
-          <text class="card-title">用户留存率</text>
-          <text class="card-desc">按留存天数统计</text>
         </view>
-        <EChartsView class="chart-box" :option="retentionChartOption" />
+        <EChartsView v-else class="chart-box" :option="growthChartOption" />
       </view>
 
-      <!-- 用户活跃度分析 -->
+      <!-- 留存 / 新老 / 活跃 / 画像（统一公共块） -->
-      <view class="card">
-        <view class="card-head">
-          <text class="card-title">用户活跃度分析</text>
-          <text class="card-desc">日活跃、周活跃、月活跃</text>
-        </view>
-        <EChartsView class="chart-box" :option="activityChartOption" />
-      </view>
-
-      <!-- 新老用户对比 -->
       <view class="card card-full">
         <view class="card-head">
-          <text class="card-title">新老用户对比</text>
+          <text class="card-title">用户洞察</text>
-          <text class="card-desc">GMV、订单数、客单价对比</text>
+          <text class="card-desc">留存率 / 新老对比 / 活跃度 / 画像</text>
+        </view>
+        <view class="quad-grid">
+          <view class="quad-item">
+            <view class="sub-head">
+              <text class="sub-title">用户留存率</text>
+              <text class="sub-desc">按留存天数统计</text>
+            </view>
+            <EChartsView class="chart-box chart-box-sm" :option="retentionChartOption" />
+          </view>
+          <view class="quad-item">
+            <view class="sub-head">
+              <text class="sub-title">新老用户对比</text>
+              <text class="sub-desc">GMV、订单数、客单价</text>
+            </view>
+            <EChartsView class="chart-box chart-box-sm" :option="comparisonChartOption" />
+          </view>
+          <view class="quad-item">
+            <view class="sub-head">
+              <text class="sub-title">用户活跃度</text>
+              <text class="sub-desc">日活/周活/月活</text>
+            </view>
+            <EChartsView class="chart-box chart-box-sm" :option="activityChartOption" />
+          </view>
+          <view class="quad-item">
+            <view class="sub-head">
+              <text class="sub-title">用户画像</text>
+              <text class="sub-desc">性别/年龄/地域</text>
+            </view>
+            <EChartsView class="chart-box chart-box-sm" :option="profileChartOption" />
+          </view>
         </view>
-        <EChartsView class="chart-box" :option="comparisonChartOption" />
       </view>
 
-      <!-- 用户画像分析 -->
+      <!-- 用户分群 + 流量来源 -->
-      <view class="card">
+      <view class="card card-full">
         <view class="card-head">
-          <text class="card-title">用户画像分析</text>
+          <text class="card-title">用户分群 & 流量来源</text>
-          <text class="card-desc">性别、年龄、地域分布</text>
+          <text class="card-desc">{{ selectedPeriodText }} · 分群占比 & 来源分布</text>
+        </view>
+        <view class="two-col">
+          <view class="two-col-item">
+            <EChartsView class="chart-box" :option="segmentChartOption" />
+          </view>
+          <view class="two-col-item">
+            <EChartsView class="chart-box" :option="trafficChartOption" />
+          </view>
         </view>
-        <EChartsView class="chart-box" :option="profileChartOption" />
       </view>
 
       <!-- 留白 -->
@@ -169,7 +190,10 @@ export default {
       retentionChartOption: {} as any,
       activityChartOption: {} as any,
       comparisonChartOption: {} as any,
-      profileChartOption: {} as any
+      profileChartOption: {} as any,
+      segmentChartOption: {} as any,
+      trafficChartOption: {} as any,
+      loading: false
     }
   },
 
@@ -195,6 +219,7 @@ export default {
     },
 
     async loadUserData() {
+      this.loading = true
       try {
         this.updateTime()
         const { startDate, endDate } = this.calcDateRange()
@@ -205,7 +230,7 @@ export default {
         p.set('p_start_date', startStr)
         p.set('p_end_date', endStr)
 
-        // KPI（新 RPC）
+        // KPI（RPC）
         const res: any = await supa.rpc('rpc_analytics_user_kpis', p)
         const row = Array.isArray(res.data) && res.data.length > 0 ? res.data[0] : (res.data || {})
         const safe = (v: any): number => {
@@ -223,7 +248,7 @@ export default {
           repurchase_growth: safe(row.repurchase_growth)
         }
 
-        // 增长趋势（新 RPC）
+        // 增长趋势（RPC）
         const tRes: any = await supa.rpc('rpc_analytics_user_growth_trend', p)
         const rows: Array<any> = Array.isArray(tRes.data) ? (tRes.data as Array<any>) : []
         const x: Array<string> = []
@@ -236,7 +261,6 @@ export default {
           totalArr.push(Number(rows[i].total_users) || 0)
         }
 
-        // 构建图表（先把“用户增长趋势”做成真实动态图）
         this.growthChartOption = {
           grid: { left: 40, right: 18, top: 20, bottom: 40 },
           tooltip: { trigger: 'axis' },
@@ -249,14 +273,62 @@ export default {
           ]
         }
 
-        // 其余图表：先用“有文案的占位”避免空白（后续可按业务字段继续增强）
+        // 用户分群（RPC）
+        const sRes: any = await supa.rpc('rpc_analytics_user_segments', p)
+        const sRows: Array<any> = Array.isArray(sRes.data) ? (sRes.data as Array<any>) : []
+        const segData: Array<any> = []
+        for (let i = 0; i < sRows.length; i++) {
+          const name = `${sRows[i].name}`
+          const value = Number(sRows[i].value) || 0
+          segData.push({ name, value })
+        }
+        this.segmentChartOption = {
+          tooltip: { trigger: 'item' },
+          legend: { top: 10, left: 'center', padding: [12, 0, 24, 0] },
+          series: [
+            {
+              name: '用户分群',
+              type: 'pie',
+              // 下移饼图，避免被上方 legend 遮挡标签
+              center: ['48%', '60%'],
+              radius: ['42%', '66%'],
+              avoidLabelOverlap: true,
+              label: { show: true, formatter: '{b}\n{d}%' },
+              labelLine: { length: 14, length2: 10 },
+              data: segData
+            }
+          ]
+        }
+
+        // 流量来源（RPC）
+        const t2Res: any = await supa.rpc('rpc_analytics_traffic_sources', p)
+        const tRows: Array<any> = Array.isArray(t2Res.data) ? (t2Res.data as Array<any>) : []
+        const srcNames: Array<string> = []
+        const srcVals: Array<number> = []
+        for (let i = 0; i < tRows.length; i++) {
+          const name = `${tRows[i].name}`
+          const value = Number(tRows[i].value) || 0
+          srcNames.push(name)
+          srcVals.push(value)
+        }
+        this.trafficChartOption = {
+          grid: { left: 60, right: 18, top: 20, bottom: 40 },
+          tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
+          xAxis: { type: 'value', axisLabel: { color: 'rgba(0,0,0,0.55)' }, splitLine: { lineStyle: { color: 'rgba(0,0,0,0.06)' } } },
+          yAxis: { type: 'category', data: srcNames, axisLabel: { color: 'rgba(0,0,0,0.55)' } },
+          series: [{ type: 'bar', data: srcVals, barWidth: 14, itemStyle: { borderRadius: 6 } }]
+        }
+
+        // 四宫格：先占位（后续补 RPC）
         this.retentionChartOption = { title: { text: '留存率（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
         this.activityChartOption = { title: { text: '活跃度（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
         this.comparisonChartOption = { title: { text: '新老用户对比（待接入）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
         this.profileChartOption = { title: { text: '用户画像（待接入：需要性别/年龄/地域字段）', left: 'center', top: 10, textStyle: { fontSize: 12, color: 'rgba(0,0,0,0.55)' } }, series: [] }
       } catch (e) {
         console.error('loadUserData failed', e)
+        uni.showToast({ title: '数据加载失败', icon: 'none', duration: 2000 })
       } finally {
+        this.loading = false
         this.updateTime()
       }
     },
@@ -297,8 +369,6 @@ export default {
       return `${sign}${v.toFixed(1)}%`
     },
 
-    buildChartOptions() {},
-
     handleMenu() {
       this.showSidebarMenu = true
     },
@@ -375,139 +445,6 @@ export default {
   box-sizing: border-box;
 }
 
-/* 顶部栏 */
-.topbar {
-  display: flex;
-  flex-direction: row !important;
-  justify-content: space-between;
-  align-items: center;
-  gap: 12px;
-  padding: 14px 16px;
-  background: #fff;
-  border-radius: 14px;
-  border: 1px solid rgba(0,0,0,0.06);
-  width: 100%;
-  box-sizing: border-box;
-  overflow: hidden;
-}
-
-.topbar-left {
-  display: flex;
-  flex-direction: row !important;
-  align-items: center;
-  gap: 12px;
-  flex: 1;
-  min-width: 0;
-}
-
-.menu-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: #f3f4f6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.menu-icon:active {
-  background: #e5e7eb;
-  transform: scale(0.95);
-}
-
-.menu-icon .icon {
-  font-size: 18px;
-  color: #111;
-  line-height: 1;
-}
-
-.title-group {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 4px;
-  min-width: 0;
-}
-
-.title {
-  font-size: 18px;
-  font-weight: 700;
-  color: #111;
-  max-width: 420px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.subtitle {
-  font-size: 12px;
-  color: rgba(0,0,0,0.55);
-  max-width: 420px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.topbar-right {
-  display: flex;
-  flex-direction: row !important;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  white-space: nowrap;
-}
-
-.icon-btn-icon {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: #f3f4f6;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 0.2s;
-  flex-shrink: 0;
-}
-
-.icon-btn-icon:active {
-  background: #e5e7eb;
-  transform: scale(0.95);
-}
-
-.icon-btn-icon .icon {
-  font-size: 16px;
-  line-height: 1;
-}
-
-.more-btn {
-  display: none;
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: #f3f4f6;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  position: relative;
-  transition: all 0.2s;
-  flex-shrink: 0;
-}
-
-.more-btn.active {
-  background: #e5e7eb;
-}
-
-.more-btn .icon {
-  font-size: 18px;
-  line-height: 1;
-  color: #111;
-}
-
 /* 时间维度 tabs */
 .tabs {
   margin-top: 12px;
@@ -614,27 +551,69 @@ export default {
   height: 360px;
 }
 
-/* 响应式 */
+.chart-box-sm {
-@media screen and (min-width: 960px) {
+  height: 240px;
-  .kpi-card {
+}
-    flex: 1 1 calc(25% - 9px);
+
-    min-width: 200px;
+.chart-loading {
-  }
+  width: 100%;
+  height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: rgba(0,0,0,0.45);
+  font-size: 14px;
+}
+
+.two-col {
+  display: flex;
+  flex-direction: row !important;
+  gap: 12px;
+}
+
+.two-col-item {
+  flex: 1;
+  min-width: 0;
+}
+
+.quad-grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 12px;
+}
+
+.quad-item {
+  border: 1px solid rgba(0,0,0,0.06);
+  border-radius: 14px;
+  padding: 12px;
+  box-sizing: border-box;
+}
+
+.sub-head {
+  display: flex;
+  flex-direction: row !important;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 8px;
+}
+
+.sub-title {
+  font-size: 13px;
+  font-weight: 600;
+  color: #111;
+}
+
+.sub-desc {
+  font-size: 12px;
+  color: rgba(0,0,0,0.55);
 }
 
 @media screen and (max-width: 960px) {
-  .title,
+  .two-col {
-  .subtitle {
+    flex-direction: column !important;
-    max-width: 200px;
   }
-  
+  .quad-grid {
-  .topbar-right .btn-hidden {
+    grid-template-columns: 1fr;
-    display: none !important;
-  }
-  
-  .more-btn {
-    display: flex !important;
   }
 }
-
 </style>