优化首页卡片

components/ContentDashboard.vue

@@ -42,6 +42,7 @@
     <view class="overdue-section" v-if="overdueTasks.length > 0">
       <view class="overdue-card task-card-base task-card-overdue" v-for="task in overdueTasks.slice(0, 1)" :key="task.id" @click="goToTaskDetail(task)">
         <view class="task-header">
+          <view style="display: flex;align-items: center">
             <view class="task-badge-wrapper">
               <uv-tags
                   :text="getStatusText('overdue')"
@@ -51,21 +52,25 @@
                   :custom-style="getTagCustomStyle('overdue')"
               ></uv-tags>
             </view>
+
             <view class="task-date-wrapper">
               <text class="task-date">{{ task.date }}</text>
             </view>
           </view>
+
+          <view class="task-action">
+            <uv-button type="error" size="small" @click.stop="handleOverdueTask(task)">立即处理</uv-button>
+          </view>
+        </view>
         <view class="task-content">
           <text class="task-project">所属项目: {{ task.project }}</text>
-          <text class="task-description">{{ task.description }}</text>
+          <text class="task-description">{{truncateText(task.description)}}</text>
           <view class="task-meta">
             <text class="task-owner">负责人: {{ task.owner }}</text>
             <text class="task-time">发布时间: {{ task.releaseTime }}</text>
           </view>
         </view>
-        <view class="task-action">
-          <uv-button type="error" size="small" @click.stop="handleOverdueTask(task)">立即处理</uv-button>
-        </view>
+
       </view>
     </view>
 
@@ -187,6 +192,16 @@ const customerStatus = ref([
   { label: '即将跟进', count: 0 }
 ]);
 
+const truncateText = (text, maxLength = 30, suffix = '...')=> {
+  if (!text || typeof text !== 'string') return ''
+
+  if (text.length <= maxLength) {
+    return text
+  }
+
+  return text.substring(0, maxLength) + suffix
+}
+
 // 加载状态
 const loading = ref(false);
 
@@ -586,6 +601,7 @@ const getTagCustomStyle = (status) => {
 .task-header {
   display: flex;
   align-items: center;
+  justify-content: space-between;
   gap: 12px;
   margin-bottom: 12px;
 }