<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
    <!-- 顶部导航栏 -->
    <nav class="bg-white dark:bg-gray-800 shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-bold text-gray-800 dark:text-white">企业仪表盘</h1>
          </div>
          <div class="flex items-center space-x-4">
            <button 
              @click="handleExportReport"
              class="px-4 py-2 bg-green-600 text-white rounded-md hover:bg-green-700 flex items-center space-x-2"
            >
              <DownloadIcon class="h-5 w-5" />
              <span>导出报表</span>
            </button>
          </div>
        </div>
      </div>
    </nav>

    <!-- 主要内容区域 -->
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <!-- 搜索和筛选区域 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6 mb-8">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div class="relative">
            <input
              v-model="searchText"
              @input="handleSearch"
              type="text"
              placeholder="搜索部门/项目..."
              class="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
            />
            <SearchIcon class="absolute left-3 top-2.5 h-5 w-5 text-gray-400 dark:text-gray-500" />
          </div>
          <select 
            v-model="department"
            @change="handleDepartmentChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有部门</option>
            <option value="sales">销售部</option>
            <option value="marketing">市场部</option>
            <option value="development">研发部</option>
            <option value="finance">财务部</option>
          </select>
          <select 
            v-model="projectStatus"
            @change="handleProjectStatusChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有状态</option>
            <option value="planning">规划中</option>
            <option value="in_progress">进行中</option>
            <option value="completed">已完成</option>
            <option value="on_hold">已暂停</option>
          </select>
          <select 
            v-model="timeRange"
            @change="handleTimeRangeChange"
            class="border border-gray-300 dark:border-gray-600 rounded-md px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
          >
            <option value="">所有时间</option>
            <option value="today">今天</option>
            <option value="week">本周</option>
            <option value="month">本月</option>
            <option value="quarter">本季度</option>
          </select>
        </div>
      </div>

      <!-- 企业统计卡片 -->
      <div class="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-blue-100 dark:bg-blue-900">
              <UsersIcon class="h-6 w-6 text-blue-600 dark:text-blue-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">员工总数</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">1,234</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-green-100 dark:bg-green-900">
              <ActivityIcon class="h-6 w-6 text-green-600 dark:text-green-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">活跃项目</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">56</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-yellow-100 dark:bg-yellow-900">
              <TrendingUpIcon class="h-6 w-6 text-yellow-600 dark:text-yellow-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">季度收入</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">¥12.3M</p>
            </div>
          </div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <div class="flex items-center">
            <div class="p-3 rounded-full bg-purple-100 dark:bg-purple-900">
              <TargetIcon class="h-6 w-6 text-purple-600 dark:text-purple-400" />
            </div>
            <div class="ml-4">
              <p class="text-sm font-medium text-gray-600 dark:text-gray-400">目标完成率</p>
              <p class="text-2xl font-semibold text-gray-900 dark:text-white">85.6%</p>
            </div>
          </div>
        </div>
      </div>

      <!-- 企业数据图表 -->
      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">部门绩效趋势</h3>
          <div ref="performanceChartRef" class="h-64"></div>
        </div>
        <div class="bg-white dark:bg-gray-800 rounded-lg shadow p-6">
          <h3 class="text-lg font-medium text-gray-900 dark:text-white mb-4">项目状态分布</h3>
          <div ref="projectChartRef" class="h-64"></div>
        </div>
      </div>

      <!-- 项目列表 -->
      <div class="bg-white dark:bg-gray-800 rounded-lg shadow overflow-hidden">
        <div class="overflow-x-auto">
          <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
            <thead class="bg-gray-50 dark:bg-gray-700">
              <tr>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">项目信息</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">部门</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">状态</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">进度</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">负责人</th>
                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-300 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
              <tr v-for="project in paginatedProjects" :key="project.id" class="hover:bg-gray-50 dark:hover:bg-gray-700">
                <td class="px-6 py-4">
                  <div class="flex items-center">
                    <div class="flex-shrink-0 h-10 w-10">
                      <img class="h-10 w-10 rounded-full object-cover" :src="project.avatar" :alt="project.name">
                    </div>
                    <div class="ml-4">
                      <div class="text-sm font-medium text-gray-900 dark:text-white">{{ project.name }}</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">{{ project.id }}</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4">
                  <span :class="['department-tag', `dept-${project.department}`]">
                    {{ project.department === 'sales' ? '销售部' : 
                       project.department === 'marketing' ? '市场部' : 
                       project.department === 'development' ? '研发部' : '财务部' }}
                  </span>
                </td>
                <td class="px-6 py-4">
                  <span :class="['status-tag', `status-${project.status}`]">
                    {{ project.status === 'planning' ? '规划中' : 
                       project.status === 'in_progress' ? '进行中' : 
                       project.status === 'completed' ? '已完成' : '已暂停' }}
                  </span>
                </td>
                <td class="px-6 py-4">
                  <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2.5">
                    <div 
                      class="progress-bar h-2.5 rounded-full"
                      :class="[
                        project.status === 'completed' ? 'bg-green-600' :
                        project.status === 'in_progress' ? 'bg-blue-600' :
                        project.status === 'planning' ? 'bg-yellow-600' : 'bg-gray-600'
                      ]"
                      :style="{ width: `${project.progress}%` }"
                    ></div>
                  </div>
                  <div class="text-sm text-gray-500 dark:text-gray-400 mt-1">{{ project.progress }}%</div>
                </td>
                <td class="px-6 py-4">
                  <div class="flex items-center">
                    <div class="flex-shrink-0 h-8 w-8">
                      <img class="h-8 w-8 rounded-full object-cover" :src="project.manager.avatar" :alt="project.manager.name">
                    </div>
                    <div class="ml-3">
                      <div class="text-sm font-medium text-gray-900 dark:text-white">{{ project.manager.name }}</div>
                      <div class="text-sm text-gray-500 dark:text-gray-400">{{ project.manager.position }}</div>
                    </div>
                  </div>
                </td>
                <td class="px-6 py-4 text-sm font-medium">
                  <button 
                    @click="handleViewProject(project)"
                    class="action-button view-button"
                  >
                    <EyeIcon class="h-4 w-4 inline-block mr-1" />
                    查看
                  </button>
                  <button 
                    @click="handleEditProject(project)"
                    class="action-button edit-button"
                  >
                    <EditIcon class="h-4 w-4 inline-block mr-1" />
                    编辑
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>

      <!-- 分页 -->
      <div class="bg-white dark:bg-gray-800 px-4 py-3 flex items-center justify-between border-t border-gray-200 dark:border-gray-700 sm:px-6 mt-4">
        <div class="flex-1 flex justify-between sm:hidden">
          <button 
            @click="handlePageChange(currentPage - 1)"
            :disabled="currentPage === 1"
            class="pagination-button"
          >
            上一页
          </button>
          <button 
            @click="handlePageChange(currentPage + 1)"
            :disabled="currentPage === totalPages"
            class="pagination-button"
          >
            下一页
          </button>
        </div>
        <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
          <div>
            <p class="text-sm text-gray-700 dark:text-gray-300">
              显示 <span class="font-medium">{{ (currentPage - 1) * pageSize + 1 }}</span> 到 
              <span class="font-medium">{{ Math.min(currentPage * pageSize, filteredProjects.length) }}</span> 条，共 
              <span class="font-medium">{{ filteredProjects.length }}</span> 条
            </p>
          </div>
          <div>
            <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
              <button 
                @click="handlePageChange(currentPage - 1)"
                :disabled="currentPage === 1"
                class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <ChevronLeftIcon class="h-5 w-5" />
              </button>
              <button 
                v-for="page in totalPages"
                :key="page"
                @click="handlePageChange(page)"
                :class="[
                  'relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium',
                  currentPage === page ? 'bg-blue-600 text-white border-blue-600' : 'bg-white dark:bg-gray-700 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-600'
                ]"
              >
                {{ page }}
              </button>
              <button 
                @click="handlePageChange(currentPage + 1)"
                :disabled="currentPage === totalPages"
                class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-600"
              >
                <ChevronRightIcon class="h-5 w-5" />
              </button>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import { 
  SearchIcon, 
  SettingsIcon, 
  ChevronLeftIcon, 
  ChevronRightIcon,
  UsersIcon,
  ActivityIcon,
  TrendingUpIcon,
  TargetIcon,
  DownloadIcon,
  EyeIcon,
  EditIcon,
  ChevronUpIcon,
  ChevronDownIcon
} from 'lucide-vue-next'

