修改卡片样式

pages/project/list/index.vue

@@ -114,58 +114,86 @@
           :key="project.id"
           @click="goToProjectDetail(project)"
         >
-          <!-- 状态标签和过期时间 -->
+          <!-- 卡片头部：状态标签、发布日期、操作菜单 -->
-          <view class="project-header">
+          <view class="card-header">
-            <view class="status-badge">
+            <view class="header-left">
-              <uv-tags
+              <view class="status-tag">{{ getStatusText(project.status) }}</view>
-                :text="getStatusText(project.status)"
+              <view class="urgent-tag" v-if="getUrgentStatus(project)">
-                :type="getStatusType(project.status)"
+                {{ getUrgentStatus(project) }}
-                size="mini"
+              </view>
-                :plain="false"
+            </view>
-              ></uv-tags>
+            <view class="header-right">
+              <text class="release-date">发布: {{ formatDate(project.createTime || project.releaseTime) }}</text>
+              <view class="action-menu" @click.stop="handleCardMenu(project)">
+                <text class="menu-icon">⋯</text>
               </view>
-            <view class="expire-time">
-              <text class="expire-label">过期时间:</text>
-              <text class="expire-value">{{ formatDate(project.expireTime) }}</text>
             </view>
           </view>
           
-          <!-- 项目信息 -->
+          <!-- 项目标题 -->
-          <view class="project-content">
+          <view class="card-title">{{ project.projectName }}</view>
-            <text class="project-name">{{ project.projectName }}</text>
-            <text class="project-description">{{ project.description }}</text>
           
-            <view class="project-meta">
+          <!-- 项目标签和描述 -->
-              <text class="meta-item">创建人: {{ project.createName }}</text>
+          <view class="card-tags-row">
-              <text class="meta-item">负责人: {{ getOwnerNames(project.memberList) }}</text>
+            <view class="tag-circle" :style="{ backgroundColor: getTagColor(project) }">
-              <view class="meta-row">
+              <text class="tag-text">{{ getTagText(project) }}</text>
-                <text class="meta-item">提交: {{ project.submitCount || 0 }}次</text>
+            </view>
-                <text class="meta-item">接收: {{ project.receivedCount || 0 }}次</text>
+            <text class="card-description" v-if="project.description">{{ project.description }}</text>
+          </view>
+          
+          <!-- 操作标签 -->
+          <view class="action-tags" v-if="project.tags && project.tags.length > 0">
+            <view 
+              class="action-tag" 
+              v-for="(tag, index) in project.tags" 
+              :key="index"
+            >
+              {{ tag }}
             </view>
           </view>
           
-            <!-- 逾期提示 -->
+          <!-- 日期和剩余时间 -->
-            <view class="overdue-tip" v-if="project.overdue">
+          <view class="card-footer">
-              <text class="overdue-text">⚠️ 已逾期</text>
+            <view class="date-info">
+              <text class="date-text">{{ formatDate(project.expireTime) }}</text>
+              <text class="time-icon">🕐</text>
+              <text class="time-text" :class="{ overdue: isOverdue(project) }">
+                {{ getTimeStatus(project) }}
+              </text>
+            </view>
+            
+            <!-- 团队成员 -->
+            <view class="member-info" v-if="project.memberList && project.memberList.length > 0">
+              <view class="member-avatars">
+                <view 
+                  class="member-avatar" 
+                  v-for="(member, index) in getDisplayMembers(project.memberList)" 
+                  :key="index"
+                  :style="{ backgroundColor: getAvatarColor(member, index) }"
+                >
+                  <text class="avatar-text">{{ getAvatarText(member) }}</text>
+                </view>
+              </view>
+              <text class="member-text">{{ formatMemberNames(project.memberList) }}</text>
             </view>
           </view>
         </view>
         
         <!-- 加载状态 -->
-        <view class="empty-state" v-if="loading">
+        <view class="empty-state" v-if="loading" style="grid-column: 1 / -1;">
           <text class="empty-text">加载中...</text>
         </view>
         
         <!-- 空状态 -->
-        <view class="empty-state" v-else-if="isEmpty">
+        <view class="empty-state" v-else-if="isEmpty" style="grid-column: 1 / -1;">
           <text class="empty-text">暂无项目数据</text>
         </view>
         
         <!-- 加载更多提示 -->
