编辑页面

HTML内容
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>亿朋医疗器械 - 人员考勤管理系统</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #f0f2f5; color: #333; }

    /* 角色选择页面 */
    .role-select { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%); }
    .role-select h1 { color: white; font-size: 32px; margin-bottom: 12px; text-align: center; }
    .role-select p { color: rgba(255,255,255,0.8); font-size: 16px; margin-bottom: 48px; }
    .role-cards { display: flex; gap: 24px; }
    .role-card { background: white; border-radius: 16px; padding: 32px; width: 220px; text-align: center; cursor: pointer; transition: all 0.3s; box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
    .role-card:hover { transform: translateY(-8px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
    .role-icon { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 20px; display: flex; align-items: center; justify-content: center; }
    .role-icon svg { width: 40px; height: 40px; }
    .role-card h3 { font-size: 18px; margin-bottom: 8px; color: #1e3a5f; }
    .role-card p { font-size: 13px; color: #666; margin-bottom: 16px; }
    .role-tag { display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 12px; }
    .role-tag.employee { background: #dcfce7; color: #16a34a; }
    .role-tag.manager { background: #fef3c7; color: #d97706; }
    .role-tag.hr { background: #dbeafe; color: #2563eb; }

    /* 主布局 */
    .app { display: none; min-height: 100vh; }
    .app.show { display: flex; }
    .sidebar { width: 260px; background: white; border-right: 1px solid #e5e7eb; height: 100vh; position: fixed; overflow-y: auto; }
    .main-content { flex: 1; margin-left: 260px; min-height: 100vh; }

    /* 侧边栏 */
    .sidebar-header { padding: 20px; border-bottom: 1px solid #e5e7eb; }
    .sidebar-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; }
    .sidebar-logo svg { width: 32px; height: 32px; color: #1e3a5f; }
    .sidebar-logo h1 { font-size: 16px; color: #1e3a5f; }
    .sidebar-logo span { font-size: 11px; color: #999; display: block; }
    .role-indicator { display: flex; align-items: center; gap: 8px; margin-top: 16px; padding: 10px 14px; border-radius: 8px; font-size: 13px; }
    .role-indicator.employee { background: #dcfce7; color: #16a34a; }
    .role-indicator.manager { background: #fef3c7; color: #d97706; }
    .role-indicator.hr { background: #dbeafe; color: #2563eb; }

    .nav-section { padding: 16px 0; }
    .nav-title { padding: 0 20px 8px; font-size: 11px; color: #999; text-transform: uppercase; letter-spacing: 1px; }
    .nav-item { padding: 12px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s; color: #666; border-left: 3px solid transparent; }
    .nav-item:hover { background: #f5f7fa; color: #1e3a5f; }
    .nav-item.active { background: #e8f0fe; color: #1e3a5f; border-left-color: #1e3a5f; font-weight: 500; }
    .nav-item svg { width: 18px; height: 18px; }
    .nav-badge { margin-left: auto; background: #ef4444; color: white; font-size: 11px; padding: 2px 6px; border-radius: 10px; }

    .back-btn { margin: 16px 20px; padding: 10px 16px; background: #f5f7fa; border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; gap: 8px; font-size: 14px; color: #666; }
    .back-btn:hover { background: #e5e7eb; }

    /* 头部 */
    .header { background: white; padding: 16px 24px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 100; }
    .header h2 { font-size: 18px; color: #1e3a5f; }
    .header-right { display: flex; align-items: center; gap: 16px; }
    .header-user { display: flex; align-items: center; gap: 8px; }
    .header-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; color: white; }

    /* 内容区 */
    .content { padding: 24px; }
    .page { display: none; }
    .page.active { display: block; }

    /* 卡片 */
    .card { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); margin-bottom: 20px; overflow: hidden; }
    .card-header { padding: 16px 20px; border-bottom: 1px solid #f0f0f0; display: flex; justify-content: space-between; align-items: center; }
    .card-header h3 { font-size: 15px; font-weight: 600; color: #1f2937; }
    .card-body { padding: 20px; }

    /* 统计卡片 */
    .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; }
    .stat-card { background: white; border-radius: 12px; padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
    .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
    .stat-icon svg { width: 22px; height: 22px; }
    .stat-icon.blue { background: #dbeafe; color: #2563eb; }
    .stat-icon.green { background: #dcfce7; color: #16a34a; }
    .stat-icon.orange { background: #ffedd5; color: #ea580c; }
    .stat-icon.purple { background: #f3e8ff; color: #9333ea; }
    .stat-card h3 { font-size: 26px; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
    .stat-card p { font-size: 13px; color: #6b7280; }
    .stat-trend { font-size: 12px; padding: 2px 8px; border-radius: 4px; margin-left: 8px; }
    .stat-trend.up { background: #dcfce7; color: #16a34a; }
    .stat-trend.down { background: #fee2e2; color: #dc2626; }

    /* 表格 */
    .table { width: 100%; border-collapse: collapse; }
    .table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid #f0f0f0; }
    .table th { background: #f9fafb; font-weight: 600; font-size: 12px; color: #6b7280; text-transform: uppercase; }
    .table tr:hover { background: #f9fafb; }
    .table td { font-size: 14px; color: #374151; }

    /* 按钮 */
    .btn { padding: 8px 16px; border-radius: 6px; font-size: 14px; font-weight: 500; cursor: pointer; border: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 6px; }
    .btn-primary { background: #1e3a5f; color: white; }
    .btn-primary:hover { background: #2d5a87; }
    .btn-secondary { background: #f3f4f6; color: #374151; }
    .btn-secondary:hover { background: #e5e7eb; }
    .btn-success { background: #16a34a; color: white; }
    .btn-danger { background: #dc2626; color: white; }
    .btn-sm { padding: 6px 12px; font-size: 13px; }

    /* 标签 */
    .tag { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
    .tag-blue { background: #dbeafe; color: #2563eb; }
    .tag-green { background: #dcfce7; color: #16a34a; }
    .tag-orange { background: #ffedd5; color: #ea580c; }
    .tag-red { background: #fee2e2; color: #dc2626; }
    .tag-purple { background: #f3e8ff; color: #9333ea; }

    /* 头像 */
    .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; color: white; flex-shrink: 0; }
    .avatar.blue { background: #2563eb; }
    .avatar.green { background: #16a34a; }
    .avatar.orange { background: #ea580c; }
    .avatar.purple { background: #9333ea; }

    /* 搜索 */
    .search-bar { display: flex; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
    .search-input { flex: 1; min-width: 200px; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; }
    .search-input:focus { outline: none; border-color: #1e3a5f; }
    .form-select { padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; background: white; min-width: 140px; }

    /* 标签页 */
    .tabs { display: flex; border-bottom: 1px solid #e5e7eb; margin-bottom: 20px; }
    .tab { padding: 12px 20px; cursor: pointer; border-bottom: 2px solid transparent; font-weight: 500; color: #6b7280; transition: all 0.2s; }
    .tab:hover { color: #1e3a5f; }
    .tab.active { color: #1e3a5f; border-bottom-color: #1e3a5f; }

    /* 模态框 */
    .modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: none; align-items: center; justify-content: center; z-index: 1000; }
    .modal.show { display: flex; }
    .modal-content { background: white; border-radius: 12px; width: 90%; max-width: 600px; max-height: 90vh; overflow: hidden; }
    .modal-header { padding: 16px 20px; border-bottom: 1px solid #e5e7eb; display: flex; justify-content: space-between; align-items: center; }
    .modal-header h3 { font-size: 18px; font-weight: 600; }
    .modal-close { background: none; border: none; font-size: 24px; cursor: pointer; color: #6b7280; }
    .modal-body { padding: 20px; max-height: 60vh; overflow-y: auto; }
    .modal-footer { padding: 16px 20px; border-top: 1px solid #e5e7eb; display: flex; justify-content: flex-end; gap: 12px; }

    /* 表单 */
    .form-group { margin-bottom: 16px; }
    .form-label { display: block; font-size: 14px; font-weight: 500; color: #374151; margin-bottom: 6px; }
    .form-input { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; }
    .form-input:focus { outline: none; border-color: #1e3a5f; }
    .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }

    /* 进度条 */
    .progress { height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
    .progress-bar { height: 100%; background: #16a34a; border-radius: 4px; }

    /* 考勤日历 */
    .calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
    .calendar-header { text-align: center; font-weight: 600; font-size: 12px; color: #6b7280; padding: 8px; }
    .calendar-day { text-align: center; padding: 10px; font-size: 13px; border-radius: 6px; cursor: pointer; }
    .calendar-day:hover { background: #f3f4f6; }
    .calendar-day.today { background: #1e3a5f; color: white; }
    .calendar-day.off { color: #9ca3af; }
    .calendar-day.late { background: #ffedd5; }
    .calendar-day.absent { background: #fee2e2; color: #dc2626; }

    /* 图表 */
    .bar-chart { display: flex; align-items: flex-end; gap: 16px; height: 180px; padding: 20px 0; }
    .bar-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
    .bar { width: 100%; background: linear-gradient(180deg, #1e3a5f 0%, #2d5a87 100%); border-radius: 4px 4px 0 0; min-height: 20px; }
    .bar-label { font-size: 12px; color: #6b7280; }
    .bar-value { font-size: 12px; font-weight: 600; }

    /* 饼图 */
    .pie-chart { width: 140px; height: 140px; border-radius: 50%; background: conic-gradient(#1e3a5f 0deg 180deg, #2d5a87 180deg 270deg, #16a34a 270deg 324deg, #f59e0b 324deg 360deg); margin: 20px auto; position: relative; }
    .pie-center { width: 90px; height: 90px; background: white; border-radius: 50%; position: absolute; top: 25px; left: 25px; }
    .pie-legend { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 20px; }
    .legend-item { display: flex; align-items: center; gap: 6px; font-size: 12px; }
    .legend-dot { width: 10px; height: 10px; border-radius: 50%; }

    /* 开关 */
    .toggle { width: 44px; height: 24px; background: #d1d5db; border-radius: 12px; position: relative; cursor: pointer; transition: background 0.2s; }
    .toggle.active { background: #16a34a; }
    .toggle::after { content: ''; width: 20px; height: 20px; background: white; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: left 0.2s; }
    .toggle.active::after { left: 22px; }

    /* 培训卡片 */
    .training-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
    .training-card { background: white; border-radius: 12px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
    .training-header { height: 80px; display: flex; align-items: center; justify-content: center; font-size: 36px; }
    .training-body { padding: 16px; }
    .training-card h4 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
    .training-card p { font-size: 13px; color: #6b7280; margin-bottom: 12px; }

    /* 流程图 */
    .flow { display: flex; align-items: center; justify-content: center; gap: 0; }
    .flow-step { text-align: center; padding: 20px; }
    .flow-icon { width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; }
    .flow-icon svg { width: 28px; height: 28px; }
    .flow-line { width: 60px; height: 2px; background: #d1d5db; flex-shrink: 0; }

    /* 待办事项 */
    .todo-item { display: flex; align-items: center; gap: 12px; padding: 14px; background: #f9fafb; border-radius: 8px; margin-bottom: 10px; }
    .todo-priority { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
    .todo-priority.high { background: #dc2626; }
    .todo-priority.medium { background: #f59e0b; }
    .todo-priority.low { background: #16a34a; }
    .todo-content { flex: 1; }
    .todo-title { font-size: 14px; font-weight: 500; }
    .todo-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }
    .todo-actions { display: flex; gap: 6px; }

    /* 审批卡片 */
    .approval-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 16px; margin-bottom: 12px; }
    .approval-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
    .approval-user { display: flex; align-items: center; gap: 10px; }
    .approval-info { font-size: 14px; margin-bottom: 12px; }
    .approval-footer { display: flex; justify-content: space-between; align-items: center; }
    .approval-time { font-size: 12px; color: #6b7280; }

    /* 响应式 */
    @media (max-width: 1200px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .training-grid { grid-template-columns: repeat(2, 1fr); }
    }
    @media (max-width: 768px) {
      .sidebar { width: 60px; }
      .sidebar-logo h1, .sidebar-logo span, .nav-item span, .nav-title { display: none; }
      .main-content { margin-left: 60px; }
      .stats-grid { grid-template-columns: 1fr; }
      .role-cards { flex-direction: column; }
    }
  </style>
</head>
<body>
  <!-- 角色选择页面 -->
  <div class="role-select" id="roleSelect">
    <h1>亿朋医疗器械有限公司</h1>
    <p>人员考勤管理系统</p>
    <div class="role-cards">
      <div class="role-card" onclick="selectRole('employee')">
        <div class="role-icon" style="background:#dcfce7;">
          <svg viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
        </div>
        <h3>员工端</h3>
        <p>打卡、请假、查看薪资、培训学习</p>
        <span class="role-tag employee">29项功能</span>
      </div>
      <div class="role-card" onclick="selectRole('manager')">
        <div class="role-icon" style="background:#fef3c7;">
          <svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
        </div>
        <h3>主管端</h3>
        <p>团队管理、审批、考勤、排班</p>
        <span class="role-tag manager">22项功能</span>
      </div>
      <div class="role-card" onclick="selectRole('hr')">
        <div class="role-icon" style="background:#dbeafe;">
          <svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
        </div>
        <h3>HR后台</h3>
        <p>花名册、薪酬、合同、报表、系统</p>
        <span class="role-tag hr">133项功能</span>
      </div>
    </div>
  </div>

  <!-- 主应用 -->
  <div class="app" id="app">
    <!-- 侧边栏 -->
    <nav class="sidebar">
      <div class="sidebar-header">
        <div class="sidebar-logo" onclick="goHome()">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
          <div>
            <h1>亿朋医疗器械</h1>
            <span>人员考勤管理系统</span>
          </div>
        </div>
        <div class="role-indicator" id="roleIndicator"></div>
      </div>

      <button class="back-btn" onclick="goHome()">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18"><path d="M19 12H5M12 19l-7-7 7-7"/></svg>
        返回角色选择
      </button>

      <div class="nav-section">
        <div class="nav-title">工作台</div>
        <div class="nav-item active" data-page="dashboard">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/></svg>
          <span>首页仪表盘</span>
        </div>
      </div>

      <div class="nav-section" id="navModules"></div>
    </nav>

    <!-- 主内容 -->
    <main class="main-content">
      <header class="header">
        <h2 id="pageTitle">首页仪表盘</h2>
        <div class="header-right">
          <div class="header-user">
            <div style="text-align:right;">
              <div style="font-weight:500;font-size:14px;" id="userName">张明</div>
              <div style="font-size:12px;color:#666;" id="userDept">人事部</div>
            </div>
            <div class="header-avatar" id="headerAvatar" style="background:#1e3a5f;">张</div>
          </div>
        </div>
      </header>

      <div class="content" id="mainContent">
        <!-- 页面内容将动态插入 -->
      </div>
    </main>
  </div>

  <!-- 模态框 -->
  <div class="modal" id="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h3 id="modalTitle">模态框</h3>
        <button class="modal-close" onclick="closeModal()">×</button>
      </div>
      <div class="modal-body" id="modalBody"></div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal()">取消</button>
        <button class="btn btn-primary" onclick="closeModal()">确定</button>
      </div>
    </div>
  </div>

  <script>
    // 当前角色
    let currentRole = '';
    const roleNames = { employee: '员工端', manager: '主管端', hr: 'HR后台' };

    // 用户信息
    const users = {
      employee: { name: '张明', dept: '人事部', avatar: '张' },
      manager: { name: '李主管', dept: '生产部', avatar: '李' },
      hr: { name: '王HR', dept: '人力资源部', avatar: '王' }
    };

    // 角色对应的模块
    const roleModules = {
      employee: [
        { title: '日常办公', items: [
          { id: 'clock', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>', name: '上下班打卡', badge: '' },
          { id: 'schedule', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>', name: '排班查询', badge: '' },
          { id: 'leave', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>', name: '请假申请', badge: '2' },
          { id: 'overtime', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>', name: '加班申请', badge: '' },
          { id: 'travel', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>', name: '出差申请', badge: '' },
        ]},
        { title: '个人中心', items: [
          { id: 'profile', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>', name: '个人信息', badge: '' },
          { id: 'salary', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>', name: '工资查询', badge: '' },
          { id: 'training', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>', name: '培训学习', badge: '3' },
          { id: 'contract', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>', name: '合同查询', badge: '' },
        ]},
      ],
      manager: [
        { title: '团队管理', items: [
          { id: 'team', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>', name: '团队花名册', badge: '' },
          { id: 'team-schedule', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>', name: '团队排班', badge: '' },
          { id: 'team-attendance', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>', name: '团队考勤', badge: '' },
        ]},
        { title: '审批管理', items: [
          { id: 'approval-leave', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>', name: '请假审批', badge: '5' },
          { id: 'approval-overtime', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>', name: '加班审批', badge: '2' },
          { id: 'approval-travel', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>', name: '出差审批', badge: '1' },
          { id: 'approval-leave-job', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>', name: '离职审批', badge: '1' },
        ]},
        { title: '数据分析', items: [
          { id: 'report-attendance', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>', name: '考勤报表', badge: '' },
          { id: 'report-salary', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>', name: '薪资报表', badge: '' },
          { id: 'report-training', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>', name: '培训报表', badge: '' },
        ]},
      ],
      hr: [
        { title: '人力资源', items: [
          { id: 'org', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="2" y="3" width="6" height="6"/><rect x="2" y="15" width="6" height="6"/><rect x="16" y="9" width="6" height="6"/><line x1="5" y1="9" x2="16" y2="9"/><line x1="5" y1="15" x2="16" y2="15"/></svg>', name: '组织架构', badge: '' },
          { id: 'roster', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>', name: '员工花名册', badge: '' },
          { id: 'entry', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M16 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="8.5" cy="7" r="4"/><line x1="20" y1="8" x2="20" y2="14"/><line x1="23" y1="11" x2="17" y2="11"/></svg>', name: '入职管理', badge: '3' },
          { id: 'transfer', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="17 1 21 5 17 9"/><path d="M3 11V9a4 4 0 0 1 4-4h14"/><polyline points="7 23 3 19 7 15"/><path d="M21 13v2a4 4 0 0 1-4 4H3"/></svg>', name: '调动管理', badge: '1' },
          { id: 'quit', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>', name: '离职管理', badge: '2' },
        ]},
        { title: '考勤薪酬', items: [
          { id: 'attendance-rules', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>', name: '考勤规则', badge: '' },
          { id: 'attendance-schedule', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>', name: '排班管理', badge: '' },
          { id: 'attendance-record', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg>', name: '打卡记录', badge: '' },
          { id: 'salary-rules', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>', name: '薪资模板', badge: '' },
          { id: 'salary-calculate', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="4" y="4" width="16" height="16" rx="2" ry="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/></svg>', name: '薪资核算', badge: '' },
          { id: 'salary-payment', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>', name: '工资发放', badge: '' },
        ]},
        { title: '审批合同', items: [
          { id: 'approval-all', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>', name: '审批管理', badge: '8' },
          { id: 'contract-manage', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>', name: '合同管理', badge: '5' },
          { id: 'contract-template', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg>', name: '合同模板', badge: '' },
        ]},
        { title: '培训管理', items: [
          { id: 'training-plan', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg>', name: '培训计划', badge: '' },
          { id: 'training-course', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>', name: '课程管理', badge: '' },
          { id: 'training-record', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>', name: '培训记录', badge: '' },
          { id: 'training-stat', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>', name: '培训统计', badge: '' },
        ]},
        { title: '系统报表', items: [
          { id: 'report-person', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>', name: '人员报表', badge: '' },
          { id: 'report-attendance-hr', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>', name: '考勤报表', badge: '' },
          { id: 'report-salary-hr', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>', name: '薪资报表', badge: '' },
          { id: 'system-settings', icon: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>', name: '系统设置', badge: '' },
        ]},
      ]
    };

    // 页面内容
    const pages = {
      dashboard: {
        employee: () => `
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
              <h3>08:32<span class="stat-trend up">正常</span></h3>
              <p>今日上班打卡</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg></div>
              <h3>5<span class="stat-trend up">+2</span></h3>
              <p>剩余年假(天)</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/></svg></div>
              <h3>2</h3>
              <p>待审批申请</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
              <h3>3</h3>
              <p>待完成培训</p>
            </div>
          </div>
          <div style="display:grid;grid-template-columns:2fr 1fr;gap:20px;">
            <div class="card">
              <div class="card-header"><h3>考勤日历</h3><span class="tag tag-green">本月出勤 21天</span></div>
              <div class="card-body">
                <div class="calendar">
                  <div class="calendar-header">日</div><div class="calendar-header">一</div><div class="calendar-header">二</div>
                  <div class="calendar-header">三</div><div class="calendar-header">四</div><div class="calendar-header">五</div><div class="calendar-header">六</div>
                  <div class="calendar-day off"></div><div class="calendar-day off"></div><div class="calendar-day">1</div><div class="calendar-day today">2</div>
                  <div class="calendar-day">3</div><div class="calendar-day off">4</div><div class="calendar-day off">5</div>
                  <div class="calendar-day">6</div><div class="calendar-day">7</div><div class="calendar-day">8</div><div class="calendar-day">9</div>
                  <div class="calendar-day">10</div><div class="calendar-day off">11</div><div class="calendar-day off">12</div>
                  <div class="calendar-day">13</div><div class="calendar-day">14</div><div class="calendar-day">15</div><div class="calendar-day">16</div>
                  <div class="calendar-day">17</div><div class="calendar-day off">18</div><div class="calendar-day off">19</div>
                  <div class="calendar-day">20</div><div class="calendar-day">21</div><div class="calendar-day">22</div><div class="calendar-day">23</div>
                  <div class="calendar-day">24</div><div class="calendar-day off">25</div><div class="calendar-day off">26</div>
                  <div class="calendar-day">27</div><div class="calendar-day">28</div><div class="calendar-day">29</div><div class="calendar-day">30</div>
                  <div class="calendar-day">31</div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header"><h3>待办事项</h3></div>
              <div class="card-body">
                <div class="todo-item"><div class="todo-priority high"></div><div class="todo-content"><div class="todo-title">提交3月补卡申请</div><div class="todo-meta">截止今天</div></div></div>
                <div class="todo-item"><div class="todo-priority medium"></div><div class="todo-content"><div class="todo-title">完成GMP培训</div><div class="todo-meta">截止本周五</div></div></div>
                <div class="todo-item"><div class="todo-priority low"></div><div class="todo-content"><div class="todo-title">更新个人信息</div><div class="todo-meta">可选</div></div></div>
              </div>
            </div>
          </div>
        `,
        manager: () => `
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div>
              <h3>45<span class="stat-trend up">+2</span></h3>
              <p>团队人数</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg></div>
              <h3>43<span class="stat-trend up">95.6%</span></h3>
              <p>今日出勤</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
              <h3>9</h3>
              <p>待审批</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div>
              <h3>12</h3>
              <p>培训完成率</p>
            </div>
          </div>
          <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
            <div class="card">
              <div class="card-header"><h3>待我审批</h3><span class="tag tag-orange">9条待处理</span></div>
              <div class="card-body">
                <div class="approval-card">
                  <div class="approval-header">
                    <div class="approval-user"><div class="avatar blue">王</div><div><div style="font-weight:600;">王建国</div><div style="font-size:12px;color:#666;">生产车间A组</div></div></div>
                    <span class="tag tag-blue">请假申请</span>
                  </div>
                  <div class="approval-info">申请年假 <strong>3天</strong>（3月15日-3月17日）</div>
                  <div class="approval-footer">
                    <span class="approval-time">10分钟前</span>
                    <div style="display:flex;gap:8px;"><button class="btn btn-success btn-sm">同意</button><button class="btn btn-danger btn-sm">拒绝</button></div>
                  </div>
                </div>
                <div class="approval-card">
                  <div class="approval-header">
                    <div class="approval-user"><div class="avatar green">赵</div><div><div style="font-weight:600;">赵敏</div><div style="font-size:12px;color:#666;">生产车间A组</div></div></div>
                    <span class="tag tag-purple">加班申请</span>
                  </div>
                  <div class="approval-info">申请加班 <strong>4小时</strong>（3月10日 18:00-22:00）</div>
                  <div class="approval-footer">
                    <span class="approval-time">30分钟前</span>
                    <div style="display:flex;gap:8px;"><button class="btn btn-success btn-sm">同意</button><button class="btn btn-danger btn-sm">拒绝</button></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header"><h3>团队考勤概览</h3></div>
              <div class="card-body">
                <div class="bar-chart">
                  <div class="bar-item"><div class="bar-value">43</div><div class="bar" style="height:160px;"></div><div class="bar-label">周一</div></div>
                  <div class="bar-item"><div class="bar-value">45</div><div class="bar" style="height:180px;"></div><div class="bar-label">周二</div></div>
                  <div class="bar-item"><div class="bar-value">44</div><div class="bar" style="height:170px;"></div><div class="bar-label">周三</div></div>
                  <div class="bar-item"><div class="bar-value">45</div><div class="bar" style="height:180px;"></div><div class="bar-label">周四</div></div>
                  <div class="bar-item"><div class="bar-value">42</div><div class="bar" style="height:150px;"></div><div class="bar-label">周五</div></div>
                </div>
              </div>
            </div>
          </div>
        `,
        hr: () => `
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/></svg></div>
              <h3>468<span class="stat-trend up">+15</span></h3>
              <p>在职员工</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/></svg></div>
              <h3>98.2%<span class="stat-trend up">+0.5%</span></h3>
              <p>本月出勤率</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div>
              <h3>18</h3>
              <p>待审批</p>
            </div>
            <div class="stat-card">
              <div class="stat-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div>
              <h3>¥4,285,000</h3>
              <p>本月工资总额</p>
            </div>
          </div>
          <div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:20px;">
            <div class="card">
              <div class="card-header"><h3>人员构成</h3></div>
              <div class="card-body">
                <div style="display:flex;gap:40px;">
                  <div class="pie-chart"><div class="pie-center"></div></div>
                  <div style="flex:1;">
                    <div style="margin-bottom:16px;"><div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>生产人员</span><strong>234人(50%)</strong></div><div class="progress"><div class="progress-bar" style="width:50%;"></div></div></div>
                    <div style="margin-bottom:16px;"><div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>技术人员</span><strong>117人(25%)</strong></div><div class="progress"><div class="progress-bar" style="width:25%;"></div></div></div>
                    <div style="margin-bottom:16px;"><div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>管理人员</span><strong>70人(15%)</strong></div><div class="progress"><div class="progress-bar" style="width:15%;"></div></div></div>
                    <div><div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>其他</span><strong>47人(10%)</strong></div><div class="progress"><div class="progress-bar" style="width:10%;"></div></div></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header"><h3>考勤异常</h3></div>
              <div class="card-body">
                <div style="text-align:center;padding:20px;"><h3 style="font-size:36px;color:#ea580c;">12</h3><p style="color:#666;">考勤异常</p></div>
                <div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;text-align:center;">
                  <div style="background:#fef3c7;padding:12px;border-radius:8px;"><div style="font-size:20px;font-weight:600;">5</div><div style="font-size:12px;color:#d97706;">迟到</div></div>
                  <div style="background:#fee2e2;padding:12px;border-radius:8px;"><div style="font-size:20px;font-weight:600;">3</div><div style="font-size:12px;color:#dc2626;">旷工</div></div>
                  <div style="background:#dbeafe;padding:12px;border-radius:8px;"><div style="font-size:20px;font-weight:600;">2</div><div style="font-size:12px;color:#2563eb;">早退</div></div>
                  <div style="background:#f3e8ff;padding:12px;border-radius:8px;"><div style="font-size:20px;font-weight:600;">2</div><div style="font-size:12px;color:#9333ea;">缺卡</div></div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header"><h3>合同到期</h3></div>
              <div class="card-body">
                <div style="text-align:center;padding:20px;"><h3 style="font-size:36px;color:#dc2626;">8</h3><p style="color:#666;">即将到期</p></div>
                <div style="font-size:13px;color:#666;">以下是30天内即将到期的合同：</div>
                <div style="margin-top:12px;">
                  <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;"><span>王建国</span><span style="color:#dc2626;">3月15日</span></div>
                  <div style="display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f0f0f0;"><span>李晓华</span><span style="color:#dc2626;">3月18日</span></div>
                  <div style="display:flex;justify-content:space-between;padding:8px 0;"><span>陈思</span><span style="color:#ea580c;">3月25日</span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="card" style="margin-top:20px;">
            <div class="card-header"><h3>最新动态</h3></div>
            <div class="card-body" style="display:grid;grid-template-columns:repeat(4,1fr);gap:20px;">
              <div style="display:flex;align-items:center;gap:12px;"><div class="avatar green">李</div><div><div style="font-size:14px;">李晓华 入职</div><div style="font-size:12px;color:#666;">5分钟前</div></div></div>
              <div style="display:flex;align-items:center;gap:12px;"><div class="avatar blue">赵</div><div><div style="font-size:14px;">赵敏 请假获批</div><div style="font-size:12px;color:#666;">15分钟前</div></div></div>
              <div style="display:flex;align-items:center;gap:12px;"><div class="avatar orange">王</div><div><div style="font-size:14px;">王建国 调岗</div><div style="font-size:12px;color:#666;">30分钟前</div></div></div>
              <div style="display:flex;align-items:center;gap:12px;"><div class="avatar purple">陈</div><div><div style="font-size:14px;">陈思 培训完成</div><div style="font-size:12px;color:#666;">1小时前</div></div></div>
            </div>
          </div>
        `
      },
      roster: () => `
        <div class="search-bar">
          <input type="text" class="search-input" placeholder="搜索姓名、工号、手机号...">
          <select class="form-select"><option>全部部门</option><option>生产部</option><option>技术部</option><option>销售部</option></select>
          <select class="form-select"><option>全部状态</option><option>在职</option><option>离职</option></select>
          <button class="btn btn-primary">搜索</button>
        </div>
        <div class="card">
          <div class="card-header">
            <h3>员工花名册</h3>
            <div style="display:flex;gap:12px;">
              <button class="btn btn-secondary btn-sm">导出</button>
              <button class="btn btn-primary btn-sm" onclick="openModal('addEmployee')">+ 新增员工</button>
            </div>
          </div>
          <table class="table">
            <thead><tr><th>工号</th><th>姓名</th><th>部门</th><th>岗位</th><th>入职日期</th><th>合同状态</th><th>操作</th></tr></thead>
            <tbody>
              <tr><td>EMP001</td><td style="display:flex;align-items:center;gap:10px;"><div class="avatar blue">张</div>张明</td><td>人事部</td><td>人事专员</td><td>2022-03-15</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-secondary">查看</button></td></tr>
              <tr><td>EMP002</td><td style="display:flex;align-items:center;gap:10px;"><div class="avatar green">李</div>李晓华</td><td>生产部</td><td>生产主管</td><td>2021-08-20</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-secondary">查看</button></td></tr>
              <tr><td>EMP003</td><td style="display:flex;align-items:center;gap:10px;"><div class="avatar orange">王</div>王建国</td><td>质量部</td><td>质量工程师</td><td>2020-11-01</td><td><span class="tag tag-orange">即将到期</span></td><td><button class="btn btn-sm btn-secondary">查看</button></td></tr>
              <tr><td>EMP004</td><td style="display:flex;align-items:center;gap:10px;"><div class="avatar purple">赵</div>赵敏</td><td>研发部</td><td>研发工程师</td><td>2023-06-10</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-secondary">查看</button></td></tr>
              <tr><td>EMP005</td><td style="display:flex;align-items:center;gap:10px;"><div class="avatar blue">陈</div>陈思</td><td>销售部</td><td>销售经理</td><td>2019-01-15</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-secondary">查看</button></td></tr>
            </tbody>
          </table>
        </div>
      `,
      attendance: () => `
        <div class="tabs"><div class="tab active">考勤记录</div><div class="tab">异常处理</div><div class="tab">排班管理</div><div class="tab">考勤规则</div></div>
        <div style="display:grid;grid-template-columns:2fr 1fr;gap:20px;">
          <div class="card">
            <div class="card-header"><h3>本月考勤概览</h3><select class="form-select" style="width:140px;"><option>2024年3月</option></select></div>
            <div class="card-body">
              <div class="calendar">
                <div class="calendar-header">日</div><div class="calendar-header">一</div><div class="calendar-header">二</div>
                <div class="calendar-header">三</div><div class="calendar-header">四</div><div class="calendar-header">五</div><div class="calendar-header">六</div>
                <div class="calendar-day off"></div><div class="calendar-day off"></div><div class="calendar-day">1</div><div class="calendar-day today">2</div>
                <div class="calendar-day">3</div><div class="calendar-day off">4</div><div class="calendar-day off">5</div>
                <div class="calendar-day">6</div><div class="calendar-day">7</div><div class="calendar-day">8</div><div class="calendar-day">9</div>
                <div class="calendar-day">10</div><div class="calendar-day off">11</div><div class="calendar-day off">12</div>
                <div class="calendar-day">13</div><div class="calendar-day">14</div><div class="calendar-day">15</div><div class="calendar-day">16</div>
                <div class="calendar-day">17</div><div class="calendar-day off">18</div><div class="calendar-day off">19</div>
                <div class="calendar-day">20</div><div class="calendar-day">21</div><div class="calendar-day">22</div><div class="calendar-day">23</div>
                <div class="calendar-day">24</div><div class="calendar-day off">25</div><div class="calendar-day off">26</div>
                <div class="calendar-day">27</div><div class="calendar-day">28</div><div class="calendar-day">29</div><div class="calendar-day">30</div><div class="calendar-day">31</div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>考勤统计</h3></div>
            <div class="card-body">
              <div style="padding:16px 0;border-bottom:1px solid #f0f0f0;"><div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span style="color:#666;">出勤天数</span><strong>21天</strong></div><div class="progress"><div class="progress-bar" style="width:90%;"></div></div></div>
              <div style="padding:16px 0;border-bottom:1px solid #f0f0f0;"><div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span style="color:#666;">迟到次数</span><strong>2次</strong></div><div class="progress"><div class="progress-bar" style="width:8%;"></div></div></div>
              <div style="padding:16px 0;border-bottom:1px solid #f0f0f0;"><div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span style="color:#666;">早退次数</span><strong>0次</strong></div><div class="progress"><div class="progress-bar" style="width:0%;"></div></div></div>
              <div style="padding:16px 0;"><div style="display:flex;justify-content:space-between;margin-bottom:8px;"><span style="color:#666;">请假天数</span><strong>1天</strong></div><div class="progress"><div class="progress-bar" style="width:4%;"></div></div></div>
            </div>
          </div>
        </div>
        <div class="card" style="margin-top:20px;">
          <div class="card-header"><h3>考勤明细</h3><button class="btn btn-primary btn-sm">导出记录</button></div>
          <table class="table">
            <thead><tr><th>日期</th><th>上班打卡</th><th>下班打卡</th><th>工作时长</th><th>状态</th><th>备注</th></tr></thead>
            <tbody>
              <tr><td>2024-03-02</td><td>08:32</td><td>17:45</td><td>8.2h</td><td><span class="tag tag-green">正常</span></td><td>-</td></tr>
              <tr><td>2024-03-01</td><td>08:05</td><td>18:10</td><td>9.1h</td><td><span class="tag tag-green">正常</span></td><td>-</td></tr>
              <tr><td>2024-02-29</td><td>09:15</td><td>18:00</td><td>7.8h</td><td><span class="tag tag-orange">迟到</span></td><td>地铁延误</td></tr>
            </tbody>
          </table>
        </div>
      `,
      salary: () => `
        <div class="stats-grid" style="grid-template-columns:repeat(3,1fr);">
          <div class="stat-card"><div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div><h3>¥8,720</h3><p>本月应发工资</p></div>
          <div class="stat-card"><div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg></div><h3>¥6,500</h3><p>基本工资</p></div>
          <div class="stat-card"><div class="stat-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/><polyline points="17 6 23 6 23 12"/></svg></div><h3>+15.2%</h3><p>同比增长</p></div>
        </div>
        <div class="card">
          <div class="card-header"><h3>3月份工资条</h3><button class="btn btn-secondary btn-sm">打印</button></div>
          <div class="card-body">
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:40px;">
              <div>
                <h4 style="margin-bottom:16px;color:#1e3a5f;">应发项目</h4>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span>基本工资</span><strong>¥6,500</strong></div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span>岗位工资</span><strong>¥1,200</strong></div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span>绩效奖金</span><strong>¥800</strong></div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span>餐补</span><strong>¥220</strong></div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;"><span>应发合计</span><strong style="color:#16a34a;">¥8,720</strong></div>
              </div>
              <div>
                <h4 style="margin-bottom:16px;color:#dc2626;">扣款项目</h4>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span>社保</span><strong>-¥520</strong></div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span>公积金</span><strong>-¥260</strong></div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span>个税</span><strong>-¥180</strong></div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f0f0f0;"><span>考勤扣款</span><strong>-¥40</strong></div>
                <div style="display:flex;justify-content:space-between;padding:10px 0;"><span>扣款合计</span><strong style="color:#dc2626;">-¥1,000</strong></div>
              </div>
            </div>
            <div style="margin-top:30px;padding:20px;background:#f9fafb;border-radius:8px;text-align:center;"><div style="font-size:14px;color:#666;">实发工资</div><div style="font-size:32px;font-weight:700;color:#1e3a5f;">¥7,720</div></div>
          </div>
        </div>
      `,
      training: () => `
        <div class="stats-grid" style="grid-template-columns:repeat(4,1fr);">
          <div class="stat-card"><div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div><h3>12</h3><p>必修课程</p></div>
          <div class="stat-card"><div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="9 11 12 14 22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div><h3>8</h3><p>已完成</p></div>
          <div class="stat-card"><div class="stat-icon orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><h3>4</h3><p>进行中</p></div>
          <div class="stat-card"><div class="stat-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><h3>92%</h3><p>完成率</p></div>
        </div>
        <div class="card">
          <div class="card-header"><h3>培训课程</h3><div style="display:flex;gap:8px;"><button class="btn btn-primary btn-sm">必修</button><button class="btn btn-secondary btn-sm">选修</button></div></div>
          <div class="card-body">
            <div class="training-grid">
              <div class="training-card"><div class="training-header" style="background:linear-gradient(135deg,#fee2e2,#fecaca);"><svg viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" style="width:40px;height:40px;"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div><div class="training-body"><span class="tag tag-red" style="margin-bottom:8px;">必修</span><h4>GMP生产质量管理规范</h4><p>质量管理原则及实施要点</p><div class="progress"><div class="progress-bar" style="width:100%;"></div></div><div style="display:flex;justify-content:space-between;font-size:12px;color:#666;margin-top:8px;"><span>进度 100%</span><span>已完成</span></div></div></div>
              <div class="training-card"><div class="training-header" style="background:linear-gradient(135deg,#fef3c7,#fde68a);"><svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" style="width:40px;height:40px;"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"/><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"/></svg></div><div class="training-body"><span class="tag tag-red" style="margin-bottom:8px;">必修</span><h4>GSP经营质量管理规范</h4><p>GSP全过程管理要求</p><div class="progress"><div class="progress-bar" style="width:75%;"></div></div><div style="display:flex;justify-content:space-between;font-size:12px;color:#666;margin-top:8px;"><span>进度 75%</span><span>预计2天</span></div></div></div>
              <div class="training-card"><div class="training-header" style="background:linear-gradient(135deg,#dbeafe,#bfdbfe);"><svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" style="width:40px;height:40px;"><rect x="3" y="3" width="18" height="18" rx="2" ry="2"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="9" y1="21" x2="9" y2="9"/></svg></div><div class="training-body"><span class="tag tag-blue" style="margin-bottom:8px;">选修</span><h4>医疗器械法规解读</h4><p>最新法规政策与合规要点</p><div class="progress"><div class="progress-bar" style="width:45%;"></div></div><div style="display:flex;justify-content:space-between;font-size:12px;color:#666;margin-top:8px;"><span>进度 45%</span><span>预计5天</span></div></div></div>
            </div>
          </div>
        </div>
      `,
      contract: () => `
        <div class="stats-grid" style="grid-template-columns:repeat(4,1fr);">
          <div class="stat-card"><div class="stat-icon blue"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/></svg></div><h3>468</h3><p>合同总数</p></div>
          <div class="stat-card"><div class="stat-icon green"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg></div><h3>398</h3><p>正常执行</p></div>
          <div class="stat-card"><div class="stat-icon orange"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div><h3>8</h3><p>即将到期</p></div>
          <div class="stat-card"><div class="stat-icon purple"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg></div><h3>62</h3><p>本月新签</p></div>
        </div>
        <div class="card">
          <div class="card-header"><h3>合同列表</h3><div style="display:flex;gap:12px;"><button class="btn btn-secondary btn-sm">导出</button><button class="btn btn-primary btn-sm">+ 新建合同</button></div></div>
          <table class="table">
            <thead><tr><th>合同编号</th><th>员工姓名</th><th>合同类型</th><th>签订日期</th><th>到期日期</th><th>状态</th><th>操作</th></tr></thead>
            <tbody>
              <tr><td>HT2024001</td><td>张明</td><td>劳动合同</td><td>2022-03-15</td><td>2025-03-14</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-secondary">查看</button></td></tr>
              <tr><td>HT2024002</td><td>李晓华</td><td>劳动合同</td><td>2021-08-20</td><td>2024-08-19</td><td><span class="tag tag-orange">即将到期</span></td><td><button class="btn btn-sm btn-secondary">查看</button></td></tr>
              <tr><td>HT2024003</td><td>王建国</td><td>劳动合同</td><td>2020-11-01</td><td>2024-03-15</td><td><span class="tag tag-red">即将到期</span></td><td><button class="btn btn-sm btn-primary">续签</button></td></tr>
              <tr><td>HT2024004</td><td>赵敏</td><td>劳动合同</td><td>2023-06-10</td><td>2026-06-09</td><td><span class="tag tag-green">正常</span></td><td><button class="btn btn-sm btn-secondary">查看</button></td></tr>
            </tbody>
          </table>
        </div>
      `,
      approval: () => `
        <div class="tabs"><div class="tab active">请假审批</div><div class="tab">加班审批</div><div class="tab">出差审批</div><div class="tab">离职审批</div></div>
        <div class="card">
          <div class="card-header"><h3>待我审批</h3><span class="tag tag-orange">9条待处理</span></div>
          <div class="card-body">
            <div class="approval-card">
              <div class="approval-header">
                <div class="approval-user"><div class="avatar blue">王</div><div><div style="font-weight:600;">王建国</div><div style="font-size:12px;color:#666;">质量部</div></div></div>
                <span class="tag tag-blue">请假申请</span>
              </div>
              <div class="approval-info">申请年假 <strong>5天</strong>（2024-03-10 至 2024-03-14）</div>
              <div class="approval-footer"><span class="approval-time">提交于 10分钟前</span><div style="display:flex;gap:8px;"><button class="btn btn-success btn-sm">同意</button><button class="btn btn-danger btn-sm">拒绝</button></div></div>
            </div>
            <div class="approval-card">
              <div class="approval-header">
                <div class="approval-user"><div class="avatar green">赵</div><div><div style="font-weight:600;">赵敏</div><div style="font-size:12px;color:#666;">研发部</div></div></div>
                <span class="tag tag-purple">加班申请</span>
              </div>
              <div class="approval-info">申请加班 <strong>8小时</strong>（2024-03-08 18:00-22:00，03-09 09:00-13:00）</div>
              <div class="approval-footer"><span class="approval-time">提交于 30分钟前</span><div style="display:flex;gap:8px;"><button class="btn btn-success btn-sm">同意</button><button class="btn btn-danger btn-sm">拒绝</button></div></div>
            </div>
            <div class="approval-card">
              <div class="approval-header">
                <div class="approval-user"><div class="avatar orange">陈</div><div><div style="font-weight:600;">陈思</div><div style="font-size:12px;color:#666;">销售部</div></div></div>
                <span class="tag tag-green">出差申请</span>
              </div>
              <div class="approval-info">申请出差前往 <strong>北京分公司</strong>（2024-03-15 至 2024-03-17）</div>
              <div class="approval-footer"><span class="approval-time">提交于 1小时前</span><div style="display:flex;gap:8px;"><button class="btn btn-success btn-sm">同意</button><button class="btn btn-danger btn-sm">拒绝</button></div></div>
            </div>
          </div>
        </div>
      `,
      report: () => `
        <div class="stats-grid" style="grid-template-columns:repeat(4,1fr);">
          <div class="stat-card"><h3>468</h3><p>期末人数</p></div>
          <div class="stat-card"><h3>15</h3><p>本月入职</p></div>
          <div class="stat-card"><h3>8</h3><p>本月离职</p></div>
          <div class="stat-card"><h3>92.5%</h3><p>员工稳定性</p></div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;">
          <div class="card">
            <div class="card-header"><h3>部门人员分布</h3></div>
            <div class="card-body">
              <div style="margin-bottom:16px;"><div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>生产部</span><strong>234人 (50%)</strong></div><div class="progress"><div class="progress-bar" style="width:50%;"></div></div></div>
              <div style="margin-bottom:16px;"><div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>技术部</span><strong>117人 (25%)</strong></div><div class="progress"><div class="progress-bar" style="width:25%;"></div></div></div>
              <div style="margin-bottom:16px;"><div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>销售部</span><strong>70人 (15%)</strong></div><div class="progress"><div class="progress-bar" style="width:15%;"></div></div></div>
              <div><div style="display:flex;justify-content:space-between;margin-bottom:6px;"><span>其他</span><strong>47人 (10%)</strong></div><div class="progress"><div class="progress-bar" style="width:10%;"></div></div></div>
            </div>
          </div>
          <div class="card">
            <div class="card-header"><h3>人员流动趋势</h3></div>
            <div class="card-body">
              <div class="bar-chart" style="height:160px;">
                <div class="bar-item"><div class="bar-value">+12</div><div class="bar" style="height:60px;background:#16a34a;"></div><div class="bar-label">1月</div></div>
                <div class="bar-item"><div class="bar-value">+8</div><div class="bar" style="height:40px;background:#16a34a;"></div><div class="bar-label">2月</div></div>
                <div class="bar-item"><div class="bar-value">+15</div><div class="bar" style="height:75px;background:#16a34a;"></div><div class="bar-label">3月</div></div>
                <div class="bar-item"><div class="bar-value">+10</div><div class="bar" style="height:50px;background:#16a34a;"></div><div class="bar-label">4月</div></div>
                <div class="bar-item"><div class="bar-value">+7</div><div class="bar" style="height:35px;background:#16a34a;"></div><div class="bar-label">5月</div></div>
              </div>
            </div>
          </div>
        </div>
        <div class="card" style="margin-top:20px;">
          <div class="card-header"><h3>培训统计报表</h3><button class="btn btn-secondary btn-sm">导出</button></div>
          <table class="table">
            <thead><tr><th>培训名称</th><th>类型</th><th>参与人数</th><th>完成率</th><th>平均成绩</th><th>通过率</th></tr></thead>
            <tbody>
              <tr><td>GMP生产质量管理规范</td><td><span class="tag tag-red">必修</span></td><td>460人</td><td>98%</td><td>92分</td><td><span class="tag tag-green">95%</span></td></tr>
              <tr><td>GSP经营质量管理规范</td><td><span class="tag tag-red">必修</span></td><td>455人</td><td>96%</td><td>88分</td><td><span class="tag tag-green">92%</span></td></tr>
              <tr><td>医疗器械法规培训</td><td><span class="tag tag-blue">选修</span></td><td>420人</td><td>85%</td><td>85分</td><td><span class="tag tag-green">88%</span></td></tr>
            </tbody>
          </table>
        </div>
      `,
      settings: () => `
        <div class="card">
          <div class="card-header"><h3>基础数据配置</h3><button class="btn btn-primary btn-sm">新增</button></div>
          <table class="table">
            <thead><tr><th>编号</th><th>数据名称</th><th>分类</th><th>状态</th><th>操作</th></tr></thead>
            <tbody>
              <tr><td>001</td><td>事假</td><td>假期类型</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-secondary">编辑</button></td></tr>
              <tr><td>002</td><td>年假</td><td>假期类型</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-secondary">编辑</button></td></tr>
              <tr><td>003</td><td>病假</td><td>假期类型</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-secondary">编辑</button></td></tr>
              <tr><td>004</td><td>产假</td><td>假期类型</td><td><span class="tag tag-green">启用</span></td><td><button class="btn btn-sm btn-secondary">编辑</button></td></tr>
            </tbody>
          </table>
        </div>
        <div class="card" style="margin-top:20px;">
          <div class="card-header"><h3>系统集成设置</h3></div>
          <div class="card-body">
            <div style="display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #f0f0f0;">
              <div><div style="font-weight:500;">企业微信同步</div><div style="font-size:13px;color:#666;">同步企业微信组织架构和员工信息</div></div>
              <div class="toggle active" onclick="this.classList.toggle('active')"></div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #f0f0f0;">
              <div><div style="font-weight:500;">钉钉集成</div><div style="font-size:13px;color:#666;">对接钉钉考勤和审批流程</div></div>
              <div class="toggle" onclick="this.classList.toggle('active')"></div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:16px 0;border-bottom:1px solid #f0f0f0;">
              <div><div style="font-weight:500;">考勤机对接</div><div style="font-size:13px;color:#666;">连接门禁考勤设备实时获取数据</div></div>
              <div class="toggle active" onclick="this.classList.toggle('active')"></div>
            </div>
            <div style="display:flex;justify-content:space-between;align-items:center;padding:16px 0;">
              <div><div style="font-weight:500;">银行代发</div><div style="font-size:13px;color:#666;">对接银行API实现工资代发</div></div>
              <div class="toggle" onclick="this.classList.toggle('active')"></div>
            </div>
          </div>
        </div>
      `
    };

    // 选择角色
    function selectRole(role) {
      currentRole = role;
      document.getElementById('roleSelect').style.display = 'none';
      document.getElementById('app').classList.add('show');

      // 更新用户信息
      const user = users[role];
      document.getElementById('userName').textContent = user.name;
      document.getElementById('userDept').textContent = user.dept;
      document.getElementById('headerAvatar').textContent = user.avatar;
      document.getElementById('headerAvatar').style.background = role === 'employee' ? '#16a34a' : role === 'manager' ? '#d97706' : '#2563eb';

      // 更新角色标识
      const indicator = document.getElementById('roleIndicator');
      indicator.className = 'role-indicator ' + role;
      indicator.textContent = roleNames[role];

      // 渲染导航
      renderNav(role);

      // 显示首页
      showPage('dashboard');
    }

    // 渲染导航
    function renderNav(role) {
      const navModules = document.getElementById('navModules');
      navModules.innerHTML = '';

      roleModules[role].forEach(section => {
        const sectionDiv = document.createElement('div');
        sectionDiv.className = 'nav-section';
        sectionDiv.innerHTML = `<div class="nav-title">${section.title}</div>`;

        section.items.forEach(item => {
          const itemDiv = document.createElement('div');
          itemDiv.className = 'nav-item';
          itemDiv.setAttribute('data-page', item.id);
          itemDiv.innerHTML = `${item.icon}<span>${item.name}</span>${item.badge ? `<span class="nav-badge">${item.badge}</span>` : ''}`;
          itemDiv.onclick = () => showPage(item.id);
          sectionDiv.appendChild(itemDiv);
        });

        navModules.appendChild(sectionDiv);
      });

      // 导航点击事件
      document.querySelectorAll('.nav-item').forEach(item => {
        item.addEventListener('click', function() {
          document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'));
          this.classList.add('active');
        });
      });
    }

    // 显示页面
    function showPage(pageId) {
      document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
      const pageTitle = document.getElementById('pageTitle');

      let content = '';
      if (pageId === 'dashboard') {
        content = pages.dashboard[currentRole]();
        pageTitle.textContent = '首页仪表盘';
      } else if (pageId === 'roster') {
        content = pages.roster();
        pageTitle.textContent = '员工花名册';
      } else if (pageId === 'attendance' || pageId === 'team-attendance' || pageId === 'attendance-record' || pageId === 'attendance-rules' || pageId === 'attendance-schedule') {
        content = pages.attendance();
        pageTitle.textContent = '考勤管理';
      } else if (pageId === 'salary' || pageId === 'salary-calculate' || pageId === 'salary-payment' || pageId === 'salary-rules') {
        content = pages.salary();
        pageTitle.textContent = '薪酬管理';
      } else if (pageId === 'training' || pageId === 'training-plan' || pageId === 'training-course' || pageId === 'training-record' || pageId === 'training-stat') {
        content = pages.training();
        pageTitle.textContent = '培训管理';
      } else if (pageId === 'contract' || pageId === 'contract-manage' || pageId === 'contract-template') {
        content = pages.contract();
        pageTitle.textContent = '合同管理';
      } else if (pageId === 'approval' || pageId === 'approval-leave' || pageId === 'approval-overtime' || pageId === 'approval-travel' || pageId === 'approval-leave-job' || pageId === 'approval-all') {
        content = pages.approval();
        pageTitle.textContent = '审批管理';
      } else if (pageId === 'report' || pageId === 'report-attendance' || pageId === 'report-attendance-hr' || pageId === 'report-salary' || pageId === 'report-salary-hr' || pageId === 'report-person' || pageId === 'report-training') {
        content = pages.report();
        pageTitle.textContent = '报表统计';
      } else if (pageId === 'settings' || pageId === 'system-settings' || pageId === 'org' || pageId === 'entry' || pageId === 'transfer' || pageId === 'quit') {
        content = pages.settings();
        pageTitle.textContent = '系统设置';
      } else if (pageId === 'clock') {
        content = `
          <div class="card">
            <div class="card-header"><h3>上下班打卡</h3></div>
            <div class="card-body" style="text-align:center;padding:60px;">
              <div style="width:200px;height:200px;border-radius:50%;background:linear-gradient(135deg,#1e3a5f,#2d5a87);margin:0 auto 30px;display:flex;flex-direction:column;align-items:center;justify-content:center;color:white;">
                <div style="font-size:48px;font-weight:700;">08:32</div>
                <div style="font-size:14px;opacity:0.8;">上班打卡</div>
              </div>
              <div style="font-size:16px;color:#666;margin-bottom:20px;">2024年3月2日 星期五</div>
              <div style="display:flex;gap:16px;justify-content:center;">
                <button class="btn btn-primary" style="padding:16px 40px;font-size:16px;">上班打卡</button>
                <button class="btn btn-secondary" style="padding:16px 40px;font-size:16px;">下班打卡</button>
              </div>
            </div>
          </div>
        `;
        pageTitle.textContent = '上下班打卡';
      } else if (pageId === 'schedule' || pageId === 'team-schedule') {
        content = pages.attendance();
        pageTitle.textContent = '排班查询';
      } else if (pageId === 'leave') {
        content = pages.approval();
        pageTitle.textContent = '请假申请';
      } else if (pageId === 'overtime') {
        content = pages.approval();
        pageTitle.textContent = '加班申请';
      } else if (pageId === 'travel') {
        content = pages.approval();
        pageTitle.textContent = '出差申请';
      } else if (pageId === 'profile') {
        content = `
          <div class="card">
            <div class="card-header"><h3>个人信息</h3><button class="btn btn-primary btn-sm">编辑</button></div>
            <div class="card-body">
              <div style="display:flex;gap:40px;">
                <div style="text-align:center;">
                  <div style="width:120px;height:120px;border-radius:50%;background:#1e3a5f;color:white;font-size:36px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;">张</div>
                  <button class="btn btn-secondary btn-sm">更换照片</button>
                </div>
                <div style="flex:1;">
                  <div class="form-row" style="margin-bottom:16px;">
                    <div><label class="form-label">姓名</label><input class="form-input" value="张明" readonly></div>
                    <div><label class="form-label">工号</label><input class="form-input" value="EMP001" readonly></div>
                  </div>
                  <div class="form-row" style="margin-bottom:16px;">
                    <div><label class="form-label">部门</label><input class="form-input" value="人事部" readonly></div>
                    <div><label class="form-label">岗位</label><input class="form-input" value="人事专员" readonly></div>
                  </div>
                  <div class="form-row" style="margin-bottom:16px;">
                    <div><label class="form-label">手机号</label><input class="form-input" value="138****1234"></div>
                    <div><label class="form-label">邮箱</label><input class="form-input" value="zhangming@yp-medical.com"></div>
                  </div>
                  <div class="form-row">
                    <div><label class="form-label">入职日期</label><input class="form-input" value="2022-03-15" readonly></div>
                    <div><label class="form-label">转正日期</label><input class="form-input" value="2022-06-15" readonly></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        `;
        pageTitle.textContent = '个人信息';
      } else if (pageId === 'team') {
        content = pages.roster();
        pageTitle.textContent = '团队花名册';
      } else {
        content = `<div class="card"><div class="card-body" style="text-align:center;padding:60px;"><h3 style="margin-bottom:16px;">${pageId} 功能开发中</h3><p style="color:#666;">该功能模块正在开发中，敬请期待...</p></div></div>`;
        pageTitle.textContent = '功能页面';
      }

      document.getElementById('mainContent').innerHTML = `<div class="page active">${content}</div>`;

      // 更新导航高亮
      document.querySelectorAll('.nav-item').forEach(item => {
        item.classList.remove('active');
        if (item.getAttribute('data-page') === pageId) {
          item.classList.add('active');
        }
      });

      // 标签页切换
      document.querySelectorAll('.tab').forEach(tab => {
        tab.onclick = function() {
          this.parentElement.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
          this.classList.add('active');
        };
      });
    }

    // 返回角色选择
    function goHome() {
      document.getElementById('app').classList.remove('show');
      document.getElementById('roleSelect').style.display = 'flex';
    }

    // 模态框
    function openModal(type) {
      const modal = document.getElementById('modal');
      const modalTitle = document.getElementById('modalTitle');
      const modalBody = document.getElementById('modalBody');

      if (type === 'addEmployee') {
        modalTitle.textContent = '新增员工';
        modalBody.innerHTML = `
          <div class="form-row">
            <div class="form-group"><label class="form-label">姓名</label><input class="form-input" placeholder="请输入员工姓名"></div>
            <div class="form-group"><label class="form-label">工号</label><input class="form-input" placeholder="系统自动生成" readonly></div>
          </div>
          <div class="form-row">
            <div class="form-group"><label class="form-label">部门</label><select class="form-select"><option>请选择部门</option><option>生产部</option><option>技术部</option><option>销售部</option></select></div>
            <div class="form-group"><label class="form-label">岗位</label><input class="form-input" placeholder="请输入岗位"></div>
          </div>
          <div class="form-row">
            <div class="form-group"><label class="form-label">手机号</label><input class="form-input" placeholder="请输入手机号"></div>
            <div class="form-group"><label class="form-label">邮箱</label><input class="form-input" placeholder="请输入邮箱"></div>
          </div>
          <div class="form-row">
            <div class="form-group"><label class="form-label">入职日期</label><input class="form-input" type="date"></div>
            <div class="form-group"><label class="form-label">合同类型</label><select class="form-select"><option>劳动合同</option><option>实习协议</option></select></div>
          </div>
        `;
      }

      modal.classList.add('show');
    }

    function closeModal() {
      document.getElementById('modal').classList.remove('show');
    }
  </script>
</body>
</html>