// 默认图片配置
const defaultImages = {
  project: 'https://ui-avatars.com/api/?name=Project&background=random&color=fff&size=150',
  manager: 'https://ui-avatars.com/api/?name=Manager&background=random&color=fff&size=150'
}

// 状态管理
const isLoading = ref(false)
const searchText = ref('')
const department = ref('')
const projectStatus = ref('')
const timeRange = ref('')
const currentPage = ref(1)
const pageSize = ref(10)
const totalProjects = ref(100)

// 图表相关
const performanceChartRef = ref(null)
const projectChartRef = ref(null)
let performanceChart = null
let projectChart = null

// Mock data
const mockProjects = ref([
  {
    id: 'PR1001',
    name: '智能家居系统',
    type: 'development',
    status: 'in_progress',
    progress: 75,
    startDate: '2024-01-15',
    endDate: '2024-06-30',
    budget: 500000,
    spent: 375000,
    avatar: defaultImages.project,
    manager: {
      id: 'M1001',
      name: '张经理',
      avatar: defaultImages.manager
    },
    team: [
      { id: 'E1001', name: '王开发', role: '前端开发' },
      { id: 'E1002', name: '李开发', role: '后端开发' },
      { id: 'E1003', name: '赵测试', role: '测试工程师' }
    ],
    description: '开发新一代智能家居控制系统，支持多设备联动和远程控制'
  },
  {
    id: 'PR1002',
    name: '企业ERP系统',
    type: 'implementation',
    status: 'completed',
    progress: 100,
    startDate: '2023-10-01',
    endDate: '2024-02-28',
    budget: 300000,
    spent: 280000,
    avatar: defaultImages.project,
    manager: {
      id: 'M1002',
      name: '李经理',
      avatar: defaultImages.manager
    },
    team: [
      { id: 'E1004', name: '钱顾问', role: '业务顾问' },
      { id: 'E1005', name: '孙实施', role: '实施工程师' },
      { id: 'E1006', name: '周培训', role: '培训师' }
    ],
    description: '实施企业资源计划系统，优化业务流程和管理效率'
  },
  {
    id: 'PR1003',
    name: '数据分析平台',
    type: 'development',
    status: 'in_progress',
    progress: 45,
    startDate: '2024-02-01',
    endDate: '2024-08-31',
    budget: 400000,
    spent: 180000,
    avatar: defaultImages.project,
    manager: {
      id: 'M1003',
      name: '王经理',
      avatar: defaultImages.manager
    },
    team: [
      { id: 'E1007', name: '吴数据', role: '数据分析师' },
      { id: 'E1008', name: '郑开发', role: '全栈开发' },
      { id: 'E1009', name: '冯设计', role: 'UI设计师' }
    ],
    description: '构建企业级数据分析平台，支持数据可视化和决策支持'
  },
  {
    id: 'PR1004',
    name: '移动办公系统',
    type: 'maintenance',
    status: 'in_progress',
    progress: 30,
    startDate: '2024-03-01',
    endDate: '2024-05-31',
    budget: 200000,
    spent: 60000,
    avatar: defaultImages.project,
    manager: {
      id: 'M1004',
      name: '赵经理',
      avatar: defaultImages.manager
    },
    team: [
      { id: 'E1010', name: '陈运维', role: '运维工程师' },
      { id: 'E1011', name: '褚开发', role: '移动开发' },
      { id: 'E1012', name: '卫测试', role: '测试工程师' }
    ],
    description: '维护和优化移动办公系统，提升用户体验和系统稳定性'
  },
  {
    id: 'PR1005',
    name: '客户关系管理',
    type: 'planning',
    status: 'not_started',
    progress: 0,
    startDate: '2024-04-01',
    endDate: '2024-09-30',
    budget: 350000,
    spent: 0,
    avatar: defaultImages.project,
    manager: {
      id: 'M1005',
      name: '钱经理',
      avatar: defaultImages.manager
    },
    team: [
      { id: 'E1013', name: '蒋产品', role: '产品经理' },
      { id: 'E1014', name: '沈设计', role: '交互设计师' },
      { id: 'E1015', name: '韩开发', role: '后端开发' }
    ],
    description: '规划新一代客户关系管理系统，提升客户服务质量和满意度'
  }
])

