From 25f57a4adb7a79f0e3fed1a1b6e8ff0b06e1702e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E8=AF=97=E6=95=8F?= <3130004661@qq.com>
Date: Tue, 12 Aug 2025 17:02:50 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E7=AD=9B=E9=80=89=E7=94=B1?=
 =?UTF-8?q?=E4=B8=A4=E4=B8=AA=E5=A2=9E=E5=8A=A0=E8=87=B3=E5=85=AB=E4=B8=AA?=
 =?UTF-8?q?=EF=BC=8C=E5=A2=9E=E5=8A=A0=E8=B4=A8=E9=87=8F=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=EF=BC=8C=E5=AE=89=E5=85=A8=E7=AE=A1=E7=90=86=EF=BC=8C=E7=8E=B0?=
 =?UTF-8?q?=E5=9C=BA=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../construction-personnel.vue                |  397 +-
 .../personnel-dispatch/index.vue              | 4848 ++++++++++++++---
 2 files changed, 4062 insertions(+), 1183 deletions(-)

diff --git a/src/views/project-management/personnel-dispatch/construction-personnel.vue b/src/views/project-management/personnel-dispatch/construction-personnel.vue
index 7deaaf4..c25741e 100644
--- a/src/views/project-management/personnel-dispatch/construction-personnel.vue
+++ b/src/views/project-management/personnel-dispatch/construction-personnel.vue
@@ -41,20 +41,6 @@
     <!-- 简洁搜索区域 -->
     <div class="search-section">
       <a-card :bordered="false" class="search-card">
-        <!-- 搜索状态提示 -->
-        <div v-if="hasActiveFilters" class="search-status">
-          <icon-info-circle style="color: #667eea; margin-right: 8px;" />
-          <span>当前应用了搜索筛选条件</span>
-          <a-button 
-            type="text" 
-            size="small" 
-            @click="handleReset"
-            style="margin-left: 8px; color: #667eea;"
-          >
-            清除所有筛选
-          </a-button>
-        </div>
-        
         <a-form layout="inline" :model="searchForm">
           <a-form-item label="姓名">
             <a-input 
@@ -63,7 +49,6 @@
               style="width: 180px"
               allow-clear
               @press-enter="handleSearch"
-              @clear="handleSearch"
             />
           </a-form-item>
           <a-form-item label="项目岗位">
@@ -72,7 +57,6 @@
               placeholder="请选择项目岗位" 
               style="width: 150px"
               allow-clear
-              @change="handleSearch"
             >
               <a-option 
                 v-for="option in ROLE_TYPE_OPTIONS" 
@@ -89,7 +73,6 @@
               placeholder="请选择状态" 
               style="width: 120px"
               allow-clear
-              @change="handleSearch"
             >
               <a-option 
                 v-for="option in STATUS_OPTIONS" 
@@ -102,12 +85,7 @@
           </a-form-item>
           <a-form-item>
             <a-space>
-              <a-button 
-                type="primary" 
-                @click="handleSearch"
-                :loading="loading"
-                :disabled="!hasActiveFilters"
-              >
+              <a-button type="primary" @click="handleSearch">
                 <template #icon><icon-search /></template>
                 搜索
               </a-button>
@@ -121,7 +99,6 @@
       </a-card>
     </div>
 
-
     <!-- 数据表格 -->
     <GiTable
       row-key="id"
@@ -135,23 +112,6 @@
       @page-size-change="onPageSizeChange"
       @refresh="loadData"
     >
-      <!-- 空状态显示 -->
-      <template #empty>
-        <div class="empty-state">
-          <icon-user-group style="font-size: 48px; color: #c9cdd4; margin-bottom: 16px;" />
-          <div class="empty-text">
-            <h3>{{ hasActiveFilters ? '没有找到匹配的团队成员' : '暂无团队成员数据' }}</h3>
-            <p v-if="hasActiveFilters">
-              请尝试调整搜索条件或
-              <a-link @click="handleReset">清除所有筛选</a-link>
-            </p>
-            <p v-else>
-              点击右上角的"新增成员"按钮来添加第一个团队成员
-            </p>
-          </div>
-        </div>
-      </template>
-      
       <!-- 项目岗位列 -->
       <template #roleType="{ record }">
         <span class="role-type-text">
@@ -161,9 +121,9 @@
 
       <!-- 状态列 -->
       <template #status="{ record }">
-        <span class="status-tag" :class="`status-${record.status || 'INACTIVE'}`">
+        <a-tag :color="getStatusColor(record.status || 'INACTIVE')">
           {{ getStatusText(record.status || 'INACTIVE') }}
-        </span>
+        </a-tag>
       </template>
 
 
