优化细节

components/analytics/AnalyticsUserGenderSection.uvue

@@ -1,12 +1,28 @@
 <template>
-  <view class="gender-card">
+  <view class="gender-card" ref="cardRef">
     <view class="card-header">
       <text class="title">用户性别比例</text>
     </view>
     
     <view class="card-content">
-      <view class="chart-container">
+      <!-- 左侧自定义图例列 - 复刻 CRMEB 竖排样式 -->
+      <view class="legend-col">
+        <view class="legend-item" v-for="(item, index) in genderData" :key="index">
+          <view class="legend-dot" :style="{ backgroundColor: item.itemStyle.color }"></view>
+          <text class="legend-label">{{ item.name }}</text>
+        </view>
+      </view>
+
+      <!-- 
+        右侧图表列 - 核心容器
+        1. 使用 ResizeObserver 监听此处尺寸
+        2. 中心文字通过 CSS 绝对居中
+      -->
+      <view class="chart-col" ref="chartWrapRef">
+        <!-- 图表组件 -->
         <EChartsView :option="chartOption" class="donut-chart" />
+        
+        <!-- 中心文字：绝对居中，与 ECharts center:['50%','50%'] 严格同步 -->
         <view class="center-text">
           <text class="total-label">总用户数</text>
           <text class="total-value">{{ totalUsers }}</text>
@@ -18,7 +34,12 @@
 
 <script lang="uts">
 import EChartsView from '@/uni_modules/charts/EChartsView.vue'
+import { showSubSider, isMainAsideCollapsed, layoutMode } from '@/layouts/admin/store/adminNavStore.uts'
 
