diff --git a/src/apis/project/personnel-organization.ts b/src/apis/project/personnel-organization.ts
new file mode 100644
index 0000000..0d07776
--- /dev/null
+++ b/src/apis/project/personnel-organization.ts
@@ -0,0 +1,54 @@
+import type * as T from './type'
+import http from '@/utils/http'
+
+const BASE_URL = '/project/personnel-organization'
+
+/** @desc 获取项目列表 */
+export function getProjectList(query?: T.ProjectQuery) {
+  return http.get<PageRes<T.ProjectResp[]>>('/project/list', query)
+}
+
+/** @desc 获取项目人员组织信息 */
+export function getPersonnelOrganization(projectId: string | number) {
+  return http.get<T.PersonnelOrganizationResp>(`${BASE_URL}/${projectId}`)
+}
+
+/** @desc 获取工种列表 */
+export function getWorkTypeList() {
+  return http.get<T.WorkTypeResp[]>('/work-type/list')
+}
+
+/** @desc 获取施工人员列表 */
+export function getConstructorList(query: T.ConstructorQuery) {
+  return http.get<PageRes<T.ConstructorResp[]>>('/constructor/list', query)
+}
+
+/** @desc 获取施工人员技能证书 */
+export function getConstructorCertifications(constructorId: string | number) {
+  return http.get<T.CertificationResp[]>(`/constructor/${constructorId}/certifications`)
+}
+
+/** @desc 分配施工人员到项目 */
+export function assignConstructorToProject(data: T.AssignConstructorReq) {
+  return http.post(`${BASE_URL}/assign`, data)
+}
+
+/** @desc 移除项目施工人员 */
+export function removeConstructorFromProject(data: T.RemoveConstructorReq) {
+  return http.delete(`${BASE_URL}/remove`, data)
+}
+
+/** @desc 更新施工人员分配信息 */
+export function updateConstructorAssignment(data: T.UpdateAssignmentReq) {
+  return http.put(`${BASE_URL}/update`, data)
+}
+
+/** @desc 获取项目人员统计 */
+export function getPersonnelStats(projectId: string | number) {
+  return http.get<T.PersonnelStatsResp>(`${BASE_URL}/${projectId}/stats`)
+}
+
+/** @desc 导出项目人员组织 */
+export function exportPersonnelOrganization(projectId: string | number) {
+  return http.download(`${BASE_URL}/${projectId}/export`)
+}
diff --git a/src/apis/project/type.ts b/src/apis/project/type.ts
index 5d5f527..7840bcc 100644
--- a/src/apis/project/type.ts
+++ b/src/apis/project/type.ts
@@ -117,6 +117,86 @@ export interface ProjectKanbanStats {
   teamLeaderCount: string
 }
 