@@ -380,7 +340,7 @@ const ROLE_TYPE_OPTIONS = [
 
 const STATUS_OPTIONS = [
   { label: '可用', value: 'ACTIVE' },
-  { label: '忙碌', value: 'SUSPENDED' },
+  { label: '忙碌', value: 'SUSPENDEN' },
   { label: '离线', value: 'INACTIVE' }
 ]
 
@@ -441,7 +401,7 @@ const statusForm = reactive<{
   id: string | number
   name: string
   currentStatus: string
-  newStatus: 'ACTIVE' | 'SUSPENDED' | 'INACTIVE'
+  newStatus: 'ACTIVE' | 'SUSPENDEN' | 'INACTIVE'
 }>({
   id: '',
   name: '',
@@ -463,80 +423,56 @@ const loadData = async () => {
   try {
     console.log('正在加载项目团队成员数据，项目ID:', projectId)
     
-    // 构建查询参数，字段名要与后端接口匹配
+    // 构建查询参数
     const queryParams: TeamMemberQuery = {
       projectId: projectId,
       page: pagination.current,
       pageSize: pagination.pageSize,
       name: searchForm.name || undefined,
-      position: searchForm.roleType || undefined, // 后端使用position字段
+      position: searchForm.roleType || undefined,
       status: searchForm.status || undefined
     }
     
-    console.log('查询参数:', queryParams)
-    
     const response = await getProjectTeamMembers(queryParams)
     
-    console.log('API响应数据:', response)
+    console.log('API响应数据:', response.data)
     
-    // 处理后端返回的数据
-    let mappedData: TeamMemberResp[] = []
-    let total = 0
+    // 确保response.data是数组
+    const rawData = Array.isArray(response.data) ? response.data : [response.data]
     
-    if (response.data) {
-      // 如果后端返回的是分页数据
-      if (response.data.list && Array.isArray(response.data.list)) {
-        mappedData = response.data.list.map((item: BackendTeamMemberResp) => {
-          return {
+    console.log('处理后的原始数据:', rawData)
+    
+    // 处理后端返回的数据，将后端字段映射到前端期望的字段
+    const mappedData = rawData.map((item: BackendTeamMemberResp) => {
+      const mappedItem: TeamMemberResp = {
         id: item.memberId,
         name: item.name || '',
         phone: item.phone || '',
         email: item.email || '',
-            roleType: item.roleType || item.position || '', // 优先使用roleType，fallback到position
-            status: (item.status === 'ACTIVE' ? 'ACTIVE' : item.status === 'SUSPENDED' ? 'SUSPENDED' : 'INACTIVE') as 'ACTIVE' | 'SUSPENDED' | 'INACTIVE',
+        roleType: item.roleType || '', // 映射项目岗位
+        status: (item.status === 'ACTIVE' ? 'ACTIVE' : item.status === 'SUSPENDEN' ? 'SUSPENDEN' : 'INACTIVE') as 'ACTIVE' | 'SUSPENDEN' | 'INACTIVE',
         joinDate: item.joinDate || '',
         remark: item.remark || '',
         avatar: item.userAvatar || ''
       }
-        })
-        total = response.data.total || mappedData.length
-      } 
-      // 如果后端直接返回数组
-      else if (Array.isArray(response.data)) {
-        mappedData = response.data.map((item: BackendTeamMemberResp) => {
-          return {
-            id: item.memberId,
-            name: item.name || '',
-            phone: item.phone || '',
-            email: item.email || '',
-            roleType: item.roleType || item.position || '',
-            status: (item.status === 'ACTIVE' ? 'ACTIVE' : item.status === 'SUSPENDED' ? 'SUSPENDED' : 'INACTIVE') as 'ACTIVE' | 'SUSPENDED' | 'INACTIVE',
-            joinDate: item.joinDate || '',
-            remark: item.remark || '',
-            avatar: item.userAvatar || ''
-          }
-        })
-        total = mappedData.length
-      }
-    }
+      console.log('映射后的数据项:', mappedItem)
+      return mappedItem
+    })
     
     dataList.value = mappedData
-    pagination.total = total
+    pagination.total = mappedData.length
     
     console.log('团队成员数据加载完成，显示数据:', dataList.value.length, '条，总计:', pagination.total, '条')
     
   } catch (error) {
     console.error('团队成员数据加载失败:', error)
     Message.error('团队成员数据加载失败')
-    dataList.value = []
-    pagination.total = 0
   } finally {
     loading.value = false
   }
 }
 
 const handleSearch = async () => {
-  console.log('执行搜索，搜索条件:', searchForm)
   pagination.current = 1
   await loadData()
 }
@@ -549,18 +485,15 @@ const handleReset = () => {
     status: ''
   })
   pagination.current = 1
-  // 重置后自动加载数据
   loadData()
 }
 
 const onPageChange = (page: number) => {
-  console.log('页码变化:', page)
   pagination.current = page
   loadData()
 }
 
 const onPageSizeChange = (pageSize: number) => {
-  console.log('每页大小变化:', pageSize)
   pagination.pageSize = pageSize
   pagination.current = 1
   loadData()
@@ -664,7 +597,7 @@ const openStatusModal = (record: TeamMemberResp) => {
 const saveStatus = async () => {
   try {
     await updateTeamMember(statusForm.id, { 
-      status: statusForm.newStatus as 'ACTIVE' | 'SUSPENDED' | 'INACTIVE' 
+      status: statusForm.newStatus as 'ACTIVE' | 'SUSPENDEN' | 'INACTIVE' 
     })
     Message.success('状态更新成功')
     statusModalVisible.value = false
@@ -783,7 +716,7 @@ const getRoleTypeText = (roleType: string) => {
 const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
     ACTIVE: 'success',
-    SUSPENDED: 'warning',
+    SUSPENDEN: 'warning',
     INACTIVE: 'danger'
   }
   return colorMap[status] || 'danger'
@@ -792,17 +725,12 @@ const getStatusColor = (status: string) => {
 const getStatusText = (status: string) => {
   const textMap: Record<string, string> = {
     ACTIVE: '可用',
-    SUSPENDED: '忙碌',
+    SUSPENDEN: '忙碌',
     INACTIVE: '离线'
   }
   return textMap[status] || '未知'
 }
 
-// 计算属性：判断是否有激活的搜索条件
-const hasActiveFilters = computed(() => {
-  return searchForm.name || searchForm.roleType || searchForm.status
-})
-
 // 生命周期
 onMounted(() => {
   console.log('团队成员管理页面加载，项目ID:', projectId)
@@ -1011,29 +939,6 @@ onMounted(() => {
       padding: 24px;
     }
     
-    // 搜索状态提示样式
-    .search-status {
-      display: flex;
-      align-items: center;
-      margin-bottom: 16px;
-      padding: 12px 16px;
-      background: rgba(102, 126, 234, 0.1);
-      border-radius: 8px;
-      border-left: 4px solid #667eea;
-      font-size: 14px;
-      color: #4e5969;
-      
-      .arco-btn {
-        padding: 2px 8px;
-        height: auto;
-        line-height: 1.4;
-        
-        &:hover {
-          background: rgba(102, 126, 234, 0.2);
-        }
-      }
-    }
-    
     :deep(.arco-form-item) {
       margin-bottom: 0;
       margin-right: 20px;
@@ -1064,7 +969,7 @@ onMounted(() => {
     }
     
     :deep(.arco-btn) {
-  border-radius: 8px;
+      border-radius: 8px;
       font-weight: 600;
       transition: all 0.3s ease;
       
@@ -1072,78 +977,87 @@ onMounted(() => {
         transform: translateY(-1px);
         box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
       }
-      
-      &:disabled {
-        opacity: 0.6;
-        cursor: not-allowed;
-        
-        &:hover {
-          transform: none;
-          box-shadow: none;
-        }
-      }
     }
   }
 }
 
-// 搜索结果统计样式
-.search-results-info {
-  margin-bottom: 16px;
+// 表格区域样式
+:deep(.gi-table) {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  margin-bottom: 24px;
+  overflow: hidden;
   
-  .results-card {
-    background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
-    border-radius: 12px;
-    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.1);
-    border: 1px solid rgba(102, 126, 234, 0.1);
+  .arco-table-container {
+    overflow-x: auto;
+    overflow-y: auto;
+  }
+  
+  .arco-table {
+    overflow: visible;
+  }
+  
+  .arco-table-body {
+    overflow-y: auto;
+  }
+  
+  // 表格头部样式
+  .arco-table-thead {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
     
-    :deep(.arco-card-body) {
-      padding: 16px 20px;
-    }
-    
-    .results-summary {
-      display: flex;
-      align-items: center;
-      font-size: 14px;
-      color: #4e5969;
+    .arco-table-th {
+      background: transparent !important;
+      border-bottom: 2px solid rgba(255, 255, 255, 0.2);
       
-      strong {
-        color: #667eea;
+      .arco-table-th-item-title {
+        color: white !important;
         font-weight: 600;
+        font-size: 14px;
+        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
       }
     }
   }
+  
+  // 表格行样式
+  .arco-table-tbody {
+    .arco-table-tr {
+      transition: all 0.3s ease;
+      
+      &:hover {
+        background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
+      }
+      
+      .arco-table-td {
+        border-bottom: 1px solid #f0f0f0;
+        padding: 16px 12px;
+        vertical-align: middle;
+      }
+    }
+    
+    // 斑马纹效果
+    .arco-table-tr:nth-child(even) {
+      background: #fafbfc;
+      
+      &:hover {
+        background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
+      }
+    }
+  }
+  
+  // 固定列样式
+  .arco-table-fixed-left,
+  .arco-table-fixed-right {
+    .arco-table-td {
+      background: white;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+  }
 }
 
-// 空状态样式
-.empty-state {
-  text-align: center;
-  padding: 60px 20px;
-  color: #c9cdd4;
-  
-  .empty-text {
-    h3 {
-      margin: 0 0 12px 0;
-      font-size: 18px;
-      font-weight: 600;
-      color: #4e5969;
-    }
-    
-    p {
-      margin: 8px 0;
-      font-size: 14px;
-      line-height: 1.6;
-      
-      .arco-link {
-        color: #667eea;
-        font-weight: 500;
-        
-        &:hover {
-          color: #4c5fd9;
-        }
-      }
-    }
-  }
-}
+
 
 .remark-content {
   max-width: 180px;
@@ -1196,58 +1110,11 @@ onMounted(() => {
   transition: all 0.3s ease;
   
   &:hover {
-    transform: scale(1.05);
+    transform: translateY(-2px);
     box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
   }
 }
 
-// 状态标签样式
-.status-tag {
-  display: inline-block;
-  padding: 6px 12px;
-  border-radius: 20px;
-  font-weight: 600;
-  font-size: 12px;
-  text-align: center;
-  min-width: 60px;
-  transition: all 0.3s ease;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-  
-  &:hover {
-    transform: scale(1.05);
-  }
-  
-  &.status-ACTIVE {
-    background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
-    color: white;
-    box-shadow: 0 2px 8px rgba(82, 196, 26, 0.3);
-    
-    &:hover {
-      box-shadow: 0 4px 16px rgba(82, 196, 26, 0.4);
-    }
-  }
-  
-  &.status-SUSPENDED {
-    background: linear-gradient(135deg, #faad14 0%, #ffc53d 100%);
-    color: white;
-    box-shadow: 0 2px 8px rgba(250, 173, 20, 0.3);
-    
-    &:hover {
-      box-shadow: 0 4px 16px rgba(250, 173, 20, 0.4);
-    }
-  }
-  
-  &.status-INACTIVE {
-    background: linear-gradient(135deg, #ff4d4f 0%, #ff7875 100%);
-    color: white;
-    box-shadow: 0 2px 8px rgba(255, 77, 79, 0.3);
-    
-    &:hover {
-      box-shadow: 0 4px 16px rgba(255, 77, 79, 0.4);
-    }
-  }
-}
-
 .member-form {
   .form-row {
     display: grid;
@@ -1440,80 +1307,4 @@ onMounted(() => {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 }
-
-// 表格区域样式
-:deep(.gi-table) {
-  background: white;
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
-  margin-bottom: 24px;
-  overflow: hidden;
-  
-  .arco-table-container {
-    overflow-x: auto;
-    overflow-y: auto;
-  }
-  
-  .arco-table {
-    overflow: visible;
-  }
-  
-  .arco-table-body {
-    overflow-y: auto;
-  }
-  
-  // 表格头部样式
-  .arco-table-thead {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    
-    .arco-table-th {
-      background: transparent !important;
-      border-bottom: 2px solid rgba(255, 255, 255, 0.2);
-      
-      .arco-table-th-item-title {
-        color: white !important;
-        font-weight: 600;
-        font-size: 14px;
-        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-  
-  // 表格行样式
-  .arco-table-tbody {
-    .arco-table-tr {
-      transition: all 0.3s ease;
-      
-      &:hover {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
-        transform: translateY(-1px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
-      }
-      
-      .arco-table-td {
-        border-bottom: 1px solid #f0f0f0;
-        padding: 16px 12px;
-        vertical-align: middle;
-      }
-    }
-    
-    // 斑马纹效果
-    .arco-table-tr:nth-child(even) {
-      background: #fafbfc;
-      
-      &:hover {
-        background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
-      }
-    }
-  }
-  
-  // 固定列样式
-  .arco-table-fixed-left,
-  .arco-table-fixed-right {
-    .arco-table-td {
-      background: white;
-      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    }
-  }
-}
 </style> 
\ No newline at end of file
diff --git a/src/views/project-management/personnel-dispatch/index.vue b/src/views/project-management/personnel-dispatch/index.vue
index dc86c4d..99bb392 100644
--- a/src/views/project-management/personnel-dispatch/index.vue
+++ b/src/views/project-management/personnel-dispatch/index.vue
@@ -26,133 +26,1293 @@
             刷新
           </a-button>
         </div>
-        <div class="header-stats">
-          <div class="stat-card" :class="{ 'loading': loading }">
-            <div class="stat-number">
-              <a-spin v-if="loading" size="small" />
-              <span v-else>{{ stats.totalProjectsCount }}</span>
-            </div>
-            <div class="stat-label">总项目数</div>
-          </div>
-          <div class="stat-card" :class="{ 'loading': loading }">
-            <div class="stat-number">
-              <a-spin v-if="loading" size="small" />
-              <span v-else>{{ stats.inProgressProjectCount }}</span>
-            </div>
-            <div class="stat-label">进行中</div>
-          </div>
-          <div class="stat-card" :class="{ 'loading': loading }">
-            <div class="stat-number">
-              <a-spin v-if="loading" size="small" />
-              <span v-else>{{ stats.pendingProjectCount }}</span>
-            </div>
-            <div class="stat-label">准备中</div>
-          </div>
-          <div class="stat-card" :class="{ 'loading': loading }">
-            <div class="stat-number">
-              <a-spin v-if="loading" size="small" />
-              <span v-else>{{ stats.completedProjectCount }}</span>
-            </div>
-            <div class="stat-label">已完成</div>
+        
+        <!-- 状态筛选器 -->
+        <div class="status-filter">
+          <div class="filter-buttons">
+            <a-button 
+              v-for="status in projectStatuses" 
+              :key="status.value ?? 'all'"
+              :type="selectedStatus === status.value ? 'primary' : 'outline'"
+              :class="`status-filter-btn ${status.class}`"
+              @click="filterByStatus(status.value)"
+              size="medium"
+            >
+              <template #icon>
+                <component :is="status.icon" />
+              </template>
+              {{ status.label }}
+              <span class="status-count">({{ getStatusCount(status.value) }})</span>
+            </a-button>
           </div>
         </div>
       </div>
     </div>
 
-
-
     <!-- 项目状态看板 -->
     <div class="project-kanban">
-      <!-- 准备中项目 -->
-      <div class="kanban-column">
+      <!-- 全部项目视图 - 单列布局 -->
+      <div v-if="selectedStatus === null" class="all-projects-view">
+        <div class="all-projects-header">
+          <h2>全部项目 ({{ totalProjects }})</h2>
+        </div>
+        <div class="all-projects-grid">
+          <!-- 未开工项目 -->
+          <div 
+            v-for="project in pendingProjects" 
+            :key="`pending-${project.id || Math.random()}`"
+            class="project-card-vertical pending"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status pending">未开工</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 筹备中项目 -->
+          <div 
+            v-for="project in preparingProjects" 
+            :key="`preparing-${project.id || Math.random()}`"
+            class="project-card-vertical preparing"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status preparing">筹备中</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 开工中项目 -->
+          <div 
+            v-for="project in inProgressProjects" 
+            :key="`inProgress-${project.id || Math.random()}`"
+            class="project-card-vertical inProgress"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status inProgress">开工中</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+
+          </div>
+
+          <!-- 暂停中项目 -->
+          <div 
+            v-for="project in suspendedProjects" 
+            :key="`suspended-${project.id || Math.random()}`"
+            class="project-card-vertical suspended"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status suspended">暂停中</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 已完工项目 -->
+          <div 
+            v-for="project in completedProjects" 
+            :key="`completed-${project.id || Math.random()}`"
+            class="project-card-vertical completed"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status completed">已完工</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 验收中项目 -->
+          <div 
+            v-for="project in acceptanceProjects" 
+            :key="`acceptance-${project.id || Math.random()}`"
+            class="project-card-vertical acceptance"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status acceptance">验收中</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>验收进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 回款中项目 -->
+          <div 
+            v-for="project in collectionProjects" 
+            :key="`collection-${project.id || Math.random()}`"
+            class="project-card-vertical collection"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status collection">回款中</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>回款进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- 已结算项目 -->
+          <div 
+            v-for="project in settledProjects" 
+            :key="`settled-${project.id || Math.random()}`"
+            class="project-card-vertical settled"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status settled">已结算</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>结算状态</span>
+                    <span class="progress-text">100%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="100"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 状态分类视图 - 原有的列式布局 -->
+      <div v-else class="kanban-grid">
+        <!-- 未开工项目 -->
+        <div class="kanban-column" v-if="shouldShowColumn(0)">
+          <div class="column-header pending">
+            <div class="column-title">
+              <icon-clock-circle class="status-icon" />
+              <h2>未开工</h2>
+              <span class="project-count">{{ pendingProjects.length }}</span>
+            </div>
+          </div>
+          <div class="column-content">
+            <div 
+              v-for="project in pendingProjects" 
+              :key="`pending-${project.id || Math.random()}`"
+              class="project-card-vertical pending"
+              @click="openProjectDetail(project)"
+            >
+              <!-- 第一部分：项目简略信息 -->
+              <div class="project-info-section">
+                <div class="project-header">
+                  <h3 class="project-name">{{ project.name }}</h3>
+                  <div class="project-status pending">未开工</div>
+                </div>
+                <div class="project-details">
+                  <div class="detail-item">
+                    <icon-wallet class="detail-icon" />
+                    <span>预算: {{ formatBudget(project.budget) }}</span>
+                  </div>
+                  <div class="detail-item">
+                    <icon-user class="detail-icon" />
+                    <span>负责人: {{ project.manager || '未指定' }}</span>
+                  </div>
+                  <div class="detail-item">
+                    <icon-user-group class="detail-icon" />
+                    <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                  </div>
+                  <div class="progress-section">
+                    <div class="progress-info">
+                      <span>项目进度</span>
+                      <span class="progress-text">{{ project.progress || 0 }}%</span>
+                    </div>
+                    <div class="progress-display">
+                      <CircularProgress
+                        :percent="project.progress || 0"
+                        :size="80"
+                        :stroke-width="8"
+                        :show-text="false"
+                        class="enhanced-progress"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 第二部分：质量管理 -->
+              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+                <div class="section-header">
+                  <icon-check-circle class="section-icon" />
+                  <h4>质量管理</h4>
+                </div>
+                <div class="section-content">
+                  <div class="metric-item">
+                    <span class="metric-label">质量等级</span>
+                    <span class="metric-value quality-value">A级</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">检查次数</span>
+                    <span class="metric-value">12次</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">合格率</span>
+                    <span class="metric-value">98.5%</span>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 第三部分：安全管理 -->
+              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+                <div class="section-header">
+                  <icon-send class="section-icon" />
+                  <h4>安全管理</h4>
+                </div>
+                <div class="section-content">
+                  <div class="metric-item">
+                    <span class="metric-label">安全等级</span>
+                    <span class="metric-value safety-value">优秀</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">培训完成</span>
+                    <span class="metric-value">100%</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">安全检查</span>
+                    <span class="metric-value">通过</span>
+                  </div>
+                </div>
+              </div>
+              
+              <!-- 第四部分：现场管理 -->
+              <div class="management-section site-section">
+                <div class="section-header">
+                  <icon-bold class="section-icon" />
+                  <h4>现场管理</h4>
+                </div>
+                <div class="section-content">
+                  <div class="metric-item">
+                    <span class="metric-label">在线人数</span>
+                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">设备状态</span>
+                    <span class="metric-value site-value">正常</span>
+                  </div>
+                  <div class="metric-item">
+                    <span class="metric-label">现场环境</span>
+                    <span class="metric-value">良好</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+      <!-- 筹备中项目 -->
+      <div class="kanban-column" v-if="shouldShowColumn(1)">
         <div class="column-header preparing">
           <div class="column-title">
             <icon-clock-circle class="status-icon" />
-            <h2>准备中</h2>
+            <h2>筹备中</h2>
             <span class="project-count">{{ preparingProjects.length }}</span>
           </div>
         </div>
         <div class="column-content">
           <div 
             v-for="project in preparingProjects" 
-            :key="project.id"
-            class="project-card preparing"
+            :key="`preparing-${project.id || Math.random()}`"
+            class="project-card-vertical preparing"
             @click="openProjectDetail(project)"
           >
-            <div class="project-header">
-              <h3 class="project-name">{{ project.name }}</h3>
-              <div class="project-status preparing">准备中</div>
-            </div>
-            <div class="project-info">
-              <div class="info-item">
-                <icon-money class="info-icon" />
-                <span>预算: {{ formatBudget(project.budget) }}</span>
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status preparing">筹备中</div>
               </div>
-              <div class="info-item">
-                <icon-user class="info-icon" />
-                <span>负责人: {{ project.manager }}</span>
-              </div>
-              <div class="info-item">
-                <icon-team class="info-icon" />
-                <span>团队: {{ project.teamSize }}人</span>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
-            <div class="project-footer">
-              <div class="progress-info">
-                <span>准备进度</span>
-                <span class="progress-text">{{ project.preparationProgress }}%</span>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
               </div>
-              <div class="progress-bar">
-                <div class="progress-fill" :style="{ width: `${project.preparationProgress}%` }"></div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- 已开工项目 -->
-      <div class="kanban-column">
-        <div class="column-header ongoing">
+      <!-- 开工中项目 -->
+      <div class="kanban-column" v-if="shouldShowColumn(2)">
+        <div class="column-header inProgress">
           <div class="column-title">
             <icon-play-circle class="status-icon" />
-            <h2>已开工</h2>
-            <span class="project-count">{{ ongoingProjects.length }}</span>
+            <h2>开工中</h2>
+            <span class="project-count">{{ inProgressProjects.length }}</span>
           </div>
         </div>
         <div class="column-content">
           <div 
-            v-for="project in ongoingProjects" 
-            :key="project.id"
-            class="project-card ongoing"
+            v-for="project in inProgressProjects" 
+            :key="`inProgress-${project.id || Math.random()}`"
+            class="project-card-vertical inProgress"
             @click="openProjectDetail(project)"
           >
-            <div class="project-header">
-              <h3 class="project-name">{{ project.name }}</h3>
-              <div class="project-status ongoing">进行中</div>
-            </div>
-            <div class="project-info">
-              <div class="info-item">
-                <icon-money class="info-icon" />
-                <span>预算: {{ formatBudget(project.budget) }}</span>
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status inProgress">开工中</div>
               </div>
-              <div class="info-item">
-                <icon-user class="info-icon" />
-                <span>负责人: {{ project.manager }}</span>
-              </div>
-              <div class="info-item">
-                <icon-team class="info-icon" />
-                <span>团队: {{ project.teamSize }}人</span>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
               </div>
             </div>
-            <div class="project-footer">
-              <div class="progress-info">
-                <span>项目进度</span>
-                <span class="progress-text">{{ project.progress }}%</span>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
               </div>
-              <div class="progress-bar">
-                <div class="progress-fill" :style="{ width: `${project.progress}%` }"></div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
               </div>
             </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+            
             <div class="project-alerts" v-if="project.alerts.length > 0">
               <div 
                 v-for="alert in project.alerts" 
@@ -168,153 +1328,766 @@
         </div>
       </div>
 
+      <!-- 暂停中项目 -->
+      <div class="kanban-column" v-if="shouldShowColumn(3)">
+        <div class="column-header suspended">
+          <div class="column-title">
+            <icon-pause-circle class="status-icon" />
+            <h2>暂停中</h2>
+            <span class="project-count">{{ suspendedProjects.length }}</span>
+          </div>
+        </div>
+        <div class="column-content">
+          <div 
+            v-for="project in suspendedProjects" 
+            :key="`suspended-${project.id || Math.random()}`"
+            class="project-card-vertical suspended"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status suspended">暂停中</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
+      <!-- 已完工项目 -->
+      <div class="kanban-column" v-if="shouldShowColumn(4)">
+        <div class="column-header completed">
+          <div class="column-title">
+            <icon-check-circle class="status-icon" />
+            <h2>已完工</h2>
+            <span class="project-count">{{ completedProjects.length }}</span>
+          </div>
+        </div>
+        <div class="column-content">
+          <div 
+            v-for="project in completedProjects" 
+            :key="`completed-${project.id || Math.random()}`"
+            class="project-card-vertical completed"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status completed">已完工</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>项目进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 验收中项目 -->
+      <div class="kanban-column" v-if="shouldShowColumn(5)">
+        <div class="column-header acceptance">
+          <div class="column-title">
+            <icon-search class="status-icon" />
+            <h2>验收中</h2>
+            <span class="project-count">{{ acceptanceProjects.length }}</span>
+          </div>
+        </div>
+        <div class="column-content">
+          <div 
+            v-for="project in acceptanceProjects" 
+            :key="`acceptance-${project.id || Math.random()}`"
+            class="project-card-vertical acceptance"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status acceptance">验收中</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>验收进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 回款中项目 -->
+      <div class="kanban-column" v-if="shouldShowColumn(6)">
+        <div class="column-header collection">
+          <div class="column-title">
+            <icon-user-group class="status-icon" />
+            <h2>回款中</h2>
+            <span class="project-count">{{ collectionProjects.length }}</span>
+          </div>
+        </div>
+        <div class="column-content">
+          <div 
+            v-for="project in collectionProjects" 
+            :key="`collection-${project.id || Math.random()}`"
+            class="project-card-vertical collection"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status collection">回款中</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>回款进度</span>
+                    <span class="progress-text">{{ project.progress || 0 }}%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="project.progress || 0"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 已结算项目 -->
+      <div class="kanban-column" v-if="shouldShowColumn(7)">
+        <div class="column-header settled">
+          <div class="column-title">
+            <icon-check-square class="status-icon" />
+            <h2>已结算</h2>
+            <span class="project-count">{{ settledProjects.length }}</span>
+          </div>
+        </div>
+        <div class="column-content">
+          <div 
+            v-for="project in settledProjects" 
+            :key="`settled-${project.id || Math.random()}`"
+            class="project-card-vertical settled"
+            @click="openProjectDetail(project)"
+          >
+            <!-- 第一部分：项目简略信息 -->
+            <div class="project-info-section">
+              <div class="project-header">
+                <h3 class="project-name">{{ project.name }}</h3>
+                <div class="project-status settled">已结算</div>
+              </div>
+              <div class="project-details">
+                <div class="detail-item">
+                  <icon-wallet class="detail-icon" />
+                  <span>预算: {{ formatBudget(project.budget) }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user class="detail-icon" />
+                  <span>负责人: {{ project.manager || '未指定' }}</span>
+                </div>
+                <div class="detail-item">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
+                <div class="progress-section">
+                  <div class="progress-info">
+                    <span>结算状态</span>
+                    <span class="progress-text">100%</span>
+                  </div>
+                  <div class="progress-display">
+                    <CircularProgress
+                      :percent="100"
+                      :size="80"
+                      :stroke-width="8"
+                      :show-text="false"
+                      class="enhanced-progress"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第二部分：质量管理 -->
+            <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
+              <div class="section-header">
+                <icon-check-circle class="section-icon" />
+                <h4>质量管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">质量等级</span>
+                  <span class="metric-value quality-value">A级</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">检查次数</span>
+                  <span class="metric-value">12次</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">合格率</span>
+                  <span class="metric-value">98.5%</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第三部分：安全管理 -->
+            <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
+              <div class="section-header">
+                <icon-send class="section-icon" />
+                <h4>安全管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">安全等级</span>
+                  <span class="metric-value safety-value">优秀</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">培训完成</span>
+                  <span class="metric-value">100%</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">安全检查</span>
+                  <span class="metric-value">通过</span>
+                </div>
+              </div>
+            </div>
+            
+            <!-- 第四部分：现场管理 -->
+            <div class="management-section site-section">
+              <div class="section-header">
+                <icon-bold class="section-icon" />
+                <h4>现场管理</h4>
+              </div>
+              <div class="section-content">
+                <div class="metric-item">
+                  <span class="metric-label">在线人数</span>
+                  <span class="metric-value">{{ project.teamSize || 0 }}人</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">设备状态</span>
+                  <span class="metric-value site-value">正常</span>
+                </div>
+                <div class="metric-item">
+                  <span class="metric-label">现场环境</span>
+                  <span class="metric-value">良好</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+      </div>
 
-    <!-- 项目明细弹窗 -->
+    <!-- 项目详情模态框 -->
     <a-modal
       v-model:visible="projectDetailVisible"
-      :title="currentProject?.name"
+      :title="selectedProject?.name || '项目详情'"
       width="800px"
-      :footer="false"
-      @cancel="closeProjectDetail"
+      :footer="null"
+      :destroy-on-close="true"
     >
-      <div v-if="currentProject" class="project-detail">
-        <!-- 项目基本信息 -->
-        <div class="detail-section">
-          <h3>项目基本信息</h3>
-          <div class="info-grid">
-            <div class="info-item">
-              <label>项目名称:</label>
-              <span>{{ currentProject.name }}</span>
-            </div>
-            <div class="info-item">
-              <label>项目状态:</label>
-              <span class="status-badge" :class="currentProject.status">{{ getStatusText(currentProject.status) }}</span>
-            </div>
-            <div class="info-item">
-              <label>项目预算:</label>
-              <span>{{ formatBudget(currentProject.budget) }}</span>
-            </div>
-            <div class="info-item">
-              <label>项目负责人:</label>
-              <span>{{ currentProject.manager }}</span>
-            </div>
-            <div class="info-item">
-              <label>团队人数:</label>
-              <span>{{ currentProject.teamSize }}人</span>
-            </div>
-            <div class="info-item">
-              <label>开始时间:</label>
-              <span>{{ formatDate(currentProject.startDate) }}</span>
-            </div>
-            <div class="info-item" v-if="currentProject.endDate">
-              <label>结束时间:</label>
-              <span>{{ formatDate(currentProject.endDate) }}</span>
-            </div>
-            <div class="info-item" v-if="currentProject.progress !== undefined">
-              <label>项目进度:</label>
-              <span>{{ currentProject.progress }}%</span>
-            </div>
+      <div v-if="selectedProject" class="project-detail">
+        <div class="detail-header">
+          <div class="project-status-badge" :class="getStatusClass(selectedProject.status)">
+            {{ getStatusText(selectedProject.status) }}
+          </div>
+          <div class="project-meta">
+            <span class="meta-item">
+              <icon-user class="meta-icon" />
+              负责人: {{ selectedProject.manager || '未指定' }}
+            </span>
+            <span class="meta-item">
+              <icon-user-group class="meta-icon" />
+              团队: {{ selectedProject.teamSize > 0 ? selectedProject.teamSize + '人' : '未设置' }}
+            </span>
+            <span class="meta-item">
+              <icon-user class="meta-icon" />
+              预算: {{ formatBudget(selectedProject.budget) }}
+            </span>
           </div>
         </div>
-
-        <!-- 异常状态 -->
-        <div class="detail-section" v-if="currentProject.alerts && currentProject.alerts.length > 0">
-          <h3>异常状态</h3>
-          <div class="alerts-list">
-            <div 
-              v-for="alert in currentProject.alerts" 
-              :key="alert.type"
-              class="alert-item"
-              :class="alert.type"
-            >
-              <icon-exclamation-circle />
-              <span>{{ alert.message }}</span>
-            </div>
-          </div>
-        </div>
-
-        <!-- 团队成员明细 -->
-        <div class="detail-section">
-          <div class="section-header team-members-header">
-            <div class="header-left">
-              <h3>团队成员明细</h3>
-              <span class="member-count" v-if="currentProject.teamMembers && currentProject.teamMembers.length > 0">
-                ({{ currentProject.teamMembers.length }}人)
-              </span>
-            </div>
-            <a-button size="small" @click="openPersonnelManagement" class="add-member-btn">
-              <template #icon><icon-user-group /></template>
-              添加成员
-            </a-button>
-          </div>
-          <div class="team-members">
-            <div 
-              v-for="(member, index) in currentProject.teamMembers" 
-              :key="member.id"
-              class="member-item"
-              :style="{ animationDelay: `${index * 0.1}s` }"
-              @click="editMemberPosition(member)"
-            >
-              <div class="member-avatar">
-                <icon-user />
+        
+        <div class="detail-content">
+          <div class="detail-section">
+            <h4>项目信息</h4>
+            <div class="info-grid">
+              <div class="info-item">
+                <label>项目名称:</label>
+                <span>{{ selectedProject.name }}</span>
               </div>
-              <div class="member-info">
-                <div class="member-name">{{ member.name || '未设置姓名' }}</div>
-                <div class="member-position">{{ member.position || '未设置岗位' }}</div>
-                <div class="member-details">
-                  <span class="member-status" :class="member.status">
-                    {{ member.status === 'ACTIVE' ? '在线' : '离线' }}
-                  </span>
-                  <span class="member-date">入职: {{ member.joinDate || '未设置' }}</span>
+              <div class="info-item">
+                <label>风电场:</label>
+                <span>{{ selectedProject.farmName || '未设置' }}</span>
+              </div>
+              <div class="info-item">
+                <label>项目规模:</label>
+                <span>{{ selectedProject.scale || '未设置' }}</span>
+              </div>
+              <div class="info-item">
+                <label>开始日期:</label>
+                <span>{{ selectedProject.startDate || '未设置' }}</span>
+              </div>
+              <div class="info-item">
+                <label>结束日期:</label>
+                <span>{{ selectedProject.endDate || '未设置' }}</span>
+              </div>
+              <div class="info-item">
+                <label>创建时间:</label>
+                <span>{{ selectedProject.createTime || '未设置' }}</span>
+              </div>
+            </div>
+          </div>
+          
+          <div class="detail-section">
+            <h4>进度信息</h4>
+            <div class="progress-section">
+              <div class="progress-item">
+                <label>准备进度:</label>
+                <div class="progress-display">
+                  <CircularProgress
+                    :percent="selectedProject.preparationProgress || 0"
+                    :size="40"
+                    :stroke-width="3"
+                    :show-text="false"
+                  />
+                </div>
+                <span class="progress-text">{{ selectedProject.preparationProgress || 0 }}%</span>
+              </div>
+              <div class="progress-item">
+                <label>项目进度:</label>
+                <div class="progress-display">
+                  <CircularProgress
+                    :percent="selectedProject.progress || 0"
+                    :size="40"
+                    :stroke-width="3"
+                    :show-text="false"
+                  />
+                </div>
+                <span class="progress-text">{{ selectedProject.progress || 0 }}%</span>
+              </div>
+            </div>
+          </div>
+          
+          <div class="detail-section" v-if="selectedProject.teamMembers && selectedProject.teamMembers.length > 0">
+            <h4>团队成员</h4>
+            <div class="team-members">
+              <div 
+                v-for="member in selectedProject.teamMembers" 
+                :key="member.memberId"
+                class="team-member"
+              >
+                <div class="member-avatar">
+                  <icon-user />
+                </div>
+                <div class="member-info">
+                  <div class="member-name">{{ member.userName }}</div>
+                  <div class="member-role">{{ member.roleTypeDesc }}</div>
+                </div>
+                <div class="member-status" :class="member.status.toLowerCase()">
+                  {{ member.status === 'ACTIVE' ? '在职' : '离职' }}
                 </div>
               </div>
-              <div class="member-actions">
-                <a-button size="mini" @click.stop="editMemberRemark(member)">
-                  <template #icon><icon-edit /></template>
-                  添加备注
-                </a-button>
-              </div>
-            </div>
-            <!-- 空状态提示 -->
-            <div v-if="!currentProject.teamMembers || currentProject.teamMembers.length === 0" class="empty-state">
-              <div class="empty-icon">
-                <icon-user-group />
-              </div>
-              <div class="empty-text">暂无团队成员</div>
-              <div class="empty-desc">点击"添加成员"按钮来添加项目团队成员</div>
             </div>
           </div>
         </div>
+      </div>
+    </a-modal>
 
-        <!-- 项目需求发布 -->
-        <div class="detail-section">
-          <div class="section-header">
-            <h3>项目需求</h3>
-            <a-button type="primary" size="small" @click="openProjectRequirement">
-              <template #icon><icon-plus /></template>
-              发布需求
-            </a-button>
+    <!-- 现场管理弹窗 -->
+    <a-modal
+      v-model:visible="siteManagementVisible"
+      title="现场管理"
+      width="500px"
+      :footer="false"
+      :destroy-on-close="true"
+    >
+      <div class="site-management-modal">
+        <div class="management-options">
+          <div class="option-item personnel-management" @click="openPersonnelManagement">
+            <div class="option-icon">
+              <icon-user-group />
+            </div>
+            <div class="option-content">
+              <h3>人员管理</h3>
+              <p>管理项目团队成员、岗位分配、考勤记录等</p>
+            </div>
+            <div class="option-arrow">
+              <icon-right />
+            </div>
           </div>
-          <div class="requirements-list">
-            <div 
-              v-for="requirement in currentProject.requirements" 
-              :key="requirement.id"
-              class="requirement-item"
-            >
-              <div class="requirement-info">
-                <div class="requirement-title">{{ requirement.title }}</div>
-                <div class="requirement-details">
-                  <span>需求类型: {{ requirement.type === 'personnel' ? '人员需求' : '设备需求' }}</span>
-                  <span v-if="requirement.type === 'personnel'">需求人数: {{ requirement.count }}人</span>
-                  <span v-if="requirement.type === 'equipment'">设备数量: {{ requirement.count }}台</span>
-                  <span>技能要求: {{ requirement.skills.join(', ') }}</span>
-                </div>
-              </div>
-              <div class="requirement-status" :class="requirement.status">
-                {{ getRequirementStatusText(requirement.status) }}
-              </div>
+          
+          <div class="option-item equipment-management" @click="openEquipmentManagement">
+            <div class="option-icon">
+              <icon-tool />
+            </div>
+            <div class="option-content">
+              <h3>设备管理</h3>
+              <p>管理项目设备、工具、材料等资源</p>
+            </div>
+            <div class="option-arrow">
+              <icon-right />
             </div>
           </div>
         </div>
@@ -326,6 +2099,7 @@
       v-model:visible="remarkEditVisible"
       title="添加备注"
       width="600px"
+      :footer="true"
       @ok="saveRemarkEdit"
       @cancel="cancelRemarkEdit"
     >
@@ -385,49 +2159,64 @@
 import { ref, reactive, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
 import { Message } from '@arco-design/web-vue'
-import { getProjectKanbanStats, getProjectKanbanData, getProjectDetail } from '@/apis/project/personnel-dispatch'
+import { getProjectKanbanData, getProjectDetail } from '@/apis/project/personnel-dispatch'
+import { 
+  IconDashboard, 
+  IconClockCircle, 
+  IconPlayCircle, 
+  IconPauseCircle, 
+  IconCheckCircle, 
+  IconSearch, 
+  IconUserGroup, 
+  IconCheckSquare,
+  IconRefresh,
+  IconUser,
+  IconExclamationCircle,
+  IconEdit,
+  IconPlus,
+  IconRight,
+  IconTool,
+  IconSend,
+  IconBold
+} from '@arco-design/web-vue/es/icon'
+import CircularProgress from '@/components/CircularProgress/index.vue'
 
 const router = useRouter()
 
 // 响应式数据
-const stats = reactive({
-  totalProjectsCount: '0',
-  pendingProjectCount: '0',
-  inProgressProjectCount: '0',
-  completedProjectCount: '0',
-  auditedProjectCount: '0',
-  acceptedProjectCount: '0',
-  totalTurbineCount: '0',
-  pendingTurbineCount: '0',
-  inProgressTurbineCount: '0',
-  completedTurbineCount: '0',
-  auditedTurbineCount: '0',
-  acceptedTurbineCount: '0',
-  totalTaskCount: '0',
-  pendingTaskCount: '0',
-  inProgressTaskCount: '0',
-  completedTaskCount: '0',
-  totalMemberCount: '0',
-  projectManagerCount: '0',
-  safetyOfficerCount: '0',
-  qualityOfficerCount: '0',
-  constructorCount: '0',
-  teamLeaderCount: '0'
-})
-
-// 加载状态
 const loading = ref(false)
 
-// 项目数据
+// 项目状态定义
+const projectStatuses = [
+  { value: null, label: '全部', class: 'all', icon: IconDashboard, color: '#6366f1' },
+  { value: 0, label: '未开工', class: 'pending', icon: IconClockCircle, color: '#868e96' },
+  { value: 1, label: '筹备中', class: 'preparing', icon: IconClockCircle, color: '#ff6b6b' },
+  { value: 2, label: '开工中', class: 'inProgress', icon: IconPlayCircle, color: '#51cf66' },
+  { value: 3, label: '暂停中', class: 'suspended', icon: IconPauseCircle, color: '#ffa000' },
+  { value: 4, label: '已完工', class: 'completed', icon: IconCheckCircle, color: '#52c41a' },
+  { value: 5, label: '验收中', class: 'acceptance', icon: IconSearch, color: '#1890ff' },
+  { value: 6, label: '回款中', class: 'collection', icon: IconUserGroup, color: '#722ed1' },
+  { value: 7, label: '已结算', class: 'settled', icon: IconCheckSquare, color: '#13c2c2' }
+]
+
+// 当前选中的状态
+const selectedStatus = ref<number | null>(null)
+
+// 项目数据 - 8种状态
+const pendingProjects = ref<any[]>([])
 const preparingProjects = ref<any[]>([])
-const ongoingProjects = ref<any[]>([])
-
-
+const inProgressProjects = ref<any[]>([])
+const suspendedProjects = ref<any[]>([])
+const completedProjects = ref<any[]>([])
+const acceptanceProjects = ref<any[]>([])
+const collectionProjects = ref<any[]>([])
+const settledProjects = ref<any[]>([])
 
 // 弹窗状态
 const projectDetailVisible = ref(false)
 const remarkEditVisible = ref(false)
 const requirementVisible = ref(false)
+const siteManagementVisible = ref(false)
 
 // 当前选中的项目
 const currentProject = ref<any>(null)
@@ -444,18 +2233,92 @@ const newRequirement = reactive({
 
 // 计算属性
 const totalProjects = computed(() => {
-  return preparingProjects.value.length + ongoingProjects.value.length
+  return pendingProjects.value.length + 
+         preparingProjects.value.length + 
+         inProgressProjects.value.length + 
+         suspendedProjects.value.length + 
+         completedProjects.value.length + 
+         acceptanceProjects.value.length + 
+         collectionProjects.value.length + 
+         settledProjects.value.length
+})
+
+// 筛选后的项目数量统计
+const filteredProjectCounts = computed(() => {
+  if (selectedStatus.value === null) {
+    // 显示全部时，返回所有状态的数量
+    return {
+      pending: pendingProjects.value.length,
+      preparing: preparingProjects.value.length,
+      inProgress: inProgressProjects.value.length,
+      suspended: suspendedProjects.value.length,
+      completed: completedProjects.value.length,
+      acceptance: acceptanceProjects.value.length,
+      collection: collectionProjects.value.length,
+      settled: settledProjects.value.length
+    }
+  } else {
+    // 显示特定状态时，只返回该状态的数量
+    const counts = {
+      pending: 0,
+      preparing: 0,
+      inProgress: 0,
+      suspended: 0,
+      completed: 0,
+      acceptance: 0,
+      collection: 0,
+      settled: 0
+    }
+    
+    switch (selectedStatus.value) {
+      case 0: counts.pending = pendingProjects.value.length; break
+      case 1: counts.preparing = preparingProjects.value.length; break
+      case 2: counts.inProgress = inProgressProjects.value.length; break
+      case 3: counts.suspended = suspendedProjects.value.length; break
+      case 4: counts.completed = completedProjects.value.length; break
+      case 5: counts.acceptance = acceptanceProjects.value.length; break
+      case 6: counts.collection = collectionProjects.value.length; break
+      case 7: counts.settled = settledProjects.value.length; break
+    }
+    
+    return counts
+  }
 })
 
 // 方法
 const mapProjectRespToProjectCard = (projectResp: any): any => {
   // 计算团队人数：根据constructorNames的人数 + 项目经理 + 安全员 + 质量员
-  let teamSize = 3 // 基础人数：项目经理、安全员、质量员
+  let teamSize = 0 // 基础人数：项目经理、安全员、质量员
+  
+  // 如果有项目经理，加1
+  if (projectResp.projectManagerName) {
+    teamSize += 1
+  }
+  // 如果有安全员，加1
+  if (projectResp.safetyOfficerName) {
+    teamSize += 1
+  }
+  // 如果有质量员，加1
+  if (projectResp.qualityOfficerName) {
+    teamSize += 1
+  }
+  
+  // 如果有施工人员，加上施工人员数量
   if (projectResp.constructorNames) {
-    const constructorCount = projectResp.constructorNames.split(',').length
+    const constructorCount = projectResp.constructorNames.split(',').filter(name => name.trim()).length
     teamSize += constructorCount
   }
   
+  // 如果有施工组长，加1
+  if (projectResp.constructionTeamLeaderName) {
+    teamSize += 1
+  }
+  
+  // 如果计算出的团队人数为0，使用后端返回的teamSize
+  if (teamSize === 0) {
+    teamSize = projectResp.teamSize || 0
+  }
+  
   // 处理团队成员数据 - 使用后端返回的真实数据
   const teamMembers = projectResp.teamMembers ? projectResp.teamMembers.map((member: any) => {
     console.log('处理团队成员数据:', member) // 添加调试日志
@@ -480,17 +2343,14 @@ const mapProjectRespToProjectCard = (projectResp: any): any => {
   }) : []
   
   // 根据后端返回的ProjectResp格式映射到前端ProjectCard格式
-  // 确保状态比较时类型一致
-  const status = typeof projectResp.status === 'string' ? parseInt(projectResp.status) : projectResp.status
-  
   const mappedProject = {
     id: projectResp.projectId || projectResp.id,
     name: projectResp.projectName || projectResp.name,
-    status: status === 0 ? 'preparing' : status === 1 ? 'ongoing' : 'pending',
-    budget: projectResp.budget || 500000, // 使用后端返回的预算数据
+    status: projectResp.status,
+    budget: projectResp.budget || 0, // 使用后端返回的预算数据
     manager: projectResp.projectManagerName || projectResp.manager || '未指定',
-    teamSize: projectResp.teamSize || teamSize, // 使用后端返回的团队人数
-    preparationProgress: status === 0 ? 50 : 100, // 准备中项目进度50%，其他100%
+    teamSize: teamSize, // 使用计算出的团队人数
+    preparationProgress: projectResp.status === 0 || projectResp.status === 1 ? 50 : 100, // 未开工和筹备中项目进度50%，其他100%
     progress: projectResp.progressPercentage || 0,
     startDate: projectResp.startDate,
     endDate: projectResp.endDate,
@@ -503,26 +2363,134 @@ const mapProjectRespToProjectCard = (projectResp: any): any => {
   return mappedProject
 }
 
-const loadStats = async () => {
-  loading.value = true
-  try {
-    const response = await getProjectKanbanStats()
-    if (response.data) {
-      Object.assign(stats, response.data)
+// 获取状态类名
+const getStatusClass = (status: number | string) => {
+  const statusMap: { [key: string]: string } = {
+    0: 'pending',
+    1: 'preparing', 
+    2: 'inProgress',
+    3: 'suspended',
+    4: 'completed',
+    5: 'acceptance',
+    6: 'collection',
+    7: 'settled',
+    'pending': 'pending',
+    'preparing': 'preparing',
+    'inProgress': 'inProgress',
+    'suspended': 'suspended',
+    'completed': 'completed',
+    'acceptance': 'acceptance',
+    'collection': 'collection',
+    'settled': 'settled'
+  }
+  return statusMap[status] || 'pending'
+}
+
+// 获取状态文本
+const getStatusText = (status: number | string) => {
+  const statusMap: { [key: string]: string } = {
+    0: '未开工',
+    1: '筹备中',
+    2: '开工中',
+    3: '暂停中',
+    4: '已完工',
+    5: '验收中',
+    6: '回款中',
+    7: '已结算',
+    'pending': '未开工',
+    'preparing': '筹备中',
+    'inProgress': '开工中',
+    'suspended': '暂停中',
+    'completed': '已完工',
+    'acceptance': '验收中',
+    'collection': '回款中',
+    'settled': '已结算'
+  }
+  return statusMap[status] || '未知状态'
+}
+
+// 格式化预算
+const formatBudget = (budget: number | null | undefined) => {
+  if (!budget || budget === 0) {
+    return '未设置'
+  }
+  if (budget >= 10000) {
+    return `${(budget / 10000).toFixed(1)}万`
+  }
+  return budget.toString()
+}
+
+// 格式化日期
+const formatDate = (date: string | null | undefined) => {
+  if (!date) return '未设置'
+  return new Date(date).toLocaleDateString('zh-CN')
+}
+
+
+
+// 状态筛选方法
+const filterByStatus = (status: number | null) => {
+  selectedStatus.value = status
+  console.log('筛选状态:', status === null ? '全部' : projectStatuses.find(s => s.value === status)?.label)
+  console.log('当前筛选状态:', selectedStatus.value)
+  console.log('应该显示的列:')
+  console.log('未开工 (0):', shouldShowColumn(0))
+  console.log('筹备中 (1):', shouldShowColumn(1))
+  console.log('开工中 (2):', shouldShowColumn(2))
+  console.log('暂停中 (3):', shouldShowColumn(3))
+  console.log('已完工 (4):', shouldShowColumn(4))
+  console.log('验收中 (5):', shouldShowColumn(5))
+  console.log('回款中 (6):', shouldShowColumn(6))
+  console.log('已结算 (7):', shouldShowColumn(7))
+}
+
+// 判断是否应该显示某列
+const shouldShowColumn = (status: number) => {
+  if (selectedStatus.value === null) return true // 显示全部
+  return selectedStatus.value === status
+}
+
+// 获取某状态的项目数量
+const getStatusCount = (status: number | null) => {
+  if (status === null) return totalProjects.value
+  
+  // 如果当前有筛选状态，返回筛选后的数量
+  if (selectedStatus.value !== null) {
+    if (selectedStatus.value === status) {
+      // 当前选中的状态，返回该状态的项目数量
+      switch (status) {
+        case 0: return pendingProjects.value.length
+        case 1: return preparingProjects.value.length
+        case 2: return inProgressProjects.value.length
+        case 3: return suspendedProjects.value.length
+        case 4: return completedProjects.value.length
+        case 5: return acceptanceProjects.value.length
+        case 6: return collectionProjects.value.length
+        case 7: return settledProjects.value.length
+        default: return 0
+      }
+    } else {
+      // 其他状态，返回0（因为只显示选中状态的项目）
+      return 0
     }
-  } catch (error) {
-    console.error('获取项目看板统计数据失败:', error)
-    Message.error('获取统计数据失败，请稍后重试')
-    // 如果API调用失败，使用本地数据作为后备
-    stats.totalProjectsCount = totalProjects.value.toString()
-    stats.inProgressProjectCount = ongoingProjects.value.length.toString()
-    stats.pendingProjectCount = '0'
-    stats.completedProjectCount = '0'
-  } finally {
-    loading.value = false
+  }
+  
+  // 没有筛选时，返回所有状态的数量
+  switch (status) {
+    case 0: return pendingProjects.value.length
+    case 1: return preparingProjects.value.length
+    case 2: return inProgressProjects.value.length
+    case 3: return suspendedProjects.value.length
+    case 4: return completedProjects.value.length
+    case 5: return acceptanceProjects.value.length
+    case 6: return collectionProjects.value.length
+    case 7: return settledProjects.value.length
+    default: return 0
   }
 }
 
+
+
 const loadKanbanData = async () => {
   loading.value = true
   try {
@@ -531,57 +2499,57 @@ const loadKanbanData = async () => {
     
     if (response.data) {
       // 清空现有数据
+      pendingProjects.value = []
       preparingProjects.value = []
-      ongoingProjects.value = []
+      inProgressProjects.value = []
+      suspendedProjects.value = []
+      completedProjects.value = []
+      acceptanceProjects.value = []
+      collectionProjects.value = []
+      settledProjects.value = []
       
-      // 处理所有项目数据，根据status分类
-      const allProjects = [
-        ...(response.data.preparingProjects || []),
-        ...(response.data.ongoingProjects || []),
-        ...(response.data.inProgressProjects || []), // 添加inProgressProjects
-        ...(response.data.pendingProjects || [])
-      ]
+      // 直接使用后端返回的分类数据
+      if (response.data.pendingProjects) {
+        pendingProjects.value = response.data.pendingProjects.map(mapProjectRespToProjectCard)
+      }
+      if (response.data.preparingProjects) {
+        preparingProjects.value = response.data.preparingProjects.map(mapProjectRespToProjectCard)
+      }
+      if (response.data.inProgressProjects) {
+        inProgressProjects.value = response.data.inProgressProjects.map(mapProjectRespToProjectCard)
+      }
+      if (response.data.suspendedProjects) {
+        suspendedProjects.value = response.data.suspendedProjects.map(mapProjectRespToProjectCard)
+      }
+      if (response.data.completedProjects) {
+        completedProjects.value = response.data.completedProjects.map(mapProjectRespToProjectCard)
+      }
+      if (response.data.acceptanceProjects) {
+        acceptanceProjects.value = response.data.acceptanceProjects.map(mapProjectRespToProjectCard)
+      }
+      if (response.data.collectionProjects) {
+        collectionProjects.value = response.data.collectionProjects.map(mapProjectRespToProjectCard)
+      }
+      if (response.data.settledProjects) {
+        settledProjects.value = response.data.settledProjects.map(mapProjectRespToProjectCard)
+      }
       
-      console.log('后端返回的所有项目数据:', allProjects)
-      console.log('后端返回的preparingProjects:', response.data.preparingProjects)
-      console.log('后端返回的ongoingProjects:', response.data.ongoingProjects)
-      console.log('后端返回的inProgressProjects:', response.data.inProgressProjects)
-      console.log('后端返回的pendingProjects:', response.data.pendingProjects)
-      
-      // 根据项目状态分类
-      allProjects.forEach(project => {
-        console.log('处理项目:', project.projectName || project.name)
-        console.log('项目团队成员:', project.teamMembers)
-        console.log('项目状态:', project.status, typeof project.status)
-        
-        const mappedProject = mapProjectRespToProjectCard(project)
-        console.log('映射后的项目:', mappedProject.name)
-        console.log('映射后的团队成员:', mappedProject.teamMembers)
-        
-        // 确保状态比较时类型一致，将字符串转换为数字进行比较
-        const status = typeof project.status === 'string' ? parseInt(project.status) : project.status
-        
-        if (status === 0) {
-          // status: 0 表示准备中
-          console.log('添加到准备中项目:', mappedProject.name)
-          preparingProjects.value.push(mappedProject)
-        } else if (status === 1) {
-          // status: 1 表示进行中
-          console.log('添加到进行中项目:', mappedProject.name)
-          ongoingProjects.value.push(mappedProject)
-        }
-        // status: 其他值表示未开工，我们不需要显示
-      })
-      
-      console.log('分类后的准备中项目:', preparingProjects.value)
-      console.log('分类后的进行中项目:', ongoingProjects.value)
+      console.log('分类后的项目数量:')
+      console.log('未开工:', pendingProjects.value.length)
+      console.log('筹备中:', preparingProjects.value.length)
+      console.log('开工中:', inProgressProjects.value.length)
+      console.log('暂停中:', suspendedProjects.value.length)
+      console.log('已完工:', completedProjects.value.length)
+      console.log('验收中:', acceptanceProjects.value.length)
+      console.log('回款中:', collectionProjects.value.length)
+      console.log('已结算:', settledProjects.value.length)
     }
   } catch (error) {
     console.error('获取项目看板数据失败:', error)
     Message.error('获取看板数据失败，请稍后重试')
     
     // 如果API调用失败，使用模拟数据作为后备
-    const mockPreparingProjects = [
+    const mockProjects = [
       {
         projectId: 'mock-001',
         projectName: '三峡能源阿城万兴风电场防雷通道检测项目',
@@ -591,53 +2559,57 @@ const loadKanbanData = async () => {
         startDate: '2025-07-01',
         endDate: '2025-07-31',
         progressPercentage: 0
-      }
-    ]
-    
-    const mockOngoingProjects = [
+      },
       {
-        projectId: '0b71a1259c49918c6595c9720ad1db5d',
+        projectId: 'mock-002',
         projectName: '三峡能源辽宁分公司庄河海上风电场防雷通道检测项目',
         projectManagerName: '张大川,董冰',
         constructorNames: '牟晓松,cs,谢小兵,高阳,韩凌柱,朱贤进',
         turbineCount: '0',
-        status: 1,
+        status: 2,
         startDate: '2025-06-05',
-        endDate: null,
-        progressPercentage: 0
+        endDate: undefined,
+        progressPercentage: 45
       }
     ]
     
-    preparingProjects.value = mockPreparingProjects.map(mapProjectRespToProjectCard)
-    ongoingProjects.value = mockOngoingProjects.map(mapProjectRespToProjectCard)
+    // 清空现有数据
+    pendingProjects.value = []
+    preparingProjects.value = []
+    inProgressProjects.value = []
+    suspendedProjects.value = []
+    completedProjects.value = []
+    acceptanceProjects.value = []
+    collectionProjects.value = []
+    settledProjects.value = []
+    
+    // 分配模拟数据
+    mockProjects.forEach(project => {
+      const mappedProject = mapProjectRespToProjectCard(project)
+      const status = project.status
+      
+      switch (status) {
+        case 0:
+          pendingProjects.value.push(mappedProject)
+          break
+        case 2:
+          inProgressProjects.value.push(mappedProject)
+          break
+        default:
+          pendingProjects.value.push(mappedProject)
+          break
+      }
+    })
   } finally {
     loading.value = false
   }
 }
 
 const refreshData = async () => {
-  await Promise.all([
-    loadStats(),
-    loadKanbanData()
-  ])
+  await loadKanbanData()
 }
 
-const formatBudget = (budget: number) => {
-  return `¥${(budget / 10000).toFixed(0)}万`
-}
 
-const formatDate = (date: string) => {
-  return new Date(date).toLocaleDateString('zh-CN')
-}
-
-const getStatusText = (status: string) => {
-  const statusMap = {
-    preparing: '准备中',
-    ongoing: '进行中',
-    pending: '未开工'
-  }
-  return statusMap[status] || status
-}
 
 const getRequirementStatusText = (status: string) => {
   const statusMap = {
@@ -648,51 +2620,40 @@ const getRequirementStatusText = (status: string) => {
   return statusMap[status] || status
 }
 
-const openProjectDetail = async (project: any) => {
-  try {
-    loading.value = true
-    console.log('正在获取项目详情，项目ID:', project.id)
-    console.log('传入的项目数据:', project)
-    
-    // 首先检查传入的项目数据是否已经包含团队成员信息
-    if (project.teamMembers && project.teamMembers.length > 0) {
-      console.log('项目数据已包含团队成员信息，直接使用')
-      console.log('团队成员数据:', project.teamMembers)
-      currentProject.value = project
-      projectDetailVisible.value = true
-      return
-    }
-    
-    // 如果项目数据中没有团队成员信息，则调用API获取
-    const response = await getProjectDetail(project.id)
-    
-    if (response.data) {
-      // 使用映射函数处理后端数据
-      console.log('API返回的原始数据:', response.data)
-      currentProject.value = mapProjectRespToProjectCard(response.data)
-      console.log('映射后的项目数据:', currentProject.value)
-      projectDetailVisible.value = true
-    } else {
-      // 如果API没有返回数据，使用传入的项目数据作为后备
-      currentProject.value = project
-      projectDetailVisible.value = true
-    }
-  } catch (error) {
-    console.error('获取项目详情失败:', error)
-    Message.error('获取项目详情失败，请稍后重试')
-    // 如果API调用失败，使用传入的项目数据作为后备
-    currentProject.value = project
-    projectDetailVisible.value = true
-  } finally {
-    loading.value = false
-  }
+// 项目详情相关
+const selectedProject = ref<any | null>(null)
+
+// 打开项目详情
+const openProjectDetail = (project: any) => {
+  selectedProject.value = project
+  projectDetailVisible.value = true
 }
 
+// 关闭项目详情
 const closeProjectDetail = () => {
   projectDetailVisible.value = false
-  currentProject.value = null
+  selectedProject.value = null
 }
 
+// 质量管理
+const openQualityManagement = (project: any) => {
+  currentProject.value = project
+  Message.info('质量管理功能开发中...')
+}
+
+// 安全管理
+const openSafetyManagement = (project: any) => {
+  currentProject.value = project
+  Message.info('安全管理功能开发中...')
+}
+
+// 现场管理
+const openSiteManagement = (project: any) => {
+  currentProject.value = project
+  siteManagementVisible.value = true
+}
+
+// 人员管理
 const openPersonnelManagement = () => {
   if (currentProject.value && currentProject.value.id) {
     router.push({
@@ -704,6 +2665,15 @@ const openPersonnelManagement = () => {
   }
 }
 
+// 设备管理
+const openEquipmentManagement = () => {
+  if (currentProject.value && currentProject.value.id) {
+    Message.info('设备管理功能开发中...')
+  } else {
+    Message.error('项目信息不完整，无法进入设备管理')
+  }
+}
+
 const editMemberPosition = (member: any) => {
   // 这里可以实现编辑成员岗位的逻辑
   console.log('编辑成员岗位:', member)
@@ -771,13 +2741,16 @@ const cancelProjectRequirement = () => {
 // 生命周期
 onMounted(async () => {
   console.log('页面开始加载数据...')
-  await Promise.all([
-    loadStats(),
-    loadKanbanData()
-  ])
+  await loadKanbanData()
   console.log('数据加载完成，当前状态:')
-  console.log('准备中项目数量:', preparingProjects.value.length)
-  console.log('进行中项目数量:', ongoingProjects.value.length)
+  console.log('未开工项目数量:', pendingProjects.value.length)
+  console.log('筹备中项目数量:', preparingProjects.value.length)
+  console.log('开工中项目数量:', inProgressProjects.value.length)
+  console.log('暂停中项目数量:', suspendedProjects.value.length)
+  console.log('已完工项目数量:', completedProjects.value.length)
+  console.log('验收中项目数量:', acceptanceProjects.value.length)
+  console.log('回款中项目数量:', collectionProjects.value.length)
+  console.log('已结算项目数量:', settledProjects.value.length)
 })
 </script>
 
@@ -785,134 +2758,336 @@ onMounted(async () => {
 .personnel-dispatch-header {
   background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   color: white;
-  padding: 24px;
-  border-radius: 12px;
-  margin-bottom: 24px;
-  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
+  padding: 32px;
+  border-radius: 16px;
+  margin-bottom: 32px;
+  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);
 
   .header-content {
     display: flex;
-    justify-content: space-between;
+    flex-direction: column;
     align-items: center;
+    gap: 24px;
   }
 
   .header-title {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 16px;
 
     .title-icon {
-      font-size: 32px;
-      color: rgba(255, 255, 255, 0.9);
+      font-size: 36px;
+      color: rgba(255, 255, 255, 0.95);
     }
 
     h1 {
       margin: 0;
-      font-size: 28px;
-      font-weight: 600;
+      font-size: 32px;
+      font-weight: 700;
       color: white;
+      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
     }
 
     .refresh-btn {
-      color: rgba(255, 255, 255, 0.8);
-      border: 1px solid rgba(255, 255, 255, 0.2);
-      background: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.9);
+      border: 2px solid rgba(255, 255, 255, 0.3);
+      background: rgba(255, 255, 255, 0.15);
+      border-radius: 12px;
+      padding: 8px 16px;
+      height: auto;
       
       &:hover {
         color: white;
-        background: rgba(255, 255, 255, 0.2);
-        border-color: rgba(255, 255, 255, 0.3);
+        background: rgba(255, 255, 255, 0.25);
+        border-color: rgba(255, 255, 255, 0.4);
+        transform: translateY(-2px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
       }
     }
   }
 
-  .header-stats {
-    display: flex;
-    gap: 24px;
-
-    .stat-card {
-      text-align: center;
-      padding: 16px 24px;
-      background: rgba(255, 255, 255, 0.1);
-      border-radius: 8px;
-      backdrop-filter: blur(10px);
-      transition: all 0.3s ease;
-
-      &.loading {
-        opacity: 0.7;
-        background: rgba(255, 255, 255, 0.05);
-      }
-
-      .stat-number {
-        font-size: 32px;
-        font-weight: 700;
-        margin-bottom: 4px;
+  .status-filter {
+    width: 100%;
+    
+    .filter-buttons {
         display: flex;
-        align-items: center;
+        flex-wrap: nowrap;
+        gap: 12px;
         justify-content: center;
-        gap: 8px;
-        min-height: 32px;
-      }
-
-      .stat-label {
-        font-size: 14px;
-        opacity: 0.9;
+        overflow-x: auto;
+        padding: 8px 0;
+        
+        /* 自定义滚动条样式 */
+        &::-webkit-scrollbar {
+          height: 6px;
+        }
+        
+        &::-webkit-scrollbar-track {
+          background: rgba(255, 255, 255, 0.1);
+          border-radius: 3px;
+        }
+        
+        &::-webkit-scrollbar-thumb {
+          background: rgba(255, 255, 255, 0.3);
+          border-radius: 3px;
+          
+          &:hover {
+            background: rgba(255, 255, 255, 0.5);
+          }
+        }
+      
+      .status-filter-btn {
+        border-radius: 24px;
+        padding: 10px 20px;
+        font-weight: 600;
+        font-size: 13px;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        border: 2px solid transparent;
+        height: auto;
+        min-width: 110px;
+        flex-shrink: 0;
+        
+        &:hover {
+          transform: translateY(-3px);
+          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
+        }
+        
+        &.all {
+          background: linear-gradient(135deg, #6366f1, #8b5cf6);
+          border-color: #6366f1;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #5b21b6, #7c3aed);
+            border-color: #5b21b6;
+          }
+        }
+        
+        &.pending {
+          background: linear-gradient(135deg, #868e96, #6c757d);
+          border-color: #868e96;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #6c757d, #495057);
+            border-color: #6c757d;
+          }
+        }
+        
+        &.preparing {
+          background: linear-gradient(135deg, #ff6b6b, #ee5a52);
+          border-color: #ff6b6b;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #ee5a52, #d63031);
+            border-color: #ee5a52;
+          }
+        }
+        
+        &.inProgress {
+          background: linear-gradient(135deg, #51cf66, #40c057);
+          border-color: #51cf66;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #40c057, #37b24d);
+            border-color: #40c057;
+          }
+        }
+        
+        &.suspended {
+          background: linear-gradient(135deg, #ffa000, #ff8f00);
+          border-color: #ffa000;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #ff8f00, #ff6f00);
+            border-color: #ff8f00;
+          }
+        }
+        
+        &.completed {
+          background: linear-gradient(135deg, #52c41a, #389e0d);
+          border-color: #52c41a;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #389e0d, #2f7a0a);
+            border-color: #389e0d;
+          }
+        }
+        
+        &.acceptance {
+          background: linear-gradient(135deg, #1890ff, #096dd9);
+          border-color: #1890ff;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #096dd9, #0050b3);
+            border-color: #096dd9;
+          }
+        }
+        
+        &.collection {
+          background: linear-gradient(135deg, #722ed1, #531dab);
+          border-color: #722ed1;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #531dab, #3c0f6f);
+            border-color: #531dab;
+          }
+        }
+        
+        &.settled {
+          background: linear-gradient(135deg, #13c2c2, #08979c);
+          border-color: #13c2c2;
+          color: white;
+          
+          &:hover {
+            background: linear-gradient(135deg, #08979c, #006d75);
+            border-color: #08979c;
+          }
+        }
+        
+        .status-count {
+          margin-left: 6px;
+          font-size: 13px;
+          opacity: 0.95;
+          font-weight: 500;
+        }
       }
     }
   }
 }
 
 .project-kanban {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 24px;
   margin-bottom: 24px;
+  overflow-y: auto;
+  max-height: calc(100vh - 300px);
+  
+  .kanban-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+    gap: 24px;
+    margin-top: 24px;
+  }
+  
+  // 响应式设计
+  @media (max-width: 1200px) {
+    .kanban-grid {
+      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+      gap: 20px;
+    }
+  }
+  
+  @media (max-width: 768px) {
+    .kanban-grid {
+      grid-template-columns: 1fr;
+      gap: 16px;
+    }
+  }
 
   .kanban-column {
     background: #f7f8fa;
-    border-radius: 12px;
-    padding: 20px;
+    border-radius: 16px;
+    padding: 24px;
     min-height: 600px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    transition: all 0.3s ease;
+
+    &:hover {
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+      transform: translateY(-2px);
+      
+      .column-title .status-icon {
+        transform: scale(1.1) rotate(5deg);
+      }
+    }
 
     .column-header {
-      margin-bottom: 20px;
-      padding: 16px;
-      border-radius: 8px;
+      margin-bottom: 24px;
+      padding: 24px;
+      border-radius: 16px;
       color: white;
+      position: relative;
+      overflow: hidden;
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
 
-      &.preparing {
-        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
-      }
-
-      &.ongoing {
-        background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
+        z-index: 1;
       }
 
       &.pending {
         background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
       }
 
+      &.preparing {
+        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+      }
+
+      &.inProgress {
+        background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
+      }
+
+      &.suspended {
+        background: linear-gradient(135deg, #ffa000 0%, #ff8f00 100%);
+      }
+
+      &.completed {
+        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+      }
+
+      &.acceptance {
+        background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+      }
+
+      &.collection {
+        background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
+      }
+
+      &.settled {
+        background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
+      }
+
       .column-title {
         display: flex;
         align-items: center;
-        gap: 12px;
+        gap: 16px;
+        position: relative;
+        z-index: 2;
 
         .status-icon {
-          font-size: 24px;
+          font-size: 32px;
+          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
+          transition: transform 0.3s ease;
         }
 
         h2 {
           margin: 0;
-          font-size: 18px;
-          font-weight: 600;
+          font-size: 22px;
+          font-weight: 700;
+          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+          letter-spacing: 0.5px;
         }
 
         .project-count {
-          background: rgba(255, 255, 255, 0.2);
-          padding: 4px 8px;
-          border-radius: 12px;
-          font-size: 12px;
-          font-weight: 600;
+          background: rgba(255, 255, 255, 0.25);
+          padding: 8px 16px;
+          border-radius: 20px;
+          font-size: 14px;
+          font-weight: 700;
+          backdrop-filter: blur(15px);
+          border: 2px solid rgba(255, 255, 255, 0.4);
+          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
         }
       }
     }
@@ -920,87 +3095,166 @@ onMounted(async () => {
     .column-content {
       display: flex;
       flex-direction: column;
-      gap: 16px;
+      gap: 20px;
     }
   }
 }
 
 .project-card {
   background: white;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  border-radius: 16px;
+  padding: 24px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-left: 6px solid;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   cursor: pointer;
-  transition: all 0.3s ease;
-  border-left: 4px solid transparent;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
 
   &:hover {
-    transform: translateY(-2px);
-    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+    transform: translateY(-4px) scale(1.02);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+    border-color: rgba(0, 0, 0, 0.1);
+
+    &::before {
+      opacity: 1;
+    }
+    
+    .project-header .project-status {
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+    }
+    
+    .project-info .info-item {
+      transform: translateX(0);
+    }
+  }
+
+  // 不同状态的颜色主题
+  &.pending {
+    border-left-color: #868e96;
+    .project-status { background: #868e96; }
   }
 
   &.preparing {
     border-left-color: #ff6b6b;
+    .project-status { background: #ff6b6b; }
   }
 
-  &.ongoing {
+  &.inProgress {
     border-left-color: #51cf66;
+    .project-status { background: #51cf66; }
   }
 
-  &.pending {
-    border-left-color: #868e96;
+  &.suspended {
+    border-left-color: #ffa000;
+    .project-status { background: #ffa000; }
+  }
+
+  &.completed {
+    border-left-color: #52c41a;
+    .project-status { background: #52c41a; }
+  }
+
+  &.acceptance {
+    border-left-color: #1890ff;
+    .project-status { background: #1890ff; }
+  }
+
+  &.collection {
+    border-left-color: #722ed1;
+    .project-status { background: #722ed1; }
+  }
+
+  &.settled {
+    border-left-color: #13c2c2;
+    .project-status { background: #13c2c2; }
   }
 
   .project-header {
     display: flex;
     justify-content: space-between;
-    align-items: center;
-    margin-bottom: 12px;
+    align-items: flex-start;
+    margin-bottom: 16px;
 
     .project-name {
       margin: 0;
       font-size: 16px;
       font-weight: 600;
       color: #1d2129;
+      line-height: 1.4;
+      flex: 1;
+      margin-right: 12px;
     }
 
     .project-status {
-      padding: 4px 8px;
-      border-radius: 4px;
+      padding: 6px 16px;
+      border-radius: 20px;
+      color: white;
       font-size: 12px;
-      font-weight: 500;
-
-      &.preparing {
-        background: #fff5f5;
-        color: #ff6b6b;
-      }
-
-      &.ongoing {
-        background: #f0fff4;
-        color: #51cf66;
-      }
-
-      &.pending {
-        background: #f8f9fa;
-        color: #868e96;
-      }
+      font-weight: 600;
+      white-space: nowrap;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     }
   }
 
   .project-info {
-    margin-bottom: 12px;
+    margin-bottom: 20px;
 
     .info-item {
       display: flex;
       align-items: center;
-      gap: 8px;
-      margin-bottom: 6px;
+      gap: 12px;
+      margin-bottom: 12px;
       font-size: 14px;
       color: #4e5969;
+      padding: 8px 12px;
+      border-radius: 8px;
+      transition: all 0.3s ease;
+      background: rgba(0, 0, 0, 0.02);
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.05);
+        transform: translateX(4px);
+      }
+      
+      &:not(:hover) {
+        transform: translateX(0);
+      }
 
       .info-icon {
-        font-size: 14px;
+        font-size: 18px;
         color: #86909c;
+        flex-shrink: 0;
+        transition: all 0.3s ease;
+      }
+
+      &:hover .info-icon {
+        color: #1890ff;
+        transform: scale(1.1);
+      }
+
+      span {
+        line-height: 1.4;
+        font-weight: 500;
       }
     }
   }
@@ -1010,440 +3264,282 @@ onMounted(async () => {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      margin-bottom: 6px;
-      font-size: 12px;
-      color: #86909c;
+      margin-bottom: 12px;
+      font-size: 14px;
+      padding: 8px 0;
+
+      span:first-child {
+        color: #4e5969;
+        font-weight: 500;
+      }
 
       .progress-text {
-        font-weight: 600;
         color: #1d2129;
+        font-weight: 700;
+        background: linear-gradient(135deg, #1890ff, #40a9ff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-size: 16px;
       }
     }
 
     .progress-bar {
-      height: 6px;
-      background: #f0f0f0;
-      border-radius: 3px;
+      height: 8px;
+      background: #f0f2f5;
+      border-radius: 4px;
       overflow: hidden;
+      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
 
       .progress-fill {
         height: 100%;
-        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
-        border-radius: 3px;
-        transition: width 0.3s ease;
-      }
-    }
-
-    .start-date {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      font-size: 12px;
-      color: #86909c;
-
-      .info-icon {
-        font-size: 12px;
+        background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
+        border-radius: 4px;
+        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
+        position: relative;
+        
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          bottom: 0;
+          background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
+          animation: shimmer 2s infinite;
+        }
       }
     }
   }
 
   .project-alerts {
-    margin-top: 12px;
+    margin-top: 16px;
+    padding-top: 16px;
+    border-top: 1px solid #f0f2f5;
 
     .alert-item {
       display: flex;
       align-items: center;
-      gap: 6px;
-      padding: 6px 8px;
-      border-radius: 4px;
+      gap: 8px;
+      padding: 8px 12px;
+      border-radius: 8px;
       font-size: 12px;
-      margin-bottom: 4px;
+      font-weight: 500;
+      margin-bottom: 8px;
 
-      &.cost {
-        background: #fff5f5;
-        color: #ff6b6b;
+      &.warning {
+        background: #fff7e6;
+        color: #d46b08;
+        border: 1px solid #ffd591;
       }
 
-      &.personnel {
-        background: #fff8e1;
-        color: #ffa000;
+      &.error {
+        background: #fff2f0;
+        color: #cf1322;
+        border: 1px solid #ffccc7;
+      }
+
+      &.info {
+        background: #f6ffed;
+        color: #389e0d;
+        border: 1px solid #b7eb8f;
       }
     }
   }
 }
 
 .project-detail {
-  .detail-section {
+  .detail-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     margin-bottom: 24px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #f0f2f5;
 
-    h3 {
-      margin: 0 0 16px 0;
-      font-size: 16px;
-      font-weight: 600;
-      color: #1d2129;
-      border-bottom: 2px solid #f0f0f0;
-      padding-bottom: 8px;
-    }
-
-    .section-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 16px;
-
-      h3 {
-        margin: 0;
-        border-bottom: none;
-        padding-bottom: 0;
-      }
-    }
-  }
-
-  .info-grid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 16px;
-
-    .info-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-
-      label {
-        font-weight: 500;
-        color: #4e5969;
-        min-width: 80px;
-      }
-
-      .status-badge {
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: 500;
-
-        &.preparing {
-          background: #fff5f5;
-          color: #ff6b6b;
-        }
-
-        &.ongoing {
-          background: #f0fff4;
-          color: #51cf66;
-        }
-
-        &.pending {
-          background: #f8f9fa;
-          color: #868e96;
-        }
-      }
-    }
-  }
-
-  .alerts-list {
-    .alert-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 12px;
-      border-radius: 6px;
-      margin-bottom: 8px;
-
-      &.cost {
-        background: #fff5f5;
-        color: #ff6b6b;
-        border: 1px solid #ffebee;
-      }
-
-      &.personnel {
-        background: #fff8e1;
-        color: #ffa000;
-        border: 1px solid #fff3cd;
-      }
-    }
-  }
-
-  .team-members-header {
-    .header-left {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      
-      h3 {
-        margin: 0;
-        color: #1d2129;
-        font-size: 18px;
-        font-weight: 600;
-      }
-      
-      .member-count {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        padding: 2px 8px;
-        border-radius: 12px;
-        font-size: 12px;
-        font-weight: 500;
-      }
-    }
-    
-    .add-member-btn {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border: none;
+    .project-status-badge {
+      padding: 8px 16px;
+      border-radius: 20px;
       color: white;
-      border-radius: 8px;
-      transition: all 0.3s ease;
-      
-      &:hover {
-        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
-        transform: translateY(-1px);
-        box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-      }
-    }
-  }
+      font-weight: 600;
+      font-size: 14px;
 
-  .team-members {
-    max-height: 400px;
-    overflow-y: auto;
-    padding-right: 8px;
-    
-    // 自定义滚动条样式
-    &::-webkit-scrollbar {
-      width: 6px;
+      &.pending { background: #868e96; }
+      &.preparing { background: #ff6b6b; }
+      &.inProgress { background: #51cf66; }
+      &.suspended { background: #ffa000; }
+      &.completed { background: #52c41a; }
+      &.acceptance { background: #1890ff; }
+      &.collection { background: #722ed1; }
+      &.settled { background: #13c2c2; }
     }
-    
-    &::-webkit-scrollbar-track {
-      background: #f1f1f1;
-      border-radius: 3px;
-    }
-    
-    &::-webkit-scrollbar-thumb {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      border-radius: 3px;
-      
-      &:hover {
-        background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
-      }
-    }
-    
-    .member-item {
+
+    .project-meta {
       display: flex;
-      align-items: center;
       gap: 16px;
-      padding: 16px;
-      border: 1px solid #e5e6eb;
-      border-radius: 12px;
-      margin-bottom: 12px;
-      cursor: pointer;
-      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-      background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-      animation: fadeInUp 0.6s ease-out forwards;
-      opacity: 0;
-      transform: translateY(20px);
 
-      @keyframes fadeInUp {
-        to {
-          opacity: 1;
-          transform: translateY(0);
-        }
-      }
-
-      &:hover {
-        background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
-        border-color: #667eea;
-        box-shadow: 0 4px 16px rgba(102, 126, 234, 0.15);
-        transform: translateY(-2px);
-      }
-
-      &:active {
-        transform: translateY(0);
-      }
-
-      .member-avatar {
-        width: 48px;
-        height: 48px;
-        border-radius: 50%;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      .meta-item {
         display: flex;
         align-items: center;
-        justify-content: center;
-        color: white;
-        font-size: 20px;
-        box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
-        position: relative;
-        
-        &::after {
-          content: '';
-          position: absolute;
-          top: -2px;
-          right: -2px;
-          width: 12px;
-          height: 12px;
-          border-radius: 50%;
-          background: #52c41a;
-          border: 2px solid white;
-          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
+        gap: 6px;
+        font-size: 14px;
+        color: #4e5969;
+
+        .meta-icon {
+          font-size: 16px;
+          color: #86909c;
+        }
+      }
+    }
+  }
+
+  .detail-content {
+    .detail-section {
+      margin-bottom: 24px;
+
+      h4 {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1d2129;
+        margin: 0 0 16px 0;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #f0f2f5;
+      }
+
+      .info-grid {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 16px;
+
+        .info-item {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+
+          label {
+            font-size: 12px;
+            color: #86909c;
+            font-weight: 500;
+          }
+
+          span {
+            font-size: 14px;
+            color: #1d2129;
+            font-weight: 500;
+          }
         }
       }
 
-      .member-info {
-        flex: 1;
-        min-width: 0;
+      .progress-section {
+        display: flex;
+        flex-direction: column;
+        gap: 16px;
 
-        .member-name {
-          font-weight: 600;
-          color: #1d2129;
-          margin-bottom: 4px;
-          font-size: 16px;
-          line-height: 1.4;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-
-        .member-position {
-          font-size: 13px;
-          color: #4e5969;
-          margin-bottom: 6px;
-          font-weight: 500;
-          background: linear-gradient(135deg, #f0f2f5 0%, #e5e6eb 100%);
-          padding: 2px 8px;
-          border-radius: 6px;
-          display: inline-block;
-        }
-
-        .member-details {
+        .progress-item {
           display: flex;
           align-items: center;
           gap: 12px;
-          font-size: 12px;
-          color: #86909c;
+
+          label {
+            font-size: 14px;
+            color: #4e5969;
+            font-weight: 500;
+            min-width: 80px;
+          }
+
+          .progress-bar {
+            flex: 1;
+            height: 8px;
+            background: #f0f2f5;
+            border-radius: 4px;
+            overflow: hidden;
+
+            .progress-fill {
+              height: 100%;
+              background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
+              border-radius: 4px;
+              transition: width 0.3s ease;
+            }
+          }
+
+          .progress-text {
+            font-size: 14px;
+            color: #1d2129;
+            font-weight: 600;
+            min-width: 40px;
+            text-align: right;
+          }
+        }
+      }
+
+      .team-members {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+
+        .team-member {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+          padding: 12px;
+          background: #f7f8fa;
+          border-radius: 8px;
+          transition: all 0.3s ease;
+
+          &:hover {
+            background: #f0f2f5;
+            transform: translateX(4px);
+          }
+
+          .member-avatar {
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            background: #e6f7ff;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: #1890ff;
+            font-size: 20px;
+          }
+
+          .member-info {
+            flex: 1;
+
+            .member-name {
+              font-size: 14px;
+              font-weight: 600;
+              color: #1d2129;
+              margin-bottom: 2px;
+            }
+
+            .member-role {
+              font-size: 12px;
+              color: #86909c;
+            }
+          }
 
           .member-status {
             padding: 4px 8px;
-            border-radius: 6px;
+            border-radius: 12px;
+            font-size: 12px;
             font-weight: 500;
-            font-size: 11px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
 
-            &.ACTIVE {
-              background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
-              color: #1890ff;
-              border: 1px solid #91d5ff;
+            &.active {
+              background: #f6ffed;
+              color: #389e0d;
             }
 
-            &.INACTIVE {
-              background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%);
+            &.suspended {
+              background: #fff7e6;
+              color: #d46b08;
+            }
+
+            &.inactive {
+              background: #f5f5f5;
               color: #8c8c8c;
-              border: 1px solid #d9d9d9;
             }
           }
-          
-          .member-date {
-            background: #f7f8fa;
-            padding: 2px 6px;
-            border-radius: 4px;
-            border: 1px solid #e5e6eb;
-          }
-        }
-      }
-
-      .member-actions {
-        .arco-btn {
-          font-size: 12px;
-          border-radius: 8px;
-          padding: 6px 12px;
-          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-          border: none;
-          color: white;
-          transition: all 0.3s ease;
-          
-          &:hover {
-            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
-            transform: translateY(-1px);
-            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
-          }
-        }
-      }
-    }
-
-    .empty-state {
-      text-align: center;
-      padding: 60px 20px;
-      color: #86909c;
-      background: linear-gradient(135deg, #fafbfc 0%, #f0f2f5 100%);
-      border-radius: 12px;
-      border: 2px dashed #d9d9d9;
-      margin: 20px 0;
-
-      .empty-icon {
-        font-size: 64px;
-        margin-bottom: 20px;
-        color: #bfbfbf;
-        opacity: 0.6;
-      }
-
-      .empty-text {
-        font-size: 20px;
-        font-weight: 600;
-        margin-bottom: 12px;
-        color: #595959;
-      }
-
-      .empty-desc {
-        font-size: 14px;
-        color: #8c8c8c;
-        line-height: 1.6;
-      }
-    }
-  }
-
-  .requirements-list {
-    .requirement-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 12px;
-      border: 1px solid #f0f0f0;
-      border-radius: 6px;
-      margin-bottom: 8px;
-
-      .requirement-info {
-        .requirement-title {
-          font-weight: 500;
-          color: #1d2129;
-          margin-bottom: 4px;
-        }
-
-        .requirement-details {
-          font-size: 12px;
-          color: #86909c;
-
-          span {
-            margin-right: 16px;
-          }
-        }
-      }
-
-      .requirement-status {
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: 12px;
-        font-weight: 500;
-
-        &.pending {
-          background: #fff8e1;
-          color: #ffa000;
-        }
-
-        &.recruiting {
-          background: #e3f2fd;
-          color: #2196f3;
-        }
-
-        &.completed {
-          background: #f0fff4;
-          color: #51cf66;
         }
       }
     }
@@ -1500,11 +3596,6 @@ onMounted(async () => {
 }
 
 // 滚动修复
-.project-kanban {
-  overflow-y: auto;
-  max-height: calc(100vh - 300px);
-}
-
 .project-detail {
   max-height: calc(100vh - 200px);
   overflow-y: auto;
@@ -1512,28 +3603,1025 @@ onMounted(async () => {
 
 // 响应式设计
 @media (max-width: 1200px) {
+  .personnel-dispatch-header {
+    padding: 28px;
+    
+    .header-title {
+      h1 {
+        font-size: 28px;
+      }
+      
+      .title-icon {
+        font-size: 32px;
+      }
+    }
+    
+    .status-filter {
+      .filter-buttons {
+        gap: 14px;
+        
+        .status-filter-btn {
+          padding: 10px 20px;
+          min-width: 110px;
+          font-size: 13px;
+        }
+      }
+    }
+  }
+  
   .project-kanban {
-    grid-template-columns: 1fr;
-    gap: 16px;
+    .kanban-grid {
+      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+      gap: 20px;
+    }
   }
 }
 
 @media (max-width: 768px) {
   .personnel-dispatch-header {
+    padding: 24px 20px;
+    margin-bottom: 24px;
+    
     .header-content {
-      flex-direction: column;
       gap: 20px;
+    }
+    
+    .header-title {
+      flex-direction: column;
+      gap: 12px;
       text-align: center;
+      
+      h1 {
+        font-size: 24px;
+      }
+      
+      .title-icon {
+        font-size: 28px;
+      }
+      
+      .refresh-btn {
+        padding: 6px 12px;
+        font-size: 12px;
+      }
+    }
+    
+    .status-filter {
+      .filter-buttons {
+        flex-direction: row;
+        align-items: center;
+        gap: 8px;
+        justify-content: flex-start;
+        overflow-x: auto;
+        
+        .status-filter-btn {
+          width: auto;
+          max-width: none;
+          padding: 8px 16px;
+          font-size: 12px;
+          min-width: 90px;
+        }
+      }
+    }
+  }
+  
+  .project-kanban {
+    margin-bottom: 20px;
+    
+    .kanban-grid {
+      grid-template-columns: 1fr;
+      gap: 16px;
+      margin-top: 20px;
+    }
+    
+    .kanban-column {
+      padding: 20px;
+      min-height: 500px;
+      
+      .column-header {
+        padding: 20px;
+        margin-bottom: 20px;
+        
+        .column-title {
+          h2 {
+            font-size: 20px;
+          }
+          
+          .status-icon {
+            font-size: 28px;
+          }
+          
+          .project-count {
+            padding: 6px 12px;
+            font-size: 13px;
+          }
+        }
+      }
+    }
+  }
+  
+  .project-card {
+    padding: 16px;
+    
+    .project-header {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 8px;
+      margin-bottom: 12px;
+      
+      .project-name {
+        font-size: 15px;
+        margin-right: 0;
+      }
+      
+      .project-status {
+        align-self: flex-start;
+        padding: 4px 12px;
+        font-size: 11px;
+      }
+    }
+    
+    .project-info {
+      margin-bottom: 16px;
+      
+      .info-item {
+        padding: 6px 10px;
+        margin-bottom: 10px;
+        font-size: 13px;
+        
+        .info-icon {
+          font-size: 16px;
+        }
+      }
+    }
+    
+    .project-footer {
+      .progress-info {
+        font-size: 13px;
+        margin-bottom: 10px;
+        
+        .progress-text {
+          font-size: 15px;
+        }
+      }
+    }
+    
+    // 移动端项目管理模块样式调整
+    .project-management-modules {
+      margin-top: 12px;
+      padding-top: 12px;
+      gap: 6px;
+      
+      .module-item {
+        padding: 6px 10px;
+        font-size: 11px;
+        min-width: 70px;
+        
+        .module-icon {
+          font-size: 12px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .personnel-dispatch-header {
+    padding: 20px 16px;
+    
+    .header-title {
+      h1 {
+        font-size: 22px;
+      }
+      
+      .title-icon {
+        font-size: 24px;
+      }
+    }
+    
+    .status-filter {
+      .filter-buttons {
+        gap: 6px;
+        
+        .status-filter-btn {
+          max-width: none;
+          padding: 8px 12px;
+          font-size: 12px;
+          min-width: 80px;
+          
+          .status-count {
+            font-size: 11px;
+          }
+        }
+      }
+    }
+  }
+  
+  .project-kanban {
+    .kanban-column {
+      padding: 16px;
+      
+      .column-header {
+        padding: 16px;
+        
+        .column-title {
+          h2 {
+            font-size: 18px;
+          }
+          
+          .status-icon {
+            font-size: 24px;
+          }
+        }
+      }
+    }
+  }
+  
+  .project-card {
+    padding: 14px;
+    
+    .project-header {
+      .project-name {
+        font-size: 14px;
+      }
+      
+      .project-status {
+        font-size: 10px;
+        padding: 3px 10px;
+      }
+    }
+    
+    .project-info {
+      .info-item {
+        font-size: 12px;
+        padding: 5px 8px;
+        
+        .info-icon {
+          font-size: 14px;
+        }
+      }
+    }
+    
+    // 超小屏幕项目管理模块样式调整
+    .project-management-modules {
+      margin-top: 10px;
+      padding-top: 10px;
+      gap: 4px;
+      
+      .module-item {
+        padding: 4px 8px;
+        font-size: 10px;
+        min-width: 60px;
+        
+        .module-icon {
+          font-size: 10px;
+        }
+      }
+    }
+  }
+}
+
+// 添加shimmer动画
+@keyframes shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.site-management-modal {
+  .management-options {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+
+    .option-item {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px;
+      border-radius: 8px;
+      background: #f7f8fa;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: #e6f7ff;
+        transform: translateX(4px);
+      }
+
+      .option-icon {
+        font-size: 24px;
+        color: #1890ff;
+      }
+
+      .option-content {
+        flex: 1;
+
+        h3 {
+          margin: 0;
+          font-size: 16px;
+          font-weight: 600;
+          color: #1d2129;
+        }
+
+        p {
+          margin: 8px 0 0 0;
+          font-size: 14px;
+          color: #4e5969;
+        }
+      }
+
+      .option-arrow {
+        font-size: 16px;
+        color: #86909c;
+      }
+    }
+  }
+}
+
+// 项目管理模块样式
+.project-management-modules {
+  margin-top: 16px;
+  padding-top: 16px;
+  border-top: 1px solid #f0f2f5;
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+
+  .module-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 8px 12px;
+    border-radius: 20px;
+    font-size: 12px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    border: 1px solid transparent;
+    flex: 1;
+    min-width: 80px;
+    justify-content: center;
+
+    &:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
     }
 
-    .header-stats {
-      flex-wrap: wrap;
-      justify-content: center;
+    .module-icon {
+      font-size: 14px;
+    }
+
+    span {
+      white-space: nowrap;
+    }
+
+    &.quality-management {
+      background: linear-gradient(135deg, #52c41a, #389e0d);
+      color: white;
+      border-color: #52c41a;
+
+      &:hover {
+        background: linear-gradient(135deg, #389e0d, #2f7a0a);
+        border-color: #389e0d;
+      }
+    }
+
+    &.safety-management {
+      background: linear-gradient(135deg, #fa8c16, #d46b08);
+      color: white;
+      border-color: #fa8c16;
+
+      &:hover {
+        background: linear-gradient(135deg, #d46b08, #ad4e00);
+        border-color: #d46b08;
+      }
+    }
+
+    &.site-management {
+      background: linear-gradient(135deg, #1890ff, #096dd9);
+      color: white;
+      border-color: #1890ff;
+
+      &:hover {
+        background: linear-gradient(135deg, #096dd9, #0050b3);
+        border-color: #096dd9;
+      }
+    }
+  }
+  
+  .column-content {
+      .metric-item {
+        font-size: 9px;
+        margin-bottom: 4px;
+      }
+  }
+
+.progress-display {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+
+// 全部项目视图样式
+.all-projects-view {
+  .all-projects-header {
+    text-align: center;
+    margin-bottom: 32px;
+    
+    h2 {
+      font-size: 28px;
+      font-weight: 700;
+      color: #1d2129;
+      margin: 0;
+      padding: 24px;
+      background: linear-gradient(135deg, #f7f8fa 0%, #e9ecef 100%);
+      border-radius: 16px;
+      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    }
+  }
+  
+  .all-projects-grid {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+}
+
+
+
+      &:hover .info-icon {
+        color: #1890ff;
+        transform: scale(1.1);
+      }
+
+      span {
+        line-height: 1.4;
+        font-weight: 500;
+      }
+    
+  
+
+  .project-footer {
+    .progress-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+      font-size: 14px;
+      padding: 8px 0;
+
+      span:first-child {
+        color: #4e5969;
+        font-weight: 500;
+      }
+
+      .progress-text {
+        color: #1d2129;
+        font-weight: 700;
+        background: linear-gradient(135deg, #1890ff, #40a9ff);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        background-clip: text;
+        font-size: 16px;
+      }
+    }
+  }
+}
+
+// 响应式设计调整
+@media (max-width: 1200px) {
+  .all-projects-view {
+    .all-projects-grid {
+      max-width: 100%;
+      padding: 0 16px;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .all-projects-view {
+    .all-projects-header {
+      margin-bottom: 24px;
+      
+      h2 {
+        font-size: 24px;
+        padding: 20px;
+      }
+    }
+    
+    .all-projects-grid {
+      gap: 16px;
+      padding: 0 12px;
+          }
+    }
+    
+    .module-title {
+      font-size: 13px;
     }
   }
 
-  .info-grid {
-    grid-template-columns: 1fr;
+@media (max-width: 480px) {
+  .all-projects-view {
+    .all-projects-header {
+      h2 {
+        font-size: 22px;
+        padding: 16px;
+      }
+    }
+    
+    .all-projects-grid {
+      gap: 12px;
+      padding: 0 8px;
+    }
+  }
+}
+
+
+// 美化圆形进度条
+.enhanced-progress {
+  position: relative;
+  
+  &::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    left: -4px;
+    right: -4px;
+    bottom: -4px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #1890ff, #40a9ff);
+    opacity: 0.1;
+    z-index: -1;
+  }
+  
+  &::after {
+    content: '';
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    right: -2px;
+    bottom: -2px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #1890ff, #40a9ff);
+    opacity: 0.2;
+    z-index: -1;
+  }
+}
+
+    
+    .column-content {
+      .metric-item {
+        font-size: 9px;
+        margin-bottom: 4px;
+      }
+    }
+
+
+// 垂直布局项目卡片样式
+.project-card-vertical {
+  background: white;
+  border-radius: 16px;
+  padding: 20px;
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+  border-left: 6px solid;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.06);
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  &:hover {
+    transform: translateY(-4px) scale(1.01);
+    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
+    border-color: rgba(0, 0, 0, 0.1);
+
+    &::before {
+      opacity: 1;
+    }
+    
+    .project-header .project-status {
+      transform: scale(1.05);
+      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  // 不同状态的颜色主题
+  &.pending {
+    border-left-color: #868e96;
+    .project-status { background: #868e96; }
+  }
+
+  &.preparing {
+    border-left-color: #ff6b6b;
+    .project-status { background: #ff6b6b; }
+  }
+
+  &.inProgress {
+    border-left-color: #51cf66;
+    .project-status { background: #51cf66; }
+  }
+
+  &.suspended {
+    border-left-color: #ffa000;
+    .project-status { background: #ffa000; }
+  }
+
+  &.completed {
+    border-left-color: #52c41a;
+    .project-status { background: #52c41a; }
+  }
+
+  &.acceptance {
+    border-left-color: #1890ff;
+    .project-status { background: #1890ff; }
+  }
+
+  &.collection {
+    border-left-color: #722ed1;
+    .project-status { background: #722ed1; }
+  }
+
+  &.settled {
+    border-left-color: #13c2c2;
+    .project-status { background: #13c2c2; }
+  }
+}
+
+// 项目信息部分样式
+.project-info-section {
+  .project-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    margin-bottom: 16px;
+
+    .project-name {
+      margin: 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #1d2129;
+      line-height: 1.4;
+      flex: 1;
+      margin-right: 12px;
+    }
+
+    .project-status {
+      padding: 6px 16px;
+      border-radius: 20px;
+      color: white;
+      font-size: 12px;
+      font-weight: 600;
+      white-space: nowrap;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      backdrop-filter: blur(10px);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+  }
+
+  .project-details {
+    .detail-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+      font-size: 14px;
+      color: #4e5969;
+      padding: 8px 12px;
+      border-radius: 8px;
+      transition: all 0.3s ease;
+      background: rgba(0, 0, 0, 0.02);
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.05);
+        transform: translateX(4px);
+      }
+
+      .detail-icon {
+        font-size: 18px;
+        color: #86909c;
+        flex-shrink: 0;
+        transition: all 0.3s ease;
+      }
+
+      &:hover .detail-icon {
+        color: #1890ff;
+        transform: scale(1.1);
+      }
+
+      span {
+        line-height: 1.4;
+        font-weight: 500;
+      }
+    }
+
+    .progress-section {
+      margin-top: 16px;
+      
+      .progress-info {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        font-size: 14px;
+        padding: 8px 0;
+
+        span:first-child {
+          color: #4e5969;
+          font-weight: 500;
+        }
+
+        .progress-text {
+          color: #1d2129;
+          font-weight: 700;
+          background: linear-gradient(135deg, #1890ff, #40a9ff);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+          background-clip: text;
+          font-size: 16px;
+        }
+      }
+
+      .progress-display {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    }
+  }
+}
+
+// 管理部分样式
+.management-section {
+  background: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  border: 1px solid #f0f2f5;
+  transition: all 0.3s ease;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 4px;
+    transition: all 0.3s ease;
+  }
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
+    border-color: #d9d9d9;
+
+    &::before {
+      width: 6px;
+    }
+  }
+
+  .section-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 12px;
+    padding-bottom: 8px;
+    border-bottom: 1px solid #f0f2f5;
+
+    .section-icon {
+      font-size: 20px;
+      flex-shrink: 0;
+    }
+
+    h4 {
+      margin: 0;
+      font-size: 14px;
+      font-weight: 600;
+      color: #1d2129;
+      white-space: nowrap;
+    }
+  }
+
+  .section-content {
+    .metric-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+      font-size: 12px;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+
+      .metric-label {
+        color: #86909c;
+        font-weight: 500;
+      }
+
+      .metric-value {
+        color: #1d2129;
+        font-weight: 600;
+        padding: 2px 6px;
+        border-radius: 4px;
+        background: rgba(0, 0, 0, 0.04);
+      }
+    }
+  }
+
+  // 质量管理部分
+  &.quality-section {
+    &::before {
+      background: linear-gradient(135deg, #52c41a, #389e0d);
+    }
+    
+    .section-icon {
+      color: #52c41a;
+    }
+    
+    .quality-value {
+      background: rgba(82, 196, 26, 0.1);
+      color: #52c41a;
+    }
+  }
+
+  // 安全管理部分
+  &.safety-section {
+    &::before {
+      background: linear-gradient(135deg, #fa8c16, #d46b08);
+    }
+    
+    .section-icon {
+      color: #fa8c16;
+    }
+    
+    .safety-value {
+      background: rgba(250, 140, 22, 0.1);
+      color: #fa8c16;
+    }
+  }
+
+  // 现场管理部分
+  &.site-section {
+    &::before {
+      background: linear-gradient(135deg, #1890ff, #096dd9);
+    }
+    
+    .section-icon {
+      color: #1890ff;
+    }
+    
+    .site-value {
+      background: rgba(24, 144, 255, 0.1);
+      color: #1890ff;
+    }
+  }
+}
+
+// 响应式设计调整
+@media (max-width: 768px) {
+  .project-card-vertical {
+    padding: 16px;
+    gap: 12px;
+    
+    .project-info-section {
+      .project-header {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 8px;
+        margin-bottom: 12px;
+        
+        .project-name {
+          font-size: 16px;
+          margin-right: 0;
+        }
+        
+        .project-status {
+          align-self: flex-start;
+          padding: 4px 12px;
+          font-size: 11px;
+        }
+      }
+      
+      .project-details {
+        .detail-item {
+          padding: 6px 10px;
+          margin-bottom: 10px;
+          font-size: 13px;
+          
+          .detail-icon {
+            font-size: 16px;
+          }
+        }
+        
+        .progress-section {
+          .progress-info {
+            font-size: 13px;
+          }
+        }
+      }
+    }
+    
+    .management-section {
+      padding: 12px;
+      
+      .section-header {
+        margin-bottom: 8px;
+        
+        .section-icon {
+          font-size: 16px;
+        }
+        
+        h4 {
+          font-size: 12px;
+        }
+      }
+      
+      .section-content {
+        .metric-item {
+          font-size: 10px;
+          margin-bottom: 5px;
+        }
+      }
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  .project-card-vertical {
+    padding: 12px;
+    gap: 8px;
+    
+    .project-info-section {
+      .project-header {
+        .project-name {
+          font-size: 15px;
+        }
+        
+        .project-status {
+          font-size: 10px;
+          padding: 3px 10px;
+        }
+      }
+      
+      .project-details {
+        .detail-item {
+          font-size: 12px;
+          padding: 5px 8px;
+          
+          .detail-icon {
+            font-size: 14px;
+          }
+        }
+      }
+    }
+    
+    .management-section {
+      padding: 10px;
+      
+      .section-header {
+        .section-icon {
+          font-size: 14px;
+        }
+        
+        h4 {
+          font-size: 11px;
+        }
+      }
+      
+      .section-content {
+        .metric-item {
+          font-size: 9px;
+          margin-bottom: 4px;
+        }
+      }
+    }
   }
 }
 </style> 
\ No newline at end of file