diff --git a/src/apis/project/type.ts b/src/apis/project/type.ts
index cbdb186..506cb93 100644
--- a/src/apis/project/type.ts
+++ b/src/apis/project/type.ts
@@ -117,17 +117,22 @@ export interface ProjectKanbanStats {
 
 /** 项目看板数据 */
 export interface ProjectKanbanData {
-  inProgressProjects: never[]
+  inProgressProjects: ProjectCard[]
   preparingProjects: ProjectCard[]
   ongoingProjects: ProjectCard[]
   pendingProjects: ProjectCard[]
+  suspendedProjects: ProjectCard[]
+  completedProjects: ProjectCard[]
+  acceptanceProjects: ProjectCard[]
+  collectionProjects: ProjectCard[]
+  settledProjects: ProjectCard[]
 }
 
 /** 项目卡片信息 */
 export interface ProjectCard {
   id: string | number
   name: string
-  status: 'preparing' | 'ongoing' | 'pending'
+  status: number | 'preparing' | 'ongoing' | 'pending' | 'inProgress' | 'suspended' | 'completed' | 'acceptance' | 'collection' | 'settled'
   budget: number
   manager: string
   teamSize: number
@@ -139,6 +144,9 @@ export interface ProjectCard {
   alerts?: ProjectAlert[]
   teamMembers: TeamMemberResp[]
   requirements: ProjectRequirementResp[]
+  farmName?: string
+  scale?: string
+  createTime?: string
 }
 
 /** 项目异常信息 */
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 369aad4..eab6be6 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -70,6 +70,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/src/types/components.d.ts b/src/types/components.d.ts
index 7fa6b1b..73dac61 100644
--- a/src/types/components.d.ts
+++ b/src/types/components.d.ts
@@ -7,7 +7,69 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    ApprovalAssistant: typeof import('./../components/ApprovalAssistant/index.vue')['default']
+    ApprovalMessageItem: typeof import('./../components/NotificationCenter/ApprovalMessageItem.vue')['default']
+    Avatar: typeof import('./../components/Avatar/index.vue')['default']
+    Breadcrumb: typeof import('./../components/Breadcrumb/index.vue')['default']
+    CellCopy: typeof import('./../components/CellCopy/index.vue')['default']
+    Chart: typeof import('./../components/Chart/index.vue')['default']
+    ColumnSetting: typeof import('./../components/GiTable/src/components/ColumnSetting.vue')['default']
+    CronForm: typeof import('./../components/GenCron/CronForm/index.vue')['default']
+    CronModal: typeof import('./../components/GenCron/CronModal/index.vue')['default']
+    DateRangePicker: typeof import('./../components/DateRangePicker/index.vue')['default']
+    DayForm: typeof import('./../components/GenCron/CronForm/component/day-form.vue')['default']
+    FilePreview: typeof import('./../components/FilePreview/index.vue')['default']
+    GiCellAvatar: typeof import('./../components/GiCell/GiCellAvatar.vue')['default']
+    GiCellGender: typeof import('./../components/GiCell/GiCellGender.vue')['default']
+    GiCellStatus: typeof import('./../components/GiCell/GiCellStatus.vue')['default']
+    GiCellTag: typeof import('./../components/GiCell/GiCellTag.vue')['default']
+    GiCellTags: typeof import('./../components/GiCell/GiCellTags.vue')['default']
+    GiCodeView: typeof import('./../components/GiCodeView/index.vue')['default']
+    GiDot: typeof import('./../components/GiDot/index.tsx')['default']
+    GiEditTable: typeof import('./../components/GiEditTable/GiEditTable.vue')['default']
+    GiFooter: typeof import('./../components/GiFooter/index.vue')['default']
+    GiForm: typeof import('./../components/GiForm/src/GiForm.vue')['default']
+    GiIconBox: typeof import('./../components/GiIconBox/index.vue')['default']
+    GiIconSelector: typeof import('./../components/GiIconSelector/index.vue')['default']
+    GiIframe: typeof import('./../components/GiIframe/index.vue')['default']
+    GiOption: typeof import('./../components/GiOption/index.vue')['default']
+    GiOptionItem: typeof import('./../components/GiOptionItem/index.vue')['default']
+    GiPageLayout: typeof import('./../components/GiPageLayout/index.vue')['default']
+    GiSpace: typeof import('./../components/GiSpace/index.vue')['default']
+    GiSplitButton: typeof import('./../components/GiSplitButton/index.vue')['default']
+    GiSplitPane: typeof import('./../components/GiSplitPane/index.vue')['default']
+    GiSplitPaneFlexibleBox: typeof import('./../components/GiSplitPane/components/GiSplitPaneFlexibleBox.vue')['default']
+    GiSvgIcon: typeof import('./../components/GiSvgIcon/index.vue')['default']
+    GiTable: typeof import('./../components/GiTable/src/GiTable.vue')['default']
+    GiTag: typeof import('./../components/GiTag/index.tsx')['default']
+    GiThemeBtn: typeof import('./../components/GiThemeBtn/index.vue')['default']
+    HourForm: typeof import('./../components/GenCron/CronForm/component/hour-form.vue')['default']
+    Icon403: typeof import('./../components/icons/Icon403.vue')['default']
+    Icon404: typeof import('./../components/icons/Icon404.vue')['default']
+    Icon500: typeof import('./../components/icons/Icon500.vue')['default']
+    IconBorders: typeof import('./../components/icons/IconBorders.vue')['default']
+    IconTableSize: typeof import('./../components/icons/IconTableSize.vue')['default']
+    IconTreeAdd: typeof import('./../components/icons/IconTreeAdd.vue')['default']
+    IconTreeReduce: typeof import('./../components/icons/IconTreeReduce.vue')['default']
+    ImageImport: typeof import('./../components/ImageImport/index.vue')['default']
+    ImageImportWizard: typeof import('./../components/ImageImportWizard/index.vue')['default']
+    IndustrialImageList: typeof import('./../components/IndustrialImageList/index.vue')['default']
+    JsonPretty: typeof import('./../components/JsonPretty/index.vue')['default']
+    MinuteForm: typeof import('./../components/GenCron/CronForm/component/minute-form.vue')['default']
+    MonthForm: typeof import('./../components/GenCron/CronForm/component/month-form.vue')['default']
+    NotificationCenter: typeof import('./../components/NotificationCenter/index.vue')['default']
+    ParentView: typeof import('./../components/ParentView/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    SecondForm: typeof import('./../components/GenCron/CronForm/component/second-form.vue')['default']
+    SplitPanel: typeof import('./../components/SplitPanel/index.vue')['default']
+    TextCopy: typeof import('./../components/TextCopy/index.vue')['default']
+    TurbineGrid: typeof import('./../components/TurbineGrid/index.vue')['default']
+    UserSelect: typeof import('./../components/UserSelect/index.vue')['default']
+    Verify: typeof import('./../components/Verify/index.vue')['default']
+    VerifyPoints: typeof import('./../components/Verify/Verify/VerifyPoints.vue')['default']
+    VerifySlide: typeof import('./../components/Verify/Verify/VerifySlide.vue')['default']
+    WeekForm: typeof import('./../components/GenCron/CronForm/component/week-form.vue')['default']
+    YearForm: typeof import('./../components/GenCron/CronForm/component/year-form.vue')['default']
   }
 }
diff --git a/src/views/bussiness-data/bussiness.vue b/src/views/bussiness-data/bussiness.vue
index 49f236c..dcc7abf 100644
--- a/src/views/bussiness-data/bussiness.vue
+++ b/src/views/bussiness-data/bussiness.vue
@@ -4,10 +4,9 @@
     <a-layout-sider 
       width="260"
       :collapsed-width="80"
-      theme="light" 
+      theme="dark" 
       class="folder-sidebar"
       :collapsed="sidebarCollapsed"
-      collapsible
       @collapse="handleSidebarCollapse"
       @expand="handleSidebarExpand"
     >
@@ -102,29 +101,7 @@
         </div>
       </div>
 
-      <!-- 侧边栏底部分页控件 -->
-      <div class="sidebar-footer" v-if="!sidebarCollapsed && folderList.length > 0">
-        <div class="pagination-info">
-          <a-typography-text type="secondary" size="small">
-            共 {{ totalFolders }} 个文件夹
-          </a-typography-text>
-        </div>
-        
-        <!-- 隐藏分页控件，因为现在获取所有文件夹 -->
-        <!-- <div class="pagination-controls">
-          <a-pagination
-            :current="currentPage"
-            :page-size="pageSize"
-            :total="totalFolders"
-            :show-size-changer="true"
-            :page-size-options="['10', '20', '50', '100']"
-            @change="handlePageChange"
-            @showSizeChange="handlePageSizeChange"
-            size="small"
-            show-total
-          />
-        </div> -->
-      </div>
+
     </a-layout-sider>
 
     <a-layout>
@@ -305,7 +282,7 @@
 
               <!-- 大小列 -->
               <a-col :span="3" class="table-column size-column">
-                <div class="cell-content">{{ formatFileSize(file.fileSize || file.size) }}</div>
+                <div class="cell-content">{{ formatFileListSize(file.fileSize || file.size) }}</div>
               </a-col>
 
               <!-- 时间列 -->
@@ -682,7 +659,7 @@ const fileListTemp = ref([]);
 const folderFormRef = ref(null);
 const uploadFormRef = ref(null);
 const uploadRef = ref(null);
-const folderColor = '#165DFF';
+const folderColor = 'var(--color-primary)';
 const refreshing = ref(false);
 const folderSubmitting = ref(false);
 const uploading = ref(false);
@@ -1624,7 +1601,7 @@ const fileColor = (extension) => {
     bmp: '#722ed1',
     webp: '#13c2c2'
   };
-  return colorMap[extension.toLowerCase()] || '#8c8c8c';
+  return colorMap[extension.toLowerCase()] || 'var(--color-text-3)';
 };
 
 
