diff --git a/src/components/NotificationCenter/index.vue b/src/components/NotificationCenter/index.vue
index 7230f61..2530742 100644
--- a/src/components/NotificationCenter/index.vue
+++ b/src/components/NotificationCenter/index.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="notification-center">
-    <!-- 聊天信息图标 -->
+    <!-- 1. 触发按钮 -->
     <div class="notification-trigger">
-      <a-button type="text" class="notification-btn" title="聊天信息">
+      <a-button type="text" class="notification-btn" title="聊天信息" @click="openChat">
         <template #icon>
           <IconNotification />
         </template>
@@ -10,684 +10,68 @@
       </a-button>
     </div>
 
-    <!-- 消息中心弹窗 -->
-    <a-modal
-      v-model:visible="modalVisible"
-      title="消息中心"
-      width="800px"
-      :footer="false"
-      :mask-closable="true"
-      :closable="true"
-      :destroy-on-close="false"
-      :z-index="1000"
-      class="notification-modal"
-    >
-      <!-- 消息中心头部 -->
-      <div class="notification-header">
-        <div class="header-left">
-          <h3>消息中心</h3>
-          <span class="notification-count">{{ unreadCount }} 条未读</span>
-        </div>
-        <div class="header-right">
-          <a-button type="text" size="small" @click="markAllAsRead">
-            全部已读
-          </a-button>
-          <a-button type="text" size="small" @click="clearRead">
-            清空已读
-          </a-button>
-        </div>
-      </div>
-
-      <!-- 消息类型标签 -->
-      <div class="notification-tabs">
-        <a-tabs v-model:active-key="activeTab" size="small">
-          <a-tab-pane key="all" title="全部">
-            <template #title>
-              <span>全部 ({{ totalCount }})</span>
-            </template>
-          </a-tab-pane>
-          <a-tab-pane key="pending" title="待审批">
-            <template #title>
-              <span>待审批 ({{ pendingCount }})</span>
-            </template>
-          </a-tab-pane>
-          <a-tab-pane key="equipment" title="设备">
-            <template #title>
-              <span>设备 ({{ equipmentCount }})</span>
-            </template>
-          </a-tab-pane>
-          <a-tab-pane key="urgent" title="紧急">
-            <template #title>
-              <span>紧急 ({{ urgentCount }})</span>
-            </template>
-          </a-tab-pane>
-        </a-tabs>
-      </div>
-
-      <!-- 消息列表 -->
-      <div class="notification-list">
-        <div v-if="filteredNotifications.length === 0" class="empty-state">
-          <IconInfo style="font-size: 48px; color: #d9d9d9; margin-bottom: 16px;" />
-          <p>暂无消息</p>
-        </div>
-        
-        <div
-          v-for="notification in filteredNotifications"
-          :key="notification.id"
-          class="notification-item"
-          :class="{
-            'unread': !notification.read,
-            'urgent': notification.priority === 'URGENT',
-            'high': notification.priority === 'HIGH'
-          }"
-          @click="handleNotificationClick(notification)"
-        >
-          <!-- 消息图标 -->
-          <div class="notification-icon">
-            <component :is="getNotificationIcon(notification.type)" />
-          </div>
-          
-          <!-- 消息内容 -->
-          <div class="notification-content">
-            <div class="notification-title">
-              {{ notification.title }}
-              <a-tag 
-                v-if="notification.actionRequired" 
-                size="small" 
-                color="red"
-              >
-                需操作
-              </a-tag>
-              <a-tag 
-                v-if="notification.reminderType" 
-                size="small" 
-                color="blue"
-              >
-                {{ getReminderTypeText(notification.reminderType) }}
-              </a-tag>
-            </div>
-            <div class="notification-message">{{ notification.content }}</div>
-            <div class="notification-meta">
-              <span class="notification-time">{{ formatTime(notification.createTime) }}</span>
-              <span class="notification-category">{{ notification.category }}</span>
-              <span v-if="notification.source" class="notification-source">{{ notification.source }}</span>
-            </div>
-          </div>
-          
-          <!-- 消息操作 -->
-          <div class="notification-actions">
-            <a-button 
-              type="text" 
-              size="small" 
-              @click.stop="toggleReminder(notification)"
-              :title="notification.reminderTime ? '取消提醒' : '设置提醒'"
-            >
-              <IconClockCircle v-if="!notification.reminderTime" />
-              <IconClose v-else />
-            </a-button>
-            <a-button 
-              type="text" 
-              size="small" 
-              @click.stop="removeNotification(notification.id)"
-              title="删除消息"
-            >
-              <IconDelete />
-            </a-button>
-          </div>
-        </div>
-      </div>
-
-      <!-- 消息底部 -->
-      <div class="notification-footer">
-        <a-button type="text" size="small" @click="viewAllNotifications">
-          查看全部消息
-        </a-button>
-        <a-button type="text" size="small" @click="exportNotifications">
-          导出消息
-        </a-button>
-      </div>
-    </a-modal>
-
-    <!-- 提醒设置弹窗 -->
-    <a-modal
-      v-model:visible="reminderModalVisible"
-      title="设置消息提醒"
-      width="400px"
-      @ok="saveReminder"
-      @cancel="cancelReminder"
-    >
-      <a-form :model="reminderForm" layout="vertical">
-        <a-form-item label="提醒类型">
-          <a-radio-group v-model="reminderForm.type">
-            <a-radio value="IMMEDIATE">立即提醒</a-radio>
-            <a-radio value="DELAYED">延迟提醒</a-radio>
-            <a-radio value="RECURRING">重复提醒</a-radio>
-          </a-radio-group>
-        </a-form-item>
-        
-        <a-form-item v-if="reminderForm.type === 'DELAYED'" label="提醒时间">
-          <a-date-picker
-            v-model="reminderForm.time"
-            show-time
-            placeholder="选择提醒时间"
-            style="width: 100%"
-          />
-        </a-form-item>
-        
-        <a-form-item v-if="reminderForm.type === 'RECURRING'" label="重复间隔">
-          <a-input-number
-            v-model="reminderForm.interval"
-            :min="1"
-            :max="1440"
-            placeholder="间隔分钟"
-            style="width: 100%"
-          />
-        </a-form-item>
-      </a-form>
+    <!-- 2. 聊天平台弹窗 -->
+    <a-modal v-model:visible="chatVisible" title="聊天平台(注册验证码666666)" width=80% :footer="false" :mask-closable="true"
+      :destroy-on-close="false" @close="chatVisible = false">
+      <!-- 3. 嵌入 React 聊天平台 -->
+      <iframe ref="chatFrame" src="http://pms.dtyx.net:11001/" frameborder="0"
+        style="width: 100%; height: 600px; border: none;" allow="camera; microphone"></iframe>
     </a-modal>
   </div>
 </template>
 
+
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-import {
-  IconNotification,
-  IconInfo,
-  IconClockCircle,
-  IconClose,
-  IconDelete,
-  IconCheckCircle,
-  IconClockCircle as IconPending,
-  IconApps,
-  IconExclamationCircle,
-  IconExclamationCircle as IconWarning,
-  IconSettings
-} from '@arco-design/web-vue/es/icon'
-import message from '@arco-design/web-vue/es/message'
-import notificationService from '@/services/notificationService'
-import websocketService from '@/services/websocketService'
+import { ref, nextTick } from 'vue'
+import { IconNotification } from '@arco-design/web-vue/es/icon'
 
-defineOptions({ name: 'NotificationCenter' })
+const chatVisible = ref(false)
+const chatFrame = ref<HTMLIFrameElement>()
+const url = ref(import.meta.env.VITE_API_BASE_URL + ":11001")
+/* 打开聊天窗口 */
+function openChat() {
+  chatVisible.value = true
 
-const router = useRouter()
-
-// 响应式数据
-const modalVisible = ref(false)
-const activeTab = ref('all')
-const reminderModalVisible = ref(false)
-const currentNotification = ref<any>(null)
-
-// 提醒表单
-const reminderForm = ref({
-  type: 'IMMEDIATE' as 'IMMEDIATE' | 'DELAYED' | 'RECURRING',
-  time: null as Date | null,
-  interval: 30
-})
-
-// 计算属性
-const notifications = computed(() => notificationService.getAllNotifications())
-const unreadCount = computed(() => {
-  const count = notificationService.unreadCount.value
-  // 确保返回有效的数字，避免NaN
-  if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
-    return count
-  }
-  return 0
-})
-const totalCount = computed(() => notifications.value.length)
-const pendingCount = computed(() => {
-  const count = notificationService.pendingCount.value
-  if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
-    return count
-  }
-  return 0
-})
-const equipmentCount = computed(() => {
-  const borrowCount = notificationService.equipmentBorrowCount.value || 0
-  const returnCount = notificationService.equipmentReturnCount.value || 0
-  const maintenanceCount = notificationService.equipmentMaintenanceCount.value || 0
-  const alertCount = notificationService.equipmentAlertCount.value || 0
-  
-  return borrowCount + returnCount + maintenanceCount + alertCount
-})
-const urgentCount = computed(() => {
-  const count = notificationService.urgentCount.value
-  if (typeof count === 'number' && !isNaN(count) && isFinite(count)) {
-    return count
-  }
-  return 0
-})
-const hasUrgentNotifications = computed(() => urgentCount.value > 0)
-
-// 过滤后的消息列表
-const filteredNotifications = computed(() => {
-  let filtered = notifications.value
-  
-  switch (activeTab.value) {
-    case 'pending':
-      filtered = filtered.filter(n => n.type === 'PENDING')
-      break
-    case 'equipment':
-      filtered = filtered.filter(n => 
-        ['EQUIPMENT_BORROW', 'EQUIPMENT_RETURN', 'EQUIPMENT_MAINTENANCE', 'EQUIPMENT_ALERT'].includes(n.type)
-      )
-      break
-    case 'urgent':
-      filtered = filtered.filter(n => n.priority === 'URGENT' || n.priority === 'HIGH')
-      break
-  }
-  
-  // 按优先级和时间排序
-  return filtered.sort((a, b) => {
-    const priorityOrder = { 'URGENT': 4, 'HIGH': 3, 'NORMAL': 2, 'LOW': 1 }
-    const aPriority = priorityOrder[a.priority || 'NORMAL'] || 2
-    const bPriority = priorityOrder[b.priority || 'NORMAL'] || 2
-    
-    if (aPriority !== bPriority) {
-      return bPriority - aPriority
-    }
-    
-    return new Date(b.createTime).getTime() - new Date(a.createTime).getTime()
-  }).slice(0, 20) // 只显示前20条
-})
-
-// 方法
-const toggleDropdown = () => {
-  console.log('打开消息中心弹窗')
-  modalVisible.value = true
+  // 如果 React 平台需要登录信息，可在 iframe 加载完成后 postMessage
+  // nextTick(() => {
+  //   // 确保 iframe 已挂载
+  //   if (chatFrame.value) {
+  //     chatFrame.value.onload = () => {
+  //       // 把当前登录用户信息发给 React
+  //       chatFrame.value?.contentWindow?.postMessage(
+  //         {
+  //           type: 'INIT_IM',
+  //           payload: {
+  //             userID: 'your-user-id',   // 换成真实 ID
+  //             token:  'your-token',     // 换成真实 token
+  //           },
+  //         },
+  //         '*'   // 生产环境可改成 React 平台的 origin
+  //       )
+  //     }
+  //   }
+  // })
 }
