编辑页面

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

    /* Layout */
    .app-container { display: flex; min-height: 100vh; }
    .sidebar { width: 260px; background: linear-gradient(180deg, #1e3a5f 0%, #2d5a87 100%); color: white; padding: 20px 0; position: fixed; height: 100vh; overflow-y: auto; }
    .sidebar-logo { padding: 0 20px 20px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 20px; }
    .sidebar-logo h1 { font-size: 18px; font-weight: 600; margin-bottom: 4px; }
    .sidebar-logo span { font-size: 12px; opacity: 0.7; }
    .nav-section { margin-bottom: 20px; }
    .nav-section-title { padding: 8px 20px; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.5; }
    .nav-item { padding: 12px 20px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s; }
    .nav-item:hover { background: rgba(255,255,255,0.1); }
    .nav-item.active { background: rgba(255,255,255,0.15); border-left: 3px solid #4ade80; }
    .nav-item svg { width: 20px; height: 20px; }
    .nav-item span { font-size: 14px; }

    .main-content { flex: 1; margin-left: 260px; }
    .header { background: white; padding: 16px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 100; }
    .header-left { display: flex; align-items: center; gap: 20px; }
    .header-left h2 { font-size: 20px; font-weight: 600; color: #1e3a5f; }
    .breadcrumb { font-size: 13px; color: #6b7280; }
    .header-right { display: flex; align-items: center; gap: 16px; }
    .header-avatar { width: 40px; height: 40px; border-radius: 50%; background: #e0e7ff; display: flex; align-items: center; justify-content: center; font-weight: 600; color: #4f46e5; }
    .user-info { text-align: right; }
    .user-info .name { font-weight: 600; font-size: 14px; }
    .user-info .role { font-size: 12px; color: #6b7280; }

    .page-content { padding: 24px 30px; }

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

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

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

    /* Buttons */
    .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: #e5e7eb; color: #374151; }
    .btn-secondary:hover { background: #d1d5db; }
    .btn-success { background: #16a34a; color: white; }
    .btn-danger { background: #dc2626; color: white; }
    .btn-sm { padding: 6px 12px; font-size: 13px; }

    /* Tags */
    .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; }
    .tag-gray { background: #f3f4f6; color: #6b7280; }

    /* Form Elements */
    .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; transition: border-color 0.2s; }
    .form-input:focus { outline: none; border-color: #1e3a5f; }
    .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .form-select { width: 100%; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 14px; background: white; }

    /* Modal */
    .modal-overlay { 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-overlay.show { display: flex; }
    .modal { 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; }

    /* Search Bar */
    .search-bar { display: flex; gap: 12px; margin-bottom: 20px; }
    .search-input { flex: 1; padding: 10px 16px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; }
    .search-input:focus { outline: none; border-color: #1e3a5f; }

    /* Tabs */
    .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; }

    /* Charts Placeholder */
    .chart-placeholder { height: 300px; background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #6b7280; font-size: 14px; }

    /* Calendar */
    .calendar-grid { 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: 8px; font-size: 13px; border-radius: 6px; cursor: pointer; }
    .calendar-day:hover { background: #f3f4f6; }
    .calendar-day.today { background: #1e3a5f; color: white; }
    .calendar-day.absent { background: #fee2e2; color: #dc2626; }
    .calendar-day.late { background: #ffedd5; color: #ea580c; }
    .calendar-day.off { color: #9ca3af; }

    /* Quick Actions */
    .quick-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
    .quick-action { background: white; border-radius: 12px; padding: 20px; text-align: center; cursor: pointer; transition: all 0.2s; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
    .quick-action:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
    .quick-action-icon { width: 56px; height: 56px; border-radius: 12px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; }
    .quick-action-icon svg { width: 28px; height: 28px; }
    .quick-action h4 { font-size: 14px; font-weight: 600; margin-bottom: 4px; }
    .quick-action p { font-size: 12px; color: #6b7280; }

    /* To Do List */
    .todo-item { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; margin-bottom: 8px; background: #f9fafb; }
    .todo-checkbox { width: 20px; height: 20px; border: 2px solid #d1d5db; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
    .todo-checkbox.checked { background: #16a34a; border-color: #16a34a; color: white; }
    .todo-content { flex: 1; }
    .todo-title { font-size: 14px; font-weight: 500; }
    .todo-meta { font-size: 12px; color: #6b7280; }
    .todo-priority { width: 8px; height: 8px; border-radius: 50%; }
    .todo-priority.high { background: #dc2626; }
    .todo-priority.medium { background: #f59e0b; }
    .todo-priority.low { background: #22c55e; }

    /* Training Cards */
    .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.1); }
    .training-card-header { height: 120px; display: flex; align-items: center; justify-content: center; font-size: 48px; }
    .training-card-body { padding: 16px; }
    .training-card h4 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
    .training-card p { font-size: 13px; color: #6b7280; margin-bottom: 12px; }
    .training-progress { height: 6px; background: #e5e7eb; border-radius: 3px; margin-bottom: 8px; }
    .training-progress-bar { height: 100%; background: #16a34a; border-radius: 3px; }
    .training-stats { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; }

    /* Settings */
    .settings-section { margin-bottom: 32px; }
    .settings-section h3 { font-size: 16px; font-weight: 600; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid #e5e7eb; }
    .setting-item { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid #f3f4f6; }
    .setting-info h4 { font-size: 14px; font-weight: 500; margin-bottom: 2px; }
    .setting-info p { font-size: 12px; color: #6b7280; }

    /* Toggle Switch */
    .toggle { width: 48px; 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: 26px; }

    /* Charts Container */
    .charts-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; }

    /* Bar Chart */
    .bar-chart { display: flex; align-items: flex-end; gap: 12px; height: 200px; 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; transition: height 0.3s; }
    .bar-label { font-size: 12px; color: #6b7280; }
    .bar-value { font-size: 12px; font-weight: 600; color: #1f2937; }

    /* Pie Chart */
    .pie-chart { width: 150px; height: 150px; border-radius: 50%; background: conic-gradient(#1e3a5f 0deg 180deg, #2d5a87 180deg 270deg, #4ade80 270deg 320deg, #f59e0b 320deg 360deg); margin: 20px auto; position: relative; }
    .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%; }

    /* Employee Avatar */
    .avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; }
    .avatar.blue { background: #dbeafe; color: #2563eb; }
    .avatar.green { background: #dcfce7; color: #16a34a; }
    .avatar.orange { background: #ffedd5; color: #ea580c; }
    .avatar.purple { background: #f3e8ff; color: #9333ea; }

    /* Page visibility */
    .page { display: none; }
    .page.active { display: block; }

    /* Responsive */
    @media (max-width: 1200px) {
      .stats-grid { grid-template-columns: repeat(2, 1fr); }
      .training-grid { grid-template-columns: repeat(2, 1fr); }
      .charts-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 768px) {
      .sidebar { width: 60px; }
      .sidebar-logo h1, .sidebar-logo span, .nav-item span, .nav-section-title { display: none; }
      .main-content { margin-left: 60px; }
      .stats-grid { grid-template-columns: 1fr; }
      .quick-actions { grid-template-columns: repeat(2, 1fr); }
    }
  </style>
</head>
<body>
  <div class="app-container">
    <!-- Sidebar -->
    <nav class="sidebar">
      <div class="sidebar-logo">
        <h1>医疗器械HR</h1>
        <span>人力资源管理系统</span>
      </div>

      <div class="nav-section">
        <div class="nav-section-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">
        <div class="nav-section-title">人力资源</div>
        <div class="nav-item" data-page="roster">
          <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>
          <span>员工花名册</span>
        </div>
        <div class="nav-item" data-page="attendance">
          <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"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
          <span>考勤管理</span>
        </div>
        <div class="nav-item" data-page="salary">
          <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>
          <span>薪酬管理</span>
        </div>
        <div class="nav-item" data-page="approval">
          <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>
          <span>审批流程</span>
        </div>
      </div>

      <div class="nav-section">
        <div class="nav-section-title">统计分析</div>
        <div class="nav-item" data-page="reports">
          <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>
          <span>报表统计</span>
        </div>
        <div class="nav-item" data-page="training">
          <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>
          <span>培训系统</span>
        </div>
      </div>

      <div class="nav-section">
        <div class="nav-section-title">系统</div>
        <div class="nav-item" data-page="settings">
          <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>
          <span>系统设置</span>
        </div>
      </div>
    </nav>

    <!-- Main Content -->
    <main class="main-content">
      <header class="header">
        <div class="header-left">
          <h2 id="page-title">首页仪表盘</h2>
          <span class="breadcrumb">HR管理系统 / <span id="breadcrumb">首页</span></span>
        </div>
        <div class="header-right">
          <div class="user-info">
            <div class="name">张明</div>
            <div class="role">人事专员</div>
          </div>
          <div class="header-avatar">张</div>
        </div>
      </header>

      <div class="page-content">
        <!-- Dashboard Page -->
        <div class="page active" id="page-dashboard">
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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"/><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>
                <span class="stat-card-trend up">+12</span>
              </div>
              <h3>328</h3>
              <p>在职员工</p>
            </div>
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
                </div>
                <span class="stat-card-trend up">98.5%</span>
              </div>
              <h3>323</h3>
              <p>今日出勤</p>
            </div>
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-icon orange">
                  <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>
                </div>
                <span class="stat-card-trend down">-3</span>
              </div>
              <h3>5</h3>
              <p>待审批</p>
            </div>
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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>
                <span class="stat-card-trend up">+8</span>
              </div>
              <h3>156</h3>
              <p>本月培训</p>
            </div>
          </div>

          <div class="quick-actions">
            <div class="quick-action" onclick="navigateTo('roster')">
              <div class="quick-action-icon" style="background:#dbeafe;">
                <svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" 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>
              </div>
              <h4>入职登记</h4>
              <p>新员工入职办理</p>
            </div>
            <div class="quick-action" onclick="navigateTo('approval')">
              <div class="quick-action-icon" style="background:#dcfce7;">
                <svg viewBox="0 0 24 24" fill="none" stroke="#16a34a" 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>
              <h4>审批办理</h4>
              <p>请假/加班/出差</p>
            </div>
            <div class="quick-action" onclick="navigateTo('attendance')">
              <div class="quick-action-icon" style="background:#ffedd5;">
                <svg viewBox="0 0 24 24" fill="none" stroke="#ea580c" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              </div>
              <h4>补卡申请</h4>
              <p>考勤异常处理</p>
            </div>
            <div class="quick-action" onclick="navigateTo('salary')">
              <div class="quick-action-icon" style="background:#f3e8ff;">
                <svg viewBox="0 0 24 24" fill="none" stroke="#9333ea" 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>
              </div>
              <h4>工资发放</h4>
              <p>薪资核算与发放</p>
            </div>
          </div>

          <div class="charts-grid" style="margin-top:20px;">
            <div class="card">
              <div class="card-header">
                <h3>月度考勤趋势</h3>
                <select class="form-select" style="width:auto;">
                  <option>近30天</option>
                  <option>近90天</option>
                </select>
              </div>
              <div class="card-body">
                <div class="bar-chart">
                  <div class="bar-item"><div class="bar-value">312</div><div class="bar" style="height:140px;"></div><div class="bar-label">周一</div></div>
                  <div class="bar-item"><div class="bar-value">328</div><div class="bar" style="height:180px;"></div><div class="bar-label">周二</div></div>
                  <div class="bar-item"><div class="bar-value">325</div><div class="bar" style="height:170px;"></div><div class="bar-label">周三</div></div>
                  <div class="bar-item"><div class="bar-value">318</div><div class="bar" style="height:160px;"></div><div class="bar-label">周四</div></div>
                  <div class="bar-item"><div class="bar-value">310</div><div class="bar" style="height:130px;"></div><div class="bar-label">周五</div></div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header"><h3>员工构成</h3></div>
              <div class="card-body">
                <div class="pie-chart"></div>
                <div class="pie-legend">
                  <div class="legend-item"><div class="legend-dot" style="background:#1e3a5f;"></div>生产人员 50%</div>
                  <div class="legend-item"><div class="legend-dot" style="background:#2d5a87;"></div>技术人员 25%</div>
                  <div class="legend-item"><div class="legend-dot" style="background:#4ade80;"></div>管理人员 15%</div>
                  <div class="legend-item"><div class="legend-dot" style="background:#f59e0b;"></div>其他 10%</div>
                </div>
              </div>
            </div>
          </div>

          <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px;">
            <div class="card">
              <div class="card-header"><h3>待办事项</h3><button class="btn btn-sm btn-secondary">查看全部</button></div>
              <div class="card-body">
                <div class="todo-item">
                  <div class="todo-priority high"></div>
                  <div class="todo-content">
                    <div class="todo-title">审核王五的离职申请</div>
                    <div class="todo-meta">截止今天 17:00</div>
                  </div>
                </div>
                <div class="todo-item">
                  <div class="todo-priority high"></div>
                  <div class="todo-content">
                    <div class="todo-title">确认本月工资发放名单</div>
                    <div class="todo-meta">截止今天 18:00</div>
                  </div>
                </div>
                <div class="todo-item">
                  <div class="todo-priority medium"></div>
                  <div class="todo-content">
                    <div class="todo-title">安排新员工培训</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 class="card">
              <div class="card-header"><h3>最新动态</h3></div>
              <div class="card-body">
                <div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e5e7eb;">
                  <div class="avatar blue">李</div>
                  <div>
                    <div style="font-size:14px;font-weight:500;">李晓华 提交了年假申请</div>
                    <div style="font-size:12px;color:#6b7280;margin-top:4px;">2分钟前</div>
                  </div>
                </div>
                <div style="display:flex;align-items:flex-start;gap:12px;margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e5e7eb;">
                  <div class="avatar green">赵</div>
                  <div>
                    <div style="font-size:14px;font-weight:500;">赵明 完成GMP培训</div>
                    <div style="font-size:12px;color:#6b7280;margin-top:4px;">15分钟前</div>
                  </div>
                </div>
                <div style="display:flex;align-items:flex-start;gap:12px;">
                  <div class="avatar orange">陈</div>
                  <div>
                    <div style="font-size:14px;font-weight:500;">陈思 打卡异常已补卡</div>
                    <div style="font-size:12px;color:#6b7280;margin-top:4px;">30分钟前</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Roster Page -->
        <div class="page" id="page-roster">
          <div class="search-bar">
            <input type="text" class="search-input" placeholder="搜索员工姓名、工号、手机号...">
            <select class="form-select" style="width:150px;">
              <option>全部部门</option>
              <option>生产部</option>
              <option>质量部</option>
              <option>研发部</option>
              <option>销售部</option>
            </select>
            <select class="form-select" style="width:150px;">
              <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('addEmployeeModal')">+ 新增员工</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>2023-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>2022-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>2021-11-01</td>
                  <td><span class="tag tag-green">正常</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-blue">即将到期</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>2020-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>
        </div>

        <!-- Attendance Page -->
        <div class="page" id="page-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:auto;">
                  <option>2024年3月</option>
                  <option>2024年2月</option>
                </select>
              </div>
              <div class="card-body">
                <div class="calendar-grid">
                  <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">1</div>
                  <div class="calendar-day today">2</div>
                  <div class="calendar-day">3</div>
                  <div class="calendar-day">4</div>
                  <div class="calendar-day">5</div>
                  <div class="calendar-day off">6</div>
                  <div class="calendar-day off">7</div>
                  <div class="calendar-day">8</div>
                  <div class="calendar-day">9</div>
                  <div class="calendar-day">10</div>
                  <div class="calendar-day">11</div>
                  <div class="calendar-day">12</div>
                  <div class="calendar-day off">13</div>
                  <div class="calendar-day off">14</div>
                  <div class="calendar-day">15</div>
                  <div class="calendar-day">16</div>
                  <div class="calendar-day">17</div>
                  <div class="calendar-day">18</div>
                  <div class="calendar-day">19</div>
                  <div class="calendar-day off">20</div>
                  <div class="calendar-day off">21</div>
                  <div class="calendar-day">22</div>
                  <div class="calendar-day">23</div>
                  <div class="calendar-day">24</div>
                  <div class="calendar-day">25</div>
                  <div class="calendar-day">26</div>
                  <div class="calendar-day off">27</div>
                  <div class="calendar-day off">28</div>
                  <div class="calendar-day">29</div>
                  <div class="calendar-day">30</div>
                  <div class="calendar-day">31</div>
                </div>
                <div style="display:flex;gap:20px;margin-top:20px;font-size:13px;">
                  <span><span style="display:inline-block;width:12px;height:12px;background:#1e3a5f;border-radius:2px;margin-right:6px;"></span>正常</span>
                  <span><span style="display:inline-block;width:12px;height:12px;background:#fee2e2;border-radius:2px;margin-right:6px;"></span>缺勤</span>
                  <span><span style="display:inline-block;width:12px;height:12px;background:#ffedd5;border-radius:2px;margin-right:6px;"></span>迟到</span>
                </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 #e5e7eb;">
                  <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                    <span style="color:#6b7280;">出勤天数</span>
                    <span style="font-weight:600;">21天</span>
                  </div>
                  <div style="height:6px;background:#e5e7eb;border-radius:3px;"><div style="width:90%;height:100%;background:#16a34a;border-radius:3px;"></div></div>
                </div>
                <div style="padding:16px 0;border-bottom:1px solid #e5e7eb;">
                  <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                    <span style="color:#6b7280;">迟到次数</span>
                    <span style="font-weight:600;">2次</span>
                  </div>
                  <div style="height:6px;background:#e5e7eb;border-radius:3px;"><div style="width:8%;height:100%;background:#f59e0b;border-radius:3px;"></div></div>
                </div>
                <div style="padding:16px 0;border-bottom:1px solid #e5e7eb;">
                  <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                    <span style="color:#6b7280;">早退次数</span>
                    <span style="font-weight:600;">0次</span>
                  </div>
                  <div style="height:6px;background:#e5e7eb;border-radius:3px;"><div style="width:0%;height:100%;background:#16a34a;border-radius:3px;"></div></div>
                </div>
                <div style="padding:16px 0;">
                  <div style="display:flex;justify-content:space-between;margin-bottom:8px;">
                    <span style="color:#6b7280;">请假天数</span>
                    <span style="font-weight:600;">1天</span>
                  </div>
                  <div style="height:6px;background:#e5e7eb;border-radius:3px;"><div style="width:4%;height:100%;background:#2563eb;border-radius:3px;"></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>
        </div>

        <!-- Salary Page -->
        <div class="page" id="page-salary">
          <div class="stats-grid" style="grid-template-columns:repeat(3,1fr);">
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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>
              </div>
              <h3>¥2,856,000</h3>
              <p>本月工资总额</p>
            </div>
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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>
              </div>
              <h3>¥8,710</h3>
              <p>人均工资</p>
            </div>
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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>
              </div>
              <h3>+5.2%</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>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>2024年3月</td>
                  <td>328人</td>
                  <td>¥3,125,000</td>
                  <td>¥269,000</td>
                  <td>¥2,856,000</td>
                  <td>2024-03-05</td>
                  <td><span class="tag tag-green">已发放</span></td>
                  <td><button class="btn btn-sm btn-secondary">详情</button></td>
                </tr>
                <tr>
                  <td>2024年2月</td>
                  <td>325人</td>
                  <td>¥3,098,000</td>
                  <td>¥265,000</td>
                  <td>¥2,833,000</td>
                  <td>2024-02-05</td>
                  <td><span class="tag tag-green">已发放</span></td>
                  <td><button class="btn btn-sm btn-secondary">详情</button></td>
                </tr>
                <tr>
                  <td>2024年1月</td>
                  <td>320人</td>
                  <td>¥3,050,000</td>
                  <td>¥262,000</td>
                  <td>¥2,788,000</td>
                  <td>2024-01-05</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:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;">
                <div>
                  <div style="width:80px;height:80px;border-radius:50%;background:conic-gradient(#1e3a5f 0deg 180deg, transparent 180deg 360deg);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;">
                    <div style="width:60px;height:60px;border-radius:50%;background:white;"></div>
                  </div>
                  <div style="font-weight:600;">基本工资 50%</div>
                  <div style="font-size:13px;color:#6b7280;">¥1,428,000</div>
                </div>
                <div>
                  <div style="width:80px;height:80px;border-radius:50%;background:conic-gradient(#2d5a87 0deg 126deg, transparent 126deg 360deg);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;">
                    <div style="width:60px;height:60px;border-radius:50%;background:white;"></div>
                  </div>
                  <div style="font-weight:600;">绩效奖金 25%</div>
                  <div style="font-size:13px;color:#6b7280;">¥714,000</div>
                </div>
                <div>
                  <div style="width:80px;height:80px;border-radius:50%;background:conic-gradient(#4ade80 0deg 72deg, transparent 72deg 360deg);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;">
                    <div style="width:60px;height:60px;border-radius:50%;background:white;"></div>
                  </div>
                  <div style="font-weight:600;">岗位津贴 15%</div>
                  <div style="font-size:13px;color:#6b7280;">¥428,400</div>
                </div>
                <div>
                  <div style="width:80px;height:80px;border-radius:50%;background:conic-gradient(#f59e0b 0deg 36deg, transparent 36deg 360deg);margin:0 auto 12px;display:flex;align-items:center;justify-content:center;">
                    <div style="width:60px;height:60px;border-radius:50%;background:white;"></div>
                  </div>
                  <div style="font-weight:600;">其他补贴 10%</div>
                  <div style="font-size:13px;color:#6b7280;">¥285,600</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Approval Page -->
        <div class="page" id="page-approval">
          <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:1fr 1fr;gap:20px;">
            <div class="card">
              <div class="card-header">
                <h3>待我审批</h3>
                <span class="tag tag-orange">5条待处理</span>
              </div>
              <div class="card-body">
                <div style="padding:16px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;">
                  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                    <div style="display:flex;align-items:center;gap:10px;">
                      <div class="avatar blue">李</div>
                      <div>
                        <div style="font-weight:600;">李晓华</div>
                        <div style="font-size:12px;color:#6b7280;">生产部</div>
                      </div>
                    </div>
                    <span class="tag tag-orange">请假申请</span>
                  </div>
                  <div style="font-size:14px;margin-bottom:12px;">申请年假 <strong>5天</strong>（2024-03-10 至 2024-03-14）</div>
                  <div style="display:flex;justify-content:space-between;align-items:center;">
                    <span style="font-size:12px;color:#6b7280;">提交于 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 style="padding:16px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;">
                  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                    <div style="display:flex;align-items:center;gap:10px;">
                      <div class="avatar green">王</div>
                      <div>
                        <div style="font-weight:600;">王建国</div>
                        <div style="font-size:12px;color:#6b7280;">质量部</div>
                      </div>
                    </div>
                    <span class="tag tag-purple">加班申请</span>
                  </div>
                  <div style="font-size:14px;margin-bottom:12px;">申请加班 <strong>8小时</strong>（2024-03-08 18:00-22:00，03-09 09:00-13:00）</div>
                  <div style="display:flex;justify-content:space-between;align-items:center;">
                    <span style="font-size:12px;color:#6b7280;">提交于 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 style="padding:16px;border:1px solid #e5e7eb;border-radius:8px;">
                  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                    <div style="display:flex;align-items:center;gap:10px;">
                      <div class="avatar orange">陈</div>
                      <div>
                        <div style="font-weight:600;">陈思</div>
                        <div style="font-size:12px;color:#6b7280;">销售部</div>
                      </div>
                    </div>
                    <span class="tag tag-blue">出差申请</span>
                  </div>
                  <div style="font-size:14px;margin-bottom:12px;">申请出差前往 <strong>北京分公司</strong>（2024-03-15 至 2024-03-17）</div>
                  <div style="display:flex;justify-content:space-between;align-items:center;">
                    <span style="font-size:12px;color:#6b7280;">提交于 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>

            <div class="card">
              <div class="card-header">
                <h3>我发起的申请</h3>
                <button class="btn btn-primary btn-sm">+ 新建申请</button>
              </div>
              <div class="card-body">
                <div style="padding:16px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;background:#f9fafb;">
                  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                    <span class="tag tag-green">已通过</span>
                    <span style="font-size:12px;color:#6b7280;">2024-03-01</span>
                  </div>
                  <div style="font-size:14px;">事假申请 <strong>2天</strong></div>
                  <div style="font-size:12px;color:#6b7280;margin-top:8px;">审批人：张明 | 审批时间：2024-03-01 14:30</div>
                </div>

                <div style="padding:16px;border:1px solid #e5e7eb;border-radius:8px;margin-bottom:12px;background:#f9fafb;">
                  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                    <span class="tag tag-orange">审批中</span>
                    <span style="font-size:12px;color:#6b7280;">2024-02-28</span>
                  </div>
                  <div style="font-size:14px;">调休申请 <strong>1天</strong></div>
                  <div style="font-size:12px;color:#6b7280;margin-top:8px;">当前审批人：HR主管</div>
                </div>

                <div style="padding:16px;border:1px solid #e5e7eb;border-radius:8px;background:#f9fafb;">
                  <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
                    <span class="tag tag-red">已拒绝</span>
                    <span style="font-size:12px;color:#6b7280;">2024-02-20</span>
                  </div>
                  <div style="font-size:14px;">加班申请 <strong>4小时</strong></div>
                  <div style="font-size:12px;color:#6b7280;margin-top:8px;">拒绝原因：项目进度已调整，无需加班</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>
            <div class="card-body">
              <div style="display:flex;align-items:center;gap:0;">
                <div style="text-align:center;padding:20px;flex:1;">
                  <div style="width:60px;height:60px;background:#dbeafe;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" style="width:28px;height:28px;"><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"/></svg>
                  </div>
                  <div style="font-weight:600;">员工申请</div>
                </div>
                <div style="width:60px;height:2px;background:#d1d5db;"></div>
                <div style="text-align:center;padding:20px;flex:1;">
                  <div style="width:60px;height:60px;background:#fef3c7;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" style="width:28px;height:28px;"><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>
                  <div style="font-weight:600;">直属主管</div>
                </div>
                <div style="width:60px;height:2px;background:#d1d5db;"></div>
                <div style="text-align:center;padding:20px;flex:1;">
                  <div style="width:60px;height:60px;background:#dcfce7;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" style="width:28px;height:28px;"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
                  </div>
                  <div style="font-weight:600;">HR审核</div>
                </div>
                <div style="width:60px;height:2px;background:#d1d5db;"></div>
                <div style="text-align:center;padding:20px;flex:1;">
                  <div style="width:60px;height:60px;background:#f3e8ff;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#9333ea" stroke-width="2" style="width:28px;height:28px;"><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>
                  <div style="font-weight:600;">完成</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Reports Page -->
        <div class="page" id="page-reports">
          <div class="search-bar">
            <select class="form-select" style="width:150px;">
              <option>全部部门</option>
              <option>生产部</option>
              <option>质量部</option>
            </select>
            <select class="form-select" style="width:150px;">
              <option>2024年</option>
              <option>2023年</option>
            </select>
            <select class="form-select" style="width:150px;">
              <option>全部月份</option>
              <option>1月</option>
              <option>2月</option>
              <option>3月</option>
            </select>
            <button class="btn btn-primary">查询</button>
            <button class="btn btn-secondary">导出报表</button>
          </div>

          <div class="stats-grid" style="grid-template-columns:repeat(4,1fr);">
            <div class="stat-card">
              <h3>328</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 style="font-size:14px;">生产部</span>
                    <span style="font-size:14px;font-weight:600;">164人 (50%)</span>
                  </div>
                  <div style="height:10px;background:#e5e7eb;border-radius:5px;"><div style="width:50%;height:100%;background:#1e3a5f;border-radius:5px;"></div></div>
                </div>
                <div style="margin-bottom:16px;">
                  <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
                    <span style="font-size:14px;">技术部</span>
                    <span style="font-size:14px;font-weight:600;">82人 (25%)</span>
                  </div>
                  <div style="height:10px;background:#e5e7eb;border-radius:5px;"><div style="width:25%;height:100%;background:#2d5a87;border-radius:5px;"></div></div>
                </div>
                <div style="margin-bottom:16px;">
                  <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
                    <span style="font-size:14px;">销售部</span>
                    <span style="font-size:14px;font-weight:600;">49人 (15%)</span>
                  </div>
                  <div style="height:10px;background:#e5e7eb;border-radius:5px;"><div style="width:15%;height:100%;background:#4ade80;border-radius:5px;"></div></div>
                </div>
                <div>
                  <div style="display:flex;justify-content:space-between;margin-bottom:6px;">
                    <span style="font-size:14px;">其他</span>
                    <span style="font-size:14px;font-weight:600;">33人 (10%)</span>
                  </div>
                  <div style="height:10px;background:#e5e7eb;border-radius:5px;"><div style="width:10%;height:100%;background:#f59e0b;border-radius:5px;"></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:180px;">
                  <div class="bar-item"><div class="bar-value">+12</div><div class="bar" style="height:60px;background:#4ade80;"></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:#4ade80;"></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:#4ade80;"></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:#4ade80;"></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:#4ade80;"></div><div class="bar-label">5月</div></div>
                  <div class="bar-item"><div class="bar-value">+12</div><div class="bar" style="height:60px;background:#4ade80;"></div><div class="bar-label">6月</div></div>
                </div>
              </div>
            </div>
          </div>

          <div class="card" style="margin-top:20px;">
            <div class="card-header"><h3>培训统计报表</h3></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>320人</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>315人</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>280人</td>
                  <td>85%</td>
                  <td>85分</td>
                  <td><span class="tag tag-green">88%</span></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <!-- Training Page -->
        <div class="page" id="page-training">
          <div class="stats-grid" style="grid-template-columns:repeat(4,1fr);">
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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>
              </div>
              <h3>12</h3>
              <p>必修课程</p>
            </div>
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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>
              </div>
              <h3>8</h3>
              <p>已完成</p>
            </div>
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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>
              </div>
              <h3>4</h3>
              <p>进行中</p>
            </div>
            <div class="stat-card">
              <div class="stat-card-header">
                <div class="stat-card-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>
              </div>
              <h3>92%</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>
                <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-card-header" style="background:linear-gradient(135deg,#fee2e2,#fecaca);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#dc2626" stroke-width="2" style="width:48px;height:48px;"><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-card-body">
                    <span class="tag tag-red" style="margin-bottom:8px;">必修</span>
                    <h4>GMP生产质量管理规范</h4>
                    <p>学习GMP核心要求及实施要点</p>
                    <div class="training-progress"><div class="training-progress-bar" style="width:100%;"></div></div>
                    <div class="training-stats">
                      <span>进度 100%</span>
                      <span>已完成</span>
                    </div>
                  </div>
                </div>

                <div class="training-card">
                  <div class="training-card-header" style="background:linear-gradient(135deg,#fef3c7,#fde68a);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#d97706" stroke-width="2" style="width:48px;height:48px;"><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-card-body">
                    <span class="tag tag-red" style="margin-bottom:8px;">必修</span>
                    <h4>GSP经营质量管理规范</h4>
                    <p>掌握GSP经营全过程管理</p>
                    <div class="training-progress"><div class="training-progress-bar" style="width:75%;"></div></div>
                    <div class="training-stats">
                      <span>进度 75%</span>
                      <span>预计剩余2天</span>
                    </div>
                  </div>
                </div>

                <div class="training-card">
                  <div class="training-card-header" style="background:linear-gradient(135deg,#dbeafe,#bfdbfe);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#2563eb" stroke-width="2" style="width:48px;height:48px;"><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-card-body">
                    <span class="tag tag-blue" style="margin-bottom:8px;">选修</span>
                    <h4>医疗器械法规解读</h4>
                    <p>最新法规政策解读与合规要点</p>
                    <div class="training-progress"><div class="training-progress-bar" style="width:45%;"></div></div>
                    <div class="training-stats">
                      <span>进度 45%</span>
                      <span>预计剩余5天</span>
                    </div>
                  </div>
                </div>

                <div class="training-card">
                  <div class="training-card-header" style="background:linear-gradient(135deg,#dcfce7,#bbf7d0);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#16a34a" stroke-width="2" style="width:48px;height:48px;"><path d="M12 2L2 7l10 5 10-5-10-5z"/><path d="M2 17l10 5 10-5"/><path d="M2 12l10 5 10-5"/></svg>
                  </div>
                  <div class="training-card-body">
                    <span class="tag tag-blue" style="margin-bottom:8px;">选修</span>
                    <h4>安全生产培训</h4>
                    <p>生产安全意识与应急处理</p>
                    <div class="training-progress"><div class="training-progress-bar" style="width:30%;"></div></div>
                    <div class="training-stats">
                      <span>进度 30%</span>
                      <span>预计剩余7天</span>
                    </div>
                  </div>
                </div>

                <div class="training-card">
                  <div class="training-card-header" style="background:linear-gradient(135deg,#f3e8ff,#e9d5ff);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#9333ea" stroke-width="2" style="width:48px;height:48px;"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
                  </div>
                  <div class="training-card-body">
                    <span class="tag tag-blue" style="margin-bottom:8px;">选修</span>
                    <h4>职业素养提升</h4>
                    <p>职场沟通与团队协作能力</p>
                    <div class="training-progress"><div class="training-progress-bar" style="width:60%;"></div></div>
                    <div class="training-stats">
                      <span>进度 60%</span>
                      <span>预计剩余3天</span>
                    </div>
                  </div>
                </div>

                <div class="training-card">
                  <div class="training-card-header" style="background:linear-gradient(135deg,#f3f4f6,#e5e7eb);">
                    <svg viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2" style="width:48px;height:48px;"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
                  </div>
                  <div class="training-card-body">
                    <span class="tag tag-red" style="margin-bottom:8px;">必修</span>
                    <h4>医疗器械不良事件</h4>
                    <p>不良事件监测与报告流程</p>
                    <div class="training-progress"><div class="training-progress-bar" style="width:0%;"></div></div>
                    <div class="training-stats">
                      <span>进度 0%</span>
                      <span>截止 03-31</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- Settings Page -->
        <div class="page" id="page-settings">
          <div style="display:grid;grid-template-columns:250px 1fr;gap:20px;">
            <div class="card">
              <div class="card-body" style="padding:12px;">
                <div style="padding:12px;background:#e0e7ff;border-radius:8px;margin-bottom:8px;cursor:pointer;">基础数据管理</div>
                <div style="padding:12px;border-radius:8px;cursor:pointer;">组织架构</div>
                <div style="padding:12px;border-radius:8px;cursor:pointer;">权限配置</div>
                <div style="padding:12px;border-radius:8px;cursor:pointer;">审批流程</div>
                <div style="padding:12px;border-radius:8px;cursor:pointer;">考勤规则</div>
                <div style="padding:12px;border-radius:8px;cursor:pointer;">薪资模板</div>
                <div style="padding:12px;border-radius:8px;cursor:pointer;">系统日志</div>
              </div>
            </div>

            <div>
              <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>
                    <tr>
                      <td>005</td>
                      <td>婚假</td>
                      <td>假期类型</td>
                      <td><span class="tag tag-gray">禁用</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 class="setting-item">
                    <div class="setting-info">
                      <h4>企业微信同步</h4>
                      <p>同步企业微信组织架构和员工信息</p>
                    </div>
                    <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                  </div>
                  <div class="setting-item">
                    <div class="setting-info">
                      <h4>钉钉集成</h4>
                      <p>对接钉钉考勤和审批流程</p>
                    </div>
                    <div class="toggle" onclick="this.classList.toggle('active')"></div>
                  </div>
                  <div class="setting-item">
                    <div class="setting-info">
                      <h4>考勤机对接</h4>
                      <p>连接门禁考勤设备实时获取数据</p>
                    </div>
                    <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                  </div>
                  <div class="setting-item">
                    <div class="setting-info">
                      <h4>银行代发</h4>
                      <p>对接银行API实现工资代发</p>
                    </div>
                    <div class="toggle" onclick="this.classList.toggle('active')"></div>
                  </div>
                  <div class="setting-item">
                    <div class="setting-info">
                      <h4>个税申报</h4>
                      <p>自动同步薪资数据至税务系统</p>
                    </div>
                    <div class="toggle active" onclick="this.classList.toggle('active')"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
  </div>

  <!-- Add Employee Modal -->
  <div class="modal-overlay" id="addEmployeeModal">
    <div class="modal">
      <div class="modal-header">
        <h3>新增员工</h3>
        <button class="modal-close" onclick="closeModal('addEmployeeModal')">×</button>
      </div>
      <div class="modal-body">
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">姓名</label>
            <input type="text" class="form-input" placeholder="请输入员工姓名">
          </div>
          <div class="form-group">
            <label class="form-label">工号</label>
            <input type="text" class="form-input" placeholder="系统自动生成">
          </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>
              <option>销售部</option>
            </select>
          </div>
          <div class="form-group">
            <label class="form-label">岗位</label>
            <input type="text" class="form-input" placeholder="请输入岗位名称">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">手机号</label>
            <input type="tel" class="form-input" placeholder="请输入手机号">
          </div>
          <div class="form-group">
            <label class="form-label">邮箱</label>
            <input type="email" class="form-input" placeholder="请输入邮箱">
          </div>
        </div>
        <div class="form-row">
          <div class="form-group">
            <label class="form-label">入职日期</label>
            <input type="date" class="form-input">
          </div>
          <div class="form-group">
            <label class="form-label">合同类型</label>
            <select class="form-select">
              <option>劳动合同</option>
              <option>劳务合同</option>
              <option>实习协议</option>
            </select>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" onclick="closeModal('addEmployeeModal')">取消</button>
        <button class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>

  <script>
    // Page Navigation
    const pages = ['dashboard', 'roster', 'attendance', 'salary', 'approval', 'reports', 'training', 'settings'];
    const pageTitles = {
      dashboard: '首页仪表盘',
      roster: '员工花名册',
      attendance: '考勤管理',
      salary: '薪酬管理',
      approval: '审批流程',
      reports: '报表统计',
      training: '培训系统',
      settings: '系统设置'
    };

    function navigateTo(page) {
      // Hide all pages
      document.querySelectorAll('.page').forEach(p => p.classList.remove('active'));
      // Show target page
      document.getElementById('page-' + page).classList.add('active');

      // Update nav
      document.querySelectorAll('.nav-item').forEach(item => item.classList.remove('active'));
      document.querySelector('[data-page="' + page + '"]').classList.add('active');

      // Update header
      document.getElementById('page-title').textContent = pageTitles[page];
      document.getElementById('breadcrumb').textContent = pageTitles[page];
    }

    // Nav click handlers
    document.querySelectorAll('.nav-item').forEach(item => {
      item.addEventListener('click', () => {
        const page = item.getAttribute('data-page');
        navigateTo(page);
      });
    });

    // Modal functions
    function openModal(id) {
      document.getElementById(id).classList.add('show');
    }

    function closeModal(id) {
      document.getElementById(id).classList.remove('show');
    }

    // Close modal on overlay click
    document.querySelectorAll('.modal-overlay').forEach(overlay => {
      overlay.addEventListener('click', (e) => {
        if (e.target === overlay) {
          overlay.classList.remove('show');
        }
      });
    });

    // Tab switching
    document.querySelectorAll('.tab').forEach(tab => {
      tab.addEventListener('click', function() {
        this.parentElement.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
        this.classList.add('active');
      });
    });
  </script>
</body>
</html>