From e6973e7564b0bc993b7fc3917e14b9b7e09afb54 Mon Sep 17 00:00:00 2001
From: wh <269098295@qq.com>
Date: Fri, 6 Mar 2026 15:27:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9C=A8=E5=BE=85=E5=8A=9E=E4=BB=BB=E5=8A=A1?=
 =?UTF-8?q?=E4=B8=AD=E5=A2=9E=E5=8A=A0=E6=98=BE=E7=A4=BA=E5=B7=B2=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90=E7=9A=84=E9=AA=8C=E6=94=B6=E6=B5=81=E7=A8=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                                          |    8 +-
 .env.prod                                     |    4 +-
 src/api/project/acceptance/index.ts           |    5 +
 .../detail/ProcessInstanceBpmnViewer.vue      |   13 +-
 src/views/project/acceptance/detail/index.vue | 1194 +++--------------
 src/views/project/acceptance/index.vue        |    2 +
 src/views/project/acceptance/todo/index.vue   |  361 +++--
 src/views/project/project/index.vue           |  537 +++++---
 8 files changed, 813 insertions(+), 1311 deletions(-)

diff --git a/.env b/.env
index 0f9c97e2e..ec523d92b 100644
--- a/.env
+++ b/.env
@@ -1,5 +1,5 @@
 # 标题
-VITE_APP_TITLE=芋道管理系统
+VITE_APP_TITLE=ncc项目管理系统
 
 # 项目本地运行端口号
 VITE_PORT=80
@@ -8,13 +8,13 @@ VITE_PORT=80
 VITE_OPEN=true
 
 # 租户开关
-VITE_APP_TENANT_ENABLE=true
+VITE_APP_TENANT_ENABLE=false
 
 # 验证码的开关
-VITE_APP_CAPTCHA_ENABLE=true
+VITE_APP_CAPTCHA_ENABLE=false
 
 # 文档地址的开关
-VITE_APP_DOCALERT_ENABLE=true
+VITE_APP_DOCALERT_ENABLE=false
 
 # 百度统计
 VITE_APP_BAIDU_CODE = a1ff8825baa73c3a78eb96aa40325abc
diff --git a/.env.prod b/.env.prod
index 2ee5cf440..7286cfdfe 100644
--- a/.env.prod
+++ b/.env.prod
@@ -3,8 +3,8 @@ NODE_ENV=production
 
 VITE_DEV=false
 
-# 请求路径（修改为实际的后端服务地址，如果前后端在同一服务器，可以使用相对路径或当前域名）
-VITE_BASE_URL='http://localhost:48080'
+# 请求路径(如果前后端部署在同一台服务器上就设置为空，否则设置为后端实际的ip+port)
+VITE_BASE_URL=''
 
 # 文件上传类型：server - 后端上传， client - 前端直连上传，仅支持S3服务
 VITE_UPLOAD_TYPE=server
diff --git a/src/api/project/acceptance/index.ts b/src/api/project/acceptance/index.ts
index 2186d9edb..0d9e5b165 100644
--- a/src/api/project/acceptance/index.ts
+++ b/src/api/project/acceptance/index.ts
@@ -175,6 +175,11 @@ export const getTodoList = () => {
   return request.get({ url: '/project/acceptance/todo' })
 }
 
+// 查询已办任务
+export const getDoneList = () => {
+  return request.get({ url: '/project/acceptance/done' })
+}
+
 // 获取验收状态列表
 export const getStatusList = () => {
   return request.get<{ code: string; name: string }[]>({ url: '/project/acceptance/status-list' })
diff --git a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
index 781263d2c..d87a43695 100644
--- a/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
+++ b/src/views/bpm/processInstance/detail/ProcessInstanceBpmnViewer.vue
@@ -1,6 +1,6 @@
 <template>
   <el-card v-loading="loading" class="box-card">
-    <MyProcessViewer key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" />
+    <MyProcessViewer v-if="view.bpmnXml" key="designer" :xml="view.bpmnXml" :view="view" class="process-viewer" />
   </el-card>
 </template>
 <script lang="ts" setup>
@@ -39,6 +39,17 @@ watch(
     view.value.bpmnXml = value
   }
 )