@@ -1881,8 +1858,8 @@ const showTextPreview = async (blob, fileName) => {
             maxWidth: '100%',
             maxHeight: '70vh',
             overflow: 'auto',
-            backgroundColor: '#f8f9fa',
-            border: '1px solid #e9ecef',
+            backgroundColor: 'var(--color-fill-1)',
+            border: '1px solid var(--color-border)',
             borderRadius: '8px',
             padding: '20px',
             fontFamily: "'Consolas', 'Monaco', 'Courier New', monospace",
@@ -1890,7 +1867,7 @@ const showTextPreview = async (blob, fileName) => {
             lineHeight: '1.6',
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-word',
-            color: '#333',
+            color: 'var(--color-text-1)',
             textAlign: 'left'
           }
         }, text)
@@ -2336,6 +2313,21 @@ const formatFileSize = (fileSize) => {
   return `${(size / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 };
 
+// 专门用于文件列表的格式化函数（假设后端返回的是KB单位）
+const formatFileListSize = (fileSize) => {
+  const size = Number(fileSize);
+  if (isNaN(size) || size < 0) return '未知';
+  
+  // 假设后端返回的是KB单位
+  if (size < 1024) {
+    return `${size} KB`;
+  } else if (size < 1024 * 1024) {
+    return `${(size / 1024).toFixed(1)} MB`;
+  } else {
+    return `${(size / (1024 * 1024)).toFixed(1)} GB`;
+  }
+};
+
 
 
 const fileTypeText = (type) => {
@@ -2458,7 +2450,7 @@ onMounted(() => {
 <style scoped>
 .knowledge-container {
   height: 100vh;
-  background-color: var(--color-bg-2);
+  background-color: var(--color-bg-1);
 }
 
 
@@ -2470,13 +2462,15 @@ onMounted(() => {
   transition: all 0.3s ease;
   overflow: hidden;
   position: relative;
-  background: linear-gradient(180deg, #ffffff 0%, #fafbfc 100%);
+  background: var(--color-bg-1);
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar-header {
   padding: 20px 16px;
   border-bottom: 1px solid var(--color-border);
-  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  background: var(--color-bg-1);
   position: relative;
   
   &::after {
@@ -2492,12 +2486,18 @@ onMounted(() => {
 
 .folder-content {
   padding: 16px 0;
-  height: calc(100vh - 320px); /* 为底部分页控件留出更多空间，因为文件夹项现在更高 */
+  flex: 1;
   overflow-y: auto;
   scrollbar-width: thin;
-  background: rgba(255, 255, 255, 0.6);
+  background: var(--color-bg-1);
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: calc(100vh - 200px);
 }
 
+
+
 .folder-content::-webkit-scrollbar {
   width: 8px;
 }
@@ -2537,7 +2537,7 @@ onMounted(() => {
   border: 1px solid transparent;
   
   &:hover {
-    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
+    background: linear-gradient(135deg, var(--color-fill-2) 0%, var(--color-fill-3) 100%);
     border-color: var(--color-primary-light-2);
     transform: translateX(2px);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
@@ -2606,7 +2606,7 @@ onMounted(() => {
   justify-content: space-between;
   align-items: center;
   padding: 0 24px;
-  background: var(--color-bg-2);
+  background: var(--color-bg-1);
   border-bottom: 1px solid var(--color-border);
   height: 64px;
 }
@@ -2623,10 +2623,12 @@ onMounted(() => {
   display: flex;
   flex-direction: column;
   padding: 24px;
-  overflow: auto;
+  overflow: hidden;
   border-radius: 8px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  background: var(--color-bg-2);
+  background: var(--color-bg-1);
+  min-height: 0;
+  max-height: calc(100vh - 120px);
 }
 
 .file-card {
@@ -2637,6 +2639,7 @@ onMounted(() => {
   flex-direction: column;
   position: relative;
   height: 100%;
+  overflow: hidden;
 }
 
 /* 表格容器 */
@@ -2649,7 +2652,9 @@ onMounted(() => {
   overflow-y: auto;
   background-color: var(--color-bg-1);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-  padding-bottom: 80px; /* 为分页留出空间 */
+  margin-bottom: 0;
+  min-height: 300px;
+  max-height: calc(100vh - 300px);
 }
 
 /* 表头行样式 */
@@ -2729,8 +2734,8 @@ onMounted(() => {
 }
 
 .folder-icon {
-  color: #165DFF;
-  background-color: #E8F3FF;
+  color: var(--color-primary);
+  background-color: var(--color-primary-light-1);
 }
 
 .file-name {
@@ -2744,7 +2749,7 @@ onMounted(() => {
 }
 
 .table-data-row:hover .file-name {
-  color: #165DFF;
+  color: var(--color-primary);
 }
 
 .type-column, .size-column, .time-column {
@@ -2789,7 +2794,7 @@ onMounted(() => {
   white-space: nowrap;
   
   .table-data-row:hover & {
-    color: #165DFF;
+    color: var(--color-primary);
   }
 }
 
@@ -2922,6 +2927,35 @@ onMounted(() => {
   }
 }
 
+/* 浏览器缩放调整 */
+@media (max-height: 800px) {
+  .folder-content {
+    max-height: calc(100vh - 180px);
+  }
+  
+  .file-content {
+    max-height: calc(100vh - 100px);
+  }
+  
+  .file-grid-container {
+    max-height: calc(100vh - 280px);
+  }
+}
+
+@media (max-height: 600px) {
+  .folder-content {
+    max-height: calc(100vh - 160px);
+  }
+  
+  .file-content {
+    max-height: calc(100vh - 80px);
+  }
+  
+  .file-grid-container {
+    max-height: calc(100vh - 260px);
+  }
+}
+
 /* 空状态样式 */
 .initial-state, .empty-state {
   display: flex;
@@ -2930,7 +2964,7 @@ onMounted(() => {
   justify-content: center;
   padding: 64px 0;
   color: var(--color-text-3);
-  background-color: #fafafa;
+  background-color: var(--color-fill-1);
   border-radius: 8px;
   text-align: center;
 }
@@ -2944,7 +2978,7 @@ onMounted(() => {
 :deep(.empty-state .arco-btn) {
   margin-top: 16px;
   padding: 8px 16px;
-  background-color: #165DFF;
+  background-color: var(--color-primary);
   color: white;
   border-radius: 4px;
   border: none;
@@ -2954,7 +2988,7 @@ onMounted(() => {
 }
 
 :deep(.empty-state .arco-btn:hover) {
-  background-color: #0E42D2;
+  background-color: var(--color-primary-dark-1);
   transform: translateY(-1px);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
@@ -3076,50 +3110,7 @@ onMounted(() => {
   border-top: 1px solid var(--color-border);
 }
 
-/* 侧边栏底部分页样式 */
-.sidebar-footer {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
-  border-top: 1px solid var(--color-border);
-  padding: 20px 16px;
-  z-index: 10;
-  backdrop-filter: blur(10px);
-  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
-}
 
-.pagination-info {
-  margin-bottom: 16px;
-  text-align: center;
-  padding: 8px 12px;
-  background: rgba(255, 255, 255, 0.8);
-  border-radius: 8px;
-  border: 1px solid var(--color-border);
-}
-
-.pagination-controls {
-  display: flex;
-  justify-content: center;
-  
-  :deep(.arco-pagination) {
-    .arco-pagination-item {
-      border-radius: 6px;
-      transition: all 0.2s ease;
-      
-      &:hover {
-        transform: translateY(-1px);
-        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-      }
-    }
-  }
-}
-
-/* 确保文件夹内容区域不被底部分页遮挡 */
-.folder-content {
-  /* 高度已调整，无需额外padding */
-}
 
 /* 动画效果 */
 :deep(.arco-icon-refresh.spin) {
@@ -3250,8 +3241,8 @@ onMounted(() => {
   border: 1px solid #e2e8f0;
   
   &:hover {
-    background: #e2e8f0;
-    color: #165DFF;
+    background: var(--color-fill-2);
+    color: var(--color-primary);
   }
 }
 
@@ -3260,8 +3251,8 @@ onMounted(() => {
   transition: all 0.2s ease;
   
   &:hover {
-    border-color: #165DFF;
-    color: #165DFF;
+    border-color: var(--color-primary);
+    color: var(--color-primary);
   }
   
   &:active {
@@ -3370,7 +3361,7 @@ onMounted(() => {
     border-radius: 8px;
     border: 1px solid var(--color-border);
     transition: all 0.3s ease;
-    background: rgba(255, 255, 255, 0.9);
+    background: rgba(var(--color-bg-1-rgb), 0.9);
     
     &:hover {
       border-color: var(--color-primary-light-2);
@@ -3388,7 +3379,7 @@ onMounted(() => {
 .search-result-tip {
   padding: 12px 16px;
   margin: 12px 16px;
-  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+  background: linear-gradient(135deg, var(--color-primary-light-1) 0%, var(--color-primary-light-2) 100%);
   border-radius: 8px;
   border-left: 4px solid var(--color-primary);
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
@@ -3402,7 +3393,7 @@ onMounted(() => {
     left: 0;
     right: 0;
     bottom: 0;
-    background: linear-gradient(45deg, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%);
+    background: linear-gradient(45deg, transparent 30%, rgba(var(--color-bg-1-rgb), 0.1) 50%, transparent 70%);
     animation: shimmer 2s infinite;
   }
 }
@@ -3440,7 +3431,7 @@ onMounted(() => {
   margin-top: 16px;
   border: 1px solid var(--color-border);
   border-radius: 8px;
-  background: var(--color-bg-2);
+  background: var(--color-bg-1);
   max-height: 300px;
   overflow-y: auto;
 }
@@ -3612,17 +3603,18 @@ onMounted(() => {
 
 /* 文件分页样式 */
 .file-pagination {
-  position: absolute;
+  position: sticky;
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 10;
-  margin-top: 0;
+  margin-top: 16px;
   padding: 16px 0;
   display: flex;
   justify-content: center;
   border-top: 1px solid var(--color-border);
   background: var(--color-bg-1);
+  flex-shrink: 0;
+  z-index: 10;
   
   .arco-pagination {
     .arco-pagination-total {
@@ -3662,7 +3654,7 @@ onMounted(() => {
 /* 树形文件夹结构 */
 .folder-tree-container {
   padding: 8px;
-  background: var(--color-bg-2);
+  background: var(--color-bg-1);
   border-radius: 6px;
   margin: 8px;
   overflow: hidden;
diff --git a/src/views/project-management/contract/expense-contract/ContractEdit.vue b/src/views/project-management/contract/expense-contract/ContractEdit.vue
index 78ece19..5908dcb 100644
--- a/src/views/project-management/contract/expense-contract/ContractEdit.vue
+++ b/src/views/project-management/contract/expense-contract/ContractEdit.vue
@@ -35,11 +35,11 @@
       <a-col :span="12">
         <a-form-item field="contractStatus" label="合同状态">
           <a-select v-model="contractData.contractStatus">
-            <a-option value="未确认">未确认</a-option>
-            <a-option value="待审批">待审批</a-option>
-            <a-option value="已签署">已签署</a-option>
+            <a-option value="未执行">未执行</a-option>
             <a-option value="执行中">执行中</a-option>
-            <a-option value="已完成">已完成</a-option>
+            <a-option value="验收中">验收中</a-option>
+            <a-option value="结算中">结算中</a-option>
+            <a-option value="已结算">已结算</a-option>
             <a-option value="已终止">已终止</a-option>
           </a-select>
         </a-form-item>
diff --git a/src/views/project-management/contract/expense-contract/index.vue b/src/views/project-management/contract/expense-contract/index.vue
index ad3286e..3f2e5f0 100644
--- a/src/views/project-management/contract/expense-contract/index.vue
+++ b/src/views/project-management/contract/expense-contract/index.vue
@@ -48,18 +48,23 @@
         <span class="font-medium text-green-600">￥{{ (record.amount || 0).toLocaleString() }}</span>
       </template>
 
-      <!-- 已收款金额 -->
-      <template #receivedAmount="{ record }">
-        <span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
+      <!-- 已结算金额（支出合同） -->
+      <template #settlementAmount="{ record }">
+        <span class="font-medium text-blue-600">￥{{ (record.settlementAmount || record.receivedAmount || 0).toLocaleString() }}</span>
       </template>
 
       <template #action="{ record }">
         <a-space>
           <a-link @click="viewDetail(record)">查看</a-link>
           <a-link @click="editRecord(record)">编辑</a-link>
+          <a-link :disabled="record.contractStatus === '已结算'" @click="!(record.contractStatus === '已结算') && openSettlement(record)">结算</a-link>
           <a-link status="danger" @click="deleteContract(record)">删除</a-link>
         </a-space>
       </template>
+      <!-- 日期展示：仅年月日（放在 action 模板之外作为独立列插槽） -->
+      <template #signDate="{ record }">{{ (record.signDate || '').slice(0,10) }}</template>
+      <template #performanceDeadline="{ record }">{{ (record.performanceDeadline || '').slice(0,10) }}</template>
+      <template #paymentDate="{ record }">{{ (record.paymentDate || '').slice(0,10) }}</template>
     </GiTable>
 
     <!-- 合同详情弹窗 -->
@@ -102,6 +107,15 @@
           @update:contract-data="handleNewContractDataUpdate"
       />
     </a-modal>
+    <!-- 合同结算弹窗 -->
+    <a-modal v-model:visible="showSettlementModal" title="合同结算" :width="520" @before-ok="submitSettlement">
+      <a-form :model="settlementForm" layout="vertical">
+        <a-form-item field="amount" label="结算金额"><a-input-number v-model="settlementForm.amount" style="width:100%" /></a-form-item>
+        <a-form-item field="paymentDate" label="付款日期"><a-date-picker v-model="settlementForm.paymentDate" show-time value-format="YYYY-MM-DD HH:mm:ss" style="width:100%"/></a-form-item>
+        <a-form-item field="paymentPeriod" label="账期"><a-date-picker v-model="settlementForm.paymentPeriod" show-time value-format="YYYY-MM-DD HH:mm:ss" style="width:100%"/></a-form-item>
+        <a-form-item field="notes" label="备注"><a-textarea v-model="settlementForm.notes" /></a-form-item>
+      </a-form>
+    </a-modal>
   </GiPageLayout>
 </template>
 
@@ -173,11 +187,11 @@ const queryFormColumns = [
     props: {
       placeholder: '请选择合同状态',
       options: [
-        { label: '未确认', value: '未确认' },
-        { label: '待审批', value: '待审批' },
-        { label: '已签署', value: '已签署' },
+        { label: '未执行', value: '未执行' },
         { label: '执行中', value: '执行中' },
-        { label: '已完成', value: '已完成' },
+        { label: '验收中', value: '验收中' },
+        { label: '结算中', value: '结算中' },
+        { label: '已结算', value: '已结算' },
         { label: '已终止', value: '已终止' },
       ],
     },
@@ -187,9 +201,8 @@ const queryFormColumns = [
     label: '签署时间',
     type: 'range-picker' as const,
     props: {
-      placeholder: ['开始时间', '结束时间'],
-      showTime: true,
-      format: 'YYYY-MM-DD HH:mm:ss',
+      placeholder: ['开始日期', '结束日期'],
+      format: 'YYYY-MM-DD',
     },
   },
 ]
@@ -200,11 +213,11 @@ const tableColumns: TableColumnData[] = [
   { title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
   { title: '客户名称', dataIndex: 'customer', width: 200, ellipsis: true, tooltip: true },
   { title: '合同金额', dataIndex: 'amount', slotName: 'contractAmount', width: 120 },
-  { title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
-  { title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
-  { title: '签署日期', dataIndex: 'signDate', width: 120 },
-  { title: '履约期限', dataIndex: 'performanceDeadline', width: 120 },
-  { title: '付款日期', dataIndex: 'paymentDate', width: 120 },
+  { title: '已结算金额', dataIndex: 'settlementAmount', slotName: 'settlementAmount', width: 120 },
+  { title: '未结算金额', dataIndex: 'pendingAmount', width: 120 },
+  { title: '签署日期', dataIndex: 'signDate', slotName: 'signDate', width: 120 },
+  { title: '履约期限', dataIndex: 'performanceDeadline', slotName: 'performanceDeadline', width: 120 },
+  { title: '付款日期', dataIndex: 'paymentDate', slotName: 'paymentDate', width: 120 },
   { title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 100 },
   { title: '销售人员', dataIndex: 'salespersonName', width: 100 },
   { title: '销售部门', dataIndex: 'salespersonDeptName', width: 100 },
@@ -252,10 +265,10 @@ const fetchContractList = async () => {
         }
       }
 
-      // 计算未收款金额
+      // 计算未结算金额（支出合同）
       dataList.value = filtered.map((item: ContractItem) => ({
         ...item,
-        pendingAmount: (item.amount || 0) - (item.receivedAmount || 0),
+        pendingAmount: (item.amount || 0) - ((item.settlementAmount || item.receivedAmount || 0)),
       }))
 
       // 更新分页总数（前端过滤后以过滤结果数为准）
@@ -284,11 +297,11 @@ const pagination = reactive({
 // 获取状态颜色
 const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
-    未确认: 'gray',
-    待审批: 'orange',
-    已签署: 'blue',
+    未执行: 'gray',
     执行中: 'cyan',
-    已完成: 'green',
+    验收中: 'arcoblue',
+    结算中: 'orange',
+    已结算: 'green',
     已终止: 'red',
   }
   return colorMap[status] || 'gray'
@@ -381,7 +394,7 @@ const openAddModal = () => {
     amount: 0,
     accountNumber: '',
     notes: '',
-    contractStatus: '未确认',
+    contractStatus: '未执行',
     contractText: '',
     projectName: '',
     salespersonName: null,
@@ -477,8 +490,8 @@ const editRecord = (record: ContractItem) => {
     ...record,
     amount: record.amount || 0,
     projectId: record.projectId || '',
-    type: record.type || '收入合同',
-    contractStatus: record.contractStatus || '未确认',
+    type: record.type || '支出合同',
+    contractStatus: record.contractStatus || '未执行',
   }
 
   selectedContractData.value = completeRecord
@@ -548,6 +561,91 @@ const handleEditSubmit = async () => {
   }
 }
 
+// 合同结算
+const showSettlementModal = ref(false)
+const settlementForm = reactive({
+  // 核心字段
+  contractId: '',
+  amount: 0,
+  paymentDate: '',
+  paymentPeriod: '',
+  notes: '',
+  // 其余接口可选字段（用于兼容接口入参）
+  accountNumber: '',
+  code: '',
+  customer: '',
+  departmentId: '',
+  duration: '',
+  productService: '',
+  projectId: '',
+  salespersonId: '',
+  settlementId: '',
+  settlementStatus: '',
+})
+const settlementRecord = ref<ContractItem | null>(null)
+const openSettlement = (record: ContractItem) => {
+  if (record.contractStatus === '已结算') return
+  settlementRecord.value = record
+  Object.assign(settlementForm, {
+    // 核心
+    contractId: record.contractId,
+    amount: record.amount || 0,
+    paymentDate: record.paymentDate || '',
+    paymentPeriod: '',
+    notes: '',
+    // 其余字段从合同记录回填，便于直接提交
+    accountNumber: (record as any).accountNumber || '',
+    code: (record as any).code || '',
+    customer: (record as any).customer || '',
+    departmentId: (record as any).departmentId || '',
+    duration: (record as any).duration || '',
+    productService: (record as any).productService || '',
+    projectId: (record as any).projectId || '',
+    salespersonId: (record as any).salespersonId || '',
+    settlementId: (record as any).settlementId || '',
+    settlementStatus: (record as any).settlementStatus || '',
+  })
+  showSettlementModal.value = true
+}
+const submitSettlement = async () => {
+  try {
+    const payload:any = {
+      accountNumber: settlementForm.accountNumber || '',
+      amount: settlementForm.amount,
+      code: settlementForm.code || '',
+      contractId: settlementForm.contractId,
+      customer: settlementForm.customer || '',
+      departmentId: settlementForm.departmentId || '',
+      duration: settlementForm.duration || '',
+      notes: settlementForm.notes || '',
+      paymentDate: settlementForm.paymentDate || null,
+      paymentPeriod: settlementForm.paymentPeriod || '',
+      productService: settlementForm.productService || '',
+      projectId: settlementForm.projectId || '',
+      salespersonId: settlementForm.salespersonId || '',
+      settlementId: settlementForm.settlementId || '',
+      settlementStatus: settlementForm.settlementStatus || '',
+    }
+    const res = await http.post('/contract-settlement', payload)
+    if (res.code === 200 || (res as any).status === 200) {
+      Message.success('合同结算成功')
+      // 根据未结算金额是否为 0 决定状态：0 => 已结算，否则保留/置为“结算中”
+      const origin = settlementRecord.value
+      const settledAmount = (origin?.settlementAmount ?? origin?.receivedAmount ?? 0) + (settlementForm.amount || 0)
+      const pendingAfter = Math.max((origin?.amount || 0) - settledAmount, 0)
+      const targetStatus = pendingAfter === 0 ? '已结算' : '结算中'
+      await http.put('/contract', { contractId: settlementForm.contractId, contractStatus: targetStatus, type: origin?.type || '支出合同' })
+      showSettlementModal.value = false
+      search()
+      return true
+    }
+    Message.error(res.msg || '合同结算失败')
+    return false
+  } catch (e:any) {
+    Message.error(e?.message || '合同结算失败')
+    return false
+  }
+}
 
 // 删除合同：只有在确认框点击确定后才执行删除
 const deleteContract = (record: ContractItem) => {
diff --git a/src/views/project-management/contract/revenue-contract/ContractEdit.vue b/src/views/project-management/contract/revenue-contract/ContractEdit.vue
index f756e1b..d1a4ae5 100644
--- a/src/views/project-management/contract/revenue-contract/ContractEdit.vue
+++ b/src/views/project-management/contract/revenue-contract/ContractEdit.vue
@@ -35,11 +35,11 @@
       <a-col :span="12">
         <a-form-item field="contractStatus" label="合同状态">
           <a-select v-model="contractData.contractStatus">
-            <a-option value="未确认">未确认</a-option>
-            <a-option value="待审批">待审批</a-option>
-            <a-option value="已签署">已签署</a-option>
+            <a-option value="未执行">未执行</a-option>
             <a-option value="执行中">执行中</a-option>
-            <a-option value="已完成">已完成</a-option>
+            <a-option value="验收中">验收中</a-option>
+            <a-option value="结算中">结算中</a-option>
+            <a-option value="已结算">已结算</a-option>
             <a-option value="已终止">已终止</a-option>
           </a-select>
         </a-form-item>
diff --git a/src/views/project-management/contract/revenue-contract/index.vue b/src/views/project-management/contract/revenue-contract/index.vue
index 6c70c57..eaa3b9a 100644
--- a/src/views/project-management/contract/revenue-contract/index.vue
+++ b/src/views/project-management/contract/revenue-contract/index.vue
@@ -48,18 +48,24 @@
         <span class="font-medium text-green-600">￥{{ (record.amount || 0).toLocaleString() }}</span>
       </template>
 
-      <!-- 已收款金额 -->
+      <!-- 已回款金额（收入合同） -->
       <template #receivedAmount="{ record }">
-        <span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
+        <span class="font-medium text-blue-600">￥{{ (record.receivedAmount || record.settlementAmount || 0).toLocaleString() }}</span>
       </template>
 
       <template #action="{ record }">
         <a-space>
           <a-link @click="viewDetail(record)">查看</a-link>
           <a-link @click="editRecord(record)">编辑</a-link>
+          <a-link :disabled="record.contractStatus === '已结算'" @click="!(record.contractStatus === '已结算') && openSettlement(record)">结算</a-link>
           <a-link status="danger" @click="deleteContract(record)">删除</a-link>
         </a-space>
       </template>
+
+      <!-- 日期展示：仅年月日（放在 action 模板之外作为独立列插槽） -->
+      <template #signDate="{ record }">{{ (record.signDate || '').slice(0,10) }}</template>
+      <template #performanceDeadline="{ record }">{{ (record.performanceDeadline || '').slice(0,10) }}</template>
+      <template #paymentDate="{ record }">{{ (record.paymentDate || '').slice(0,10) }}</template>
     </GiTable>
 
     <!-- 合同详情弹窗 -->
@@ -87,8 +93,6 @@
         @update:contract-data="handleContractDataUpdate"
       />
     </a-modal>
-  </GiPageLayout>
-
     <!-- 新建合同弹窗 -->
     <a-modal
       v-model:visible="showAddModal"
@@ -102,7 +106,18 @@
         :contract-data="newContractData"
         @update:contract-data="handleNewContractDataUpdate"
       />
+      </a-modal>
+
+    <!-- 合同结算弹窗 -->
+    <a-modal v-model:visible="showSettlementModal" title="合同结算" :width="520" @before-ok="submitSettlement">
+      <a-form :model="settlementForm" layout="vertical">
+        <a-form-item field="amount" label="结算金额"><a-input-number v-model="settlementForm.amount" style="width:100%" /></a-form-item>
+        <a-form-item field="paymentDate" label="付款日期"><a-date-picker v-model="settlementForm.paymentDate" show-time value-format="YYYY-MM-DD HH:mm:ss" style="width:100%"/></a-form-item>
+        <a-form-item field="paymentPeriod" label="账期"><a-date-picker v-model="settlementForm.paymentPeriod" show-time value-format="YYYY-MM-DD HH:mm:ss" style="width:100%"/></a-form-item>
+        <a-form-item field="notes" label="备注"><a-textarea v-model="settlementForm.notes" /></a-form-item>
+      </a-form>
     </a-modal>
+  </GiPageLayout>
 </template>
 
 <script setup lang="ts">
@@ -162,17 +177,17 @@ const queryFormColumns = [
   { field: 'status', label: '合同状态', type: 'select' as const, props: {
       placeholder: '请选择合同状态',
       options: [
-        { label: '未确认', value: '未确认' },
-        { label: '待审批', value: '待审批' },
-        { label: '已签署', value: '已签署' },
+        { label: '未执行', value: '未执行' },
         { label: '执行中', value: '执行中' },
-        { label: '已完成', value: '已完成' },
+        { label: '验收中', value: '验收中' },
+        { label: '结算中', value: '结算中' },
+        { label: '已结算', value: '已结算' },
         { label: '已终止', value: '已终止' },
       ],
     },
   },
   { field: 'signDateRange', label: '签署时间', type: 'range-picker' as const, props: {
-      placeholder: ['开始时间', '结束时间'], showTime: true, format: 'YYYY-MM-DD HH:mm:ss',
+      placeholder: ['开始日期', '结束日期'], format: 'YYYY-MM-DD',
     }
   },
 ]
@@ -185,16 +200,105 @@ const tableColumns: TableColumnData[] = [
   { title: '合同金额', dataIndex: 'amount', slotName: 'contractAmount', width: 120 },
   { title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
   { title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
-  { title: '签署日期', dataIndex: 'signDate', width: 120 },
-  { title: '履约期限', dataIndex: 'performanceDeadline', width: 120 },
-  { title: '付款日期', dataIndex: 'paymentDate', width: 120 },
-  { title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 100 },
+  { title: '签署日期', dataIndex: 'signDate', slotName: 'signDate', width: 120 },
+  { title: '履约期限', dataIndex: 'performanceDeadline', slotName: 'performanceDeadline', width: 120 },
+  { title: '付款日期', dataIndex: 'paymentDate', slotName: 'paymentDate', width: 120 },
+  { title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 120 },
   { title: '销售人员', dataIndex: 'salespersonName', width: 100 },
   { title: '销售部门', dataIndex: 'salespersonDeptName', width: 100 },
   { title: '产品服务', dataIndex: 'productService', width: 120, ellipsis: true, tooltip: true },
-  { title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
-  { title: '操作', slotName: 'action', width: 200, fixed: 'right' },
+  { title: '备注', dataIndex: 'notes', width: 220, ellipsis: true, tooltip: true },
+  { title: '操作', slotName: 'action', width: 240, fixed: 'right' },
+
 ]
+
+
+// 合同结算（收入合同也支持）
+const showSettlementModal = ref(false)
+const settlementForm = reactive({
+  // 核心字段
+  contractId: '',
+  amount: 0,
+  paymentDate: '',
+  paymentPeriod: '',
+  notes: '',
+  // 其余接口可选字段（用于兼容接口入参）
+  accountNumber: '',
+  code: '',
+  customer: '',
+  departmentId: '',
+  duration: '',
+  productService: '',
+  projectId: '',
+  salespersonId: '',
+  settlementId: '',
+  settlementStatus: '',
+})
+const settlementRecord = ref<ContractItem | null>(null)
+const openSettlement = (record: ContractItem) => {
+  if (record.contractStatus === '已结算') return
+  settlementRecord.value = record
+  Object.assign(settlementForm, {
+    // 核心
+    contractId: record.contractId,
+    amount: record.amount || 0,
+    paymentDate: record.paymentDate || '',
+    paymentPeriod: '',
+    notes: '',
+    // 其余字段从合同记录回填，便于直接提交
+    accountNumber: (record as any).accountNumber || '',
+    code: (record as any).code || '',
+    customer: (record as any).customer || '',
+    departmentId: (record as any).departmentId || '',
+    duration: (record as any).duration || '',
+    productService: (record as any).productService || '',
+    projectId: (record as any).projectId || '',
+    salespersonId: (record as any).salespersonId || '',
+    settlementId: (record as any).settlementId || '',
+    settlementStatus: (record as any).settlementStatus || '',
+  })
+  showSettlementModal.value = true
+}
+const submitSettlement = async () => {
+  try {
+    const payload:any = {
+      accountNumber: settlementForm.accountNumber || '',
+      amount: settlementForm.amount,
+      code: settlementForm.code || '',
+      contractId: settlementForm.contractId,
+      customer: settlementForm.customer || '',
+      departmentId: settlementForm.departmentId || '',
+      duration: settlementForm.duration || '',
+      notes: settlementForm.notes || '',
+      paymentDate: settlementForm.paymentDate || null,
+      paymentPeriod: settlementForm.paymentPeriod || '',
+      productService: settlementForm.productService || '',
+      projectId: settlementForm.projectId || '',
+      salespersonId: settlementForm.salespersonId || '',
+      settlementId: settlementForm.settlementId || '',
+      settlementStatus: settlementForm.settlementStatus || '',
+    }
+    const res = await http.post('/contract-settlement', payload)
+    if (res.code === 200 || (res as any).status === 200) {
+      Message.success('合同结算成功')
+      // 根据未结算金额是否为 0 决定状态：0 => 已结算，否则设为“结算中”
+      const origin = settlementRecord.value
+      const settledAmount = (origin?.settlementAmount ?? origin?.receivedAmount ?? 0) + (settlementForm.amount || 0)
+      const pendingAfter = Math.max((origin?.amount || 0) - settledAmount, 0)
+      const targetStatus = pendingAfter === 0 ? '已结算' : '结算中'
+      await http.put('/contract', { contractId: settlementForm.contractId, contractStatus: targetStatus, type: origin?.type || '收入合同' })
+      showSettlementModal.value = false
+      search()
+      return true
+    }
+    Message.error(res.msg || '合同结算失败')
+    return false
+  } catch (e:any) {
+    Message.error(e?.message || '合同结算失败')
+    return false
+  }
+}
+
 // 数据状态
 const loading = ref(false)
 const dataList = ref<ContractItem[]>([])
@@ -235,7 +339,7 @@ const fetchContractList = async () => {
 
       dataList.value = revenueContracts.map((item: ContractItem) => ({
         ...item,
-        pendingAmount: (item.amount || 0) - (item.receivedAmount || 0),
+        pendingAmount: (item.amount || 0) - ((item.receivedAmount || item.settlementAmount || 0)),
       }))
 
       pagination.total = dataList.value.length
@@ -263,11 +367,11 @@ const pagination = reactive({
 // 获取状态颜色
 const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
-    未确认: 'gray',
-    待审批: 'orange',
-    已签署: 'blue',
+    未执行: 'gray',
     执行中: 'cyan',
-    已完成: 'green',
+    验收中: 'arcoblue',
+    结算中: 'orange',
+    已结算: 'green',
     已终止: 'red',
   }
   return colorMap[status] || 'gray'
@@ -318,7 +422,7 @@ const newContractData = ref<ContractItem>({
   contractId: '', customer: '', code: '', projectId: '', type: '收入合同',
   productService: '', paymentDate: null, performanceDeadline: null,
   paymentAddress: '', amount: 0, accountNumber: '', notes: '',
-  contractStatus: '未确认', contractText: '', projectName: '',
+  contractStatus: '未执行', contractText: '', projectName: '',
   salespersonName: null, salespersonDeptName: '', settlementAmount: null,
   receivedAmount: null, contractStatusLabel: null, createBy: null, updateBy: null,
   createTime: '', updateTime: '', page: 1, pageSize: 10, signDate: '', duration: '',
@@ -329,7 +433,7 @@ const openAddModal = () => {
     contractId: '', customer: '', code: '', projectId: '', type: '收入合同',
     productService: '', paymentDate: null, performanceDeadline: null,
     paymentAddress: '', amount: 0, accountNumber: '', notes: '',
-    contractStatus: '未确认', contractText: '', projectName: '',
+    contractStatus: '未执行', contractText: '', projectName: '',
     salespersonName: null, salespersonDeptName: '', settlementAmount: null,
     receivedAmount: null, contractStatusLabel: null, createBy: null, updateBy: null,
     createTime: '', updateTime: '', page: 1, pageSize: 10, signDate: '', duration: '',
@@ -347,7 +451,7 @@ const handleAddSubmit = async () => {
       accountNumber: newContractData.value.accountNumber || '',
       amount: newContractData.value.amount || 0,
       code: newContractData.value.code || '',
-      contractStatus: newContractData.value.contractStatus || '',
+      contractStatus: newContractData.value.contractStatus || '未执行',
       contractText: newContractData.value.contractText || '',
       customer: newContractData.value.customer || '',
       departmentId: (newContractData.value as any).departmentId || '',
@@ -391,7 +495,7 @@ const editRecord = (record: ContractItem) => {
     amount: record.amount || 0,
     projectId: record.projectId || '',
     type: record.type || '收入合同',
-    contractStatus: record.contractStatus || '未确认',
+    contractStatus: record.contractStatus || '未执行',
   }
 
   selectedContractData.value = completeRecord
@@ -418,7 +522,7 @@ const handleEditSubmit = async () => {
       amount: editedContractData.value.amount || 0,
       code: editedContractData.value.code || '',
       contractId: editedContractData.value.contractId,
-      contractStatus: editedContractData.value.contractStatus || '',
+      contractStatus: editedContractData.value.contractStatus || '未执行',
       contractText: editedContractData.value.contractText || '',
       customer: editedContractData.value.customer || '',
       departmentId: editedContractData.value.departmentId || '',
diff --git a/src/views/project-management/order-management/index.vue b/src/views/project-management/order-management/index.vue
index 89b1f33..22ffeda 100644
--- a/src/views/project-management/order-management/index.vue
+++ b/src/views/project-management/order-management/index.vue
@@ -1,11 +1,163 @@
 <script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import type { TableColumnData } from '@arco-design/web-vue'
 
+// 订单类型与状态
+type OrderStatus = '待支付' | '进行中' | '已完成' | '已取消'
+interface OrderItem { id: string; orderNo: string; customer: string; amount: number; status: OrderStatus; createTime: string }
+const StatusOptions: { label: string; value: OrderStatus }[] = [
+  { label: '待支付', value: '待支付' },
+  { label: '进行中', value: '进行中' },
+  { label: '已完成', value: '已完成' },
+  { label: '已取消', value: '已取消' },
+]
+
+// 假数据源与统计
+const allOrders = ref<OrderItem[]>([])
+const stats = computed(() => ({
+  total: allOrders.value.length,
+  pending: allOrders.value.filter(o=>o.status==='待支付').length,
+  progress: allOrders.value.filter(o=>o.status==='进行中').length,
+  done: allOrders.value.filter(o=>o.status==='已完成').length,
+  cancel: allOrders.value.filter(o=>o.status==='已取消').length,
+}))
+
+// 统计卡片渲染数据（去趋势化）
+const statCards = computed(() => [
+  { key: 'total', title: '订单总数', value: stats.value.total, color: '#2f54eb', iconChar: 'T' },
+  { key: 'pending', title: '待支付', value: stats.value.pending, color: '#faad14', iconChar: 'P' },
+  { key: 'progress', title: '进行中', value: stats.value.progress, color: '#1677ff', iconChar: 'R' },
+  { key: 'done', title: '已完成', value: stats.value.done, color: '#52c41a', iconChar: 'D' },
+  { key: 'cancel', title: '已取消', value: stats.value.cancel, color: '#8c8c8c', iconChar: 'C' },
+])
+
+// 查询表单与分页
+const searchForm = reactive({ orderNo: '', status: '' as ''|OrderStatus, timeRange: [] as [string,string]|[], page: 1, size: 10 })
+const filtered = computed(() => {
+  let list = allOrders.value.slice()
+  if (searchForm.orderNo) list = list.filter(o=>o.orderNo.includes(searchForm.orderNo.trim()))
+  if (searchForm.status) list = list.filter(o=>o.status===searchForm.status)
+  if (Array.isArray(searchForm.timeRange) && searchForm.timeRange.length===2) {
+    const [s,e] = searchForm.timeRange; const S=+new Date(s as any), E=+new Date(e as any)
+    list = list.filter(o=>{ const t=+new Date(o.createTime as any); return t>=S && t<=E })
+  }
+  return list
+})
+const paged = computed(() => {
+  const start = (searchForm.page-1)*searchForm.size
+  return filtered.value.slice(start, start+searchForm.size)
+})
+const pagination = reactive({ current: 1, pageSize: 10, total: 0, showTotal: true, showPageSize: true })
+
+// 表格列
+const columns: TableColumnData[] = [
+  { title: '订单编号', dataIndex: 'orderNo', width: 180 },
+  { title: '客户', dataIndex: 'customer', width: 160 },
+  { title: '金额', dataIndex: 'amount', width: 120, render: ({record}:any)=>`￥${(record.amount||0).toLocaleString()}` },
+  { title: '状态', dataIndex: 'status', width: 100, slotName: 'status' },
+  { title: '下单时间', dataIndex: 'createTime', width: 180 },
+  { title: '操作', slotName: 'action', width: 140, fixed: 'right' },
+]
+
+// 操作
+const loading = ref(false)
+const search = () => { pagination.total = filtered.value.length }
+const reset = () => { Object.assign(searchForm, { orderNo: '', status: '', timeRange: [], page: 1, size: 10 }); pagination.current=1; pagination.pageSize=10; search() }
+const onPageChange = (p:number)=>{ searchForm.page=p; pagination.current=p }
+const onPageSizeChange=(s:number)=>{ searchForm.size=s; searchForm.page=1; pagination.pageSize=s; pagination.current=1; search() }
+const getStatusColor = (s:OrderStatus)=>({ '待支付':'orange','进行中':'blue','已完成':'green','已取消':'gray' }[s])
+
+// 新增订单（本地）
+const showAdd = ref(false)
+const newOrder = reactive<{orderNo:string;customer:string;amount:number;status:OrderStatus;createTime:string}>(
+  { orderNo:'', customer:'', amount:0, status:'待支付', createTime:'' }
+)
+const openAdd = ()=>{ Object.assign(newOrder,{ orderNo:'',customer:'',amount:0,status:'待支付',createTime:new Date().toISOString().slice(0,19).replace('T',' ') }); showAdd.value=true }
+const submitAdd = ()=>{
+  const id = Math.random().toString(36).slice(2)
+  allOrders.value.unshift({ id, ...newOrder })
+  showAdd.value=false; search()
+}
+
+// 生成假数据
+const genMock = (n=60)=>{
+  const pick=<T,>(arr:T[])=>arr[Math.floor(Math.random()*arr.length)]
+  const now=Date.now()
+  return Array.from({length:n}).map((_,i)=>{
+    const offset = Math.floor(Math.random()*60)*86400000
+    const dt = new Date(now-offset).toISOString().slice(0,19).replace('T',' ')
+    const st = pick<OrderStatus>(['待支付','进行中','已完成','已取消'])
+    return { id:`O${i+1}`, orderNo:`NO${100000+i}`, customer:`客户${(i%20)+1}`, amount: Math.floor(Math.random()*50000)+1000, status: st, createTime: dt }
+  })
+}
+onMounted(()=>{ allOrders.value = genMock(88); search() })
 </script>
 
 <template>
+  <GiPageLayout>
+    <!-- 顶部统计（美化 + 居中 + 独立容器） -->
+    <a-row :gutter="12" class="mb-3 stats-row">
+      <a-col :span="24">
+        <div class="stats-wrap">
+          <a-row :gutter="12" justify="center">
+            <a-col v-for="card in statCards" :key="card.key" :xs="12" :sm="12" :md="6" :lg="4">
+              <a-card hoverable class="stat-card">
+                <div class="stat-inner">
+                  <div class="stat-icon" :style="{ background: card.color }">
+                    <span>{{ card.iconChar }}</span>
+                  </div>
+                  <div class="stat-value">{{ card.value }}</div>
+                  <div class="stat-title">{{ card.title }}</div>
+                </div>
+              </a-card>
+            </a-col>
+          </a-row>
+        </div>
+      </a-col>
+    </a-row>
 
+    <!-- 查询表单 + 新增按钮 -->
+    <GiForm :columns="[
+      { field:'orderNo', label:'订单编号', type:'input', props:{placeholder:'支持模糊查询'} },
+      { field:'status', label:'订单状态', type:'select', props:{ placeholder:'全部', options: StatusOptions } },
+      { field:'timeRange', label:'订单时间', type:'range-picker', props:{ showTime:true, format:'YYYY-MM-DD HH:mm:ss' } },
+    ]" v-model="searchForm" search size="medium" @search="search" @reset="reset">
+      <template #extra>
+        <a-button type="primary" @click="openAdd"><icon-plus/> 新增订单</a-button>
+      </template>
+    </GiForm>
+
+    <!-- 订单列表 -->
+    <GiTable :data="paged" :columns="columns" :loading="loading" :pagination="pagination"
+             @page-change="onPageChange" @page-size-change="onPageSizeChange" @refresh="search">
+      <template #status="{ record }"><a-tag :color="getStatusColor(record.status)">{{ record.status }}</a-tag></template>
+      <template #action="{ record }"><a-space>
+        <a-link @click="()=>{}">查看</a-link>
+        <a-link @click="()=>{}">编辑</a-link>
+      </a-space></template>
+    </GiTable>
+
+    <!-- 新增订单弹窗（本地） -->
+    <a-modal v-model:visible="showAdd" title="新增订单" :width="520" @before-ok="submitAdd">
+      <a-form :model="newOrder" layout="vertical">
+        <a-form-item field="orderNo" label="订单编号"><a-input v-model="newOrder.orderNo" placeholder="NO123456"/></a-form-item>
+        <a-form-item field="customer" label="客户"><a-input v-model="newOrder.customer"/></a-form-item>
+        <a-form-item field="amount" label="金额"><a-input-number v-model="newOrder.amount" style="width:100%"/></a-form-item>
+        <a-form-item field="status" label="状态"><a-select v-model="newOrder.status" :options="StatusOptions"/></a-form-item>
+        <a-form-item field="createTime" label="下单时间"><a-date-picker v-model="newOrder.createTime" show-time style="width:100%"/></a-form-item>
+      </a-form>
+    </a-modal>
+  </GiPageLayout>
 </template>
 
-<style scoped lang="scss">
+<style scoped>
+.mb-3{ margin-bottom:12px; }
+.stats-row{ }
+.stats-wrap{ max-width: 1200px; margin: 0 auto; }
+.stat-card{ border: 1px solid var(--color-border-2,#f0f0f0); background: linear-gradient(180deg,#ffffff 0%, #fafbff 100%); }
+.stat-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; padding:18px 10px; text-align:center; }
+.stat-icon{ width:44px; height:44px; border-radius:12px; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:8px; box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
+.stat-value{ font-size:28px; font-weight:700; color:#1d2129; line-height:1.2; }
+.stat-title{ margin-top:6px; color:#86909c; }
 
 </style>
\ No newline at end of file
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