From 348c0396ebc2ae9ce95a349072c9d08851cfc6c2 Mon Sep 17 00:00:00 2001
From: Maple <869445424@qq.com>
Date: Fri, 8 Aug 2025 10:49:58 +0800
Subject: [PATCH 1/5] =?UTF-8?q?fix:=E6=94=B6=E5=85=A5=E5=90=88=E5=90=8C?=
 =?UTF-8?q?=E7=9A=84=E8=AF=A6=E6=83=85=E4=BB=A5=E5=8F=8A=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E5=8F=8A=E5=AE=8C=E6=88=90=E5=92=8C=E5=90=8E?=
 =?UTF-8?q?=E7=AB=AFapi=E7=9A=84=E8=B0=83=E7=94=A8=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auto-imports.d.ts                   |   2 +-
 src/utils/http.ts                             |  20 +-
 .../revenue-contract/ContractDetail.vue       | 155 +++++++++
 .../contract/revenue-contract/index.vue       | 314 ++++++++++--------
 4 files changed, 342 insertions(+), 149 deletions(-)
 create mode 100644 src/views/project-management/contract/revenue-contract/ContractDetail.vue

diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 9026869..6a35f3a 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -69,6 +69,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/src/utils/http.ts b/src/utils/http.ts
index 063186a..5894b18 100644
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -70,10 +70,10 @@ http.interceptors.response.use(
     if (data && data.rows !== undefined && data.data === undefined) {
       data.data = data.rows
     }
-    
+
     // 兼容不同的API响应结构
     const { success, code, msg } = data
-    
+
     // 检查响应类型是否是blob
     if (response.request.responseType === 'blob') {
       const contentType = data.type
@@ -96,7 +96,7 @@ http.interceptors.response.use(
         return response
       }
     }
-    
+
     // 判断请求是否成功：明确的success字段为true，或者code为200都视为成功
     const isSuccess = success !== undefined ? success : (code === 200 || code === '200')
     if (isSuccess) {
@@ -139,17 +139,17 @@ const request = async <T = unknown>(config: AxiosRequestConfig): Promise<ApiRes<
     .then((res: AxiosResponse) => {
       // 处理返回数据结构，兼容rows和data字段
       const responseData = res.data
-      
+
       // 如果返回的数据中有rows字段但没有data字段，将rows赋值给data
       if (responseData.rows !== undefined && responseData.data === undefined) {
         responseData.data = responseData.rows
       }
-      
+
       // 如果返回的code是200但没有设置success字段，将success设置为true
       if ((responseData.code === 200 || responseData.code === '200') && responseData.success === undefined) {
         responseData.success = true
       }
-      
+
       return responseData
     })
     .catch((err: { msg: string }) => Promise.reject(err))
@@ -168,7 +168,7 @@ const requestRaw = async <T = unknown>(config: AxiosRequestConfig): Promise<Axio
     baseURL: import.meta.env.VITE_API_PREFIX ?? import.meta.env.VITE_API_BASE_URL,
     timeout: 30 * 1000,
   })
-  
+
   // 只添加请求拦截器来设置token，不添加响应拦截器
   rawAxios.interceptors.request.use(
     (config: AxiosRequestConfig) => {
@@ -183,7 +183,7 @@ const requestRaw = async <T = unknown>(config: AxiosRequestConfig): Promise<Axio
     },
     (error) => Promise.reject(error),
   )
-  
+
   return rawAxios.request<T>(config)
 }
 
@@ -225,3 +225,7 @@ export default {
   requestRaw,
   download,
 }