// 项目统计数据
const projectStats = ref({
  totalProjects: 15,
  activeProjects: 8,
  completedProjects: 5,
  delayedProjects: 2
})

// 项目类型分布
const projectTypeDistribution = ref([
  { type: 'development', value: 6 },
  { type: 'implementation', value: 4 },
  { type: 'maintenance', value: 3 },
  { type: 'planning', value: 2 }
])

// 项目进度趋势
const projectProgressTrends = ref([
  { date: '2024-03-01', completed: 2, inProgress: 6, notStarted: 7 },
  { date: '2024-03-02', completed: 2, inProgress: 7, notStarted: 6 },
  { date: '2024-03-03', completed: 3, inProgress: 7, notStarted: 5 },
  { date: '2024-03-04', completed: 3, inProgress: 8, notStarted: 4 },
  { date: '2024-03-05', completed: 4, inProgress: 8, notStarted: 3 },
  { date: '2024-03-06', completed: 4, inProgress: 9, notStarted: 2 },
  { date: '2024-03-07', completed: 5, inProgress: 8, notStarted: 2 }
])

// 项目预算使用情况
const budgetUsage = ref([
  { projectId: 'PR1001', name: '智能家居系统', budget: 500000, spent: 375000, usage: 75 },
  { projectId: 'PR1002', name: '企业ERP系统', budget: 300000, spent: 280000, usage: 93 },
  { projectId: 'PR1003', name: '数据分析平台', budget: 400000, spent: 180000, usage: 45 },
  { projectId: 'PR1004', name: '移动办公系统', budget: 200000, spent: 60000, usage: 30 },
  { projectId: 'PR1005', name: '客户关系管理', budget: 350000, spent: 0, usage: 0 }
])