+// ==================== 工作组相关类型 ====================
+
+/** 工作组类型 */
+export interface WorkGroup {
+  id: string
+  name: string
+  description: string
+  projectId: string
+  status: 'ACTIVE' | 'INACTIVE' | 'COMPLETED'
+  workTypeGroups: WorkTypeGroup[]
+  memberCount: number
+  requiredCount: number
+  members?: WorkGroupMember[]
+  createTime: string
+  updateTime?: string
+}
+
+/** 工种分组类型 */
+export interface WorkTypeGroup {
+  id?: string
+  name: string
+  requiredCount: number
+  priority: 'HIGH' | 'MEDIUM' | 'LOW'
+  assignedCount?: number
+}
+
+/** 工作组成员类型 */
+export interface WorkGroupMember {
+  id: string
+  name: string
+  role: string
+  avatar?: string
+  phone?: string
+  email?: string
+  workTypes?: string[]
+  joinTime?: string
+}
+
+/** 工作组查询参数 */
+export interface WorkGroupQuery {
+  projectId?: string
+  name?: string
+  status?: string
+  workType?: string
+}
+
+/** 工作组分页查询参数 */
+export interface WorkGroupPageQuery extends WorkGroupQuery, PageQuery {}
+
+/** 创建工作组请求参数 */
+export interface CreateWorkGroupReq {
+  name: string
+  description?: string
+  projectId: string
+  workTypeGroups: WorkTypeGroup[]
+}
+
+/** 更新工作组请求参数 */
+export interface UpdateWorkGroupReq {
+  id: string
+  name?: string
+  description?: string
+  status?: string
+  workTypeGroups?: WorkTypeGroup[]
+}
+
+/** 分配工人到工作组请求参数 */
+export interface AssignWorkerReq {
+  workGroupId: string
+  workerIds: string[]
+  workTypeName: string
+}
+
+/** 从工作组移除工人请求参数 */
+export interface RemoveWorkerReq {
+  workGroupId: string
+  workerId: string
+  workTypeName: string
+}
+
 /** 项目看板数据 */
 export interface ProjectKanbanData {
   inProgressProjects: ProjectCard[]
@@ -327,7 +407,137 @@ export interface UpdateRequirementStatusForm {
   status: 'pending' | 'recruiting' | 'completed'
 }
 
+// ==================== 人员组织相关类型 ====================
 
+/** 工种响应 */
+export interface WorkTypeResp {
+  id: string | number
+  name: string
+  code: string
+  description?: string
+  requiredCertifications?: string[]
+  sort?: number
+}
+
+/** 施工人员响应 */
+export interface ConstructorResp {
+  id: string | number
+  name: string
+  phone: string
+  email?: string
+  avatar?: string
+  workTypes: string[] // 工种列表
+  certifications: CertificationResp[]
+  experience: number // 工作经验（年）
+  status: 'ACTIVE' | 'INACTIVE' | 'BUSY'
+  rating: number // 评分
+  joinDate: string
+  remark?: string
+}
+
+/** 证书响应 */
+export interface CertificationResp {
+  id: string | number
+  name: string
+  type: string
+  code: string
+  issueDate: string
+  expiryDate: string
+  issuingAuthority: string
+  status: 'VALID' | 'EXPIRED' | 'EXPIRING_SOON'
+  imageUrl?: string
+}
+
+/** 施工人员查询参数 */
+export interface ConstructorQuery extends PageQuery {
+  name?: string
+  workType?: string
+  status?: string
+  hasCertification?: boolean
+  experienceMin?: number
+  experienceMax?: number
+}
+
+/** 人员组织响应 */
+export interface PersonnelOrganizationResp {
+  projectId: string | number
+  projectName: string
+  workTypeAssignments: WorkTypeAssignmentResp[]
+  totalPersonnel: number
+  assignedPersonnel: number
+  availablePersonnel: number
+}
+
+/** 工种分配响应 */
+export interface WorkTypeAssignmentResp {
+  workTypeId: string | number
+  workTypeName: string
+  workTypeCode: string
+  requiredCount: number
+  assignedCount: number
+  constructors: ConstructorAssignmentResp[]
+}
+
+/** 施工人员分配响应 */
+export interface ConstructorAssignmentResp {
+  constructorId: string | number
+  constructorName: string
+  phone: string
+  avatar?: string
+  workTypes: string[]
+  certifications: CertificationResp[]
+  experience: number
+  rating: number
+  assignmentDate: string
+  status: 'ASSIGNED' | 'WORKING' | 'COMPLETED'
+  remark?: string
+}
+
+/** 分配施工人员请求 */
+export interface AssignConstructorReq {
+  projectId: string | number
+  workTypeId: string | number
+  constructorIds: (string | number)[]
+  assignmentDate?: string
+  remark?: string
+}
+
+/** 移除施工人员请求 */
+export interface RemoveConstructorReq {
+  projectId: string | number
+  constructorIds: (string | number)[]
+  reason?: string
+}
+
+/** 更新分配信息请求 */
+export interface UpdateAssignmentReq {
+  projectId: string | number
+  constructorId: string | number
+  workTypeId?: string | number
+  status?: string
+  remark?: string
+}
+
+/** 人员统计响应 */
+export interface PersonnelStatsResp {
+  totalPersonnel: number
+  assignedPersonnel: number
+  availablePersonnel: number
+  workTypeStats: {
+    workTypeName: string
+    requiredCount: number
+    assignedCount: number
+    shortageCount: number
+  }[]
+  certificationStats: {
+    certificationType: string
+    count: number
+  }[]
+  experienceStats: {
+    range: string
+    count: number
+  }[]
+}
 
 /** 分页查询基础参数 */
 export interface PageQuery {
@@ -341,4 +551,89 @@ export interface PageRes<T> {
   total: number
   page: number
   pageSize: number
+}
+
+// ==================== 工作组相关类型 ====================
+
+/** 工作组类型 */
+export interface WorkGroup {
+  id: string
+  name: string
+  description: string
+  projectId: string
+  status: 'ACTIVE' | 'INACTIVE' | 'COMPLETED'
+  workTypeGroups: WorkTypeGroup[]
+  memberCount: number
+  requiredCount: number
+  members?: WorkGroupMember[]
+  createTime: string
+  updateTime?: string
+}
+
+/** 工种分组类型 */
+export interface WorkTypeGroup {
+  id?: string
+  name: string
+  requiredCount: number
+  priority: 'HIGH' | 'MEDIUM' | 'LOW'
+  assignedCount?: number
+}
+
+/** 工作组成员类型 */
+export interface WorkGroupMember {
+  id: string
+  name: string
+  role: string
+  avatar?: string
+  phone?: string
+  email?: string
+  workTypes?: string[]
+  joinTime?: string
+}
+
+/** 工作组查询参数 */
+export interface WorkGroupQuery {
+  projectId?: string
+  name?: string
+  status?: string
+  workType?: string
+}
+
+/** 工作组分页查询参数 */
+export interface WorkGroupPageQuery extends WorkGroupQuery, PageQuery {}
+
+/** 创建工作组请求参数 */
+export interface CreateWorkGroupReq {
+  name: string
+  description?: string
+  projectId: string
+  workTypeGroups: WorkTypeGroup[]
+}
+
+/** 更新工作组请求参数 */
+export interface UpdateWorkGroupReq {
+  id: string
+  name?: string
+  description?: string
+  status?: string
+  workTypeGroups?: WorkTypeGroup[]
+}
+
+/** 分配工人到工作组请求参数 */
+export interface AssignWorkerReq {
+  workGroupId: string
+  workerIds: string[]
+  workTypeName: string
+}
+
+/** 从工作组移除工人请求参数 */
+export interface RemoveWorkerReq {
+  workGroupId: string
+  workerId: string
+  workTypeName: string
+}
+
+// 扩展项目类型，包含工作组信息
+export interface ProjectWithWorkGroups extends ProjectResp {
+  workGroups?: WorkGroup[]
 }
\ No newline at end of file
diff --git a/src/apis/project/workGroup.ts b/src/apis/project/workGroup.ts
new file mode 100644
index 0000000..3a6985f
--- /dev/null
+++ b/src/apis/project/workGroup.ts
@@ -0,0 +1,81 @@
+import request from '@/utils/http'
+import type { 
+  WorkGroup, 
+  WorkTypeGroup, 
+  WorkGroupPageQuery, 
+  CreateWorkGroupReq, 
+  UpdateWorkGroupReq,
+  AssignWorkerReq,
+  RemoveWorkerReq,
+  PageRes
+} from './type'
+
+/**
+ * 获取工作组列表
+ */
+export function getWorkGroupList(params: WorkGroupPageQuery) {
+  return request.get<PageRes<WorkGroup>>('/api/work-groups', params)
+}
+
+/**
+ * 根据项目ID获取工作组列表
+ */
+export function getWorkGroupsByProject(projectId: string) {
+  return request.get<WorkGroup[]>(`/api/projects/${projectId}/work-groups`)
+}
+
+/**
+ * 获取工作组详情
+ */
+export function getWorkGroupDetail(id: string) {
+  return request.get<WorkGroup>(`/api/work-groups/${id}`)
+}
+
+/**
+ * 创建工作组
+ */
+export function createWorkGroup(data: CreateWorkGroupReq) {
+  return request.post<WorkGroup>('/api/work-groups', data)
+}
+
+/**
+ * 更新工作组
+ */
+export function updateWorkGroup(id: string, data: UpdateWorkGroupReq) {
+  return request.put<WorkGroup>(`/api/work-groups/${id}`, data)
+}
+
+/**
+ * 删除工作组
+ */
+export function deleteWorkGroup(id: string) {
+  return request.del(`/api/work-groups/${id}`)
+}
+
+/**
+ * 分配工人到工作组
+ */
+export function assignWorkerToGroup(data: AssignWorkerReq) {
+  return request.post('/api/work-groups/assign-worker', data)
+}
+
+/**
+ * 从工作组移除工人
+ */
+export function removeWorkerFromGroup(data: RemoveWorkerReq) {
+  return request.post('/api/work-groups/remove-worker', data)
+}
+
+/**
+ * 更新工作组状态
+ */
+export function updateWorkGroupStatus(id: string, status: string) {
+  return request.patch<WorkGroup>(`/api/work-groups/${id}/status`, { status })
+}
+
+/**
+ * 获取工作组统计信息
+ */
+export function getWorkGroupStats(projectId?: string) {
+  return request.get('/api/work-groups/stats', { projectId })
+}
diff --git a/src/apis/system/user.ts b/src/apis/system/user.ts
index 59257e1..479f7f4 100644
--- a/src/apis/system/user.ts
+++ b/src/apis/system/user.ts
@@ -63,3 +63,8 @@ export function resetUserPwd(data: any, id: string) {
 export function updateUserRole(data: { roleIds: string[] }, id: string) {
   return http.patch(`${BASE_URL}/${id}/role`, data)
 }
+
+/** @desc 按姓名模糊搜索用户 */
+export function searchUserByName(name: string) {
+  return http.get<T.UserNewResp[]>(`${BASE_URL}/searchByName`, { name })
+}
diff --git a/src/router/route.ts b/src/router/route.ts
index 2ced11f..df04f61 100644
--- a/src/router/route.ts
+++ b/src/router/route.ts
@@ -816,7 +816,17 @@ export const systemRoutes: RouteRecordRaw[] = [
               hidden: false,
             },
           },
-
+          {
+            path: '/project-management/projects/personnel-organization',
+            name: 'PersonnelOrganization',
+            component: () => import('@/views/project-management/projects/personnel-organization/index.vue'),
+            meta: {
+              title: '人员组织',
+              icon: 'user-group',
+              hidden: false,
+            },
+          },
+          
           {
             path: '/project-management/projects/device',
             name: 'DeviceManagement',
diff --git a/src/views/project-management/personnel-dispatch/construction-personnel.vue b/src/views/project-management/personnel-dispatch/construction-personnel.vue
index c25741e..ef46a07 100644
--- a/src/views/project-management/personnel-dispatch/construction-personnel.vue
+++ b/src/views/project-management/personnel-dispatch/construction-personnel.vue
@@ -180,7 +180,17 @@
         <div class="form-row">
           <div class="form-item">
             <label>姓名 <span class="required">*</span></label>
-            <a-input v-model="memberForm.name" placeholder="请输入姓名" />
+            <a-auto-complete
+              v-model="memberForm.name"
+              placeholder="请输入姓名进行搜索"
+              :data="userSearchOptions"
+              :loading="userSearchLoading"
+              @search="handleUserSearch"
+              @select="handleUserSelect"
+              allow-clear
+              :filter-option="false"
+              :trigger-on-focus="false"
+            />
           </div>
           <div class="form-item">
             <label>联系电话 <span class="required">*</span></label>
@@ -304,7 +314,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted } 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'
@@ -317,6 +327,8 @@ import {
   exportTeamMembers,
   downloadImportTemplate
 } from '@/apis/project/personnel-dispatch'
+import { searchUserByName } from '@/apis/system/user'
+import type { UserNewResp } from '@/apis/system/type'
 
 // 获取路由参数
 const route = useRoute()
@@ -411,6 +423,12 @@ const statusForm = reactive<{
 
 const fileList = ref<any[]>([])
 
+// 用户搜索相关数据
+const userSearchResults = ref<UserNewResp[]>([])
+const userSearchOptions = ref<Array<{ label: string; value: string; user: UserNewResp }>>([])
+const userSearchLoading = ref(false)
+const searchTimeout = ref<NodeJS.Timeout | null>(null)
+
 // 方法
 const loadData = async () => {
   if (!projectId) {
@@ -505,6 +523,70 @@ const openAddModal = () => {
   memberModalVisible.value = true
 }
 
+// 用户搜索处理函数（带防抖）
+const handleUserSearch = async (value: string) => {
+  console.log('开始搜索用户，输入值:', value)
+  
+  // 清除之前的定时器
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value)
+  }
+  
+  // 如果输入为空，清空结果
+  if (!value || value.trim().length < 1) {
+    userSearchResults.value = []
+    console.log('输入为空，清空搜索结果')
+    return
+  }
+  
+  // 设置防抖延迟（300ms）
+  searchTimeout.value = setTimeout(async () => {
+    console.log('执行搜索，搜索值:', value.trim())
+    userSearchLoading.value = true
+    try {
+      const response = await searchUserByName(value.trim())
+      console.log('API响应完整数据:', response)
+      // 根据后端返回的数据结构，使用 response.rows 而不是 response.data
+      const users = response.rows || []
+      userSearchResults.value = users
+      
+      // 转换为 a-auto-complete 需要的格式
+      userSearchOptions.value = users.map(user => ({
+        label: `${user.name} | ${user.deptName || '未分配部门'}`,
+        value: user.name,
+        user: user
+      }))
+      
+      console.log('设置搜索结果:', userSearchResults.value)
+      console.log('设置搜索选项:', userSearchOptions.value)
+    } catch (error) {
+      console.error('搜索用户失败:', error)
+      userSearchResults.value = []
+      userSearchOptions.value = []
+      Message.error('搜索用户失败')
+    } finally {
+      userSearchLoading.value = false
+    }
+  }, 300)
+}
+
+// 用户选择处理函数
+const handleUserSelect = (value: string, option: any) => {
+  const selectedOption = userSearchOptions.value.find(option => option.value === value)
+  if (selectedOption) {
+    const selectedUser = selectedOption.user
+    // 自动填充用户信息
+    memberForm.name = selectedUser.name
+    memberForm.phone = selectedUser.mobile || ''
+    // 后端返回的数据中没有email字段，所以不自动填充邮箱
+    // memberForm.email = selectedUser.email || ''
+    // 清空搜索结果
+    userSearchResults.value = []
+    userSearchOptions.value = []
+    console.log('选择的用户:', selectedUser)
+  }
+}
+
 const openEditModal = (record: TeamMemberResp) => {
   isEdit.value = true
   Object.assign(memberForm, {
@@ -568,6 +650,9 @@ const saveMember = async () => {
 const cancelMember = () => {
   memberModalVisible.value = false
   resetMemberForm()
+  // 清空用户搜索结果
+  userSearchResults.value = []
+  userSearchOptions.value = []
 }
 
 const resetMemberForm = () => {
@@ -582,6 +667,9 @@ const resetMemberForm = () => {
     joinDate: '',
     remark: ''
   })
+  // 清空用户搜索结果
+  userSearchResults.value = []
+  userSearchOptions.value = []
 }
 
 const openStatusModal = (record: TeamMemberResp) => {
@@ -715,11 +803,11 @@ const getRoleTypeText = (roleType: string) => {
 
 const getStatusColor = (status: string) => {
   const colorMap: Record<string, string> = {
-    ACTIVE: 'success',
-    SUSPENDEN: 'warning',
-    INACTIVE: 'danger'
+    ACTIVE: '#52c41a',      // 绿色 - 可用
+    SUSPENDEN: '#faad14',   // 橙色 - 忙碌
+    INACTIVE: '#ff4d4f'     // 红色 - 离线
   }
-  return colorMap[status] || 'danger'
+  return colorMap[status] || '#ff4d4f'
 }
 
 const getStatusText = (status: string) => {
@@ -741,6 +829,13 @@ onMounted(() => {
     Message.warning('未获取到项目信息，请从项目详情页面进入')
   }
 })
+
+onUnmounted(() => {
+  // 清理搜索定时器
+  if (searchTimeout.value) {
+    clearTimeout(searchTimeout.value)
+  }
+})
 </script>
 
 <style lang="scss" scoped>
@@ -1307,4 +1402,24 @@ onMounted(() => {
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
   }
 }
+
+// 用户搜索选项样式
+.user-option {
+  .user-name {
+    font-weight: 500;
+    color: var(--color-text-1);
+  }
+}
+
+// 自动完成组件样式优化
+:deep(.arco-auto-complete) {
+  .arco-input {
+    transition: all 0.3s ease;
+    
+    &:focus {
+      border-color: var(--color-primary-6);
+      box-shadow: 0 0 0 2px rgba(var(--color-primary-6), 0.1);
+    }
+  }
+}
 </style> 
\ No newline at end of file
diff --git a/src/views/project-management/personnel-dispatch/index.vue b/src/views/project-management/personnel-dispatch/index.vue
index 2451c01..a0bcbd8 100644
--- a/src/views/project-management/personnel-dispatch/index.vue
+++ b/src/views/project-management/personnel-dispatch/index.vue
@@ -79,7 +79,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -215,7 +215,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -351,7 +351,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -487,7 +487,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -623,7 +623,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -759,7 +759,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -895,7 +895,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1031,7 +1031,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1180,10 +1180,10 @@
                     <icon-user class="detail-icon" />
                     <span>负责人: {{ project.manager || '未指定' }}</span>
                   </div>
-                  <div class="detail-item">
-                    <icon-user-group class="detail-icon" />
-                    <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
-                  </div>
+                  <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
+                  <icon-user-group class="detail-icon" />
+                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
+                </div>
                   <div class="progress-section">
                     <div class="progress-info">
                       <span>项目进度</span>
@@ -1327,7 +1327,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1474,7 +1474,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1621,7 +1621,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -1915,7 +1915,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -2062,7 +2062,7 @@
                   <icon-user class="detail-icon" />
                   <span>负责人: {{ project.manager || '未指定' }}</span>
                 </div>
-                <div class="detail-item">
+                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                   <icon-user-group class="detail-icon" />
                   <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                 </div>
@@ -3041,11 +3041,11 @@ const openSiteManagement = (project: any) => {
 }
 
 // 人员管理
-const openPersonnelManagement = () => {
-  if (currentProject.value && currentProject.value.id) {
+const openPersonnelManagement = (project: any) => {
+  if (project && project.id) {
     router.push({
       path: '/project-management/personnel-dispatch/construction-personnel',
-      query: { projectId: currentProject.value.id }
+      query: { projectId: project.id }
     })
   } else {
     Message.error('项目信息不完整，无法进入团队成员管理')
diff --git a/src/views/project-management/projects/personnel-organization/index.vue b/src/views/project-management/projects/personnel-organization/index.vue
new file mode 100644
index 0000000..6a42055
--- /dev/null
+++ b/src/views/project-management/projects/personnel-organization/index.vue
@@ -0,0 +1,1871 @@
+<template>
+  <GiPageLayout>
+    <div class="personnel-organization-container">
+      <!-- 流程导航 -->
+      <div class="process-flow">
+        <div class="flow-step" :class="{ active: currentStep >= 1 }">
+          <div class="step-icon">
+            <icon-apps />
+          </div>
+          <div class="step-text">项目选择</div>
+        </div>
+        <div class="flow-arrow">→</div>
+        <div class="flow-step" :class="{ active: currentStep >= 2 }">
+          <div class="step-icon">
+            <icon-user-group />
+          </div>
+          <div class="step-text">工作组创建</div>
+        </div>
+        <div class="flow-arrow">→</div>
+        <div class="flow-step" :class="{ active: currentStep >= 3 }">
+          <div class="step-icon">
+            <icon-user-add />
+          </div>
+          <div class="step-text">工人分配</div>
+        </div>
+      </div>
+
+      <!-- 步骤1: 项目选择器 -->
+      <div v-if="currentStep === 1" class="step-content">
+        <a-card class="project-selection-card" :bordered="false">
+          <template #title>
+            <div class="card-title">
+              <icon-folder />
+              <span>选择项目</span>
+            </div>
+          </template>
+          
+          <div class="project-grid">
+            <div 
+              v-for="project in projectList" 
+              :key="project.projectId" 
+              class="project-card"
+              :class="{ selected: selectedProject?.projectId === project.projectId }"
+              @click="selectProject(project)"
+            >
+              <div class="project-header">
+                <div class="project-icon">
+                  <icon-apps />
+                </div>
+                <div class="project-status">
+                  <a-tag :color="getStatusColor(project.status)" size="small">
+                    {{ project.statusLabel }}
+                  </a-tag>
+                </div>
+              </div>
+              
+              <div class="project-info">
+                <h3 class="project-name">{{ project.projectName }}</h3>
+                <p class="project-code">{{ project.projectCode }}</p>
+                <p class="project-farm">{{ project.farmName }}</p>
+              </div>
+              
+              <!-- 显示项目下的工作组信息 -->
+              <div class="project-work-groups" v-if="project.workGroups && project.workGroups.length > 0">
+                <div class="work-groups-header">
+                  <icon-user-group />
+                  <span>工作组 ({{ project.workGroups.length }})</span>
+                </div>
+                <div class="work-groups-list">
+                  <div 
+                    v-for="workGroup in project.workGroups.slice(0, 3)" 
+                    :key="workGroup.id"
+                    class="work-group-preview"
+                  >
+                    <span class="work-group-name">{{ workGroup.name }}</span>
+                    <span class="work-group-count">{{ workGroup.memberCount }}/{{ workGroup.requiredCount }}</span>
+                  </div>
+                  <div v-if="project.workGroups.length > 3" class="more-work-groups">
+                    +{{ project.workGroups.length - 3 }} 个工作组
+                  </div>
+                </div>
+              </div>
+              
+              <div class="project-actions">
+                <a-button type="primary" @click.stop="enterWorkGroupCreation(project)">
+                  <template #icon><icon-arrow-right /></template>
+                  进入工作组创建
+                </a-button>
+                <a-button 
+                  v-if="project.workGroups && project.workGroups.length > 0"
+                  @click.stop="viewProjectWorkGroups(project)"
+                  style="margin-top: 8px;"
+                >
+                  <template #icon><icon-eye /></template>
+                  查看工作组详情
+                </a-button>
+              </div>
+            </div>
+          </div>
+        </a-card>
+      </div>
+
+      <!-- 步骤2: 工作组创建表单 -->
+      <div v-if="currentStep === 2" class="step-content">
+        <a-card class="work-group-form-card" :bordered="false">
+          <template #title>
+            <div class="card-title">
+              <icon-user-group />
+              <span>创建工作组</span>
+              <span class="project-info-text">- {{ selectedProject?.projectName }}</span>
+            </div>
+          </template>
+          
+          <a-form :model="workGroupForm" layout="vertical" class="work-group-form">
+            <a-row :gutter="24">
+              <a-col :span="12">
+                <a-form-item label="工作组名称" required>
+                  <a-input v-model="workGroupForm.name" placeholder="请输入工作组名称" />
+                </a-form-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-item label="关联项目ID" required>
+                  <a-input v-model="workGroupForm.projectId" :value="selectedProject?.projectId" disabled />
+                </a-form-item>
+              </a-col>
+            </a-row>
+            
+            <a-form-item label="工作组描述">
+              <a-textarea 
+                v-model="workGroupForm.description" 
+                placeholder="请输入工作组描述"
+                :rows="3"
+              />
+            </a-form-item>
+            
+            <a-form-item label="工种分组">
+              <div class="work-type-groups">
+                <div 
+                  v-for="(group, index) in workGroupForm.workTypeGroups" 
+                  :key="index"
+                  class="work-type-group-item"
+                >
+                  <a-row :gutter="16">
+                    <a-col :span="8">
+                      <a-input 
+                        v-model="group.name" 
+                        placeholder="工种名称"
+                        :prefix="`${index + 1}.`"
+                      />
+                    </a-col>
+                    <a-col :span="8">
+                      <a-input-number 
+                        v-model="group.requiredCount" 
+                        :min="1" 
+                        :max="100"
+                        placeholder="需求人数"
+                        style="width: 100%"
+                      />
+                    </a-col>
+                    <a-col :span="6">
+                      <a-select 
+                        v-model="group.priority" 
+                        placeholder="优先级"
+                        style="width: 100%"
+                      >
+                        <a-option value="HIGH">高</a-option>
+                        <a-option value="MEDIUM">中</a-option>
+                        <a-option value="LOW">低</a-option>
+                      </a-select>
+                    </a-col>
+                    <a-col :span="2">
+                      <a-button 
+                        type="text" 
+                        status="danger" 
+                        @click="removeWorkTypeGroup(index)"
+                        :disabled="workGroupForm.workTypeGroups.length === 1"
+                      >
+                        <template #icon><icon-delete /></template>
+                      </a-button>
+                    </a-col>
+                  </a-row>
+                </div>
+                
+                <div class="add-work-type-group">
+                  <a-button type="dashed" @click="addWorkTypeGroup" block>
+                    <template #icon><icon-plus /></template>
+                    添加工种分组
+                  </a-button>
+                </div>
+              </div>
+            </a-form-item>
+            
+            <div class="form-actions">
+              <a-button @click="goBackToStep1">
+                <template #icon><icon-arrow-left /></template>
+                返回项目选择
+              </a-button>
+              <a-button type="primary" @click="createWorkGroup">
+                <template #icon><icon-check /></template>
+                创建工作组并进入分配
+              </a-button>
+            </div>
+          </a-form>
+        </a-card>
+      </div>
+
+      <!-- 步骤3: 工人分配页 -->
+      <div v-if="currentStep === 3" class="step-content">
+        <div class="worker-assignment-layout">
+          <!-- 左侧筛选栏 -->
+          <div class="filter-sidebar">
+            <a-card class="filter-card" :bordered="false">
+              <template #title>
+                <div class="card-title">
+                  <icon-filter />
+                  <span>筛选条件</span>
+                </div>
+              </template>
+              
+              <div class="filter-content">
+                <a-form layout="vertical">
+                  <a-form-item label="工种筛选">
+                    <a-checkbox-group v-model="filterForm.workTypes" @change="handleFilterChange">
+                      <a-checkbox value="TOWER_CLIMB">塔上登高作业</a-checkbox>
+                      <a-checkbox value="GROUND_CREW">地勤人员</a-checkbox>
+                      <a-checkbox value="DRIVER">司机</a-checkbox>
+                      <a-checkbox value="DRONE_PILOT">无人机飞手</a-checkbox>
+                      <a-checkbox value="BASKET_REPAIR">吊篮维修工</a-checkbox>
+                      <a-checkbox value="ELECTRICAL_ENG">电气工程师</a-checkbox>
+                      <a-checkbox value="MECHANICAL_ENG">机械工程师</a-checkbox>
+                      <a-checkbox value="SAFETY_MANAGER">安全管理员</a-checkbox>
+                    </a-checkbox-group>
+                  </a-form-item>
+                  
+                  <a-form-item label="证书关键词">
+                    <a-input-search 
+                      v-model="filterForm.certificateKeyword"
+                      placeholder="搜索证书名称"
+                      @search="handleFilterChange"
+                      @clear="handleFilterChange"
+                    />
+                  </a-form-item>
+                  
+                  <a-form-item>
+                    <a-button type="primary" @click="handleFilterChange" block>
+                      <template #icon><icon-search /></template>
+                      应用筛选
+                    </a-button>
+                  </a-form-item>
+                  
+                  <a-form-item>
+                    <a-button @click="resetFilter" block>
+                      <template #icon><icon-refresh /></template>
+                      重置筛选
+                    </a-button>
+                  </a-form-item>
+                </a-form>
+              </div>
+            </a-card>
+          </div>
+          
+          <!-- 中间工人表格 -->
+          <div class="worker-table-section">
+            <a-card class="worker-table-card" :bordered="false">
+              <template #title>
+                <div class="card-title">
+                  <icon-user-group />
+                  <span>工人列表</span>
+                  <span class="worker-count">({{ filteredWorkers.length }}人)</span>
+                </div>
+              </template>
+              
+              <div class="worker-table">
+                <div 
+                  v-for="worker in filteredWorkers" 
+                  :key="worker.id"
+                  class="worker-item"
+                  draggable="true"
+                  @dragstart="handleDragStart($event, worker)"
+                  @dragend="handleDragEnd"
+                >
+                  <div class="worker-avatar">
+                    <a-avatar :src="worker.avatar" :size="48">
+                      {{ worker.name.charAt(0) }}
+                    </a-avatar>
+                  </div>
+                  
+                  <div class="worker-info">
+                    <div class="worker-name">
+                      <h4>{{ worker.name }}</h4>
+                      <a-tag :color="getWorkerStatusColor(worker.status)" size="small">
+                        {{ getWorkerStatusText(worker.status) }}
+                      </a-tag>
+                    </div>
+                    
+                    <div class="worker-details">
+                      <span class="phone">{{ worker.phone }}</span>
+                      <span class="experience">{{ worker.experience }}年经验</span>
+                      <span class="rating">
+                        <icon-star-fill style="color: #fadb14;" />
+                        {{ worker.rating }}
+                      </span>
+                    </div>
+                    
+                    <div class="worker-skills">
+                      <a-tag 
+                        v-for="workType in worker.workTypes" 
+                        :key="workType"
+                        size="small"
+                        color="blue"
+                      >
+                        {{ workType }}
+                      </a-tag>
+                    </div>
+                  </div>
+                  
+                  <div class="worker-certificates">
+                    <div class="certificates-header">
+                      <span class="label">证书：</span>
+                      <a-button 
+                        type="text" 
+                        size="small" 
+                        @click="viewWorkerCertificates(worker)"
+                      >
+                        查看 ({{ worker.certifications.length }})
+                      </a-button>
+                    </div>
+                    <div class="certificates-preview">
+                      <a-tag 
+                        v-for="cert in worker.certifications.slice(0, 3)" 
+                        :key="cert.id"
+                        :color="getCertificateStatusColor(cert.status)"
+                        size="small"
+                      >
+                        {{ cert.name }}
+                      </a-tag>
+                      <span v-if="worker.certifications.length > 3" class="more-certs">
+                        +{{ worker.certifications.length - 3 }}
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </a-card>
+          </div>
+
+          <!-- 右侧工种分组栏 -->
+          <div class="work-groups-sidebar">
+            <a-card class="work-groups-card" :bordered="false">
+              <template #title>
+                <div class="card-title">
+                  <icon-user-group />
+                  <span>工种分组</span>
+                </div>
+              </template>
+              
+              <div class="work-groups-content">
+                <div 
+                  v-for="group in workGroupForm.workTypeGroups" 
+                  :key="group.name"
+                  class="work-group-drop-zone"
+                  @dragover="handleDragOver"
+                  @drop="handleDrop($event, group)"
+                >
+                  <div class="work-group-header">
+                    <h4>{{ group.name }}</h4>
+                    <div class="work-group-stats">
+                      <span class="assigned">{{ getAssignedCount(group.name) }}</span>
+                      <span class="separator">/</span>
+                      <span class="required">{{ group.requiredCount }}</span>
+                    </div>
+                  </div>
+                  
+                  <div class="work-group-members">
+                    <div 
+                      v-for="member in getGroupMembers(group.name)" 
+                      :key="member.id"
+                      class="group-member"
+                    >
+                      <a-avatar :src="member.avatar" :size="32">
+                        {{ member.name.charAt(0) }}
+                      </a-avatar>
+                      <span class="member-name">{{ member.name }}</span>
+                      <a-button 
+                        type="text" 
+                        size="small" 
+                        status="danger"
+                        @click="removeFromGroup(member, group.name)"
+                      >
+                        <template #icon><icon-close /></template>
+                      </a-button>
+                    </div>
+                    
+                    <div v-if="getAssignedCount(group.name) < group.requiredCount" class="drop-hint">
+                      拖拽工人到此处
+                    </div>
+                  </div>
+                </div>
+              </div>
+              
+              <div class="work-groups-actions">
+                <a-button type="primary" @click="saveAssignment" block>
+                  <template #icon><icon-save /></template>
+                  保存分配
+                </a-button>
+                <a-button @click="goBackToStep2" block>
+                  <template #icon><icon-arrow-left /></template>
+                  返回编辑
+                </a-button>
+              </div>
+            </a-card>
+          </div>
+        </div>
+      </div>
+
+      <!-- 证书查看弹窗 -->
+      <a-modal
+        v-model:visible="certificateModalVisible"
+        title="工人证书"
+        width="600px"
+        :footer="false"
+      >
+        <div class="certificate-list">
+          <div 
+            v-for="cert in selectedWorkerCertificates" 
+            :key="cert.id"
+            class="certificate-item"
+          >
+            <div class="certificate-header">
+              <h4>{{ cert.name }}</h4>
+              <a-tag :color="getCertificateStatusColor(cert.status)">
+                {{ getCertificateStatusText(cert.status) }}
+              </a-tag>
+            </div>
+            <div class="certificate-details">
+              <p><strong>证书编号：</strong>{{ cert.code }}</p>
+              <p><strong>发证机构：</strong>{{ cert.issuingAuthority }}</p>
+              <p><strong>发证日期：</strong>{{ cert.issueDate }}</p>
+              <p><strong>有效期至：</strong>{{ cert.expiryDate }}</p>
+            </div>
+          </div>
+        </div>
+      </a-modal>
+
+      <!-- 工作组详情弹窗 -->
+      <a-modal
+        v-model:visible="workGroupDetailModalVisible"
+        title="工作组详情"
+        width="800px"
+        :footer="false"
+      >
+        <div class="work-group-detail">
+          <div class="project-info-section">
+            <h3>{{ selectedProjectForDetail?.projectName }}</h3>
+            <p class="project-code">项目编号: {{ selectedProjectForDetail?.projectCode }}</p>
+          </div>
+          
+          <div class="work-groups-section">
+            <h4>工作组列表</h4>
+            <div class="work-groups-detail-list">
+              <div 
+                v-for="workGroup in selectedProjectForDetail?.workGroups" 
+                :key="workGroup.id"
+                class="work-group-detail-item"
+              >
+                <div class="work-group-detail-header">
+                  <h5>{{ workGroup.name }}</h5>
+                  <div class="work-group-detail-stats">
+                    <span class="member-count">{{ workGroup.memberCount }}/{{ workGroup.requiredCount }}</span>
+                    <a-tag :color="getWorkGroupStatusColor(workGroup.status)" size="small">
+                      {{ getWorkGroupStatusText(workGroup.status) }}
+                    </a-tag>
+                  </div>
+                </div>
+                
+                <div class="work-group-detail-members" v-if="workGroup.members && workGroup.members.length > 0">
+                  <div class="members-header">
+                    <span>成员列表：</span>
+                  </div>
+                  <div class="members-grid">
+                    <div 
+                      v-for="member in workGroup.members" 
+                      :key="member.id"
+                      class="member-detail-item"
+                    >
+                      <a-avatar :src="member.avatar" :size="32">
+                        {{ member.name.charAt(0) }}
+                      </a-avatar>
+                      <div class="member-detail-info">
+                        <span class="member-name">{{ member.name }}</span>
+                        <span class="member-role">{{ member.role }}</span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                
+                <div class="work-group-detail-description" v-if="workGroup.description">
+                  <p><strong>描述：</strong>{{ workGroup.description }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </a-modal>
+    </div>
+  </GiPageLayout>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import { Message, Modal } from '@arco-design/web-vue'
+import { 
+  IconSearch, 
+  IconRefresh, 
+  IconApps,
+  IconUserGroup,
+  IconPlus,
+  IconUserAdd,
+  IconEdit,
+  IconDelete,
+  IconStarFill,
+  IconCheckCircle,
+  IconFolder,
+  IconArrowRight,
+  IconArrowLeft,
+  IconCheck,
+  IconFilter,
+  IconClose,
+  IconSave,
+  IconEye
+} from '@arco-design/web-vue/es/icon'
+import type { 
+  ProjectResp, 
+  ConstructorResp, 
+  CertificationResp,
+  WorkGroup,
+  WorkTypeGroup,
+  WorkGroupMember,
+  ProjectWithWorkGroups
+} from '@/apis/project/type'
+import { 
+  getWorkGroupsByProject, 
+  createWorkGroup as createWorkGroupAPI,
+  assignWorkerToGroup,
+  removeWorkerFromGroup
+} from '@/apis/project/workGroup'
+
+// 移除重复的类型定义，使用导入的类型
+// interface WorkGroup {
+//   id: string
+//   name: string
+//   description: string
+//   projectId: string
+//   status: 'ACTIVE' | 'INACTIVE' | 'COMPLETED'
+//   workTypeGroups: WorkTypeGroup[]
+//   memberCount: number
+//   requiredCount: number
+//   members?: WorkGroupMember[]
+//   createTime: string
+// }
+
+// interface WorkTypeGroup {
+//   name: string
+//   requiredCount: number
+//   priority: 'HIGH' | 'MEDIUM' | 'LOW'
+// }
+
+// interface WorkGroupMember {
+//   id: string
+//   name: string
+//   role: string
+//   avatar?: string
+//   phone?: string
+// }
+
+// 扩展项目类型，包含工作组信息
+// interface ProjectWithWorkGroups extends ProjectResp {
+//   workGroups?: WorkGroup[]
+// }
+
+defineOptions({ name: 'PersonnelOrganization' })
+
+// 步骤控制
+const currentStep = ref(1)
+
+// 项目数据
+const projectList = ref<ProjectWithWorkGroups[]>([])
+const selectedProject = ref<ProjectWithWorkGroups | null>(null)
+const selectedProjectForDetail = ref<ProjectWithWorkGroups | null>(null)
+
+// 工作组表单
+const workGroupForm = reactive({
+  id: '', // 添加工作组ID字段
+  name: '',
+  description: '',
+  projectId: '',
+  workTypeGroups: [
+    {
+      name: '',
+      requiredCount: 1,
+      priority: 'MEDIUM'
+    }
+  ]
+})
+
+// 工人数据
+const workers = ref<ConstructorResp[]>([])
+const filteredWorkers = ref<ConstructorResp[]>([])
+
+// 筛选表单
+const filterForm = reactive({
+  workTypes: [] as string[],
+  certificateKeyword: ''
+})
+
+// 分配数据
+const workerAssignments = ref<Record<string, ConstructorResp[]>>({})
+
+// 弹窗状态
+const certificateModalVisible = ref(false)
+const selectedWorkerCertificates = ref<CertificationResp[]>([])
+const workGroupDetailModalVisible = ref(false)
+
+// 拖拽状态
+const draggedWorker = ref<ConstructorResp | null>(null)
+
+// 计算属性
+const getAssignedCount = (groupName: string) => {
+  return workerAssignments.value[groupName]?.length || 0
+}
+
+const getGroupMembers = (groupName: string) => {
+  return workerAssignments.value[groupName] || []
+}
+
+// 方法
+const loadProjectList = async () => {
+  try {
+    // 使用模拟数据，包含工作组信息
+    projectList.value = [
+      {
+        projectId: '1',
+        projectCode: 'PRJ001',
+        projectName: '风电场A区建设项目',
+        farmName: '风电场A区',
+        status: 1,
+        statusLabel: '进行中',
+        workGroups: [
+          {
+            id: 'wg1',
+            name: '高空作业组',
+            description: '负责塔上登高作业',
+            projectId: '1',
+            status: 'ACTIVE',
+            workTypeGroups: [
+              { name: '塔上登高作业', requiredCount: 5, priority: 'HIGH' }
+            ],
+            memberCount: 3,
+            requiredCount: 5,
+            members: [
+              { id: 'm1', name: '张登高', role: '组长', avatar: '' },
+              { id: 'm2', name: '李高空', role: '组员', avatar: '' },
+              { id: 'm3', name: '王高空', role: '组员', avatar: '' }
+            ],
+            createTime: '2024-01-15'
+          },
+          {
+            id: 'wg2',
+            name: '地勤保障组',
+            description: '负责地面保障工作',
+            projectId: '1',
+            status: 'ACTIVE',
+            workTypeGroups: [
+              { name: '地勤人员', requiredCount: 3, priority: 'MEDIUM' }
+            ],
+            memberCount: 2,
+            requiredCount: 3,
+            members: [
+              { id: 'm4', name: '赵地勤', role: '组长', avatar: '' },
+              { id: 'm5', name: '孙地勤', role: '组员', avatar: '' }
+            ],
+            createTime: '2024-01-16'
+          }
+        ]
+      },
+      {
+        projectId: '2',
+        projectCode: 'PRJ002',
+        projectName: '风电场B区维护项目',
+        farmName: '风电场B区',
+        status: 2,
+        statusLabel: '已完成',
+        workGroups: [
+          {
+            id: 'wg3',
+            name: '维护保养组',
+            description: '负责设备维护保养',
+            projectId: '2',
+            status: 'COMPLETED',
+            workTypeGroups: [
+              { name: '机械工程师', requiredCount: 2, priority: 'HIGH' },
+              { name: '电气工程师', requiredCount: 2, priority: 'HIGH' }
+            ],
+            memberCount: 4,
+            requiredCount: 4,
+            members: [
+              { id: 'm6', name: '周机械', role: '机械工程师', avatar: '' },
+              { id: 'm7', name: '吴电气', role: '电气工程师', avatar: '' },
+              { id: 'm8', name: '郑机械', role: '机械工程师', avatar: '' },
+              { id: 'm9', name: '王电气', role: '电气工程师', avatar: '' }
+            ],
+            createTime: '2024-01-10'
+          }
+        ]
+      },
+      {
+        projectId: '3',
+        projectCode: 'PRJ003',
+        projectName: '风电场C区升级项目',
+        farmName: '风电场C区',
+        status: 0,
+        statusLabel: '准备中',
+        workGroups: []
+      }
+    ]
+    
+    // 为每个项目加载工作组信息
+    for (const project of projectList.value) {
+      try {
+        const workGroups = await getWorkGroupsByProject(project.projectId)
+        project.workGroups = workGroups
+      } catch (error) {
+        console.warn(`加载项目 ${project.projectName} 的工作组失败:`, error)
+        // 保持模拟数据作为后备
+      }
+    }
+  } catch (error) {
+    Message.error('加载项目列表失败')
+  }
+}
+
+const loadWorkers = async () => {
+  try {
+    // 模拟API调用
+    workers.value = [
+      {
+        id: '1',
+        name: '张登高',
+        phone: '13800138001',
+        email: 'zhangdg@example.com',
+        avatar: '',
+        workTypes: ['塔上登高作业'],
+        certifications: [
+          {
+            id: '1',
+            name: '高空作业证',
+            type: '特种作业证',
+            code: 'GK001',
+            issueDate: '2023-01-01',
+            expiryDate: '2025-01-01',
+            issuingAuthority: '国家安全生产监督管理局',
+            status: 'VALID'
+          }
+        ],
+        experience: 8,
+        status: 'ACTIVE',
+        rating: 4.9,
+        joinDate: '2023-01-01'
+      },
+      {
+        id: '2',
+        name: '李高空',
+        phone: '13800138002',
+        email: 'ligk@example.com',
+        avatar: '',
+        workTypes: ['塔上登高作业'],
+        certifications: [
+          {
+            id: '2',
+            name: '高空作业证',
+            type: '特种作业证',
+            code: 'GK002',
+            issueDate: '2022-06-01',
+            expiryDate: '2024-06-01',
+            issuingAuthority: '国家安全生产监督管理局',
+            status: 'VALID'
+          }
+        ],
+        experience: 6,
+        status: 'ACTIVE',
+        rating: 4.7,
+        joinDate: '2023-02-01'
+      },
+      {
+        id: '3',
+        name: '王地勤',
+        phone: '13800138003',
+        email: 'wangdq@example.com',
+        avatar: '',
+        workTypes: ['地勤人员'],
+        certifications: [
+          {
+            id: '3',
+            name: '安全员证',
+            type: '安全资格证',
+            code: 'AQ001',
+            issueDate: '2023-03-01',
+            expiryDate: '2025-03-01',
+            issuingAuthority: '国家安全生产监督管理局',
+            status: 'VALID'
+          }
+        ],
+        experience: 5,
+        status: 'ACTIVE',
+        rating: 4.6,
+        joinDate: '2023-03-01'
+      },
+      {
+        id: '4',
+        name: '赵飞手',
+        phone: '13800138004',
+        email: 'zhaofs@example.com',
+        avatar: '',
+        workTypes: ['无人机飞手'],
+        certifications: [
+          {
+            id: '4',
+            name: '无人机驾驶证',
+            type: '飞行执照',
+            code: 'WRJ001',
+            issueDate: '2022-12-01',
+            expiryDate: '2024-12-01',
+            issuingAuthority: '中国民用航空局',
+            status: 'VALID'
+          }
+        ],
+        experience: 4,
+        status: 'ACTIVE',
+        rating: 4.8,
+        joinDate: '2023-04-01'
+      },
+      {
+        id: '5',
+        name: '孙司机',
+        phone: '13800138005',
+        email: 'sunsj@example.com',
+        avatar: '',
+        workTypes: ['司机'],
+        certifications: [
+          {
+            id: '5',
+            name: 'A2驾驶证',
+            type: '驾驶执照',
+            code: 'JS001',
+            issueDate: '2023-05-01',
+            expiryDate: '2025-05-01',
+            issuingAuthority: '交通管理局',
+            status: 'VALID'
+          }
+        ],
+        experience: 6,
+        status: 'ACTIVE',
+        rating: 4.6,
+        joinDate: '2023-05-01'
+      }
+    ]
+    filteredWorkers.value = workers.value
+  } catch (error) {
+    Message.error('加载工人列表失败')
+  }
+}
+
+const selectProject = (project: ProjectWithWorkGroups) => {
+  selectedProject.value = project
+}
+
+const enterWorkGroupCreation = (project: ProjectWithWorkGroups) => {
+  selectedProject.value = project
+  workGroupForm.projectId = project.projectId
+  currentStep.value = 2
+}
+
+const addWorkTypeGroup = () => {
+  workGroupForm.workTypeGroups.push({
+    name: '',
+    requiredCount: 1,
+    priority: 'MEDIUM'
+  })
+}
+
+const removeWorkTypeGroup = (index: number) => {
+  if (workGroupForm.workTypeGroups.length > 1) {
+    workGroupForm.workTypeGroups.splice(index, 1)
+  }
+}
+
+const goBackToStep1 = () => {
+  currentStep.value = 1
+  selectedProject.value = null
+  resetWorkGroupForm()
+}
+
+const goBackToStep2 = () => {
+  currentStep.value = 2
+}
+
+const createWorkGroup = async () => {
+  if (!workGroupForm.name || !workGroupForm.projectId) {
+    Message.warning('请填写工作组名称和关联项目')
+    return
+  }
+  
+  const hasEmptyGroups = workGroupForm.workTypeGroups.some(group => !group.name)
+  if (hasEmptyGroups) {
+    Message.warning('请填写所有工种分组名称')
+    return
+  }
+  
+  try {
+    // 调用API创建工作组
+    const newWorkGroup = await createWorkGroupAPI({
+      name: workGroupForm.name,
+      description: workGroupForm.description,
+      projectId: workGroupForm.projectId,
+      workTypeGroups: workGroupForm.workTypeGroups
+    })
+    
+    Message.success('工作组创建成功')
+    
+    // 保存新创建的工作组ID
+    workGroupForm.id = newWorkGroup.id
+    
+    // 更新项目的工作组列表
+    if (selectedProject.value) {
+      if (!selectedProject.value.workGroups) {
+        selectedProject.value.workGroups = []
+      }
+      selectedProject.value.workGroups.push(newWorkGroup)
+    }
+    
+    currentStep.value = 3
+    loadWorkers()
+  } catch (error) {
+    Message.error('创建工作组失败')
+    console.error('创建工作组错误:', error)
+  }
+}
+
+const resetWorkGroupForm = () => {
+  workGroupForm.id = '' // 重置工作组ID
+  workGroupForm.name = ''
+  workGroupForm.description = ''
+  workGroupForm.projectId = ''
+  workGroupForm.workTypeGroups = [
+    {
+      name: '',
+      requiredCount: 1,
+      priority: 'MEDIUM'
+    }
+  ]
+}
+
+const handleFilterChange = () => {
+  let filtered = workers.value
+  
+  // 按工种筛选
+  if (filterForm.workTypes.length > 0) {
+    filtered = filtered.filter(worker => 
+      worker.workTypes.some(workType => filterForm.workTypes.includes(workType))
+    )
+  }
+  
+  // 按证书关键词搜索
+  if (filterForm.certificateKeyword) {
+    const keyword = filterForm.certificateKeyword.toLowerCase()
+    filtered = filtered.filter(worker => 
+      worker.certifications.some(cert => 
+        cert.name.toLowerCase().includes(keyword)
+      )
+    )
+  }
+  
+  filteredWorkers.value = filtered
+}
+
+const resetFilter = () => {
+  filterForm.workTypes = []
+  filterForm.certificateKeyword = ''
+  filteredWorkers.value = workers.value
+}
+
+const handleDragStart = (event: DragEvent, worker: ConstructorResp) => {
+  draggedWorker.value = worker
+  if (event.dataTransfer) {
+    event.dataTransfer.effectAllowed = 'move'
+  }
+}
+
+const handleDragEnd = () => {
+  draggedWorker.value = null
+}
+
+const handleDragOver = (event: DragEvent) => {
+  event.preventDefault()
+  if (event.dataTransfer) {
+    event.dataTransfer.dropEffect = 'move'
+  }
+}
+
+const handleDrop = (event: DragEvent, group: any) => {
+  event.preventDefault()
+  
+  if (!draggedWorker.value) return
+  
+  const groupName = group.name
+  if (!workerAssignments.value[groupName]) {
+    workerAssignments.value[groupName] = []
+  }
+  
+  // 检查是否已分配
+  const isAlreadyAssigned = Object.values(workerAssignments.value).some(
+    members => members.some(member => member.id === draggedWorker.value?.id)
+  )
+  
+  if (isAlreadyAssigned) {
+    Message.warning('该工人已被分配到其他组')
+    return
+  }
+  
+  // 检查是否超过需求人数
+  if (workerAssignments.value[groupName].length >= group.requiredCount) {
+    Message.warning('该工种分组人数已满')
+    return
+  }
+
+  workerAssignments.value[groupName].push(draggedWorker.value)
+  Message.success(`已将 ${draggedWorker.value.name} 分配到 ${groupName}`)
+}
+
+const removeFromGroup = async (member: ConstructorResp, groupName: string) => {
+  try {
+    if (!workGroupForm.id) {
+      Message.error('工作组ID不存在')
+      return
+    }
+    
+    await removeWorkerFromGroup({
+      workGroupId: workGroupForm.id,
+      workerId: member.id,
+      workTypeName: groupName
+    })
+    
+    // 从本地分配数据中移除
+    const index = workerAssignments.value[groupName].findIndex(m => m.id === member.id)
+    if (index > -1) {
+      workerAssignments.value[groupName].splice(index, 1)
+    }
+    
+    Message.success(`已从 ${groupName} 移除 ${member.name}`)
+  } catch (error) {
+    Message.error('移除工人失败')
+    console.error('移除工人错误:', error)
+  }
+}
+
+const viewWorkerCertificates = async (worker: ConstructorResp) => {
+  try {
+    // 使用本地证书数据
+    selectedWorkerCertificates.value = worker.certifications
+    certificateModalVisible.value = true
+  } catch (error) {
+    Message.error('加载证书信息失败')
+  }
+}
+
+const saveAssignment = async () => {
+  try {
+    // 模拟保存分配
+    const totalAssigned = Object.values(workerAssignments.value).reduce(
+      (sum, members) => sum + members.length, 0
+    )
+    
+    if (totalAssigned === 0) {
+      Message.warning('请至少分配一名工人')
+      return
+    }
+
+    if (!workGroupForm.id) {
+      Message.error('工作组ID不存在')
+      return
+    }
+
+    // 调用API保存分配结果
+    const assignmentPromises = []
+    
+    for (const [workTypeName, workers] of Object.entries(workerAssignments.value)) {
+      if (workers.length > 0) {
+        const workerIds = workers.map(w => w.id)
+        assignmentPromises.push(
+          assignWorkerToGroup({
+            workGroupId: workGroupForm.id,
+            workerIds,
+            workTypeName
+          })
+        )
+      }
+    }
+    
+    await Promise.all(assignmentPromises)
+    Message.success('分配保存成功')
+    
+    // 刷新项目的工作组信息
+    if (selectedProject.value) {
+      try {
+        const workGroups = await getWorkGroupsByProject(selectedProject.value.projectId)
+        selectedProject.value.workGroups = workGroups
+      } catch (error) {
+        console.warn('刷新工作组信息失败:', error)
+      }
+    }
+  } catch (error) {
+    Message.error('保存分配失败')
+    console.error('保存分配错误:', error)
+  }
+}
+
+const viewProjectWorkGroups = (project: ProjectWithWorkGroups) => {
+  selectedProjectForDetail.value = project
+  workGroupDetailModalVisible.value = true
+}
+
+// 工具方法
+const getStatusColor = (status: number) => {
+  const statusMap: Record<number, string> = {
+    0: 'orange',
+    1: 'blue',
+    2: 'green'
+  }
+  return statusMap[status] || 'gray'
+}
+
+const getWorkerStatusColor = (status: string) => {
+  const statusMap: Record<string, string> = {
+    'ACTIVE': 'green',
+    'INACTIVE': 'red',
+    'BUSY': 'orange'
+  }
+  return statusMap[status] || 'gray'
+}
+
+const getWorkerStatusText = (status: string) => {
+  const statusMap: Record<string, string> = {
+    'ACTIVE': '可用',
+    'INACTIVE': '不可用',
+    'BUSY': '忙碌中'
+  }
+  return statusMap[status] || status
+}
+
+const getCertificateStatusColor = (status: string) => {
+  const statusMap: Record<string, string> = {
+    'VALID': 'green',
+    'EXPIRED': 'red',
+    'EXPIRING_SOON': 'orange'
+  }
+  return statusMap[status] || 'gray'
+}
+
+const getCertificateStatusText = (status: string) => {
+  const statusMap: Record<string, string> = {
+    'VALID': '有效',
+    'EXPIRED': '已过期',
+    'EXPIRING_SOON': '即将过期'
+  }
+  return statusMap[status] || status
+}
+
+const getWorkGroupStatusColor = (status: string) => {
+  const statusMap: Record<string, string> = {
+    'ACTIVE': 'green',
+    'INACTIVE': 'red',
+    'COMPLETED': 'gray'
+  }
+  return statusMap[status] || 'gray'
+}
+
+const getWorkGroupStatusText = (status: string) => {
+  const statusMap: Record<string, string> = {
+    'ACTIVE': '进行中',
+    'INACTIVE': '已暂停',
+    'COMPLETED': '已完成'
+  }
+  return statusMap[status] || status
+}
+
+// 生命周期
+onMounted(async () => {
+    await loadProjectList()
+})
+</script>
+
+<style scoped lang="scss">
+.personnel-organization-container {
+  padding: 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  min-height: 100vh;
+  overflow-y: auto; // 添加垂直滚动
+}
+
+// 流程导航样式
+.process-flow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 30px;
+  padding: 20px;
+  background: white;
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  flex-shrink: 0; // 防止压缩
+}
+
+.flow-step {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 16px 24px;
+  border-radius: 12px;
+  transition: all 0.3s ease;
+  opacity: 0.6;
+  
+  &.active {
+    opacity: 1;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+    transform: translateY(-2px);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
+  }
+  
+  .step-icon {
+    font-size: 24px;
+    margin-bottom: 8px;
+  }
+  
+  .step-text {
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+.flow-arrow {
+  font-size: 24px;
+  color: #667eea;
+  margin: 0 20px;
+  font-weight: bold;
+}
+
+.step-content {
+  max-width: 1200px;
+  margin: 0 auto;
+  margin-bottom: 30px; // 添加底部间距
+}
+
+// 项目选择卡片
+.project-selection-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  
+  .card-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1d2129;
+  }
+}
+
+.project-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 24px;
+  margin-top: 20px;
+}
+
+.project-card {
+  background: white;
+  border: 2px solid #f0f0f0;
+  border-radius: 16px;
+  padding: 24px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    border-color: #667eea;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
+    transform: translateY(-2px);
+  }
+  
+  &.selected {
+    border-color: #667eea;
+    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%);
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
+  }
+}
+
+.project-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+}
+
+.project-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-size: 20px;
+}
+  
+.project-info {
+  margin-bottom: 20px;
+  
+  .project-name {
+    margin: 0 0 8px 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1d2129;
+  }
+      
+  .project-code {
+    margin: 0 0 4px 0;
+    font-size: 14px;
+    color: #86909c;
+  }
+      
+  .project-farm {
+    margin: 0;
+    font-size: 14px;
+    color: #4e5969;
+  }
+}
+
+.project-work-groups {
+  margin-top: 20px;
+  padding-top: 16px;
+  border-top: 1px solid #e9ecef;
+
+  .work-groups-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1d2129;
+    margin-bottom: 12px;
+  }
+
+  .work-groups-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 12px;
+  }
+
+  .work-group-preview {
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-radius: 8px;
+    padding: 8px 12px;
+    font-size: 14px;
+    color: #1d2129;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .more-work-groups {
+    font-size: 14px;
+    color: #86909c;
+    font-weight: 500;
+  }
+}
+
+.project-actions {
+  text-align: center;
+  margin-top: 20px;
+}
+
+// 工作组创建表单
+.work-group-form-card {
+  border-radius: 16px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+  
+  .card-title {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #1d2129;
+    
+    .project-info-text {
+      color: #86909c;
+      font-weight: 400;
+    }
+  }
+}
+
+.work-group-form {
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.work-type-groups {
+  .work-type-group-item {
+    margin-bottom: 16px;
+    padding: 16px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+  }
+}
+
+.add-work-type-group {
+  margin-top: 16px;
+}
+
+.form-actions {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 32px;
+  padding-top: 24px;
+  border-top: 1px solid #e9ecef;
+}
+
+// 工人分配布局
+.worker-assignment-layout {
+  display: grid;
+  grid-template-columns: 280px 1fr 320px;
+  gap: 24px;
+  min-height: 600px; // 设置最小高度而不是固定高度
+}
+
+.filter-sidebar,
+.work-groups-sidebar {
+  .filter-card,
+  .work-groups-card {
+    height: 100%;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}
+
+.filter-content {
+  .arco-form-item {
+    margin-bottom: 20px;
+  }
+}
+
+.worker-table-section {
+  .worker-table-card {
+    height: 100%;
+    border-radius: 16px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    
+    .card-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 16px;
+      font-weight: 600;
+  
+      .worker-count {
+        color: #86909c;
+        font-weight: 400;
+      }
+    }
+  }
+}
+
+.worker-table {
+  max-height: 500px; // 设置最大高度
+  overflow-y: auto; // 添加垂直滚动
+  padding: 16px;
+}
+
+.worker-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 20px;
+  background: white;
+  border: 2px solid #f0f0f0;
+  border-radius: 16px;
+  margin-bottom: 16px;
+  cursor: grab;
+  transition: all 0.3s ease;
+  
+  &:hover {
+    border-color: #667eea;
+    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.15);
+    transform: translateY(-2px);
+  }
+  
+  &:active {
+    cursor: grabbing;
+  }
+}
+
+.worker-info {
+  flex: 1;
+}
+
+.worker-name {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 12px;
+  
+  h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1d2129;
+  }
+}
+
+.worker-details {
+  display: flex;
+  gap: 20px;
+  margin-bottom: 12px;
+  font-size: 13px;
+  color: #86909c;
+  
+  .phone, .experience, .rating {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+  }
+}
+
+.worker-skills {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.worker-certificates {
+  min-width: 200px;
+  
+  .certificates-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 8px;
+      
+    .label {
+      font-size: 12px;
+      color: #86909c;
+      font-weight: 500;
+    }
+  }
+  
+  .certificates-preview {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    
+    .more-certs {
+      font-size: 11px;
+      color: #86909c;
+      font-weight: 500;
+      align-self: center;
+    }
+  }
+}
+
+// 工种分组
+.work-groups-content {
+  max-height: 400px; // 设置最大高度
+  overflow-y: auto; // 添加垂直滚动
+  padding: 16px;
+}
+    
+.work-group-drop-zone {
+  background: white;
+  border: 2px dashed #d9d9d9;
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  transition: all 0.3s ease;
+      
+  &:hover {
+    border-color: #667eea;
+    background: #f8f9ff;
+  }
+}
+      
+.work-group-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+        
+  h4 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 600;
+    color: #1d2129;
+  }
+          
+  .work-group-stats {
+    font-size: 14px;
+    font-weight: 600;
+    
+    .assigned {
+      color: #52c41a;
+    }
+    
+    .separator {
+      margin: 0 4px;
+      color: #86909c;
+    }
+          
+    .required {
+      color: #1890ff;
+    }
+  }
+}
+
+.work-group-members {
+  min-height: 60px;
+}
+
+.group-member {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  background: #f8f9fa;
+  border-radius: 8px;
+  margin-bottom: 8px;
+          
+  .member-name {
+    flex: 1;
+    font-size: 14px;
+    color: #1d2129;
+  }
+}
+
+.drop-hint {
+  text-align: center;
+  padding: 20px;
+  color: #86909c;
+  font-size: 14px;
+  border: 2px dashed #d9d9d9;
+  border-radius: 8px;
+  background: #fafafa;
+}
+
+.work-groups-actions {
+  padding: 16px;
+  border-top: 1px solid #e9ecef;
+  
+  .arco-btn {
+    margin-bottom: 12px;
+    
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+// 证书弹窗
+.certificate-list {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+.certificate-item {
+  border: 1px solid #e5e6eb;
+  border-radius: 8px;
+  padding: 16px;
+  margin-bottom: 12px;
+}
+
+.certificate-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+  
+  h4 {
+    margin: 0;
+    font-size: 14px;
+    font-weight: 600;
+  }
+}
+
+.certificate-details {
+  p {
+    margin: 4px 0;
+    font-size: 12px;
+    color: #4e5969;
+  }
+}
+
+// 工作组详情弹窗
+.work-group-detail {
+  .project-info-section {
+    margin-bottom: 20px;
+    padding-bottom: 16px;
+    border-bottom: 1px solid #e9ecef;
+
+    h3 {
+      margin: 0 0 8px 0;
+      font-size: 18px;
+      font-weight: 600;
+      color: #1d2129;
+    }
+
+    .project-code {
+      font-size: 14px;
+      color: #86909c;
+    }
+  }
+
+  .work-groups-section {
+    h4 {
+      margin: 0 0 16px 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #1d2129;
+    }
+
+    .work-groups-detail-list {
+      .work-group-detail-item {
+        background: #f8f9fa;
+        border: 1px solid #e9ecef;
+        border-radius: 8px;
+        padding: 16px;
+        margin-bottom: 16px;
+
+        .work-group-detail-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 12px;
+
+          h5 {
+            margin: 0;
+            font-size: 15px;
+            font-weight: 600;
+            color: #1d2129;
+          }
+
+          .work-group-detail-stats {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 14px;
+            color: #86909c;
+
+            .member-count {
+              color: #52c41a;
+            }
+          }
+        }
+
+        .work-group-detail-members {
+          .members-header {
+            margin-bottom: 12px;
+            font-size: 14px;
+            color: #1d2129;
+            font-weight: 500;
+          }
+
+          .members-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+            gap: 12px;
+          }
+
+          .member-detail-item {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+
+            .member-detail-info {
+              .member-name {
+                font-size: 14px;
+                color: #1d2129;
+                font-weight: 600;
+              }
+              .member-role {
+                font-size: 12px;
+                color: #86909c;
+              }
+            }
+          }
+        }
+
+        .work-group-detail-description {
+          p {
+            margin: 0;
+            font-size: 13px;
+            color: #4e5969;
+          }
+        }
+      }
+    }
+  }
+}
+
+// 响应式设计
+@media (max-width: 1200px) {
+  .worker-assignment-layout {
+    grid-template-columns: 250px 1fr 280px;
+    gap: 16px;
+  }
+}
+
+@media (max-width: 992px) {
+  .worker-assignment-layout {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .filter-sidebar,
+  .work-groups-sidebar {
+    order: 2;
+  }
+  
+  .worker-table-section {
+    order: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .personnel-organization-container {
+    padding: 16px;
+  }
+  
+  .project-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+  
+  .process-flow {
+    flex-direction: column;
+    gap: 16px;
+    
+    .flow-arrow {
+      transform: rotate(90deg);
+    }
+  }
+}
+</style>
diff --git a/src/views/project-management/projects/progress/index.vue b/src/views/project-management/projects/progress/index.vue
index 812e92c..153b22b 100644
--- a/src/views/project-management/projects/progress/index.vue
+++ b/src/views/project-management/projects/progress/index.vue
@@ -1,476 +1,1448 @@
 <template>
-  <GiPageLayout>
-      <!-- 统计卡片区域 -->
-      <div class="statistics-section">
-        <a-row :gutter="16">
-          <a-col :span="6">
-            <a-card class="stat-card">
-              <a-statistic title="我的项目" :value="2" suffix="个" />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card">
-              <a-statistic title="进行中任务" :value="2" suffix="个" />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card">
-              <a-statistic title="待审核报告" :value="1" suffix="份" />
-            </a-card>
-          </a-col>
-          <a-col :span="6">
-            <a-card class="stat-card">
-              <a-statistic title="发现缺陷" :value="8" suffix="处" />
-            </a-card>
-          </a-col>
-        </a-row>
+  <div class="project-progress-container">
+    <!-- 侧边栏 -->
+    <div class="sidebar">
+      <div class="sidebar-header">
+        <h3>项目状态筛选</h3>
+        <div class="total-count">总计: {{ projects.length }}个项目</div>
+      </div>
+      
+      <div class="sidebar-content">
+        <div 
+          v-for="status in projectStatuses" 
+          :key="status.key"
+          class="status-group"
+        >
+          <div class="status-title">
+            <span class="status-color" :style="{ backgroundColor: status.color }"></span>
+            <span class="status-label">{{ status.label }}</span>
+            <span class="status-count">({{ getProjectCountByStatus(status.key) }})</span>
+          </div>
+          
+          <div class="project-list" v-if="getProjectCountByStatus(status.key) > 0">
+            <div 
+              v-for="project in getProjectsByStatus(status.key)" 
+              :key="project.projectId"
+              class="project-item"
+              :class="{ active: selectedProject?.projectId === project.projectId }"
+              @click="selectProject(project)"
+            >
+              <div class="project-info">
+                <div class="project-name">{{ project.projectName }}</div>
+                <div class="project-code">{{ project.projectCode }}</div>
+                <div class="project-manager">
+                  👤 {{ project.projectManagerName || '未分配' }}
+                </div>
+                <div class="project-progress">
+                  <a-progress 
+                    :percent="project.progress || 0" 
+                    size="small" 
+                    :show-text="false"
+                    :color="getProgressColor(project.progress || 0)"
+                  />
+                  <span class="progress-text">{{ project.progress || 0 }}%</span>
+                </div>
+                <div class="project-dates">
+                  <span class="date-item">
+                    📅 {{ formatShortDate(project.startDate) }}
+                  </span>
+                  <span class="date-item">
+                    📅 {{ formatShortDate(project.endDate) }}
+                  </span>
+              </div>
+            </div>
+            </div>
+          </div>
+          
+          <div v-else class="empty-status">
+            <span class="empty-text">暂无项目</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- 主内容区域 -->
+    <div class="main-content">
+      <!-- 项目信息头部 -->
+      <div class="project-header" v-if="selectedProject">
+        <div class="project-title">
+          <h2>{{ selectedProject.projectName }}</h2>
+          <div class="project-tags">
+          <a-tag :color="getStatusColor(selectedProject.status)">
+            {{ getStatusText(selectedProject.status) }}
+          </a-tag>
+            <a-tag color="blue">{{ selectedProject.projectCode }}</a-tag>
+          </div>
+        </div>
+        
+        <div class="project-meta">
+          <div class="meta-item">
+            <span class="label">启动日期:</span>
+            <span class="value">{{ formatDate(selectedProject.startDate) }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="label">项目负责人:</span>
+            <span class="value">@{{ selectedProject.projectManagerName || '未分配' }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="label">查看工作量:</span>
+            <span class="value">{{ getTotalWorkload() }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="label">风场名称:</span>
+            <span class="value">{{ selectedProject.farmName }}</span>
+          </div>
+          <div class="meta-item">
+            <span class="label">委托单位:</span>
+            <span class="value">{{ selectedProject.client || '未指定' }}</span>
+          </div>
+        </div>
+
+        <div class="project-controls">
+          <a-select 
+            v-model="selectedManager" 
+            placeholder="切换人名" 
+            style="width: 150px"
+            @change="handleManagerChange"
+          >
+            <a-option 
+              v-for="manager in projectManagers" 
+              :key="manager.id" 
+              :value="manager.id"
+            >
+              @{{ manager.name }}
+            </a-option>
+          </a-select>
+          
+          <a-select 
+            v-model="selectedWeek" 
+            placeholder="显示第1周" 
+            style="width: 120px"
+            @change="handleWeekChange"
+          >
+            <a-option 
+              v-for="week in availableWeeks" 
+              :key="week.value" 
+              :value="week.value"
+            >
+              {{ week.label }}
+            </a-option>
+          </a-select>
+          
+          <a-button type="primary" @click="refreshProjectData">
+            🔄 刷新数据
+          </a-button>
+        </div>
+
+        <div class="project-features">
+          <span class="feature-text">
+            ✅ 支持自动高亮"今天"为红色
+          </span>
+          <span class="feature-text">
+            ✅ 休假日期自动标识为淡黄色
+          </span>
+          <span class="feature-text">
+            ⬆️ 修改可自动调整右侧时间轴长度
+          </span>
+        </div>
+
+        <div class="project-legend">
+          <span class="legend-item">
+            <span class="legend-color task-color"></span>
+            灰色底色为任务项,白色底色为子任务项
+          </span>
+          <span class="legend-item">
+            <span class="legend-color editable-color"></span>
+            填写绿色区域,灰色底色部分由公式自动计算
+          </span>
+        </div>
+
+        <div class="timeline-status">
+          <a-tag color="blue">待启动</a-tag>
+          <a-tag color="gray">已完成</a-tag>
+        </div>
       </div>
 
-      <!-- 选项卡区域 -->
-      <div class="tabs-section">
-        <a-tabs v-model:active-key="activeTab" type="line">
-          <a-tab-pane key="progress" tab="项目进度" title="项目进度">
-            <div class="progress-content">
-              <!-- 图表区域 -->
-              <a-card class="chart-card" :bordered="false">
-                <div class="chart-header">
-                  <div class="chart-legend">
-                    <span class="legend-item">
-                      <span class="legend-dot completed"></span>
-                      <span class="legend-text">已完成</span>
-                    </span>
-                    <span class="legend-item">
-                      <span class="legend-dot in-progress"></span>
-                      <span class="legend-text">进行中</span>
-                    </span>
-                    <span class="legend-item">
-                      <span class="legend-dot not-started"></span>
-                      <span class="legend-text">未开始</span>
-                    </span>
+      <!-- 甘特图区域 -->
+      <div class="gantt-container" v-if="selectedProject">
+        <div class="gantt-header">
+          <div class="task-info-header">
+            <div class="header-cell">项目</div>
+            <div class="header-cell">项目描述</div>
+            <div class="header-cell">跟进人</div>
+            <div class="header-cell">启动日期</div>
+            <div class="header-cell">完成日期</div>
+            <div class="header-cell">工时自然日</div>
+            <div class="header-cell">完成度 %</div>
+            <div class="header-cell">工时工作日</div>
+          </div>
+          
+          <div class="timeline-header">
+            <div 
+              v-for="week in timelineWeeks" 
+              :key="week.value"
+              class="week-header"
+            >
+              <div class="week-title">{{ week.label }}</div>
+              <div class="days-header">
+                <div 
+                  v-for="day in week.days" 
+                  :key="day.date"
+                  class="day-header"
+                  :class="{ 
+                    'weekend': day.isWeekend,
+                    'today': day.isToday 
+                  }"
+                >
+                  <div class="day-number">{{ day.dayNumber }}</div>
+                  <div class="day-weekday">{{ day.weekday }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="gantt-body">
+          <div 
+            v-for="task in projectTasks" 
+            :key="task.id"
+            class="task-row"
+            :class="{ 'sub-task': task.isSubTask }"
+          >
+            <!-- 任务信息列 -->
+            <div class="task-info">
+              <div class="task-cell">{{ task.name }}</div>
+              <div class="task-cell">{{ task.description }}</div>
+              <div class="task-cell">@{{ task.assignee }}</div>
+              <div class="task-cell editable">{{ formatDate(task.startDate) }}</div>
+              <div class="task-cell editable">{{ formatDate(task.endDate) }}</div>
+              <div class="task-cell calculated">{{ task.naturalDays }}</div>
+              <div class="task-cell calculated">
+                <div class="progress-bar">
+                  <div 
+                    class="progress-fill" 
+                    :style="{ width: task.progress + '%' }"
+                  ></div>
+                </div>
+                {{ task.progress }}%
+              </div>
+              <div class="task-cell calculated">{{ task.workDays }}</div>
+            </div>
+
+            <!-- 时间轴 -->
+            <div class="task-timeline">
+              <div 
+                v-for="week in timelineWeeks" 
+                :key="week.value"
+                class="week-timeline"
+              >
+                <div class="days-timeline">
+                  <div 
+                    v-for="day in week.days" 
+                    :key="day.date"
+                    class="day-timeline"
+                    :class="{ 
+                      'weekend': day.isWeekend,
+                      'today': day.isToday 
+                    }"
+                  >
+                    <div 
+                      v-if="isTaskActiveOnDay(task, day.date)"
+                      class="task-bar"
+                      :class="{
+                        'completed': isTaskCompletedOnDay(task, day.date),
+                        'pending': !isTaskCompletedOnDay(task, day.date)
+                      }"
+                      :style="getTaskBarStyle(task, day.date)"
+                    ></div>
                   </div>
                 </div>
-                
-                <div class="chart-container">
-                  <a-spin :loading="chartLoading">
-                    <Chart v-if="!chartLoading" :option="barChartOption" style="height: 300px" />
-                  </a-spin>
-                </div>
-              </a-card>
-
-              <!-- 我的项目表格 -->
-              <a-card class="table-card" :bordered="false">
-                <template #title>
-                  <span class="table-title">我的项目</span>
-                </template>
-                
-                <a-table 
-                  :columns="projectColumns"
-                  :data="projectData"
-                  :pagination="false"
-                  :scroll="{ x: '100%' }"
-                >
-                  <!-- 状态列 -->
-                  <template #status="{ record }">
-                    <a-tag :color="getStatusColor(record.status)">
-                      {{ record.status }}
-                    </a-tag>
-                  </template>
-
-                  <!-- 进度列 -->
-                  <template #progress="{ record }">
-                    <div class="progress-container">
-                      <a-progress
-                        :percent="record.progress"
-                        :color="getProgressColor(record.progress)"
-                        size="small"
-                        :show-text="false"
-                      />
-                      <span class="progress-text">{{ record.progress }}%</span>
-                    </div>
-                  </template>
-
-                  <!-- 操作列 -->
-                  <template #action="{ record }">
-                    <a-space>
-                      <a-button size="small" @click="viewProject(record)">查看</a-button>
-                      <a-button type="primary" size="small" @click="enterProject(record)">进入</a-button>
-                    </a-space>
-                  </template>
-                </a-table>
-              </a-card>
+              </div>
             </div>
-          </a-tab-pane>
-          
-          <a-tab-pane key="tasks" tab="施工任务" title="施工任务">
-            <div class="tasks-content">
-              <a-empty description="施工任务功能开发中..." />
-            </div>
-          </a-tab-pane>
-          
-          <a-tab-pane key="notifications" tab="消息通知" title="消息通知">
-            <div class="notifications-content">
-              <a-empty description="消息通知功能开发中..." />
-            </div>
-          </a-tab-pane>
-        </a-tabs>
+          </div>
+        </div>
       </div>
-  </GiPageLayout>
+
+      <!-- 无项目选择时的提示 -->
+      <div v-else class="no-project-selected">
+        <a-empty description="请从左侧选择一个项目查看甘特图">
+          <template #image>
+            📊
+          </template>
+          <template #description>
+            <p>从左侧侧边栏选择不同状态的项目</p>
+            <p>查看项目进度和任务甘特图</p>
+          </template>
+        </a-empty>
+      </div>
+    </div>
+  </div>
 </template>
 
-<script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue'
+<script lang="ts" setup>
+import { ref, reactive, computed, onMounted } from 'vue'
 import { Message } from '@arco-design/web-vue'
-import type { TableColumnData } from '@arco-design/web-vue'
-import { useChart } from '@/hooks'
 
-// 活动选项卡
-const activeTab = ref('progress')
+// 尝试导入dayjs，如果失败则使用原生Date
+let dayjs: any
+try {
+  dayjs = require('dayjs')
+} catch (error) {
+  console.warn('dayjs导入失败，使用原生Date对象')
+  dayjs = {
+    format: (date: Date, format: string) => {
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      const day = date.getDate()
+      const weekdays = ['日', '一', '二', '三', '四', '五', '六']
+      const weekday = weekdays[date.getDay()]
+      
+      if (format === 'YYYY/M/D dddd') {
+        return `${year}/${month}/${day} 星期${weekday}`
+      }
+      if (format === 'YYYY/M/D') {
+        return `${year}/${month}/${day}`
+      }
+      if (format === 'YYYY-MM-DD') {
+        return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`
+      }
+      return `${year}/${month}/${day}`
+    },
+    add: (date: Date, amount: number, unit: string) => {
+      const newDate = new Date(date)
+      if (unit === 'day') {
+        newDate.setDate(newDate.getDate() + amount)
+      }
+      return newDate
+    },
+    isSame: (date1: Date, date2: Date, unit: string) => {
+      if (unit === 'day') {
+        return date1.toDateString() === date2.toDateString()
+      }
+      return date1.getTime() === date2.getTime()
+    },
+    diff: (date1: Date, date2: Date, unit: string) => {
+      if (unit === 'day') {
+        const timeDiff = date1.getTime() - date2.getTime()
+        return Math.floor(timeDiff / (1000 * 3600 * 24))
+      }
+      return date1.getTime() - date2.getTime()
+    },
+    isBetween: (date: Date, start: Date, end: Date, unit: string, inclusivity: string) => {
+      const time = date.getTime()
+      const startTime = start.getTime()
+      const endTime = end.getTime()
+      
+      if (inclusivity === '[]') {
+        return time >= startTime && time <= endTime
+      }
+      return time > startTime && time < endTime
+    }
+  }
+}
 
-// 图表加载状态
-const chartLoading = ref(false)
+import type { ProjectResp } from '@/apis/project/type'
 
-// 项目数据
-const projectData = ref([
+// 项目状态定义 - 按照你的要求映射
+const projectStatuses = [
+  { key: 'pending', label: '未开工', color: '#ff4d4f' },
+  { key: 'preparing', label: '筹备中', color: '#faad14' },
+  { key: 'inProgress', label: '开工中', color: '#1890ff' },
+  { key: 'suspended', label: '暂停中', color: '#722ed1' },
+  { key: 'completed', label: '已完工', color: '#52c41a' },
+  { key: 'acceptance', label: '验收中', color: '#13c2c2' },
+  { key: 'collection', label: '回款中', color: '#eb2f96' },
+  { key: 'settled', label: '已结算', color: '#52c41a' }
+]
+
+// 响应式数据
+const selectedProject = ref<ProjectResp | null>(null)
+const selectedManager = ref<string>('')
+const selectedWeek = ref<string>('week1')
+
+// 模拟项目数据 - 包含所有8种状态
+const projects = ref<ProjectResp[]>([
   {
-    id: 1,
-    name: 'A风场2023年检查',
-    turbineCount: 15,
-    startDate: '2023-10-01',
-    endDate: '2023-12-31',
-    status: '进行中',
-    progress: 65
+    projectId: '1',
+    projectName: 'ABC 项目',
+    projectCode: 'ABC001',
+    projectIntro: '风电场检测服务项目',
+    farmName: '华能风电场',
+    farmAddress: '内蒙古呼和浩特',
+    client: '华能新能源股份有限公司',
+    projectManagerId: '1',
+    projectManagerName: '黄泡泡',
+    startDate: '2025-01-10',
+    endDate: '2025-01-30',
+    status: 2, // 开工中
+    progress: 33
   },
   {
-    id: 2,
-    name: 'B风场维修项目',
-    turbineCount: 8,
-    startDate: '2023-09-15',
-    endDate: '2023-11-30',
-    status: '进行中',
-    progress: 45
+    projectId: '2',
+    projectName: 'DEF 项目',
+    projectCode: 'DEF002',
+    projectIntro: '设备维护服务项目',
+    farmName: '大唐风电场',
+    farmAddress: '河北张家口',
+    client: '大唐新能源股份有限公司',
+    projectManagerId: '2',
+    projectManagerName: '周北北',
+    startDate: '2025-01-15',
+    endDate: '2025-02-15',
+    status: 1, // 筹备中
+    progress: 0
+  },
+  {
+    projectId: '3',
+    projectName: 'GHI 项目',
+    projectCode: 'GHI003',
+    projectIntro: '叶片检测项目',
+    farmName: '中广核风电场',
+    farmAddress: '广东阳江',
+    client: '中广核新能源投资有限公司',
+    projectManagerId: '3',
+    projectManagerName: '王小铭',
+    startDate: '2024-12-01',
+    endDate: '2024-12-31',
+    status: 4, // 已完工
+    progress: 100
+  },
+  {
+    projectId: '4',
+    projectName: 'JKL 项目',
+    projectCode: 'JKL004',
+    projectIntro: '塔筒检测项目',
+    farmName: '三峡风电场',
+    farmAddress: '湖北宜昌',
+    client: '三峡新能源有限公司',
+    projectManagerId: '1',
+    projectManagerName: '黄泡泡',
+    startDate: '2025-02-01',
+    endDate: '2025-02-28',
+    status: 0, // 未开工
+    progress: 0
+  },
+  {
+    projectId: '5',
+    projectName: 'MNO 项目',
+    projectCode: 'MNO005',
+    projectIntro: '齿轮箱检测项目',
+    farmName: '国电风电场',
+    farmAddress: '甘肃酒泉',
+    client: '国电电力发展股份有限公司',
+    projectManagerId: '2',
+    projectManagerName: '周北北',
+    startDate: '2025-01-20',
+    endDate: '2025-02-20',
+    status: 3, // 暂停中
+    progress: 25
+  },
+  {
+    projectId: '6',
+    projectName: 'PQR 项目',
+    projectCode: 'PQR006',
+    projectIntro: '发电机检测项目',
+    farmName: '华电风电场',
+    farmAddress: '新疆哈密',
+    client: '华电国际电力股份有限公司',
+    projectManagerId: '3',
+    projectManagerName: '王小铭',
+    startDate: '2024-11-01',
+    endDate: '2024-11-30',
+    status: 5, // 验收中
+    progress: 95
+  },
+  {
+    projectId: '7',
+    projectName: 'STU 项目',
+    projectCode: 'STU007',
+    projectIntro: '控制系统检测项目',
+    farmName: '龙源风电场',
+    farmAddress: '内蒙古锡林郭勒',
+    client: '龙源电力集团股份有限公司',
+    projectManagerId: '1',
+    projectManagerName: '黄泡泡',
+    startDate: '2024-10-01',
+    endDate: '2024-10-31',
+    status: 6, // 回款中
+    progress: 100
+  },
+  {
+    projectId: '8',
+    projectName: 'VWX 项目',
+    projectCode: 'VWX008',
+    projectIntro: '变桨系统检测项目',
+    farmName: '金风风电场',
+    farmAddress: '江苏盐城',
+    client: '金风科技股份有限公司',
+    projectManagerId: '2',
+    projectManagerName: '周北北',
+    startDate: '2024-09-01',
+    endDate: '2024-09-30',
+    status: 7, // 已结算
+    progress: 100
   }
 ])
 
-// 项目表格列配置
-const projectColumns: TableColumnData[] = [
-  { title: '项目名称', dataIndex: 'name', width: 200 },
-  { title: '机组数量', dataIndex: 'turbineCount', width: 100 },
-  { title: '开始日期', dataIndex: 'startDate', width: 120 },
-  { title: '结束日期', dataIndex: 'endDate', width: 120 },
-  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
-  { title: '进度', dataIndex: 'progress', slotName: 'progress', width: 150 },
-  { title: '操作', slotName: 'action', width: 150, fixed: 'right' }
-]
-
-// 图表数据
-const chartData = [
+// 模拟任务数据
+const projectTasks = ref([
   {
-    name: 'D风场',
-    notStarted: 400,
-    inProgress: 0,
-    completed: 0
+    id: '1',
+    name: '1 需求分析',
+    description: '项目需求分析和规划',
+    assignee: '黄泡泡',
+    startDate: '2025-01-10',
+    endDate: '2025-01-22',
+    naturalDays: 35,
+    progress: 33,
+    workDays: 9,
+    isSubTask: false
   },
   {
-    name: 'C风场',
-    notStarted: 0,
-    inProgress: 0,
-    completed: 200
+    id: '1.1',
+    name: '1.1 【用户反馈分析】',
+    description: '收集和分析用户反馈',
+    assignee: '黄泡泡',
+    startDate: '2025-01-10',
+    endDate: '2025-01-11',
+    naturalDays: 2,
+    progress: 100,
+    workDays: 1,
+    isSubTask: true
   },
   {
-    name: 'B风场',
-    notStarted: 0,
-    inProgress: 180,
-    completed: 120
+    id: '1.2',
+    name: '1.2 【用户调研访谈】',
+    description: '进行用户调研和访谈',
+    assignee: '周北北',
+    startDate: '2025-01-11',
+    endDate: '2025-01-12',
+    naturalDays: 2,
+    progress: 60,
+    workDays: 0,
+    isSubTask: true
   },
   {
-    name: 'A风场',
-    notStarted: 0,
-    inProgress: 80,
-    completed: 320
+    id: '1.3',
+    name: '1.3 【竞品体验分析】',
+    description: '分析竞品功能和体验',
+    assignee: '周北北',
+    startDate: '2025-01-12',
+    endDate: '2025-01-15',
+    naturalDays: 4,
+    progress: 50,
+    workDays: 3,
+    isSubTask: true
+  },
+  {
+    id: '1.4',
+    name: '1.4 【功能数据分析】',
+    description: '分析功能需求数据',
+    assignee: '王小铭',
+    startDate: '2025-01-13',
+    endDate: '2025-01-17',
+    naturalDays: 5,
+    progress: 75,
+    workDays: 5,
+    isSubTask: true
+  },
+  {
+    id: '1.5',
+    name: '1.5 【需求目标制定】',
+    description: '制定项目需求目标',
+    assignee: '周北北',
+    startDate: '2025-01-14',
+    endDate: '2025-01-21',
+    naturalDays: 8,
+    progress: 10,
+    workDays: 6,
+    isSubTask: true
+  },
+  {
+    id: '1.6',
+    name: '1.6 【任务xxx】',
+    description: '待定任务内容',
+    assignee: '王小铭',
+    startDate: '2025-01-15',
+    endDate: '2025-01-21',
+    naturalDays: 7,
+    progress: 30,
+    workDays: 5,
+    isSubTask: true
+  },
+  {
+    id: '1.7',
+    name: '1.7 【任务xxx】',
+    description: '待定任务内容',
+    assignee: '黄泡泡',
+    startDate: '2025-01-16',
+    endDate: '2025-01-22',
+    naturalDays: 7,
+    progress: 0,
+    workDays: 5,
+    isSubTask: true
+  },
+  {
+    id: '2',
+    name: '2 产品设计',
+    description: '产品设计和原型制作',
+    assignee: '周北北',
+    startDate: '2025-01-18',
+    endDate: '2025-01-26',
+    naturalDays: 19,
+    progress: 0,
+    workDays: 6,
+    isSubTask: false
+  },
+  {
+    id: '2.1',
+    name: '2.1 【需求战略层和范围层评审】',
+    description: '评审需求战略和范围',
+    assignee: '周北北',
+    startDate: '2025-01-18',
+    endDate: '2025-01-21',
+    naturalDays: 4,
+    progress: 0,
+    workDays: 2,
+    isSubTask: true
   }
-]
+])
 
-// 使用图表hook
-const { chartOption: barChartOption } = useChart(() => {
-  return {
-    tooltip: {
-      trigger: 'axis',
-      axisPointer: {
-        type: 'shadow'
-      }
-    },
-    legend: {
-      show: false
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
-    },
-    xAxis: {
-      type: 'value',
-      max: 400,
-      axisLabel: {
-        formatter: '{value}'
-      }
-    },
-    yAxis: {
-      type: 'category',
-      data: chartData.map(item => item.name),
-      axisLabel: {
-        fontSize: 12
-      }
-    },
-    series: [
-      {
-        name: '已完成',
-        type: 'bar',
-        stack: 'total',
-        itemStyle: {
-          color: '#52c41a'
-        },
-        data: chartData.map(item => item.completed),
-        label: {
-          show: true,
-          position: 'inside',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
-        }
-      },
-      {
-        name: '进行中',
-        type: 'bar',
-        stack: 'total',
-        itemStyle: {
-          color: '#1890ff'
-        },
-        data: chartData.map(item => item.inProgress),
-        label: {
-          show: true,
-          position: 'inside',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
-        }
-      },
-      {
-        name: '未开始',
-        type: 'bar',
-        stack: 'total',
-        itemStyle: {
-          color: '#8c8c8c'
-        },
-        data: chartData.map(item => item.notStarted),
-        label: {
-          show: true,
-          position: 'inside',
-          formatter: (params: any) => {
-            return params.value > 0 ? params.value : ''
-          }
-        }
-      }
-    ]
+// 项目经理列表
+const projectManagers = ref([
+  { id: '1', name: '黄泡泡' },
+  { id: '2', name: '周北北' },
+  { id: '3', name: '王小铭' }
+])
+
+// 可用周数
+const availableWeeks = ref([
+  { value: 'week1', label: '第1周' },
+  { value: 'week2', label: '第2周' },
+  { value: 'week3', label: '第3周' },
+  { value: 'week4', label: '第4周' }
+])
+
+// 时间轴周数 - 简化版本
+const timelineWeeks = computed(() => {
+  try {
+  const weeks = []
+    const startDate = new Date('2025-01-06')
+  
+  for (let i = 0; i < 4; i++) {
+      const weekStart = dayjs.add(startDate, i * 7, 'day')
+    const days = []
+    
+    for (let j = 0; j < 7; j++) {
+        const currentDate = dayjs.add(weekStart, j, 'day')
+        const dayNumber = currentDate.getDate()
+        const weekday = ['日', '一', '二', '三', '四', '五', '六'][currentDate.getDay()]
+        const isWeekend = currentDate.getDay() === 0 || currentDate.getDay() === 6
+        const isToday = dayjs.isSame(currentDate, new Date(), 'day')
+      
+      days.push({
+          date: dayjs.format(currentDate, 'YYYY-MM-DD'),
+        dayNumber,
+        weekday,
+        isWeekend,
+        isToday
+      })
+    }
+    
+    weeks.push({
+      value: `week${i + 1}`,
+      label: `第${i + 1}周`,
+      days
+    })
+  }
+  
+  return weeks
+  } catch (error) {
+    console.error('计算时间轴出错:', error)
+    return []
   }
 })
 
-// 获取状态颜色
-const getStatusColor = (status: string) => {
-  const colorMap: Record<string, string> = {
-    '进行中': 'blue',
-    '已完成': 'green',
-    '未开始': 'gray',
-    '已暂停': 'orange'
+// 计算属性
+const getProjectCountByStatus = (status: string) => {
+  try {
+  return projects.value.filter(p => getStatusKey(p.status) === status).length
+  } catch (error) {
+    console.error('计算项目数量出错:', error)
+    return 0
   }
-  return colorMap[status] || 'gray'
 }
 
-// 获取进度颜色
+const getProjectsByStatus = (status: string) => {
+  try {
+  return projects.value.filter(p => getStatusKey(p.status) === status)
+  } catch (error) {
+    console.error('筛选项目出错:', error)
+    return []
+  }
+}
+
+const getTotalWorkload = () => {
+  try {
+  if (!selectedProject.value) return 0
+  return projectTasks.value
+    .filter(task => !task.isSubTask)
+    .reduce((total, task) => total + (task.workDays || 0), 0)
+  } catch (error) {
+    console.error('计算工作量出错:', error)
+    return 0
+  }
+}
+
+// 方法
+const getStatusKey = (status: number) => {
+  const statusMap: Record<number, string> = {
+    0: 'pending',      // 未开工
+    1: 'preparing',    // 筹备中
+    2: 'inProgress',   // 开工中
+    3: 'suspended',    // 暂停中
+    4: 'completed',    // 已完工
+    5: 'acceptance',   // 验收中
+    6: 'collection',   // 回款中
+    7: 'settled'       // 已结算
+  }
+  return statusMap[status] || 'pending'
+}
+
+const getStatusText = (status: number) => {
+  const statusMap: Record<number, string> = {
+    0: '未开工',
+    1: '筹备中',
+    2: '开工中',
+    3: '暂停中',
+    4: '已完工',
+    5: '验收中',
+    6: '回款中',
+    7: '已结算'
+  }
+  return statusMap[status] || '未知'
+}
+
+const getStatusColor = (status: number) => {
+  const statusMap: Record<number, string> = {
+    0: '#ff4d4f',  // 未开工 - 红色
+    1: '#faad14',  // 筹备中 - 橙色
+    2: '#1890ff',  // 开工中 - 蓝色
+    3: '#722ed1',  // 暂停中 - 紫色
+    4: '#52c41a',  // 已完工 - 绿色
+    5: '#13c2c2',  // 验收中 - 青色
+    6: '#eb2f96',  // 回款中 - 粉色
+    7: '#52c41a'   // 已结算 - 绿色
+  }
+  return statusMap[status] || '#d9d9d9'
+}
+
 const getProgressColor = (progress: number) => {
   if (progress >= 80) return '#52c41a'
-  if (progress >= 60) return '#1890ff'
-  if (progress >= 40) return '#faad14'
+  if (progress >= 50) return '#1890ff'
+  if (progress >= 20) return '#faad14'
   return '#ff4d4f'
 }
 
-// 操作方法
-const viewProject = (record: any) => {
-  Message.info(`查看项目: ${record.name}`)
+const formatDate = (date: string | undefined) => {
+  if (!date) return ''
+  try {
+    return dayjs.format(new Date(date), 'YYYY/M/D dddd')
+  } catch (error) {
+    console.error('格式化日期出错:', error)
+    return date || ''
+  }
 }
 
-const enterProject = (record: any) => {
-  Message.info(`进入项目: ${record.name}`)
+const formatShortDate = (date: string | undefined) => {
+  if (!date) return ''
+  try {
+    return dayjs.format(new Date(date), 'YYYY/M/D')
+  } catch (error) {
+    console.error('格式化短日期出错:', error)
+    return date || ''
+  }
 }
 
-// 加载图表数据
-const loadChartData = async () => {
-  chartLoading.value = true
-  setTimeout(() => {
-    chartLoading.value = false
-  }, 1000)
+const selectProject = (project: ProjectResp) => {
+  selectedProject.value = project
+  selectedManager.value = project.projectManagerId || ''
+  Message.success(`已选择项目: ${project.projectName}`)
 }
 
+const handleManagerChange = (value: string) => {
+  Message.info(`切换到负责人: ${value}`)
+}
+
+const handleWeekChange = (value: string) => {
+  Message.info(`切换到: ${value}`)
+}
+
+const refreshProjectData = () => {
+  Message.info('刷新项目数据')
+}
+
+const isTaskActiveOnDay = (task: any, date: string) => {
+  try {
+    const taskStart = new Date(task.startDate)
+    const taskEnd = new Date(task.endDate)
+    const currentDate = new Date(date)
+    return dayjs.isBetween(currentDate, taskStart, taskEnd, 'day', '[]')
+  } catch (error) {
+    console.error('检查任务活跃状态出错:', error)
+    return false
+  }
+}
+
+const isTaskCompletedOnDay = (task: any, date: string) => {
+  try {
+  if (task.progress >= 100) return true
+  
+    const taskStart = new Date(task.startDate)
+    const taskEnd = new Date(task.endDate)
+    const currentDate = new Date(date)
+    
+    if (!dayjs.isBetween(currentDate, taskStart, taskEnd, 'day', '[]')) return false
+    
+    const totalDays = dayjs.diff(taskEnd, taskStart, 'day') + 1
+  const completedDays = Math.floor((task.progress / 100) * totalDays)
+    const daysFromStart = dayjs.diff(currentDate, taskStart, 'day') + 1
+  
+  return daysFromStart <= completedDays
+  } catch (error) {
+    console.error('检查任务完成状态出错:', error)
+    return false
+  }
+}
+
+const getTaskBarStyle = (task: any, date: string) => {
+  try {
+    const taskStart = new Date(task.startDate)
+    const currentDate = new Date(date)
+    const daysFromStart = dayjs.diff(currentDate, taskStart, 'day')
+  
+  return {
+    left: `${daysFromStart * 40}px`,
+    width: '40px'
+    }
+  } catch (error) {
+    console.error('计算任务条样式出错:', error)
+    return { left: '0px', width: '40px' }
+  }
+}
+
+// 生命周期
 onMounted(() => {
-  loadChartData()
+  try {
+    console.log('项目管理甘特图页面加载中...')
+    
+    // 检查必要的数据
+    console.log('项目数据:', projects.value)
+    console.log('任务数据:', projectTasks.value)
+    
+  // 默认选择第一个项目
+  if (projects.value.length > 0) {
+    selectProject(projects.value[0])
+      console.log('已选择默认项目:', projects.value[0])
+    } else {
+      console.warn('没有可用的项目数据')
+    }
+    
+    console.log('页面加载完成')
+  } catch (error) {
+    console.error('页面加载出错:', error)
+  }
 })
 </script>
 
-<style scoped lang="less">
+<style scoped lang="scss">
 .project-progress-container {
-  padding: 16px;
-  background: #f5f5f5;
-  min-height: 100vh;
+  display: flex;
+  height: 100vh;
+  background-color: #f5f5f5;
 }
 
-.statistics-section {
-  margin-bottom: 16px;
-}
-
-.stat-card {
-  text-align: center;
+.sidebar {
+  width: 320px;
+  background-color: #fff;
+  border-right: 1px solid #e8e8e8;
+  overflow-y: auto;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.06);
   
-  :deep(.arco-statistic-title) {
-    color: #8c8c8c;
-    font-size: 14px;
-    margin-bottom: 8px;
-  }
-  
-  :deep(.arco-statistic-value) {
-    color: #262626;
-    font-size: 24px;
-    font-weight: 500;
-  }
-}
-
-.tabs-section {
-  background: #fff;
-  border-radius: 8px;
-  padding: 16px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.progress-content {
-  margin-top: 16px;
-}
-
-.chart-card {
-  margin-bottom: 16px;
-  border-radius: 8px;
-  
-  .chart-header {
-    display: flex;
-    justify-content: flex-end;
-    margin-bottom: 16px;
-  }
-  
-  .chart-legend {
-    display: flex;
-    gap: 24px;
+  .sidebar-header {
+    padding: 16px;
+    border-bottom: 1px solid #e8e8e8;
+    background-color: #fafafa;
     
-    .legend-item {
+    h3 {
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      color: #1d2129;
+    }
+
+    .total-count {
+      font-size: 12px;
+      color: #86909c;
+      margin-top: 4px;
+    }
+  }
+  
+  .sidebar-content {
+    padding: 16px;
+  }
+  
+  .status-group {
+    margin-bottom: 24px;
+    
+    .status-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      font-weight: 600;
+      color: #1d2129;
+      padding: 8px 12px;
+      background-color: #f7f8fa;
+      border-radius: 6px;
+      
+      .status-color {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+        margin-right: 8px;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+      
+      .status-count {
+        margin-left: auto;
+        font-size: 12px;
+        color: #86909c;
+        font-weight: normal;
+        background-color: #fff;
+        padding: 2px 8px;
+        border-radius: 10px;
+        border: 1px solid #e8e8e8;
+      }
+    }
+    
+    .project-list {
+      .project-item {
+        padding: 12px;
+        margin-bottom: 8px;
+        background-color: #f7f8fa;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: 1px solid transparent;
+        
+        &:hover {
+          background-color: #e8f3ff;
+          border-color: #91d5ff;
+          transform: translateY(-1px);
+          box-shadow: 0 2px 8px rgba(24, 144, 255, 0.15);
+        }
+        
+        &.active {
+          background-color: #e6f4ff;
+          border: 1px solid #1890ff;
+          box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
+        }
+        
+        .project-info {
+          .project-name {
+            font-weight: 600;
+            color: #1d2129;
+            margin-bottom: 4px;
+            font-size: 14px;
+            line-height: 1.4;
+          }
+          
+          .project-code {
+            font-size: 12px;
+            color: #86909c;
+            margin-bottom: 4px;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+          }
+          
+          .project-manager {
+            font-size: 12px;
+            color: #86909c;
+            margin-bottom: 8px;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+          }
+          
+          .project-progress {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-bottom: 8px;
+            
+            .progress-text {
+              font-size: 12px;
+              color: #86909c;
+              min-width: 30px;
+              font-weight: 500;
+            }
+          }
+
+          .project-dates {
+            display: flex;
+            gap: 12px;
+            margin-top: 8px;
+            font-size: 12px;
+            color: #86909c;
+
+            .date-item {
+              display: flex;
+              align-items: center;
+              gap: 4px;
+            }
+          }
+        }
+      }
+    }
+
+    .empty-status {
+      padding: 12px;
+      text-align: center;
+      color: #86909c;
+      font-size: 14px;
+      background-color: #f7f8fa;
+      border-radius: 6px;
+      border: 1px dashed #d9d9d9;
+    }
+  }
+}
+
+.main-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 24px;
+}
+
+.project-header {
+  background-color: #fff;
+  border-radius: 8px;
+  padding: 24px;
+  margin-bottom: 24px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  
+  .project-title {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    margin-bottom: 20px;
+    
+    h2 {
+      margin: 0;
+      font-size: 24px;
+      font-weight: 600;
+      color: #1d2129;
+    }
+
+    .project-tags {
+      display: flex;
+      gap: 8px;
+    }
+  }
+  
+  .project-meta {
+    display: flex;
+    gap: 32px;
+    margin-bottom: 20px;
+    flex-wrap: wrap;
+    
+    .meta-item {
       display: flex;
       align-items: center;
       gap: 8px;
+      min-width: 200px;
       
-      .legend-dot {
-        width: 12px;
-        height: 12px;
-        border-radius: 2px;
-        
-        &.completed {
-          background-color: #52c41a;
-        }
-        
-        &.in-progress {
-          background-color: #1890ff;
-        }
-        
-        &.not-started {
-          background-color: #8c8c8c;
-        }
+      .label {
+        color: #86909c;
+        font-size: 14px;
+        white-space: nowrap;
       }
       
-      .legend-text {
-        font-size: 14px;
-        color: #595959;
+      .value {
+        color: #1d2129;
+        font-weight: 500;
       }
     }
   }
   
-  .chart-container {
-    height: 300px;
+  .project-controls {
+    display: flex;
+    gap: 16px;
+    margin-bottom: 20px;
+    align-items: center;
   }
-}
-
-.table-card {
-  border-radius: 8px;
   
-  .table-title {
-    font-size: 16px;
-    font-weight: 500;
-    color: #262626;
+  .project-features {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+    
+    .feature-text {
+      font-size: 12px;
+      color: #86909c;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 8px;
+      background-color: #f7f8fa;
+      border-radius: 4px;
+    }
+  }
+  
+  .project-legend {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 16px;
+    flex-wrap: wrap;
+    
+    .legend-item {
+      font-size: 12px;
+      color: #86909c;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 8px;
+      background-color: #f7f8fa;
+      border-radius: 4px;
+
+      .legend-color {
+        width: 12px;
+        height: 12px;
+        border-radius: 50%;
+      }
+
+      .task-color {
+        background-color: #d9d9d9;
+      }
+
+      .editable-color {
+        background-color: #f6ffed;
+      }
+    }
+  }
+  
+  .timeline-status {
+    display: flex;
+    gap: 12px;
   }
 }
 
-.progress-container {
+.gantt-container {
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  
+  .gantt-header {
+    display: flex;
+    border-bottom: 1px solid #e8e8e8;
+    
+    .task-info-header {
+      display: flex;
+      min-width: 800px;
+      background-color: #fafafa;
+      
+      .header-cell {
+        padding: 12px 8px;
+        border-right: 1px solid #e8e8e8;
+        font-size: 12px;
+        font-weight: 600;
+        color: #1d2129;
+        text-align: center;
+        min-width: 100px;
+        
+        &:first-child {
+          min-width: 80px;
+        }
+        
+        &:nth-child(2) {
+          min-width: 150px;
+        }
+        
+        &:nth-child(3) {
+          min-width: 100px;
+        }
+        
+        &:nth-child(4),
+        &:nth-child(5) {
+          min-width: 120px;
+        }
+        
+        &:nth-child(6),
+        &:nth-child(7),
+        &:nth-child(8) {
+          min-width: 80px;
+        }
+      }
+    }
+    
+    .timeline-header {
+      display: flex;
+      flex: 1;
+      background-color: #fafafa;
+      
+      .week-header {
+        border-right: 1px solid #e8e8e8;
+        
+        .week-title {
+          padding: 8px;
+          text-align: center;
+          font-size: 12px;
+          font-weight: 600;
+          color: #1d2129;
+          background-color: #f0f0f0;
+          border-bottom: 1px solid #e8e8e8;
+        }
+        
+        .days-header {
+          display: flex;
+          
+          .day-header {
+            width: 40px;
+            padding: 4px;
+            text-align: center;
+            border-right: 1px solid #f0f0f0;
+            border-bottom: 1px solid #e8e8e8;
+            
+            &.weekend {
+              background-color: #fff7e6;
+            }
+            
+            &.today {
+              background-color: #ff4d4f;
+              color: #fff;
+            }
+            
+            .day-number {
+              font-size: 12px;
+              font-weight: 600;
+            }
+            
+            .day-weekday {
+              font-size: 10px;
+              color: #86909c;
+            }
+          }
+        }
+      }
+    }
+  }
+  
+  .gantt-body {
+    .task-row {
+      display: flex;
+      border-bottom: 1px solid #f0f0f0;
+      
+      &.sub-task {
+        background-color: #fff;
+      }
+      
+      &:not(.sub-task) {
+        background-color: #f7f8fa;
+      }
+      
+      .task-info {
+        display: flex;
+        min-width: 800px;
+        
+        .task-cell {
+          padding: 12px 8px;
+          border-right: 1px solid #e8e8e8;
+          font-size: 12px;
+          color: #1d2129;
+          text-align: center;
+          min-width: 100px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          
+          &:first-child {
+            min-width: 80px;
+            font-weight: 600;
+          }
+          
+          &:nth-child(2) {
+            min-width: 150px;
+            text-align: left;
+            justify-content: flex-start;
+          }
+          
+          &:nth-child(3) {
+            min-width: 100px;
+          }
+          
+          &:nth-child(4),
+          &:nth-child(5) {
+            min-width: 120px;
+          }
+          
+          &:nth-child(6),
+          &:nth-child(7),
+          &:nth-child(8) {
+            min-width: 80px;
+          }
+          
+          &.editable {
+            background-color: #f6ffed;
+            border: 1px solid #b7eb8f;
+          }
+          
+          &.calculated {
+            background-color: #f5f5f5;
+            color: #666;
+          }
+          
+          .progress-bar {
+            width: 100%;
+            height: 8px;
+            background-color: #f0f0f0;
+            border-radius: 4px;
+            overflow: hidden;
+            margin-right: 8px;
+            
+            .progress-fill {
+              height: 100%;
+              background-color: #52c41a;
+              transition: width 0.3s ease;
+            }
+          }
+        }
+      }
+      
+      .task-timeline {
+        display: flex;
+        flex: 1;
+        position: relative;
+        
+        .week-timeline {
+          border-right: 1px solid #f0f0f0;
+          
+          .days-timeline {
+            display: flex;
+            
+            .day-timeline {
+              width: 40px;
+              height: 60px;
+              border-right: 1px solid #f0f0f0;
+              border-bottom: 1px solid #f0f0f0;
+              position: relative;
+              
+              &.weekend {
+                background-color: #fff7e6;
+              }
+              
+              &.today {
+                background-color: #ff4d4f;
+              }
+              
+              .task-bar {
+                position: absolute;
+                top: 50%;
+                transform: translateY(-50%);
+                height: 20px;
+                border-radius: 2px;
+                
+                &.completed {
+                  background-color: #d9d9d9;
+                }
+                
+                &.pending {
+                  background-color: #1890ff;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.no-project-selected {
   display: flex;
   align-items: center;
-  gap: 8px;
-  width: 100%;
+  justify-content: center;
+  height: 400px;
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  text-align: center;
   
-  .progress-text {
-    font-size: 12px;
-    color: #8c8c8c;
-    min-width: 35px;
+  p {
+    margin: 8px 0;
+    color: #86909c;
   }
 }
 
-.tasks-content,
-.notifications-content {
-  padding: 40px;
-  text-align: center;
+// 响应式设计
+@media (max-width: 1200px) {
+  .sidebar {
+    width: 280px;
+  }
+  
+  .gantt-container {
+    .gantt-header {
+      .task-info-header {
+        min-width: 600px;
+        
+        .header-cell {
+          min-width: 80px;
+          font-size: 11px;
+          padding: 8px 4px;
+        }
+      }
+    }
+    
+    .gantt-body {
+      .task-row {
+        .task-info {
+          min-width: 600px;
+          
+          .task-cell {
+            min-width: 80px;
+            font-size: 11px;
+            padding: 8px 4px;
+          }
+        }
+      }
+    }
+  }
 }
 
-:deep(.arco-card) {
-  border: none;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+@media (max-width: 768px) {
+  .project-progress-container {
+    flex-direction: column;
+  }
+  
+  .sidebar {
+    width: 100%;
+    height: auto;
+    max-height: 300px;
+  }
+  
+  .main-content {
+    padding: 16px;
+  }
+  
+  .project-header {
+    padding: 16px;
+    
+    .project-meta {
+      gap: 16px;
+      
+      .meta-item {
+        min-width: 150px;
+      }
+    }
+  }
 }
-
-:deep(.arco-card-body) {
-  padding: 20px;
-}
-
-:deep(.arco-tabs-nav) {
-  margin-bottom: 0;
-}
-
-:deep(.arco-tabs-tab) {
-  font-size: 14px;
-  padding: 8px 16px;
-}
-
-:deep(.arco-table-th) {
-  background-color: #fafafa;
-  color: #8c8c8c;
-  font-weight: 500;
-}
-
-:deep(.arco-table-td) {
-  padding: 12px 16px;
-}
-
-:deep(.arco-progress-line) {
-  flex: 1;
-}
-
-:deep(.arco-tag) {
-  border-radius: 4px;
-  font-size: 12px;
-}
-
-:deep(.arco-btn-size-small) {
-  padding: 2px 8px;
-  font-size: 12px;
-}
-</style> 
\ No newline at end of file
+</style>