feat(topOne): 重构核心业绩指标组件并添加用户下拉菜单

- 重构KpiMetrics组件以使用API获取的真实数据
- 添加UserDropdown组件到topOne页面
- 简化http工具中的get方法
- 更新KPI卡片显示逻辑和标签文本

my-vue-app/src/views/topOne/components/KpiMetrics.vue

@@ -31,7 +31,7 @@
         </div>
       </div>
 
-      <!-- 2. 活跃组数 -->
+      <!-- 2. 定金转化率 -->
       <div class="kpi-card">
         <div class="card-header">
           <span class="card-label">定金转化率</span>
@@ -41,10 +41,10 @@
         </div>
         <div class="card-body">
           <span class="card-value">{{ kpiData.activeTeams.value }}</span>
-          <span class="card-unit">组</span>
+          <span class="card-unit">%</span>
         </div>
         <div class="card-footer">
-          总人数：{{ kpiData.activeTeams.totalMembers }}人
+          上月转化率：{{ kpiData.activeTeams.totalMembers }}
         </div>
       </div>
 
@@ -85,7 +85,7 @@
       <!-- 5. 中心转化率 -->
       <div class="kpi-card">
         <div class="card-header">
-          <span class="card-label">平均转化率</span>
+          <span class="card-label">中心转化率</span>
           <span class="card-trend" :class="getTrendClass(kpiData.conversionRate.trend)">
             {{ formatTrend(kpiData.conversionRate.trend, true) }} vs 上期
           </span>
@@ -94,61 +94,70 @@
           <span class="card-value">{{ kpiData.conversionRate.value }}</span>
           <span class="card-unit">%</span>
         </div>
-        <div class="card-footer">
-          行业平均：{{ kpiData.conversionRate.industryAvg }}%
-        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref, computed, watch } from 'vue';
 
-// 1. 定义内部响应式状态
-const kpiData = ref({
-  // 定义一个骨架结构，防止模板在初始渲染时出错
-  totalSales: {},
-  activeTeams: {},
-  conversionRate: {},
-  totalCalls: {},
-  newCustomers: {},
-});
-const isLoading = ref(true); // 加载状态，默认为true
-const error = ref(null);     // 错误状态，默认为null
-
-// 2. 模拟从API获取数据的函数
-async function fetchData() {
-  isLoading.value = true;
-  error.value = null;
-  try {
-    // 模拟网络延迟
-    await new Promise(resolve => setTimeout(resolve, 1500));
-    
-    // 模拟成功获取的数据。在实际应用中，这里会是 fetch() 或 axios.get()
-    const responseData = {
-      totalSales: { value: 552000, trend: 12, targetCompletion: 56 },
-      activeTeams: { value: 5, total: 5, totalMembers: 40 },
-      conversionRate: { value: 5.2, trend: 0.3, industryAvg: 4.8 },
-      totalCalls: { value: 1247, trend: -8, effectiveCalls: 892 }, // 示例：负向趋势
-      newCustomers: { value: 117, trend: 15, interestedCustomers: 89 },
-    };
-
-    // 更新组件的内部数据
-    kpiData.value = responseData;
-
-  } catch (e) {
-    // 如果发生错误，更新错误状态
-    error.value = e.message || '未知错误';
-  } finally {
-    // 无论成功或失败，最后都设置加载完成
-    isLoading.value = false;
+// 定义props
+const props = defineProps({
+  kpiData: {
+    type: Object,
+    default: () => ({})
+  },
+  formatNumber: {
+    type: Function,
+    default: (num) => num?.toLocaleString() || '0'
   }
-}
+});
 
-// 3. 在组件挂载后调用数据获取函数
-onMounted(() => {
-  fetchData();
+const isLoading = ref(false);
+const error = ref(null);
+
+// 计算属性：将API数据转换为组件需要的格式
+const kpiData = computed(() => {
+  const data = props.kpiData;
+  
+  if (!data || Object.keys(data).length === 0) {
+    return {
+      totalSales: {},
+      activeTeams: {},
+      conversionRate: {},
+      totalCalls: {},
+      newCustomers: {},
+    };
+  }
+
+  return {
+    totalSales: {
+      value: data.totalDeals?.company_monthly_deal_count || 0,
+      trend: parseFloat(data.totalDeals?.company_monthly_vs_previous_month_deals_comparison) || 0,
+      targetCompletion: parseFloat(data.totalDeals?.company_monthly_target_completion_rate) || 0
+    },
+    activeTeams: {
+      value: parseFloat(data.conversionRate?.company_current_deposit_conversion_rate) || 0,
+      trend: parseFloat(data.conversionRate?.company_monthly_vs_last_month_rate_comparison) || 0,
+      totalMembers: data.conversionRate?.company_last_month_deposit_conversion_rate || '0.00%'
+    },
+    conversionRate: {
+       value: parseFloat(data.conversionRate?.company_conversion_rate) || 0,
+       trend: parseFloat(data.conversionRate?.center_monthly_vs_previous_deals) || 0,
+       industryAvg: 4.8
+     },
+    totalCalls: {
+      value: data.totalCallCount?.company_total_call_count || 0,
+      trend: parseFloat(data.totalCallCount?.company_total_call_count_vs_last) || 0,
+      effectiveCalls: data.totalCallCount?.company_effective_call_count || 0
+    },
+    newCustomers: {
+      value: data.newCustomer?.company_new_leads_count || 0,
+      trend: parseFloat(data.newCustomer?.company_new_leads_vs_previous_period) || 0,
+      interestedCustomers: data.newCustomer?.company_new_v_customer_count || 0
+    }
+  };
 });
 
 // --- 以下是辅助函数，保持不变 ---