// 性能数据
const mockPerformanceData = {
  cpu: {
    usage: 65,
    trend: [45, 50, 55, 60, 65, 70, 65],
    alerts: 2
  },
  memory: {
    usage: 75,
    trend: [60, 65, 70, 75, 80, 75, 75],
    alerts: 1
  },
  disk: {
    usage: 50,
    trend: [40, 45, 50, 55, 50, 45, 50],
    alerts: 0
  },
  network: {
    usage: 30,
    trend: [25, 30, 35, 30, 25, 30, 30],
    alerts: 0
  }
}

// 项目状态分布数据
const mockProjectData = [
  { value: 5, name: '已完成' },
  { value: 8, name: '进行中' },
  { value: 2, name: '已暂停' }
]

// 计算属性
const filteredProjects = computed(() => {
  let result = [...mockProjects.value]
  
  // 搜索过滤
  if (searchText.value) {
    result = result.filter(project => 
      project.id.includes(searchText.value) ||
      project.name.includes(searchText.value)
    )
  }
  
  // 部门过滤
  if (department.value) {
    result = result.filter(project => project.department === department.value)
  }
  
  // 状态过滤
  if (projectStatus.value) {
    result = result.filter(project => project.status === projectStatus.value)
  }
  
  // 时间范围过滤
  if (timeRange.value) {
    const now = new Date()
    result = result.filter(project => {
      // 这里可以根据实际需求添加时间过滤逻辑
      return true
    })
  }
  
  return result
})

const paginatedProjects = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredProjects.value.slice(start, end)
})

const totalPages = computed(() => {
  return Math.ceil(filteredProjects.value.length / pageSize.value)
})

// 方法
const handleSearch = () => {
  currentPage.value = 1
}