+
+onMounted(async () => {
+  await nextTick()
+  if (props.modelView) {
+    //@ts-ignore
+    view.value = props.modelView
+  }
+  if (props.bpmnXml) {
+    view.value.bpmnXml = props.bpmnXml
+  }
+})
 </script>
 <style lang="scss" scoped>
 .box-card {
diff --git a/src/views/project/acceptance/detail/index.vue b/src/views/project/acceptance/detail/index.vue
index e89f04973..0fbb3bdce 100644
--- a/src/views/project/acceptance/detail/index.vue
+++ b/src/views/project/acceptance/detail/index.vue
@@ -1,979 +1,147 @@
 <template>
   <div class="p-4 bg-gray-50 min-h-screen">
     <div v-loading="loading">
-      <!-- 头部 Hero Section -->
-      <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 mb-6">
-        <div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-8">
-          <div>
-            <div class="flex items-center gap-3 mb-2">
-              <h2 class="text-2xl font-bold text-gray-800 tracking-tight">
-                {{ projectInfo.projectName || '项目验收' }}
-              </h2>
-              <el-tag 
-                v-if="acceptance.acceptanceType === 'PRE'" 
-                type="info" 
-                effect="plain" 
-                class="!rounded-full !px-3 font-medium border-gray-300"
-              >
-                预验收
-              </el-tag>
-              <el-tag 
-                v-else-if="acceptance.acceptanceType === 'FINAL'" 
-                type="primary" 
-                effect="plain" 
-                class="!rounded-full !px-3 font-medium border-blue-200"
-              >
-                终验
-              </el-tag>
-            </div>
-            
-            <div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-gray-500">
-              <div class="flex items-center gap-1">
-                <Icon icon="ep:collection-tag" class="text-gray-400" />
-                <span>项目编号：<span class="text-gray-700 font-medium">{{ projectInfo.projectCode }}</span></span>
-              </div>
-              <div class="hidden md:block w-px h-3.5 bg-gray-300"></div>
-              <div class="flex items-center gap-1">
-                <Icon icon="ep:hash" class="text-gray-400" />
-                <span>验收ID：<span class="text-gray-700 font-medium">{{ acceptance.id }}</span></span>
-              </div>
-              <div class="hidden md:block w-px h-3.5 bg-gray-300"></div>
-              <div class="flex items-center gap-1">
-                <Icon icon="ep:refresh" class="text-gray-400" />
-                <span>轮次：<span class="text-gray-700 font-medium">R{{ acceptance.round }}</span></span>
-              </div>
-            </div>
-          </div>
-          
-          <div class="flex items-center gap-3">
-             <el-tag :type="getStatusType(acceptance.status)" size="large" effect="dark" class="!px-4 !py-1.5 !text-base !font-semibold !rounded-lg shadow-sm">
-                {{ getStatusLabel(acceptance.status) }}
-             </el-tag>
-          </div>
-        </div>
+      <!-- 共享头部：项目信息 + V4 流程步骤 -->
+      <AcceptanceHeader :acceptance="acceptance" :projectInfo="projectInfo" />
 
-        <!-- 流程步骤 -->
-        <div class="px-4 py-2 bg-gray-50 rounded-lg border border-gray-100">
-           <el-steps :active="activeStep" finish-status="success" align-center class="custom-steps">
-            <el-step title="提交材料" description="待提交/完善材料" />
-            <el-step title="初步审核" description="对口人/组长审核" />
-            <el-step title="终验申请" description="确认进入终验" />
-            <el-step title="终验评审" description="会议评审与整改" />
-            <el-step title="归档完成" description="流程结束" />
-          </el-steps>
-        </div>
-      </div>
+      <!-- 角色视图分发 -->
+      <LiaisonView
+        v-if="userRole === 'liaison'"
+        :acceptance="acceptance"
+        :materials="materials"
+        :opinions="opinions"
+        @preview="handlePreview"
+        @download="handleDownload"
+        @show-versions="showVersionHistory"
+        @upload-success="handleUploadSuccess"
+        @submit-material="handleSubmitMaterial"
+        @submit-rectify="handleSubmitRectify"
+        @submit-final="handleSubmitFinal"
+        @submit-rectify-manual="handleSubmitRectifyManual"
+        @submit-expert-reupload="handleSubmitExpertReupload"
+        @go-back="router.back()"
+      />
 
-      <!-- 主要内容区域 -->
-      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
-        
-        <!-- 左侧：详细信息 (占据 2/3 宽度) -->
-        <div class="lg:col-span-2 space-y-6">
-           <!-- Tab切换 -->
-           <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden min-h-[500px]">
-             <el-tabs v-model="activeTab" class="custom-tabs">
-                <!-- 基本信息 -->
-                <el-tab-pane label="基本信息" name="info">
-                   <div class="p-6">
-                      <div class="grid grid-cols-1 md:grid-cols-2 gap-y-6 gap-x-12">
-                         <div class="space-y-4">
-                           <h3 class="text-base font-bold text-gray-900 flex items-center gap-2 pb-2 border-b border-gray-100">
-                             <Icon icon="ep:user" /> 人员信息
-                           </h3>
-                           <div class="grid grid-cols-[80px_1fr] gap-y-3 text-sm">
-                             <span class="text-gray-500 text-right">项目联络人:</span>
-                             <span class="font-medium text-gray-800">{{ liaisonUserName || '-' }}</span>
-                             <span class="text-gray-500 text-right">对口人:</span>
-                             <span class="font-medium text-gray-800">{{ serviceUserName || '-' }}</span>
-                           </div>
-                         </div>
-                         
-                         <div class="space-y-4">
-                           <h3 class="text-base font-bold text-gray-900 flex items-center gap-2 pb-2 border-b border-gray-100">
-                             <Icon icon="ep:timer" /> 时间及流程
-                           </h3>
-                           <div class="grid grid-cols-[100px_1fr] gap-y-3 text-sm">
-                             <span class="text-gray-500 text-right">开始时间:</span>
-                             <span class="font-medium text-gray-800">{{ formatDate(acceptance.startTime) }}</span>
-                             <span class="text-gray-500 text-right">流程实例ID:</span>
-                             <a class="text-blue-600 font-mono underline cursor-pointer hover:text-blue-800" :title="acceptance.processInstanceId">{{ acceptance.processInstanceId || '-' }}</a>
-                             <span class="text-gray-500 text-right">创建时间:</span>
-                             <span class="font-medium text-gray-800">{{ formatDate(acceptance.createTime) }}</span>
-                           </div>
-                         </div>
-                      </div>
-                   </div>
-                </el-tab-pane>
+      <AdminView
+        v-else-if="userRole === 'admin'"
+        :acceptance="acceptance"
+        :projectInfo="projectInfo"
+        :preMaterials="preMaterials"
+        :finalMaterials="finalMaterials"
+        :opinions="opinions"
+        @preview="handlePreview"
+        @download="handleDownload"
+        @show-versions="showVersionHistory"
+        @audit="auditDialogVisible = true"
+        @organize-meeting="handleOrganizeMeeting"
+        @go-back="router.back()"
+      />
 
-                <!-- 验收材料 -->
-                <el-tab-pane label="验收材料" name="materials">
-                  <div class="p-6">
-                    <!-- 联络人视图：显示当前阶段材料 -->
-                    <template v-if="isLiaisonUser">
-                      <div class="mb-6" v-if="canUploadMaterial">
-                        <el-alert
-                          type="primary"
-                          :closable="false"
-                          show-icon
-                          class="!bg-blue-50 !border-blue-100 !text-blue-800"
-                        >
-                           <template #title>
-                             <span class="font-bold text-base">待办任务：上传验收材料</span>
-                           </template>
-                           <template #default>
-                             <p class="mt-1 text-sm text-blue-600">请完成下方所有必填材料的上传，确认无误后点击底部的【提交材料】按钮进入审核流程。</p>
-                           </template>
-                        </el-alert>
-                      </div>
+      <ExpertView
+        v-else-if="userRole === 'expert'"
+        :acceptance="acceptance"
+        :preMaterials="preMaterials"
+        :finalMaterials="finalMaterials"
+        :opinions="opinions"
+        @preview="handlePreview"
+        @download="handleDownload"
+        @expert-check="auditDialogVisible = true"
+        @go-back="router.back()"
+      />
 
-                      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                        <template v-for="(item, index) in materials" :key="index">
-                          <div class="group relative border border-gray-200 rounded-xl p-4 transition-all duration-300 hover:shadow-md hover:border-blue-200 hover:bg-blue-50/20 bg-white">
-                            <div class="flex items-start gap-4">
-                               <!-- 文件图标 -->
-                              <div class="w-12 h-12 flex items-center justify-center rounded-lg shrink-0 transition-transform group-hover:scale-105"
-                                   :class="[getFileIconColor(item.fileName), 'bg-opacity-10']">
-                                <Icon :icon="getFileIcon(item.fileName)" size="26" :class="item.fileUrl ? '' : 'grayscale opacity-50'" />
-                              </div>
-
-                              <div class="flex-1 min-w-0">
-                                 <div class="flex justify-between items-start">
-                                   <h4 class="font-semibold text-gray-800 truncate pr-2 text-[15px] group-hover:text-blue-700" :title="item.materialName">{{ item.materialName }}</h4>
-                                   <span v-if="item.isRequired" class="text-[10px] font-bold text-red-500 bg-red-50 px-1.5 py-0.5 rounded border border-red-100 shrink-0">必填</span>
-                                 </div>
-                                 
-                                 <div class="mt-1 mb-3 h-5">
-                                   <template v-if="item.fileUrl">
-                                      <div class="flex items-center gap-1 text-xs text-gray-500 truncate">
-                                         <Icon icon="ep:document" class="text-gray-400" />
-                                         <span class="truncate underline cursor-pointer hover:text-blue-600" @click="handlePreview(item)">{{ item.fileName }}</span>
-                                      </div>
-                                   </template>
-                                   <span v-else class="text-xs text-gray-400 italic">暂未上传</span>
-                                 </div>
-
-                                 <!-- Actions -->
-                                 <div class="flex items-center justify-end gap-2 pt-2 border-t border-gray-50 mt-2 opacity-60 group-hover:opacity-100 transition-opacity">
-                                   <!-- 预览 -->
-                                   <el-tooltip content="预览" placement="top" v-if="item.fileUrl">
-                                     <button @click="handlePreview(item)" class="p-2 rounded-full hover:bg-blue-50 text-gray-500 hover:text-blue-600 transition-all border-none outline-none focus:outline-none">
-                                       <Icon icon="ep:view" size="20" />
-                                     </button>
-                                   </el-tooltip>
-                                   
-                                   <!-- 下载 -->
-                                   <el-tooltip content="下载" placement="top" v-if="item.fileUrl">
-                                     <button @click="handleDownload(item)" class="p-2 rounded-full hover:bg-green-50 text-gray-500 hover:text-green-600 transition-all border-none outline-none focus:outline-none">
-                                       <Icon icon="ep:download" size="20" />
-                                     </button>
-                                   </el-tooltip>
-                                   
-                                   <!-- 上传/重新上传 -->
-                                   <div v-if="canUploadMaterial">
-                                     <el-upload
-                                       :action="uploadUrl"
-                                       :headers="uploadHeaders"
-                                       :show-file-list="false"
-                                       :on-success="(res, file) => handleUploadSuccess(res, file, item)"
-                                     >
-                                       <el-tooltip :content="item.fileUrl ? '重新上传' : '上传文件'" placement="top">
-                                         <button class="p-2 rounded-full hover:bg-blue-50 text-gray-500 hover:text-blue-600 transition-all border-none outline-none focus:outline-none">
-                                           <Icon :icon="item.fileUrl ? 'ep:refresh' : 'ep:upload'" size="20" />
-                                         </button>
-                                       </el-tooltip>
-                                     </el-upload>
-                                   </div>
-                                 </div>
-                              </div>
-                            </div>
-                            
-                            <!-- Corner Status Mark -->
-                            <div v-if="item.fileUrl" class="absolute -top-[1px] -right-[1px] w-0 h-0 border-t-[32px] border-r-[32px] border-t-transparent border-r-green-500 rounded-tr-xl">
-                              <Icon icon="ep:check" class="absolute -right-[26px] -top-[26px] text-white text-xs"/> 
-                            </div>
-                          </div>
-                        </template>
-                      </div>
-                    </template>
-
-                    <!-- 其他角色视图：分组显示预验收和终验材料 -->
-                    <template v-else>
-                      <!-- 预验收材料区域 -->
-                      <div class="mb-8">
-                        <h3 class="text-lg font-bold mb-4">
-                          <span class="inline-block px-4 py-2 rounded-lg bg-blue-100 text-blue-800 w-40 text-center">预验收材料</span>
-                        </h3>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                          <template v-for="(item, index) in preMaterials" :key="'pre-' + index">
-                            <div class="group relative border border-gray-200 rounded-xl p-4 transition-all duration-300 hover:shadow-md hover:border-blue-200 hover:bg-blue-50/20 bg-white">
-                              <div class="flex items-start gap-4">
-                                 <!-- 文件图标 -->
-                                <div class="w-12 h-12 flex items-center justify-center rounded-lg shrink-0 transition-transform group-hover:scale-105"
-                                     :class="[getFileIconColor(item.fileName), 'bg-opacity-10']">
-                                  <Icon :icon="getFileIcon(item.fileName)" size="26" :class="item.fileUrl ? '' : 'grayscale opacity-50'" />
-                                </div>
-
-                                <div class="flex-1 min-w-0">
-                                   <div class="flex justify-between items-start">
-                                     <h4 class="font-semibold text-gray-800 truncate pr-2 text-[15px] group-hover:text-blue-700" :title="item.materialName">{{ item.materialName }}</h4>
-                                     <span v-if="item.isRequired" class="text-[10px] font-bold text-red-500 bg-red-50 px-1.5 py-0.5 rounded border border-red-100 shrink-0">必填</span>
-                                   </div>
-                                   
-                                   <div class="mt-1 mb-3 h-5">
-                                     <template v-if="item.fileUrl">
-                                        <div class="flex items-center gap-1 text-xs text-gray-500 truncate">
-                                           <Icon icon="ep:document" class="text-gray-400" />
-                                           <span class="truncate underline cursor-pointer hover:text-blue-600" @click="handlePreview(item)">{{ item.fileName }}</span>
-                                        </div>
-                                     </template>
-                                     <span v-else class="text-xs text-gray-400 italic">暂未上传</span>
-                                   </div>
-
-                                   <!-- Actions -->
-                                   <div class="flex items-center justify-end gap-2 pt-2 border-t border-gray-50 mt-2 opacity-60 group-hover:opacity-100 transition-opacity">
-                                     <!-- 预览 -->
-                                     <el-tooltip content="预览" placement="top" v-if="item.fileUrl">
-                                       <button @click="handlePreview(item)" class="p-2 rounded-full hover:bg-blue-50 text-gray-500 hover:text-blue-600 transition-all border-none outline-none focus:outline-none">
-                                         <Icon icon="ep:view" size="20" />
-                                       </button>
-                                     </el-tooltip>
-                                     
-                                     <!-- 下载 -->
-                                     <el-tooltip content="下载" placement="top" v-if="item.fileUrl">
-                                       <button @click="handleDownload(item)" class="p-2 rounded-full hover:bg-green-50 text-gray-500 hover:text-green-600 transition-all border-none outline-none focus:outline-none">
-                                         <Icon icon="ep:download" size="20" />
-                                       </button>
-                                     </el-tooltip>
-
-                                     <!-- 历史版本 -->
-                                     <el-tooltip :content="'历史版本 (' + item.versionCount + ')'" placement="top" v-if="item.versionCount > 1">
-                                        <button @click="showVersionHistory(item)" class="p-2 rounded-full hover:bg-orange-50 text-gray-500 hover:text-orange-600 transition-all relative border-none outline-none focus:outline-none">
-                                          <Icon icon="ep:clock" size="20" />
-                                          <!-- 小红点提示 -->
-                                          <span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 bg-orange-500 rounded-full border border-white"></span>
-                                        </button>
-                                     </el-tooltip>
-                                   </div>
-                                </div>
-                              </div>
-                              
-                              <!-- Corner Status Mark -->
-                              <div v-if="item.fileUrl" class="absolute -top-[1px] -right-[1px] w-0 h-0 border-t-[32px] border-r-[32px] border-t-transparent border-r-green-500 rounded-tr-xl">
-                                <Icon icon="ep:check" class="absolute -right-[26px] -top-[26px] text-white text-xs"/> 
-                              </div>
-                            </div>
-                          </template>
-                          <div v-if="preMaterials.length === 0" class="col-span-2 text-center py-8 text-gray-400">
-                            暂无预验收材料
-                          </div>
-                        </div>
-                      </div>
-
-                      <!-- 终验材料区域 -->
-                      <div>
-                        <h3 class="text-lg font-bold mb-4">
-                          <span class="inline-block px-4 py-2 rounded-lg bg-purple-100 text-purple-800 w-40 text-center">终验材料</span>
-                        </h3>
-                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-                          <template v-for="(item, index) in finalMaterials" :key="'final-' + index">
-                            <div class="group relative border border-gray-200 rounded-xl p-4 transition-all duration-300 hover:shadow-md hover:border-blue-200 hover:bg-blue-50/20 bg-white">
-                              <div class="flex items-start gap-4">
-                                 <!-- 文件图标 -->
-                                <div class="w-12 h-12 flex items-center justify-center rounded-lg shrink-0 transition-transform group-hover:scale-105"
-                                     :class="[getFileIconColor(item.fileName), 'bg-opacity-10']">
-                                  <Icon :icon="getFileIcon(item.fileName)" size="26" :class="item.fileUrl ? '' : 'grayscale opacity-50'" />
-                                </div>
-
-                                <div class="flex-1 min-w-0">
-                                   <div class="flex justify-between items-start">
-                                     <h4 class="font-semibold text-gray-800 truncate pr-2 text-[15px] group-hover:text-blue-700" :title="item.materialName">{{ item.materialName }}</h4>
-                                     <span v-if="item.isRequired" class="text-[10px] font-bold text-red-500 bg-red-50 px-1.5 py-0.5 rounded border border-red-100 shrink-0">必填</span>
-                                   </div>
-                                   
-                                   <div class="mt-1 mb-3 h-5">
-                                     <template v-if="item.fileUrl">
-                                        <div class="flex items-center gap-1 text-xs text-gray-500 truncate">
-                                           <Icon icon="ep:document" class="text-gray-400" />
-                                           <span class="truncate underline cursor-pointer hover:text-blue-600" @click="handlePreview(item)">{{ item.fileName }}</span>
-                                        </div>
-                                     </template>
-                                     <span v-else class="text-xs text-gray-400 italic">暂未上传</span>
-                                   </div>
-
-                                   <!-- Actions -->
-                                   <div class="flex items-center justify-end gap-2 pt-2 border-t border-gray-50 mt-2 opacity-60 group-hover:opacity-100 transition-opacity">
-                                     <!-- 预览 -->
-                                     <el-tooltip content="预览" placement="top" v-if="item.fileUrl">
-                                       <button @click="handlePreview(item)" class="p-2 rounded-full hover:bg-blue-50 text-gray-500 hover:text-blue-600 transition-all border-none outline-none focus:outline-none">
-                                         <Icon icon="ep:view" size="20" />
-                                       </button>
-                                     </el-tooltip>
-                                     
-                                     <!-- 下载 -->
-                                     <el-tooltip content="下载" placement="top" v-if="item.fileUrl">
-                                       <button @click="handleDownload(item)" class="p-2 rounded-full hover:bg-green-50 text-gray-500 hover:text-green-600 transition-all border-none outline-none focus:outline-none">
-                                         <Icon icon="ep:download" size="20" />
-                                       </button>
-                                     </el-tooltip>
-
-                                     <!-- 历史版本 -->
-                                     <el-tooltip :content="'历史版本 (' + item.versionCount + ')'" placement="top" v-if="item.versionCount > 1">
-                                        <button @click="showVersionHistory(item)" class="p-2 rounded-full hover:bg-orange-50 text-gray-500 hover:text-orange-600 transition-all relative border-none outline-none focus:outline-none">
-                                          <Icon icon="ep:clock" size="20" />
-                                          <!-- 小红点提示 -->
-                                          <span class="absolute top-0.5 right-0.5 w-1.5 h-1.5 bg-orange-500 rounded-full border border-white"></span>
-                                        </button>
-                                     </el-tooltip>
-                                   </div>
-                                </div>
-                              </div>
-                              
-                              <!-- Corner Status Mark -->
-                              <div v-if="item.fileUrl" class="absolute -top-[1px] -right-[1px] w-0 h-0 border-t-[32px] border-r-[32px] border-t-transparent border-r-green-500 rounded-tr-xl">
-                                <Icon icon="ep:check" class="absolute -right-[26px] -top-[26px] text-white text-xs"/> 
-                              </div>
-                            </div>
-                          </template>
-                          <div v-if="finalMaterials.length === 0" class="col-span-2 text-center py-8 text-gray-400">
-                            暂无终验材料
-                          </div>
-                        </div>
-                      </div>
-                    </template>
-                  </div>
-                </el-tab-pane>
-
-                <!-- 审批记录 -->
-                <el-tab-pane label="审批记录" name="opinions">
-                   <div class="p-6">
-                      <el-timeline class="pl-2">
-                        <el-timeline-item
-                          v-for="(opinion, index) in opinions"
-                          :key="index"
-                          :type="getOpinionType(opinion.result)"
-                          :color="getOpinionColor(opinion.result)"
-                          :timestamp="formatDate(opinion.createTime)"
-                          placement="top"
-                          size="large"
-                        >
-                          <div class="bg-white border border-gray-200 rounded-lg p-4 shadow-sm hover:shadow-md transition-shadow relative">
-                             <!-- Arrow -->
-                             <div class="absolute w-3 h-3 bg-white border-l border-b border-gray-200 transform rotate-45 -left-[7px] top-4"></div>
-                             
-                             <div class="flex items-center justify-between mb-2">
-                               <div class="flex items-center gap-2">
-                                  <span class="font-semibold text-gray-900">{{ opinion.reviewerRole || '审核人' }}</span>
-                                  <span class="text-gray-500 text-sm">- {{ opinion.reviewerName || '未知' }}</span>
-                                  <el-tag v-if="opinion.isLeader" type="warning" size="small" effect="dark" class="rounded-full">组长</el-tag>
-                               </div>
-                               <el-tag :type="getOpinionType(opinion.result)" effect="plain" class="font-bold uppercase tracking-wider">
-                                 {{ getOpinionLabel(opinion.result) }}
-                               </el-tag>
-                             </div>
-                             
-                             <p class="text-gray-600 text-sm leading-relaxed mb-3 bg-gray-50 p-2 rounded">
-                               {{ opinion.opinion || '无意见' }}
-                             </p>
-                             
-                             <div v-if="opinion.signatureUrl" class="border-t border-gray-100 pt-2 flex justify-end">
-                               <el-image
-                                :src="opinion.signatureUrl"
-                                class="h-10 w-auto opacity-80 hover:opacity-100"
-                                fit="contain"
-                              />
-                             </div>
-                          </div>
-                        </el-timeline-item>
-                        <el-empty v-if="opinions.length === 0" description="暂无审批记录" :image-size="100" />
-                      </el-timeline>
-                   </div>
-                </el-tab-pane>
-             </el-tabs>
-           </div>
-        </div>
-
-        <!-- 右侧：操作区 (占据 1/3 宽度) -->
-        <div class="lg:col-span-1 space-y-6">
-           <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-6 sticky top-4">
-             <h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
-               <Icon icon="ep:operation" class="text-blue-500" /> 快捷操作
-             </h3>
-             <div class="space-y-3 flex flex-col">
-                <el-button 
-                  v-if="canSubmitMaterial" 
-                  type="primary" 
-                  size="large" 
-                  class="!w-full !justify-start !text-left !py-5"
-                  @click="handleSubmitMaterial"
-                >
-                  <Icon icon="ep:upload-filled" class="mr-2 text-xl" /> 
-                  <div class="flex flex-col items-start leading-tight">
-                    <span class="font-bold">提交材料</span>
-                    <span class="text-xs opacity-80 font-normal">确认所有必填材料已上传</span>
-                  </div>
-                </el-button>
-                
-                <el-button 
-                  v-if="canAudit" 
-                  type="success" 
-                  size="large" 
-                  class="!w-full !justify-start !text-left !py-5"
-                  @click="openAuditDialog"
-                >
-                  <Icon icon="ep:checked" class="mr-2 text-xl" /> 
-                  <div class="flex flex-col items-start leading-tight">
-                    <span class="font-bold">审核通过/驳回</span>
-                    <span class="text-xs opacity-80 font-normal">对提交内容进行审批</span>
-                  </div>
-                </el-button>
-
-
-                <el-button 
-                  v-if="canSubmitRectify" 
-                  type="warning" 
-                  size="large" 
-                  class="!w-full !justify-start !text-left !py-5"
-                  @click="handleSubmitRectify"
-                >
-                  <Icon icon="ep:refresh-right" class="mr-2 text-xl" /> 
-                   <div class="flex flex-col items-start leading-tight">
-                    <span class="font-bold">提交整改</span>
-                    <span class="text-xs opacity-80 font-normal">整改完成后再次提交</span>
-                  </div>
-                </el-button>
-
-                <el-button 
-                  v-if="canSubmitFinal" 
-                  type="primary" 
-                  plain
-                  size="large" 
-                  class="!w-full !justify-start !text-left !py-5"
-                  @click="handleSubmitFinal"
-                >
-                  <Icon icon="ep:flag" class="mr-2 text-xl" /> 
-                   <div class="flex flex-col items-start leading-tight">
-                    <span class="font-bold">提交终验申请</span>
-                    <span class="text-xs opacity-80 font-normal">初审通过，进入终验</span>
-                  </div>
-                </el-button>
-
-                <el-button 
-                  v-if="canSubmitRectifyManual" 
-                  type="warning" 
-                  plain
-                  size="large" 
-                  class="!w-full !justify-start !text-left !py-5"
-                  @click="handleSubmitRectifyManual"
-                >
-                  <Icon icon="ep:document-checked" class="mr-2 text-xl" /> 
-                   <div class="flex flex-col items-start leading-tight">
-                    <span class="font-bold">上传整改说明书</span>
-                    <span class="text-xs opacity-80 font-normal">提交整改说明供管理员审核</span>
-                  </div>
-                </el-button>
-
-                <el-button 
-                  v-if="canSubmitExpertReupload" 
-                  type="danger" 
-                  plain
-                  size="large" 
-                  class="!w-full !justify-start !text-left !py-5"
-                  @click="handleSubmitExpertReupload"
-                >
-                  <Icon icon="ep:files" class="mr-2 text-xl" /> 
-                   <div class="flex flex-col items-start leading-tight">
-                    <span class="font-bold">重新提交材料</span>
-                    <span class="text-xs opacity-80 font-normal">专家驳回，需完善材料</span>
-                  </div>
-                </el-button>
-                
-                <el-divider class="!my-4" />
-                
-                <el-button @click="goBack" class="!w-full" plain>
-                  <Icon icon="ep:back" class="mr-1" /> 返回列表
-                </el-button>
-             </div>
-           </div>
-        </div>
-      </div>
+      <ReviewerView
+        v-else
+        :acceptance="acceptance"
+        :projectInfo="projectInfo"
+        :preMaterials="preMaterials"
+        :finalMaterials="finalMaterials"
+        :opinions="opinions"
+        @preview="handlePreview"
+        @download="handleDownload"
+        @show-versions="showVersionHistory"
+        @audit="auditDialogVisible = true"
+        @go-back="router.back()"
+      />
     </div>
 
-    <!-- 审核对话框 -->
-    <el-dialog
-      v-model="auditDialogVisible"
-      title="验收审核"
-      width="500px"
-      :close-on-click-modal="false"
-      class="rounded-xl overflow-hidden"
-    >
-      <div class="p-2">
-        <el-form
-          ref="auditFormRef"
-          :model="auditForm"
-          :rules="auditFormRules"
-          label-width="100px"
-          label-position="top"
-        >
-          <el-form-item label="审核结果" prop="result">
-            <div class="flex w-full gap-4">
-              <div 
-                class="flex-1 border rounded-lg p-4 cursor-pointer text-center transition-all hover:shadow-md"
-                :class="auditForm.result === 'PASS' ? 'border-green-500 bg-green-50 text-green-700' : 'border-gray-200 text-gray-500 hover:border-green-200'"
-                @click="auditForm.result = 'PASS'"
-              >
-                 <Icon icon="ep:circle-check-filled" class="text-3xl mb-2" :class="auditForm.result === 'PASS' ? 'text-green-500' : 'text-gray-300'" />
-                 <div class="font-bold">通过</div>
-              </div>
-              
-              <div 
-                class="flex-1 border rounded-lg p-4 cursor-pointer text-center transition-all hover:shadow-md"
-                :class="auditForm.result === 'REJECT' ? 'border-red-500 bg-red-50 text-red-700' : 'border-gray-200 text-gray-500 hover:border-red-200'"
-                @click="auditForm.result = 'REJECT'"
-              >
-                 <Icon icon="ep:circle-close-filled" class="text-3xl mb-2" :class="auditForm.result === 'REJECT' ? 'text-red-500' : 'text-gray-300'" />
-                 <div class="font-bold">驳回</div>
-              </div>
-            </div>
-          </el-form-item>
-          
-          <el-form-item label="审核意见" prop="opinion">
-            <el-input
-              v-model="auditForm.opinion"
-              type="textarea"
-              :rows="4"
-              :placeholder="auditForm.result === 'REJECT' ? '请务必填写驳回理由...' : '请填写审核意见（可选）...'"
-              class="!bg-gray-50"
-            />
-          </el-form-item>
-        </el-form>
-      </div>
-      <template #footer>
-        <div class="flex justify-end gap-2 pt-2">
-           <el-button @click="auditDialogVisible = false">取消</el-button>
-           <el-button type="primary" @click="handleAudit" class="px-6">确认提交</el-button>
-        </div>
-      </template>
-    </el-dialog>
-
-    <!-- 历史版本对话框 -->
-    <el-dialog
-      v-model="versionHistoryVisible"
-      :title="'历史版本 - ' + currentMaterialName"
-      width="600px"
-      :close-on-click-modal="false"
-      class="rounded-xl overflow-hidden"
-    >
-      <div class="p-4 max-h-[60vh] overflow-y-auto">
-        <el-timeline>
-          <el-timeline-item
-            v-for="(version, index) in currentVersions"
-            :key="version.id"
-            :timestamp="formatDate(version.createTime)"
-            placement="top"
-            :type="index === 0 ? 'primary' : ''"
-            :hollow="index !== 0"
-          >
-            <div class="bg-gray-50 rounded-lg p-4 border border-gray-100 hover:shadow-sm transition-shadow">
-              <div class="flex items-center justify-between mb-2">
-                <div class="flex items-center gap-2">
-                  <span class="font-bold text-gray-800">V{{ currentVersions.length - index }}</span>
-                  <el-tag v-if="index === 0" size="small" type="success" effect="dark" class="rounded-full">最新</el-tag>
-                </div>
-                <div class="flex gap-2">
-                  <el-button size="small" text bg type="primary" @click="handlePreview(version)">
-                    <Icon icon="ep:view" class="mr-1" /> 预览
-                  </el-button>
-                  <el-button size="small" text bg type="success" @click="handleDownload(version)">
-                    <Icon icon="ep:download" class="mr-1" /> 下载
-                  </el-button>
-                </div>
-              </div>
-              <div class="text-sm text-gray-600 grid grid-cols-2 gap-2 mt-2">
-                <div class="flex items-center gap-1">
-                  <Icon icon="ep:document" class="text-gray-400" />
-                  <span class="truncate" :title="version.fileName">{{ version.fileName }}</span>
-                </div>
-                <div class="flex items-center gap-1">
-                  <Icon icon="ep:data-line" class="text-gray-400" />
-                  <span>{{ formatFileSize(version.fileSize) }}</span>
-                </div>
-              </div>
-            </div>
-          </el-timeline-item>
-        </el-timeline>
-      </div>
-      <template #footer>
-        <div class="flex justify-end pt-2">
-           <el-button @click="versionHistoryVisible = false">关闭</el-button>
-        </div>
-      </template>
-    </el-dialog>
+    <!-- 共享对话框 -->
+    <AuditDialog v-model="auditDialogVisible" :acceptance="acceptance" @success="getDetail" />
+    <VersionHistoryDialog v-model="versionHistoryVisible" :materialName="currentMaterialName" :versions="currentVersions" />
   </div>
 </template>
 
 <script lang="ts" setup>
-import { formatDate } from '@/utils/formatTime'
 import * as AcceptanceApi from '@/api/project/acceptance'
 import * as ProjectApi from '@/api/project/project'
 import * as AcceptanceMaterialApi from '@/api/project/acceptanceMaterial'
 import * as AcceptanceMaterialDefApi from '@/api/project/acceptanceMaterialDef'
 import * as AcceptanceOpinionApi from '@/api/project/acceptanceOpinion'
-import { getAccessToken } from '@/utils/auth'
 import { useUserStore } from '@/store/modules/user'
 
+import AcceptanceHeader from './components/AcceptanceHeader.vue'
+import AuditDialog from './components/AuditDialog.vue'
+import VersionHistoryDialog from './components/VersionHistoryDialog.vue'
+import LiaisonView from './LiaisonView.vue'
+import ReviewerView from './ReviewerView.vue'
+import AdminView from './AdminView.vue'
+import ExpertView from './ExpertView.vue'
+
 defineOptions({ name: 'AcceptanceDetail' })
 
 const route = useRoute()
 const router = useRouter()
 const message = useMessage()
 
+// ==================== 状态 ====================
 const loading = ref(true)
-// 从路由参数读取默认tab，默认显示基本信息tab
-const activeTab = ref((route.query.tab as string) || 'info')
-
-// 验收信息
 const acceptance = ref<AcceptanceApi.AcceptanceVO>({} as AcceptanceApi.AcceptanceVO)
-// 项目信息
 const projectInfo = ref<any>({})
-// 用户名称
-const liaisonUserName = ref('')
-const serviceUserName = ref('')
-// 验收材料（联络人使用）
-const materials = ref<any[]>([])
-// 预验收材料（其他角色使用）
-const preMaterials = ref<any[]>([])
-// 终验材料（其他角色使用）
-const finalMaterials = ref<any[]>([])
-// 审批意见
+
+const materials = ref<any[]>([])       // 联络人：当前阶段材料
+const preMaterials = ref<any[]>([])    // 审核人/专家/管理员：预验收材料
+const finalMaterials = ref<any[]>([])  // 审核人/专家/管理员：终验材料
 const opinions = ref<any[]>([])
 
-// 判断当前用户是否为项目联络人
-const isLiaisonUser = computed(() => {
-  const currentUserId = useUserStore().getUser.id
-  return projectInfo.value.liaisonUserId === currentUserId
-})
-
-
-// 上传配置
-const uploadUrl = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_API_URL + '/infra/file/upload'
-const uploadHeaders = { Authorization: 'Bearer ' + getAccessToken() }
-
-// 状态映射
-const statusMap: Record<string, { label: string; type: string }> = {
-  '00': { label: '草稿', type: 'info' },
-  '05': { label: '待提交材料', type: 'warning' },
-  '10': { label: '对口人初审中', type: 'primary' },
-  '11': { label: '待整改', type: 'danger' },
-  '20': { label: '组长审核中', type: 'primary' },
-  '30': { label: '待终验申请', type: 'info' },
-  '40': { label: '管理员初审中', type: 'primary' }, // 对应 FINAL_ADMIN_REVIEW
-  '45': { label: '待组织会议', type: 'warning' }, // WAIT_ORGANIZE_MEETING
-  '50': { label: '待会议评审', type: 'info' }, // WAIT_MEETING
-  '60': { label: '待整改', type: 'danger' }, // FINAL_RECTIFY
-  '61': { label: '整改审核中', type: 'warning' }, // FINAL_RECTIFY_REVIEW
-  '62': { label: '待专家复核', type: 'warning' }, // WAIT_EXPERT_CHECK
-  '65': { label: '待上传整改说明书', type: 'warning' }, // WAIT_UPLOAD_RECTIFY
-  '66': { label: '待重新提交终验材料', type: 'danger' }, // WAIT_REUPLOAD_FINAL
-  '98': { label: '已取消', type: 'info' },
-  '99': { label: '已归档', type: 'success' }
-}
-
-const getStatusLabel = (status: string) => statusMap[status]?.label || status
-const getStatusType = (status: string) => statusMap[status]?.type || 'info'
-
-// 审核结果映射
-const getOpinionLabel = (result: string) => {
-  if (result === 'PASS') return '通过'
-  if (result === 'REJECT') return '驳回'
-  return result || '未知'
-}
-const getOpinionType = (result: string) => {
-  if (result === 'PASS') return 'success'
-  if (result === 'REJECT') return 'danger'
-  return 'info'
-}
-
-const getOpinionColor = (result: string) => {
-  if (result === 'PASS') return '#67C23A'
-  if (result === 'REJECT') return '#F56C6C'
-  return '#909399'
-}
-
-// 权限判断
-// 权限判断
-const canUploadMaterial = computed(() => {
-  const currentUserId = useUserStore().getUser.id
-  // 必须是联络人，且状态符合：待提交材料(05)、预验收待整改(11)、待终验申请(30)、终验待整改(60)、待上传整改说明书(65)、待重新提交终验材料(66)
-  return projectInfo.value.liaisonUserId === currentUserId && ['05', '11', '30', '60', '65', '66'].includes(acceptance.value.status)
-})
-
-const canSubmitMaterial = computed(() => {
-  const currentUserId = useUserStore().getUser.id
-  return projectInfo.value.liaisonUserId === currentUserId && acceptance.value.status === '05'
-})
-
-const canSubmitRectify = computed(() => {
-  const currentUserId = useUserStore().getUser.id
-  return projectInfo.value.liaisonUserId === currentUserId && ['11', '60'].includes(acceptance.value.status)
-})
-
-const canSubmitFinal = computed(() => {
-  const currentUserId = useUserStore().getUser.id
-  return projectInfo.value.liaisonUserId === currentUserId && acceptance.value.status === '30' // WAIT_FINAL_APPLY
-})
-
-const canSubmitExpertReupload = computed(() => {
-  const currentUserId = useUserStore().getUser.id
-  return projectInfo.value.liaisonUserId === currentUserId && acceptance.value.status === '66'
-})
-
-const canSubmitRectifyManual = computed(() => {
-  const currentUserId = useUserStore().getUser.id
-  return projectInfo.value.liaisonUserId === currentUserId && acceptance.value.status === '65'
-})
-
-const showActions = computed(() => {
-  return canSubmitMaterial.value || canSubmitRectify.value || canSubmitFinal.value || canAudit.value || canSubmitExpertReupload.value || canSubmitRectifyManual.value
-})
-
-// 是否可以审核 (对口人初审: 10, 专家组长审核: 20, 管理员终验初审: 40)
-const canAudit = computed(() => {
-  const currentUserId = useUserStore().getUser.id
-  const status = acceptance.value.status
-  // 状态 10: 对口人初审，只有对口人可审核
-  if (status === '10') {
-    return projectInfo.value.serviceUserId === currentUserId
-  }
-  // 状态 20: 专家组长审核，显示审核按钮（后端会校验权限）
-  if (status === '20') {
-    return true
-  }
-  // 状态 40: 管理员终验初审，显示审核按钮（后端会校验权限）
-  if (status === '40') {
-    return true
-  }
-  return false
-})
-
-// 审核对话框
 const auditDialogVisible = ref(false)
-const auditForm = ref({
-  result: '',
-  opinion: ''
-})
-const auditFormRef = ref()
-const auditFormRules = {
-  result: [{ required: true, message: '请选择审核结果', trigger: 'change' }],
-  opinion: [{ required: true, message: '请填写审核意见', trigger: 'blur' }]
-}
-
-// 历史版本对话框
 const versionHistoryVisible = ref(false)
 const currentVersions = ref<any[]>([])
 const currentMaterialName = ref('')
 
-/** 显示历史版本 */
+// ==================== 角色判断（4角色） ====================
+/**
+ * 角色分发优先级：
+ * 1. liaison  — 项目联络人 (liaisonUserId === currentUserId)
+ * 2. admin    — 管理员：终验初审(40)、组织会议(45)、会议评审(50)、整改审核(61)
+ * 3. expert   — 专家：专家复核(62)
+ * 4. reviewer — 对口人/组长：预验收阶段 (10, 20) 及其他默认
+ */
+const userRole = computed<'liaison' | 'admin' | 'expert' | 'reviewer'>(() => {
+  const userId = useUserStore().getUser.id
+  if (projectInfo.value.liaisonUserId === userId) return 'liaison'
+  const s = acceptance.value.status
+  if (['40', '45', '50', '61'].includes(s)) return 'admin'
+  if (s === '62') return 'expert'
+  return 'reviewer'
+})
+
+// ==================== 操作方法 ====================
 const showVersionHistory = (item: any) => {
   currentMaterialName.value = item.materialName
   currentVersions.value = item.versions || []
   versionHistoryVisible.value = true
 }
 
-/** 格式化文件大小 */
-const formatFileSize = (bytes: number) => {
-  if (!bytes) return '0 B'
-  const k = 1024
-  const sizes = ['B', 'KB', 'MB', 'GB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return Math.round(bytes / Math.pow(k, i) * 100) / 100 + ' ' + sizes[i]
-}
-
-/** 打开审核对话框 */
-const openAuditDialog = () => {
-  auditForm.value = { result: '', opinion: '' }
-  auditDialogVisible.value = true
-}
-
-/** 提交审核 */
-const handleAudit = async () => {
-  if (!auditFormRef.value) return
-  const valid = await auditFormRef.value.validate().catch(() => false)
-  if (!valid) return
-
-  try {
-    const auditData = {
-      acceptanceId: acceptance.value.id,
-      result: auditForm.value.result,
-      opinion: auditForm.value.opinion
-    }
-    
-    // 根据状态调用不同的审核接口
-    const status = acceptance.value.status
-    if (status === '40') {
-      // 管理员终验初审
-      await AcceptanceApi.auditFinalAdmin(auditData)
-    } else if (status === '61') {
-      // 整改审核
-      await AcceptanceApi.auditRectify({
-        ...auditData,
-        needExpert: false, // 简化版，实际可能需要弹窗选择
-        targetExpertIds: []
-      } as any)
-    } else if (status === '62') {
-      // 专家复核
-      await AcceptanceApi.expertCheck(auditData)
-    } else if (status === '50') {
-      // 会议评审结果
-      await AcceptanceApi.submitMeetingResult({
-        acceptanceId: acceptance.value.id,
-        meetingResult: auditForm.value.result,
-        opinion: auditForm.value.opinion
-      })
-    } else {
-      // 预验收审核（对口人初审10、组长审核20）
-      await AcceptanceApi.auditPreAcceptance(auditData)
-    }
-    
-    message.success('审核提交成功')
-    auditDialogVisible.value = false
-    await getDetail()
-  } catch (error) {
-    // Error handled by request interceptor
-  }
-}
-
-/** 提交终验申请 */
-const handleSubmitFinal = async () => {
-    try {
-        await message.confirm('确定提交终验申请吗？')
-        await AcceptanceApi.submitFinalAcceptance({ acceptanceId: acceptance.value.id })
-        message.success('终验申请提交成功')
-        await getDetail()
-    } catch {}
-}
-
-/** 提交整改说明书 */
-const handleSubmitRectifyManual = async () => {
-    try {
-        await message.confirm('确定提交整改说明书吗？')
-        await AcceptanceApi.submitRectifyManual(acceptance.value.id)
-        message.success('整改说明书提交成功')
-        await getDetail()
-    } catch {}
-}
-
-/** 重新提交终验材料 */
-const handleSubmitExpertReupload = async () => {
-    try {
-        await message.confirm('确定重新提交终验材料吗？')
-        await AcceptanceApi.submitExpertReupload(acceptance.value.id)
-        message.success('材料提交成功')
-        await getDetail()
-    } catch {}
-}
-
-/** 获取验收详情 */
-const getDetail = async () => {
-  loading.value = true
-  try {
-    const id = Number(route.params.id)
-    acceptance.value = await AcceptanceApi.getAcceptance(id)
-    
-    // 获取项目信息（后端已填充用户名称）
-    if (acceptance.value.projectId) {
-      projectInfo.value = await ProjectApi.getProject(acceptance.value.projectId)
-      // 直接使用后端返回的用户名称
-      liaisonUserName.value = projectInfo.value.liaisonUserName || '-'
-      serviceUserName.value = projectInfo.value.serviceUserName || '-'
-    }
-    
-    // 获取验收材料
-    // 2. 获取已上传材料
-    const uploads = await AcceptanceMaterialApi.getListByAcceptanceId(id) as unknown as any[]
-    
-    // 材料合并辅助函数
-    const mergeMaterials = (defs: any[]) => {
-      return defs.map((def: any) => {
-        // 查找该材料代码对应的所有上传记录
-        const allUploads = uploads.filter((u: any) => u.materialCode === def.materialCode)
-        // 按ID倒序排序（最新的在前）
-        const sortedUploads = allUploads.sort((a: any, b: any) => b.id - a.id)
-        // 取最新的一条
-        const upload = sortedUploads.length > 0 ? sortedUploads[0] : undefined
-        
-        return {
-          ...def,
-          materialType: def.requiredFlag ? '必填' : '可选',
-          isRequired: def.requiredFlag, // 方便模板使用
-          fileUrl: upload?.fileUrl,
-          fileName: upload?.fileName,
-          fileSize: upload?.fileSize,
-          uploadId: upload?.id,
-          acceptanceId: id,
-          // 新增：保存所有历史版本
-          versions: sortedUploads, // 包含所有上传记录
-          versionCount: sortedUploads.length // 版本数量
-        }
-      })
-    }
-    
-    // 判断当前用户是否为联络人
-    const currentUserId = useUserStore().getUser.id
-    const isLiaison = projectInfo.value.liaisonUserId === currentUserId
-    
-    if (isLiaison) {
-      // 联络人：只显示当前阶段材料
-      // 1. 获取材料定义（状态30时需要显示终验材料）
-      const materialType = acceptance.value.status === '30' ? 'FINAL' : acceptance.value.acceptanceType
-      const defs = await AcceptanceMaterialDefApi.getListByType(materialType)
-      // 3. 合并数据
-      materials.value = mergeMaterials(defs)
-    } else {
-      // 其他角色：显示预验收和终验两个阶段的材料
-      // 1. 获取预验收和终验材料定义
-      const preDefs = await AcceptanceMaterialDefApi.getListByType('PRE')
-      const finalDefs = await AcceptanceMaterialDefApi.getListByType('FINAL')
-      // 3. 分别合并数据
-      preMaterials.value = mergeMaterials(preDefs)
-      finalMaterials.value = mergeMaterials(finalDefs)
-    }
-    
-    // 获取审批意见列表
-    // 获取审批意见列表
-    const res = await AcceptanceOpinionApi.getListByAcceptanceId(id)
-    opinions.value = res.sort((a: any, b: any) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())
-  } catch (error) {
-    console.error(error)
-    message.error('获取验收详情失败')
-  } finally {
-    loading.value = false
-  }
-}
-
-/** 返回 */
-const goBack = () => {
-  router.back()
-}
-
-/** 获取文件完整URL */
 const getFileUrl = (url: string) => {
   if (!url) return ''
-  if (url.startsWith('http') || url.startsWith('https')) {
-    return url
-  }
-  // 处理相对路径，拼接后端地址
+  if (url.startsWith('http')) return url
   return import.meta.env.VITE_BASE_URL + url
 }
 
-/** 预览文件 */
 const handlePreview = (row: any) => {
   const url = getFileUrl(row.fileUrl)
-  if (url) {
-    window.open(url, '_blank')
-  }
+  if (url) window.open(url, '_blank')
 }
 
-/** 下载文件 */
 const handleDownload = (row: any) => {
   const url = getFileUrl(row.fileUrl)
   if (url) {
@@ -984,43 +152,36 @@ const handleDownload = (row: any) => {
   }
 }
 
-/** 上传成功 */
 const handleUploadSuccess = async (response: any, file: any, row: any) => {
   if (response.code === 0) {
     try {
-      // 调用后端保存材料信息
       await AcceptanceMaterialApi.createAcceptanceMaterial({
         acceptanceId: row.acceptanceId,
         materialCode: row.materialCode,
-        fileName: file.name, // 使用原始文件名
+        fileName: file.name,
         fileUrl: response.data,
         fileSize: file.size || 0,
         fileType: file.name.split('.').pop(),
         version: 1,
         remark: ''
       } as any)
-      
       message.success('上传成功')
-      // 刷新列表
       getDetail()
-    } catch (error) {
-       message.error('保存材料记录失败')
+    } catch {
+      message.error('保存材料记录失败')
     }
   } else {
     message.error('上传失败: ' + response.msg)
   }
 }
 
-/** 提交材料 */
 const handleSubmitMaterial = async () => {
   try {
-    // 校验必填项
     const missing = materials.value.filter((m: any) => m.isRequired && !m.fileUrl)
     if (missing.length > 0) {
       message.warning(`请先上传：${missing.map((m: any) => m.materialName).join('、')}`)
       return
     }
-
     await message.confirm('确定提交材料吗？提交后将进入审核流程。')
     await AcceptanceApi.submitMaterials(acceptance.value.id)
     message.success('提交成功')
@@ -1028,7 +189,6 @@ const handleSubmitMaterial = async () => {
   } catch {}
 }
 
-/** 提交整改 */
 const handleSubmitRectify = async () => {
   try {
     await message.confirm('确定提交整改吗？')
@@ -1042,104 +202,102 @@ const handleSubmitRectify = async () => {
   } catch {}
 }
 
-/** 提交终验申请 */
 const handleSubmitFinal = async () => {
   try {
-    // 校验终验必填材料（前端预校验，后端也会校验）
     const missing = materials.value.filter((m: any) => m.isRequired && !m.fileUrl)
     if (missing.length > 0) {
       message.warning(`请先上传终验必填材料：${missing.map((m: any) => m.materialName).join('、')}`)
       return
     }
-
-    await message.confirm('确定提交终验申请吗？提交后将进入终验审核流程。')
+    await message.confirm('确定提交终验申请吗？')
     await AcceptanceApi.submitFinalAcceptance({ acceptanceId: acceptance.value.id })
     message.success('终验申请提交成功')
     await getDetail()
   } catch {}
 }
 
-/** 流程步骤 */
-const activeStep = computed(() => {
-  const status = acceptance.value.status
-  if (['00', '05'].includes(status)) return 0
-  if (['10', '11', '20'].includes(status)) return 1
-  if (['30'].includes(status)) return 2
-  if (['40', '50', '60', '61', '62'].includes(status)) return 3
-  if (['99'].includes(status)) return 4
-  return 0
-})
-
-/** 获取文件图标 */
-const getFileIcon = (fileName?: string) => {
-  if (!fileName) return 'ep:document'
-  const ext = fileName.split('.').pop()?.toLowerCase()
-  if (['doc', 'docx'].includes(ext)) return 'ep:document'
-  if (['xls', 'xlsx'].includes(ext)) return 'ep:data-analysis'
-  if (['pdf'].includes(ext)) return 'ep:document-copy'
-  if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) return 'ep:picture'
-  if (['zip', 'rar'].includes(ext)) return 'ep:folder'
-  return 'ep:document'
+const handleSubmitRectifyManual = async () => {
+  try {
+    await message.confirm('确定提交整改说明书吗？')
+    await AcceptanceApi.submitRectifyManual(acceptance.value.id)
+    message.success('整改说明书提交成功')
+    await getDetail()
+  } catch {}
 }
 
-/** 获取文件图标背景色 */
-const getFileIconColor = (fileName?: string) => {
-  if (!fileName) return 'bg-gray-400'
-  const ext = fileName.split('.').pop()?.toLowerCase()
-  if (['doc', 'docx'].includes(ext)) return 'bg-blue-500'
-  if (['xls', 'xlsx'].includes(ext)) return 'bg-green-500'
-  if (['pdf'].includes(ext)) return 'bg-red-500'
-  if (['jpg', 'jpeg', 'png', 'gif'].includes(ext)) return 'bg-purple-500'
-  if (['zip', 'rar'].includes(ext)) return 'bg-orange-500'
-  return 'bg-gray-400'
+const handleSubmitExpertReupload = async () => {
+  try {
+    await message.confirm('确定重新提交终验材料吗？')
+    await AcceptanceApi.submitExpertReupload(acceptance.value.id)
+    message.success('材料提交成功')
+    await getDetail()
+  } catch {}
 }
 
-/** 初始化 */
-onMounted(() => {
-  if (route.query.tab) {
-    activeTab.value = route.query.tab as string
+/** 跳转到会议管理页 */
+const handleOrganizeMeeting = () => {
+  router.push({
+    path: '/project/acceptance-meeting',
+    query: { acceptanceId: String(acceptance.value.id) }
+  })
+}
+
+// ==================== 数据加载 ====================
+const getDetail = async () => {
+  loading.value = true
+  try {
+    const id = Number(route.params.id)
+    acceptance.value = await AcceptanceApi.getAcceptance(id)
+
+    if (acceptance.value.projectId) {
+      projectInfo.value = await ProjectApi.getProject(acceptance.value.projectId)
+    }
+
+    const uploads = await AcceptanceMaterialApi.getListByAcceptanceId(id) as unknown as any[]
+
+    const mergeMaterials = (defs: any[]) => {
+      return defs.map((def: any) => {
+        const allUploads = uploads.filter((u: any) => u.materialCode === def.materialCode)
+        const sortedUploads = allUploads.sort((a: any, b: any) => b.id - a.id)
+        const upload = sortedUploads[0]
+        return {
+          ...def,
+          materialType: def.requiredFlag ? '必填' : '可选',
+          isRequired: def.requiredFlag,
+          fileUrl: upload?.fileUrl,
+          fileName: upload?.fileName,
+          fileSize: upload?.fileSize,
+          uploadId: upload?.id,
+          acceptanceId: id,
+          versions: sortedUploads,
+          versionCount: sortedUploads.length
+        }
+      })
+    }
+
+    const currentUserId = useUserStore().getUser.id
+    const isLiaison = projectInfo.value.liaisonUserId === currentUserId
+
+    if (isLiaison) {
+      const materialType = acceptance.value.status === '30' ? 'FINAL' : acceptance.value.acceptanceType
+      const defs = await AcceptanceMaterialDefApi.getListByType(materialType)
+      materials.value = mergeMaterials(defs)
+    } else {
+      const preDefs = await AcceptanceMaterialDefApi.getListByType('PRE')
+      const finalDefs = await AcceptanceMaterialDefApi.getListByType('FINAL')
+      preMaterials.value = mergeMaterials(preDefs)
+      finalMaterials.value = mergeMaterials(finalDefs)
+    }
+
+    const res = await AcceptanceOpinionApi.getListByAcceptanceId(id)
+    opinions.value = res.sort((a: any, b: any) => new Date(b.createTime).getTime() - new Date(a.createTime).getTime())
+  } catch (error) {
+    console.error(error)
+    message.error('获取验收详情失败')
+  } finally {
+    loading.value = false
   }
-  getDetail()
-})
+}
+
+onMounted(() => getDetail())
 </script>
-
-<style lang="scss" scoped>
-.inline-block {
-  display: inline-block;
-}
-
-/* 覆盖 el-steps 进行中状态的颜色为绿色 */
-:deep(.el-step__head.is-process) {
-  color: #3b82f6;
-  border-color: #3b82f6;
-}
-:deep(.el-step__title.is-process) {
-  color: #3b82f6;
-  font-weight: bold;
-}
-:deep(.el-step__description.is-process) {
-  color: #3b82f6;
-}
-
-/* Custom Tabs Styling */
-:deep(.el-tabs__header) {
-  margin-bottom: 0;
-  border-bottom: 1px solid #f3f4f6;
-  background-color: #f9fafb;
-}
-:deep(.el-tabs__item) {
-  height: 50px;
-  font-size: 15px;
-  font-weight: 500;
-  color: #6b7280;
-}
-:deep(.el-tabs__item.is-active) {
-  color: #2563eb;
-  background-color: #fff;
-  border-top: 2px solid #2563eb;
-}
-:deep(.el-tabs__nav-wrap::after) {
-  height: 0;
-}
-
-</style>
diff --git a/src/views/project/acceptance/index.vue b/src/views/project/acceptance/index.vue
index f876e3abe..1182866bd 100644
--- a/src/views/project/acceptance/index.vue
+++ b/src/views/project/acceptance/index.vue
@@ -146,6 +146,7 @@
               <Icon icon="ep:check" class="mr-1" /> 审核
             </el-button>
             <el-button
+              v-if="!['98', '99'].includes(scope.row.status)"
               link
               type="warning"
               @click="handleForceArchive(scope.row)"
@@ -155,6 +156,7 @@
               <Icon icon="ep:folder-checked" class="mr-1" /> 归档
             </el-button>
             <el-button
+              v-if="!['98', '99'].includes(scope.row.status)"
               link
               type="danger"
               @click="handleCancel(scope.row)"
diff --git a/src/views/project/acceptance/todo/index.vue b/src/views/project/acceptance/todo/index.vue
index a22a67e11..cfbdbeee0 100644
--- a/src/views/project/acceptance/todo/index.vue
+++ b/src/views/project/acceptance/todo/index.vue
@@ -1,152 +1,271 @@
 <template>
-  <ContentWrap>
-    <div class="mb-4">
-      <el-alert
-        title="待办任务"
-        type="info"
-        description="以下是您需要处理的验收任务"
-        :closable="false"
-      />
+  <div class="app-container">
+    <!-- 顶部统计 -->
+    <div class="todo-header">
+      <div class="header-info">
+        <div class="header-title">
+          <Icon icon="ep:bell" class="header-icon" />
+          我的验收任务
+        </div>
+        <div class="header-sub">管理您参与的所有验收任务</div>
+      </div>
+      <div class="header-stats">
+        <div class="stat-item">
+          <span class="stat-num pending">{{ todoList.length }}</span>
+          <span class="stat-label">待处理</span>
+        </div>
+        <div class="stat-divider"></div>
+        <div class="stat-item">
+          <span class="stat-num done">{{ doneList.length }}</span>
+          <span class="stat-label">已处理</span>
+        </div>
+      </div>
     </div>
-    
-    <el-table v-loading="loading" :data="list" stripe>
-      <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true" />
-      <el-table-column label="项目编号" align="center" prop="projectCode" width="150" />
-      <el-table-column label="验收类型" align="center" prop="acceptanceType" width="100">
-        <template #default="scope">
-          <el-tag v-if="scope.row.acceptanceType === 'PRE'" type="info">预验收</el-tag>
-          <el-tag v-else-if="scope.row.acceptanceType === 'FINAL'" type="primary">终验</el-tag>
-          <el-tag v-else>{{ scope.row.acceptanceType }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="验收状态" align="center" prop="statusDesc" width="120" />
-      <el-table-column label="轮次" align="center" prop="round" width="80" />
-      <el-table-column label="任务类型" align="center" prop="taskTypeDesc" width="150" />
-      <el-table-column label="任务名称" align="center" prop="taskName" :show-overflow-tooltip="true" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180"
-      />
-      <el-table-column label="操作" align="center" width="150" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="handleProcess(scope.row)"
-          >
-            <Icon icon="ep:check" /> 处理
-          </el-button>
-          <el-button
-            link
-            type="info"
-            @click="handleView(scope.row)"
-          >
-            <Icon icon="ep:view" /> 查看
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </ContentWrap>
 
-  <!-- 审核表单弹窗 -->
-  <AcceptanceAuditForm ref="auditFormRef" @success="getList" />
+    <!-- 标签切换 -->
+    <div class="tab-bar">
+      <span class="tab-item" :class="{active: activeTab === 'todo'}" @click="activeTab = 'todo'">
+        <Icon icon="ep:clock" /> 待处理
+        <span class="tab-badge" v-if="todoList.length > 0">{{ todoList.length }}</span>
+      </span>
+      <span class="tab-item" :class="{active: activeTab === 'done'}" @click="activeTab = 'done'">
+        <Icon icon="ep:circle-check" /> 已处理
+      </span>
+    </div>
+
+    <!-- 任务卡片列表 -->
+    <div v-loading="loading" class="todo-list">
+      <template v-if="activeTab === 'todo'">
+        <el-empty v-if="!loading && todoList.length === 0" description="暂无待办任务，您可以放心休息 🎉" />
+        <div v-for="item in todoList" :key="item.acceptanceId + '-todo'" class="todo-card" @click="handleProcess(item)">
+          <div class="card-stripe" :class="item.acceptanceType === 'PRE' ? 'stripe-pre' : 'stripe-final'"></div>
+          <div class="card-content">
+            <div class="card-title-row">
+              <span class="project-name">{{ item.projectName }}</span>
+              <div class="tags">
+                <el-tag :type="item.acceptanceType === 'PRE' ? 'info' : 'primary'" size="small" effect="light">{{ item.acceptanceType === 'PRE' ? '预验收' : '终验' }}</el-tag>
+                <el-tag type="warning" size="small" effect="light">{{ item.statusDesc }}</el-tag>
+              </div>
+            </div>
+            <div class="card-meta-row">
+              <div class="meta-item highlight"><Icon icon="ep:aim" /><span>{{ item.taskName || item.taskTypeDesc }}</span></div>
+              <div class="meta-item"><Icon icon="ep:document" /><span>{{ item.projectCode }}</span></div>
+              <div class="meta-item"><Icon icon="ep:refresh" /><span>第 {{ item.round }} 轮</span></div>
+              <div class="meta-item"><Icon icon="ep:clock" /><span>{{ formatDate(item.createTime) }}</span></div>
+            </div>
+          </div>
+          <div class="card-actions" @click.stop>
+            <el-button type="primary" class="process-btn" @click.stop="handleProcess(item)">
+              <Icon icon="ep:check" style="margin-right: 4px;" /> 立即处理
+            </el-button>
+          </div>
+        </div>
+      </template>
+
+      <template v-if="activeTab === 'done'">
+        <el-empty v-if="!loading && doneList.length === 0" description="暂无已处理的验收任务" />
+        <div v-for="item in doneList" :key="item.acceptanceId + '-done'" class="todo-card done-card" @click="handleView(item)">
+          <div class="card-stripe stripe-done"></div>
+          <div class="card-content">
+            <div class="card-title-row">
+              <span class="project-name">{{ item.projectName }}</span>
+              <div class="tags">
+                <el-tag :type="item.acceptanceType === 'PRE' ? 'info' : 'primary'" size="small" effect="light">{{ item.acceptanceType === 'PRE' ? '预验收' : '终验' }}</el-tag>
+                <el-tag type="success" size="small" effect="light">已处理</el-tag>
+              </div>
+            </div>
+            <div class="card-meta-row">
+              <div class="meta-item"><Icon icon="ep:document" /><span>{{ item.projectCode }}</span></div>
+              <div class="meta-item"><Icon icon="ep:refresh" /><span>第 {{ item.round }} 轮</span></div>
+              <div class="meta-item"><Icon icon="ep:clock" /><span>{{ formatDate(item.createTime) }}</span></div>
+            </div>
+          </div>
+          <div class="card-actions" @click.stop>
+            <el-button plain @click.stop="handleView(item)">查看详情</el-button>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
 </template>
 
 <script lang="ts" setup>
-import { dateFormatter } from '@/utils/formatTime'
 import * as AcceptanceApi from '@/api/project/acceptance'
-import AcceptanceAuditForm from '../AcceptanceAuditForm.vue'
+import dayjs from 'dayjs'
 
 defineOptions({ name: 'AcceptanceTodo' })
 
 const router = useRouter()
 
-const loading = ref(true) // 列表的加载中
-const list = ref<AcceptanceApi.AcceptanceTodoVO[]>([]) // 列表的数据
+const loading = ref(false)
+const activeTab = ref<'todo' | 'done'>('todo')
+const todoList = ref<AcceptanceApi.AcceptanceTodoVO[]>([])
+const doneList = ref<AcceptanceApi.AcceptanceTodoVO[]>([])
 
-/** 查询待办列表 */
-const getList = async () => {
+const loadAll = async () => {
   loading.value = true
   try {
-    list.value = await AcceptanceApi.getTodoList()
+    const [todo, done] = await Promise.all([
+      AcceptanceApi.getTodoList(),
+      AcceptanceApi.getDoneList()
+    ])
+    todoList.value = todo
+    doneList.value = done
   } finally {
     loading.value = false
   }
 }
 
-/** 处理任务 */
-const auditFormRef = ref()
 const handleProcess = (row: AcceptanceApi.AcceptanceTodoVO) => {
-  // 根据任务类型打开不同的处理界面
-  // taskType 来自 BPMN 的 taskDefinitionKey
   const taskType = row.taskType
-  
-  // 审核类任务：打开审核弹窗
-  if (['task_pre_liaison_review', 'task_pre_leader_review', 'task_expert_check', 'task_rectify_review', 'task_meeting_review'].includes(taskType)) {
-    auditFormRef.value.open({
-      id: row.acceptanceId,
-      acceptanceType: row.acceptanceType,
-      status: row.status
-    }, getAuditType(taskType))
-  } 
-  // 管理员终验初审：跳转到详情页
-  else if (taskType === 'task_final_admin_review') {
+  if (['task_liaison_submit', 'task_pre_rectify', 'task_final_rectify', 'task_final_apply', 'task_lianluoren_upload_rectify', 'task_lianluoren_reupload_final_materies'].includes(taskType)) {
+    router.push({ path: '/project/acceptance/detail/' + row.acceptanceId, query: { tab: 'materials' } })
+  } else {
     router.push({ path: '/project/acceptance/detail/' + row.acceptanceId, query: { tab: 'info' } })
   }
-  // 材料提交类任务：跳转到详情页的材料tab
-  else if (['task_liaison_submit', 'task_pre_rectify', 'task_final_rectify', 'task_final_apply', 'task_lianluoren_upload_rectify', 'task_lianluoren_reupload_final_materies'].includes(taskType)) {
-    router.push({ path: '/project/acceptance/detail/' + row.acceptanceId, query: { tab: 'materials' } })
-  } 
-  // 默认查看详情
-  else {
-    handleView(row)
-  }
 }
 
-/** 获取审核类型 */
-const getAuditType = (taskType: string) => {
-  switch (taskType) {
-    case 'task_pre_liaison_review':  // 对口人预验收初审
-    case 'task_pre_leader_review':   // 预验收组长审核
-      return 'pre-audit'
-    case 'task_final_admin_review':  // 管理员终验初审
-      return 'final-admin'
-    case 'task_meeting_review':      // 会议评审
-      return 'meeting-review'
-    case 'task_rectify_review':      // 整改审核
-      return 'rectify-review'
-    case 'task_expert_check':        // 专家复核
-      return 'expert-check'
-    default:
-      return 'pre-audit'
-  }
-}
-
-/** 提交整改 */
-const message = useMessage()
-const handleSubmitRectify = async (row: AcceptanceApi.AcceptanceTodoVO) => {
-  try {
-    await message.confirm('确定提交整改吗？')
-    if (row.acceptanceType === 'PRE') {
-      await AcceptanceApi.submitPreRectify(row.acceptanceId)
-    } else {
-      await AcceptanceApi.submitFinalRectify(row.acceptanceId)
-    }
-    message.success('整改提交成功')
-    await getList()
-  } catch {}
-}
-
-/** 查看详情 */
 const handleView = (row: AcceptanceApi.AcceptanceTodoVO) => {
   router.push({ path: '/project/acceptance/detail/' + row.acceptanceId, query: { tab: 'info' } })
 }
 
-/** 初始化 **/
-onMounted(() => {
-  getList()
-})
+const formatDate = (d: any) => {
+  if (!d) return ''
+  return dayjs(d).format('YYYY-MM-DD HH:mm')
+}
+
+onMounted(() => loadAll())
 </script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
+}
+
+.todo-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+  border-radius: 12px;
+  padding: 20px 28px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+.header-info { display: flex; flex-direction: column; gap: 6px; }
+.header-title { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 700; color: #1a2e4a; }
+.header-icon { font-size: 22px; color: #295abc; }
+.header-sub { font-size: 13px; color: #909399; }
+
+.header-stats { display: flex; align-items: center; gap: 20px; }
+.stat-item { display: flex; flex-direction: column; align-items: center; }
+.stat-num { font-size: 28px; font-weight: 700; line-height: 1; }
+.stat-num.pending { color: #e6a23c; }
+.stat-num.done { color: #67c23a; }
+.stat-label { font-size: 12px; color: #909399; margin-top: 4px; }
+.stat-divider { width: 1px; height: 40px; background: #ebeef5; }
+
+/* Tab bar */
+.tab-bar {
+  display: flex;
+  gap: 4px;
+  background: #fff;
+  border-radius: 12px;
+  padding: 8px 12px;
+  margin-bottom: 16px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
+}
+
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 20px;
+  border-radius: 8px;
+  font-size: 14px;
+  cursor: pointer;
+  color: #606266;
+  transition: all 0.2s ease;
+  user-select: none;
+  position: relative;
+}
+
+.tab-item:hover { background: #f5f7fa; }
+.tab-item.active {
+  background: #295abc;
+  color: #fff;
+  font-weight: 600;
+}
+
+.tab-badge {
+  background: #e6a23c;
+  color: #fff;
+  border-radius: 10px;
+  padding: 1px 7px;
+  font-size: 11px;
+  font-weight: 600;
+  margin-left: 2px;
+}
+
+/* Task cards */
+.todo-list { display: flex; flex-direction: column; gap: 12px; }
+
+.todo-card {
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+  display: flex;
+  align-items: stretch;
+  overflow: hidden;
+  transition: box-shadow 0.25s ease, transform 0.25s ease;
+  cursor: pointer;
+}
+
+.todo-card:hover {
+  box-shadow: 0 6px 20px rgba(41, 90, 188, 0.08);
+  transform: translateY(-2px);
+}
+
+.done-card { opacity: 0.85; }
+.done-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
+
+.card-stripe { width: 5px; flex-shrink: 0; }
+.stripe-pre { background: #909399; }
+.stripe-final { background: #295abc; }
+.stripe-done { background: #67c23a; }
+
+.card-content { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
+
+.card-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
+.project-name { font-size: 15px; font-weight: 600; color: #1a2e4a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 380px; }
+.tags { display: flex; gap: 6px; flex-shrink: 0; }
+
+.card-meta-row { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
+.meta-item { display: flex; align-items: center; gap: 5px; font-size: 13px; color: #909399; }
+.meta-item.highlight { color: #295abc; font-weight: 500; font-size: 14px; }
+
+.card-actions {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-end;
+  gap: 10px;
+  padding: 16px 22px;
+  border-left: 1px solid #f0f2f5;
+  flex-shrink: 0;
+}
+
+.process-btn {
+  border-radius: 20px;
+  padding: 10px 22px;
+  font-weight: 500;
+  background: #295abc;
+  border: none;
+  box-shadow: 0 4px 10px rgba(41, 90, 188, 0.2);
+  transition: all 0.3s;
+}
+.process-btn:hover { background: #1d439b; box-shadow: 0 6px 15px rgba(41, 90, 188, 0.3); transform: translateY(-1px); }
+</style>
diff --git a/src/views/project/project/index.vue b/src/views/project/project/index.vue
index 8c7f5648c..21b8a4daf 100644
--- a/src/views/project/project/index.vue
+++ b/src/views/project/project/index.vue
@@ -1,162 +1,126 @@
 <template>
-  <ContentWrap>
+  <div class="app-container">
     <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="项目编号" prop="projectCode">
-        <el-input
-          v-model="queryParams.projectCode"
-          placeholder="请输入项目编号"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="项目名称" prop="projectName">
-        <el-input
-          v-model="queryParams.projectName"
-          placeholder="请输入项目名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="申报单位" prop="applyUnit">
-        <el-input
-          v-model="queryParams.applyUnit"
-          placeholder="请输入申报单位"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="请选择状态"
-          clearable
-          class="!w-240px"
-        >
-          <el-option label="待验收" value="0" />
-          <el-option label="验收中" value="1" />
-          <el-option label="已完成" value="2" />
-        </el-select>
-      </el-form-item>
-      <el-form-item label="创建时间" prop="createTime">
-        <el-date-picker
-          v-model="queryParams.createTime"
-          value-format="YYYY-MM-DD HH:mm:ss"
-          type="datetimerange"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-          class="!w-240px"
-        />
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" />搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" />重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['project:project:create']"
-        >
-          <Icon icon="ep:plus" /> 新增
+    <el-card shadow="never" class="search-wrapper">
+      <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
+        <el-form-item label="项目名称" prop="projectName">
+          <el-input v-model="queryParams.projectName" placeholder="请输入项目名称" clearable class="!w-240px" @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="项目编号" prop="projectCode">
+          <el-input v-model="queryParams.projectCode" placeholder="请输入项目编号" clearable class="!w-240px" @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="申报单位" prop="applyUnit">
+          <el-input v-model="queryParams.applyUnit" placeholder="请输入申报单位" clearable class="!w-240px" @keyup.enter="handleQuery" />
+        </el-form-item>
+        <el-form-item label="项目状态" prop="status">
+          <el-select v-model="queryParams.status" placeholder="请选择项目状态" clearable class="!w-240px">
+            <el-option label="待验收" value="0" />
+            <el-option label="验收中" value="1" />
+            <el-option label="已完成" value="2" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="创建时间" prop="createTime">
+          <el-date-picker v-model="queryParams.createTime" value-format="YYYY-MM-DD HH:mm:ss" type="daterange" start-placeholder="开始日期" end-placeholder="结束日期" class="!w-240px" />
+        </el-form-item>
+        <el-form-item>
+          <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
+        </el-form-item>
+      </el-form>
+      
+      <!-- 操作工具栏 -->
+      <div class="action-toolbar">
+        <el-button type="primary" plain @click="openForm('create')" v-hasPermi="['project:project:create']">
+          <Icon icon="ep:plus" class="mr-5px" /> 新增项目
         </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-          v-hasPermi="['project:project:export']"
-        >
-          <Icon icon="ep:download" />导出
+        <el-button type="success" plain @click="handleExport" :loading="exportLoading" v-hasPermi="['project:project:export']">
+          <Icon icon="ep:download" class="mr-5px" /> 导出
         </el-button>
-        <el-button
-          type="danger"
-          plain
-          :disabled="checkedIds.length === 0"
-          @click="handleDeleteBatch"
-          v-hasPermi="['project:project:delete']"
-        >
-          <Icon icon="ep:delete" />批量删除
+        <el-button type="danger" plain @click="handleDeleteBatch" :disabled="checkedIds.length === 0" v-hasPermi="['project:project:delete']">
+          <Icon icon="ep:delete" class="mr-5px" /> 批量删除
         </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+      </div>
+    </el-card>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" @selection-change="handleRowCheckboxChange">
-      <el-table-column type="selection" width="55" />
-      <el-table-column label="项目ID" align="center" prop="id" width="80" />
-      <el-table-column label="立项编号" align="center" prop="projectCode" width="150" />
-      <el-table-column label="合同编号" align="center" prop="contractCode" width="150" />
-      <el-table-column label="项目名称" align="center" prop="projectName" :show-overflow-tooltip="true" />
-      <el-table-column label="申报单位" align="center" prop="applyUnit" :show-overflow-tooltip="true" />
-      <el-table-column label="状态" align="center" prop="status" width="100">
-        <template #default="scope">
-          <el-tag v-if="scope.row.status === '0'" type="info">待验收</el-tag>
-          <el-tag v-else-if="scope.row.status === '1'" type="warning">验收中</el-tag>
-          <el-tag v-else-if="scope.row.status === '2'" type="success">已完成</el-tag>
-          <el-tag v-else>{{ scope.row.status }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="当前节点" align="center" prop="currentNode" width="120" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createTime"
-        :formatter="dateFormatter"
-        width="180"
-      />
-      <el-table-column label="操作" align="center" width="180" fixed="right">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['project:project:update']"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="primary"
-            @click="handleStartAcceptance(scope.row)"
-            v-hasPermi="['project:acceptance:submit-pre']"
-          >
-            发起验收
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-            v-hasPermi="['project:project:delete']"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+    <!-- 卡片列表布局 -->
+    <el-card shadow="never" class="list-wrapper" v-loading="loading">
+      <div class="list-header" v-if="total > 0">
+        共找到 <span class="total-count">{{ total }}</span> 个项目
+      </div>
+      
+      <el-row :gutter="20" class="project-grid">
+        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="6" v-for="item in list" :key="item.id" class="grid-col">
+          <div class="modern-card" :class="{'is-active': checkedIds.includes(item.id)}" @click="toggleCheck(item.id)">
+            <!-- 头部 -->
+            <div class="card-header">
+              <div class="header-left">
+                <el-checkbox :model-value="checkedIds.includes(item.id)" @change="toggleCheck(item.id)" @click.stop />
+                <div class="title text-ellipsis" :title="item.projectName">{{ item.projectName }}</div>
+              </div>
+              <el-tag :type="getStatusType(item.status)" effect="light" class="status-tag">
+                {{ getStatusLabel(item.status) }}
+              </el-tag>
+            </div>
+            
+            <!-- 主体信息 -->
+            <div class="card-body">
+              <div class="info-row">
+                <Icon icon="ep:office-building" class="info-icon" />
+                <span class="info-label">申报单位：</span>
+                <span class="info-value text-ellipsis" :title="item.applyUnit">{{ item.applyUnit || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <Icon icon="ep:document" class="info-icon" />
+                <span class="info-label">项目编号：</span>
+                <span class="info-value">{{ item.projectCode || '-' }}</span>
+              </div>
+              <div class="info-row">
+                <Icon icon="ep:tickets" class="info-icon" />
+                <span class="info-label">合同编号：</span>
+                <span class="info-value">{{ item.contractCode || '-' }}</span>
+              </div>
+              <div class="info-row current-node-row" v-if="item.currentNode">
+                <Icon icon="ep:location" class="info-icon text-primary" />
+                <span class="info-label">当前节点：</span>
+                <span class="info-value text-primary font-bold">{{ item.currentNode }}</span>
+              </div>
+            </div>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <ProjectForm ref="formRef" @success="getList" />
-  <!-- 发起验收弹窗 -->
-  <StartAcceptanceForm ref="startAcceptanceFormRef" @success="getList" />
+            <!-- 底部操作 -->
+            <div class="card-footer" @click.stop>
+              <span class="create-time">{{ formatDate(item.createTime) }}</span>
+              <div class="actions">
+                <el-button link type="primary" @click.stop="openForm('update', item.id)" v-hasPermi="['project:project:update']">
+                  编辑
+                </el-button>
+                <el-button v-if="item.status === '0'" type="primary" class="start-btn" size="small" @click.stop="handleStartAcceptance(item)" v-hasPermi="['project:acceptance:submit-pre']">
+                  发起验收
+                </el-button>
+              </div>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
+
+      <!-- 空数据状态 -->
+      <el-empty v-if="list.length === 0 && !loading" description="暂无项目数据" />
+
+      <!-- 分页组件 -->
+      <div class="pagination-container">
+        <Pagination
+          :total="total"
+          v-model:page="queryParams.pageNo"
+          v-model:limit="queryParams.pageSize"
+          @pagination="getList"
+        />
+      </div>
+    </el-card>
+
+    <!-- 表单弹窗：添加/修改 -->
+    <ProjectForm ref="formRef" @success="getList" />
+    <!-- 发起验收弹窗 -->
+    <StartAcceptanceForm ref="startAcceptanceFormRef" @success="getList" />
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -165,6 +129,7 @@ import download from '@/utils/download'
 import * as ProjectApi from '@/api/project/project'
 import ProjectForm from './ProjectForm.vue'
 import StartAcceptanceForm from './StartAcceptanceForm.vue'
+import dayjs from 'dayjs'
 
 defineOptions({ name: 'ProjectProject' })
 
@@ -186,6 +151,7 @@ const queryParams = reactive({
 })
 const queryFormRef = ref() // 搜索的表单
 const exportLoading = ref(false) // 导出的加载中
+const checkedIds = ref<number[]>([]) // 选中的项目ID集合
 
 /** 查询列表 */
 const getList = async () => {
@@ -220,31 +186,20 @@ const openForm = (type: string, id?: number) => {
 /** 删除按钮操作 */
 const handleDelete = async (id: number) => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起删除
     await ProjectApi.deleteProject(id)
     message.success(t('common.delSuccess'))
-    // 刷新列表
     await getList()
   } catch {}
 }
 
 /** 批量删除按钮操作 */
-const checkedIds = ref<number[]>([])
-const handleRowCheckboxChange = (rows: ProjectApi.ProjectVO[]) => {
-  checkedIds.value = rows.map((row) => row.id)
-}
-
 const handleDeleteBatch = async () => {
   try {
-    // 删除的二次确认
     await message.delConfirm()
-    // 发起批量删除
     await ProjectApi.deleteProjectList(checkedIds.value)
     checkedIds.value = []
     message.success(t('common.delSuccess'))
-    // 刷新列表
     await getList()
   } catch {}
 }
@@ -252,9 +207,7 @@ const handleDeleteBatch = async () => {
 /** 导出按钮操作 */
 const handleExport = async () => {
   try {
-    // 导出的二次确认
     await message.exportConfirm()
-    // 发起导出
     exportLoading.value = true
     const data = await ProjectApi.exportProject(queryParams)
     download.excel(data, '项目数据.xls')
@@ -270,8 +223,262 @@ const handleStartAcceptance = (row: ProjectApi.ProjectVO) => {
   startAcceptanceFormRef.value.open(row)
 }
 
+/** 卡片单选/多选切换 */
+const toggleCheck = (id: number) => {
+  const index = checkedIds.value.indexOf(id)
+  if (index > -1) {
+    checkedIds.value.splice(index, 1)
+  } else {
+    checkedIds.value.push(id)
+  }
+}
+
+/** 格式化状态 */
+const getStatusType = (status: string) => {
+  if (status === '0') return 'primary'
+  if (status === '1') return 'warning'
+  if (status === '2') return 'success'
+  return 'info'
+}
+
+const getStatusLabel = (status: string) => {
+  if (status === '0') return '待验收'
+  if (status === '1') return '验收中'
+  if (status === '2') return '已完成'
+  return status || '未知'
+}
+
+/** 格式化时间 */
+const formatDate = (dateString: string) => {
+  if (!dateString) return ''
+  return dayjs(dateString).format('YYYY-MM-DD HH:mm')
+}
+
 /** 初始化 **/
 onMounted(() => {
   getList()
 })
 </script>
+
+<style scoped>
+.app-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  min-height: calc(100vh - 84px);
+}
+
+.search-wrapper {
+  margin-bottom: 20px;
+  border-radius: 8px;
+  border: none;
+}
+
+.action-toolbar {
+  margin-top: 10px;
+  padding-top: 15px;
+  border-top: 1px dashed #ebeef5;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.list-wrapper {
+  border-radius: 8px;
+  border: none;
+  min-height: 500px;
+}
+
+.list-header {
+  margin-bottom: 20px;
+  font-size: 15px;
+  color: #606266;
+}
+
+.total-count {
+  color: #295abc;
+  font-size: 18px;
+  font-weight: 600;
+  margin: 0 4px;
+}
+
+.grid-col {
+  margin-bottom: 20px;
+}
+
+.modern-card {
+  background: #fff;
+  border-radius: 12px;
+  border: 1px solid #ebeef5;
+  padding: 20px;
+  cursor: pointer;
+  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  position: relative;
+  overflow: hidden;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.modern-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 4px;
+  height: 100%;
+  background: transparent;
+  transition: all 0.3s ease;
+}
+
+.modern-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 24px rgba(41, 90, 188, 0.08);
+  border-color: rgba(41, 90, 188, 0.2);
+}
+
+.modern-card:hover::before {
+  background: #295abc;
+}
+
+.modern-card.is-active {
+  border-color: #295abc;
+  background-color: #f7f9fc;
+}
+
+.modern-card.is-active::before {
+  background: #295abc;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: 15px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid #f0f2f5;
+}
+
+.header-left {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  flex: 1;
+  overflow: hidden;
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  color: #303133;
+  line-height: 1.4;
+  flex: 1;
+}
+
+.status-tag {
+  margin-left: 10px;
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+.card-body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 20px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+.info-icon {
+  color: #909399;
+  margin-right: 8px;
+  font-size: 15px;
+}
+
+.info-label {
+  color: #909399;
+  min-width: 75px;
+}
+
+.info-value {
+  color: #606266;
+  flex: 1;
+}
+
+.current-node-row {
+  margin-top: 5px;
+  padding-top: 5px;
+  border-top: 1px dashed #ebeef5;
+}
+
+.text-primary {
+  color: #295abc;
+}
+
+.font-bold {
+  font-weight: 600;
+}
+
+.text-ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-top: auto;
+  padding-top: 15px;
+  border-top: 1px solid #f0f2f5;
+}
+
+.create-time {
+  font-size: 13px;
+  color: #a8abb2;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  gap: 15px;
+}
+
+.start-btn {
+  background: #295abc;
+  border: none;
+  border-radius: 20px;
+  padding: 8px 18px;
+  color: #fff;
+  font-size: 13px;
+  font-weight: 500;
+  box-shadow: 0 4px 10px rgba(41, 90, 188, 0.2);
+  transition: all 0.3s ease;
+}
+
+.start-btn:hover {
+  transform: translateY(-2px);
+  background: #1d439b;
+  box-shadow: 0 6px 15px rgba(41, 90, 188, 0.3);
+}
+
+.mr-5px {
+  margin-right: 5px;
+}
+
+.pagination-container {
+  margin-top: 20px;
+  display: flex;
+  justify-content: flex-end;
+}
+
+:deep(.el-form-item) {
+  margin-bottom: 12px;
+}
+</style>