From 22823e520fb42cb7999d2531bdd1d0a1ea4c5abe Mon Sep 17 00:00:00 2001
From: WindowBird <13870814+windows-bird@user.noreply.gitee.com>
Date: Fri, 7 Nov 2025 17:41:03 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=A2=E6=88=B7=E7=AE=A1=E7=90=86=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/CustomerManagement.vue | 242 ++++++++++++++++++++++--------
 1 file changed, 180 insertions(+), 62 deletions(-)

diff --git a/components/CustomerManagement.vue b/components/CustomerManagement.vue
index ac37efc..d725973 100644
--- a/components/CustomerManagement.vue
+++ b/components/CustomerManagement.vue
@@ -34,7 +34,12 @@
     </view>
 
     <!-- 客户列表 -->
-    <scroll-view class="customer-list" scroll-y>
+    <scroll-view 
+      class="customer-list" 
+      :class="{ 'with-filter': showFilter }"
+      scroll-y
+    >
+      <view style="padding-inline: 8px">
       <view 
         class="customer-card" 
         v-for="customer in filteredCustomers" 
@@ -109,6 +114,7 @@
       <view class="loading-state" v-if="loading">
         <text class="loading-text">加载中...</text>
       </view>
+      </view>
     </scroll-view>
 
     <!-- 悬浮添加按钮 -->
@@ -315,7 +321,9 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   height: 100%;
-  background-color: #f5f5f5;
+  width: 100%;
+  background-color: #f5f7fa;
+  position: relative;
 }
 
 /* 顶部标题栏 */
