From e4944e7502d040799f17e51accffcec47f654dc6 Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Tue, 11 Nov 2025 17:53:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E7=94=A8=E5=AE=A2=E6=88=B7=E7=AE=80?=
 =?UTF-8?q?=E4=BB=8B=E5=8D=A1=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CustomerManagement.vue            |  62 +-----
 components/customer/CustomerSummaryBrief.vue | 196 +++++++++++++++++++
 pages/customer/detail/index.vue              |  31 +--
 3 files changed, 213 insertions(+), 76 deletions(-)
 create mode 100644 components/customer/CustomerSummaryBrief.vue

diff --git a/components/CustomerManagement.vue b/components/CustomerManagement.vue
index 5525205..cdd1150 100644
--- a/components/CustomerManagement.vue
+++ b/components/CustomerManagement.vue
@@ -55,41 +55,14 @@
         :key="customer.id"
         @click="handleCustomerClick(customer)"
       >
-        <!-- 客户信息区域 -->
-        <view class="customer-header">
-          <view class="customer-name-wrapper">
-            <text class="customer-name">{{ customer.name }}</text>
-            <text class="edit-icon" @click.stop="handleEdit(customer)">✎</text>
-          </view>
-        </view>
-
-        <!-- 状态和标签区域 -->
-        <view class="tags-section">
-          <!-- 状态标签 -->
-          <view 
-            class="status-tag" 
-            :class="getStatusTagClass(customer.status)"
-          >
-            {{ getStatusText(customer.status) }}
-          </view>
-          
-          <!-- 意向强度标签 -->
-          <view 
-            class="intent-level-tag" 
-            v-if="customer.intentLevel"
-          >
-            {{ getIntentLevelText(customer.intentLevel) }}
-          </view>
-
-          <!-- 客户意向标签 -->
-          <view 
-            v-for="(intent, index) in customer.intents" 
-            :key="index"
-            class="intent-tag"
-          >
-            {{ intent }}
-          </view>
-        </view>
+        <CustomerSummaryBrief
+          :name="customer.name"
+          :intents="customer.intents"
+          :intent-level="customer.intentLevel"
+          :status="customer.status"
+          :show-edit="true"
+          @edit="handleEdit(customer)"
+        />
 
         <!-- 客户详细信息区域 -->
         <view class="customer-details">
@@ -185,12 +158,10 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
 import FabPlus from '@/components/FabPlus.vue';
+import CustomerSummaryBrief from '@/components/customer/CustomerSummaryBrief.vue';
 import { usePagination } from '@/composables/usePagination';
 import { getCustomerList, deleteCustomer } from '@/common/api/customer';
 import { 
-  getCustomerStatusText, 
-  getCustomerStatusClass, 
-  getIntentLevelText,
   getStatusListByFilter
 } from '@/utils/customerMappings';
 
@@ -217,20 +188,7 @@ const {
   defaultParams: {}
 });
 
