merge: branch 'huangzhenbao-admin' into comclib-analytics, keeping local RPC integration versions

pages/mall/admin/product/product-statistics/index.uvue

@@ -1,7 +1,8 @@
 <template>
-  <view class="product-statistic-page">
-    <!-- 商品概况头部 -->
-    <view class="page-header-row">
+  <view class="admin-page">
+    <view class="admin-sections">
+      <!-- 商品概况头部 -->
+      <view class="admin-card page-header-row">
       <view class="title-wrap">
         <text class="page-title">商品概况</text>
         <view class="info-icon">?</view>
@@ -16,9 +17,9 @@
       </view>
     </view>
 
-    <!-- 统计指标网格 -->
-    <view class="stat-grid">
-      <view v-for="(item, index) in statItems" :key="index" class="stat-card">
+    <!-- 统计指标网格 (使用统一响应式网格) -->
+    <view class="kpi-grid">
+      <view v-for="(item, index) in statItems" :key="index" class="admin-card stat-card">
         <view class="stat-main">
           <view class="icon-box" :style="{ backgroundColor: item.bgColor }">
             <text class="stat-emoji">{{ item.emoji }}</text>
@@ -41,7 +42,7 @@
     </view>
 
     <!-- 图表卡片 -->
-    <view class="chart-card">
+    <view class="admin-card chart-card">
       <view class="chart-header">
         <view class="legend-wrap">
           <view class="legend-item"><view class="dot purple"></view><text>商品浏览量</text></view>
@@ -59,7 +60,7 @@
     </view>
 
     <!-- 商品排行 -->
-    <view class="ranking-card">
+    <view class="admin-card ranking-card">
       <view class="ranking-header">
         <text class="ranking-title">商品排行</text>
         <view class="ranking-filters">
@@ -114,6 +115,7 @@
         </view>
       </view>
     </view>
+    </view>
   </view>
 </template>
 
@@ -274,18 +276,11 @@ function initChart(data: any[]) {
 </script>
 
 <style scoped lang="scss">
-.product-statistic-page {
-  padding: 16px;
-  background-color: #f0f2f5;
-  min-height: 100vh;
-}
-
 .page-header-row {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 20px;
 }
 
 .title-wrap {
@@ -327,19 +322,9 @@ function initChart(data: any[]) {
 .btn-query { background: #1890ff; color: #fff; font-size: 14px; height: 32px; padding: 0 15px; border-radius: 4px; border: none; }
 .btn-export { background: #1890ff; color: #fff; font-size: 14px; height: 32px; padding: 0 15px; border-radius: 4px; border: none; }
 
-.stat-grid {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  gap: 16px;
-  margin-bottom: 16px;
-}
-
+/* stat-grid 已废弃，由全局 kpi-grid 接管 */
 .stat-card {
-  width: calc(33.33% - 11px);
-  background: #fff;
-  border-radius: 8px;
-  padding: 20px;
+  min-width: 0; 
 }
 
 .stat-main {
@@ -379,9 +364,6 @@ function initChart(data: any[]) {
 .arrow { font-size: 10px; margin-left: 2px; }
 
 .chart-card {
-  background: #fff;
-  border-radius: 8px;
-  padding: 24px;
 }
 
 .chart-header {