-
-const markAllAsRead = () => {
-  notificationService.markAllAsRead()
-  message.success('已标记所有消息为已读')
-}
-
-const clearRead = () => {
-  notificationService.clearRead()
-  message.success('已清空已读消息')
-}
-
-const handleNotificationClick = (notification: any) => {
-  console.log('点击消息:', notification)
-  
-  // 标记为已读
-  notificationService.markAsRead(notification.id)
-  
-  // 构建跳转路径
-  let targetUrl = notification.targetUrl
-  
-  // 如果没有targetUrl，根据消息类型和业务信息构建
-  if (!targetUrl) {
-    targetUrl = buildTargetUrl(notification)
-  }
-  
-  console.log('构建的目标URL:', targetUrl)
-  
-  // 如果有目标URL，跳转过去
-  if (targetUrl) {
-    try {
-      router.push(targetUrl)
-      modalVisible.value = false
-      message.success('正在跳转到相关页面...')
-    } catch (error) {
-      console.error('路由跳转失败:', error)
-      message.error('页面跳转失败，请手动导航')
-    }
-  } else {
-    console.warn('无法构建跳转路径，消息数据:', notification)
-    message.warning('该消息暂无相关操作页面')
-  }
-}
-
-// 根据消息类型构建跳转路径
-const buildTargetUrl = (notification: any): string | null => {
-  const { type, relatedId, metadata, category } = notification
-  
-  console.log('构建跳转路径，消息类型:', type, '相关ID:', relatedId, '元数据:', metadata)
-  
-  switch (type) {
-    case 'PROCUREMENT':
-    case 'PENDING':
-      // 设备采购申请 - 跳转到审批台
-      return '/asset-management/device-management/approval'
-      
-    case 'APPROVAL':
-      // 审批相关 - 跳转到审批台
-      return '/asset-management/device-management/approval'
-      
-    case 'EQUIPMENT_BORROW':
-      // 设备借用 - 跳转到设备中心
-      return '/asset-management/device-management/device-center'
-      
-    case 'EQUIPMENT_RETURN':
-      // 设备归还 - 跳转到设备中心
-      return '/asset-management/device-management/device-center'
-      
-    case 'EQUIPMENT_MAINTENANCE':
-      // 设备维护 - 跳转到设备中心
-      return '/asset-management/device-management/device-center'
-      
-    case 'EQUIPMENT_ALERT':
-      // 设备告警 - 跳转到设备中心
-      return '/asset-management/device-management/device-center'
-      
-    case 'WORKFLOW':
-      // 工作流 - 根据具体类型跳转
-      if (metadata?.workflowType === 'PROJECT') {
-        return '/project-management/project-template/project-aproval'
-      }
-      return '/asset-management/device-management/approval'
-      
-    case 'SYSTEM':
-      // 系统消息 - 通常不需要跳转
-      return null
-      
-    default:
-      // 默认跳转到审批台
-      return '/asset-management/device-management/approval'
-  }
-}
-
-const getNotificationIcon = (type: string) => {
-  const iconMap: Record<string, any> = {
-    'APPROVAL': IconCheckCircle,
-    'PENDING': IconPending,
-    'PROCUREMENT': IconApps,
-    'EQUIPMENT_BORROW': IconApps,
-    'EQUIPMENT_RETURN': IconApps,
-    'EQUIPMENT_MAINTENANCE': IconSettings,
-    'EQUIPMENT_ALERT': IconWarning,
-    'WORKFLOW': IconSettings,
-    'SYSTEM': IconExclamationCircle
-  }
-  return iconMap[type] || IconNotification
-}
-
-const getReminderTypeText = (type: string) => {
-  const typeMap: Record<string, string> = {
-    'IMMEDIATE': '立即',
-    'DELAYED': '延迟',
-    'RECURRING': '重复'
-  }
-  return typeMap[type] || type
-}
-
-const formatTime = (time: string) => {
-  const date = new Date(time)
-  const now = new Date()
-  const diff = now.getTime() - date.getTime()
-  
-  if (diff < 60000) return '刚刚'
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}分钟前`
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}小时前`
-  if (diff < 2592000000) return `${Math.floor(diff / 86400000)}天前`
-  
-  return date.toLocaleDateString()
-}
-
-const toggleReminder = (notification: any) => {
-  if (notification.reminderTime) {
-    // 取消提醒
-    notificationService.cancelNotificationReminder(notification.id)
-    message.success('已取消提醒')
-  } else {
-    // 设置提醒
-    currentNotification.value = notification
-    reminderModalVisible.value = true
-  }
-}
-
-const saveReminder = () => {
-  if (currentNotification.value) {
-    const reminderTime = reminderForm.value.type === 'DELAYED' && reminderForm.value.time
-      ? reminderForm.value.time.toISOString()
-      : new Date().toISOString()
-    
-    notificationService.setNotificationReminder(
-      currentNotification.value.id,
-      reminderTime,
-      reminderForm.value.type as any,
-      reminderForm.value.type === 'RECURRING' ? reminderForm.value.interval : undefined
-    )
-    
-    message.success('提醒设置成功')
-    reminderModalVisible.value = false
-    resetReminderForm()
-  }
-}
-
-const cancelReminder = () => {
-  reminderModalVisible.value = false
-  resetReminderForm()
-}
-
-const resetReminderForm = () => {
-  reminderForm.value = {
-    type: 'IMMEDIATE',
-    time: null,
-    interval: 30
-  }
-  currentNotification.value = null
-}
-
-const removeNotification = (id: string) => {
-  notificationService.removeNotification(id)
-  message.success('消息已删除')
-}
-
-const viewAllNotifications = () => {
-  router.push('/notifications')
-  modalVisible.value = false
-}
-
-const exportNotifications = () => {
-  notificationService.exportNotifications()
-  message.success('消息导出成功')
-}
-
-// 监听WebSocket事件
-const setupWebSocketListeners = () => {
-  console.log('设置WebSocket监听器')
-  
-  // 监听新消息
-  websocketService.on('message', (message) => {
-    console.log('收到WebSocket消息:', message)
-    
-    // 如果消息包含通知信息，添加到通知服务
-    if (message.data && message.data.notification) {
-      console.log('处理通知消息:', message.data.notification)
-      notificationService.addNotification({
-        type: message.data.notification.type || 'SYSTEM',
-        title: message.data.notification.title || '新通知',
-        content: message.data.notification.content || '',
-        priority: message.data.notification.priority || 'NORMAL',
-        category: message.data.notification.category || '系统',
-        targetUrl: message.data.notification.targetUrl,
-        metadata: message.data.notification.metadata,
-        source: message.data.notification.source || 'WEBSOCKET'
-      })
-    }
-  })
-  
-  // 监听审批状态变更
-  websocketService.on('approvalStatusChanged', (data) => {
-    console.log('审批状态变更:', data)
-    
-    // 添加审批状态变更通知
-    if (data.type === 'SUBMITTED') {
-      notificationService.addNotification({
-        type: 'PENDING',
-        title: '新的审批申请',
-        content: `收到来自 ${data.applicantName || '申请人'} 的${data.businessType || '设备'}申请：${data.equipmentName || '未知设备'}`,
-        targetUrl: '/asset-management/device-management/approval',
-        priority: 'HIGH',
-        category: '审批申请',
-        actionRequired: true,
-        source: 'APPROVAL_SYSTEM',
-        metadata: {
-          approvalId: data.approvalId,
-          equipmentName: data.equipmentName,
-          applicantName: data.applicantName,
-          businessType: data.businessType,
-          timestamp: Date.now()
-        }
-      })
-    }
-  })
-  
-  // 监听设备状态变更
-  websocketService.on('equipmentStatusChanged', (data) => {
-    console.log('设备状态变更:', data)
-    
-    // 添加设备状态变更通知
-    notificationService.addNotification({
-      type: 'EQUIPMENT_ALERT',
-      title: '设备状态更新',
-      content: `设备"${data.equipmentName || '未知设备'}"状态已更新为：${data.newStatus}`,
-      targetUrl: '/asset-management/device-management/device-center',
-      priority: 'NORMAL',
-      category: '设备状态',
-      source: 'EQUIPMENT_SYSTEM',
-      metadata: {
-        equipmentId: data.equipmentId,
-        equipmentName: data.equipmentName,
-        oldStatus: data.oldStatus,
-        newStatus: data.newStatus,
-        timestamp: Date.now()
-      }
-    })
-  })
-  
-  // 监听采购状态变更
-  websocketService.on('procurementStatusChanged', (data) => {
-    console.log('采购状态变更:', data)
-    
-    if (data.type === 'SUBMITTED') {
-      notificationService.addNotification({
-        type: 'PROCUREMENT',
-        title: '新的采购申请',
-        content: `收到来自 ${data.applicantName || '申请人'} 的设备采购申请：${data.equipmentName || '未知设备'}`,
-        targetUrl: '/asset-management/device-management/approval',
-        priority: 'HIGH',
-        category: '设备采购',
-        actionRequired: true,
-        source: 'PROCUREMENT_SYSTEM',
-        metadata: {
-          procurementId: data.procurementId,
-          equipmentName: data.equipmentName,
-          applicantName: data.applicantName,
-          timestamp: Date.now()
-        }
-      })
-    }
-  })
-  
-  // 监听新审批申请
-  websocketService.on('newApprovalRequest', (data) => {
-    console.log('新审批申请:', data)
-    
-    notificationService.addNotification({
-      type: 'PENDING',
-      title: '新的审批申请',
-      content: `收到来自 ${data.applicantName || '申请人'} 的${data.businessType || '设备'}申请：${data.equipmentName || '未知设备'}`,
-      targetUrl: '/asset-management/device-management/approval',
-      priority: 'HIGH',
-      category: '审批申请',
-      actionRequired: true,
-      source: 'APPROVAL_SYSTEM',
-      metadata: {
-        approvalId: data.approvalId,
-        equipmentName: data.equipmentName,
-        applicantName: data.applicantName,
-        businessType: data.businessType,
-        timestamp: Date.now()
-      }
-    })
-  })
-  
-  // 监听WebSocket连接状态
-  websocketService.on('connected', () => {
-    console.log('WebSocket已连接')
-  })
-  
-  websocketService.on('disconnected', (data) => {
-    console.log('WebSocket已断开:', data)
-  })
-  
-  websocketService.on('error', (error) => {
-    console.error('WebSocket错误:', error)
-  })
-}
-
-// 清理WebSocket监听器
-const cleanupWebSocketListeners = () => {
-  console.log('清理WebSocket监听器')
-  
-  // 移除所有事件监听器
-  websocketService.off('message', () => {})
-  websocketService.off('approvalStatusChanged', () => {})
-  websocketService.off('equipmentStatusChanged', () => {})
-  websocketService.off('procurementStatusChanged', () => {})
-  websocketService.off('newApprovalRequest', () => {})
-  websocketService.off('connected', () => {})
-  websocketService.off('disconnected', () => {})
-  websocketService.off('error', () => {})
-}
-
-// 定期检查提醒
-let reminderCheckInterval: NodeJS.Timeout | null = null
-
-const startReminderCheck = () => {
-  reminderCheckInterval = setInterval(() => {
-    const reminderNotifications = notificationService.getReminderNotifications()
-    if (reminderNotifications.length > 0) {
-      // 显示提醒通知
-      reminderNotifications.forEach(notification => {
-        message.info(`${notification.title}: ${notification.content}`)
-        notificationService.markReminderProcessed(notification.id)
-      })
-    }
-  }, 60000) // 每分钟检查一次
-}
-
-// 生命周期
-onMounted(() => {
-  setupWebSocketListeners()
-  startReminderCheck()
-})
-
-onUnmounted(() => {
-  cleanupWebSocketListeners()
-  if (reminderCheckInterval) {
-    clearInterval(reminderCheckInterval)
-  }
-})
-
-// 暴露方法给父组件
-defineExpose({
-  toggleDropdown
-})
 </script>
 
 <style scoped lang="scss">
 .notification-center {
   position: relative;
   z-index: 1000;
-  
+
   .notification-trigger {
     cursor: pointer;
-    
+
     .notification-btn {
       color: var(--color-text-1);
       display: flex;
       align-items: center;
       gap: 4px;
-      
+
       &:hover {
         color: var(--color-primary);
       }
-      
+
       .notification-text {
         font-size: 14px;
         margin-left: 4px;
@@ -701,11 +85,11 @@ defineExpose({
   :deep(.arco-modal) {
     z-index: 1000 !important;
   }
-  
+
   :deep(.arco-modal-mask) {
     z-index: 999 !important;
   }
-  
+
   :deep(.arco-modal-wrapper) {
     z-index: 1000 !important;
   }
@@ -718,7 +102,7 @@ defineExpose({
   padding: 16px 0;
   border-bottom: 1px solid var(--color-border);
   margin-bottom: 16px;
-  
+
   .header-left {
     h3 {
       margin: 0 0 4px 0;
@@ -726,13 +110,13 @@ defineExpose({
       font-weight: 600;
       color: var(--color-text-1);
     }
-    
+
     .notification-count {
       font-size: 13px;
       color: var(--color-text-3);
     }
   }
-  
+
   .header-right {
     display: flex;
     gap: 8px;
@@ -741,7 +125,7 @@ defineExpose({
 
 .notification-tabs {
   margin-bottom: 16px;
-  
+
   :deep(.arco-tabs-nav) {
     margin-bottom: 0;
   }
@@ -750,13 +134,13 @@ defineExpose({
 .notification-list {
   max-height: 400px;
   overflow-y: auto;
-  
+
   .empty-state {
     text-align: center;
     padding: 40px 0;
     color: var(--color-text-3);
   }
-  
+
   .notification-item {
     display: flex;
     align-items: flex-start;
@@ -766,44 +150,44 @@ defineExpose({
     margin-bottom: 12px;
     cursor: pointer;
     transition: all 0.2s;
-    
+
     &:hover {
       background-color: var(--color-fill-2);
       border-color: var(--color-primary-light-3);
       transform: translateY(-1px);
       box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     }
-    
+
     &.unread {
       background-color: var(--color-primary-light-1);
       border-color: var(--color-primary-light-3);
-      
+
       &:hover {
         background-color: var(--color-primary-light-2);
       }
     }
-    
+
     &.urgent {
       border-left: 4px solid var(--color-danger);
       background-color: var(--color-danger-light-1);
     }
-    
+
     &.high {
       border-left: 4px solid var(--color-warning);
       background-color: var(--color-warning-light-1);
     }
-    
+
     .notification-icon {
       margin-right: 16px;
       margin-top: 2px;
       color: var(--color-text-2);
       font-size: 18px;
     }
-    
+
     .notification-content {
       flex: 1;
       min-width: 0;
-      
+
       .notification-title {
         font-weight: 600;
         margin-bottom: 8px;
@@ -813,34 +197,34 @@ defineExpose({
         color: var(--color-text-1);
         font-size: 15px;
       }
-      
+
       .notification-message {
         font-size: 14px;
         color: var(--color-text-2);
         margin-bottom: 12px;
         line-height: 1.5;
       }
-      
+
       .notification-meta {
         display: flex;
         gap: 16px;
         font-size: 12px;
         color: var(--color-text-3);
-        
+
         .notification-time {
           color: var(--color-text-2);
           font-weight: 500;
         }
       }
     }
-    
+
     .notification-actions {
       display: flex;
       gap: 8px;
       opacity: 0;
       transition: opacity 0.2s;
     }
-    
+
     &:hover .notification-actions {
       opacity: 1;
     }
diff --git a/src/views/project-management/contract/expense-contract/ContractDetail.vue b/src/views/project-management/contract/expense-contract/ContractDetail.vue
index 56f99f1..8ac7258 100644
--- a/src/views/project-management/contract/expense-contract/ContractDetail.vue
+++ b/src/views/project-management/contract/expense-contract/ContractDetail.vue
@@ -18,6 +18,10 @@
         <a-descriptions-item label="合同金额">
           <span class="font-medium text-green-600">￥{{ (contractDetail.amount || 0).toLocaleString() }}</span>
         </a-descriptions-item>
+        <a-descriptions-item label="合同类别">
+          {{ contractDetail.category || '-' }}
+        </a-descriptions-item>
+
         <a-descriptions-item label="已收款金额">
           <span class="font-medium text-blue-600">￥{{ (contractDetail.receivedAmount || 0).toLocaleString() }}</span>
         </a-descriptions-item>
@@ -74,6 +78,7 @@ interface ContractDetail {
   code: string
   projectId: string
   type: string
+  category?: string
   productService: string
   paymentDate: string | null
   performanceDeadline: string | null
diff --git a/src/views/project-management/contract/expense-contract/ContractEdit.vue b/src/views/project-management/contract/expense-contract/ContractEdit.vue
index 5908dcb..9f3daf5 100644
--- a/src/views/project-management/contract/expense-contract/ContractEdit.vue
+++ b/src/views/project-management/contract/expense-contract/ContractEdit.vue
@@ -46,6 +46,21 @@
       </a-col>
     </a-row>
 
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="category" label="合同类别">
+          <a-select v-model="contractData.category" placeholder="请选择合同类别" allow-clear>
+            <a-option value="框架协议">框架协议</a-option>
+            <a-option value="单次合同">单次合同</a-option>
+            <a-option value="三年长协">三年长协</a-option>
+            <a-option value="两年长协">两年长协</a-option>
+            <a-option value="派工单">派工单</a-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
+
     <a-row :gutter="16">
       <a-col :span="12">
         <a-form-item field="signDate" label="签订日期">
diff --git a/src/views/project-management/contract/expense-contract/index.vue b/src/views/project-management/contract/expense-contract/index.vue
index 3f2e5f0..1264f42 100644
--- a/src/views/project-management/contract/expense-contract/index.vue
+++ b/src/views/project-management/contract/expense-contract/index.vue
@@ -135,6 +135,7 @@ interface ContractItem {
   code: string
   projectId: string
   type: string
+  category?: string
   productService: string
   paymentDate: string | null
   performanceDeadline: string | null
@@ -165,6 +166,7 @@ const searchForm = reactive({
   contractCode: '',
   client: '',
   status: '',
+  category: '',
   signDateRange: [] as [string, string] | [],
   page: 1,
   size: 10,
@@ -196,6 +198,21 @@ const queryFormColumns = [
       ],
     },
   },
+  {
+    field: 'category',
+    label: '合同类别',
+    type: 'select' as const,
+    props: {
+      placeholder: '请选择合同类别',
+      options: [
+        { label: '框架协议', value: '框架协议' },
+        { label: '单次合同', value: '单次合同' },
+        { label: '三年长协', value: '三年长协' },
+        { label: '两年长协', value: '两年长协' },
+        { label: '派工单', value: '派工单' }
+      ]
+    }
+  },
   {
     field: 'signDateRange',
     label: '签署时间',
@@ -218,6 +235,7 @@ const tableColumns: TableColumnData[] = [
   { title: '签署日期', dataIndex: 'signDate', slotName: 'signDate', width: 120 },
   { title: '履约期限', dataIndex: 'performanceDeadline', slotName: 'performanceDeadline', width: 120 },
   { title: '付款日期', dataIndex: 'paymentDate', slotName: 'paymentDate', width: 120 },
+  { title: '合同类别', dataIndex: 'category', width: 120 },
   { title: '合同状态', dataIndex: 'contractStatus', slotName: 'status', width: 100 },
   { title: '销售人员', dataIndex: 'salespersonName', width: 100 },
   { title: '销售部门', dataIndex: 'salespersonDeptName', width: 100 },
@@ -239,6 +257,7 @@ const fetchContractList = async () => {
       code: searchForm.contractCode,
       customer: searchForm.client,
       contractStatus: searchForm.status,
+      category: (searchForm as any).category || undefined,
       signDateStart: Array.isArray(searchForm.signDateRange) && searchForm.signDateRange.length === 2 ? searchForm.signDateRange[0] : undefined,
       signDateEnd: Array.isArray(searchForm.signDateRange) && searchForm.signDateRange.length === 2 ? searchForm.signDateRange[1] : undefined,
     }
@@ -325,6 +344,8 @@ const reset = () => {
     status: '',
     signDateRange: [],
     page: 1,
+    category: '',
+
     size: 10,
   })
   pagination.current = 1
@@ -354,6 +375,7 @@ const newContractData = ref<ContractItem>({
   code: '',
   projectId: '',
   type: '支出合同',
+  category: '',
   productService: '',
   paymentDate: null,
   performanceDeadline: null,
@@ -387,6 +409,7 @@ const openAddModal = () => {
     code: '',
     projectId: '',
     type: '支出合同',
+    category: '',
     productService: '',
     paymentDate: null,
     performanceDeadline: null,
@@ -444,6 +467,7 @@ const handleAddSubmit = async () => {
       salespersonId: (newContractData.value as any).salespersonId || '',
       signDate: newContractData.value.signDate || null,
       type: newContractData.value.type || '支出合同',
+      category: newContractData.value.category || '',
     }
 
     // 如果没有合同ID则不传
@@ -535,6 +559,7 @@ const handleEditSubmit = async () => {
       productService: editedContractData.value.productService || '',
       projectId: editedContractData.value.projectId || '',
       salespersonId: editedContractData.value.salespersonId || '',
+      category: editedContractData.value.category || '',
       signDate: editedContractData.value.signDate || null,
       type: editedContractData.value.type || '',
     };
diff --git a/src/views/project-management/contract/revenue-contract/ContractDetail.vue b/src/views/project-management/contract/revenue-contract/ContractDetail.vue
index 56f99f1..8ac7258 100644
--- a/src/views/project-management/contract/revenue-contract/ContractDetail.vue
+++ b/src/views/project-management/contract/revenue-contract/ContractDetail.vue
@@ -18,6 +18,10 @@
         <a-descriptions-item label="合同金额">
           <span class="font-medium text-green-600">￥{{ (contractDetail.amount || 0).toLocaleString() }}</span>
         </a-descriptions-item>
+        <a-descriptions-item label="合同类别">
+          {{ contractDetail.category || '-' }}
+        </a-descriptions-item>
+
         <a-descriptions-item label="已收款金额">
           <span class="font-medium text-blue-600">￥{{ (contractDetail.receivedAmount || 0).toLocaleString() }}</span>
         </a-descriptions-item>
@@ -74,6 +78,7 @@ interface ContractDetail {
   code: string
   projectId: string
   type: string
+  category?: string
   productService: string
   paymentDate: string | null
   performanceDeadline: string | null
diff --git a/src/views/project-management/contract/revenue-contract/ContractEdit.vue b/src/views/project-management/contract/revenue-contract/ContractEdit.vue
index d1a4ae5..d5be870 100644
--- a/src/views/project-management/contract/revenue-contract/ContractEdit.vue
+++ b/src/views/project-management/contract/revenue-contract/ContractEdit.vue
@@ -46,6 +46,20 @@
       </a-col>
     </a-row>
 
+    <a-row :gutter="16">
+      <a-col :span="12">
+        <a-form-item field="category" label="合同类别">
+          <a-select v-model="contractData.category" placeholder="请选择合同类别" allow-clear>
+            <a-option value="框架协议">框架协议</a-option>
+            <a-option value="单次合同">单次合同</a-option>
+            <a-option value="三年长协">三年长协</a-option>
+            <a-option value="两年长协">两年长协</a-option>
+            <a-option value="派工单">派工单</a-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+    </a-row>
+
     <a-row :gutter="16">
       <a-col :span="12">
         <a-form-item field="signDate" label="签订日期">
diff --git a/src/views/project-management/contract/revenue-contract/index.vue b/src/views/project-management/contract/revenue-contract/index.vue
index eaa3b9a..69e4bbb 100644
--- a/src/views/project-management/contract/revenue-contract/index.vue
+++ b/src/views/project-management/contract/revenue-contract/index.vue
@@ -136,6 +136,7 @@ interface ContractItem {
   code: string
   projectId: string
   type: string
+  category?: string
   productService: string
   paymentDate: string | null
   performanceDeadline: string | null
@@ -166,6 +167,7 @@ const searchForm = reactive({
   contractCode: '',
   client: '',
   status: '',
+  category: '',
   signDateRange: [] as [string, string] | [],
   page: 1,
   size: 10,
@@ -186,6 +188,17 @@ const queryFormColumns = [
       ],
     },
   },
+  { field: 'category', label: '合同类别', type: 'select' as const, props: {
+      placeholder: '请选择合同类别',
+      options: [
+        { label: '框架协议', value: '框架协议' },
+        { label: '单次合同', value: '单次合同' },
+        { label: '三年长协', value: '三年长协' },
+        { label: '两年长协', value: '两年长协' },
+        { label: '派工单', value: '派工单' },
+      ],
+    }
+  },
   { field: 'signDateRange', label: '签署时间', type: 'range-picker' as const, props: {
       placeholder: ['开始日期', '结束日期'], format: 'YYYY-MM-DD',
     }
@@ -198,6 +211,7 @@ const tableColumns: TableColumnData[] = [
   { title: '项目名称', dataIndex: 'projectName', width: 250, ellipsis: true, tooltip: true },
   { title: '客户名称', dataIndex: 'customer', width: 200, ellipsis: true, tooltip: true },
   { title: '合同金额', dataIndex: 'amount', slotName: 'contractAmount', width: 120 },
+  { title: '合同类别', dataIndex: 'category', width: 120 },
   { title: '已收款金额', dataIndex: 'receivedAmount', slotName: 'receivedAmount', width: 120 },
   { title: '未收款金额', dataIndex: 'pendingAmount', width: 120 },
   { title: '签署日期', dataIndex: 'signDate', slotName: 'signDate', width: 120 },
@@ -312,6 +326,9 @@ const fetchContractList = async () => {
       pageSize: searchForm.size,
       code: searchForm.contractCode,
       customer: searchForm.client,
+
+      category: (searchForm as any).category || undefined,
+
       contractStatus: searchForm.status,
       signDateStart: Array.isArray(searchForm.signDateRange) && searchForm.signDateRange.length === 2 ? searchForm.signDateRange[0] : undefined,
       signDateEnd: Array.isArray(searchForm.signDateRange) && searchForm.signDateRange.length === 2 ? searchForm.signDateRange[1] : undefined,
@@ -393,6 +410,7 @@ const reset = () => {
     contractCode: '',
     client: '',
     status: '',
+    category: '',
     signDateRange: [],
     page: 1,
     size: 10,
@@ -421,6 +439,7 @@ const showAddModal = ref(false)
 const newContractData = ref<ContractItem>({
   contractId: '', customer: '', code: '', projectId: '', type: '收入合同',
   productService: '', paymentDate: null, performanceDeadline: null,
+  category: '',
   paymentAddress: '', amount: 0, accountNumber: '', notes: '',
   contractStatus: '未执行', contractText: '', projectName: '',
   salespersonName: null, salespersonDeptName: '', settlementAmount: null,
@@ -432,6 +451,7 @@ const openAddModal = () => {
   Object.assign(newContractData.value, {
     contractId: '', customer: '', code: '', projectId: '', type: '收入合同',
     productService: '', paymentDate: null, performanceDeadline: null,
+    category: '',
     paymentAddress: '', amount: 0, accountNumber: '', notes: '',
     contractStatus: '未执行', contractText: '', projectName: '',
     salespersonName: null, salespersonDeptName: '', settlementAmount: null,
@@ -464,6 +484,7 @@ const handleAddSubmit = async () => {
       // 新建时不传 projectId，而是传项目名称
       projectName: newContractData.value.projectName || '',
       salespersonId: (newContractData.value as any).salespersonId || '',
+      category: newContractData.value.category || '',
       signDate: newContractData.value.signDate || null,
       type: newContractData.value.type || '收入合同',
     }
@@ -534,6 +555,7 @@ const handleEditSubmit = async () => {
       productService: editedContractData.value.productService || '',
       projectId: editedContractData.value.projectId || '',
       salespersonId: editedContractData.value.salespersonId || '',
+      category: editedContractData.value.category || '',
       signDate: editedContractData.value.signDate || null,
       type: editedContractData.value.type || '',
     };
diff --git a/src/views/project/components/ProjectFormFields.vue b/src/views/project/components/ProjectFormFields.vue
new file mode 100644
index 0000000..f8d0e61
--- /dev/null
+++ b/src/views/project/components/ProjectFormFields.vue
@@ -0,0 +1,280 @@
+<template>
+  <!-- 基本信息 -->
+  <a-divider orientation="left">基本信息</a-divider>
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="projectName" label="项目名称" required>
+        <a-input v-model="model.projectName" placeholder="请输入项目名称" />
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item field="farmAddress" label="地址">
+        <a-input v-model="model.farmAddress" placeholder="请输入地址" />
+      </a-form-item>
+    </a-col>
+    <a-col>
+      <a-button size="mini" @click="onMapSelect">
+        <template #icon><icon-location /></template>
+        地图选点
+      </a-button>
+    </a-col>
+  </a-row>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="projectManagerId" label="项目经理" required>
+        <a-select v-model="model.projectManagerId" placeholder="请选择项目经理" :loading="userLoading">
+          <a-option v-for="user in userOptions" :key="user.value" :value="user.value">{{ user.label }}</a-option>
+        </a-select>
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="inspectionUnit" label="业主">
+        <a-input v-model="model.inspectionUnit" placeholder="请输入业主单位" @input="(val:any) => (model.farmName = val)" />
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item field="inspectionContact" label="业主单位联系人">
+        <a-input v-model="model.inspectionContact" placeholder="请输入联系人" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="inspectionPhone" label="业主单位联系电话">
+        <a-input v-model="model.inspectionPhone" placeholder="请输入联系电话" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="client" label="委托单位">
+        <a-input v-model="model.client" placeholder="请输入委托单位" />
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item field="clientContact" label="委托单位联系人">
+        <a-input v-model="model.clientContact" placeholder="请输入联系人" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="clientPhone" label="委托单位联系电话">
+        <a-input v-model="model.clientPhone" placeholder="请输入联系电话" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="projectOrigin" label="项目来源" :rules="[{ required: true, message: '请输入项目来源' }]">
+        <a-input v-model="model.projectOrigin" placeholder="请输入项目来源" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <a-divider orientation="left">任务设置</a-divider>
+  <div class="mb-2">
+    <a-button type="dashed" size="small" @click="addTask">
+      <template #icon><icon-plus /></template>
+      新增任务
+    </a-button>
+  </div>
+  <div v-if="!model.tasks || model.tasks.length === 0" class="text-gray-500 mb-2">暂无任务。</div>
+  <a-space direction="vertical" fill>
+    <a-card v-for="(task, tIndex) in model.tasks" :key="tIndex" size="small">
+      <template #title>
+        <div class="flex items-center justify-between">
+          <span>任务 {{ tIndex + 1 }}</span>
+          <a-space>
+            <a-button size="mini" @click="addSubtask(tIndex)">新增子任务</a-button>
+            <a-button size="mini" status="danger" @click="removeTask(tIndex)">删除</a-button>
+          </a-space>
+        </div>
+      </template>
+      <a-row :gutter="12">
+        <a-col :span="8">
+          <a-form-item :field="`tasks.${tIndex}.taskName`" label="任务名称" required>
+            <a-input v-model="task.taskName" placeholder="请输入任务名称" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="6">
+          <a-form-item :field="`tasks.${tIndex}.taskCode`" label="任务编号">
+            <a-input v-model="task.taskCode" placeholder="编号" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="6">
+          <a-form-item :field="`tasks.${tIndex}.mainUserId`" label="负责人">
+            <a-select v-model="task.mainUserId" placeholder="选择负责人" :loading="userLoading">
+              <a-option v-for="u in userOptions" :key="u.value" :value="u.value">{{ u.label }}</a-option>
+            </a-select>
+          </a-form-item>
+        </a-col>
+        <a-col :span="4">
+          <a-form-item :field="`tasks.${tIndex}.scales`" label="工量">
+            <a-input-number v-model="task.scales" :min="0" :max="9999" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+      <a-row :gutter="12">
+        <a-col :span="8">
+          <a-form-item :field="`tasks.${tIndex}.planStartDate`" label="计划开始">
+            <a-date-picker v-model="task.planStartDate" style="width: 100%" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item :field="`tasks.${tIndex}.planEndDate`" label="计划结束">
+            <a-date-picker v-model="task.planEndDate" style="width: 100%" />
+          </a-form-item>
+        </a-col>
+        <a-col :span="8">
+          <a-form-item :field="`tasks.${tIndex}.taskGroupId`" label="任务组">
+            <a-input-number v-model="task.taskGroupId" :min="0" placeholder="可选" style="width: 100%" />
+          </a-form-item>
+        </a-col>
+      </a-row>
+
+      <div v-if="task.children && task.children.length">
+        <a-divider orientation="left">子任务</a-divider>
+        <a-card v-for="(sub, sIndex) in task.children" :key="sIndex" size="small" class="mb-2">
+          <template #title>
+            <div class="flex items-center justify-between">
+              <span>子任务 {{ tIndex + 1 }}-{{ sIndex + 1 }}</span>
+              <a-button size="mini" status="danger" @click="removeSubtask(tIndex, sIndex)">删除</a-button>
+            </div>
+          </template>
+          <a-row :gutter="12">
+            <a-col :span="8">
+              <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskName`" label="任务名称" required>
+                <a-input v-model="sub.taskName" placeholder="请输入任务名称" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskCode`" label="任务编号">
+                <a-input v-model="sub.taskCode" placeholder="编号" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="6">
+              <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.mainUserId`" label="负责人">
+                <a-select v-model="sub.mainUserId" placeholder="选择负责人" :loading="userLoading">
+                  <a-option v-for="u in userOptions" :key="u.value" :value="u.value">{{ u.label }}</a-option>
+                </a-select>
+              </a-form-item>
+            </a-col>
+            <a-col :span="4">
+              <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.scales`" label="工量">
+                <a-input-number v-model="sub.scales" :min="0" :max="9999" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+          <a-row :gutter="12">
+            <a-col :span="8">
+              <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.planStartDate`" label="计划开始">
+                <a-date-picker v-model="sub.planStartDate" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.planEndDate`" label="计划结束">
+                <a-date-picker v-model="sub.planEndDate" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="8">
+              <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskGroupId`" label="任务组">
+                <a-input-number v-model="sub.taskGroupId" :min="0" placeholder="可选" style="width: 100%" />
+              </a-form-item>
+            </a-col>
+          </a-row>
+        </a-card>
+      </div>
+    </a-card>
+  </a-space>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="status" label="项目状态">
+        <a-select v-model="model.status" placeholder="请选择状态">
+          <a-option v-for="option in statusOptions" :key="option.value" :value="option.value">{{ option.label }}</a-option>
+        </a-select>
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item field="scale" label="项目规模">
+        <a-input-number v-model="model.scale" placeholder="请输入项目规模" :min="0" :max="999" :step="1" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="startDate" label="开始时间">
+        <a-date-picker v-model="model.startDate" style="width: 100%" />
+      </a-form-item>
+    </a-col>
+    <a-col :span="12">
+      <a-form-item field="endDate" label="结束时间">
+        <a-date-picker v-model="model.endDate" style="width: 100%" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <a-row :gutter="16">
+    <a-col :span="12">
+      <a-form-item field="turbineModel" label="风机型号">
+        <a-input v-model="model.turbineModel" placeholder="请输入风机型号" />
+      </a-form-item>
+    </a-col>
+  </a-row>
+
+  <template v-if="showTurbineGrid">
+    <a-divider orientation="left">风场信息可视化</a-divider>
+    <a-row :gutter="16">
+      <a-col :span="24">
+        <a-form-item label="机组网格布局">
+          <a-space direction="vertical" style="width: 100%">
+            <TurbineGrid v-model="model.turbineList" />
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </template>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import TurbineGrid from '../TurbineGrid.vue'
+
+const props = defineProps<{
+  model: any
+  userOptions: { label: string; value: string }[]
+  userLoading: boolean
+  statusOptions: { label: string; value: number | string }[]
+  addTask: () => void
+  removeTask: (index: number) => void
+  addSubtask: (parentIndex: number) => void
+  removeSubtask: (parentIndex: number, index: number) => void
+  onMapSelect: () => void
+  showTurbineGrid?: boolean
+}>()
+
+// 保持对父级 props 的响应性，避免解构/复制导致的“卡加载/选项不更新”
+const {
+  model,
+  userOptions,
+  userLoading,
+  statusOptions,
+  addTask,
+  removeTask,
+  addSubtask,
+  removeSubtask,
+  onMapSelect,
+  showTurbineGrid,
+} = toRefs(props)
+</script>
+
diff --git a/src/views/project/index.vue b/src/views/project/index.vue
index 5200ecc..e0bac05 100644
--- a/src/views/project/index.vue
+++ b/src/views/project/index.vue
@@ -72,263 +72,27 @@
       </template>
     </GiTable>
 
-    <!-- 新增/编辑项目弹窗 -->
+    <!-- 新增项目弹窗（与编辑分离） -->
     <a-modal
       v-model:visible="addModalVisible" :title="modalTitle" :ok-button-props="{ loading: submitLoading }"
-      width="800px" modal-class="project-form-modal" @cancel="resetForm" @ok="handleSubmit"
+      width="800px" modal-class="project-form-modal" @cancel="handleCancelAdd" @ok="handleSubmit"
     >
       <a-form
         ref="formRef" :model="form" :rules="formRules" layout="vertical"
         :style="{ maxHeight: '70vh', overflow: 'auto', padding: '0 10px' }"
       >
-        <!-- 基本信息 -->
-        <a-divider orientation="left">基本信息</a-divider>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="projectName" label="项目名称" required>
-              <a-input v-model="form.projectName" placeholder="请输入项目名称" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="farmAddress" label="地址">
-              <a-input v-model="form.farmAddress" placeholder="请输入地址" />
-            </a-form-item>
-          </a-col>
-          <a-col>
-            <a-button size="mini" @click="() => { Message.info(`待开发`) }">
-              <template #icon><icon-location /></template>
-              地图选点
-            </a-button>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="projectManagerId" label="项目经理" required>
-              <a-select v-model="form.projectManagerId" placeholder="请选择项目经理" :loading="userLoading">
-                <a-option v-for="user in userOptions" :key="user.value" :value="user.value">
-                  {{ user.label }}
-                </a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="inspectionUnit" label="业主">
-              <a-input v-model="form.inspectionUnit" placeholder="请输入业主单位" @input="(val) => (form.farmName = val)" />
-              <!-- 风场名称同步业主 -->
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="inspectionContact" label="业主单位联系人">
-              <a-input v-model="form.inspectionContact" placeholder="请输入联系人" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="inspectionPhone" label="业主单位联系电话">
-              <a-input v-model="form.inspectionPhone" placeholder="请输入联系电话" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="client" label="委托单位">
-              <a-input v-model="form.client" placeholder="请输入委托单位" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="clientContact" label="委托单位联系人">
-              <a-input v-model="form.clientContact" placeholder="请输入联系人" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="clientPhone" label="委托单位联系电话">
-              <a-input v-model="form.clientPhone" placeholder="请输入联系电话" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="projectOrigin" label="项目来源" :rules="[{ required: true, message: '请输入项目来源' }]">
-              <a-input v-model="form.projectOrigin" placeholder="请输入项目来源" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-divider orientation="left">任务设置</a-divider>
-        <div class="mb-2">
-          <a-button type="dashed" size="small" @click="addTask">
-            <template #icon><icon-plus /></template>
-            新增任务
-          </a-button>
-        </div>
-        <div v-if="form.tasks.length === 0" class="text-gray-500 mb-2">暂无任务，请点击“新增任务”。</div>
-        <a-space direction="vertical" fill>
-          <a-card v-for="(task, tIndex) in form.tasks" :key="tIndex" size="small">
-            <template #title>
-              <div class="flex items-center justify-between">
-                <span>任务 {{ tIndex + 1 }}</span>
-                <a-space>
-                  <a-button size="mini" @click="addSubtask(tIndex)">新增子任务</a-button>
-                  <a-button size="mini" status="danger" @click="removeTask(tIndex)">删除</a-button>
-                </a-space>
-              </div>
-            </template>
-            <a-row :gutter="12">
-              <a-col :span="8">
-                <a-form-item :field="`tasks.${tIndex}.taskName`" label="任务名称" required>
-                  <a-input v-model="task.taskName" placeholder="请输入任务名称" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="6">
-                <a-form-item :field="`tasks.${tIndex}.taskCode`" label="任务编号">
-                  <a-input v-model="task.taskCode" placeholder="编号" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="6">
-                <a-form-item :field="`tasks.${tIndex}.mainUserId`" label="负责人">
-                  <a-select v-model="task.mainUserId" placeholder="选择负责人" :loading="userLoading">
-                    <a-option v-for="u in userOptions" :key="u.value" :value="u.value">{{ u.label }}</a-option>
-                  </a-select>
-                </a-form-item>
-              </a-col>
-              <a-col :span="4">
-                <a-form-item :field="`tasks.${tIndex}.scales`" label="工量">
-                  <a-input-number v-model="task.scales" :min="0" :max="9999" />
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-row :gutter="12">
-              <a-col :span="8">
-                <a-form-item :field="`tasks.${tIndex}.planStartDate`" label="计划开始">
-                  <a-date-picker v-model="task.planStartDate" style="width: 100%" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item :field="`tasks.${tIndex}.planEndDate`" label="计划结束">
-                  <a-date-picker v-model="task.planEndDate" style="width: 100%" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item :field="`tasks.${tIndex}.taskGroupId`" label="任务组">
-                  <a-input-number v-model="task.taskGroupId" :min="0" placeholder="可选" style="width: 100%" />
-                </a-form-item>
-              </a-col>
-            </a-row>
-
-            <!-- 子任务 -->
-            <div v-if="task.children && task.children.length">
-              <a-divider orientation="left">子任务</a-divider>
-              <a-card
-                v-for="(sub, sIndex) in task.children"
-                :key="sIndex"
-                size="small"
-                class="mb-2"
-              >
-                <template #title>
-                  <div class="flex items-center justify-between">
-                    <span>子任务 {{ tIndex + 1 }}-{{ sIndex + 1 }}</span>
-                    <a-button size="mini" status="danger" @click="removeSubtask(tIndex, sIndex)">删除</a-button>
-                  </div>
-                </template>
-                <a-row :gutter="12">
-                  <a-col :span="8">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskName`" label="任务名称" required>
-                      <a-input v-model="sub.taskName" placeholder="请输入任务名称" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="6">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskCode`" label="任务编号">
-                      <a-input v-model="sub.taskCode" placeholder="编号" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="6">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.mainUserId`" label="负责人">
-                      <a-select v-model="sub.mainUserId" placeholder="选择负责人" :loading="userLoading">
-                        <a-option v-for="u in userOptions" :key="u.value" :value="u.value">{{ u.label }}</a-option>
-                      </a-select>
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="4">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.scales`" label="工量">
-                      <a-input-number v-model="sub.scales" :min="0" :max="9999" />
-                    </a-form-item>
-                  </a-col>
-                </a-row>
-                <a-row :gutter="12">
-                  <a-col :span="8">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.planStartDate`" label="计划开始">
-                      <a-date-picker v-model="sub.planStartDate" style="width: 100%" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="8">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.planEndDate`" label="计划结束">
-                      <a-date-picker v-model="sub.planEndDate" style="width: 100%" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="8">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskGroupId`" label="任务组">
-                      <a-input-number v-model="sub.taskGroupId" :min="0" placeholder="可选" style="width: 100%" />
-                    </a-form-item>
-                  </a-col>
-                </a-row>
-              </a-card>
-            </div>
-          </a-card>
-        </a-space>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="status" label="项目状态">
-              <a-select v-model="form.status" placeholder="请选择状态">
-                <a-option v-for="option in PROJECT_STATUS_OPTIONS" :key="option.value" :value="option.value">
-                  {{ option.label }}
-                </a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="scale" label="项目规模">
-              <a-input-number v-model="form.scale" placeholder="请输入项目规模" :min="0" :max="999" :step="1" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="startDate" label="开始时间">
-              <a-date-picker v-model="form.startDate" style="width: 100%" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="endDate" label="结束时间">
-              <a-date-picker v-model="form.endDate" style="width: 100%" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="turbineModel" label="风机型号">
-              <a-input v-model="form.turbineModel" placeholder="请输入风机型号" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <!-- 风场信息 -->
-        <a-divider orientation="left">风场信息可视化</a-divider>
-        <a-row :gutter="16">
-          <a-col :span="24">
-            <a-form-item label="机组网格布局">
-              <a-space direction="vertical" style="width: 100%">
-                <TurbineGrid v-model:="form.turbineList"></TurbineGrid>
-              </a-space>
-            </a-form-item>
-          </a-col>
-        </a-row>
-        <a-divider orientation="middle">地图</a-divider>
+        <ProjectFormFields
+          :model="form"
+          :user-options="userOptions"
+          :user-loading="userLoading"
+          :status-options="PROJECT_STATUS_OPTIONS"
+          :add-task="addTask"
+          :remove-task="removeTask"
+          :add-subtask="addSubtask"
+          :remove-subtask="removeSubtask"
+          :on-map-select="() => { Message.info('待开发') }"
+          :show-turbine-grid="true"
+        />
       </a-form>
     </a-modal>
 
@@ -339,9 +103,10 @@
       :ok-button-props="{ loading: submitLoading }"
       width="800px"
       modal-class="project-form-modal"
-      @cancel="() => { editModalVisible.value = false }"
+      @cancel="handleCancelEdit"
       @ok="handleEditSubmit"
     >
+      <a-spin :loading="editDetailLoading">
       <a-form
         ref="editFormRef"
         :model="editForm"
@@ -349,229 +114,21 @@
         layout="vertical"
         :style="{ maxHeight: '70vh', overflow: 'auto', padding: '0 10px' }"
       >
-        <a-divider orientation="left">基本信息</a-divider>
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="projectName" label="项目名称" required>
-              <a-input v-model="editForm.projectName" placeholder="请输入项目名称" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="farmAddress" label="地址">
-              <a-input v-model="editForm.farmAddress" placeholder="请输入地址" />
-            </a-form-item>
-          </a-col>
-        </a-row>
+        <ProjectFormFields
+          :model="editForm"
+          :user-options="userOptions"
+          :user-loading="userLoading"
+          :status-options="PROJECT_STATUS_OPTIONS"
+          :add-task="addEditTask"
+          :remove-task="removeEditTask"
+          :add-subtask="addEditSubtask"
+          :remove-subtask="removeEditSubtask"
+          :on-map-select="() => {}"
+          :show-turbine-grid="false"
+        />
 
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="projectManagerId" label="项目经理" required>
-              <a-select v-model="editForm.projectManagerId" placeholder="请选择项目经理" :loading="userLoading">
-                <a-option v-for="user in userOptions" :key="user.value" :value="user.value">
-                  {{ user.label }}
-                </a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="inspectionUnit" label="业主">
-              <a-input v-model="editForm.inspectionUnit" placeholder="请输入业主单位" @input="(val) => (editForm.farmName = val)" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="inspectionContact" label="业主单位联系人">
-              <a-input v-model="editForm.inspectionContact" placeholder="请输入联系人" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="inspectionPhone" label="业主单位联系电话">
-              <a-input v-model="editForm.inspectionPhone" placeholder="请输入联系电话" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="client" label="委托单位">
-              <a-input v-model="editForm.client" placeholder="请输入委托单位" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="clientContact" label="委托单位联系人">
-              <a-input v-model="editForm.clientContact" placeholder="请输入联系人" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="clientPhone" label="委托单位联系电话">
-              <a-input v-model="editForm.clientPhone" placeholder="请输入联系电话" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="projectOrigin" label="项目来源" :rules="[{ required: true, message: '请输入项目来源' }]">
-              <a-input v-model="editForm.projectOrigin" placeholder="请输入项目来源" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-divider orientation="left">任务设置</a-divider>
-        <div class="mb-2">
-          <a-button type="dashed" size="small" @click="addEditTask">
-            <template #icon><icon-plus /></template>
-            新增任务
-          </a-button>
-        </div>
-        <div v-if="editForm.tasks.length === 0" class="text-gray-500 mb-2">暂无任务。</div>
-        <a-space direction="vertical" fill>
-          <a-card v-for="(task, tIndex) in editForm.tasks" :key="tIndex" size="small">
-            <template #title>
-              <div class="flex items-center justify-between">
-                <span>任务 {{ tIndex + 1 }}</span>
-                <a-space>
-                  <a-button size="mini" @click="addEditSubtask(tIndex)">新增子任务</a-button>
-                  <a-button size="mini" status="danger" @click="removeEditTask(tIndex)">删除</a-button>
-                </a-space>
-              </div>
-            </template>
-            <a-row :gutter="12">
-              <a-col :span="8">
-                <a-form-item :field="`tasks.${tIndex}.taskName`" label="任务名称" required>
-                  <a-input v-model="task.taskName" placeholder="请输入任务名称" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="6">
-                <a-form-item :field="`tasks.${tIndex}.taskCode`" label="任务编号">
-                  <a-input v-model="task.taskCode" placeholder="编号" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="6">
-                <a-form-item :field="`tasks.${tIndex}.mainUserId`" label="负责人">
-                  <a-select v-model="task.mainUserId" placeholder="选择负责人" :loading="userLoading">
-                    <a-option v-for="u in userOptions" :key="u.value" :value="u.value">{{ u.label }}</a-option>
-                  </a-select>
-                </a-form-item>
-              </a-col>
-              <a-col :span="4">
-                <a-form-item :field="`tasks.${tIndex}.scales`" label="工量">
-                  <a-input-number v-model="task.scales" :min="0" :max="9999" />
-                </a-form-item>
-              </a-col>
-            </a-row>
-            <a-row :gutter="12">
-              <a-col :span="8">
-                <a-form-item :field="`tasks.${tIndex}.planStartDate`" label="计划开始">
-                  <a-date-picker v-model="task.planStartDate" style="width: 100%" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item :field="`tasks.${tIndex}.planEndDate`" label="计划结束">
-                  <a-date-picker v-model="task.planEndDate" style="width: 100%" />
-                </a-form-item>
-              </a-col>
-              <a-col :span="8">
-                <a-form-item :field="`tasks.${tIndex}.taskGroupId`" label="任务组">
-                  <a-input-number v-model="task.taskGroupId" :min="0" placeholder="可选" style="width: 100%" />
-                </a-form-item>
-              </a-col>
-            </a-row>
-
-            <!-- 子任务 -->
-            <div v-if="task.children && task.children.length">
-              <a-divider orientation="left">子任务</a-divider>
-              <a-card v-for="(sub, sIndex) in task.children" :key="sIndex" size="small" class="mb-2">
-                <template #title>
-                  <div class="flex items-center justify-between">
-                    <span>子任务 {{ tIndex + 1 }}-{{ sIndex + 1 }}</span>
-                    <a-button size="mini" status="danger" @click="removeEditSubtask(tIndex, sIndex)">删除</a-button>
-                  </div>
-                </template>
-                <a-row :gutter="12">
-                  <a-col :span="8">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskName`" label="任务名称" required>
-                      <a-input v-model="sub.taskName" placeholder="请输入任务名称" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="6">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskCode`" label="任务编号">
-                      <a-input v-model="sub.taskCode" placeholder="编号" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="6">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.mainUserId`" label="负责人">
-                      <a-select v-model="sub.mainUserId" placeholder="选择负责人" :loading="userLoading">
-                        <a-option v-for="u in userOptions" :key="u.value" :value="u.value">{{ u.label }}</a-option>
-                      </a-select>
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="4">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.scales`" label="工量">
-                      <a-input-number v-model="sub.scales" :min="0" :max="9999" />
-                    </a-form-item>
-                  </a-col>
-                </a-row>
-                <a-row :gutter="12">
-                  <a-col :span="8">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.planStartDate`" label="计划开始">
-                      <a-date-picker v-model="sub.planStartDate" style="width: 100%" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="8">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.planEndDate`" label="计划结束">
-                      <a-date-picker v-model="sub.planEndDate" style="width: 100%" />
-                    </a-form-item>
-                  </a-col>
-                  <a-col :span="8">
-                    <a-form-item :field="`tasks.${tIndex}.children.${sIndex}.taskGroupId`" label="任务组">
-                      <a-input-number v-model="sub.taskGroupId" :min="0" placeholder="可选" style="width: 100%" />
-                    </a-form-item>
-                  </a-col>
-                </a-row>
-              </a-card>
-            </div>
-          </a-card>
-        </a-space>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="status" label="项目状态">
-              <a-select v-model="editForm.status" placeholder="请选择状态">
-                <a-option v-for="option in PROJECT_STATUS_OPTIONS" :key="option.value" :value="option.value">
-                  {{ option.label }}
-                </a-option>
-              </a-select>
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="scale" label="项目规模">
-              <a-input-number v-model="editForm.scale" placeholder="请输入项目规模" :min="0" :max="999" :step="1" />
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="16">
-          <a-col :span="12">
-            <a-form-item field="startDate" label="开始时间">
-              <a-date-picker v-model="editForm.startDate" style="width: 100%" />
-            </a-form-item>
-          </a-col>
-          <a-col :span="12">
-            <a-form-item field="endDate" label="结束时间">
-              <a-date-picker v-model="editForm.endDate" style="width: 100%" />
-            </a-form-item>
-          </a-col>
-        </a-row>
       </a-form>
+      </a-spin>
     </a-modal>
 
 
@@ -651,8 +208,11 @@
 </template>
 
 <script setup lang="ts">
+import ProjectFormFields from './components/ProjectFormFields.vue'
+
 const editModalVisible = ref(false)
 const editFormRef = ref()
+const editDetailLoading = ref(false)
 
 // 编辑表单
 const editForm = reactive({
@@ -702,7 +262,6 @@ import { computed, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { Message, Modal } from '@arco-design/web-vue'
 import type { TableColumnData } from '@arco-design/web-vue'
-import TurbineGrid from './TurbineGrid.vue'
 import { addProject, deleteProject, exportProject, importProject, listProject, updateProject, getProjectDetail } from '@/apis/project'
 import { isMobile } from '@/utils'
 import http from '@/utils/http'
@@ -1046,6 +605,16 @@ const fetchData = async () => {
       }
     } else {
       Message.error(res.msg || '获取数据失败')
+    }
+  } catch (error) {
+    console.error('获取项目列表失败:', error)
+    Message.error('获取数据失败')
+    dataList.value = []
+    pagination.total = 0
+  } finally {
+    loading.value = false
+  }
+}
 
 const handleEditSubmit = async () => {
   submitLoading.value = true
@@ -1134,18 +703,6 @@ const handleEditSubmit = async () => {
   }
 }
 
-      dataList.value = []
-      pagination.total = 0
-    }
-  } catch (error) {
-    console.error('获取项目列表失败:', error)
-    Message.error('获取数据失败')
-    dataList.value = []
-    pagination.total = 0
-  } finally {
-    loading.value = false
-  }
-}
 
 const search = () => {
   pagination.current = 1
@@ -1210,7 +767,29 @@ const resetForm = () => {
 
 const openAddModal = () => {
   resetForm()
-  editModalVisible.value = true
+  addModalVisible.value = true
+}
+// 编辑任务增删改
+const addEditTask = () => {
+  ;(editForm.tasks as any[]).push({ taskName: '', taskCode: '', mainUserId: undefined, planStartDate: '', planEndDate: '', scales: undefined, taskGroupId: undefined, children: [] })
+}
+const removeEditTask = (index: number) => {
+  ;(editForm.tasks as any[]).splice(index, 1)
+}
+const addEditSubtask = (parentIndex: number) => {
+  const list = (editForm.tasks as any[])
+  if (!list[parentIndex].children) list[parentIndex].children = []
+  list[parentIndex].children!.push({ taskName: '', taskCode: '', mainUserId: undefined, planStartDate: '', planEndDate: '', scales: undefined, taskGroupId: undefined })
+}
+const removeEditSubtask = (parentIndex: number, index: number) => {
+  const list = (editForm.tasks as any[])
+  list[parentIndex].children!.splice(index, 1)
+}
+
+
+const handleCancelAdd = () => {
+  addModalVisible.value = false
+  resetForm()
 }
 // 任务增删改（仅在新增/编辑弹窗内部使用）
 const addTask = () => {
@@ -1234,6 +813,10 @@ const openEditModal = async (record: T.ProjectResp) => {
   isEdit.value = true
   currentId.value = record.id || record.projectId || null
 
+  // 先打开弹窗并显示加载态
+  editModalVisible.value = true
+  editDetailLoading.value = true
+
   // 重置编辑表单
   Object.assign(editForm, {
     projectId: '', projectName: '', projectManagerId: '', client: '', clientContact: '', clientPhone: '',
@@ -1242,6 +825,18 @@ const openEditModal = async (record: T.ProjectResp) => {
     qualityOfficerId: '', auditorId: '', tasks: [], turbineList: [],
   })
 
+  // 先用列表记录进行快速预填，保证弹窗“秒开”可编辑
+  if (record && typeof record === 'object') {
+    Object.keys(editForm).forEach((key) => {
+      if ((record as any)[key] !== undefined) {
+        // @ts-expect-error 动态赋值
+        editForm[key] = (record as any)[key]
+      }
+    })
+  }
+  // 预填完成后立即关闭整体加载，避免空任务时长时间转圈
+  editDetailLoading.value = false
+
   try {
     if (currentId.value) {
       const res = await getProjectDetail(currentId.value as any)
@@ -1281,9 +876,9 @@ const openEditModal = async (record: T.ProjectResp) => {
       const tasksSource: any[] = Array.isArray(detail.tasks)
         ? detail.tasks
         : (Array.isArray((detail as any).taskList) ? (detail as any).taskList : [])
-      if (Array.isArray(tasksSource) && tasksSource.length) {
-        ;(editForm.tasks as any[]) = tasksSource.map(mapTask)
-      }
+
+      // 任务为空时也要保证是数组，避免渲染卡住
+      ;(editForm.tasks as any[]) = Array.isArray(tasksSource) ? tasksSource.map(mapTask) : []
 
       // projectId 保证存在
       editForm.projectId = (detail.projectId ?? currentId.value ?? record.projectId ?? '').toString()
@@ -1297,10 +892,16 @@ const openEditModal = async (record: T.ProjectResp) => {
         editForm[key] = (record as any)[key]
       }
     })
-  }
+} finally {
+  editDetailLoading.value = false
+}
 
-  // 打开编辑弹窗（与新增分离）
-  editModalVisible.value = true
+// 取消编辑
+
+}
+
+const handleCancelEdit = () => {
+  editModalVisible.value = false
 }
 
 // 添加表单验证规则
diff --git a/src/views/system/role/RoleAddDrawer.vue b/src/views/system/role/RoleAddDrawer.vue
index f3ea6e2..e44f9d9 100644
--- a/src/views/system/role/RoleAddDrawer.vue
+++ b/src/views/system/role/RoleAddDrawer.vue
@@ -22,8 +22,8 @@
         </a-form-item>
         <a-form-item label="状态" field="status">
           <a-select v-model="form.status" placeholder="请选择状态">
-            <a-option :value="0" label="正常" />
-            <a-option :value="1" label="停用" />
+            <a-option :value="1" label="正常" />
+            <a-option :value="0" label="停用" />
           </a-select>
         </a-form-item>
         <a-form-item label="描述" field="remark">
diff --git a/src/views/system/user/UserAddDrawer.vue b/src/views/system/user/UserAddDrawer.vue
index addf87d..2ff5d83 100644
--- a/src/views/system/user/UserAddDrawer.vue
+++ b/src/views/system/user/UserAddDrawer.vue
@@ -15,6 +15,7 @@
 <script setup lang="ts">
 import { Message, type TreeNodeData } from '@arco-design/web-vue'
 import { useWindowSize } from '@vueuse/core'
+import { nextTick } from 'vue'
 import { addUserNew, getUserDetailNew, updateUserNew } from '@/apis/system/user-new'
 import { type ColumnItem, GiForm } from '@/components/GiForm'
 import type { Status } from '@/types/global'
@@ -186,7 +187,7 @@ const columns: ColumnItem[] = reactive([
     field: 'roleIds',
     type: 'select',
     span: 12,
-    required: true,
+    //required: true,
     props: {
       options: roleList,
       multiple: true,
@@ -347,15 +348,12 @@ const save = async () => {
 // 新增
 const onAdd = async () => {
   reset()
-  if (!deptList.value.length) {
-    await getDeptList()
-  }
-  if (!roleList.value.length) {
-    await getRoleList()
-  }
-  if (!postList.value.length) {
-    await getPostList()
-  }
+  // 优先加载选项，避免 v-model 先赋值后补选项导致未选中
+  await Promise.all([
+    deptList.value.length ? Promise.resolve() : getDeptList(),
+    roleList.value.length ? Promise.resolve() : getRoleList(),
+    postList.value.length ? Promise.resolve() : getPostList(),
+  ])
   dataId.value = ''
   visible.value = true
 }
@@ -365,29 +363,91 @@ const onUpdate = async (id: string) => {
   try {
     reset()
     dataId.value = id
-    if (!deptList.value.length) {
-      await getDeptList()
-    }
-    if (!roleList.value.length) {
-      await getRoleList()
-    }
-    if (!postList.value.length) {
-      await getPostList()
-    }
-    
+    // 先加载选项，确保角色/部门/岗位下拉已有选项
+    await Promise.all([
+      deptList.value.length ? Promise.resolve() : getDeptList(),
+      roleList.value.length ? Promise.resolve() : getRoleList(),
+      postList.value.length ? Promise.resolve() : getPostList(),
+    ])
+
     // 使用新的API获取用户详情
     const { data } = await getUserDetailNew(id)
     if (!data) {
       return Message.error('获取用户详情失败')
     }
     
-    // 将API返回的数据映射到表单
+    // 将API返回的数据映射到表单（基础字段）
     Object.keys(form).forEach(key => {
-      if (data[key] !== undefined) {
-        form[key] = data[key]
+      if ((data as any)[key] !== undefined) {
+        ;(form as any)[key] = (data as any)[key]
       }
     })
-    
+
+    // 规范化/兜底：部门、岗位、角色等 ID 字段类型，统一为字符串列表
+    const normalizeIdArray = (val: any): string[] => {
+      if (Array.isArray(val)) return val.map(v => String(v))
+      if (typeof val === 'string') return val.split(',').map(s => s.trim()).filter(Boolean)
+      return []
+    }
+
+    // 部门
+    form.deptId = data.deptId ? String(data.deptId) : ''
+
+    // 岗位
+    if ((data as any).postIds !== undefined) {
+      form.postIds = normalizeIdArray((data as any).postIds)
+    }
+
+    // 角色：兼容 roleIds / roles / roleIdList 等不同返回结构
+    const roleIdsFromArray = normalizeIdArray((data as any).roleIds)
+    const roleIdsFromRoles = Array.isArray((data as any).roles)
+      ? (data as any).roles.map((r: any) => String(r.roleId ?? r.id ?? r.role_id)).filter(Boolean)
+      : []
+    const roleIdsFromList = normalizeIdArray((data as any).roleIdList)
+
+    let mergedRoleIds = roleIdsFromArray.length
+      ? roleIdsFromArray
+      : (roleIdsFromRoles.length ? roleIdsFromRoles : roleIdsFromList)
+
+    // 如果没有返回角色ID，但返回了角色名称（英文逗号分隔），尝试依据名称映射为ID
+    if (!mergedRoleIds.length) {
+      const namesStr = (data as any).roleName || (data as any).roleNames
+      const roleNames: string[] = Array.isArray(namesStr)
+        ? (namesStr as any[]).map(n => String(n))
+        : (typeof namesStr === 'string' ? namesStr.split(/,|，/).map(s => s.trim()).filter(Boolean) : [])
+      if (roleNames.length && Array.isArray(roleList.value)) {
+        const labelToId = new Map<string, string>((roleList.value || []).map(opt => [String(opt.label), String(opt.value)]))
+        const ids = roleNames.map(n => labelToId.get(n)).filter((v): v is string => !!v)
+        if (ids.length) mergedRoleIds = ids
+      }
+    }
+
+    form.roleIds = mergedRoleIds
+
+    // 确保下拉选项中包含当前已分配的角色（避免因选项缺失或类型不一致导致无法预选）
+    try {
+      const optionValSet = new Set((roleList.value || []).map(o => String(o.value)))
+      const fromRolesMap = new Map<string, string>()
+      if (Array.isArray((data as any).roles)) {
+        ;(data as any).roles.forEach((r: any) => {
+          const id = String(r.roleId ?? r.id ?? r.role_id)
+          const name = r.roleName ?? r.name ?? r.role_key ?? id
+          if (id) fromRolesMap.set(id, String(name))
+        })
+      }
+      const toAppend: any[] = []
+      mergedRoleIds.forEach(id => {
+        const sId = String(id)
+        if (!optionValSet.has(sId)) {
+          toAppend.push({ label: fromRolesMap.get(sId) || sId, value: sId, disabled: false })
+        }
+      })
+      if (toAppend.length) {
+        // 直接追加到选项列表，确保能展示已选值
+        roleList.value = [...(roleList.value || []), ...toAppend]
+      }
+    } catch (_) {}
+
     visible.value = true
   } catch (error) {
     console.error('获取用户详情失败', error)
diff --git a/src/views/task/task-gantt/TaskGantt.vue b/src/views/task/task-gantt/TaskGantt.vue
index f72443c..c588313 100644
--- a/src/views/task/task-gantt/TaskGantt.vue
+++ b/src/views/task/task-gantt/TaskGantt.vue
@@ -1,28 +1,51 @@
 <template>
   <GiPageLayout>
-    <div class="gantt-container">   
+    <div class="gantt-container">
       <div class="page-header">
         <h2 class="page-title">人力甘特图页面</h2>
+
+        <!-- 时间刻度切换 -->
+        <div class="scale-switch">
+          <button
+            v-for="scale in timeScales"
+            :key="scale.value"
+            :class="['scale-btn', { active: scale.value === currentScale }]"
+            @click="setScale(scale.value)"
+          >
+            {{ scale.label }}
+          </button>
+
+          <!-- 左右翻页按钮 -->
+          <button class="nav-btn" @click="shiftRange(-1)">←</button>
+          <button class="nav-btn" @click="shiftRange(1)">→</button>
+        </div>
       </div>
-      
-      <!-- 人员列表区域 -->
+
+      <!-- 人员列表 -->
       <div class="person-container">
-        <div v-for="(person, index) in personList" :key="person.id" class="person-gantt">
-          <!-- 人员标题栏 -->
+        <div
+          v-for="(person, index) in personList"
+          :key="person.id"
+          class="person-gantt"
+        >
+          <!-- 头部 -->
           <div class="person-header" @click="togglePerson(index)">
             <div class="name-container">
               <span class="avatar">{{ person.name.charAt(0) }}</span>
               <span>{{ person.name }}</span>
-              <span class="task-count">({{ person.tasks.length }}个项目)</span>
+              <span class="task-count">({{ person.tasks.length }}个任务)</span>
             </div>
             <button class="expand-button">
-              <i :class="person.expanded ? 'collapse-icon' : 'expand-icon'"></i>
+              <i :class="person.expanded ? 'menu-fold-icon' : 'menu-unfold-icon'"></i>
             </button>
           </div>
-          
-          <!-- 甘特图容器 - 根据展开状态控制显示 -->
+
+          <!-- 甘特图 -->
           <div v-show="person.expanded" class="chart-container">
-            <div :ref="el => chartRefs[index] = el" class="progress-chart"></div>
+            <div
+              :ref="el => chartRefs[index] = el"
+              class="progress-chart"
+            ></div>
           </div>
         </div>
       </div>
@@ -30,205 +53,207 @@
   </GiPageLayout>
 </template>
 
-<script setup lang='ts'>
-import * as echarts from 'echarts'
-import { ref, onMounted, onUnmounted, watch } from 'vue'
+<script setup lang="ts">
+import * as echarts from "echarts";
+import { ref, onMounted, onUnmounted } from "vue";
+
+const timeScales = [
+  { label: "周", value: "week", range: 14 },
+  { label: "月", value: "month", range: 30 },
+  { label: "季", value: "quarter", range: 90 },
+  { label: "年", value: "year", range: 365 }
+];
+const currentScale = ref("month");
+const currentStartDate = ref(new Date()); // 当前显示范围起始时间
 
-// 人员数据
 const personList = ref([
   {
     id: 1,
-    name: '张三',
+    name: "张三",
     expanded: true,
     tasks: [
-      { name: '项目一', startDate: '2025-08-01', days: 5, color: '#5470C6' },
-      { name: '项目二', startDate: '2025-08-10', days: 7, color: '#91CC75' },
-      { name: '项目三', startDate: '2025-08-20', days: 4, color: '#FAC858' }
+      { name: "项目一", startDate: "2025-08-01", days: 5, expectedEndDate: "2025-08-07", color: "#5470C6" },
+      { name: "项目二", startDate: "2025-08-10", days: 7, expectedEndDate: "2025-08-18", color: "#91CC75" },
+      { name: "项目三", startDate: "2025-08-20", days: 4, expectedEndDate: "2025-08-25", color: "#FAC858" }
     ]
   },
   {
     id: 2,
-    name: '李四',
+    name: "李四",
     expanded: true,
     tasks: [
-      { name: '产品设计', startDate: '2025-08-05', days: 8, color: '#EE6666' },
-      { name: '技术评审', startDate: '2025-08-15', days: 3, color: '#73C0DE' },
-      { name: '系统测试', startDate: '2025-08-18', days: 6, color: '#3BA272' }
-    ]
-  },
-  {
-    id: 3,
-    name: '王五',
-    expanded: true,
-    tasks: [
-      { name: '需求分析', startDate: '2025-08-02', days: 4, color: '#FC8452' },
-      { name: '前端开发', startDate: '2025-08-08', days: 7, color: '#9A60B4' },
-      { name: '后端对接', startDate: '2025-08-17', days: 5, color: '#EA7CCC' }
-    ]
-  },
-  {
-    id: 4,
-    name: '赵六',
-    expanded: false,
-    tasks: [
-      { name: '文档编写', startDate: '2025-08-03', days: 6, color: '#5470C6' },
-      { name: '用户培训', startDate: '2025-08-12', days: 4, color: '#91CC75' },
-      { name: '上线支持', startDate: '2025-08-22', days: 7, color: '#FAC858' }
+      { name: "产品设计", startDate: "2025-08-05", days: 8, expectedEndDate: "2025-08-15", color: "#EE6666" },
+      { name: "技术评审", startDate: "2025-08-15", days: 3, expectedEndDate: "2025-08-19", color: "#73C0DE" },
+      { name: "系统测试", startDate: "2025-08-18", days: 6, expectedEndDate: "2025-08-27", color: "#3BA272" }
     ]
   }
-])
+]);
 
-// 图表引用数组
 const chartRefs = ref<HTMLElement[]>([]);
-// 图表实例数组
 const chartInstances = ref<echarts.ECharts[]>([]);
 
-// 辅助函数：格式化日期为YYYY-MM-DD
-const formatDate = (date: Date): string => {
-  const year = date.getFullYear()
-  const month = String(date.getMonth() + 1).padStart(2, '0')
-  const day = String(date.getDate()).padStart(2, '0')
-  return `${year}-${month}-${day}`
-}
+const setScale = (scale: string) => {
+  currentScale.value = scale;
+  currentStartDate.value = new Date();
+  renderAllCharts();
+};
+
+// 左右翻页
+const shiftRange = (direction: number) => {
+  const rangeDays = timeScales.find(s => s.value === currentScale.value)?.range || 30;
+  const newDate = new Date(currentStartDate.value);
+  newDate.setDate(newDate.getDate() + direction * rangeDays);
+  currentStartDate.value = newDate;
+  renderAllCharts();
+};
 
-// 切换人员展开/收起状态
 const togglePerson = (index: number) => {
   personList.value[index].expanded = !personList.value[index].expanded;
-  // 如果展开，重新渲染图表
   if (personList.value[index].expanded) {
     setTimeout(() => {
-      if (chartRefs.value[index] && chartInstances.value[index]) {
-        chartInstances.value[index].resize();
-      } else {
-        initChart(index);
-      }
+      initChart(index);
     }, 10);
   }
 };
 
-// 初始化特定人员的甘特图
 const initChart = (personIndex: number) => {
   const container = chartRefs.value[personIndex];
   if (!container) return;
-  
-  // 如果实例已存在，先销毁
+
   if (chartInstances.value[personIndex]) {
     chartInstances.value[personIndex].dispose();
   }
-  
+
   const person = personList.value[personIndex];
-  const tasks = person.tasks;
-  
-  // 计算日期 - 以当前日期为基准
-  const today = new Date(2025, 7, 14);
-  
-  // 准备数据
-  const projectNames: string[] = [];
-  const dataItems: any[] = [];
-  const colors: string[] = [];
-  
-  tasks.forEach((task) => {
-    const startDate = new Date(task.startDate);
-    const endDate = new Date(startDate);
-    endDate.setDate(startDate.getDate() + task.days);
-    
-    projectNames.push(task.name);
-    colors.push(task.color);
-    
-    dataItems.push({
-      name: task.name,
-      value: [
-        formatDate(startDate),
-        formatDate(endDate),
-        task.days
-      ],
-      itemStyle: {
-        color: task.color
-      }
-    });
+  const sortedTasks = [...person.tasks].sort(
+    (a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime()
+  );
+
+  const rangeDays = timeScales.find(s => s.value === currentScale.value)?.range || 30;
+  const startTime = currentStartDate.value.getTime();
+  const minTime = startTime;
+  const maxTime = startTime + rangeDays * 86400000;
+
+  const projectNames = sortedTasks.map(t => t.name);
+
+  // 预期任务条数据
+  const expectedData = sortedTasks.map((task, idx) => {
+    let start = new Date(task.startDate).getTime();
+    let end = new Date(task.expectedEndDate).getTime();
+
+    if (start < minTime) start = minTime;
+    if (end > maxTime) end = maxTime;
+
+    return {
+      name: task.name + " (预期)",
+      value: [start, end, (end - start) / 86400000, idx, task.color]
+    };
   });
-  
-  // 初始化图表实例
-  const chart = echarts.init(container);
-  
-  // 图表配置
+
+  // 实际任务条数据
+  const actualData = sortedTasks.map((task, idx) => {
+    let start = new Date(task.startDate).getTime();
+    let end = start + task.days * 86400000;
+
+    if (start < minTime) start = minTime;
+    if (end > maxTime) end = maxTime;
+
+    return {
+      name: task.name,
+      value: [start, end, (end - start) / 86400000, idx, task.color]
+    };
+  });
+
   const option = {
     tooltip: {
-      trigger: 'item',
-      formatter: (params: any) => {
-        const task = params.data;
-        return `
-          <div class="task-tooltip">
-            <strong>${task.name}</strong><br>
-            开始: ${params.value[0]}<br>
-            结束: ${params.value[1]}<br>
-            耗时: ${task.value[2]}天
-          </div>
-        `;
-      }
-    },
-    grid: {
-      left: '3%',
-      right: '4%',
-      bottom: '3%',
-      containLabel: true
+      formatter: (params: any) => `
+        <strong>${params.data.name}</strong><br>
+        开始: ${echarts.time.format(params.data.value[0], "{yyyy}-{MM}-{dd}", false)}<br>
+        结束: ${echarts.time.format(params.data.value[1], "{yyyy}-{MM}-{dd}", false)}<br>
+        耗时: ${params.data.value[2]}天
+      `
     },
+    grid: { left: 80, right: 30, top: 20, bottom: 20 },
     xAxis: {
-      type: 'time',
-      min: formatDate(new Date(today.getTime() - 30 * 24 * 60 * 60 * 1000)),
-      max: formatDate(new Date(today.getTime() + 30 * 24 * 60 * 60 * 1000)),
-      axisLabel: {
-        formatter: function (value: number) {
-          return echarts.time.format(value, '{MM}/{dd}', false);
-        }
-      },
-      splitLine: {
-        show: true,
-        lineStyle: {
-          type: 'dashed',
-          opacity: 0.3
-        }
-      }
+      type: "time",
+      min: minTime,
+      max: maxTime,
+      splitNumber: 10,
+      splitLine: { show: true, lineStyle: { type: "solid", opacity: 0.3 } }
     },
     yAxis: {
-      type: 'category',
+      type: "category",
       data: projectNames,
-      axisLine: {
-        show: true
-      },
-      axisTick: {
-        show: false
-      },
-      axisLabel: {
-        margin: 16
-      }
+      axisTick: { show: false }
     },
-    dataZoom: [{
-      type: 'inside',
-      start: 20,
-      end: 100
-    }],
-    series: [{
-      name: '项目进度',
-      type: 'bar',
-      data: dataItems,
-      barCategoryGap: '40%',
-      label: {
-        show: true,
-        position: 'inside',
-        formatter: '{c[2]}天'
+    series: [
+      // 预期时间条
+      {
+        type: "custom",
+        renderItem: (params: any, api: any) => {
+          const categoryIndex = api.value(3);
+          const startCoord = api.coord([api.value(0), categoryIndex]);
+          const endCoord = api.coord([api.value(1), categoryIndex]);
+          const barHeight = 20;
+          return {
+            type: "rect",
+            shape: {
+              x: startCoord[0],
+              y: startCoord[1] - barHeight / 2,
+              width: Math.max(0, endCoord[0] - startCoord[0]),
+              height: barHeight
+            },
+            style: {
+              fill: api.value(4),
+              opacity: 0.3
+            }
+          };
+        },
+        encode: { x: [0, 1], y: 3 },
+        data: expectedData,
+        z: 1
       },
-      barWidth: '60%'
-    }],
-    animation: true,
-    animationDuration: 800
+      // 实际任务条
+      {
+        type: "custom",
+        renderItem: (params: any, api: any) => {
+          const categoryIndex = api.value(3);
+          const startCoord = api.coord([api.value(0), categoryIndex]);
+          const endCoord = api.coord([api.value(1), categoryIndex]);
+          const barHeight = 12;
+          return {
+            type: "rect",
+            shape: {
+              x: startCoord[0],
+              y: startCoord[1] - barHeight / 2,
+              width: Math.max(0, endCoord[0] - startCoord[0]),
+              height: barHeight
+            },
+            style: {
+              fill: api.value(4)
+            }
+          };
+        },
+        encode: { x: [0, 1], y: 3 },
+        data: actualData,
+        z: 2
+      }
+    ]
   };
-  
+
+  const chart = echarts.init(container);
   chart.setOption(option);
   chartInstances.value[personIndex] = chart;
-}
+};
+
+const renderAllCharts = () => {
+  personList.value.forEach((_, index) => {
+    if (personList.value[index].expanded) {
+      initChart(index);
+    }
+  });
+};
 
-// 窗口大小改变时重绘图表
 const handleResize = () => {
   chartInstances.value.forEach((chart, index) => {
     if (chart && personList.value[index].expanded) {
@@ -237,160 +262,98 @@ const handleResize = () => {
   });
 };
 
-// 组件挂载时初始化所有展开人员的图表
 onMounted(() => {
-  window.addEventListener('resize', handleResize);
-  personList.value.forEach((_, index) => {
-    if (personList.value[index].expanded) {
-      initChart(index);
-    }
-  });
+  window.addEventListener("resize", handleResize);
+  renderAllCharts();
 });
 
-// 组件卸载时清理
 onUnmounted(() => {
-  window.removeEventListener('resize', handleResize);
-  chartInstances.value.forEach(chart => {
-    if (chart) {
-      chart.dispose();
-    }
-  });
+  window.removeEventListener("resize", handleResize);
+  chartInstances.value.forEach(chart => chart.dispose());
 });
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .gantt-container {
   height: 100%;
   padding: 20px;
-  box-sizing: border-box;
   display: flex;
   flex-direction: column;
 }
-
 .page-header {
   margin-bottom: 20px;
   padding-bottom: 12px;
   border-bottom: 1px solid #e5e7eb;
-  
-  .page-title {
-    margin: 0;
-    font-size: 1.5rem;
-    color: #2c3e50;
-    font-weight: 600;
-  }
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.scale-switch {
+  display: flex;
+  align-items: center;
+}
+.scale-btn {
+  padding: 6px 12px;
+  margin-left: 6px;
+  border: 1px solid #ccc;
+  background: white;
+  cursor: pointer;
+}
+.scale-btn.active {
+  background: #3a7afe;
+  color: white;
+  border-color: #3a7afe;
+}
+.nav-btn {
+  padding: 6px 12px;
+  margin-left: 6px;
+  border: 1px solid #ccc;
+  background: #f5f5f5;
+  cursor: pointer;
 }
-
 .person-container {
   flex: 1;
   overflow-y: auto;
-  padding-right: 8px;
-  
-  &::-webkit-scrollbar {
-    width: 6px;
-  }
-  
-  &::-webkit-scrollbar-thumb {
-    background-color: #c2c6cc;
-    border-radius: 3px;
-  }
 }
-
 .person-gantt {
   margin-bottom: 20px;
   border-radius: 8px;
-  overflow: hidden;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
   background-color: white;
-  
-  &:last-child {
-    margin-bottom: 0;
-  }
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
-
 .person-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 12px 16px;
   background-color: #f8f9fa;
-  border-bottom: 1px solid #e9ecef;
   cursor: pointer;
-  transition: background-color 0.2s;
-  
-  &:hover {
-    background-color: #f1f3f5;
-  }
-  
-  .name-container {
-    display: flex;
-    align-items: center;
-    font-size: 1.1rem;
-    font-weight: 500;
-    color: #495057;
-    
-    .avatar {
-      display: inline-flex;
-      justify-content: center;
-      align-items: center;
-      width: 28px;
-      height: 28px;
-      margin-right: 10px;
-      background-color: #3a7afe;
-      color: white;
-      border-radius: 50%;
-      font-weight: bold;
-    }
-    
-    .task-count {
-      margin-left: 8px;
-      font-size: 0.85rem;
-      font-weight: normal;
-      color: #868e96;
-    }
-  }
-  
-  .expand-button {
-    background: none;
-    border: none;
-    cursor: pointer;
-    width: 28px;
-    height: 28px;
-    border-radius: 4px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s;
-    
-    &:hover {
-      background-color: #e9ecef;
-    }
-    
-    i {
-      display: block;
-      width: 0;
-      height: 0;
-      border-style: solid;
-    }
-    
-    .collapse-icon {
-      border-width: 0 8px 10px 8px;
-      border-color: transparent transparent #495057 transparent;
-    }
-    
-    .expand-icon {
-      border-width: 10px 8px 0 8px;
-      border-color: #495057 transparent transparent transparent;
-    }
-  }
 }
-
+.name-container {
+  display: flex;
+  align-items: center;
+}
+.avatar {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 28px;
+  height: 28px;
+  margin-right: 10px;
+  background-color: #3a7afe;
+  color: white;
+  border-radius: 50%;
+}
+.task-count {
+  margin-left: 8px;
+  font-size: 0.85rem;
+  color: #868e96;
+}
 .chart-container {
   padding: 15px;
-  background-color: #fff;
 }
-
 .progress-chart {
   width: 100%;
   height: 250px;
 }
-</style>
\ No newline at end of file
+</style>