-        <view class="load-more-tip" v-if="!isEmpty && !loading && !noMore">
+        <view class="load-more-tip" v-if="!isEmpty && !loading && !noMore" style="grid-column: 1 / -1;">
           <text class="load-more-text">上拉加载更多</text>
         </view>
-        <view class="load-more-tip" v-if="!isEmpty && noMore">
+        <view class="load-more-tip" v-if="!isEmpty && noMore" style="grid-column: 1 / -1;">
           <text class="load-more-text">没有更多数据了</text>
         </view>
       </view>
@@ -348,6 +376,122 @@ const getOwnerNames = (memberList) => {
   return memberList.map(member => member.userName || member.name || '').filter(name => name).join('、');
 };
 
+// 获取紧急状态标签
+const getUrgentStatus = (project) => {
+  if (!project.expireTime) return '';
+  
+  const expireDate = new Date(project.expireTime);
+  const now = new Date();
+  const diffTime = expireDate - now;
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  
+  if (diffDays < 0) {
+    // 已逾期
+    return '';
+  } else if (diffDays <= 3) {
+    // 即将到期（3天内）
+    return '即将到期';
+  }
+  return '';
+};
+
+// 判断是否逾期
+const isOverdue = (project) => {
+  if (!project.expireTime) return false;
+  const expireDate = new Date(project.expireTime);
+  const now = new Date();
+  return expireDate < now;
+};
+
+// 获取时间状态文本（剩余天数或逾期天数）
+const getTimeStatus = (project) => {
+  if (!project.expireTime) return '';
+  
+  const expireDate = new Date(project.expireTime);
+  const now = new Date();
+  const diffTime = expireDate - now;
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+  
+  if (diffDays < 0) {
+    return `逾期${Math.abs(diffDays)}天`;
+  } else if (diffDays === 0) {
+    return '今天到期';
+  } else {
+    return `剩余${diffDays}天`;
+  }
+};
+
+// 获取标签颜色（根据项目创建人或负责人）
+const getTagColor = (project) => {
+  const colors = ['#87CEEB', '#FFB6C1', '#FFA500', '#98D8C8', '#DDA0DD'];
+  const name = project.createName || project.ownerName || '';
+  if (!name) return colors[0];
+  const index = name.charCodeAt(0) % colors.length;
+  return colors[index];
+};
+
+// 获取标签文本（取创建人名字的第一个字）
+const getTagText = (project) => {
+  const name = project.createName || project.ownerName || '';
+  if (!name) return '项';
+  return name.charAt(0);
+};
+
+// 获取显示成员（最多3个）
+const getDisplayMembers = (memberList) => {
+  if (!Array.isArray(memberList)) return [];
+  return memberList.slice(0, 3);
+};
+
+// 格式化成员名称
+const formatMemberNames = (memberList) => {
+  if (!Array.isArray(memberList) || memberList.length === 0) return '';
+  
+  const names = memberList.map(member => member.userName || member.name || '').filter(name => name);
+  
+  if (names.length <= 3) {
+    return names.join('');
+  } else {
+    const firstThree = names.slice(0, 3).join('');
+    return `${firstThree}等${names.length}人`;
+  }
+};
+
+// 获取头像颜色
+const getAvatarColor = (member, index) => {
+  const colors = ['#FFB6C1', '#87CEEB', '#DDA0DD', '#98D8C8', '#FFA500'];
+  return colors[index % colors.length];
+};
+
+// 获取头像文本（取名字的第一个字）
+const getAvatarText = (member) => {
+  const name = member.userName || member.name || '';
+  if (!name) return '?';
+  return name.charAt(0);
+};
+
+// 处理卡片菜单
+const handleCardMenu = (project) => {
+  uni.showActionSheet({
+    itemList: ['修改', '删除', '+ 新增任务', '√ 开始开发'],
+    success: (res) => {
+      if (res.tapIndex === 0) {
+        // 修改
+        uni.showToast({ title: '修改功能开发中', icon: 'none' });
+      } else if (res.tapIndex === 1) {
+        // 删除
+        uni.showToast({ title: '删除功能开发中', icon: 'none' });
+      } else if (res.tapIndex === 2) {
+        // 新增任务
+        uni.showToast({ title: '新增任务功能开发中', icon: 'none' });
+      } else if (res.tapIndex === 3) {
+        // 开始开发
+        uni.showToast({ title: '开始开发功能开发中', icon: 'none' });
+      }
+    }
+  });
+};
+
 // 处理状态标签点击
 const handleStatusTabClick = (value) => {
   activeStatusTab.value = value;
@@ -383,7 +527,7 @@ const handleReset = () => {
     overdue: ''
   };
   selectedMemberName.value = '';
-  activeStatusTab.value = '2';
+  activeStatusTab.value = 'IN_PROGRESS';
   handleSearch();
 };
 