+
+export const updateContract = (contractId, contractData) => {
+  return http.put(`/contract/${contractId}`, contractData)
+}
diff --git a/src/views/project-management/contract/revenue-contract/ContractDetail.vue b/src/views/project-management/contract/revenue-contract/ContractDetail.vue
new file mode 100644
index 0000000..dbba383
--- /dev/null
+++ b/src/views/project-management/contract/revenue-contract/ContractDetail.vue
@@ -0,0 +1,155 @@
+<template>
+  <a-spin :loading="loading">
+    <div v-if="contractDetail">
+      <a-descriptions
+          :column="1"
+          size="medium"
+          :label-style="{ width: '120px' }"
+      >
+        <a-descriptions-item label="合同编号">
+          {{ contractDetail.code }}
+        </a-descriptions-item>
+        <a-descriptions-item label="项目名称">
+          {{ contractDetail.projectName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="客户名称">
+          {{ contractDetail.customer }}
+        </a-descriptions-item>
+        <a-descriptions-item label="合同金额">
+          <span class="font-medium text-green-600">￥{{ (contractDetail.amount || 0).toLocaleString() }}</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="已收款金额">
+          <span class="font-medium text-blue-600">￥{{ (contractDetail.receivedAmount || 0).toLocaleString() }}</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="未收款金额">
+          <span class="font-medium text-orange-600">￥{{ (contractDetail.pendingAmount || 0).toLocaleString() }}</span>
+        </a-descriptions-item>
+        <a-descriptions-item label="签署日期">
+          {{ contractDetail.signDate }}
+        </a-descriptions-item>
+        <a-descriptions-item label="履约期限">
+          {{ contractDetail.performanceDeadline }}
+        </a-descriptions-item>
+        <a-descriptions-item label="付款日期">
+          {{ contractDetail.paymentDate }}
+        </a-descriptions-item>
+        <a-descriptions-item label="合同状态">
+          <a-tag :color="getStatusColor(contractDetail.contractStatus)">
+            {{ getStatusText(contractDetail.contractStatusLabel || contractDetail.contractStatus) }}
+          </a-tag>
+        </a-descriptions-item>
+        <a-descriptions-item label="销售人员">
+          {{ contractDetail.salespersonName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="销售部门">
+          {{ contractDetail.salespersonDeptName }}
+        </a-descriptions-item>
+        <a-descriptions-item label="产品服务">
+          {{ contractDetail.productService }}
+        </a-descriptions-item>
+        <a-descriptions-item label="备注">
+          {{ contractDetail.notes }}
+        </a-descriptions-item>
+      </a-descriptions>
+    </div>
+    <div v-else-if="!loading" class="empty-container">
+      <a-empty description="暂无信息" />
+    </div>
+  </a-spin>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import http from '@/utils/http'
+import { Message } from '@arco-design/web-vue'
+
+interface ContractDetail {
+  contractId: string
+  customer: string
+  code: string
+  projectId: string
+  type: string
+  productService: string
+  paymentDate: string | null
+  performanceDeadline: string | null
+  paymentAddress: string
+  amount: number
+  accountNumber: string
+  notes: string
+  contractStatus: string
+  contractText: string | null
+  projectName: string
+  salespersonName: string | null
+  salespersonDeptName: string
+  settlementAmount: number | null
+  receivedAmount: number | null
+  contractStatusLabel: string | null
+  createBy: string | null
+  updateBy: string | null
+  createTime: string
+  updateTime: string
+  page: number
+  pageSize: number
+  signDate: string
+  duration: string
+  pendingAmount?: number
+}
+
+const props = defineProps({
+  contractId: {
+    type: String,
+    required: true
+  }
+})
+
+const contractDetail = ref<ContractDetail | null>(null)
+const loading = ref(false)
+
+const getStatusColor = (status: string) => {
+  const colorMap: Record<string, string> = {
+    未确认: 'gray',
+    待审批: 'orange',
+    已签署: 'blue',
+    执行中: 'cyan',
+    已完成: 'green',
+    已终止: 'red'
+  }
+  return colorMap[status] || 'gray'
+}
+
+const getStatusText = (status: string) => {
+  return status || '未知状态'
+}
+
+const fetchContractDetail = async () => {
+  try {
+    loading.value = true
+    const response = await http.get(`/contract/${props.contractId}`)
+    if (response.code === 200) {
+      contractDetail.value = response.data
+      // 计算未收款金额
+      if (contractDetail.value) {
+        contractDetail.value.pendingAmount = (contractDetail.value.amount || 0) - (contractDetail.value.receivedAmount || 0)
+      }
+    } else {
+      Message.error(response.msg || '获取合同详情失败')
+    }
+  } catch (error) {
+    console.error('获取合同详情失败:', error)
+    Message.error('获取合同详情失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => {
+  fetchContractDetail()
+})
+</script>
+
+<style scoped>
+.empty-container {
+  text-align: center;
+  padding: 40px 0;
+}
+</style>
diff --git a/src/views/project-management/contract/revenue-contract/index.vue b/src/views/project-management/contract/revenue-contract/index.vue
index 6a6c018..0e79d54 100644
--- a/src/views/project-management/contract/revenue-contract/index.vue
+++ b/src/views/project-management/contract/revenue-contract/index.vue
@@ -1,28 +1,28 @@
 <template>
   <GiPageLayout>
     <GiTable
-      row-key="id"
-      title="收入合同管理"
-      :data="dataList"
-      :columns="tableColumns"
-      :loading="loading"
-      :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
-      :pagination="pagination"
-      @page-change="onPageChange"
-      @page-size-change="onPageSizeChange"
-      @refresh="search"
+        row-key="id"
+        title="收入合同管理"
+        :data="dataList"
+        :columns="tableColumns"
+        :loading="loading"
+        :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
+        :pagination="pagination"
+        @page-change="onPageChange"
+        @page-size-change="onPageSizeChange"
+        @refresh="search"
     >
       <template #top>
-        <GiForm 
-          v-model="searchForm" 
-          search 
-          :columns="queryFormColumns" 
-          size="medium" 
-          @search="search" 
-          @reset="reset"
+        <GiForm
+            v-model="searchForm"
+            search
+            :columns="queryFormColumns"
+            size="medium"
+            @search="search"
+            @reset="reset"
         />
       </template>
-      
+
       <template #toolbar-left>
         <a-space>
           <a-button type="primary" @click="openAddModal">
@@ -35,51 +35,96 @@
           </a-button>
         </a-space>
       </template>
-      
+
       <!-- 合同状态 -->
       <template #status="{ record }">
-        <a-tag :color="getStatusColor(record.status)">
-          {{ getStatusText(record.status) }}
+        <a-tag :color="getStatusColor(record.contractStatus)">
+          {{ getStatusText(record.contractStatusLabel || record.contractStatus) }}
         </a-tag>
       </template>
-      
+
       <!-- 合同金额 -->
       <template #contractAmount="{ record }">
-        <span class="font-medium text-green-600">￥{{ record.contractAmount.toLocaleString() }}万</span>
+        <span class="font-medium text-green-600">￥{{ (record.amount || 0).toLocaleString() }}</span>
       </template>
-      
+
       <!-- 已收款金额 -->
       <template #receivedAmount="{ record }">
-        <span class="font-medium text-blue-600">￥{{ record.receivedAmount.toLocaleString() }}万</span>
+        <span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
       </template>
-      
+
       <!-- 操作列 -->
       <template #action="{ record }">
         <a-space>
           <a-link @click="viewDetail(record)">详情</a-link>
-          <a-link @click="editRecord(record)" v-if="record.status === 'draft'">编辑</a-link>
-          <a-link @click="approveContract(record)" v-if="record.status === 'pending'">审批</a-link>
+          <a-link v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</a-link>
+          <a-link v-if="record.contractStatus === '待审批'" @click="approveContract(record)">审批</a-link>
           <a-link @click="viewPayment(record)">收款记录</a-link>
         </a-space>
       </template>
     </GiTable>
+
+    <!-- 合同详情弹窗 -->
+    <a-modal
+        v-model:visible="showDetailModal"
+        title="合同详情"
+        :width="800"
+        @cancel="closeDetailModal"
+        :footer="false"
+    >
+      <ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
+    </a-modal>
   </GiPageLayout>
 </template>
 
 <script setup lang="ts">
 import { ref, reactive, onMounted } from 'vue'
-import { Message } from '@arco-design/web-vue'
+import { Message, Modal } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
+import http from '@/utils/http'
+import ContractDetail from './ContractDetail.vue'
+
+// 接口数据类型定义
+interface ContractItem {
+  contractId: string
+  customer: string
+  code: string
+  projectId: string
+  type: string
+  productService: string
+  paymentDate: string | null
+  performanceDeadline: string | null
+  paymentAddress: string
+  amount: number
+  accountNumber: string
+  notes: string
+  contractStatus: string
+  contractText: string | null
+  projectName: string
+  salespersonName: string | null
+  salespersonDeptName: string
+  settlementAmount: number | null
+  receivedAmount: number | null
+  contractStatusLabel: string | null
+  createBy: string | null
+  updateBy: string | null
+  createTime: string
+  updateTime: string
+  page: number
+  pageSize: number
+  signDate: string
+  duration: string
+}
 
 // 搜索表单
-let searchForm = reactive({
+const searchForm = reactive({
   contractName: '',
   contractCode: '',
   client: '',
   status: '',
   signDate: '',
   page: 1,
-  size: 10
+  size: 10,
 })
 
 // 查询条件配置
@@ -89,16 +134,16 @@ const queryFormColumns = [
     label: '合同名称',
     type: 'input' as const,
     props: {
-      placeholder: '请输入合同名称'
-    }
+      placeholder: '请输入合同名称',
+    },
   },
   {
     field: 'client',
     label: '客户',
     type: 'input' as const,
     props: {
-      placeholder: '请输入客户名称'
-    }
+      placeholder: '请输入客户名称',
+    },
   },
   {
     field: 'status',
@@ -107,132 +152,111 @@ const queryFormColumns = [
     props: {
       placeholder: '请选择合同状态',
       options: [
-        { label: '草稿', value: 'draft' },
-        { label: '待审批', value: 'pending' },
-        { label: '已签署', value: 'signed' },
-        { label: '执行中', value: 'executing' },
-        { label: '已完成', value: 'completed' },
-        { label: '已终止', value: 'terminated' }
-      ]
-    }
-  }
+        { label: '未确认', value: '未确认' },
+        { label: '待审批', value: '待审批' },
+        { label: '已签署', value: '已签署' },
+        { label: '执行中', value: '执行中' },
+        { label: '已完成', value: '已完成' },
+        { label: '已终止', value: '已终止' },
+      ],
+    },
+  },
 ]
 
 // 表格列配置
 const tableColumns: TableColumnData[] = [
-  { title: '合同编号', dataIndex: 'contractCode', width: 150 },
-  { title: '合同名称', dataIndex: 'contractName', width: 250, ellipsis: true, tooltip: true },
-  { title: '客户名称', dataIndex: 'client', width: 200, ellipsis: true, tooltip: true },
-  { title: '合同金额', dataIndex: 'contractAmount', slotName: 'contractAmount', width: 120 },
+  { title: '合同编号', dataIndex: 'code', width: 150 },
+  { title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
+  { title: '客户名称', dataIndex: 'customer', width: 200, ellipsis: true, tooltip: true },
+  { title: '合同金额', dataIndex: 'amount', slotName: 'contractAmount', width: 120 },
   { title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
   { title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
   { title: '签署日期', dataIndex: 'signDate', width: 120 },
-  { title: '开始日期', dataIndex: 'startDate', width: 120 },
-  { title: '结束日期', dataIndex: 'endDate', width: 120 },
-  { title: '合同状态', dataIndex: 'status', slotName: 'status', width: 100 },
-  { title: '项目经理', dataIndex: 'projectManager', width: 100 },
-  { title: '销售经理', dataIndex: 'salesManager', width: 100 },
-  { title: '完成进度', dataIndex: 'progress', width: 100 },
-  { title: '备注', dataIndex: 'remark', width: 200, ellipsis: true, tooltip: true },
-  { title: '操作', slotName: 'action', width: 200, fixed: 'right' }
+  { title: '履约期限', dataIndex: 'performanceDeadline', width: 120 },
+  { title: '付款日期', dataIndex: 'paymentDate', width: 120 },
+  { title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 100 },
+  { title: '销售人员', dataIndex: 'salespersonName', width: 100 },
+  { title: '销售部门', dataIndex: 'salespersonDeptName', width: 100 },
+  { title: '产品服务', dataIndex: 'productService', width: 120, ellipsis: true, tooltip: true },
+  { title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
+  { title: '操作', slotName: 'action', width: 200, fixed: 'right' },
 ]
 
 // 数据状态
 const loading = ref(false)
-const dataList = ref([
-  {
-    id: 1,
-    contractCode: 'RC2024001',
-    contractName: '华能新能源风电场叶片检测服务合同',
-    client: '华能新能源股份有限公司',
-    contractAmount: 320,
-    receivedAmount: 192,
-    pendingAmount: 128,
-    signDate: '2024-02-20',
-    startDate: '2024-03-01',
-    endDate: '2024-04-30',
-    status: 'executing',
-    projectManager: '张项目经理',
-    salesManager: '李销售经理',
-    progress: '60%',
-    remark: '项目进展顺利，客户满意度高'
-  },
-  {
-    id: 2,
-    contractCode: 'RC2024002',
-    contractName: '大唐风电场防雷检测项目合同',
-    client: '大唐新能源股份有限公司',
-    contractAmount: 268,
-    receivedAmount: 134,
-    pendingAmount: 134,
-    signDate: '2024-02-25',
-    startDate: '2024-03-05',
-    endDate: '2024-04-20',
-    status: 'executing',
-    projectManager: '王项目经理',
-    salesManager: '赵销售经理',
-    progress: '45%',
-    remark: '按计划执行中'
-  },
-  {
-    id: 3,
-    contractCode: 'RC2024003',
-    contractName: '中广核风电场设备维护服务合同',
-    client: '中广核新能源投资有限公司',
-    contractAmount: 450,
-    receivedAmount: 450,
-    pendingAmount: 0,
-    signDate: '2024-01-15',
-    startDate: '2024-01-20',
-    endDate: '2024-01-31',
-    status: 'completed',
-    projectManager: '刘项目经理',
-    salesManager: '孙销售经理',
-    progress: '100%',
-    remark: '项目已完成，客户验收通过'
+const dataList = ref<ContractItem[]>([])
+
+// API调用函数
+const fetchContractList = async () => {
+  try {
+    loading.value = true
+    const params = {
+      page: searchForm.page,
+      pageSize: searchForm.size,
+      contractName: searchForm.contractName,
+      code: searchForm.contractCode,
+      customer: searchForm.client,
+      contractStatus: searchForm.status,
+      signDate: searchForm.signDate,
+    }
+
+    const response = await http.get('/contract/list', params)
+
+    if (response.code === 200) {
+      // 过滤出类型为"收入合同"的数据
+      const allContracts = response.rows || []
+      const revenueContracts = allContracts.filter((item: ContractItem) => item.type === '收入合同')
+
+      // 计算未收款金额
+      dataList.value = revenueContracts.map((item: ContractItem) => ({
+        ...item,
+        pendingAmount: (item.amount || 0) - (item.receivedAmount || 0),
+      }))
+
+      pagination.total = Number.parseInt(response.total) || 0
+    } else {
+      Message.error(response.msg || '获取合同列表失败')
+      dataList.value = []
+    }
+  } catch (error) {
+    console.error('获取合同列表失败:', error)
+    Message.error('获取合同列表失败')
+    dataList.value = []
+  } finally {
+    loading.value = false
   }
-])
+}
 
 const pagination = reactive({
   current: 1,
   pageSize: 10,
-  total: 3,
+  total: 0,
   showTotal: true,
-  showPageSize: true
+  showPageSize: true,
 })
 
 // 获取状态颜色
 const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
-    'draft': 'gray',
-    'pending': 'orange',
-    'signed': 'blue',
-    'executing': 'cyan',
-    'completed': 'green',
-    'terminated': 'red'
+    未确认: 'gray',
+    待审批: 'orange',
+    已签署: 'blue',
+    执行中: 'cyan',
+    已完成: 'green',
+    已终止: 'red',
   }
   return colorMap[status] || 'gray'
 }
 
 // 获取状态文本
 const getStatusText = (status: string) => {
-  const textMap: Record<string, string> = {
-    'draft': '草稿',
-    'pending': '待审批',
-    'signed': '已签署',
-    'executing': '执行中',
-    'completed': '已完成',
-    'terminated': '已终止'
-  }
-  return textMap[status] || status
+  // 直接返回后端返回的状态文本，如果有contractStatusLabel则使用，否则使用contractStatus
+  return status || '未知状态'
 }
 
 // 搜索和重置
 const search = async () => {
-  loading.value = true
-  setTimeout(() => {
-    loading.value = false
-  }, 1000)
+  await fetchContractList()
 }
 
 const reset = () => {
@@ -243,7 +267,7 @@ const reset = () => {
     status: '',
     signDate: '',
     page: 1,
-    size: 10
+    size: 10,
   })
   pagination.current = 1
   search()
@@ -273,23 +297,33 @@ const exportContract = () => {
   Message.info('导出合同功能开发中...')
 }
 
-const viewDetail = (record: any) => {
-  Message.info(`查看合同详情: ${record.contractName}`)
+// 显示合同详情弹窗
+const showDetailModal = ref(false)
+const selectedContractId = ref<string | null>(null)
+
+const viewDetail = (record: ContractItem) => {
+  selectedContractId.value = record.contractId
+  showDetailModal.value = true
 }
 
-const editRecord = (record: any) => {
-  Message.info(`编辑合同: ${record.contractName}`)
+const closeDetailModal = () => {
+  showDetailModal.value = false
+  selectedContractId.value = null
 }
 
-const approveContract = (record: any) => {
-  Message.info(`审批合同: ${record.contractName}`)
+const editRecord = (record: ContractItem) => {
+  Message.info(`编辑合同: ${record.projectName}`)
 }
 
-const viewPayment = (record: any) => {
-  Message.info(`查看收款记录: ${record.contractName}`)
+const approveContract = (record: ContractItem) => {
+  Message.info(`审批合同: ${record.projectName}`)
+}
+
+const viewPayment = (record: ContractItem) => {
+  Message.info(`查看收款记录: ${record.projectName}`)
 }
 
 onMounted(() => {
-  search()
+  fetchContractList()
 })
-</script> 
\ No newline at end of file
+</script>

From fdd20e9a9b5ef0a88b9786cd1e9cd165aaa03b9e Mon Sep 17 00:00:00 2001
From: chabai <14799297+dhasjklhdfjkasfbhfasfj@user.noreply.gitee.com>
Date: Fri, 8 Aug 2025 13:51:32 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E5=BC=80=E5=8F=91=E5=95=86=E5=8A=A1?=
 =?UTF-8?q?=E6=A8=A1=E5=9D=97=E7=9A=84=E6=96=87=E4=BB=B6=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/types/auto-imports.d.ts            |   1 +
 src/views/bussiness-data/bussiness.vue | 853 +++++++++++++++++++++++--
 2 files changed, 796 insertions(+), 58 deletions(-)

diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
index 9026869..369aad4 100644
--- a/src/types/auto-imports.d.ts
+++ b/src/types/auto-imports.d.ts
@@ -57,6 +57,7 @@ declare global {
   const useCssVars: typeof import('vue')['useCssVars']
   const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
diff --git a/src/views/bussiness-data/bussiness.vue b/src/views/bussiness-data/bussiness.vue
index ec48882..b8cdb6b 100644
--- a/src/views/bussiness-data/bussiness.vue
+++ b/src/views/bussiness-data/bussiness.vue
@@ -552,7 +552,7 @@
 
 <script setup>
 // 导入核心依赖
-import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
+import { ref, reactive, onMounted, computed, watch, nextTick, h } from 'vue';
 import {
   IconFolder,
   IconFile,
@@ -1358,9 +1358,15 @@ const handlePreview = async (file) => {
       // PDF预览（在新窗口打开）
       window.open(url, '_blank');
       Message.success('PDF文件已在新窗口打开');
-    } else if (['txt', 'md', 'json', 'xml', 'csv'].includes(ext)) {
+    } else if (['txt', 'md', 'json', 'xml', 'csv', 'log'].includes(ext)) {
       // 文本文件预览
       showTextPreview(blob, fileName);
+    } else if (['mp4', 'avi', 'mov', 'wmv', 'flv'].includes(ext)) {
+      // 视频预览
+      showVideoPreview(url, fileName);
+    } else if (['mp3', 'wav', 'flac', 'aac'].includes(ext)) {
+      // 音频预览
+      showAudioPreview(url, fileName);
     } else if (['doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx'].includes(ext)) {
       // Office文档预览提示
       Modal.confirm({
@@ -1409,47 +1415,267 @@ const handlePreview = async (file) => {
 
 // 显示图片预览
 const showImagePreview = (url, fileName) => {
-  const container = document.createElement('div');
-  container.style.cssText = `
-    width: 100%;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    padding: 20px;
-    box-sizing: border-box;
-  `;
-  
-  const img = document.createElement('img');
-  img.src = url;
-  img.style.cssText = `
-    max-width: 100%;
-    max-height: 70vh;
-    object-fit: contain;
-    border-radius: 8px;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  `;
-  
-  const title = document.createElement('div');
-  title.textContent = fileName;
-  title.style.cssText = `
-    margin-top: 16px;
-    font-size: 14px;
-    color: #666;
-    text-align: center;
-    word-break: break-all;
-  `;
-  
-  container.appendChild(img);
-  container.appendChild(title);
+  const imageScale = ref(1);
+  const imageRotation = ref(0);
   
+  const container = h('div', {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '24px',
+      boxSizing: 'border-box',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      borderRadius: '16px',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, [
+    // 背景装饰
+    h('div', {
+      style: {
+        position: 'absolute',
+        top: '-50%',
+        left: '-50%',
+        width: '200%',
+        height: '200%',
+        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+        animation: 'float 6s ease-in-out infinite'
+      }
+    }),
+    
+    // 顶部工具栏
+    h('div', {
+      style: {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        gap: '16px',
+        marginBottom: '24px',
+        padding: '16px 24px',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '16px',
+        boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.2)',
+        position: 'relative',
+        zIndex: 10
+      }
+    }, [
+      h('button', {
+        onClick: () => imageScale.value = Math.max(0.3, imageScale.value - 0.2),
+        style: {
+          padding: '10px 16px',
+          border: 'none',
+          borderRadius: '12px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontWeight: '500',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+        },
+        onMouseenter: (e) => {
+          e.target.style.transform = 'translateY(-2px)';
+          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+        },
+        onMouseleave: (e) => {
+          e.target.style.transform = 'translateY(0)';
+          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+        }
+      }, [
+        h('span', { style: { fontSize: '18px' } }, '🔍'),
+        '缩小'
+      ]),
+      h('button', {
+        onClick: () => imageScale.value = Math.min(4, imageScale.value + 0.2),
+        style: {
+          padding: '10px 16px',
+          border: 'none',
+          borderRadius: '12px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontWeight: '500',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+        },
+        onMouseenter: (e) => {
+          e.target.style.transform = 'translateY(-2px)';
+          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+        },
+        onMouseleave: (e) => {
+          e.target.style.transform = 'translateY(0)';
+          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+        }
+      }, [
+        h('span', { style: { fontSize: '18px' } }, '🔍'),
+        '放大'
+      ]),
+      h('button', {
+        onClick: () => imageRotation.value += 90,
+        style: {
+          padding: '10px 16px',
+          border: 'none',
+          borderRadius: '12px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontWeight: '500',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+        },
+        onMouseenter: (e) => {
+          e.target.style.transform = 'translateY(-2px)';
+          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+        },
+        onMouseleave: (e) => {
+          e.target.style.transform = 'translateY(0)';
+          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+        }
+      }, [
+        h('span', { style: { fontSize: '18px' } }, '🔄'),
+        '旋转'
+      ]),
+      h('button', {
+        onClick: () => {
+          imageScale.value = 1;
+          imageRotation.value = 0;
+        },
+        style: {
+          padding: '10px 16px',
+          border: 'none',
+          borderRadius: '12px',
+          background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+          color: 'white',
+          cursor: 'pointer',
+          fontSize: '14px',
+          fontWeight: '500',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '8px',
+          transition: 'all 0.3s ease',
+          boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+        },
+        onMouseenter: (e) => {
+          e.target.style.transform = 'translateY(-2px)';
+          e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+        },
+        onMouseleave: (e) => {
+          e.target.style.transform = 'translateY(0)';
+          e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+        }
+      }, [
+        h('span', { style: { fontSize: '18px' } }, '🏠'),
+        '重置'
+      ])
+    ]),
+    
+    // 图片容器
+    h('div', {
+      style: {
+        flex: 1,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        overflow: 'auto',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '20px',
+        padding: '32px',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
+        minHeight: '500px',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.3)',
+        position: 'relative',
+        zIndex: 5
+      }
+    }, [
+      h('img', {
+        src: url,
+        style: {
+          maxWidth: '100%',
+          maxHeight: '100%',
+          objectFit: 'contain',
+          borderRadius: '16px',
+          transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+          transform: `scale(${imageScale.value}) rotate(${imageRotation.value}deg)`,
+          boxShadow: '0 8px 24px rgba(0,0,0,0.15)',
+          border: '2px solid rgba(255,255,255,0.8)'
+        }
+      })
+    ]),
+    
+    // 文件名
+    h('div', {
+      style: {
+        marginTop: '20px',
+        fontSize: '16px',
+        color: 'white',
+        textAlign: 'center',
+        wordBreak: 'break-all',
+        padding: '12px 24px',
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        borderRadius: '12px',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.2)',
+        fontWeight: '500',
+        position: 'relative',
+        zIndex: 5
+      }
+    }, fileName)
+  ]);
+
   Modal.info({
-    title: '图片预览',
+    title: h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        fontSize: '20px',
+        fontWeight: '600',
+        color: '#2c3e50',
+        textAlign: 'center',
+        width: '100%',
+        justifyContent: 'center'
+      }
+    }, [
+      h('span', { style: { fontSize: '24px' } }, '🖼️'),
+      '图片预览'
+    ]),
     content: container,
-    width: '80%',
+    width: '95%',
+    style: { 
+      maxWidth: '1600px',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: '20px',
+      overflow: 'hidden',
+      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
+      border: '3px solid rgba(255,255,255,0.2)'
+    },
+    mask: true,
     maskClosable: true,
-    footer: null
+    footer: null,
+    closable: true,
+    okText: null,
+    cancelText: null
   });
 };
 
@@ -1457,29 +1683,208 @@ const showImagePreview = (url, fileName) => {
 const showTextPreview = async (blob, fileName) => {
   try {
     const text = await blob.text();
-    const container = document.createElement('div');
-    container.style.cssText = `
-      width: 100%;
-      height: 400px;
-      border: 1px solid #e5e5e5;
-      border-radius: 6px;
-      padding: 16px;
-      background-color: #fafafa;
-      font-family: 'Courier New', monospace;
-      font-size: 13px;
-      line-height: 1.6;
-      overflow: auto;
-      white-space: pre-wrap;
-      word-break: break-word;
-    `;
-    container.textContent = text;
+    const fontSize = ref(16);
     
+    const container = h('div', {
+      style: {
+        width: '100%',
+        height: '100%',
+        display: 'flex',
+        flexDirection: 'column',
+        padding: '24px',
+        boxSizing: 'border-box',
+        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+        borderRadius: '16px',
+        position: 'relative',
+        overflow: 'hidden'
+      }
+    }, [
+      // 背景装饰
+      h('div', {
+        style: {
+          position: 'absolute',
+          top: '-50%',
+          left: '-50%',
+          width: '200%',
+          height: '200%',
+          background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+          animation: 'float 6s ease-in-out infinite'
+        }
+      }),
+      
+      // 顶部工具栏
+      h('div', {
+        style: {
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: '16px',
+          marginBottom: '24px',
+          padding: '16px 24px',
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          borderRadius: '16px',
+          boxShadow: '0 8px 32px rgba(0,0,0,0.15)',
+          backdropFilter: 'blur(10px)',
+          border: '1px solid rgba(255,255,255,0.2)',
+          position: 'relative',
+          zIndex: 10
+        }
+      }, [
+        h('button', {
+          onClick: () => fontSize.value = Math.max(12, fontSize.value - 2),
+          style: {
+            padding: '10px 16px',
+            border: 'none',
+            borderRadius: '12px',
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'white',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+          },
+          onMouseenter: (e) => {
+            e.target.style.transform = 'translateY(-2px)';
+            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+          },
+          onMouseleave: (e) => {
+            e.target.style.transform = 'translateY(0)';
+            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+          }
+        }, [
+          h('span', { style: { fontSize: '18px' } }, '🔍'),
+          '缩小字体'
+        ]),
+        h('button', {
+          onClick: () => fontSize.value = Math.min(28, fontSize.value + 2),
+          style: {
+            padding: '10px 16px',
+            border: 'none',
+            borderRadius: '12px',
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'white',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+          },
+          onMouseenter: (e) => {
+            e.target.style.transform = 'translateY(-2px)';
+            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+          },
+          onMouseleave: (e) => {
+            e.target.style.transform = 'translateY(0)';
+            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+          }
+        }, [
+          h('span', { style: { fontSize: '18px' } }, '🔍'),
+          '放大字体'
+        ]),
+        h('button', {
+          onClick: () => {
+            const textArea = document.createElement('textarea');
+            textArea.value = text;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            Message.success('文本已复制到剪贴板');
+          },
+          style: {
+            padding: '10px 16px',
+            border: 'none',
+            borderRadius: '12px',
+            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+            color: 'white',
+            cursor: 'pointer',
+            fontSize: '14px',
+            fontWeight: '500',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            transition: 'all 0.3s ease',
+            boxShadow: '0 4px 12px rgba(102, 126, 234, 0.3)'
+          },
+          onMouseenter: (e) => {
+            e.target.style.transform = 'translateY(-2px)';
+            e.target.style.boxShadow = '0 6px 16px rgba(102, 126, 234, 0.4)';
+          },
+          onMouseleave: (e) => {
+            e.target.style.transform = 'translateY(0)';
+            e.target.style.boxShadow = '0 4px 12px rgba(102, 126, 234, 0.3)';
+          }
+        }, [
+          h('span', { style: { fontSize: '18px' } }, '📋'),
+          '复制文本'
+        ])
+      ]),
+      
+      // 文本内容
+      h('div', {
+        style: {
+          flex: 1,
+          backgroundColor: 'rgba(255, 255, 255, 0.95)',
+          borderRadius: '20px',
+          padding: '32px',
+          boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
+          overflow: 'auto',
+          fontFamily: "'JetBrains Mono', 'Fira Code', 'Courier New', 'Monaco', 'Menlo', monospace",
+          fontSize: `${fontSize.value}px`,
+          lineHeight: '1.8',
+          whiteSpace: 'pre-wrap',
+          wordBreak: 'break-word',
+          color: '#2c3e50',
+          border: '1px solid rgba(255,255,255,0.3)',
+          backdropFilter: 'blur(10px)',
+          position: 'relative',
+          zIndex: 5
+        }
+      }, text)
+    ]);
+
     Modal.info({
-      title: `文本预览 - ${fileName}`,
+      title: h('div', {
+        style: {
+          display: 'flex',
+          alignItems: 'center',
+          gap: '12px',
+          fontSize: '20px',
+          fontWeight: '600',
+          color: '#2c3e50',
+          textAlign: 'center',
+          width: '100%',
+          justifyContent: 'center'
+        }
+      }, [
+        h('span', { style: { fontSize: '24px' } }, '📄'),
+        `文本预览 - ${fileName}`
+      ]),
       content: container,
-      width: '70%',
+      width: '90%',
+      style: { 
+        maxWidth: '1400px',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        borderRadius: '20px',
+        overflow: 'hidden',
+        boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
+        border: '3px solid rgba(255,255,255,0.2)'
+      },
+      mask: true,
       maskClosable: true,
-      footer: null
+      footer: null,
+      closable: true,
+      okText: null,
+      cancelText: null
     });
   } catch (error) {
     console.error('文本预览失败:', error);
@@ -1487,6 +1892,249 @@ const showTextPreview = async (blob, fileName) => {
   }
 };
 
+// 显示视频预览
+const showVideoPreview = (url, fileName) => {
+  const container = h('div', {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '24px',
+      boxSizing: 'border-box',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      borderRadius: '16px',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, [
+    // 背景装饰
+    h('div', {
+      style: {
+        position: 'absolute',
+        top: '-50%',
+        left: '-50%',
+        width: '200%',
+        height: '200%',
+        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+        animation: 'float 6s ease-in-out infinite'
+      }
+    }),
+    
+    // 视频容器
+    h('div', {
+      style: {
+        width: '100%',
+        maxWidth: '1000px',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '20px',
+        padding: '32px',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.3)',
+        position: 'relative',
+        zIndex: 5
+      }
+    }, [
+      h('video', {
+        src: url,
+        controls: true,
+        style: {
+          width: '100%',
+          maxHeight: '70vh',
+          borderRadius: '16px',
+          background: '#000',
+          boxShadow: '0 12px 32px rgba(0,0,0,0.3)',
+          border: '3px solid rgba(255,255,255,0.8)',
+          transition: 'all 0.3s ease'
+        }
+      })
+    ]),
+    
+    // 文件名
+    h('div', {
+      style: {
+        marginTop: '20px',
+        fontSize: '16px',
+        color: 'white',
+        wordBreak: 'break-all',
+        textAlign: 'center',
+        padding: '12px 24px',
+        backgroundColor: 'rgba(255, 255, 255, 0.15)',
+        borderRadius: '12px',
+        boxShadow: '0 4px 16px rgba(0,0,0,0.1)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.2)',
+        fontWeight: '500',
+        position: 'relative',
+        zIndex: 5
+      }
+    }, fileName)
+  ]);
+
+  Modal.info({
+    title: h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        fontSize: '20px',
+        fontWeight: '600',
+        color: '#2c3e50',
+        textAlign: 'center',
+        width: '100%',
+        justifyContent: 'center'
+      }
+    }, [
+      h('span', { style: { fontSize: '24px' } }, '🎬'),
+      '视频预览'
+    ]),
+    content: container,
+    width: '90%',
+    style: { 
+      maxWidth: '1400px',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: '20px',
+      overflow: 'hidden',
+      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
+      border: '3px solid rgba(255,255,255,0.2)'
+    },
+    mask: true,
+    maskClosable: true,
+    footer: null,
+    closable: true,
+    okText: null,
+    cancelText: null
+  });
+};
+
+// 显示音频预览
+const showAudioPreview = (url, fileName) => {
+  const container = h('div', {
+    style: {
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      padding: '24px',
+      boxSizing: 'border-box',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      borderRadius: '16px',
+      position: 'relative',
+      overflow: 'hidden'
+    }
+  }, [
+    // 背景装饰
+    h('div', {
+      style: {
+        position: 'absolute',
+        top: '-50%',
+        left: '-50%',
+        width: '200%',
+        height: '200%',
+        background: 'radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%)',
+        animation: 'float 6s ease-in-out infinite'
+      }
+    }),
+    
+    // 音频容器
+    h('div', {
+      style: {
+        width: '100%',
+        maxWidth: '500px',
+        backgroundColor: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '20px',
+        padding: '40px',
+        boxShadow: '0 16px 48px rgba(0,0,0,0.2)',
+        backdropFilter: 'blur(10px)',
+        border: '1px solid rgba(255,255,255,0.3)',
+        position: 'relative',
+        zIndex: 5,
+        textAlign: 'center'
+      }
+    }, [
+      // 音频图标
+      h('div', {
+        style: {
+          fontSize: '64px',
+          marginBottom: '24px',
+          animation: 'pulse 2s ease-in-out infinite'
+        }
+      }, '🎵'),
+      
+      // 音频播放器
+      h('audio', {
+        src: url,
+        controls: true,
+        style: {
+          width: '100%',
+          height: '50px',
+          borderRadius: '12px',
+          marginBottom: '20px'
+        }
+      }),
+      
+      // 文件名
+      h('div', {
+        style: {
+          fontSize: '16px',
+          color: '#2c3e50',
+          wordBreak: 'break-all',
+          textAlign: 'center',
+          padding: '12px 16px',
+          backgroundColor: 'rgba(102, 126, 234, 0.1)',
+          borderRadius: '12px',
+          fontWeight: '500',
+          border: '1px solid rgba(102, 126, 234, 0.2)'
+        }
+      }, fileName)
+    ])
+  ]);
+
+  Modal.info({
+    title: h('div', {
+      style: {
+        display: 'flex',
+        alignItems: 'center',
+        gap: '12px',
+        fontSize: '20px',
+        fontWeight: '600',
+        color: '#2c3e50',
+        textAlign: 'center',
+        width: '100%',
+        justifyContent: 'center'
+      }
+    }, [
+      h('span', { style: { fontSize: '24px' } }, '🎵'),
+      '音频预览'
+    ]),
+    content: container,
+    width: '70%',
+    style: { 
+      maxWidth: '800px',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      borderRadius: '20px',
+      overflow: 'hidden',
+      boxShadow: '0 32px 96px rgba(0,0,0,0.3)',
+      border: '3px solid rgba(255,255,255,0.2)'
+    },
+    mask: true,
+    maskClosable: true,
+    footer: null,
+    closable: true,
+    okText: null,
+    cancelText: null
+  });
+};
+
 // 下载文件
 const handleDownload = async (file) => {
   try {
@@ -2393,6 +3041,95 @@ onMounted(() => {
   to { transform: rotate(360deg); }
 }
 
+/* 预览弹窗动画效果 */
+@keyframes float {
+  0%, 100% { transform: translateY(0px) rotate(0deg); }
+  25% { transform: translateY(-10px) rotate(1deg); }
+  50% { transform: translateY(-5px) rotate(-1deg); }
+  75% { transform: translateY(-15px) rotate(0.5deg); }
+}
+
+@keyframes pulse {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50% { transform: scale(1.05); opacity: 0.8; }
+}
+
+@keyframes slideIn {
+  from {
+    opacity: 0;
+    transform: translateY(-30px) scale(0.9);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* 预览弹窗样式增强 */
+:deep(.arco-modal) {
+  animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+:deep(.arco-modal-mask) {
+  animation: fadeIn 0.3s ease;
+  backdrop-filter: blur(8px);
+}
+
+:deep(.arco-modal-content) {
+  border-radius: 20px !important;
+  overflow: hidden;
+  box-shadow: 0 32px 96px rgba(0,0,0,0.3) !important;
+  border: 3px solid rgba(255,255,255,0.2) !important;
+}
+
+:deep(.arco-modal-header) {
+  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+  border-bottom: 1px solid rgba(255,255,255,0.2);
+  padding: 20px 24px;
+}
+
+:deep(.arco-modal-title) {
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+:deep(.arco-modal-close) {
+  background: rgba(255,255,255,0.9);
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  
+  &:hover {
+    background: rgba(255,255,255,1);
+    transform: scale(1.1);
+    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  }
+}
+
+/* 按钮悬停效果增强 */
+:deep(.arco-btn) {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+  }
+  
+  &:active {
+    transform: translateY(0);
+  }
+}
+
 /* 骨架屏样式 */
 .skeleton-item {
   height: 36px;

From a79c4f3489d21478bdf43c83c834d8aae21355c2 Mon Sep 17 00:00:00 2001
From: mashimin <3130004661@qq.com>
Date: Fri, 8 Aug 2025 14:26:22 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E4=B8=AD=E6=8E=A7?=
 =?UTF-8?q?=E5=8F=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/apis/project/personnel-dispatch.ts        |   98 ++
 src/apis/project/type.ts                      |  248 ++-
 src/router/route.ts                           |   23 +
 .../construction-personnel.vue                |  952 ++++++++++++
 .../personnel-dispatch/index.vue              | 1372 +++++++++++++++++
 5 files changed, 2692 insertions(+), 1 deletion(-)
 create mode 100644 src/apis/project/personnel-dispatch.ts
 create mode 100644 src/views/project-management/personnel-dispatch/construction-personnel.vue
 create mode 100644 src/views/project-management/personnel-dispatch/index.vue

diff --git a/src/apis/project/personnel-dispatch.ts b/src/apis/project/personnel-dispatch.ts
new file mode 100644
index 0000000..617c763
--- /dev/null
+++ b/src/apis/project/personnel-dispatch.ts
@@ -0,0 +1,98 @@
+import type * as T from './type'
+import http from '@/utils/http'
+
+export type * from './type'
+
+const BASE_URL = '/project-member'
+
+// ==================== 项目看板相关接口 ====================
+
+/** @desc 获取项目看板统计数据 */
+export function getProjectKanbanStats() {
+  return http.get<T.ProjectKanbanStats>(`${BASE_URL}/kanban/stats`)
+}
+
+/** @desc 获取项目看板数据 */
+export function getProjectKanbanData() {
+  return http.get<T.ProjectKanbanData>(`${BASE_URL}/kanban/data`)
+}
+
+/** @desc 获取项目详情 */
+export function getProjectDetail(id: string | number) {
+  return http.get<T.ProjectDetailResp>(`${BASE_URL}/project/${id}/detail`)
+}
+
+// ==================== 团队成员管理 ====================
+
+/** @desc 获取项目团队成员列表（支持筛选、分页、搜索） */
+export function getProjectTeamMembers(params: T.TeamMemberQuery) {
+  const { projectId, ...queryParams } = params
+  return http.get<T.BackendTeamMemberResp[]>(`${BASE_URL}/project/${projectId}/team-members`, { params: queryParams })
+}
+
+/** @desc 创建团队成员 */
+export function createTeamMember(data: T.CreateTeamMemberForm) {
+  return http.post<T.TeamMemberResp>(`${BASE_URL}/team-member`, data)
+}
+
+/** @desc 更新团队成员信息（支持更新状态） */
+export function updateTeamMember(id: string | number, data: T.UpdateTeamMemberForm) {
+  return http.put<T.TeamMemberResp>(`${BASE_URL}/team-member/${id}`, data)
+}
+
+/** @desc 删除团队成员（支持单个或批量删除） */
+export function deleteTeamMembers(ids: string | number | (string | number)[]) {
+  const idArray = Array.isArray(ids) ? ids : [ids]
+  return http.del(`${BASE_URL}/team-member/batch`, { data: { ids: idArray } })
+}
+
+/** @desc 导入团队成员数据 */
+export function importTeamMembers(projectId: string | number, file: File) {
+  const formData = new FormData()
+  formData.append('file', file)
+  formData.append('projectId', projectId.toString())
+  return http.post(`${BASE_URL}/team-member/import`, formData, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+/** @desc 导出团队成员数据 */
+export function exportTeamMembers(params: T.TeamMemberExportQuery) {
+  return http.get(`${BASE_URL}/team-member/export`, { 
+    params,
+    responseType: 'blob'
+  })
+}
+
+/** @desc 下载导入模板 */
+export function downloadImportTemplate() {
+  return http.get(`${BASE_URL}/team-member/template`, {
+    responseType: 'blob'
+  })
+}
+
+// ==================== 项目需求管理 ====================
+
+/** @desc 获取项目需求列表 */
+export function getProjectRequirements(projectId: string | number) {
+  return http.get<T.ProjectRequirementResp[]>(`${BASE_URL}/project/${projectId}/requirements`)
+}
+
+/** @desc 发布项目需求 */
+export function createProjectRequirement(data: T.CreateProjectRequirementForm) {
+  return http.post(`${BASE_URL}/requirement`, data)
+}
+
+/** @desc 更新项目需求状态 */
+export function updateRequirementStatus(data: T.UpdateRequirementStatusForm) {
+  return http.patch(`${BASE_URL}/requirement/status`, data)
+}
+
+/** @desc 删除项目需求 */
+export function deleteProjectRequirement(requirementId: string | number) {
+  return http.del(`${BASE_URL}/requirement/${requirementId}`)
+}
+
+ 
\ No newline at end of file
diff --git a/src/apis/project/type.ts b/src/apis/project/type.ts
index 32bc3b7..c15d7e8 100644
--- a/src/apis/project/type.ts
+++ b/src/apis/project/type.ts
@@ -85,4 +85,250 @@ export interface TaskQuery {
   status?: string
 }
 
-export interface TaskPageQuery extends TaskQuery, PageQuery {} 
\ No newline at end of file
+export interface TaskPageQuery extends TaskQuery, PageQuery {} 
+
+// ==================== 人员调度相关类型 ====================
+
+/** 项目看板统计数据 */
+export interface ProjectKanbanStats {
+  totalProjectsCount: string
+  pendingProjectCount: string
+  inProgressProjectCount: string
+  completedProjectCount: string
+  auditedProjectCount: string
+  acceptedProjectCount: string
+  totalTurbineCount: string
+  pendingTurbineCount: string
+  inProgressTurbineCount: string
+  completedTurbineCount: string
+  auditedTurbineCount: string
+  acceptedTurbineCount: string
+  totalTaskCount: string
+  pendingTaskCount: string
+  inProgressTaskCount: string
+  completedTaskCount: string
+  totalMemberCount: string
+  projectManagerCount: string
+  safetyOfficerCount: string
+  qualityOfficerCount: string
+  constructorCount: string
+  teamLeaderCount: string
+}
+
+/** 项目看板数据 */
+export interface ProjectKanbanData {
+  inProgressProjects: never[]
+  preparingProjects: ProjectCard[]
+  ongoingProjects: ProjectCard[]
+  pendingProjects: ProjectCard[]
+}
+
+/** 项目卡片信息 */
+export interface ProjectCard {
+  id: string | number
+  name: string
+  status: 'preparing' | 'ongoing' | 'pending'
+  budget: number
+  manager: string
+  teamSize: number
+  preparationProgress?: number
+  progress?: number
+  startDate?: string
+  endDate?: string
+  plannedStartDate?: string
+  alerts?: ProjectAlert[]
+  teamMembers: TeamMemberResp[]
+  requirements: ProjectRequirementResp[]
+}
+
+/** 项目异常信息 */
+export interface ProjectAlert {
+  type: 'cost' | 'personnel' | 'schedule' | 'quality'
+  message: string
+}
+
+/** 项目详情响应 */
+export interface ProjectDetailResp extends ProjectCard {
+  // 继承ProjectCard的所有字段，可以添加更多详情字段
+}
+
+/** 团队成员响应 */
+export interface TeamMemberResp {
+  id: string | number
+  name: string
+  position: string
+  phone?: string
+  email?: string
+  avatar?: string
+  joinDate?: string
+  performance?: number
+  remark?: string
+  status?: 'available' | 'busy' | 'offline'
+}
+
+/** 后端返回的团队成员数据结构 */
+export interface BackendTeamMemberResp {
+  memberId: string
+  projectId: string
+  projectName: string
+  turbineId: string | null
+  turbineName: string | null
+  taskGroupId: string | null
+  taskGroupName: string | null
+  taskId: string | null
+  taskName: string | null
+  userId: string
+  name: string
+  phone: string | null
+  email: string | null
+  position: string
+  status: 'ACTIVE' | 'BUSY' | 'OFFLINE'
+  skills: string
+  joinDate: string
+  remark: string
+  userAccount: string
+  userAvatar: string | null
+  roleType: string
+  roleTypeDesc: string
+  jobCode: string
+  jobCodeDesc: string
+  jobDesc: string
+  leaveDate: string | null
+  statusDesc: string
+}
+
+/** 团队成员查询参数（支持筛选、分页、搜索） */
+export interface TeamMemberQuery extends PageQuery {
+  projectId: string | number
+  name?: string // 姓名搜索
+  position?: string // 岗位筛选
+  status?: string // 状态筛选
+  joinDateStart?: string // 入职日期开始
+  joinDateEnd?: string // 入职日期结束
+  sortBy?: 'name' | 'position' | 'joinDate' | 'status' // 排序字段
+  sortOrder?: 'asc' | 'desc' // 排序方向
+}
+
+/** 团队成员导出查询参数（不包含分页） */
+export interface TeamMemberExportQuery {
+  projectId: string | number
+  name?: string // 姓名搜索
+  position?: string // 岗位筛选
+  status?: string // 状态筛选
+  joinDateStart?: string // 入职日期开始
+  joinDateEnd?: string // 入职日期结束
+  sortBy?: 'name' | 'position' | 'joinDate' | 'status' // 排序字段
+  sortOrder?: 'asc' | 'desc' // 排序方向
+}
+
+/** 创建团队成员表单 */
+export interface CreateTeamMemberForm {
+  projectId: string | number
+  name: string
+  phone: string
+  email?: string
+  position: string
+  status?: 'available' | 'busy' | 'offline'
+  joinDate?: string
+  remark?: string
+}
+
+/** 更新团队成员表单 */
+export interface UpdateTeamMemberForm {
+  name?: string
+  phone?: string
+  email?: string
+  position?: string
+  status?: 'available' | 'busy' | 'offline'
+  joinDate?: string
+  remark?: string
+}
+
+
+
+/** 批量操作表单 */
+export interface BatchOperationForm {
+  ids: (string | number)[]
+  operation: 'delete' | 'updateStatus'
+  status?: 'available' | 'busy' | 'offline'
+}
+
+/** 导入结果响应 */
+export interface ImportResultResp {
+  success: boolean
+  totalCount: number
+  successCount: number
+  failCount: number
+  errors?: Array<{
+    row: number
+    message: string
+  }>
+}
+
+/** 人员需求响应 */
+export interface PersonnelRequirementResp {
+  id: string | number
+  title: string
+  type: 'personnel' | 'equipment'
+  position?: string
+  equipmentType?: string
+  count: number
+  skills: string[]
+  description?: string
+  priority: 'low' | 'medium' | 'high'
+  status: 'pending' | 'recruiting' | 'completed'
+  createTime: string
+  updateTime: string
+}
+
+/** 创建需求表单 */
+export interface CreateRequirementForm {
+  projectId: string | number
+  type: 'personnel' | 'equipment'
+  position?: string
+  equipmentType?: string
+  count: number
+  skills: string[]
+  description?: string
+  priority: 'low' | 'medium' | 'high'
+}
+
+/** 简化项目需求响应类型 */
+export interface ProjectRequirementResp {
+  id: string | number
+  title: string
+  description: string
+  priority: 'low' | 'medium' | 'high'
+  status: 'pending' | 'recruiting' | 'completed'
+  createTime: string
+  updateTime: string
+}
+
+/** 简化创建项目需求表单类型 */
+export interface CreateProjectRequirementForm {
+  projectId: string | number
+  description: string
+  priority: 'low' | 'medium' | 'high'
+}
+
+/** 更新需求状态表单 */
+export interface UpdateRequirementStatusForm {
+  requirementId: string | number
+  status: 'pending' | 'recruiting' | 'completed'
+}
+
+
+
+/** 分页查询基础参数 */
+export interface PageQuery {
+  page: number
+  pageSize: number
+}
+
+/** 分页响应 */
+export interface PageRes<T> {
+  list: T[]
+  total: number
+  page: number
+  pageSize: number
+} 
\ No newline at end of file
diff --git a/src/router/route.ts b/src/router/route.ts
index ba06fd2..99cb49e 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -830,6 +830,29 @@ export const systemRoutes: RouteRecordRaw[] = [
           },
         ],
       },
+
+      //项目中控台
+      {
+        path: '/project-management/projects/personnel-dispatch',
+        name: 'PersonnelDispatch',
+        component: () => import('@/views/project-management/personnel-dispatch/index.vue'),
+        meta: {
+          title: '项目中控台',
+          icon: 'user-group',
+          hidden: false,
+        },
+      },
+      
+      {
+        path: '/project-management/personnel-dispatch/construction-personnel',
+        name: 'ConstructionPersonnel',
+        component: () => import('@/views/project-management/personnel-dispatch/construction-personnel.vue'),
+        meta: {
+          title: '团队成员管理',
+          icon: 'user',
+          hidden: true,
+        },
+      },
     ],
   },
 
diff --git a/src/views/project-management/personnel-dispatch/construction-personnel.vue b/src/views/project-management/personnel-dispatch/construction-personnel.vue
new file mode 100644
index 0000000..f891def
--- /dev/null
+++ b/src/views/project-management/personnel-dispatch/construction-personnel.vue
@@ -0,0 +1,952 @@
+<!--
+  团队成员管理页面
+  功能特性:
+  1. 团队成员列表展示
+  2. 新增团队成员
+  3. 编辑团队成员信息
+  4. 删除团队成员
+  5. 导入导出团队成员数据
+-->
+<template>
+  <GiPageLayout>
+    <!-- 页面头部 -->
+    <div class="page-header">
+      <div class="header-left">
+        <a-button @click="$router.back()" class="back-btn">
+          <template #icon><icon-left /></template>
+          返回
+        </a-button>
+        <div class="header-title">
+          <icon-user-group class="title-icon" />
+          <h1>团队成员管理</h1>
+          <span v-if="projectId" class="project-info">项目ID: {{ projectId }}</span>
+        </div>
+      </div>
+      <div class="header-actions">
+        <a-button type="primary" @click="openAddModal">
+          <template #icon><icon-plus /></template>
+          新增成员
+        </a-button>
+        <a-button @click="openImportModal">
+          <template #icon><icon-upload /></template>
+          导入
+        </a-button>
+        <a-button @click="exportData">
+          <template #icon><icon-download /></template>
+          导出
+        </a-button>
+      </div>
+    </div>
+
+    <!-- 简洁搜索区域 -->
+    <div class="search-section">
+      <a-card :bordered="false" class="search-card">
+        <a-form layout="inline" :model="searchForm">
+          <a-form-item label="姓名">
+            <a-input 
+              v-model="searchForm.name" 
+              placeholder="请输入姓名" 
+              style="width: 180px"
+              allow-clear
+              @press-enter="handleSearch"
+            />
+          </a-form-item>
+          <a-form-item label="岗位">
+            <a-select 
+              v-model="searchForm.position" 
+              placeholder="请选择岗位" 
+              style="width: 150px"
+              allow-clear
+            >
+              <a-option 
+                v-for="option in POSITION_OPTIONS" 
+                :key="option.value" 
+                :value="option.value"
+              >
+                {{ option.label }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item label="状态">
+            <a-select 
+              v-model="searchForm.status" 
+              placeholder="请选择状态" 
+              style="width: 120px"
+              allow-clear
+            >
+              <a-option 
+                v-for="option in STATUS_OPTIONS" 
+                :key="option.value" 
+                :value="option.value"
+              >
+                {{ option.label }}
+              </a-option>
+            </a-select>
+          </a-form-item>
+          <a-form-item>
+            <a-space>
+              <a-button type="primary" @click="handleSearch">
+                <template #icon><icon-search /></template>
+                搜索
+              </a-button>
+              <a-button @click="handleReset">
+                <template #icon><icon-refresh /></template>
+                重置
+              </a-button>
+            </a-space>
+          </a-form-item>
+        </a-form>
+      </a-card>
+    </div>
+
+    <!-- 数据表格 -->
+    <GiTable
+      row-key="id"
+      :data="dataList"
+      :columns="tableColumns"
+      :loading="loading"
+      :scroll="{ x: '100%', minWidth: 1200 }"
+      :pagination="pagination"
+      :disabled-tools="['size']"
+      @page-change="onPageChange"
+      @page-size-change="onPageSizeChange"
+      @refresh="loadData"
+    >
+      <!-- 状态列 -->
+      <template #status="{ record }">
+        <a-tag :color="getStatusColor(record.status || 'offline')">
+          {{ getStatusText(record.status || 'offline') }}
+        </a-tag>
+      </template>
+
+
+
+      <!-- 备注列 -->
+      <template #remark="{ record }">
+        <div class="remark-content" v-if="record.remark">
+          {{ record.remark }}
+        </div>
+        <span v-else class="no-remark">暂无备注</span>
+      </template>
+
+      <!-- 操作列 -->
+      <template #action="{ record }">
+        <a-space>
+          <a-link title="编辑" @click="openEditModal(record)">编辑</a-link>
+          <a-link title="状态调整" @click="openStatusModal(record)">状态</a-link>
+          <a-link status="danger" title="删除" @click="confirmDelete(record)">删除</a-link>
+        </a-space>
+      </template>
+    </GiTable>
+
+    <!-- 新增/编辑弹窗 -->
+    <a-modal
+      v-model:visible="memberModalVisible"
+      :title="isEdit ? '编辑团队成员' : '新增团队成员'"
+      width="600px"
+      @ok="saveMember"
+      @cancel="cancelMember"
+    >
+      <div class="member-form">
+        <div class="form-row">
+          <div class="form-item">
+            <label>姓名 <span class="required">*</span></label>
+            <a-input v-model="memberForm.name" placeholder="请输入姓名" />
+          </div>
+          <div class="form-item">
+            <label>联系电话 <span class="required">*</span></label>
+            <a-input v-model="memberForm.phone" placeholder="请输入联系电话" />
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-item">
+            <label>岗位 <span class="required">*</span></label>
+            <a-select v-model="memberForm.position" placeholder="请选择岗位">
+              <a-option 
+                v-for="option in POSITION_OPTIONS" 
+                :key="option.value" 
+                :value="option.value"
+              >
+                {{ option.label }}
+              </a-option>
+            </a-select>
+          </div>
+          <div class="form-item">
+            <label>状态</label>
+            <a-select v-model="memberForm.status" placeholder="请选择状态">
+              <a-option 
+                v-for="option in STATUS_OPTIONS" 
+                :key="option.value" 
+                :value="option.value"
+              >
+                {{ option.label }}
+              </a-option>
+            </a-select>
+          </div>
+        </div>
+        <div class="form-row">
+          <div class="form-item">
+            <label>邮箱</label>
+            <a-input v-model="memberForm.email" placeholder="请输入邮箱" />
+          </div>
+          <div class="form-item">
+            <label>入职日期</label>
+            <a-date-picker v-model="memberForm.joinDate" placeholder="请选择入职日期" />
+          </div>
+        </div>
+
+        <div class="form-item">
+          <label>备注信息</label>
+          <a-textarea 
+            v-model="memberForm.remark" 
+            placeholder="请输入备注信息，格式：主要负责：项目经理，次要负责：安全员等"
+            :rows="3"
+          />
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 状态调整弹窗 -->
+    <a-modal
+      v-model:visible="statusModalVisible"
+      title="调整状态"
+      width="400px"
+      @ok="saveStatus"
+      @cancel="cancelStatus"
+    >
+      <div class="status-form">
+        <div class="form-item">
+          <label>成员姓名:</label>
+          <span>{{ statusForm.name }}</span>
+        </div>
+        <div class="form-item">
+          <label>当前状态:</label>
+          <span>{{ getStatusText(statusForm.currentStatus) }}</span>
+        </div>
+        <div class="form-item">
+          <label>新状态:</label>
+          <a-select v-model="statusForm.newStatus" placeholder="请选择新状态">
+            <a-option 
+              v-for="option in STATUS_OPTIONS" 
+              :key="option.value" 
+              :value="option.value"
+            >
+              {{ option.label }}
+            </a-option>
+          </a-select>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 导入弹窗 -->
+    <a-modal
+      v-model:visible="importModalVisible"
+      title="导入团队成员"
+      width="500px"
+      @ok="confirmImport"
+      @cancel="cancelImport"
+    >
+      <div class="import-form">
+        <div class="form-item">
+          <label>选择文件:</label>
+          <a-upload
+            v-model:file-list="fileList"
+            :custom-request="customUpload"
+            :show-file-list="true"
+            accept=".xlsx,.xls,.csv"
+            :limit="1"
+          >
+            <a-button>
+              <template #icon><icon-upload /></template>
+              选择文件
+            </a-button>
+          </a-upload>
+        </div>
+        <div class="form-item">
+          <label>下载模板:</label>
+          <a-button type="text" @click="downloadTemplate">
+            <template #icon><icon-download /></template>
+            下载导入模板
+          </a-button>
+        </div>
+      </div>
+    </a-modal>
+  </GiPageLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import { useRoute } from 'vue-router'
+import type { TeamMemberResp, TeamMemberQuery, TeamMemberExportQuery, CreateTeamMemberForm, UpdateTeamMemberForm, BackendTeamMemberResp } from '@/apis/project/type'
+import { 
+  getProjectTeamMembers, 
+  createTeamMember, 
+  updateTeamMember, 
+  deleteTeamMembers,
+  importTeamMembers,
+  exportTeamMembers,
+  downloadImportTemplate
+} from '@/apis/project/personnel-dispatch'
+
+// 获取路由参数
+const route = useRoute()
+const projectId = route.query.projectId as string
+
+// 选项数据常量
+const POSITION_OPTIONS = [
+  { label: '项目经理', value: '项目经理' },
+  { label: '技术负责人', value: '技术负责人' },
+  { label: '安全员', value: '安全员' },
+  { label: '质量员', value: '质量员' },
+  { label: '施工员', value: '施工员' },
+  { label: '材料员', value: '材料员' },
+  { label: '资料员', value: '资料员' },
+  { label: '实习生', value: '实习生' },
+  { label: '技术工人', value: '技术工人' },
+  { label: '普通工人', value: '普通工人' }
+]
+
+const STATUS_OPTIONS = [
+  { label: '可用', value: 'available' },
+  { label: '忙碌', value: 'busy' },
+  { label: '离线', value: 'offline' }
+]
+
+// 响应式数据
+const loading = ref(false)
+const dataList = ref<TeamMemberResp[]>([])
+const pagination = reactive({
+  current: 1,
+  pageSize: 10,
+  total: 0,
+  showTotal: true,
+  showJumper: true,
+  showPageSize: true
+})
+
+// 搜索表单
+const searchForm = reactive<{
+  name: string
+  position: string
+  status: string
+}>({
+  name: '',
+  position: '',
+  status: ''
+})
+
+// 表格列配置
+const tableColumns = [
+  { title: '姓名', dataIndex: 'name', width: 100, fixed: 'left' },
+  { title: '联系电话', dataIndex: 'phone', width: 120 },
+  { title: '邮箱', dataIndex: 'email', width: 150 },
+  { title: '项目岗位', dataIndex: 'position', width: 120 },
+  { title: '状态', dataIndex: 'status', width: 100, slotName: 'status' },
+  { title: '入职日期', dataIndex: 'joinDate', width: 120 },
+  { title: '备注', dataIndex: 'remark', width: 200, slotName: 'remark' },
+  { title: '操作', dataIndex: 'action', width: 180, fixed: 'right', slotName: 'action' }
+]
+
+// 弹窗状态
+const memberModalVisible = ref(false)
+const statusModalVisible = ref(false)
+const importModalVisible = ref(false)
+const isEdit = ref(false)
+
+// 表单数据
+const memberForm = reactive<CreateTeamMemberForm & { id?: string | number }>({
+  projectId: projectId,
+  name: '',
+  phone: '',
+  email: '',
+  position: '',
+  status: 'available',
+  joinDate: '',
+  remark: ''
+})
+
+const statusForm = reactive<{
+  id: string | number
+  name: string
+  currentStatus: string
+  newStatus: 'available' | 'busy' | 'offline'
+}>({
+  id: '',
+  name: '',
+  currentStatus: '',
+  newStatus: 'available'
+})
+
+const fileList = ref<any[]>([])
+
+// 方法
+const loadData = async () => {
+  if (!projectId) {
+    console.warn('未获取到项目ID，无法加载团队成员数据')
+    Message.warning('未获取到项目信息，请从项目详情页面进入')
+    return
+  }
+
+  loading.value = true
+  try {
+    console.log('正在加载项目团队成员数据，项目ID:', projectId)
+    
+    // 构建查询参数
+    const queryParams: TeamMemberQuery = {
+      projectId: projectId,
+      page: pagination.current,
+      pageSize: pagination.pageSize,
+      name: searchForm.name || undefined,
+      position: searchForm.position || undefined,
+      status: searchForm.status || undefined
+    }
+    
+    const response = await getProjectTeamMembers(queryParams)
+    
+    console.log('API响应数据:', response.data)
+    
+    // 确保response.data是数组
+    const rawData = Array.isArray(response.data) ? response.data : [response.data]
+    
+    console.log('处理后的原始数据:', rawData)
+    
+    // 处理后端返回的数据，将后端字段映射到前端期望的字段
+    const mappedData = rawData.map((item: BackendTeamMemberResp) => {
+      const mappedItem: TeamMemberResp = {
+        id: item.memberId,
+        name: item.name || '',
+        phone: item.phone || '',
+        email: item.email || '',
+        position: item.position || '',
+        status: (item.status === 'ACTIVE' ? 'available' : item.status === 'BUSY' ? 'busy' : 'offline') as 'available' | 'busy' | 'offline',
+        joinDate: item.joinDate || '',
+        remark: item.remark || '',
+        avatar: item.userAvatar || ''
+      }
+      console.log('映射后的数据项:', mappedItem)
+      return mappedItem
+    })
+    
+    dataList.value = mappedData
+    pagination.total = mappedData.length
+    
+    console.log('团队成员数据加载完成，显示数据:', dataList.value.length, '条，总计:', pagination.total, '条')
+    
+  } catch (error) {
+    console.error('团队成员数据加载失败:', error)
+    Message.error('团队成员数据加载失败')
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleSearch = async () => {
+  pagination.current = 1
+  await loadData()
+}
+
+const handleReset = () => {
+  console.log('重置搜索表单')
+  Object.assign(searchForm, {
+    name: '',
+    position: '',
+    status: ''
+  })
+  pagination.current = 1
+  loadData()
+}
+
+const onPageChange = (page: number) => {
+  pagination.current = page
+  loadData()
+}
+
+const onPageSizeChange = (pageSize: number) => {
+  pagination.pageSize = pageSize
+  pagination.current = 1
+  loadData()
+}
+
+const openAddModal = () => {
+  isEdit.value = false
+  resetMemberForm()
+  memberModalVisible.value = true
+}
+
+const openEditModal = (record: TeamMemberResp) => {
+  isEdit.value = true
+  Object.assign(memberForm, {
+    id: record.id,
+    projectId: projectId,
+    name: record.name,
+    phone: record.phone || '',
+    email: record.email || '',
+    position: record.position,
+    status: record.status || 'available',
+    joinDate: record.joinDate || '',
+    remark: record.remark || ''
+  })
+  memberModalVisible.value = true
+}
+
+const saveMember = async () => {
+  if (!memberForm.name || !memberForm.phone || !memberForm.position) {
+    Message.error('请填写必填项')
+    return
+  }
+
+  try {
+    if (isEdit.value && memberForm.id) {
+      // 更新团队成员
+      const updateData: UpdateTeamMemberForm = {
+        name: memberForm.name,
+        phone: memberForm.phone,
+        email: memberForm.email,
+        position: memberForm.position,
+        status: memberForm.status,
+        joinDate: memberForm.joinDate,
+        remark: memberForm.remark
+      }
+      await updateTeamMember(memberForm.id, updateData)
+      Message.success('更新成功')
+    } else {
+      // 创建团队成员
+      const createData: CreateTeamMemberForm = {
+        projectId: projectId,
+        name: memberForm.name,
+        phone: memberForm.phone,
+        email: memberForm.email,
+        position: memberForm.position,
+        status: memberForm.status,
+        joinDate: memberForm.joinDate,
+        remark: memberForm.remark
+      }
+      await createTeamMember(createData)
+      Message.success('添加成功')
+    }
+    
+    memberModalVisible.value = false
+    loadData()
+  } catch (error) {
+    console.error('保存团队成员失败:', error)
+    Message.error(isEdit.value ? '更新失败' : '添加失败')
+  }
+}
+
+const cancelMember = () => {
+  memberModalVisible.value = false
+  resetMemberForm()
+}
+
+const resetMemberForm = () => {
+  Object.assign(memberForm, {
+    id: undefined,
+    projectId: projectId,
+    name: '',
+    phone: '',
+    email: '',
+    position: '',
+    status: 'available',
+    joinDate: '',
+    remark: ''
+  })
+}
+
+const openStatusModal = (record: TeamMemberResp) => {
+  Object.assign(statusForm, {
+    id: record.id,
+    name: record.name,
+    currentStatus: record.status || 'available',
+    newStatus: record.status || 'available'
+  })
+  statusModalVisible.value = true
+}
+
+const saveStatus = async () => {
+  try {
+    await updateTeamMember(statusForm.id, { 
+      status: statusForm.newStatus as 'available' | 'busy' | 'offline' 
+    })
+    Message.success('状态更新成功')
+    statusModalVisible.value = false
+    loadData()
+  } catch (error) {
+    console.error('状态更新失败:', error)
+    Message.error('状态更新失败')
+  }
+}
+
+const cancelStatus = () => {
+  statusModalVisible.value = false
+}
+
+const confirmDelete = (record: TeamMemberResp) => {
+  Modal.confirm({
+    title: '确认删除',
+    content: `确定要删除团队成员"${record.name}"吗？`,
+    onOk: async () => {
+      try {
+        await deleteTeamMembers(record.id)
+        Message.success('删除成功')
+        loadData()
+      } catch (error) {
+        console.error('删除失败:', error)
+        Message.error('删除失败')
+      }
+    }
+  })
+}
+
+const openImportModal = () => {
+  importModalVisible.value = true
+}
+
+const customUpload = (options: any) => {
+  const { file } = options
+  fileList.value = [file]
+}
+
+const confirmImport = async () => {
+  if (fileList.value.length === 0) {
+    Message.error('请选择要导入的文件')
+    return
+  }
+
+  try {
+    const file = fileList.value[0].originFileObj
+    await importTeamMembers(projectId, file)
+    Message.success('导入成功')
+    importModalVisible.value = false
+    fileList.value = []
+    loadData()
+  } catch (error) {
+    console.error('导入失败:', error)
+    Message.error('导入失败')
+  }
+}
+
+const cancelImport = () => {
+  importModalVisible.value = false
+  fileList.value = []
+}
+
+const downloadTemplate = async () => {
+  try {
+    const response = await downloadImportTemplate()
+    const blob = new Blob([response.data], { 
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+    })
+    const url = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = '团队成员导入模板.xlsx'
+    link.click()
+    window.URL.revokeObjectURL(url)
+    Message.success('模板下载成功')
+  } catch (error) {
+    console.error('模板下载失败:', error)
+    Message.error('模板下载失败')
+  }
+}
+
+const exportData = async () => {
+  try {
+    const queryParams: TeamMemberExportQuery = {
+      projectId: projectId,
+      name: searchForm.name || undefined,
+      position: searchForm.position || undefined,
+      status: searchForm.status || undefined
+    }
+    
+    const response = await exportTeamMembers(queryParams)
+    const blob = new Blob([response.data], { 
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
+    })
+    const url = window.URL.createObjectURL(blob)
+    const link = document.createElement('a')
+    link.href = url
+    link.download = `团队成员数据_${new Date().toISOString().split('T')[0]}.xlsx`
+    link.click()
+    window.URL.revokeObjectURL(url)
+    Message.success('导出成功')
+  } catch (error) {
+    console.error('导出失败:', error)
+    Message.error('导出失败')
+  }
+}
+
+// 工具方法
+const getStatusColor = (status: string) => {
+  const colorMap: Record<string, string> = {
+    available: 'green',
+    busy: 'orange',
+    offline: 'gray'
+  }
+  return colorMap[status] || 'gray'
+}
+
+const getStatusText = (status: string) => {
+  const textMap: Record<string, string> = {
+    available: '可用',
+    busy: '忙碌',
+    offline: '离线'
+  }
+  return textMap[status] || '未知'
+}
+
+// 生命周期
+onMounted(() => {
+  console.log('团队成员管理页面加载，项目ID:', projectId)
+  if (projectId) {
+    loadData()
+  } else {
+    console.warn('未获取到项目ID，无法加载团队成员数据')
+    Message.warning('未获取到项目信息，请从项目详情页面进入')
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+// 确保页面可以正常滚动
+:deep(.gi-page-layout) {
+  height: auto !important;
+  min-height: 100vh;
+  overflow-y: visible;
+}
+
+:deep(.gi-page-layout__body) {
+  height: auto !important;
+  overflow-y: visible;
+}
+
+// 确保全局滚动正常
+:deep(body), :deep(html) {
+  overflow-y: auto !important;
+  height: auto !important;
+}
+
+// 确保页面容器可以滚动
+:deep(.app-main), :deep(.main-content), :deep(.layout-content) {
+  overflow-y: auto !important;
+  height: auto !important;
+}
+
+// 确保表格容器可以滚动
+:deep(.arco-table-container) {
+  overflow-x: auto;
+  overflow-y: visible;
+}
+.page-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 24px;
+  padding: 20px;
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+
+  .header-left {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+
+    .back-btn {
+      border: none;
+      background: #f7f8fa;
+      color: #4e5969;
+      
+      &:hover {
+        background: #e5e6eb;
+        color: #1d2129;
+      }
+    }
+
+    .header-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      .title-icon {
+        font-size: 24px;
+        color: #667eea;
+      }
+
+      h1 {
+        margin: 0;
+        font-size: 20px;
+        font-weight: 600;
+        color: #1d2129;
+      }
+
+      .project-info {
+        font-size: 14px;
+        color: #969fa8;
+      }
+    }
+  }
+
+  .header-actions {
+    display: flex;
+    gap: 12px;
+  }
+}
+
+.search-section {
+  margin-bottom: 16px;
+  
+  .search-card {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    
+    :deep(.arco-card-body) {
+      padding: 20px;
+    }
+    
+    :deep(.arco-form-item) {
+      margin-bottom: 0;
+      margin-right: 16px;
+    }
+    
+    :deep(.arco-form-item-label) {
+      font-weight: 500;
+      color: #4e5969;
+    }
+    
+    :deep(.arco-input),
+    :deep(.arco-select) {
+      width: 100%;
+    }
+  }
+}
+
+// 表格区域样式
+:deep(.gi-table) {
+  background: white;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  margin-bottom: 24px;
+  
+  .arco-table-container {
+    overflow-x: auto;
+    overflow-y: visible;
+  }
+  
+  .arco-table {
+    overflow: visible;
+  }
+}
+
+
+
+.remark-content {
+  max-width: 180px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: #4e5969;
+}
+
+.no-remark {
+  color: #c9cdd4;
+  font-style: italic;
+}
+
+.member-form {
+  .form-row {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 16px;
+    margin-bottom: 16px;
+  }
+
+  .form-item {
+    margin-bottom: 16px;
+
+    label {
+      display: block;
+      font-weight: 500;
+      color: #4e5969;
+      margin-bottom: 6px;
+
+      .required {
+        color: #f53f3f;
+      }
+    }
+
+    .arco-input,
+    .arco-select,
+    .arco-textarea,
+    .arco-date-picker {
+      width: 100%;
+    }
+  }
+}
+
+.status-form {
+  .form-item {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 16px;
+
+    label {
+      font-weight: 500;
+      color: #4e5969;
+      min-width: 80px;
+    }
+
+    .arco-select {
+      flex: 1;
+    }
+  }
+}
+
+.import-form {
+  .form-item {
+    margin-bottom: 16px;
+
+    label {
+      display: block;
+      font-weight: 500;
+      color: #4e5969;
+      margin-bottom: 6px;
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    gap: 16px;
+    align-items: stretch;
+
+    .header-actions {
+      justify-content: center;
+    }
+  }
+
+  .search-section {
+    .search-card {
+      :deep(.arco-form) {
+        flex-direction: column;
+        align-items: stretch;
+      }
+      
+      :deep(.arco-form-item) {
+        margin-right: 0;
+        margin-bottom: 16px;
+      }
+    }
+  }
+
+  .member-form {
+    .form-row {
+      grid-template-columns: 1fr;
+    }
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/views/project-management/personnel-dispatch/index.vue b/src/views/project-management/personnel-dispatch/index.vue
new file mode 100644
index 0000000..7903e24
--- /dev/null
+++ b/src/views/project-management/personnel-dispatch/index.vue
@@ -0,0 +1,1372 @@
+<!--
+  人员调度管理页面 - 项目状态看板
+  功能特性:
+  1. 以项目状态分类的图形化看板
+  2. 项目卡片展示基本信息
+  3. 项目明细弹窗
+  4. 人员需求发布
+  5. 团队成员岗位编辑
+-->
+<template>
+  <GiPageLayout>
+    <!-- 页面头部 -->
+    <div class="personnel-dispatch-header">
+      <div class="header-content">
+        <div class="header-title">
+          <icon-dashboard class="title-icon" />
+          <h1>项目调度看板</h1>
+          <a-button 
+            size="small" 
+            type="text" 
+            @click="refreshData"
+            :loading="loading"
+            class="refresh-btn"
+          >
+            <template #icon><icon-refresh /></template>
+            刷新
+          </a-button>
+        </div>
+        <div class="header-stats">
+          <div class="stat-card" :class="{ 'loading': loading }">
+            <div class="stat-number">
+              <a-spin v-if="loading" size="small" />
+              <span v-else>{{ stats.totalProjectsCount }}</span>
+            </div>
+            <div class="stat-label">总项目数</div>
+          </div>
+          <div class="stat-card" :class="{ 'loading': loading }">
+            <div class="stat-number">
+              <a-spin v-if="loading" size="small" />
+              <span v-else>{{ stats.inProgressProjectCount }}</span>
+            </div>
+            <div class="stat-label">进行中</div>
+          </div>
+          <div class="stat-card" :class="{ 'loading': loading }">
+            <div class="stat-number">
+              <a-spin v-if="loading" size="small" />
+              <span v-else>{{ stats.pendingProjectCount }}</span>
+            </div>
+            <div class="stat-label">准备中</div>
+          </div>
+          <div class="stat-card" :class="{ 'loading': loading }">
+            <div class="stat-number">
+              <a-spin v-if="loading" size="small" />
+              <span v-else>{{ stats.completedProjectCount }}</span>
+            </div>
+            <div class="stat-label">已完成</div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+
+    <!-- 项目状态看板 -->
+    <div class="project-kanban">
+      <!-- 准备中项目 -->
+      <div class="kanban-column">
+        <div class="column-header preparing">
+          <div class="column-title">
+            <icon-clock-circle class="status-icon" />
+            <h2>准备中</h2>
+            <span class="project-count">{{ preparingProjects.length }}</span>
+          </div>
+        </div>
+        <div class="column-content">
+          <div 
+            v-for="project in preparingProjects" 
+            :key="project.id"
+            class="project-card preparing"
+            @click="openProjectDetail(project)"
+          >
+            <div class="project-header">
+              <h3 class="project-name">{{ project.name }}</h3>
+              <div class="project-status preparing">准备中</div>
+            </div>
+            <div class="project-info">
+              <div class="info-item">
+                <icon-money class="info-icon" />
+                <span>预算: {{ formatBudget(project.budget) }}</span>
+              </div>
+              <div class="info-item">
+                <icon-user class="info-icon" />
+                <span>负责人: {{ project.manager }}</span>
+              </div>
+              <div class="info-item">
+                <icon-team class="info-icon" />
+                <span>团队: {{ project.teamSize }}人</span>
+              </div>
+            </div>
+            <div class="project-footer">
+              <div class="progress-info">
+                <span>准备进度</span>
+                <span class="progress-text">{{ project.preparationProgress }}%</span>
+              </div>
+              <div class="progress-bar">
+                <div class="progress-fill" :style="{ width: `${project.preparationProgress}%` }"></div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 已开工项目 -->
+      <div class="kanban-column">
+        <div class="column-header ongoing">
+          <div class="column-title">
+            <icon-play-circle class="status-icon" />
+            <h2>已开工</h2>
+            <span class="project-count">{{ ongoingProjects.length }}</span>
+          </div>
+        </div>
+        <div class="column-content">
+          <div 
+            v-for="project in ongoingProjects" 
+            :key="project.id"
+            class="project-card ongoing"
+            @click="openProjectDetail(project)"
+          >
+            <div class="project-header">
+              <h3 class="project-name">{{ project.name }}</h3>
+              <div class="project-status ongoing">进行中</div>
+            </div>
+            <div class="project-info">
+              <div class="info-item">
+                <icon-money class="info-icon" />
+                <span>预算: {{ formatBudget(project.budget) }}</span>
+              </div>
+              <div class="info-item">
+                <icon-user class="info-icon" />
+                <span>负责人: {{ project.manager }}</span>
+              </div>
+              <div class="info-item">
+                <icon-team class="info-icon" />
+                <span>团队: {{ project.teamSize }}人</span>
+              </div>
+            </div>
+            <div class="project-footer">
+              <div class="progress-info">
+                <span>项目进度</span>
+                <span class="progress-text">{{ project.progress }}%</span>
+              </div>
+              <div class="progress-bar">
+                <div class="progress-fill" :style="{ width: `${project.progress}%` }"></div>
+              </div>
+            </div>
+            <div class="project-alerts" v-if="project.alerts.length > 0">
+              <div 
+                v-for="alert in project.alerts" 
+                :key="alert.type"
+                class="alert-item"
+                :class="alert.type"
+              >
+                <icon-exclamation-circle />
+                {{ alert.message }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+
+    </div>
+
+    <!-- 项目明细弹窗 -->
+    <a-modal
+      v-model:visible="projectDetailVisible"
+      :title="currentProject?.name"
+      width="800px"
+      :footer="false"
+      @cancel="closeProjectDetail"
+    >
+      <div v-if="currentProject" class="project-detail">
+        <!-- 项目基本信息 -->
+        <div class="detail-section">
+          <h3>项目基本信息</h3>
+          <div class="info-grid">
+            <div class="info-item">
+              <label>项目名称:</label>
+              <span>{{ currentProject.name }}</span>
+            </div>
+            <div class="info-item">
+              <label>项目状态:</label>
+              <span class="status-badge" :class="currentProject.status">{{ getStatusText(currentProject.status) }}</span>
+            </div>
+            <div class="info-item">
+              <label>项目预算:</label>
+              <span>{{ formatBudget(currentProject.budget) }}</span>
+            </div>
+            <div class="info-item">
+              <label>项目负责人:</label>
+              <span>{{ currentProject.manager }}</span>
+            </div>
+            <div class="info-item">
+              <label>团队人数:</label>
+              <span>{{ currentProject.teamSize }}人</span>
+            </div>
+            <div class="info-item">
+              <label>开始时间:</label>
+              <span>{{ formatDate(currentProject.startDate) }}</span>
+            </div>
+            <div class="info-item" v-if="currentProject.endDate">
+              <label>结束时间:</label>
+              <span>{{ formatDate(currentProject.endDate) }}</span>
+            </div>
+            <div class="info-item" v-if="currentProject.progress !== undefined">
+              <label>项目进度:</label>
+              <span>{{ currentProject.progress }}%</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 异常状态 -->
+        <div class="detail-section" v-if="currentProject.alerts && currentProject.alerts.length > 0">
+          <h3>异常状态</h3>
+          <div class="alerts-list">
+            <div 
+              v-for="alert in currentProject.alerts" 
+              :key="alert.type"
+              class="alert-item"
+              :class="alert.type"
+            >
+              <icon-exclamation-circle />
+              <span>{{ alert.message }}</span>
+            </div>
+          </div>
+        </div>
+
+        <!-- 团队成员明细 -->
+        <div class="detail-section">
+          <div class="section-header">
+            <h3>团队成员明细</h3>
+            <a-button size="small" @click="openPersonnelManagement">
+              <template #icon><icon-user-group /></template>
+              添加成员
+            </a-button>
+          </div>
+          <div class="team-members">
+            <div 
+              v-for="member in currentProject.teamMembers" 
+              :key="member.id"
+              class="member-item"
+              @click="editMemberPosition(member)"
+            >
+              <div class="member-avatar">
+                <icon-user />
+              </div>
+              <div class="member-info">
+                <div class="member-name">{{ member.name }}</div>
+                <div class="member-position">{{ member.position }}</div>
+                <div class="member-details">
+                  <span class="member-status" :class="member.status">
+                    {{ member.status === 'available' ? '在线' : '离线' }}
+                  </span>
+                  <span class="member-date">入职: {{ member.joinDate }}</span>
+                </div>
+              </div>
+              <div class="member-actions">
+                <a-button size="mini" @click.stop="editMemberRemark(member)">
+                  <template #icon><icon-edit /></template>
+                  添加备注
+                </a-button>
+              </div>
+            </div>
+            <!-- 空状态提示 -->
+            <div v-if="!currentProject.teamMembers || currentProject.teamMembers.length === 0" class="empty-state">
+              <div class="empty-icon">
+                <icon-user-group />
+              </div>
+              <div class="empty-text">暂无团队成员</div>
+              <div class="empty-desc">点击"添加成员"按钮来添加项目团队成员</div>
+            </div>
+          </div>
+        </div>
+
+        <!-- 项目需求发布 -->
+        <div class="detail-section">
+          <div class="section-header">
+            <h3>项目需求</h3>
+            <a-button type="primary" size="small" @click="openProjectRequirement">
+              <template #icon><icon-plus /></template>
+              发布需求
+            </a-button>
+          </div>
+          <div class="requirements-list">
+            <div 
+              v-for="requirement in currentProject.requirements" 
+              :key="requirement.id"
+              class="requirement-item"
+            >
+              <div class="requirement-info">
+                <div class="requirement-title">{{ requirement.title }}</div>
+                <div class="requirement-details">
+                  <span>需求类型: {{ requirement.type === 'personnel' ? '人员需求' : '设备需求' }}</span>
+                  <span v-if="requirement.type === 'personnel'">需求人数: {{ requirement.count }}人</span>
+                  <span v-if="requirement.type === 'equipment'">设备数量: {{ requirement.count }}台</span>
+                  <span>技能要求: {{ requirement.skills.join(', ') }}</span>
+                </div>
+              </div>
+              <div class="requirement-status" :class="requirement.status">
+                {{ getRequirementStatusText(requirement.status) }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 备注编辑弹窗 -->
+    <a-modal
+      v-model:visible="remarkEditVisible"
+      title="添加备注"
+      width="600px"
+      @ok="saveRemarkEdit"
+      @cancel="cancelRemarkEdit"
+    >
+      <div v-if="editingMember" class="remark-edit">
+        <div class="edit-item">
+          <label>成员姓名:</label>
+          <span>{{ editingMember.name }}</span>
+        </div>
+        <div class="edit-item">
+          <label>当前岗位:</label>
+          <span>{{ editingMember.position }}</span>
+        </div>
+        <div class="edit-item">
+          <label>备注信息:</label>
+          <a-textarea 
+            v-model="newRemark" 
+            placeholder="请输入备注信息，格式：主要负责：项目经理，次要负责：安全员等"
+            :rows="4"
+          />
+        </div>
+        <div class="edit-item">
+          <label>备注示例:</label>
+          <div class="remark-example">
+            主要负责：项目经理，次要负责：安全员，协助：质量员
+          </div>
+        </div>
+      </div>
+    </a-modal>
+
+    <!-- 项目需求发布弹窗 -->
+    <a-modal
+      v-model:visible="requirementVisible"
+      title="发布项目需求"
+      width="500px"
+      @ok="saveProjectRequirement"
+      @cancel="cancelProjectRequirement"
+    >
+      <div class="requirement-form">
+        <div class="form-item">
+          <label>需求描述:</label>
+          <a-textarea v-model="newRequirement.description" :rows="3" placeholder="请描述具体需求" />
+        </div>
+        <div class="form-item">
+          <label>紧急程度:</label>
+          <a-select v-model="newRequirement.priority" placeholder="请选择紧急程度">
+            <a-option value="low">一般</a-option>
+            <a-option value="medium">紧急</a-option>
+            <a-option value="high">非常紧急</a-option>
+          </a-select>
+        </div>
+      </div>
+    </a-modal>
+  </GiPageLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { Message } from '@arco-design/web-vue'
+import { getProjectKanbanStats, getProjectKanbanData, getProjectDetail } from '@/apis/project/personnel-dispatch'
+
+const router = useRouter()
+
+// 响应式数据
+const stats = reactive({
+  totalProjectsCount: '0',
+  pendingProjectCount: '0',
+  inProgressProjectCount: '0',
+  completedProjectCount: '0',
+  auditedProjectCount: '0',
+  acceptedProjectCount: '0',
+  totalTurbineCount: '0',
+  pendingTurbineCount: '0',
+  inProgressTurbineCount: '0',
+  completedTurbineCount: '0',
+  auditedTurbineCount: '0',
+  acceptedTurbineCount: '0',
+  totalTaskCount: '0',
+  pendingTaskCount: '0',
+  inProgressTaskCount: '0',
+  completedTaskCount: '0',
+  totalMemberCount: '0',
+  projectManagerCount: '0',
+  safetyOfficerCount: '0',
+  qualityOfficerCount: '0',
+  constructorCount: '0',
+  teamLeaderCount: '0'
+})
+
+// 加载状态
+const loading = ref(false)
+
+// 项目数据
+const preparingProjects = ref<any[]>([])
+const ongoingProjects = ref<any[]>([])
+
+
+
+// 弹窗状态
+const projectDetailVisible = ref(false)
+const remarkEditVisible = ref(false)
+const requirementVisible = ref(false)
+
+// 当前选中的项目
+const currentProject = ref<any>(null)
+
+// 编辑相关
+const editingMember = ref<any>(null)
+const newRemark = ref('')
+
+// 需求相关
+const newRequirement = reactive({
+  description: '',
+  priority: 'medium'
+})
+
+// 计算属性
+const totalProjects = computed(() => {
+  return preparingProjects.value.length + ongoingProjects.value.length
+})
+
+// 方法
+const mapProjectRespToProjectCard = (projectResp: any): any => {
+  // 计算团队人数：根据constructorNames的人数 + 项目经理 + 安全员 + 质量员
+  let teamSize = 3 // 基础人数：项目经理、安全员、质量员
+  if (projectResp.constructorNames) {
+    const constructorCount = projectResp.constructorNames.split(',').length
+    teamSize += constructorCount
+  }
+  
+  // 处理团队成员数据 - 使用后端返回的真实数据
+  const teamMembers = projectResp.teamMembers ? projectResp.teamMembers.map((member: any) => {
+    console.log('处理团队成员数据:', member) // 添加调试日志
+    const mappedMember = {
+      id: member.memberId,
+      name: member.name, // 修复：使用正确的姓名字段
+      position: member.roleTypeDesc || member.jobCodeDesc,
+      phone: member.phone || '', // 后端数据中的电话字段
+      email: member.email || '', // 后端数据中的邮箱字段
+      status: member.status === 'ACTIVE' ? 'available' : 'offline',
+      skills: [], // 后端数据中没有技能字段
+      joinDate: member.joinDate,
+      remark: member.remark || member.jobDesc || '',
+      // 保留原始数据用于后续处理
+      originalData: member
+    }
+    console.log('映射后的团队成员数据:', mappedMember) // 添加调试日志
+    return mappedMember
+  }) : []
+  
+  // 根据后端返回的ProjectResp格式映射到前端ProjectCard格式
+  // 确保状态比较时类型一致
+  const status = typeof projectResp.status === 'string' ? parseInt(projectResp.status) : projectResp.status
+  
+  const mappedProject = {
+    id: projectResp.projectId || projectResp.id,
+    name: projectResp.projectName || projectResp.name,
+    status: status === 0 ? 'preparing' : status === 1 ? 'ongoing' : 'pending',
+    budget: projectResp.budget || 500000, // 使用后端返回的预算数据
+    manager: projectResp.projectManagerName || projectResp.manager || '未指定',
+    teamSize: projectResp.teamSize || teamSize, // 使用后端返回的团队人数
+    preparationProgress: status === 0 ? 50 : 100, // 准备中项目进度50%，其他100%
+    progress: projectResp.progressPercentage || 0,
+    startDate: projectResp.startDate,
+    endDate: projectResp.endDate,
+    plannedStartDate: projectResp.plannedStartDate || projectResp.startDate,
+    alerts: [], // 暂时为空数组
+    teamMembers: teamMembers, // 使用处理后的团队成员数据
+    requirements: [] // 暂时为空数组，后续可以通过API获取
+  }
+  
+  return mappedProject
+}
+
+const loadStats = async () => {
+  loading.value = true
+  try {
+    const response = await getProjectKanbanStats()
+    if (response.data) {
+      Object.assign(stats, response.data)
+    }
+  } catch (error) {
+    console.error('获取项目看板统计数据失败:', error)
+    Message.error('获取统计数据失败，请稍后重试')
+    // 如果API调用失败，使用本地数据作为后备
+    stats.totalProjectsCount = totalProjects.value.toString()
+    stats.inProgressProjectCount = ongoingProjects.value.length.toString()
+    stats.pendingProjectCount = '0'
+    stats.completedProjectCount = '0'
+  } finally {
+    loading.value = false
+  }
+}
+
+const loadKanbanData = async () => {
+  loading.value = true
+  try {
+    const response = await getProjectKanbanData()
+    console.log('后端返回的原始数据:', response.data)
+    
+    if (response.data) {
+      // 清空现有数据
+      preparingProjects.value = []
+      ongoingProjects.value = []
+      
+      // 处理所有项目数据，根据status分类
+      const allProjects = [
+        ...(response.data.preparingProjects || []),
+        ...(response.data.ongoingProjects || []),
+        ...(response.data.inProgressProjects || []), // 添加inProgressProjects
+        ...(response.data.pendingProjects || [])
+      ]
+      
+      // 根据项目状态分类
+      allProjects.forEach(project => {
+        const mappedProject = mapProjectRespToProjectCard(project)
+        
+        // 确保状态比较时类型一致，将字符串转换为数字进行比较
+        const status = typeof project.status === 'string' ? parseInt(project.status) : project.status
+        
+        if (status === 0) {
+          // status: 0 表示准备中
+          preparingProjects.value.push(mappedProject)
+        } else if (status === 1) {
+          // status: 1 表示进行中
+          ongoingProjects.value.push(mappedProject)
+        }
+        // status: 其他值表示未开工，我们不需要显示
+      })
+      
+      console.log('分类后的准备中项目:', preparingProjects.value)
+      console.log('分类后的进行中项目:', ongoingProjects.value)
+    }
+  } catch (error) {
+    console.error('获取项目看板数据失败:', error)
+    Message.error('获取看板数据失败，请稍后重试')
+    
+    // 如果API调用失败，使用模拟数据作为后备
+    const mockPreparingProjects = [
+      {
+        projectId: 'mock-001',
+        projectName: '三峡能源阿城万兴风电场防雷通道检测项目',
+        projectManagerName: '张大川',
+        turbineCount: '1',
+        status: 0,
+        startDate: '2025-07-01',
+        endDate: '2025-07-31',
+        progressPercentage: 0
+      }
+    ]
+    
+    const mockOngoingProjects = [
+      {
+        projectId: '0b71a1259c49918c6595c9720ad1db5d',
+        projectName: '三峡能源辽宁分公司庄河海上风电场防雷通道检测项目',
+        projectManagerName: '张大川,董冰',
+        constructorNames: '牟晓松,cs,谢小兵,高阳,韩凌柱,朱贤进',
+        turbineCount: '0',
+        status: 1,
+        startDate: '2025-06-05',
+        endDate: null,
+        progressPercentage: 0
+      }
+    ]
+    
+    preparingProjects.value = mockPreparingProjects.map(mapProjectRespToProjectCard)
+    ongoingProjects.value = mockOngoingProjects.map(mapProjectRespToProjectCard)
+  } finally {
+    loading.value = false
+  }
+}
+
+const refreshData = async () => {
+  await Promise.all([
+    loadStats(),
+    loadKanbanData()
+  ])
+}
+
+const formatBudget = (budget: number) => {
+  return `¥${(budget / 10000).toFixed(0)}万`
+}
+
+const formatDate = (date: string) => {
+  return new Date(date).toLocaleDateString('zh-CN')
+}
+
+const getStatusText = (status: string) => {
+  const statusMap = {
+    preparing: '准备中',
+    ongoing: '进行中',
+    pending: '未开工'
+  }
+  return statusMap[status] || status
+}
+
+const getRequirementStatusText = (status: string) => {
+  const statusMap = {
+    pending: '待解决',
+    recruiting: '解决中',
+    completed: '已解决'
+  }
+  return statusMap[status] || status
+}
+
+const openProjectDetail = async (project: any) => {
+  try {
+    loading.value = true
+    console.log('正在获取项目详情，项目ID:', project.id)
+    
+    // 首先检查传入的项目数据是否已经包含团队成员信息
+    if (project.teamMembers && project.teamMembers.length > 0) {
+      console.log('项目数据已包含团队成员信息，直接使用')
+      currentProject.value = project
+      projectDetailVisible.value = true
+      return
+    }
+    
+    // 如果项目数据中没有团队成员信息，则调用API获取
+    const response = await getProjectDetail(project.id)
+    
+    if (response.data) {
+      // 使用映射函数处理后端数据
+      currentProject.value = mapProjectRespToProjectCard(response.data)
+      projectDetailVisible.value = true
+    } else {
+      // 如果API没有返回数据，使用传入的项目数据作为后备
+      currentProject.value = project
+      projectDetailVisible.value = true
+    }
+  } catch (error) {
+    console.error('获取项目详情失败:', error)
+    Message.error('获取项目详情失败，请稍后重试')
+    // 如果API调用失败，使用传入的项目数据作为后备
+    currentProject.value = project
+    projectDetailVisible.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+const closeProjectDetail = () => {
+  projectDetailVisible.value = false
+  currentProject.value = null
+}
+
+const openPersonnelManagement = () => {
+  if (currentProject.value && currentProject.value.id) {
+    router.push({
+      path: '/project-management/projects/personnel-dispatch/construction-personnel',
+      query: { projectId: currentProject.value.id }
+    })
+  } else {
+    Message.error('项目信息不完整，无法进入团队成员管理')
+  }
+}
+
+const editMemberPosition = (member: any) => {
+  // 这里可以实现编辑成员岗位的逻辑
+  console.log('编辑成员岗位:', member)
+  Message.info('编辑成员岗位功能开发中...')
+}
+
+const editMemberRemark = (member: any) => {
+  editingMember.value = member
+  newRemark.value = member.remark || ''
+  remarkEditVisible.value = true
+}
+
+const saveRemarkEdit = () => {
+  if (editingMember.value && newRemark.value) {
+    editingMember.value.remark = newRemark.value
+    Message.success('备注更新成功')
+    remarkEditVisible.value = false
+    editingMember.value = null
+    newRemark.value = ''
+  }
+}
+
+const cancelRemarkEdit = () => {
+  remarkEditVisible.value = false
+  editingMember.value = null
+  newRemark.value = ''
+}
+
+const openProjectRequirement = () => {
+  requirementVisible.value = true
+}
+
+const saveProjectRequirement = () => {
+  if (newRequirement.description && newRequirement.priority) {
+    const requirement = {
+      id: Date.now(),
+      title: '项目需求',
+      description: newRequirement.description,
+      priority: newRequirement.priority,
+      status: 'pending'
+    }
+    if (currentProject.value) {
+      currentProject.value.requirements.push(requirement)
+    }
+    Message.success('项目需求发布成功')
+    requirementVisible.value = false
+    // 重置表单
+    Object.assign(newRequirement, {
+      description: '',
+      priority: 'medium'
+    })
+  } else {
+    Message.error('请填写完整信息')
+  }
+}
+
+const cancelProjectRequirement = () => {
+  requirementVisible.value = false
+  Object.assign(newRequirement, {
+    description: '',
+    priority: 'medium'
+  })
+}
+
+// 生命周期
+onMounted(async () => {
+  console.log('页面开始加载数据...')
+  await Promise.all([
+    loadStats(),
+    loadKanbanData()
+  ])
+  console.log('数据加载完成，当前状态:')
+  console.log('准备中项目数量:', preparingProjects.value.length)
+  console.log('进行中项目数量:', ongoingProjects.value.length)
+})
+</script>
+
+<style lang="scss" scoped>
+.personnel-dispatch-header {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  padding: 24px;
+  border-radius: 12px;
+  margin-bottom: 24px;
+  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.15);
+
+  .header-content {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .header-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    .title-icon {
+      font-size: 32px;
+      color: rgba(255, 255, 255, 0.9);
+    }
+
+    h1 {
+      margin: 0;
+      font-size: 28px;
+      font-weight: 600;
+      color: white;
+    }
+
+    .refresh-btn {
+      color: rgba(255, 255, 255, 0.8);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      background: rgba(255, 255, 255, 0.1);
+      
+      &:hover {
+        color: white;
+        background: rgba(255, 255, 255, 0.2);
+        border-color: rgba(255, 255, 255, 0.3);
+      }
+    }
+  }
+
+  .header-stats {
+    display: flex;
+    gap: 24px;
+
+    .stat-card {
+      text-align: center;
+      padding: 16px 24px;
+      background: rgba(255, 255, 255, 0.1);
+      border-radius: 8px;
+      backdrop-filter: blur(10px);
+      transition: all 0.3s ease;
+
+      &.loading {
+        opacity: 0.7;
+        background: rgba(255, 255, 255, 0.05);
+      }
+
+      .stat-number {
+        font-size: 32px;
+        font-weight: 700;
+        margin-bottom: 4px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        min-height: 32px;
+      }
+
+      .stat-label {
+        font-size: 14px;
+        opacity: 0.9;
+      }
+    }
+  }
+}
+
+.project-kanban {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 24px;
+  margin-bottom: 24px;
+
+  .kanban-column {
+    background: #f7f8fa;
+    border-radius: 12px;
+    padding: 20px;
+    min-height: 600px;
+
+    .column-header {
+      margin-bottom: 20px;
+      padding: 16px;
+      border-radius: 8px;
+      color: white;
+
+      &.preparing {
+        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
+      }
+
+      &.ongoing {
+        background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
+      }
+
+      &.pending {
+        background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
+      }
+
+      .column-title {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+
+        .status-icon {
+          font-size: 24px;
+        }
+
+        h2 {
+          margin: 0;
+          font-size: 18px;
+          font-weight: 600;
+        }
+
+        .project-count {
+          background: rgba(255, 255, 255, 0.2);
+          padding: 4px 8px;
+          border-radius: 12px;
+          font-size: 12px;
+          font-weight: 600;
+        }
+      }
+    }
+
+    .column-content {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+  }
+}
+
+.project-card {
+  background: white;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: all 0.3s ease;
+  border-left: 4px solid transparent;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
+  }
+
+  &.preparing {
+    border-left-color: #ff6b6b;
+  }
+
+  &.ongoing {
+    border-left-color: #51cf66;
+  }
+
+  &.pending {
+    border-left-color: #868e96;
+  }
+
+  .project-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 12px;
+
+    .project-name {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #1d2129;
+    }
+
+    .project-status {
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      font-weight: 500;
+
+      &.preparing {
+        background: #fff5f5;
+        color: #ff6b6b;
+      }
+
+      &.ongoing {
+        background: #f0fff4;
+        color: #51cf66;
+      }
+
+      &.pending {
+        background: #f8f9fa;
+        color: #868e96;
+      }
+    }
+  }
+
+  .project-info {
+    margin-bottom: 12px;
+
+    .info-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+      font-size: 14px;
+      color: #4e5969;
+
+      .info-icon {
+        font-size: 14px;
+        color: #86909c;
+      }
+    }
+  }
+
+  .project-footer {
+    .progress-info {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 6px;
+      font-size: 12px;
+      color: #86909c;
+
+      .progress-text {
+        font-weight: 600;
+        color: #1d2129;
+      }
+    }
+
+    .progress-bar {
+      height: 6px;
+      background: #f0f0f0;
+      border-radius: 3px;
+      overflow: hidden;
+
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        border-radius: 3px;
+        transition: width 0.3s ease;
+      }
+    }
+
+    .start-date {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: #86909c;
+
+      .info-icon {
+        font-size: 12px;
+      }
+    }
+  }
+
+  .project-alerts {
+    margin-top: 12px;
+
+    .alert-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 8px;
+      border-radius: 4px;
+      font-size: 12px;
+      margin-bottom: 4px;
+
+      &.cost {
+        background: #fff5f5;
+        color: #ff6b6b;
+      }
+
+      &.personnel {
+        background: #fff8e1;
+        color: #ffa000;
+      }
+    }
+  }
+}
+
+.project-detail {
+  .detail-section {
+    margin-bottom: 24px;
+
+    h3 {
+      margin: 0 0 16px 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #1d2129;
+      border-bottom: 2px solid #f0f0f0;
+      padding-bottom: 8px;
+    }
+
+    .section-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+
+      h3 {
+        margin: 0;
+        border-bottom: none;
+        padding-bottom: 0;
+      }
+    }
+  }
+
+  .info-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 16px;
+
+    .info-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+
+      label {
+        font-weight: 500;
+        color: #4e5969;
+        min-width: 80px;
+      }
+
+      .status-badge {
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+
+        &.preparing {
+          background: #fff5f5;
+          color: #ff6b6b;
+        }
+
+        &.ongoing {
+          background: #f0fff4;
+          color: #51cf66;
+        }
+
+        &.pending {
+          background: #f8f9fa;
+          color: #868e96;
+        }
+      }
+    }
+  }
+
+  .alerts-list {
+    .alert-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px;
+      border-radius: 6px;
+      margin-bottom: 8px;
+
+      &.cost {
+        background: #fff5f5;
+        color: #ff6b6b;
+        border: 1px solid #ffebee;
+      }
+
+      &.personnel {
+        background: #fff8e1;
+        color: #ffa000;
+        border: 1px solid #fff3cd;
+      }
+    }
+  }
+
+  .team-members {
+    .member-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      border: 1px solid #f0f0f0;
+      border-radius: 6px;
+      margin-bottom: 8px;
+      cursor: pointer;
+      transition: all 0.3s ease;
+
+      &:hover {
+        background: #f8f9fa;
+        border-color: #667eea;
+      }
+
+      .member-avatar {
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        background: #f0f0f0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #86909c;
+      }
+
+      .member-info {
+        flex: 1;
+
+        .member-name {
+          font-weight: 500;
+          color: #1d2129;
+          margin-bottom: 2px;
+        }
+
+        .member-position {
+          font-size: 12px;
+          color: #86909c;
+        }
+
+        .member-details {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 12px;
+          color: #86909c;
+
+          .member-status {
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-weight: 500;
+
+            &.available {
+              background: #e3f2fd;
+              color: #2196f3;
+            }
+
+            &.offline {
+              background: #f8f9fa;
+              color: #868e96;
+            }
+          }
+        }
+      }
+
+      .member-actions {
+        .arco-btn {
+          font-size: 12px;
+        }
+      }
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: 40px 0;
+      color: #86909c;
+
+      .empty-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+      }
+
+      .empty-text {
+        font-size: 18px;
+        font-weight: 500;
+        margin-bottom: 8px;
+      }
+
+      .empty-desc {
+        font-size: 14px;
+      }
+    }
+  }
+
+  .requirements-list {
+    .requirement-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px;
+      border: 1px solid #f0f0f0;
+      border-radius: 6px;
+      margin-bottom: 8px;
+
+      .requirement-info {
+        .requirement-title {
+          font-weight: 500;
+          color: #1d2129;
+          margin-bottom: 4px;
+        }
+
+        .requirement-details {
+          font-size: 12px;
+          color: #86909c;
+
+          span {
+            margin-right: 16px;
+          }
+        }
+      }
+
+      .requirement-status {
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+
+        &.pending {
+          background: #fff8e1;
+          color: #ffa000;
+        }
+
+        &.recruiting {
+          background: #e3f2fd;
+          color: #2196f3;
+        }
+
+        &.completed {
+          background: #f0fff4;
+          color: #51cf66;
+        }
+      }
+    }
+  }
+}
+
+.remark-edit {
+  .edit-item {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    margin-bottom: 16px;
+
+    label {
+      font-weight: 500;
+      color: #4e5969;
+      min-width: 80px;
+      margin-top: 4px;
+    }
+
+    .arco-textarea {
+      flex: 1;
+    }
+
+    .remark-example {
+      flex: 1;
+      padding: 8px 12px;
+      background: #f7f8fa;
+      border-radius: 4px;
+      color: #86909c;
+      font-size: 12px;
+      border: 1px solid #e5e6eb;
+    }
+  }
+}
+
+.requirement-form {
+  .form-item {
+    margin-bottom: 16px;
+
+    label {
+      display: block;
+      font-weight: 500;
+      color: #4e5969;
+      margin-bottom: 6px;
+    }
+
+    .arco-select,
+    .arco-input-number,
+    .arco-textarea {
+      width: 100%;
+    }
+  }
+}
+
+// 滚动修复
+.project-kanban {
+  overflow-y: auto;
+  max-height: calc(100vh - 300px);
+}
+
+.project-detail {
+  max-height: calc(100vh - 200px);
+  overflow-y: auto;
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .project-kanban {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+}
+
+@media (max-width: 768px) {
+  .personnel-dispatch-header {
+    .header-content {
+      flex-direction: column;
+      gap: 20px;
+      text-align: center;
+    }
+
+    .header-stats {
+      flex-wrap: wrap;
+      justify-content: center;
+    }
+  }
+
+  .info-grid {
+    grid-template-columns: 1fr;
+  }
+}
+</style> 
\ No newline at end of file

From ae29bb661f71598e2df04096665b5393304fa9b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=A9=AC=E8=AF=97=E6=95=8F?= <3130004661@qq.com>
Date: Fri, 8 Aug 2025 15:23:57 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E5=9B=A2=E9=98=9F?=
 =?UTF-8?q?=E6=88=90=E5=91=98=E7=AE=A1=E7=90=86bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/project-management/personnel-dispatch/index.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/project-management/personnel-dispatch/index.vue b/src/views/project-management/personnel-dispatch/index.vue
index 7903e24..57706a6 100644
--- a/src/views/project-management/personnel-dispatch/index.vue
+++ b/src/views/project-management/personnel-dispatch/index.vue
@@ -669,7 +669,7 @@ const closeProjectDetail = () => {
 const openPersonnelManagement = () => {
   if (currentProject.value && currentProject.value.id) {
     router.push({
-      path: '/project-management/projects/personnel-dispatch/construction-personnel',
+      path: '/project-management/personnel-dispatch/construction-personnel',
       query: { projectId: currentProject.value.id }
     })
   } else {

From f870f50be03e4a48d1d16652c13ada6abb31e2bd Mon Sep 17 00:00:00 2001
From: Maple <869445424@qq.com>
Date: Fri, 8 Aug 2025 15:51:17 +0800
Subject: [PATCH 5/5] =?UTF-8?q?fix:=E6=94=B6=E5=85=A5=E5=90=88=E5=90=8C?=
 =?UTF-8?q?=E7=9A=84=E7=BC=96=E8=BE=91=E5=8A=9F=E8=83=BD=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/http.ts                             |   4 -
 .../revenue-contract/ContractEdit.vue         | 122 +++++++++++++
 .../contract/revenue-contract/index.vue       | 172 +++++++++++++++---
 3 files changed, 265 insertions(+), 33 deletions(-)
 create mode 100644 src/views/project-management/contract/revenue-contract/ContractEdit.vue

diff --git a/src/utils/http.ts b/src/utils/http.ts
index 5894b18..70adfa3 100644
--- a/src/utils/http.ts
+++ b/src/utils/http.ts
@@ -225,7 +225,3 @@ export default {
   requestRaw,
   download,
 }
-
-export const updateContract = (contractId, contractData) => {
-  return http.put(`/contract/${contractId}`, contractData)
-}
diff --git a/src/views/project-management/contract/revenue-contract/ContractEdit.vue b/src/views/project-management/contract/revenue-contract/ContractEdit.vue
new file mode 100644
index 0000000..4ced636
--- /dev/null
+++ b/src/views/project-management/contract/revenue-contract/ContractEdit.vue
@@ -0,0 +1,122 @@
+<template>
+  <a-form :model="contractData" layout="vertical">
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="code" label="合同编号">
+          <a-input v-model="contractData.code" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="projectName" label="项目名称">
+          <a-input v-model="contractData.projectName" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="customer" label="客户名称">
+          <a-input v-model="contractData.customer" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="amount" label="合同金额">
+          <a-input-number v-model="contractData.amount" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="accountNumber" label="收款账号">
+          <a-input v-model="contractData.accountNumber" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="contractStatus" label="合同状态">
+          <a-select v-model="contractData.contractStatus">
+            <a-option value="未确认">未确认</a-option>
+            <a-option value="待审批">待审批</a-option>
+            <a-option value="已签署">已签署</a-option>
+            <a-option value="执行中">执行中</a-option>
+            <a-option value="已完成">已完成</a-option>
+            <a-option value="已终止">已终止</a-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="signDate" label="签订日期">
+          <a-date-picker v-model="contractData.signDate" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="performanceDeadline" label="履约期限">
+          <a-date-picker v-model="contractData.performanceDeadline" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="paymentDate" label="付款日期">
+          <a-date-picker v-model="contractData.paymentDate" style="width: 100%" />
+        </a-form-item>
+      </a-col>
+      <a-col :span="12">
+        <a-form-item field="productService" label="产品或服务">
+          <a-input v-model="contractData.productService" />
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+    <a-form-item field="paymentAddress" label="付款地址">
+      <a-input v-model="contractData.paymentAddress" />
+    </a-form-item>
+
+    <a-form-item field="notes" label="备注">
+      <a-textarea v-model="contractData.notes" />
+    </a-form-item>
+
+    <a-form-item field="contractText" label="合同内容">
+      <a-textarea v-model="contractData.contractText" />
+    </a-form-item>
+  </a-form>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import type { ContractItem } from './index.vue'
+
+const props = defineProps<{
+  contractData: ContractItem
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:contractData', data: ContractItem): void
+}>()
+
+const contractData = ref({ ...props.contractData })
+
+// 监听props变化更新内部数据
+watch(
+  () => props.contractData,
+  (newVal) => {
+    if (newVal) {
+      contractData.value = { ...newVal }
+    }
+  },
+  { immediate: true },
+)
+
+// 监听内部数据变化并触发更新事件
+watch(
+  contractData,
+  (newVal) => {
+    emit('update:contractData', newVal)
+  },
+  { deep: true },
+)
+</script>
diff --git a/src/views/project-management/contract/revenue-contract/index.vue b/src/views/project-management/contract/revenue-contract/index.vue
index 0e79d54..28d7b37 100644
--- a/src/views/project-management/contract/revenue-contract/index.vue
+++ b/src/views/project-management/contract/revenue-contract/index.vue
@@ -1,25 +1,25 @@
 <template>
   <GiPageLayout>
     <GiTable
-        row-key="id"
-        title="收入合同管理"
-        :data="dataList"
-        :columns="tableColumns"
-        :loading="loading"
-        :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
-        :pagination="pagination"
-        @page-change="onPageChange"
-        @page-size-change="onPageSizeChange"
-        @refresh="search"
+      row-key="id"
+      title="收入合同管理"
+      :data="dataList"
+      :columns="tableColumns"
+      :loading="loading"
+      :scroll="{ x: '100%', y: '100%', minWidth: 1600 }"
+      :pagination="pagination"
+      @page-change="onPageChange"
+      @page-size-change="onPageSizeChange"
+      @refresh="search"
     >
       <template #top>
         <GiForm
-            v-model="searchForm"
-            search
-            :columns="queryFormColumns"
-            size="medium"
-            @search="search"
-            @reset="reset"
+          v-model="searchForm"
+          search
+          :columns="queryFormColumns"
+          size="medium"
+          @search="search"
+          @reset="reset"
         />
       </template>
 
@@ -53,36 +53,53 @@
         <span class="font-medium text-blue-600">￥{{ (record.receivedAmount || 0).toLocaleString() }}</span>
       </template>
 
-      <!-- 操作列 -->
       <template #action="{ record }">
         <a-space>
           <a-link @click="viewDetail(record)">详情</a-link>
           <a-link v-if="record.contractStatus === '未确认'" @click="editRecord(record)">编辑</a-link>
           <a-link v-if="record.contractStatus === '待审批'" @click="approveContract(record)">审批</a-link>
           <a-link @click="viewPayment(record)">收款记录</a-link>
+          <a-link v-if="record.contractStatus !== '已签署' && record.contractStatus !== '已完成'" @click="deleteContract(record)">删除</a-link>
         </a-space>
       </template>
     </GiTable>
 
     <!-- 合同详情弹窗 -->
     <a-modal
-        v-model:visible="showDetailModal"
-        title="合同详情"
-        :width="800"
-        @cancel="closeDetailModal"
-        :footer="false"
+      v-model:visible="showDetailModal"
+      title="合同详情"
+      :width="800"
+      :footer="false"
+      @cancel="closeDetailModal"
     >
       <ContractDetail v-if="showDetailModal" :contract-id="selectedContractId" />
     </a-modal>
+
+    <!-- 合同编辑弹窗 -->
+    <a-modal
+      v-model:visible="showEditModal"
+      title="编辑合同"
+      :width="800"
+      @cancel="closeEditModal"
+      @before-ok="handleEditSubmit"
+    >
+      <ContractEdit
+        v-if="showEditModal"
+        :contract-data="selectedContractData"
+        @update:contract-data="handleContractDataUpdate"
+      />
+    </a-modal>
   </GiPageLayout>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { Message, Modal } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
-import http from '@/utils/http'
+import ContractEdit from './ContractEdit.vue'
+
 import ContractDetail from './ContractDetail.vue'
+import http from '@/utils/http'
 
 // 接口数据类型定义
 interface ContractItem {
@@ -181,7 +198,6 @@ const tableColumns: TableColumnData[] = [
   { title: '备注', dataIndex: 'notes', width: 200, ellipsis: true, tooltip: true },
   { title: '操作', slotName: 'action', width: 200, fixed: 'right' },
 ]
-
 // 数据状态
 const loading = ref(false)
 const dataList = ref<ContractItem[]>([])
@@ -297,6 +313,108 @@ const exportContract = () => {
   Message.info('导出合同功能开发中...')
 }
 
+// 显示合同编辑弹窗
+const showEditModal = ref(false)
+const selectedContractData = ref<ContractItem | null>(null)
+const editedContractData = ref<ContractItem | null>(null)
+
+const editRecord = (record: ContractItem) => {
+  // 确保所有必要的字段都存在
+  const completeRecord = {
+    ...record,
+    amount: record.amount || 0,
+    projectId: record.projectId || '',
+    type: record.type || '收入合同',
+    contractStatus: record.contractStatus || '未确认',
+  }
+
+  selectedContractData.value = completeRecord
+  showEditModal.value = true
+}
+
+const closeEditModal = () => {
+  showEditModal.value = false
+  selectedContractData.value = null
+  editedContractData.value = null
+}
+
+const handleContractDataUpdate = (data: ContractItem) => {
+  editedContractData.value = data
+}
+
+const handleEditSubmit = async () => {
+  if (!editedContractData.value) return false;
+
+  try {
+    const requestData = {
+      ...editedContractData.value,
+      accountNumber: editedContractData.value.accountNumber || '',
+      amount: editedContractData.value.amount || 0,
+      code: editedContractData.value.code || '',
+      contractId: editedContractData.value.contractId,
+      contractStatus: editedContractData.value.contractStatus || '',
+      contractText: editedContractData.value.contractText || '',
+      customer: editedContractData.value.customer || '',
+      departmentId: editedContractData.value.departmentId || '',
+      duration: editedContractData.value.duration || '',
+      notes: editedContractData.value.notes || '',
+      paymentAddress: editedContractData.value.paymentAddress || '',
+      paymentDate: editedContractData.value.paymentDate || null,
+      performanceDeadline: editedContractData.value.performanceDeadline || null,
+      productService: editedContractData.value.productService || '',
+      projectId: editedContractData.value.projectId || '',
+      salespersonId: editedContractData.value.salespersonId || '',
+      signDate: editedContractData.value.signDate || null,
+      type: editedContractData.value.type || '',
+    };
+
+    console.log('Edited Contract Data:', requestData); // 打印请求数据以便调试
+
+    // 修改此处，直接向 /contract 发送 PUT 请求
+    const response = await http.put('/contract', requestData);
+
+    // 检查响应状态
+    if (response.status === 200 && response.code === 200) {
+      Message.success('合同编辑成功');
+      closeEditModal();
+      search(); // 刷新列表
+      return true;
+    } else {
+      Message.error(response.msg || '合同编辑失败');
+      return false;
+    }
+  } catch (error) {
+    console.error('合同编辑失败:', error);
+    Message.error('合同编辑失败: ' + (error.message || '请稍后再试'));
+    return false;
+  }
+}
+
+
+// 删除合同
+const deleteContract = async (record: ContractItem) => {
+  try {
+    await Modal.confirm({
+      title: '确认删除',
+      content: `确定要删除合同 "${record.projectName}" 吗？`,
+    })
+
+    const response = await http.delete(`/contract/${record.contractId}`)
+    if (response.code === 200) {
+      Message.success('合同删除成功')
+      search() // 刷新列表
+    } else {
+      Message.error(response.msg || '合同删除失败')
+    }
+  } catch (error) {
+    // 用户取消删除或请求失败
+    if (error !== 'cancel') {
+      console.error('合同删除失败:', error)
+      Message.error('合同删除失败')
+    }
+  }
+}
+
 // 显示合同详情弹窗
 const showDetailModal = ref(false)
 const selectedContractId = ref<string | null>(null)
@@ -311,10 +429,6 @@ const closeDetailModal = () => {
   selectedContractId.value = null
 }
 
-const editRecord = (record: ContractItem) => {
-  Message.info(`编辑合同: ${record.projectName}`)
-}
-
 const approveContract = (record: ContractItem) => {
   Message.info(`审批合同: ${record.projectName}`)
 }