const handleDepartmentChange = () => {
  currentPage.value = 1
}

const handleProjectStatusChange = () => {
  currentPage.value = 1
}

const handleTimeRangeChange = () => {
  currentPage.value = 1
}

const handlePageChange = (page) => {
  currentPage.value = page
}

const handleViewProject = (project) => {
  console.log('查看项目:', project)
}

const handleEditProject = (project) => {
  console.log('编辑项目:', project)
}

const handleExportReport = () => {
  console.log('导出报表')
}

// 初始化绩效图表
const initPerformanceChart = () => {
  if (!performanceChartRef.value) return
  
  performanceChart = echarts.init(performanceChartRef.value)
  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['CPU', '内存', '磁盘', '网络']
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        name: 'CPU',
        type: 'line',
        data: mockPerformanceData.cpu.trend,
        smooth: true,
        itemStyle: {
          color: '#409EFF'
        }
      },
      {
        name: '内存',
        type: 'line',
        data: mockPerformanceData.memory.trend,
        smooth: true,
        itemStyle: {
          color: '#67C23A'
        }
      },
      {
        name: '磁盘',
        type: 'line',
        data: mockPerformanceData.disk.trend,
        smooth: true,
        itemStyle: {
          color: '#E6A23C'
        }
      },
      {
        name: '网络',
        type: 'line',
        data: mockPerformanceData.network.trend,
        smooth: true,
        itemStyle: {
          color: '#F56C6C'
        }
      }
    ]
  }
  
  performanceChart.setOption(option)
}

// 初始化项目图表
const initProjectChart = () => {
  if (!projectChartRef.value) return
  
  projectChart = echarts.init(projectChartRef.value)
  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      textStyle: {
        color: '#333'
      }
    },
    series: [
      {
        name: '项目状态',
        type: 'pie',
        radius: '50%',
        data: mockProjectData,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: true,
          formatter: '{b}: {c} ({d}%)'
        }
      }
    ]
  }
  projectChart.setOption(option)
}

// 处理窗口大小变化
const handleResize = () => {
  performanceChart?.resize()
  projectChart?.resize()
}

onMounted(() => {
  initPerformanceChart()
  initProjectChart()
  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  performanceChart?.dispose()
  projectChart?.dispose()
})
</script>

<style scoped>
@media (max-width: 475px) {
  .grid {
    @apply grid-cols-1;
  }
  table {
    @apply block overflow-x-auto whitespace-nowrap;
  }
}

/* 部门标签样式 */
.department-tag {
  @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
}

.dept-sales {
  @apply bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-400;
}

.dept-marketing {
  @apply bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-400;
}

.dept-development {
  @apply bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-400;
}

.dept-finance {
  @apply bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-400;
}

/* 状态标签样式 */
.status-tag {
  @apply px-2 inline-flex text-xs leading-5 font-semibold rounded-full;
}

.status-planning {
  @apply bg-yellow-100 dark:bg-yellow-900 text-yellow-800 dark:text-yellow-400;
}

.status-in_progress {
  @apply bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-400;
}

.status-completed {
  @apply bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-400;
}

.status-on_hold {
  @apply bg-gray-100 dark:bg-gray-900 text-gray-800 dark:text-gray-400;
}

/* 进度条样式 */
.progress-bar {
  @apply transition-all duration-300 ease-in-out;
}

/* 操作按钮样式 */
.action-button {
  @apply text-sm font-medium mr-3;
}

.view-button {
  @apply text-blue-600 dark:text-blue-400 hover:text-blue-900 dark:hover:text-blue-300;
}

.edit-button {
  @apply text-green-600 dark:text-green-400 hover:text-green-900 dark:hover:text-green-300;
}

/* 分页样式 */
.pagination-button {
  @apply relative inline-flex items-center px-4 py-2 border border-gray-300 dark:border-gray-600 text-sm font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600;
}

.pagination-button-active {
  @apply bg-blue-600 text-white border-blue-600;
}

/* 加载动画 */
.loading-spinner {
  @apply animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600;
}
</style> 