@@ -325,35 +333,48 @@ onMounted(() => {
   justify-content: space-between;
   padding: 12px 16px;
   background-color: #fff;
-  border-bottom: 1px solid #eee;
-  position: sticky;
+  border-bottom: 1px solid #e4e7ed;
+  position: fixed;
   top: 0;
+  right: 0;
+  left: 0;
   z-index: 100;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
 }
 
 .header-title {
   font-size: 18px;
   font-weight: 600;
-  color: #333;
+  color: #303133;
+  letter-spacing: 0.5px;
 }
 
 .filter-btn {
   display: flex;
   align-items: center;
-  gap: 4px;
-  padding: 4px 8px;
+  gap: 6px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  background-color: #f5f7fa;
+  transition: all 0.3s ease;
   cursor: pointer;
+  
+  &:active {
+    background-color: #e4e7ed;
+    transform: scale(0.95);
+  }
 }
 
 .filter-text {
   font-size: 14px;
-  color: #666;
+  color: #606266;
+  font-weight: 500;
 }
 
 .filter-icon {
   font-size: 12px;
-  color: #666;
-  transition: transform 0.3s;
+  color: #909399;
+  transition: transform 0.3s ease;
   
   &.rotate {
     transform: rotate(180deg);
@@ -363,131 +384,200 @@ onMounted(() => {
 /* 筛选面板 */
 .filter-panel {
   background-color: #fff;
-  padding: 12px 16px;
-  border-bottom: 1px solid #eee;
+  padding: 16px;
+  border-bottom: 1px solid #e4e7ed;
+  position: fixed;
+  top: 52px;
+  right: 0;
+  left: 0;
+  z-index: 99;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+  animation: slideDown 0.3s ease;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 .filter-item {
   display: flex;
   align-items: center;
-  gap: 12px;
+  gap: 16px;
 }
 
 .filter-label {
   font-size: 14px;
-  color: #666;
+  color: #606266;
   flex-shrink: 0;
+  font-weight: 500;
 }
 
 .filter-options {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   flex-wrap: wrap;
+  flex: 1;
 }
 
 .filter-option {
-  padding: 4px 12px;
+  padding: 6px 16px;
   font-size: 14px;
-  color: #666;
-  background-color: #f5f5f5;
-  border-radius: 4px;
+  color: #606266;
+  background-color: #f5f7fa;
+  border-radius: 20px;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  border: 1px solid transparent;
+  
+  &:active {
+    transform: scale(0.95);
+  }
   
   &.active {
-    color: #1976d2;
-    background-color: #e3f2fd;
+    color: #2885ff;
+    background-color: #e6f2ff;
+    border-color: #2885ff;
+    font-weight: 500;
   }
 }
 
 /* 客户列表 */
 .customer-list {
   flex: 1;
-  padding: 12px;
-  padding-bottom: 80px; /* 为底部导航栏留出空间 */
+  padding-top: 52px;
+  padding-bottom: 100px; /* 为底部导航栏和悬浮按钮留出空间 */
+  background-color: #f5f7fa;
+  overflow-y: auto;
+  transition: padding-top 0.3s ease;
+  
+  &.with-filter {
+    padding-top: 108px; /* header(52px) + filter panel(约56px) */
+  }
 }
 
 .customer-card {
   background-color: #fff;
-  border-radius: 8px;
+  border-radius: 12px;
   padding: 16px;
-  margin-bottom: 12px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  margin: 0 12px 12px 12px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  transition: all 0.3s ease;
+  border: 1px solid #f0f0f0;
+  
+  &:active {
+    transform: scale(0.98);
+    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
+  }
+  
+  &:last-child {
+    margin-bottom: 20px;
+  }
 }
 
 .customer-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
-  margin-bottom: 12px;
+  margin-bottom: 14px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f2f5;
 }
 
 .customer-info {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   flex: 1;
+  min-width: 0;
 }
 
 .customer-name {
   font-size: 16px;
   font-weight: 600;
-  color: #333;
+  color: #303133;
+  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .last-followup {
   font-size: 12px;
-  color: #999;
+  color: #909399;
+  line-height: 1.4;
 }
 
 .status-indicator {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
   flex-shrink: 0;
+  padding: 4px 10px;
+  background-color: #f5f7fa;
+  border-radius: 12px;
 }
 
 .status-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
+  flex-shrink: 0;
   
   &.status-following {
-    background-color: #1976d2;
+    background-color: #2885ff;
+    box-shadow: 0 0 4px rgba(40, 133, 255, 0.4);
   }
   
   &.status-pending {
-    background-color: #999;
+    background-color: #909399;
   }
 }
 
 .status-text {
   font-size: 12px;
-  color: #666;
+  color: #606266;
+  font-weight: 500;
 }
 
 /* 客户星级 */
 .customer-rating {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
+  gap: 10px;
+  margin-bottom: 14px;
+  padding: 8px 12px;
+  background-color: #fafbfc;
+  border-radius: 8px;
 }
 
 .rating-label {
-  font-size: 14px;
-  color: #666;
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
 }
 
 .stars {
   display: flex;
-  gap: 2px;
+  gap: 3px;
+  align-items: center;
 }
 
 .star {
   font-size: 16px;
-  color: #ddd;
+  color: #e4e7ed;
+  line-height: 1;
+  transition: color 0.2s ease;
   
   &.filled {
-    color: #999;
+    color: #ffc107;
+    text-shadow: 0 0 2px rgba(255, 193, 7, 0.3);
   }
 }
 
@@ -495,20 +585,26 @@ onMounted(() => {
 .assigned-user {
   display: flex;
   align-items: center;
-  gap: 8px;
-  margin-bottom: 12px;
+  gap: 10px;
+  margin-bottom: 14px;
+  padding: 8px 12px;
+  background-color: #fafbfc;
+  border-radius: 8px;
 }
 
 .user-avatar {
-  width: 24px;
-  height: 24px;
+  width: 28px;
+  height: 28px;
   border-radius: 50%;
-  background-color: #f0f0f0;
+  background-color: #e4e7ed;
+  border: 2px solid #fff;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
 .user-name {
-  font-size: 12px;
-  color: #999;
+  font-size: 13px;
+  color: #606266;
+  font-weight: 500;
 }
 
 /* 操作按钮 */
@@ -516,64 +612,86 @@ onMounted(() => {
   display: flex;
   justify-content: space-around;
   align-items: center;
-  padding-top: 12px;
-  border-top: 1px solid #f0f0f0;
+  padding-top: 14px;
+  border-top: 1px solid #f0f2f5;
+  gap: 8px;
 }
 
 .action-item {
   display: flex;
+  flex-direction: column;
   align-items: center;
   gap: 4px;
-  padding: 4px 8px;
+  padding: 8px 12px;
+  border-radius: 8px;
+  transition: all 0.3s ease;
   cursor: pointer;
+  flex: 1;
+  min-width: 0;
+  
+  &:active {
+    background-color: #f5f7fa;
+    transform: scale(0.95);
+  }
 }
 
 .action-icon {
-  font-size: 14px;
-  color: #666;
+  font-size: 18px;
+  color: #606266;
   font-weight: 500;
+  line-height: 1;
+  transition: all 0.3s ease;
   
   &.checked {
-    color: #1976d2;
+    color: #2885ff;
     font-weight: 600;
+    transform: scale(1.1);
   }
 }
 
 .action-text {
-  font-size: 14px;
-  color: #666;
+  font-size: 12px;
+  color: #606266;
+  font-weight: 500;
+  white-space: nowrap;
 }
 
 .action-arrow {
-  font-size: 18px;
-  color: #999;
+  font-size: 16px;
+  color: #909399;
   margin-left: 4px;
 }
 
 /* 空状态 */
 .empty-state {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 60px 0;
+  padding: 80px 20px;
+  min-height: 300px;
 }
 
 .empty-text {
   font-size: 14px;
-  color: #999;
+  color: #909399;
+  margin-top: 12px;
 }
 
 /* 加载状态 */
 .loading-state {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 40px 0;
+  padding: 60px 20px;
+  min-height: 200px;
 }
 
 .loading-text {
   font-size: 14px;
-  color: #999;
+  color: #909399;
+  margin-top: 12px;
 }
 </style>