@@ -563,90 +707,242 @@ onLoad(() => {
 
 .project-container {
   padding: 16px;
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .project-container {
+    grid-template-columns: repeat(2, 1fr);
     gap: 12px;
+    padding: 12px;
+  }
+}
+
+@media (max-width: 480px) {
+  .project-container {
+    grid-template-columns: 1fr;
+  }
 }
 
 .project-card {
   background: #fff;
-  border-radius: 12px;
+  border-radius: 8px;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 12px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  position: relative;
+  transition: all 0.3s ease;
+  cursor: pointer;
 }
 
-.project-header {
+.project-card:active {
+  transform: scale(0.98);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* 卡片头部 */
+.card-header {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
+  margin-bottom: 4px;
 }
 
-.status-badge {
+.header-left {
-  display: flex;
-  align-items: center;
-}
-
-.expire-time {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.expire-label {
-  font-size: 12px;
-  color: #999;
-}
-
-.expire-value {
-  font-size: 14px;
-  color: #333;
-}
-
-.project-content {
   display: flex;
   flex-direction: column;
+  gap: 6px;
+  flex: 1;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 4px 10px;
+  background: #E5E5E5;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #333;
+  width: fit-content;
+}
+
+.urgent-tag {
+  display: inline-block;
+  padding: 4px 10px;
+  background: #FF4444;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #fff;
+  width: fit-content;
+}
+
+.header-right {
+  display: flex;
+  align-items: center;
   gap: 8px;
 }
 
-.project-name {
+.release-date {
+  font-size: 12px;
+  color: #666;
+  white-space: nowrap;
+}
+
+.action-menu {
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.action-menu:active {
+  background-color: #f0f0f0;
+}
+
+.menu-icon {
+  font-size: 18px;
+  color: #666;
+  line-height: 1;
+  transform: rotate(90deg);
+}
+
+/* 项目标题 */
+.card-title {
   font-size: 16px;
   font-weight: 600;
   color: #333;
+  margin-top: 4px;
 }
 
-.project-description {
+/* 标签和描述行 */
+.card-tags-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 4px;
+}
+
+.tag-circle {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tag-text {
+  font-size: 14px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.card-description {
   font-size: 14px;
   color: #666;
-  line-height: 1.5;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.project-meta {
+/* 操作标签 */
+.action-tags {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}
+
+.action-tag {
+  padding: 4px 10px;
+  background: #E3F2FD;
+  border-radius: 4px;
+  font-size: 12px;
+  color: #1976D2;
+}
+
+/* 卡片底部 */
+.card-footer {
   display: flex;
   flex-direction: column;
-  gap: 6px;
+  gap: 8px;
   margin-top: 8px;
 }
 
-.meta-item {
+.date-info {
-  font-size: 12px;
-  color: #999;
-}
-
-.meta-row {
   display: flex;
-  gap: 16px;
+  align-items: center;
+  gap: 6px;
 }
 
-.overdue-tip {
+.date-text {
-  margin-top: 8px;
+  font-size: 14px;
+  color: #333;
 }
 
-.overdue-text {
+.time-icon {
+  font-size: 14px;
+}
+
+.time-text {
+  font-size: 14px;
+  color: #666;
+  
+  &.overdue {
+    color: #FF4444;
+  }
+}
+
+.member-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.member-avatars {
+  display: flex;
+  align-items: center;
+}
+
+.member-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid #fff;
+  margin-left: -8px;
+  
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.avatar-text {
+  font-size: 10px;
+  color: #fff;
+  font-weight: 500;
+}
+
+.member-text {
   font-size: 12px;
-  color: #ff4444;
+  color: #666;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .empty-state {