refactor(crm/report): 重构销售报表页面为组件化结构

将原销售报表页面拆分为多个独立组件，包括销售汇总卡片、销售员图表、行业图表、客户等级图表和订单明细组件
优化代码结构，提升可维护性和复用性

klp-ui/src/views/crm/report/SalesReportSummaryCard.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="summary-stat-container" v-loading="loading">
+    <el-card class="summary-card" shadow="hover">
+      <div class="summary-list">
+        <div class="summary-item">
+          <span class="item-label">总订单数</span>
+          <span class="item-value">{{ summaryData.totalOrderCount || 0 }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="item-label">总销售金额(元)</span>
+          <span class="item-value">{{ formatAmount(summaryData.totalSalesAmount) }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="item-label">已完成订单数</span>
+          <span class="item-value">{{ summaryData.completedOrderCount || 0 }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="item-label">已完成销售金额(元)</span>
+          <span class="item-value">{{ formatAmount(summaryData.completedSalesAmount) }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="item-label">未结款总金额(元)</span>
+          <span class="item-value">{{ formatAmount(summaryData.totalUnpaidAmount) }}</span>
+        </div>
+        <div class="summary-item">
+          <span class="item-label">平均订单金额(元)</span>
+          <span class="item-value">{{ formatAmount(summaryData.avgOrderAmount) }}</span>
+        </div>
+      </div>
+    </el-card>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "SalesReportSummaryCard",
+  props: {
+    // 汇总数据
+    summaryData: {
+      type: Object,
+      default: () => ({})
+    },
+    // 加载状态
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 金额格式化方法（从父组件传入，保证一致性）
+    formatAmount: {
+      type: Function,
+      required: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.summary-stat-container {
+  margin-bottom: 20px;
+}
+
+.summary-card {
+  border: none;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.04);
+}
+
+.summary-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  padding: 15px 0;
+}
+
+.summary-item {
+  width: calc(16.666% - 20px);
+  text-align: center;
+  padding: 15px 10px;
+  border: 1px solid #ebeef5;
+  border-radius: 4px;
+}
+
+.item-label {
+  display: block;
+  font-size: 14px;
+  color: #606266;
+  margin-bottom: 10px;
+}
+
+.item-value {
+  display: block;
+  font-size: 24px;
+  font-weight: bold;
+  color: #1f2d3d;
+}
+</style>