<!--
  人员调度管理页面 - 项目状态看板
  功能特性:
  1. 以项目状态分类的图形化看板
  2. 项目卡片展示基本信息
  3. 项目明细弹窗
  4. 人员需求发布
  5. 团队成员岗位编辑
-->
<template>
  <GiPageLayout>
    <!-- 页面头部 -->
    <div class="personnel-dispatch-header">
      <div class="header-content">
        <div class="header-title">
          <icon-dashboard class="title-icon" />
          <h1>项目调度看板</h1>
          <a-button 
            size="small" 
            type="text" 
            @click="refreshData"
            :loading="loading"
            class="refresh-btn"
          >
            <template #icon><icon-refresh /></template>
            刷新
          </a-button>
        </div>
        
        <!-- 状态筛选器 -->
        <div class="status-filter">
          <div class="filter-buttons">
            <a-button 
              v-for="status in projectStatuses" 
              :key="status.value ?? 'all'"
              :type="selectedStatus === status.value ? 'primary' : 'outline'"
              :class="`status-filter-btn ${status.class}`"
              @click="filterByStatus(status.value)"
              size="medium"
            >
              <template #icon>
                <component :is="status.icon" />
              </template>
              {{ status.label }}
              <span class="status-count">({{ getStatusCount(status.value) }})</span>
            </a-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 项目状态看板 -->
    <div class="project-kanban">
      <!-- 全部项目视图 - 单列布局 -->
      <div v-if="selectedStatus === null" class="all-projects-view">
        <div class="all-projects-header">
          <h2>全部项目 ({{ totalProjects }})</h2>
        </div>
        <div class="all-projects-grid">
          <!-- 未开工项目 -->
          <div 
            v-for="project in pendingProjects" 
            :key="`pending-${project.id || Math.random()}`"
            class="project-card-horizontal pending"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status pending">未开工</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 筹备中项目 -->
          <div 
            v-for="project in preparingProjects" 
            :key="`preparing-${project.id || Math.random()}`"
            class="project-card-horizontal preparing"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status preparing">筹备中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 开工中项目 -->
          <div 
            v-for="project in inProgressProjects" 
            :key="`inProgress-${project.id || Math.random()}`"
            class="project-card-horizontal inProgress"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status inProgress">开工中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 暂停中项目 -->
          <div 
            v-for="project in suspendedProjects" 
            :key="`suspended-${project.id || Math.random()}`"
            class="project-card-horizontal suspended"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status suspended">暂停中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 已完工项目 -->
          <div 
            v-for="project in completedProjects" 
            :key="`completed-${project.id || Math.random()}`"
            class="project-card-horizontal completed"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status completed">已完工</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 验收中项目 -->
          <div 
            v-for="project in acceptanceProjects" 
            :key="`acceptance-${project.id || Math.random()}`"
            class="project-card-horizontal acceptance"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status acceptance">验收中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>验收进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 回款中项目 -->
          <div 
            v-for="project in collectionProjects" 
            :key="`collection-${project.id || Math.random()}`"
            class="project-card-horizontal collection"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status collection">回款中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>回款进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 已结算项目 -->
          <div 
            v-for="project in settledProjects" 
            :key="`settled-${project.id || Math.random()}`"
            class="project-card-horizontal settled"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status settled">已结算</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>结算状态</span>
                    <span class="progress-text">100%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="100"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 状态分类视图 - 原有的列式布局 -->
      <div v-else class="kanban-grid">
        <!-- 未开工项目 -->
        <div class="kanban-column" v-if="shouldShowColumn(0)">
          <div class="column-header pending">
            <div class="column-title">
              <icon-clock-circle class="status-icon" />
              <h2>未开工</h2>
              <span class="project-count">{{ pendingProjects.length }}</span>
            </div>
          </div>
          <div class="column-content">
            <div 
              v-for="project in pendingProjects" 
              :key="`pending-${project.id || Math.random()}`"
              class="project-card-horizontal pending"
              @click="openProjectDetail(project)"
            >
              <!-- 左侧：项目基本信息 -->
              <div class="project-info-section">
                <div class="project-header">
                  <h3 class="project-name">{{ project.name }}</h3>
                  <div class="project-status pending">未开工</div>
                </div>
                <div class="project-details">
                  <div class="detail-item">
                    <icon-wallet class="detail-icon" />
                    <span>预算: {{ formatBudget(project.budget) }}</span>
                  </div>
                  <div class="detail-item">
                    <icon-user class="detail-icon" />
                    <span>负责人: {{ project.manager || '未指定' }}</span>
                  </div>
                  <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                  <div class="progress-section">
                    <div class="progress-info">
                      <span>项目进度</span>
                      <span class="progress-text">{{ project.progress || 0 }}%</span>
                    </div>
                    <div class="progress-display">
                      <CircularProgress
                        :percent="project.progress || 0"
                        :size="80"
                        :stroke-width="8"
                        :show-text="false"
                        class="enhanced-progress"
                      />
                    </div>
                  </div>
                </div>
              </div>
              
              <!-- 右侧：四个管理类别 -->
              <div class="management-categories">
                <!-- 进度管理 -->
                <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                  <div class="section-header">
                    <icon-clock-circle class="section-icon" />
                    <h4>进度管理</h4>
                  </div>
                  <div class="section-content">
                    <div class="metric-item">
                      <span class="metric-label">计划进度</span>
                      <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                    </div>
                    <div class="metric-item">
                      <span class="metric-label">实际进度</span>
                      <span class="metric-value">{{ project.progress || 0 }}%</span>
                    </div>
                    <div class="metric-item">
                      <span class="metric-label">偏差</span>
                      <span class="metric-value">0%</span>
                    </div>
                  </div>
                </div>
                
                <!-- 质量管理 -->
                <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                  <div class="section-header">
                    <icon-check-circle class="section-icon" />
                    <h4>质量管理</h4>
                  </div>
                  <div class="section-content">
                    <div class="metric-item">
                      <span class="metric-label">质量等级</span>
                      <span class="metric-value quality-value">A级</span>
                    </div>
                    <div class="metric-item">
                      <span class="metric-label">检查次数</span>
                      <span class="metric-value">12次</span>
                    </div>
                    <div class="metric-item">
                      <span class="metric-label">合格率</span>
                      <span class="metric-value">98.5%</span>
                    </div>
                  </div>
                </div>
                
                <!-- 安全管理 -->
                <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                  <div class="section-header">
                    <icon-send class="section-icon" />
                    <h4>安全管理</h4>
                  </div>
                  <div class="section-content">
                    <div class="metric-item">
                      <span class="metric-label">安全等级</span>
                      <span class="metric-value safety-value">优秀</span>
                    </div>
                    <div class="metric-item">
                      <span class="metric-label">培训完成</span>
                      <span class="metric-value">100%</span>
                    </div>
                    <div class="metric-item">
                      <span class="metric-label">安全检查</span>
                      <span class="metric-value">通过</span>
                    </div>
                  </div>
                </div>
                
                <!-- 现场管理 -->
                <div class="management-section site-section">
                  <div class="section-header">
                    <icon-bold class="section-icon" />
                    <h4>现场管理</h4>
                  </div>
                  <div class="section-content">
                    <div class="metric-item">
                      <span class="metric-label">在线人数</span>
                      <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                    </div>
                    <div class="metric-item">
                      <span class="metric-label">设备状态</span>
                      <span class="metric-value site-value">正常</span>
                    </div>
                    <div class="metric-item">
                      <span class="metric-label">现场环境</span>
                      <span class="metric-value">良好</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

      <!-- 筹备中项目 -->
      <div class="kanban-column" v-if="shouldShowColumn(1)">
        <div class="column-header preparing">
          <div class="column-title">
            <icon-clock-circle class="status-icon" />
            <h2>筹备中</h2>
            <span class="project-count">{{ preparingProjects.length }}</span>
          </div>
        </div>
        <div class="column-content">
          <div 
            v-for="project in preparingProjects" 
            :key="`preparing-${project.id || Math.random()}`"
            class="project-card-horizontal preparing"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status preparing">筹备中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 开工中项目 -->
      <div class="kanban-column" v-if="shouldShowColumn(2)">
        <div class="column-header inProgress">
          <div class="column-title">
            <icon-play-circle class="status-icon" />
            <h2>开工中</h2>
            <span class="project-count">{{ inProgressProjects.length }}</span>
          </div>
        </div>
        <div class="column-content">
          <div 
            v-for="project in inProgressProjects" 
            :key="`inProgress-${project.id || Math.random()}`"
            class="project-card-horizontal inProgress"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status inProgress">开工中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 暂停中项目 -->
      <div class="kanban-column" v-if="shouldShowColumn(3)">
        <div class="column-header suspended">
          <div class="column-title">
            <icon-pause-circle class="status-icon" />
            <h2>暂停中</h2>
            <span class="project-count">{{ suspendedProjects.length }}</span>
          </div>
        </div>
        <div class="column-content">
          <div 
            v-for="project in suspendedProjects" 
            :key="`suspended-${project.id || Math.random()}`"
            class="project-card-horizontal suspended"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status suspended">暂停中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 已完工项目 -->
      <div class="kanban-column" v-if="shouldShowColumn(4)">
        <div class="column-header completed">
          <div class="column-title">
            <icon-check-circle class="status-icon" />
            <h2>已完工</h2>
            <span class="project-count">{{ completedProjects.length }}</span>
          </div>
        </div>
        <div class="column-content">
          <div 
            v-for="project in completedProjects" 
            :key="`completed-${project.id || Math.random()}`"
            class="project-card-horizontal completed"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status completed">已完工</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>项目进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 验收中项目 -->
      <div class="kanban-column" v-if="shouldShowColumn(5)">
        <div class="column-header acceptance">
          <div class="column-title">
            <icon-search class="status-icon" />
            <h2>验收中</h2>
            <span class="project-count">{{ acceptanceProjects.length }}</span>
          </div>
        </div>
        <div class="column-content">
          <div 
            v-for="project in acceptanceProjects" 
            :key="`acceptance-${project.id || Math.random()}`"
            class="project-card-horizontal acceptance"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status acceptance">验收中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>验收进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 回款中项目 -->
      <div class="kanban-column" v-if="shouldShowColumn(6)">
        <div class="column-header collection">
          <div class="column-title">
            <icon-user-group class="status-icon" />
            <h2>回款中</h2>
            <span class="project-count">{{ collectionProjects.length }}</span>
          </div>
        </div>
        <div class="column-content">
          <div 
            v-for="project in collectionProjects" 
            :key="`collection-${project.id || Math.random()}`"
            class="project-card-horizontal collection"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status collection">回款中</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item clickable" @click.stop="openPersonnelManagement(project)">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>回款进度</span>
                    <span class="progress-text">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="project.progress || 0"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">{{ project.progress || 0 }}%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 已结算项目 -->
      <div class="kanban-column" v-if="shouldShowColumn(7)">
        <div class="column-header settled">
          <div class="column-title">
            <icon-check-square class="status-icon" />
            <h2>已结算</h2>
            <span class="project-count">{{ settledProjects.length }}</span>
          </div>
        </div>
        <div class="column-content">
          <div 
            v-for="project in settledProjects" 
            :key="`settled-${project.id || Math.random()}`"
            class="project-card-horizontal settled"
            @click="openProjectDetail(project)"
          >
            <!-- 左侧：项目基本信息 -->
            <div class="project-info-section">
              <div class="project-header">
                <h3 class="project-name">{{ project.name }}</h3>
                <div class="project-status settled">已结算</div>
              </div>
              <div class="project-details">
                <div class="detail-item">
                  <icon-wallet class="detail-icon" />
                  <span>预算: {{ formatBudget(project.budget) }}</span>
                </div>
                <div class="detail-item">
                  <icon-user class="detail-icon" />
                  <span>负责人: {{ project.manager || '未指定' }}</span>
                </div>
                <div class="detail-item">
                  <icon-user-group class="detail-icon" />
                  <span>团队: {{ project.teamSize > 0 ? project.teamSize + '人' : '未设置' }}</span>
                </div>
                <div class="progress-section">
                  <div class="progress-info">
                    <span>结算状态</span>
                    <span class="progress-text">100%</span>
                  </div>
                  <div class="progress-display">
                    <CircularProgress
                      :percent="100"
                      :size="80"
                      :stroke-width="8"
                      :show-text="false"
                      class="enhanced-progress"
                    />
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 右侧：四个管理类别 -->
            <div class="management-categories">
              <!-- 进度管理 -->
              <div class="management-section progress-section" @click.stop="openProgressManagement(project)">
                <div class="section-header">
                  <icon-clock-circle class="section-icon" />
                  <h4>进度管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">计划进度</span>
                    <span class="metric-value progress-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">实际进度</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">偏差</span>
                    <span class="metric-value">0%</span>
                  </div>
                </div>
              </div>
              
              <!-- 质量管理 -->
              <div class="management-section quality-section" @click.stop="openQualityManagement(project)">
                <div class="section-header">
                  <icon-check-circle class="section-icon" />
                  <h4>质量管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">质量等级</span>
                    <span class="metric-value quality-value">A级</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">检查次数</span>
                    <span class="metric-value">12次</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">合格率</span>
                    <span class="metric-value">98.5%</span>
                  </div>
                </div>
              </div>
              
              <!-- 安全管理 -->
              <div class="management-section safety-section" @click.stop="openSafetyManagement(project)">
                <div class="section-header">
                  <icon-send class="section-icon" />
                  <h4>安全管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">安全等级</span>
                    <span class="metric-value safety-value">优秀</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">培训完成</span>
                    <span class="metric-value">100%</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">安全检查</span>
                    <span class="metric-value">通过</span>
                  </div>
                </div>
              </div>
              
              <!-- 现场管理 -->
              <div class="management-section site-section">
                <div class="section-header">
                  <icon-bold class="section-icon" />
                  <h4>现场管理</h4>
                </div>
                <div class="section-content">
                  <div class="metric-item">
                    <span class="metric-label">在线人数</span>
                    <span class="metric-value">{{ project.teamSize || 0 }}人</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">设备状态</span>
                    <span class="metric-value site-value">正常</span>
                  </div>
                  <div class="metric-item">
                    <span class="metric-label">现场环境</span>
                    <span class="metric-value">良好</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
      </div>

    <!-- 项目详情模态框 -->
    <a-modal
      v-model:visible="projectDetailVisible"
      :title="selectedProject?.name || '项目详情'"
      width="800px"
      :footer="undefined"
      :destroy-on-close="true"
    >
      <div v-if="selectedProject" class="project-detail">
        <div class="detail-header">
          <div class="project-status-badge" :class="getStatusClass(selectedProject.status)">
            {{ getStatusText(selectedProject.status) }}
          </div>
          <div class="project-meta">
            <span class="meta-item">
              <icon-user class="meta-icon" />
              负责人: {{ selectedProject.manager || '未指定' }}
            </span>
            <span class="meta-item">
              <icon-user-group class="meta-icon" />
              团队: {{ selectedProject.teamSize > 0 ? selectedProject.teamSize + '人' : '未设置' }}
            </span>
            <span class="meta-item">
              <icon-user class="meta-icon" />
              预算: {{ formatBudget(selectedProject.budget) }}
            </span>
          </div>
        </div>
        
        <div class="detail-content">
          <div class="detail-section">
            <h4>项目信息</h4>
            <div class="info-grid">
              <div class="info-item">
                <label>项目名称:</label>
                <span>{{ selectedProject.name }}</span>
              </div>
              <div class="info-item">
                <label>风电场:</label>
                <span>{{ selectedProject.farmName || '未设置' }}</span>
              </div>
              <div class="info-item">
                <label>项目规模:</label>
                <span>{{ selectedProject.scale || '未设置' }}</span>
              </div>
              <div class="info-item">
                <label>开始日期:</label>
                <span>{{ selectedProject.startDate || '未设置' }}</span>
              </div>
              <div class="info-item">
                <label>结束日期:</label>
                <span>{{ selectedProject.endDate || '未设置' }}</span>
              </div>
              <div class="info-item">
                <label>创建时间:</label>
                <span>{{ selectedProject.createTime || '未设置' }}</span>
              </div>
            </div>
          </div>
          
          <div class="detail-section">
            <h4>进度信息</h4>
            <div class="progress-section">
              <div class="progress-item">
                <label>准备进度:</label>
                <div class="progress-display">
                  <CircularProgress
                    :percent="selectedProject.preparationProgress || 0"
                    :size="40"
                    :stroke-width="3"
                    :show-text="false"
                  />
                </div>
                <span class="progress-text">{{ selectedProject.preparationProgress || 0 }}%</span>
              </div>
              <div class="progress-item">
                <label>项目进度:</label>
                <div class="progress-display">
                  <CircularProgress
                    :percent="selectedProject.progress || 0"
                    :size="40"
                    :stroke-width="3"
                    :show-text="false"
                  />
                </div>
                <span class="progress-text">{{ selectedProject.progress || 0 }}%</span>
              </div>
            </div>
          </div>
          
          <div class="detail-section" v-if="selectedProject.teamMembers && selectedProject.teamMembers.length > 0">
            <h4>团队成员</h4>
            <div class="team-members">
              <div 
                v-for="member in selectedProject.teamMembers" 
                :key="member.memberId"
                class="team-member"
              >
                <div class="member-avatar">
                  <icon-user />
                </div>
                <div class="member-info">
                  <div class="member-name">{{ member.userName }}</div>
                  <div class="member-role">{{ member.roleTypeDesc }}</div>
                </div>
                <div class="member-status" :class="member.status.toLowerCase()">
                  {{ member.status === 'ACTIVE' ? '在职' : '离职' }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 现场管理弹窗 -->
    <a-modal
      v-model:visible="siteManagementVisible"
      title="现场管理"
      width="500px"
      :footer="false"
      :destroy-on-close="true"
    >
      <div class="site-management-modal">
        <div class="management-options">
          <div class="option-item personnel-management" @click="openPersonnelManagement">
            <div class="option-icon">
              <icon-user-group />
            </div>
            <div class="option-content">
              <h3>人员管理</h3>
              <p>管理项目团队成员、岗位分配、考勤记录等</p>
            </div>
            <div class="option-arrow">
              <icon-right />
            </div>
          </div>
          
          <div class="option-item equipment-management" @click="openEquipmentManagement">
            <div class="option-icon">
              <icon-tool />
            </div>
            <div class="option-content">
              <h3>设备管理</h3>
              <p>管理项目设备、工具、材料等资源</p>
            </div>
            <div class="option-arrow">
              <icon-right />
            </div>
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 备注编辑弹窗 -->
    <a-modal
      v-model:visible="remarkEditVisible"
      title="添加备注"
      width="600px"
      :footer="true"
      @ok="saveRemarkEdit"
      @cancel="cancelRemarkEdit"
    >
      <div v-if="editingMember" class="remark-edit">
        <div class="edit-item">
          <label>成员姓名:</label>
          <span>{{ editingMember.name }}</span>
        </div>
        <div class="edit-item">
          <label>当前岗位:</label>
          <span>{{ editingMember.position }}</span>
        </div>
        <div class="edit-item">
          <label>备注信息:</label>
          <a-textarea 
            v-model="newRemark" 
            placeholder="请输入备注信息，格式：主要负责：项目经理，次要负责：安全员等"
            :rows="4"
          />
        </div>
        <div class="edit-item">
          <label>备注示例:</label>
          <div class="remark-example">
            主要负责：项目经理，次要负责：安全员，协助：质量员
          </div>
        </div>
      </div>
    </a-modal>

    <!-- 项目需求发布弹窗 -->
    <a-modal
      v-model:visible="requirementVisible"
      title="发布项目需求"
      width="500px"
      @ok="saveProjectRequirement"
      @cancel="cancelProjectRequirement"
    >
      <div class="requirement-form">
        <div class="form-item">
          <label>需求描述:</label>
          <a-textarea v-model="newRequirement.description" :rows="3" placeholder="请描述具体需求" />
        </div>
        <div class="form-item">
          <label>紧急程度:</label>
          <a-select v-model="newRequirement.priority" placeholder="请选择紧急程度">
            <a-option value="low">一般</a-option>
            <a-option value="medium">紧急</a-option>
            <a-option value="high">非常紧急</a-option>
          </a-select>
        </div>
      </div>
    </a-modal>
  </GiPageLayout>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
import { getProjectKanbanData, getProjectDetail } from '@/apis/project/personnel-dispatch'
import { 
  IconDashboard, 
  IconClockCircle, 
  IconPlayCircle, 
  IconPauseCircle, 
  IconCheckCircle, 
  IconSearch, 
  IconUserGroup, 
  IconCheckSquare,
  IconRefresh,
  IconUser,
  IconExclamationCircle,
  IconEdit,
  IconPlus,
  IconRight,
  IconTool,
  IconSend,
  IconBold
} from '@arco-design/web-vue/es/icon'
import CircularProgress from '@/components/CircularProgress/index.vue'

const router = useRouter()

// 响应式数据
const loading = ref(false)

// 项目状态定义
const projectStatuses = [
  { value: null, label: '全部', class: 'all', icon: IconDashboard, color: '#6366f1' },
  { value: 0, label: '未开工', class: 'pending', icon: IconClockCircle, color: '#868e96' },
  { value: 1, label: '筹备中', class: 'preparing', icon: IconClockCircle, color: '#ff6b6b' },
  { value: 2, label: '开工中', class: 'inProgress', icon: IconPlayCircle, color: '#51cf66' },
  { value: 3, label: '暂停中', class: 'suspended', icon: IconPauseCircle, color: '#ffa000' },
  { value: 4, label: '已完工', class: 'completed', icon: IconCheckCircle, color: '#52c41a' },
  { value: 5, label: '验收中', class: 'acceptance', icon: IconSearch, color: '#1890ff' },
  { value: 6, label: '回款中', class: 'collection', icon: IconUserGroup, color: '#722ed1' },
  { value: 7, label: '已结算', class: 'settled', icon: IconCheckSquare, color: '#13c2c2' }
]

// 当前选中的状态
const selectedStatus = ref<number | null>(null)

// 项目数据 - 8种状态
const pendingProjects = ref<any[]>([])
const preparingProjects = ref<any[]>([])
const inProgressProjects = ref<any[]>([])
const suspendedProjects = ref<any[]>([])
const completedProjects = ref<any[]>([])
const acceptanceProjects = ref<any[]>([])
const collectionProjects = ref<any[]>([])
const settledProjects = ref<any[]>([])

// 弹窗状态
const projectDetailVisible = ref(false)
const remarkEditVisible = ref(false)
const requirementVisible = ref(false)
const siteManagementVisible = ref(false)

// 当前选中的项目
const currentProject = ref<any>(null)

// 编辑相关
const editingMember = ref<any>(null)
const newRemark = ref('')

// 需求相关
const newRequirement = reactive({
  description: '',
  priority: 'medium'
})

// 计算属性
const totalProjects = computed(() => {
  return pendingProjects.value.length + 
         preparingProjects.value.length + 
         inProgressProjects.value.length + 
         suspendedProjects.value.length + 
         completedProjects.value.length + 
         acceptanceProjects.value.length + 
         collectionProjects.value.length + 
         settledProjects.value.length
})

// 筛选后的项目数量统计
const filteredProjectCounts = computed(() => {
  if (selectedStatus.value === null) {
    // 显示全部时，返回所有状态的数量
    return {
      pending: pendingProjects.value.length,
      preparing: preparingProjects.value.length,
      inProgress: inProgressProjects.value.length,
      suspended: suspendedProjects.value.length,
      completed: completedProjects.value.length,
      acceptance: acceptanceProjects.value.length,
      collection: collectionProjects.value.length,
      settled: settledProjects.value.length
    }
  } else {
    // 显示特定状态时，只返回该状态的数量
    const counts = {
      pending: 0,
      preparing: 0,
      inProgress: 0,
      suspended: 0,
      completed: 0,
      acceptance: 0,
      collection: 0,
      settled: 0
    }
    
    switch (selectedStatus.value) {
      case 0: counts.pending = pendingProjects.value.length; break
      case 1: counts.preparing = preparingProjects.value.length; break
      case 2: counts.inProgress = inProgressProjects.value.length; break
      case 3: counts.suspended = suspendedProjects.value.length; break
      case 4: counts.completed = completedProjects.value.length; break
      case 5: counts.acceptance = acceptanceProjects.value.length; break
      case 6: counts.collection = collectionProjects.value.length; break
      case 7: counts.settled = settledProjects.value.length; break
    }
    
    return counts
  }
})

// 方法
const mapProjectRespToProjectCard = (projectResp: any): any => {
  // 计算团队人数：根据constructorNames的人数 + 项目经理 + 安全员 + 质量员
  let teamSize = 0 // 基础人数：项目经理、安全员、质量员
  
  // 如果有项目经理，加1
  if (projectResp.projectManagerName) {
    teamSize += 1
  }
  // 如果有安全员，加1
  if (projectResp.safetyOfficerName) {
    teamSize += 1
  }
  // 如果有质量员，加1
  if (projectResp.qualityOfficerName) {
    teamSize += 1
  }
  
  // 如果有施工人员，加上施工人员数量
  if (projectResp.constructorNames) {
    const constructorCount = projectResp.constructorNames.split(',').filter(name => name.trim()).length
    teamSize += constructorCount
  }
  
  // 如果有施工组长，加1
  if (projectResp.constructionTeamLeaderName) {
    teamSize += 1
  }
  
  // 如果计算出的团队人数为0，使用后端返回的teamSize
  if (teamSize === 0) {
    teamSize = projectResp.teamSize || 0
  }
  
  // 处理团队成员数据 - 使用后端返回的真实数据
  const teamMembers = projectResp.teamMembers ? projectResp.teamMembers.map((member: any) => {
    console.log('处理团队成员数据:', member) // 添加调试日志
    console.log('成员userName字段:', member.userName)
    console.log('成员name字段:', member.name)
    
    const mappedMember = {
      id: member.memberId,
      name: member.userName || member.name || '未设置姓名', // 修复：优先使用userName字段
      position: member.roleTypeDesc || member.jobCodeDesc || '未设置岗位',
      phone: member.phone || '', // 后端数据中的电话字段
      email: member.email || '', // 后端数据中的邮箱字段
      status: member.status === 'ACTIVE' ? 'ACTIVE' : 'INACTIVE',
      skills: [], // 后端数据中没有技能字段
      joinDate: member.joinDate || '未设置',
      remark: member.remark || member.jobDesc || '',
      // 保留原始数据用于后续处理
      originalData: member
    }
    console.log('映射后的团队成员数据:', mappedMember) // 添加调试日志
    return mappedMember
  }) : []
  
  // 根据后端返回的ProjectResp格式映射到前端ProjectCard格式
  const mappedProject = {
    id: projectResp.projectId || projectResp.id,
    name: projectResp.projectName || projectResp.name,
    status: projectResp.status,
    budget: projectResp.budget || 0, // 使用后端返回的预算数据
    manager: projectResp.projectManagerName || projectResp.manager || '未指定',
    teamSize: teamSize, // 使用计算出的团队人数
    preparationProgress: projectResp.status === 0 || projectResp.status === 1 ? 50 : 100, // 未开工和筹备中项目进度50%，其他100%
    progress: projectResp.progressPercentage || 0,
    startDate: projectResp.startDate,
    endDate: projectResp.endDate,
    plannedStartDate: projectResp.plannedStartDate || projectResp.startDate,
    alerts: [], // 暂时为空数组
    teamMembers: teamMembers, // 使用处理后的团队成员数据
    requirements: [] // 暂时为空数组，后续可以通过API获取
  }
  
  return mappedProject
}

// 获取状态类名
const getStatusClass = (status: number | string) => {
  const statusMap: { [key: string]: string } = {
    0: 'pending',
    1: 'preparing', 
    2: 'inProgress',
    3: 'suspended',
    4: 'completed',
    5: 'acceptance',
    6: 'collection',
    7: 'settled',
    'pending': 'pending',
    'preparing': 'preparing',
    'inProgress': 'inProgress',
    'suspended': 'suspended',
    'completed': 'completed',
    'acceptance': 'acceptance',
    'collection': 'collection',
    'settled': 'settled'
  }
  return statusMap[status] || 'pending'
}

// 获取状态文本
const getStatusText = (status: number | string) => {
  const statusMap: { [key: string]: string } = {
    0: '未开工',
    1: '筹备中',
    2: '开工中',
    3: '暂停中',
    4: '已完工',
    5: '验收中',
    6: '回款中',
    7: '已结算',
    'pending': '未开工',
    'preparing': '筹备中',
    'inProgress': '开工中',
    'suspended': '暂停中',
    'completed': '已完工',
    'acceptance': '验收中',
    'collection': '回款中',
    'settled': '已结算'
  }
  return statusMap[status] || '未知状态'
}

// 格式化预算
const formatBudget = (budget: number | null | undefined) => {
  if (!budget || budget === 0) {
    return '未设置'
  }
  if (budget >= 10000) {
    return `${(budget / 10000).toFixed(1)}万`
  }
  return budget.toString()
}

// 格式化日期
const formatDate = (date: string | null | undefined) => {
  if (!date) return '未设置'
  return new Date(date).toLocaleDateString('zh-CN')
}



// 状态筛选方法
const filterByStatus = (status: number | null) => {
  selectedStatus.value = status
  console.log('筛选状态:', status === null ? '全部' : projectStatuses.find(s => s.value === status)?.label)
  console.log('当前筛选状态:', selectedStatus.value)
  console.log('应该显示的列:')
  console.log('未开工 (0):', shouldShowColumn(0))
  console.log('筹备中 (1):', shouldShowColumn(1))
  console.log('开工中 (2):', shouldShowColumn(2))
  console.log('暂停中 (3):', shouldShowColumn(3))
  console.log('已完工 (4):', shouldShowColumn(4))
  console.log('验收中 (5):', shouldShowColumn(5))
  console.log('回款中 (6):', shouldShowColumn(6))
  console.log('已结算 (7):', shouldShowColumn(7))
}

// 判断是否应该显示某列
const shouldShowColumn = (status: number) => {
  if (selectedStatus.value === null) return true // 显示全部
  return selectedStatus.value === status
}

// 获取某状态的项目数量
const getStatusCount = (status: number | null) => {
  if (status === null) return totalProjects.value
  
  // 如果当前有筛选状态，返回筛选后的数量
  if (selectedStatus.value !== null) {
    if (selectedStatus.value === status) {
      // 当前选中的状态，返回该状态的项目数量
      switch (status) {
        case 0: return pendingProjects.value.length
        case 1: return preparingProjects.value.length
        case 2: return inProgressProjects.value.length
        case 3: return suspendedProjects.value.length
        case 4: return completedProjects.value.length
        case 5: return acceptanceProjects.value.length
        case 6: return collectionProjects.value.length
        case 7: return settledProjects.value.length
        default: return 0
      }
    } else {
      // 其他状态，返回0（因为只显示选中状态的项目）
      return 0
    }
  }
  
  // 没有筛选时，返回所有状态的数量
  switch (status) {
    case 0: return pendingProjects.value.length
    case 1: return preparingProjects.value.length
    case 2: return inProgressProjects.value.length
    case 3: return suspendedProjects.value.length
    case 4: return completedProjects.value.length
    case 5: return acceptanceProjects.value.length
    case 6: return collectionProjects.value.length
    case 7: return settledProjects.value.length
    default: return 0
  }
}



const loadKanbanData = async () => {
  loading.value = true
  try {
    const response = await getProjectKanbanData()
    console.log('后端返回的原始数据:', response.data)
    
    if (response.data) {
      // 清空现有数据
      pendingProjects.value = []
      preparingProjects.value = []
      inProgressProjects.value = []
      suspendedProjects.value = []
      completedProjects.value = []
      acceptanceProjects.value = []
      collectionProjects.value = []
      settledProjects.value = []
      
      // 直接使用后端返回的分类数据
      if (response.data.pendingProjects) {
        pendingProjects.value = response.data.pendingProjects.map(mapProjectRespToProjectCard)
      }
      if (response.data.preparingProjects) {
        preparingProjects.value = response.data.preparingProjects.map(mapProjectRespToProjectCard)
      }
      if (response.data.inProgressProjects) {
        inProgressProjects.value = response.data.inProgressProjects.map(mapProjectRespToProjectCard)
      }
      if (response.data.suspendedProjects) {
        suspendedProjects.value = response.data.suspendedProjects.map(mapProjectRespToProjectCard)
      }
      if (response.data.completedProjects) {
        completedProjects.value = response.data.completedProjects.map(mapProjectRespToProjectCard)
      }
      if (response.data.acceptanceProjects) {
        acceptanceProjects.value = response.data.acceptanceProjects.map(mapProjectRespToProjectCard)
      }
      if (response.data.collectionProjects) {
        collectionProjects.value = response.data.collectionProjects.map(mapProjectRespToProjectCard)
      }
      if (response.data.settledProjects) {
        settledProjects.value = response.data.settledProjects.map(mapProjectRespToProjectCard)
      }
      
      console.log('分类后的项目数量:')
      console.log('未开工:', pendingProjects.value.length)
      console.log('筹备中:', preparingProjects.value.length)
      console.log('开工中:', inProgressProjects.value.length)
      console.log('暂停中:', suspendedProjects.value.length)
      console.log('已完工:', completedProjects.value.length)
      console.log('验收中:', acceptanceProjects.value.length)
      console.log('回款中:', collectionProjects.value.length)
      console.log('已结算:', settledProjects.value.length)
    }
  } catch (error) {
    console.error('获取项目看板数据失败:', error)
    Message.error('获取看板数据失败，请稍后重试')
    
    // 如果API调用失败，使用模拟数据作为后备
    const mockProjects = [
      {
        projectId: 'mock-001',
        projectName: '三峡能源阿城万兴风电场防雷通道检测项目',
        projectManagerName: '张大川',
        turbineCount: '1',
        status: 0,
        startDate: '2025-07-01',
        endDate: '2025-07-31',
        progressPercentage: 0
      },
      {
        projectId: 'mock-002',
        projectName: '三峡能源辽宁分公司庄河海上风电场防雷通道检测项目',
        projectManagerName: '张大川,董冰',
        constructorNames: '牟晓松,cs,谢小兵,高阳,韩凌柱,朱贤进',
        turbineCount: '0',
        status: 2,
        startDate: '2025-06-05',
        endDate: undefined,
        progressPercentage: 45
      }
    ]
    
    // 清空现有数据
    pendingProjects.value = []
    preparingProjects.value = []
    inProgressProjects.value = []
    suspendedProjects.value = []
    completedProjects.value = []
    acceptanceProjects.value = []
    collectionProjects.value = []
    settledProjects.value = []
    
    // 分配模拟数据
    mockProjects.forEach(project => {
      const mappedProject = mapProjectRespToProjectCard(project)
      const status = project.status
      
      switch (status) {
        case 0:
          pendingProjects.value.push(mappedProject)
          break
        case 2:
          inProgressProjects.value.push(mappedProject)
          break
        default:
          pendingProjects.value.push(mappedProject)
          break
      }
    })
  } finally {
    loading.value = false
  }
}

const refreshData = async () => {
  await loadKanbanData()
}



const getRequirementStatusText = (status: string) => {
  const statusMap = {
    pending: '待解决',
    recruiting: '解决中',
    completed: '已解决'
  }
  return statusMap[status] || status
}

// 项目详情相关
const selectedProject = ref<any | null>(null)

// 打开项目详情
const openProjectDetail = (project: any) => {
  selectedProject.value = project
  projectDetailVisible.value = true
}

// 关闭项目详情
const closeProjectDetail = () => {
  projectDetailVisible.value = false
  selectedProject.value = null
}

// 质量管理
const openQualityManagement = (project: any) => {
  currentProject.value = project
  Message.info('质量管理功能开发中...')
}

// 安全管理
const openSafetyManagement = (project: any) => {
  currentProject.value = project
  Message.info('安全管理功能开发中...')
}

// 现场管理
const openSiteManagement = (project: any) => {
  currentProject.value = project
  siteManagementVisible.value = true
}

// 人员管理
const openPersonnelManagement = (project: any) => {
  if (project && project.id) {
    router.push({
      path: '/project-management/personnel-dispatch/construction-personnel',
      query: { projectId: project.id }
    })
  } else {
    Message.error('项目信息不完整，无法进入团队成员管理')
  }
}

// 设备管理
const openEquipmentManagement = () => {
  if (currentProject.value && currentProject.value.id) {
    Message.info('设备管理功能开发中...')
  } else {
    Message.error('项目信息不完整，无法进入设备管理')
  }
}

const editMemberPosition = (member: any) => {
  // 这里可以实现编辑成员岗位的逻辑
  console.log('编辑成员岗位:', member)
  Message.info('编辑成员岗位功能开发中...')
}

const editMemberRemark = (member: any) => {
  editingMember.value = member
  newRemark.value = member.remark || ''
  remarkEditVisible.value = true
}

const saveRemarkEdit = () => {
  if (editingMember.value && newRemark.value) {
    editingMember.value.remark = newRemark.value
    Message.success('备注更新成功')
    remarkEditVisible.value = false
    editingMember.value = null
    newRemark.value = ''
  }
}

const cancelRemarkEdit = () => {
  remarkEditVisible.value = false
  editingMember.value = null
  newRemark.value = ''
}

const openProjectRequirement = () => {
  requirementVisible.value = true
}

const saveProjectRequirement = () => {
  if (newRequirement.description && newRequirement.priority) {
    const requirement = {
      id: Date.now(),
      title: '项目需求',
      description: newRequirement.description,
      priority: newRequirement.priority,
      status: 'pending'
    }
    if (currentProject.value) {
      currentProject.value.requirements.push(requirement)
    }
    Message.success('项目需求发布成功')
    requirementVisible.value = false
    // 重置表单
    Object.assign(newRequirement, {
      description: '',
      priority: 'medium'
    })
  } else {
    Message.error('请填写完整信息')
  }
}

const cancelProjectRequirement = () => {
  requirementVisible.value = false
  Object.assign(newRequirement, {
    description: '',
    priority: 'medium'
  })
}

// 生命周期
onMounted(async () => {
  console.log('页面开始加载数据...')
  await loadKanbanData()
  console.log('数据加载完成，当前状态:')
  console.log('未开工项目数量:', pendingProjects.value.length)
  console.log('筹备中项目数量:', preparingProjects.value.length)
  console.log('开工中项目数量:', inProgressProjects.value.length)
  console.log('暂停中项目数量:', suspendedProjects.value.length)
  console.log('已完工项目数量:', completedProjects.value.length)
  console.log('验收中项目数量:', acceptanceProjects.value.length)
  console.log('回款中项目数量:', collectionProjects.value.length)
  console.log('已结算项目数量:', settledProjects.value.length)
})
</script>

<style lang="scss" scoped>
.personnel-dispatch-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 32px;
  border-radius: 16px;
  margin-bottom: 32px;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.2);

  .header-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .header-title {
    display: flex;
    align-items: center;
    gap: 16px;

    .title-icon {
      font-size: 36px;
      color: rgba(255, 255, 255, 0.95);
    }

    h1 {
      margin: 0;
      font-size: 32px;
      font-weight: 700;
      color: white;
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    .refresh-btn {
      color: rgba(255, 255, 255, 0.9);
      border: 2px solid rgba(255, 255, 255, 0.3);
      background: rgba(255, 255, 255, 0.15);
      border-radius: 12px;
      padding: 8px 16px;
      height: auto;
      
      &:hover {
        color: white;
        background: rgba(255, 255, 255, 0.25);
        border-color: rgba(255, 255, 255, 0.4);
        transform: translateY(-2px);
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
      }
    }
  }

  .status-filter {
    width: 100%;
    
    .filter-buttons {
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        justify-content: center;
        overflow-x: auto;
        padding: 8px 0;
        
        /* 自定义滚动条样式 */
        &::-webkit-scrollbar {
          height: 6px;
        }
        
        &::-webkit-scrollbar-track {
          background: rgba(255, 255, 255, 0.1);
          border-radius: 3px;
        }
        
        &::-webkit-scrollbar-thumb {
          background: rgba(255, 255, 255, 0.3);
          border-radius: 3px;
          
          &:hover {
            background: rgba(255, 255, 255, 0.5);
          }
        }
      
      .status-filter-btn {
        border-radius: 24px;
        padding: 10px 20px;
        font-weight: 600;
        font-size: 13px;
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        border: 2px solid transparent;
        height: auto;
        min-width: 110px;
        flex-shrink: 0;
        
        &:hover {
          transform: translateY(-3px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
        }
        
        &.all {
          background: linear-gradient(135deg, #6366f1, #8b5cf6);
          border-color: #6366f1;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #5b21b6, #7c3aed);
            border-color: #5b21b6;
          }
        }
        
        &.pending {
          background: linear-gradient(135deg, #868e96, #6c757d);
          border-color: #868e96;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #6c757d, #495057);
            border-color: #6c757d;
          }
        }
        
        &.preparing {
          background: linear-gradient(135deg, #ff6b6b, #ee5a52);
          border-color: #ff6b6b;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #ee5a52, #d63031);
            border-color: #ee5a52;
          }
        }
        
        &.inProgress {
          background: linear-gradient(135deg, #51cf66, #40c057);
          border-color: #51cf66;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #40c057, #37b24d);
            border-color: #40c057;
          }
        }
        
        &.suspended {
          background: linear-gradient(135deg, #ffa000, #ff8f00);
          border-color: #ffa000;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #ff8f00, #ff6f00);
            border-color: #ff8f00;
          }
        }
        
        &.completed {
          background: linear-gradient(135deg, #52c41a, #389e0d);
          border-color: #52c41a;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #389e0d, #2f7a0a);
            border-color: #389e0d;
          }
        }
        
        &.acceptance {
          background: linear-gradient(135deg, #1890ff, #096dd9);
          border-color: #1890ff;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #096dd9, #0050b3);
            border-color: #096dd9;
          }
        }
        
        &.collection {
          background: linear-gradient(135deg, #722ed1, #531dab);
          border-color: #722ed1;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #531dab, #3c0f6f);
            border-color: #531dab;
          }
        }
        
        &.settled {
          background: linear-gradient(135deg, #13c2c2, #08979c);
          border-color: #13c2c2;
          color: white;
          
          &:hover {
            background: linear-gradient(135deg, #08979c, #006d75);
            border-color: #08979c;
          }
        }
        
        .status-count {
          margin-left: 6px;
          font-size: 13px;
          opacity: 0.95;
          font-weight: 500;
        }
      }
    }
  }
}

.project-kanban {
  margin-bottom: 24px;
  overflow-y: auto;
  max-height: calc(100vh - 300px);
  
  .kanban-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 24px;
    margin-top: 24px;
  }
  
  // 响应式设计
  @media (max-width: 1200px) {
    .kanban-grid {
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
    }
  }
  
  @media (max-width: 768px) {
    .kanban-grid {
      grid-template-columns: 1fr;
      gap: 16px;
    }
  }

  .kanban-column {
    background: #f7f8fa;
    border-radius: 16px;
    padding: 24px;
    min-height: 600px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
      transform: translateY(-2px);
      
      .column-title .status-icon {
        transform: scale(1.1) rotate(5deg);
      }
    }

    .column-header {
      margin-bottom: 24px;
      padding: 24px;
      border-radius: 16px;
      color: white;
      position: relative;
      overflow: hidden;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
        z-index: 1;
      }

      &.pending {
        background: linear-gradient(135deg, #868e96 0%, #6c757d 100%);
      }

      &.preparing {
        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
      }

      &.inProgress {
        background: linear-gradient(135deg, #51cf66 0%, #40c057 100%);
      }

      &.suspended {
        background: linear-gradient(135deg, #ffa000 0%, #ff8f00 100%);
      }

      &.completed {
        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
      }

      &.acceptance {
        background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
      }

      &.collection {
        background: linear-gradient(135deg, #722ed1 0%, #531dab 100%);
      }

      &.settled {
        background: linear-gradient(135deg, #13c2c2 0%, #08979c 100%);
      }

      .column-title {
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
        z-index: 2;

        .status-icon {
          font-size: 32px;
          filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
          transition: transform 0.3s ease;
        }

        h2 {
          margin: 0;
          font-size: 22px;
          font-weight: 700;
          text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
          letter-spacing: 0.5px;
        }

        .project-count {
          background: rgba(255, 255, 255, 0.25);
          padding: 8px 16px;
          border-radius: 20px;
          font-size: 14px;
          font-weight: 700;
          backdrop-filter: blur(15px);
          border: 2px solid rgba(255, 255, 255, 0.4);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
        }
      }
    }

    .column-content {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
  }
}

.project-card {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 6px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);

    &::before {
      opacity: 1;
    }
    
    .project-header .project-status {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }
    
    .project-info .info-item {
      transform: translateX(0);
    }
  }

  // 不同状态的颜色主题
  &.pending {
    border-left-color: #868e96;
    .project-status { background: #868e96; }
  }

  &.preparing {
    border-left-color: #ff6b6b;
    .project-status { background: #ff6b6b; }
  }

  &.inProgress {
    border-left-color: #51cf66;
    .project-status { background: #51cf66; }
  }

  &.suspended {
    border-left-color: #ffa000;
    .project-status { background: #ffa000; }
  }

  &.completed {
    border-left-color: #52c41a;
    .project-status { background: #52c41a; }
  }

  &.acceptance {
    border-left-color: #1890ff;
    .project-status { background: #1890ff; }
  }

  &.collection {
    border-left-color: #722ed1;
    .project-status { background: #722ed1; }
  }

  &.settled {
    border-left-color: #13c2c2;
    .project-status { background: #13c2c2; }
  }

  .project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;

    .project-name {
      margin: 0;
      font-size: 16px;
      font-weight: 600;
      color: #1d2129;
      line-height: 1.4;
      flex: 1;
      margin-right: 12px;
    }

    .project-status {
      padding: 6px 16px;
      border-radius: 20px;
      color: white;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  .project-info {
    margin-bottom: 20px;

    .info-item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 14px;
      color: #4e5969;
      padding: 8px 12px;
      border-radius: 8px;
      transition: all 0.3s ease;
      background: rgba(0, 0, 0, 0.02);

      &:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: translateX(4px);
      }
      
      &:not(:hover) {
        transform: translateX(0);
      }

      .info-icon {
        font-size: 18px;
        color: #86909c;
        flex-shrink: 0;
        transition: all 0.3s ease;
      }

      &:hover .info-icon {
        color: #1890ff;
        transform: scale(1.1);
      }

      span {
        line-height: 1.4;
        font-weight: 500;
      }
    }
  }

  .project-footer {
    .progress-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-size: 14px;
      padding: 8px 0;

      span:first-child {
        color: #4e5969;
        font-weight: 500;
      }

      .progress-text {
        color: #1d2129;
        font-weight: 700;
        background: linear-gradient(135deg, #1890ff, #40a9ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 16px;
      }
    }

    .progress-bar {
      height: 8px;
      background: #f0f2f5;
      border-radius: 4px;
      overflow: hidden;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

      .progress-fill {
        height: 100%;
        background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
        border-radius: 4px;
        transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        
        &::after {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
          animation: shimmer 2s infinite;
        }
      }
    }
  }

  .project-alerts {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #f0f2f5;

    .alert-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      margin-bottom: 8px;

      &.warning {
        background: #fff7e6;
        color: #d46b08;
        border: 1px solid #ffd591;
      }

      &.error {
        background: #fff2f0;
        color: #cf1322;
        border: 1px solid #ffccc7;
      }

      &.info {
        background: #f6ffed;
        color: #389e0d;
        border: 1px solid #b7eb8f;
      }
    }
  }
}

.project-detail {
  .detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f0f2f5;

    .project-status-badge {
      padding: 8px 16px;
      border-radius: 20px;
      color: white;
      font-weight: 600;
      font-size: 14px;

      &.pending { background: #868e96; }
      &.preparing { background: #ff6b6b; }
      &.inProgress { background: #51cf66; }
      &.suspended { background: #ffa000; }
      &.completed { background: #52c41a; }
      &.acceptance { background: #1890ff; }
      &.collection { background: #722ed1; }
      &.settled { background: #13c2c2; }
    }

    .project-meta {
      display: flex;
      gap: 16px;

      .meta-item {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        color: #4e5969;

        .meta-icon {
          font-size: 16px;
          color: #86909c;
        }
      }
    }
  }

  .detail-content {
    .detail-section {
      margin-bottom: 24px;

      h4 {
        font-size: 16px;
        font-weight: 600;
        color: #1d2129;
        margin: 0 0 16px 0;
        padding-bottom: 8px;
        border-bottom: 1px solid #f0f2f5;
      }

      .info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;

        .info-item {
          display: flex;
          flex-direction: column;
          gap: 4px;

          label {
            font-size: 12px;
            color: #86909c;
            font-weight: 500;
          }

          span {
            font-size: 14px;
            color: #1d2129;
            font-weight: 500;
          }
        }
      }

      .progress-section {
        display: flex;
        flex-direction: column;
        gap: 16px;

        .progress-item {
          display: flex;
          align-items: center;
          gap: 12px;

          label {
            font-size: 14px;
            color: #4e5969;
            font-weight: 500;
            min-width: 80px;
          }

          .progress-bar {
            flex: 1;
            height: 8px;
            background: #f0f2f5;
            border-radius: 4px;
            overflow: hidden;

            .progress-fill {
              height: 100%;
              background: linear-gradient(90deg, #1890ff 0%, #40a9ff 100%);
              border-radius: 4px;
              transition: width 0.3s ease;
            }
          }

          .progress-text {
            font-size: 14px;
            color: #1d2129;
            font-weight: 600;
            min-width: 40px;
            text-align: right;
          }
        }
      }

      .team-members {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .team-member {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 12px;
          background: #f7f8fa;
          border-radius: 8px;
          transition: all 0.3s ease;

          &:hover {
            background: #f0f2f5;
            transform: translateX(4px);
          }

          .member-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #e6f7ff;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1890ff;
            font-size: 20px;
          }

          .member-info {
            flex: 1;

            .member-name {
              font-size: 14px;
              font-weight: 600;
              color: #1d2129;
              margin-bottom: 2px;
            }

            .member-role {
              font-size: 12px;
              color: #86909c;
            }
          }

          .member-status {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;

            &.active {
              background: #f6ffed;
              color: #389e0d;
            }

            &.suspended {
              background: #fff7e6;
              color: #d46b08;
            }

            &.inactive {
              background: #f5f5f5;
              color: #8c8c8c;
            }
          }
        }
      }
    }
  }
}

.remark-edit {
  .edit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;

    label {
      font-weight: 500;
      color: #4e5969;
      min-width: 80px;
      margin-top: 4px;
    }

    .arco-textarea {
      flex: 1;
    }

    .remark-example {
      flex: 1;
      padding: 8px 12px;
      background: #f7f8fa;
      border-radius: 4px;
      color: #86909c;
      font-size: 12px;
      border: 1px solid #e5e6eb;
    }
  }
}

.requirement-form {
  .form-item {
    margin-bottom: 16px;

    label {
      display: block;
      font-weight: 500;
      color: #4e5969;
      margin-bottom: 6px;
    }

    .arco-select,
    .arco-input-number,
    .arco-textarea {
      width: 100%;
    }
  }
}

// 滚动修复
.project-detail {
  max-height: calc(100vh - 200px);
  overflow-y: auto;
}

// 响应式设计
@media (max-width: 1200px) {
  .personnel-dispatch-header {
    padding: 28px;
    
    .header-title {
      h1 {
        font-size: 28px;
      }
      
      .title-icon {
        font-size: 32px;
      }
    }
    
    .status-filter {
      .filter-buttons {
        gap: 14px;
        
        .status-filter-btn {
          padding: 10px 20px;
          min-width: 110px;
          font-size: 13px;
        }
      }
    }
  }
  
  .project-kanban {
    .kanban-grid {
      grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
      gap: 20px;
    }
  }
}

@media (max-width: 768px) {
  .personnel-dispatch-header {
    padding: 24px 20px;
    margin-bottom: 24px;
    
    .header-content {
      gap: 20px;
    }
    
    .header-title {
      flex-direction: column;
      gap: 12px;
      text-align: center;
      
      h1 {
        font-size: 24px;
      }
      
      .title-icon {
        font-size: 28px;
      }
      
      .refresh-btn {
        padding: 6px 12px;
        font-size: 12px;
      }
    }
    
    .status-filter {
      .filter-buttons {
        flex-direction: row;
        align-items: center;
        gap: 8px;
        justify-content: flex-start;
        overflow-x: auto;
        
        .status-filter-btn {
          width: auto;
          max-width: none;
          padding: 8px 16px;
          font-size: 12px;
          min-width: 90px;
        }
      }
    }
  }
  
  .project-kanban {
    margin-bottom: 20px;
    
    .kanban-grid {
      grid-template-columns: 1fr;
      gap: 16px;
      margin-top: 20px;
    }
    
    .kanban-column {
      padding: 20px;
      min-height: 500px;
      
      .column-header {
        padding: 20px;
        margin-bottom: 20px;
        
        .column-title {
          h2 {
            font-size: 20px;
          }
          
          .status-icon {
            font-size: 28px;
          }
          
          .project-count {
            padding: 6px 12px;
            font-size: 13px;
          }
        }
      }
    }
  }
  
  .project-card {
    padding: 16px;
    
    .project-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 8px;
      margin-bottom: 12px;
      
      .project-name {
        font-size: 15px;
        margin-right: 0;
      }
      
      .project-status {
        align-self: flex-start;
        padding: 4px 12px;
        font-size: 11px;
      }
    }
    
    .project-info {
      margin-bottom: 16px;
      
      .info-item {
        padding: 6px 10px;
        margin-bottom: 10px;
        font-size: 13px;
        
        .info-icon {
          font-size: 16px;
        }
      }
    }
    
    .project-footer {
      .progress-info {
        font-size: 13px;
        margin-bottom: 10px;
        
        .progress-text {
          font-size: 15px;
        }
      }
    }
    
    // 移动端项目管理模块样式调整
    .project-management-modules {
      margin-top: 12px;
      padding-top: 12px;
      gap: 6px;
      
      .module-item {
        padding: 6px 10px;
        font-size: 11px;
        min-width: 70px;
        
        .module-icon {
          font-size: 12px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .personnel-dispatch-header {
    padding: 20px 16px;
    
    .header-title {
      h1 {
        font-size: 22px;
      }
      
      .title-icon {
        font-size: 24px;
      }
    }
    
    .status-filter {
      .filter-buttons {
        gap: 6px;
        
        .status-filter-btn {
          max-width: none;
          padding: 8px 12px;
          font-size: 12px;
          min-width: 80px;
          
          .status-count {
            font-size: 11px;
          }
        }
      }
    }
  }
  
  .project-kanban {
    .kanban-column {
      padding: 16px;
      
      .column-header {
        padding: 16px;
        
        .column-title {
          h2 {
            font-size: 18px;
          }
          
          .status-icon {
            font-size: 24px;
          }
        }
      }
    }
  }
  
  .project-card {
    padding: 14px;
    
    .project-header {
      .project-name {
        font-size: 14px;
      }
      
      .project-status {
        font-size: 10px;
        padding: 3px 10px;
      }
    }
    
    .project-info {
      .info-item {
        font-size: 12px;
        padding: 5px 8px;
        
        .info-icon {
          font-size: 14px;
        }
      }
    }
    
    // 超小屏幕项目管理模块样式调整
    .project-management-modules {
      margin-top: 10px;
      padding-top: 10px;
      gap: 4px;
      
      .module-item {
        padding: 4px 8px;
        font-size: 10px;
        min-width: 60px;
        
        .module-icon {
          font-size: 10px;
        }
      }
    }
  }
}

// 添加shimmer动画
@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.site-management-modal {
  .management-options {
    display: flex;
    flex-direction: column;
    gap: 24px;

    .option-item {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      border-radius: 8px;
      background: #f7f8fa;
      transition: all 0.3s ease;

      &:hover {
        background: #e6f7ff;
        transform: translateX(4px);
      }

      .option-icon {
        font-size: 24px;
        color: #1890ff;
      }

      .option-content {
        flex: 1;

        h3 {
          margin: 0;
          font-size: 16px;
          font-weight: 600;
          color: #1d2129;
        }

        p {
          margin: 8px 0 0 0;
          font-size: 14px;
          color: #4e5969;
        }
      }

      .option-arrow {
        font-size: 16px;
        color: #86909c;
      }
    }
  }
}

// 项目管理模块样式
.project-management-modules {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;

  .module-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
    flex: 1;
    min-width: 80px;
    justify-content: center;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .module-icon {
      font-size: 14px;
    }

    span {
      white-space: nowrap;
    }

    &.quality-management {
      background: linear-gradient(135deg, #52c41a, #389e0d);
      color: white;
      border-color: #52c41a;

      &:hover {
        background: linear-gradient(135deg, #389e0d, #2f7a0a);
        border-color: #389e0d;
      }
    }

    &.safety-management {
      background: linear-gradient(135deg, #fa8c16, #d46b08);
      color: white;
      border-color: #fa8c16;

      &:hover {
        background: linear-gradient(135deg, #d46b08, #ad4e00);
        border-color: #d46b08;
      }
    }

    &.site-management {
      background: linear-gradient(135deg, #1890ff, #096dd9);
      color: white;
      border-color: #1890ff;

      &:hover {
        background: linear-gradient(135deg, #096dd9, #0050b3);
        border-color: #096dd9;
      }
    }
  }
  
  .column-content {
      .metric-item {
        font-size: 9px;
        margin-bottom: 4px;
      }
  }

.progress-display {
  display: flex;
  align-items: center;
  justify-content: center;
}


// 全部项目视图样式
.all-projects-view {
  .all-projects-header {
    text-align: center;
    margin-bottom: 32px;
    
    h2 {
      font-size: 28px;
      font-weight: 700;
      color: #1d2129;
      margin: 0;
      padding: 24px;
      background: linear-gradient(135deg, #f7f8fa 0%, #e9ecef 100%);
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    }
  }
  
  .all-projects-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
  }
}



      &:hover .info-icon {
        color: #1890ff;
        transform: scale(1.1);
      }

      span {
        line-height: 1.4;
        font-weight: 500;
      }
    
  

  .project-footer {
    .progress-info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-size: 14px;
      padding: 8px 0;

      span:first-child {
        color: #4e5969;
        font-weight: 500;
      }

      .progress-text {
        color: #1d2129;
        font-weight: 700;
        background: linear-gradient(135deg, #1890ff, #40a9ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        font-size: 16px;
      }
    }
  }
}

// 响应式设计调整
@media (max-width: 1200px) {
  .all-projects-view {
    .all-projects-grid {
      max-width: 100%;
      padding: 0 16px;
    }
  }
}

@media (max-width: 768px) {
  .all-projects-view {
    .all-projects-header {
      margin-bottom: 24px;
      
      h2 {
        font-size: 24px;
        padding: 20px;
      }
    }
    
    .all-projects-grid {
      gap: 16px;
      padding: 0 12px;
          }
    }
    
    .module-title {
      font-size: 13px;
    }
  }

@media (max-width: 480px) {
  .all-projects-view {
    .all-projects-header {
      h2 {
        font-size: 22px;
        padding: 16px;
      }
    }
    
    .all-projects-grid {
      gap: 12px;
      padding: 0 8px;
    }
  }
}


// 美化圆形进度条
.enhanced-progress {
  position: relative;
  
  &::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    opacity: 0.1;
    z-index: -1;
  }
  
  &::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1890ff, #40a9ff);
    opacity: 0.2;
    z-index: -1;
  }
}

    
    .column-content {
      .metric-item {
        font-size: 9px;
        margin-bottom: 4px;
      }
    }


// 水平布局项目卡片样式
.project-card-horizontal {
  background: white;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 6px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 24px;
  align-items: stretch;

  // 左侧项目信息部分
  .project-info-section {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  // 右侧管理类别部分
  .management-categories {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    align-items: start;
  }

  &:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);

    &::before {
      opacity: 1;
    }
    
    .project-header .project-status {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }
  }

  // 不同状态的颜色主题
  &.pending {
    border-left-color: #868e96;
    .project-status { background: #868e96; }
  }

  &.preparing {
    border-left-color: #ff6b6b;
    .project-status { background: #ff6b6b; }
  }

  &.inProgress {
    border-left-color: #51cf66;
    .project-status { background: #51cf66; }
  }

  &.suspended {
    border-left-color: #ffa000;
    .project-status { background: #ffa000; }
  }

  &.completed {
    border-left-color: #52c41a;
    .project-status { background: #52c41a; }
  }

  &.acceptance {
    border-left-color: #1890ff;
    .project-status { background: #1890ff; }
  }

  &.collection {
    border-left-color: #722ed1;
    .project-status { background: #722ed1; }
  }

  &.settled {
    border-left-color: #13c2c2;
    .project-status { background: #13c2c2; }
  }
}

// 垂直布局项目卡片样式（保留原有样式）
.project-card-vertical {
  background: white;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-left: 6px solid;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  &:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
    border-color: rgba(0, 0, 0, 0.1);

    &::before {
      opacity: 1;
    }
    
    .project-header .project-status {
      transform: scale(1.05);
      box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
    }
  }

  // 不同状态的颜色主题
  &.pending {
    border-left-color: #868e96;
    .project-status { background: #868e96; }
  }

  &.preparing {
    border-left-color: #ff6b6b;
    .project-status { background: #ff6b6b; }
  }

  &.inProgress {
    border-left-color: #51cf66;
    .project-status { background: #51cf66; }
  }

  &.suspended {
    border-left-color: #ffa000;
    .project-status { background: #ffa000; }
  }

  &.completed {
    border-left-color: #52c41a;
    .project-status { background: #52c41a; }
  }

  &.acceptance {
    border-left-color: #1890ff;
    .project-status { background: #1890ff; }
  }

  &.collection {
    border-left-color: #722ed1;
    .project-status { background: #722ed1; }
  }

  &.settled {
    border-left-color: #13c2c2;
    .project-status { background: #13c2c2; }
  }
}

// 项目信息部分样式
.project-info-section {
  .project-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;

    .project-name {
      margin: 0;
      font-size: 18px;
      font-weight: 600;
      color: #1d2129;
      line-height: 1.4;
      flex: 1;
      margin-right: 12px;
    }

    .project-status {
      padding: 6px 16px;
      border-radius: 20px;
      color: white;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      text-transform: uppercase;
      letter-spacing: 0.5px;
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
  }

  .project-details {
    .detail-item {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 12px;
      font-size: 14px;
      color: #4e5969;
      padding: 8px 12px;
      border-radius: 8px;
      transition: all 0.3s ease;
      background: rgba(0, 0, 0, 0.02);

      &:hover {
        background: rgba(0, 0, 0, 0.05);
        transform: translateX(4px);
      }

      .detail-icon {
        font-size: 18px;
        color: #86909c;
        flex-shrink: 0;
        transition: all 0.3s ease;
      }

      &:hover .detail-icon {
        color: #1890ff;
        transform: scale(1.1);
      }

      span {
        line-height: 1.4;
        font-weight: 500;
      }
    }

    .progress-section {
      margin-top: 16px;
      
      .progress-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 12px;
        font-size: 14px;
        padding: 8px 0;

        span:first-child {
          color: #4e5969;
          font-weight: 500;
        }

        .progress-text {
          color: #1d2129;
          font-weight: 700;
          background: linear-gradient(135deg, #1890ff, #40a9ff);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          font-size: 16px;
        }
      }

      .progress-display {
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

// 管理部分样式
.management-section {
  background: white;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border: 1px solid #f0f2f5;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 4px;
    transition: all 0.3s ease;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    border-color: #d9d9d9;

    &::before {
      width: 6px;
    }
  }

  .section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f2f5;

    .section-icon {
      font-size: 20px;
      flex-shrink: 0;
    }

    h4 {
      margin: 0;
      font-size: 14px;
      font-weight: 600;
      color: #1d2129;
      white-space: nowrap;
    }
  }

  .section-content {
    .metric-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      font-size: 12px;

      &:last-child {
        margin-bottom: 0;
      }

      .metric-label {
        color: #86909c;
        font-weight: 500;
      }

      .metric-value {
        color: #1d2129;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 4px;
        background: rgba(0, 0, 0, 0.04);
      }
    }
  }

  // 进度管理部分
  &.progress-section {
    &::before {
      background: linear-gradient(135deg, #1890ff, #096dd9);
    }
    
    .section-icon {
      color: #1890ff;
    }
    
    .progress-value {
      background: rgba(24, 144, 255, 0.1);
      color: #1890ff;
    }
  }

  // 质量管理部分
  &.quality-section {
    &::before {
      background: linear-gradient(135deg, #52c41a, #389e0d);
    }
    
    .section-icon {
      color: #52c41a;
    }
    
    .quality-value {
      background: rgba(82, 196, 26, 0.1);
      color: #52c41a;
    }
  }

  // 安全管理部分
  &.safety-section {
    &::before {
      background: linear-gradient(135deg, #fa8c16, #d46b08);
    }
    
    .section-icon {
      color: #fa8c16;
    }
    
    .safety-value {
      background: rgba(250, 140, 22, 0.1);
      color: #fa8c16;
    }
  }

  // 现场管理部分
  &.site-section {
    &::before {
      background: linear-gradient(135deg, #1890ff, #096dd9);
    }
    
    .section-icon {
      color: #1890ff;
    }
    
    .site-value {
      background: rgba(24, 144, 255, 0.1);
      color: #1890ff;
    }
  }
}

// 响应式设计调整
@media (max-width: 768px) {
  .project-card-horizontal {
    flex-direction: column;
    padding: 16px;
    gap: 16px;
    
    .project-info-section {
      flex: none;
      width: 100%;
    }
    
    .management-categories {
      grid-template-columns: 1fr;
      gap: 12px;
    }
  }

  .project-card-vertical {
    padding: 16px;
    gap: 12px;
    
    .project-info-section {
      .project-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 12px;
        
        .project-name {
          font-size: 16px;
          margin-right: 0;
        }
        
        .project-status {
          align-self: flex-start;
          padding: 4px 12px;
          font-size: 11px;
        }
      }
      
      .project-details {
        .detail-item {
          padding: 6px 10px;
          margin-bottom: 10px;
          font-size: 13px;
          
          .detail-icon {
            font-size: 16px;
          }
        }
        
        .progress-section {
          .progress-info {
            font-size: 13px;
          }
        }
      }
    }
    
    .management-section {
      padding: 12px;
      
      .section-header {
        margin-bottom: 8px;
        
        .section-icon {
          font-size: 16px;
        }
        
        h4 {
          font-size: 12px;
        }
      }
      
      .section-content {
        .metric-item {
          font-size: 10px;
          margin-bottom: 5px;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .project-card-horizontal {
    padding: 12px;
    gap: 12px;
    
    .project-info-section {
      .project-header {
        .project-name {
          font-size: 15px;
        }
        
        .project-status {
          font-size: 10px;
          padding: 3px 10px;
        }
      }
      
      .project-details {
        .detail-item {
          font-size: 12px;
          padding: 5px 8px;
          
          .detail-icon {
            font-size: 14px;
          }
        }
      }
    }
    
    .management-categories {
      gap: 8px;
    }
    
    .management-section {
      padding: 10px;
      
      .section-header {
        .section-icon {
          font-size: 14px;
        }
        
        h4 {
          font-size: 11px;
        }
      }
      
      .section-content {
        .metric-item {
          font-size: 9px;
          margin-bottom: 4px;
        }
      }
    }
  }

  .project-card-vertical {
    padding: 12px;
    gap: 8px;
    
    .project-info-section {
      .project-header {
        .project-name {
          font-size: 15px;
        }
        
        .project-status {
          font-size: 10px;
          padding: 3px 10px;
        }
      }
      
      .project-details {
        .detail-item {
          font-size: 12px;
          padding: 5px 8px;
          
          .detail-icon {
            font-size: 14px;
          }
        }
      }
    }
    
    .management-section {
      padding: 10px;
      
      .section-header {
        .section-icon {
          font-size: 14px;
        }
        
        h4 {
          font-size: 11px;
        }
      }
      
      .section-content {
        .metric-item {
          font-size: 9px;
          margin-bottom: 4px;
        }
      }
    }
  }
}
</style> 