-// 使用统一映射函数
-const getStatusClass = getCustomerStatusClass;
-const getStatusText = getCustomerStatusText;
-
-// 获取状态标签样式类
-const getStatusTagClass = (status) => {
-  const statusStr = String(status);
-  return {
-    'status-tag-potential': statusStr === '1',  // 潜在
-    'status-tag-intent': statusStr === '2',     // 意向
-    'status-tag-deal': statusStr === '3',       // 成交
-    'status-tag-invalid': statusStr === '4'     // 失效
-  };
-};
+// 本页状态映射与样式由 CustomerSummaryBrief 统一处理
 
 // 处理编辑
 const handleEdit = (customer) => {
diff --git a/components/customer/CustomerSummaryBrief.vue b/components/customer/CustomerSummaryBrief.vue
new file mode 100644
index 0000000..cd572ad
--- /dev/null
+++ b/components/customer/CustomerSummaryBrief.vue
@@ -0,0 +1,196 @@
+<template>
+  <view class="summary-brief">
+    <!-- 名称区域（与列表页一致，支持可选编辑按钮） -->
+    <view class="customer-header">
+      <view class="customer-name-wrapper">
+       
+        <text class="customer-name">{{ displayName }}</text>
+        <text 
+          v-if="showEdit" 
+          class="edit-icon" 
+          @click.stop="$emit('edit')"
+        >✎</text>
+      </view>
+    </view>
+
+    <!-- 标签区域（与列表页一致） -->
+    <view class="tags-section">
+      <!-- 状态标签 -->
+      <view 
+        class="status-tag" 
+        :class="getStatusTagClass(status)"
+      >
+        {{ getCustomerStatusText(status) }}
+      </view>
+      
+      <!-- 意向强度标签 -->
+      <view 
+        class="intent-level-tag" 
+        v-if="intentLevel"
+      >
+        {{ getIntentLevelText(intentLevel) }}
+      </view>
+
+      <!-- 客户意向标签 -->
+      <view 
+        v-for="(intent, index) in intentsArray" 
+        :key="index"
+        class="intent-tag"
+      >
+        {{ intent }}
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { 
+  getCustomerStatusText, 
+  getIntentLevelText 
+} from '@/utils/customerMappings';
+
+const props = defineProps({
+  name: { type: String, default: '' },
+  intents: { type: [Array, String], default: () => [] },
+  intentLevel: { type: [String, Number], default: '' },
+  status: { type: [String, Number], default: '' },
+  showEdit: { type: Boolean, default: false }
+});
+
+const displayName = computed(() => props.name || '--');
+
+const intentsArray = computed(() => {
+  if (!props.intents) return [];
+  if (Array.isArray(props.intents)) {
+    return props.intents;
+  }
+  if (typeof props.intents === 'string') {
+    return props.intents
+      .split(',')
+      .map(s => s.trim())
+      .filter(Boolean);
+  }
+  return [];
+});
+
+// 与客户管理列表页一致的状态样式映射
+const getStatusTagClass = (status) => {
+  const statusStr = String(status ?? '');
+  return {
+    'status-tag-potential': statusStr === '1',  // 潜在
+    'status-tag-intent': statusStr === '2',     // 意向
+    'status-tag-deal': statusStr === '3',       // 成交
+    'status-tag-invalid': statusStr === '4'     // 失效
+  };
+};
+</script>
+
+<style scoped lang="scss">
+.summary-brief {
+  display: flex;
+  flex-direction: column;
+}
+
+.customer-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.customer-name-wrapper {
+  display: flex;
+  align-items: center;
+
+  gap: 8px;
+}
+
+.customer-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: #2885ff;
+  line-height: 1.4;
+}
+
+.edit-icon {
+  color: #909399;
+  cursor: pointer;
+  opacity: 0.6;
+  transition: opacity 0.3s ease;
+  
+  &:active {
+    opacity: 1;
+  }
+}
+
+/* 标签区域（复用列表页视觉） */
+.tags-section {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+/* 状态标签 */
+.status-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  border-radius: 12px;
+  white-space: nowrap;
+  
+  &.status-tag-potential {
+    color: #e6a23c;
+    background-color: #fdf6ec;
+    border: 1px solid #f5dab1;
+  }
+  
+  &.status-tag-intent {
+    color: #409eff;
+    background-color: #ecf5ff;
+    border: 1px solid #b3d8ff;
+  }
+  
+  &.status-tag-deal {
+    color: #67c23a;
+    background-color: #f0f9ff;
+    border: 1px solid #b3e19d;
+  }
+  
+  &.status-tag-invalid {
+    color: #f56c6c;
+    background-color: #fef0f0;
+    border: 1px solid #fbc4c4;
+  }
+}
+
+/* 意向强度标签 */
+.intent-level-tag {
+  display: inline-block;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #e6a23c;
+  background-color: #fef9e7;
+  border: 1px solid #f5dab1;
+  border-radius: 12px;
+  white-space: nowrap;
+}
+
+/* 客户意向标签 */
+.intent-tag {
+  display: flex;
+  align-items: center;
+  padding: 4px 12px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #67c23a;
+  background-color: #f0f9ff;
+  border: 1px solid #b3e19d;
+  border-radius: 12px;
+  white-space: nowrap;
+}
+</style>
+
+
diff --git a/pages/customer/detail/index.vue b/pages/customer/detail/index.vue
index 6c215da..89ae501 100644
--- a/pages/customer/detail/index.vue
+++ b/pages/customer/detail/index.vue
@@ -11,30 +11,12 @@
 
     <!-- 客户摘要卡片 -->
     <view class="customer-summary-card">
-      <view class="summary-row">
-        <view class="summary-item">
-          <text class="summary-label">客户姓名</text>
-          <text class="summary-value">{{ customerDetail.contactName || customerDetail.name || '--' }}</text>
-        </view>
-        <view class="summary-item">
-          <text class="summary-label">客户状态</text>
-          <view class="status-badge" :class="getStatusClass(customerDetail.status)">
-            <text>{{ getStatusText(customerDetail.status) }}</text>
-          </view>
-        </view>
-        
-      </view>
-      <view class="summary-row">
-        
-        <view class="summary-item">
-          <text class="summary-label">客户意向</text>
-          <text class="summary-value">{{ formatIntents(customerDetail.intents) }}</text>
-        </view>
-        <view class="summary-item">
-          <text class="summary-label">意向强度</text>
-          <text class="summary-value">{{ getIntentStrengthText(customerDetail.intentLevel) }}</text>
-        </view>
-      </view>
+      <CustomerSummaryBrief
+        :name="customerDetail.contactName || customerDetail.name || '--'"
+        :intents="customerDetail.intents"
+        :intent-level="customerDetail.intentLevel"
+        :status="customerDetail.status"
+      />
       <view class="summary-row">
 
         <view class="summary-item">
@@ -148,6 +130,7 @@ import { getCustomerDetail, getCustomerFollowupList, getCustomerProjects, delete
 import FollowupTab from '@/components/customer-detail/FollowupTab.vue';
 import ProjectsTab from '@/components/customer-detail/ProjectsTab.vue';
 import InfoTab from '@/components/customer-detail/InfoTab.vue';
+import CustomerSummaryBrief from '@/components/customer/CustomerSummaryBrief.vue';
 import { 
   getCustomerStatusText, 
   getCustomerStatusClass,