+/**
+ * 用户性别比例 - CRMEB 1:1 复刻版 (响应式增强)
+ * 解决了：<1200px 布局切换、Canvas 溢出、图表裁切、中心偏移问题
+ */
 export default {
   components: {
     EChartsView
@@ -26,86 +47,129 @@ export default {
   data() {
     return {
       totalUsers: 525,
-      chartOption: {} as any
+      genderData: [
+        { value: 450, name: '未知', itemStyle: { color: '#919eab' } },
+        { value: 50, name: '男', itemStyle: { color: '#1890ff' } },
+        { value: 25, name: '女', itemStyle: { color: '#febc2c' } }
+      ],
+      chartOption: {} as any,
+      resizeObserver: null as any | null
+    }
+  },
+  computed: {
+    navState(): string {
+      return `${showSubSider.value}-${isMainAsideCollapsed.value}-${layoutMode.value}`
+    }
+  },
+  watch: {
+    navState() {
+      // 侧边栏/断点状态变化时，强制触发 resize
+      this.triggerRobustResize()
     }
   },
   mounted() {
-    setTimeout(() => {
-      this.initChart()
-    }, 200)
+    this.initChart()
+    this.setupResizeSystem()
+  },
+  unmounted() {
+    if (this.resizeObserver != null) {
+      (this.resizeObserver as any).disconnect()
+    }
+    window.removeEventListener('resize', this.triggerRobustResize)
+    
+    const sidebar = document.querySelector('.admin-sidebar-container') || document.querySelector('.admin-main-aside')
+    if (sidebar != null) {
+      sidebar.removeEventListener('transitionend', this.triggerRobustResize)
+    }
   },
   methods: {
     initChart() {
+      // Step 4: 修复 option 自适应，使用百分比 radius 和 center
       const option = {
         tooltip: {
           trigger: 'item',
-          formatter: '{b}: {c} ({d}%)'
-        },
-        legend: {
-          top: '0%',
-          left: 'center',
-          icon: 'rect',
-          itemWidth: 15,
-          itemHeight: 15,
-          textStyle: {
-            fontSize: 12,
-            color: '#666'
-          }
+          formatter: '{b}: {c} ({d}%)',
+          backgroundColor: '#fff',
+          padding: [10, 15],
+          textStyle: { color: '#333' },
+          extraCssText: 'box-shadow: 0 2px 8px rgba(0,0,0,0.15); border-radius: 4px;'
         },
+        // 关闭 ECharts 的普通图例，使用外部自定义图例
+        legend: { show: false },
         series: [
           {
             name: '性别比例',
             type: 'pie',
-            radius: ['50%', '75%'],
-            center: ['50%', '60%'],
+            // 百分比定义半径，防止裁切
+            radius: ['60%', '78%'],
+            // 图表在容器内绝对居中
+            center: ['50%', '50%'],
             avoidLabelOverlap: false,
-            label: {
-              show: false,
-              position: 'center'
-            },
+            label: { show: false },
             emphasis: {
-              label: {
-                show: false
-              }
+              scale: true,
+              scaleSize: 10,
+              label: { show: false }
             },
-            labelLine: {
-              show: false
-            },
-            data: [
-              { value: 450, name: '未知', itemStyle: { color: '#999999' } },
-              { value: 50, name: '男', itemStyle: { color: '#3b82f6' } },
-              { value: 25, name: '女', itemStyle: { color: '#f97316' } }
-            ]
+            data: this.genderData
           }
         ]
       }
       this.chartOption = this.toPlainObject(option)
     },
+
+    /**
+     * 建立可靠 resize 闭环
+     */
+    setupResizeSystem() {
+      // 1. ResizeObserver 监听容器真实尺寸变化 (节流处理)
+      if (typeof ResizeObserver !== 'undefined') {
+        let timer: any = null
+        this.resizeObserver = new ResizeObserver(() => {
+          if (timer) return
+          timer = setTimeout(() => {
+            this.triggerRobustResize()
+            timer = null
+          }, 100)
+        })
+        const wrap = (this.$refs['chartWrapRef'] as any).$el
+        if (wrap != null) {
+          (this.resizeObserver as any).observe(wrap)
+        }
+      }
+
+      // 2. Window Resize 兜底
+      window.addEventListener('resize', this.triggerRobustResize)
+
+      // 3. 监听侧边栏动画结束 (transitionend)
+      const sidebar = document.querySelector('.admin-sidebar-container') || document.querySelector('.admin-main-aside')
+      if (sidebar != null) {
+        sidebar.addEventListener('transitionend', this.triggerRobustResize)
+      }
+    },
+
+    triggerRobustResize() {
+      // 触发一次 layout 后的渲染
+      requestAnimationFrame(() => {
+        window.dispatchEvent(new Event('resize'))
+        
+        // 补充第二次 frame 针对重构动画的延迟校准
+        setTimeout(() => {
+          window.dispatchEvent(new Event('resize'))
+        }, 30)
+      })
+    },
+
     toPlainObject(obj: any): any {
       if (obj == null) return null
       if (typeof obj !== 'object') return obj
-      if (Array.isArray(obj)) {
-        return obj.map((item) => this.toPlainObject(item))
-      }
+      if (Array.isArray(obj)) return obj.map((item : any) : any => this.toPlainObject(item))
       const plain: any = {}
       for (const key in obj) {
         if (Object.prototype.hasOwnProperty.call(obj, key)) {
           const value = obj[key]
-          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') {
-            continue
-          }
-          if (value != null && typeof value === 'object' && !Array.isArray(value)) {
-            let isSimple = true
-            for (const k in value) {
-              if (typeof value[k] === 'object' && value[k] !== null) {
-                isSimple = false
-                break
-              }
-            }
-            plain[key] = isSimple ? { ...value } : this.toPlainObject(value)
-          } else {
-            plain[key] = value
-          }
+          if (typeof value === 'function' || key.startsWith('_') || key === 'toJSON') continue
+          plain[key] = (value != null && typeof value === 'object' && !Array.isArray(value)) ? this.toPlainObject(value) : value
         }
       }
       return plain
@@ -119,12 +183,16 @@ export default {
   background: #fff;
   border-radius: 4px;
   padding: 20px;
-  margin-bottom: 20px;
-  height: 521px;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+  box-sizing: border-box;
+  width: 100%;
 }
 
 .card-header {
   margin-bottom: 20px;
+  flex-shrink: 0;
 }
 
 .title {
@@ -134,43 +202,100 @@ export default {
 }
 
 .card-content {
+  flex: 1;
+  width: 100%;
   display: flex;
-  justify-content: center;
+  flex-direction: row;
   align-items: center;
-  height: 400px;
 }
 
-.chart-container {
+.legend-col {
+  width: 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  flex-shrink: 0;
+}
+
+.legend-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+}
+
+.legend-dot {
+  width: 16px;
+  height: 10px;
+  border-radius: 2px;
+}
+
+.legend-label {
+  font-size: 14px;
+  color: #666;
+}
+
+.chart-col {
+  flex: 1;
   position: relative;
-  width: 100%;
-  height: 100%;
+  /**
+   * 确定高度策略 - 响应式复刻 CRMEB
+   * >=1200px (两列) 时保持紧凑高度
+   */
+  height: clamp(320px, 35vh, 400px);
+  overflow: hidden;
 }
 
-.donut-chart {
-  width: 100%;
-  height: 100%;
+/* 响应式断点：<1200px 切换为单列，图表需要更大空间 */
+@media (max-width: 1199.98px) {
+  .chart-col {
+    height: clamp(480px, 50vh, 600px);
+  }
+}
+
+/* 强制覆盖 EChartsView 内部样式，确保绝对定位生效 */
+:deep(.donut-chart) {
+  width: 100% !important;
+  height: 100% !important;
+  
+  .ec-wrap {
+    position: relative !important;
+    width: 100% !important;
+    height: 100% !important;
+    overflow: hidden !important;
+  }
+  
+  .ec-canvas {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
 }
 
 .center-text {
   position: absolute;
-  top: 60%;
+  top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   display: flex;
   flex-direction: column;
   align-items: center;
   pointer-events: none;
+  user-select: none;
+  z-index: 10;
 }
 
 .total-label {
-  font-size: 14px;
+  font-size: 13px;
   color: #999;
   margin-bottom: 4px;
 }
 
 .total-value {
-  font-size: 28px;
+  font-size: 32px;
   font-weight: bold;
   color: #333;
+  line-height: 1;
 }
 </style>