赵忠林
f9e1286ab1
- 删除应用配置页面及相关组件，重构路由为 /developer/config/[id].vue - 移除开发者文档页面及其导航与样式实现 - 清理开发者侧功能完善工作日志文件 - 删除全局.gitignore配置文件，清理无用忽略规则 - 优化应用配置页面的参数读取和路由结构，解决刷新404问题 - 解决数据库配置唯一键冲突，调整保存逻辑避免重复插入 - 移除对后端配置加密字段的 secret 标记，修正加密异常问题
806 lines
49 KiB
HTML
806 lines
49 KiB
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>
|
||
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
|
||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
||
<style>
|
||
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
||
|
||
* {
|
||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
||
}
|
||
|
||
body {
|
||
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8ec 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.glass {
|
||
background: rgba(255, 255, 255, 0.85);
|
||
backdrop-filter: blur(20px);
|
||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.card-hover {
|
||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||
}
|
||
|
||
.card-hover:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.stat-card {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.stat-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
}
|
||
|
||
.stat-card.blue::before { background: linear-gradient(90deg, #667eea, #764ba2); }
|
||
.stat-card.green::before { background: linear-gradient(90deg, #11998e, #38ef7d); }
|
||
.stat-card.orange::before { background: linear-gradient(90deg, #f093fb, #f5576c); }
|
||
.stat-card.purple::before { background: linear-gradient(90deg, #a8edea, #fed6e3); }
|
||
.stat-card.cyan::before { background: linear-gradient(90deg, #06beb6, #48b1bf); }
|
||
.stat-card.pink::before { background: linear-gradient(90deg, #ff9a9e, #fecfef); }
|
||
|
||
.sidebar {
|
||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.sidebar-item {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.sidebar-item:hover, .sidebar-item.active {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.notification-badge {
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% { opacity: 1; }
|
||
50% { opacity: 0.7; }
|
||
}
|
||
|
||
.gradient-text {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
|
||
.scrollbar-hide::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.tab-btn {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.tab-btn.active {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
}
|
||
|
||
.employee-card {
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.employee-card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: 0 12px 24px rgba(102, 126, 234, 0.15);
|
||
}
|
||
|
||
.progress-bar {
|
||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.action-btn {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.action-btn:hover {
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.dept-badge {
|
||
transition: all 0.2s ease;
|
||
}
|
||
|
||
.dept-badge:hover {
|
||
transform: scale(1.05);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="scrollbar-hide">
|
||
<div class="flex min-h-screen">
|
||
<!-- 左侧导航 -->
|
||
<aside class="sidebar w-64 fixed h-full text-white flex flex-col">
|
||
<!-- Logo -->
|
||
<div class="p-6 border-b border-white/10">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-white/20 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-cube text-xl"></i>
|
||
</div>
|
||
<div>
|
||
<h1 class="font-bold text-lg">天天系统</h1>
|
||
<p class="text-xs text-white/70">ERP 管理平台</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导航菜单 -->
|
||
<nav class="flex-1 py-6 px-3">
|
||
<div class="space-y-1">
|
||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-home w-5"></i>
|
||
<span>工作台</span>
|
||
</a>
|
||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-cogs w-5"></i>
|
||
<span>设备管理</span>
|
||
</a>
|
||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-shopping-cart w-5"></i>
|
||
<span>采购管理</span>
|
||
</a>
|
||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-warehouse w-5"></i>
|
||
<span>仓储物流</span>
|
||
</a>
|
||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-wallet w-5"></i>
|
||
<span>财务管理</span>
|
||
</a>
|
||
<a href="#" class="sidebar-item active flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-users w-5"></i>
|
||
<span>人力资源</span>
|
||
</a>
|
||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-tasks w-5"></i>
|
||
<span>协同办公</span>
|
||
</a>
|
||
</div>
|
||
|
||
<div class="mt-8 pt-6 border-t border-white/10">
|
||
<p class="px-4 text-xs text-white/50 mb-3">个人</p>
|
||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-user w-5"></i>
|
||
<span>个人信息</span>
|
||
</a>
|
||
<a href="#" class="sidebar-item flex items-center gap-3 px-4 py-3 rounded-xl">
|
||
<i class="fas fa-cog w-5"></i>
|
||
<span>系统设置</span>
|
||
</a>
|
||
</div>
|
||
</nav>
|
||
|
||
<!-- 用户信息 -->
|
||
<div class="p-4 border-t border-white/10">
|
||
<div class="flex items-center gap-3">
|
||
<div class="w-10 h-10 bg-white/20 rounded-full flex items-center justify-center">
|
||
<i class="fas fa-user"></i>
|
||
</div>
|
||
<div class="flex-1">
|
||
<p class="font-medium">管理员</p>
|
||
<p class="text-xs text-white/70">超级管理员</p>
|
||
</div>
|
||
<button class="text-white/70 hover:text-white">
|
||
<i class="fas fa-sign-out-alt"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</aside>
|
||
|
||
<!-- 主内容区 -->
|
||
<main class="flex-1 ml-64">
|
||
<!-- 顶部栏 -->
|
||
<header class="glass sticky top-0 z-50 px-8 py-4">
|
||
<div class="flex items-center justify-between">
|
||
<!-- 搜索 -->
|
||
<div class="relative w-96">
|
||
<input type="text" placeholder="🔍 搜索员工、部门、职位、档案..."
|
||
class="w-full px-5 py-3 bg-gray-100 rounded-xl border-0 focus:ring-2 focus:ring-purple-500 focus:bg-white transition-all">
|
||
</div>
|
||
|
||
<!-- 右侧 -->
|
||
<div class="flex items-center gap-6">
|
||
<!-- 全屏 -->
|
||
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||
<i class="fas fa-expand text-lg"></i>
|
||
</button>
|
||
|
||
<!-- 消息 -->
|
||
<button class="relative text-gray-500 hover:text-purple-600 transition-colors">
|
||
<i class="fas fa-bell text-lg"></i>
|
||
<span class="notification-badge absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center">2</span>
|
||
</button>
|
||
|
||
<!-- 语言 -->
|
||
<button class="text-gray-500 hover:text-purple-600 transition-colors">
|
||
<i class="fas fa-globe text-lg"></i>
|
||
</button>
|
||
|
||
<!-- 用户 -->
|
||
<div class="flex items-center gap-3 pl-6 border-l border-gray-200">
|
||
<div class="w-10 h-10 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold">
|
||
A
|
||
</div>
|
||
<div>
|
||
<p class="font-medium text-gray-800">Admin</p>
|
||
<p class="text-xs text-gray-500">超级管理员</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<!-- 内容区域 -->
|
||
<div class="p-8">
|
||
<!-- 页面标题 -->
|
||
<div class="mb-8">
|
||
<div class="flex items-center justify-between">
|
||
<div>
|
||
<h2 class="text-3xl font-bold text-gray-800 mb-2">
|
||
<i class="fas fa-users text-purple-500 mr-3"></i>人力资源管理
|
||
</h2>
|
||
<p class="text-gray-500">管理企业员工信息、组织架构、考勤与薪酬</p>
|
||
</div>
|
||
<button class="px-6 py-3 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl font-medium hover:shadow-lg transition-all flex items-center gap-2">
|
||
<i class="fas fa-plus"></i>
|
||
新增员工
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 数据概览 -->
|
||
<div class="grid grid-cols-6 gap-4 mb-8">
|
||
<div class="stat-card blue glass rounded-2xl p-5 card-hover">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="w-10 h-10 bg-blue-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-users text-blue-600 text-lg"></i>
|
||
</div>
|
||
<span class="text-green-500 text-xs font-medium"><i class="fas fa-arrow-up"></i> 3</span>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-1">156</h3>
|
||
<p class="text-gray-500 text-xs">在职员工</p>
|
||
</div>
|
||
|
||
<div class="stat-card green glass rounded-2xl p-5 card-hover">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="w-10 h-10 bg-green-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-user-plus text-green-600 text-lg"></i>
|
||
</div>
|
||
<span class="text-green-500 text-xs font-medium"><i class="fas fa-arrow-up"></i> 2</span>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-1">8</h3>
|
||
<p class="text-gray-500 text-xs">本月入职</p>
|
||
</div>
|
||
|
||
<div class="stat-card orange glass rounded-2xl p-5 card-hover">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="w-10 h-10 bg-orange-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-user-minus text-orange-600 text-lg"></i>
|
||
</div>
|
||
<span class="text-gray-500 text-xs font-medium">-</span>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-1">3</h3>
|
||
<p class="text-gray-500 text-xs">本月离职</p>
|
||
</div>
|
||
|
||
<div class="stat-card purple glass rounded-2xl p-5 card-hover">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="w-10 h-10 bg-purple-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-calendar-check text-purple-600 text-lg"></i>
|
||
</div>
|
||
<span class="text-red-500 text-xs font-medium"><i class="fas fa-arrow-up"></i> 5</span>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-1">12</h3>
|
||
<p class="text-gray-500 text-xs">今日缺勤</p>
|
||
</div>
|
||
|
||
<div class="stat-card cyan glass rounded-2xl p-5 card-hover">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="w-10 h-10 bg-cyan-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-clock text-cyan-600 text-lg"></i>
|
||
</div>
|
||
<span class="text-green-500 text-xs font-medium">98%</span>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-1">144</h3>
|
||
<p class="text-gray-500 text-xs">今日出勤</p>
|
||
</div>
|
||
|
||
<div class="stat-card pink glass rounded-2xl p-5 card-hover">
|
||
<div class="flex items-center justify-between mb-3">
|
||
<div class="w-10 h-10 bg-pink-100 rounded-xl flex items-center justify-center">
|
||
<i class="fas fa-wallet text-pink-600 text-lg"></i>
|
||
</div>
|
||
<span class="text-green-500 text-xs font-medium"><i class="fas fa-arrow-up"></i> 8%</span>
|
||
</div>
|
||
<h3 class="text-2xl font-bold text-gray-800 mb-1">¥86.5<span class="text-sm">万</span></h3>
|
||
<p class="text-gray-500 text-xs">本月薪酬</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 快捷操作与部门分布 -->
|
||
<div class="grid grid-cols-3 gap-6 mb-8">
|
||
<!-- 快捷操作 -->
|
||
<div class="glass rounded-2xl p-6 card-hover">
|
||
<h3 class="font-bold text-lg text-gray-800 mb-4 flex items-center gap-2">
|
||
<i class="fas fa-bolt text-yellow-500"></i>
|
||
快捷操作
|
||
</h3>
|
||
<div class="grid grid-cols-2 gap-3">
|
||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500 hover:text-white transition-all">
|
||
<i class="fas fa-user-plus text-purple-500"></i>
|
||
入职办理
|
||
</button>
|
||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500 hover:text-white transition-all">
|
||
<i class="fas fa-user-minus text-blue-500"></i>
|
||
离职办理
|
||
</button>
|
||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500 hover:text-white transition-all">
|
||
<i class="fas fa-calendar-alt text-green-500"></i>
|
||
请假审批
|
||
</button>
|
||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500 hover:text-white transition-all">
|
||
<i class="fas fa-file-invoice-dollar text-orange-500"></i>
|
||
薪资核算
|
||
</button>
|
||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500 hover:text-white transition-all">
|
||
<i class="fas fa-chart-pie text-red-500"></i>
|
||
考勤统计
|
||
</button>
|
||
<button class="quick-btn flex items-center gap-2 px-4 py-3 bg-gray-50 rounded-xl text-gray-700 text-sm font-medium hover:bg-gradient-to-r hover:from-purple-500 hover:to-pink-500 hover:text-white transition-all">
|
||
<i class="fas fa-sitemap text-indigo-500"></i>
|
||
组织架构
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 部门分布 -->
|
||
<div class="glass rounded-2xl p-6 card-hover col-span-2">
|
||
<div class="flex items-center justify-between mb-4">
|
||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||
<i class="fas fa-sitemap text-purple-500"></i>
|
||
部门人员分布
|
||
</h3>
|
||
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
|
||
</div>
|
||
<div class="grid grid-cols-4 gap-4">
|
||
<div class="dept-badge p-4 bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<i class="fas fa-laptop-code text-blue-600 text-xl"></i>
|
||
<span class="text-2xl font-bold text-blue-600">32</span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-700">技术研发部</p>
|
||
<p class="text-xs text-gray-500 mt-1">占比 20.5%</p>
|
||
</div>
|
||
<div class="dept-badge p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-xl cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<i class="fas fa-bullhorn text-green-600 text-xl"></i>
|
||
<span class="text-2xl font-bold text-green-600">28</span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-700">市场销售部</p>
|
||
<p class="text-xs text-gray-500 mt-1">占比 17.9%</p>
|
||
</div>
|
||
<div class="dept-badge p-4 bg-gradient-to-br from-orange-50 to-orange-100 rounded-xl cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<i class="fas fa-headset text-orange-600 text-xl"></i>
|
||
<span class="text-2xl font-bold text-orange-600">24</span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-700">客户服务部</p>
|
||
<p class="text-xs text-gray-500 mt-1">占比 15.4%</p>
|
||
</div>
|
||
<div class="dept-badge p-4 bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<i class="fas fa-cogs text-purple-600 text-xl"></i>
|
||
<span class="text-2xl font-bold text-purple-600">22</span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-700">生产运营部</p>
|
||
<p class="text-xs text-gray-500 mt-1">占比 14.1%</p>
|
||
</div>
|
||
<div class="dept-badge p-4 bg-gradient-to-br from-pink-50 to-pink-100 rounded-xl cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<i class="fas fa-wallet text-pink-600 text-xl"></i>
|
||
<span class="text-2xl font-bold text-pink-600">18</span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-700">财务行政部</p>
|
||
<p class="text-xs text-gray-500 mt-1">占比 11.5%</p>
|
||
</div>
|
||
<div class="dept-badge p-4 bg-gradient-to-br from-cyan-50 to-cyan-100 rounded-xl cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<i class="fas fa-warehouse text-cyan-600 text-xl"></i>
|
||
<span class="text-2xl font-bold text-cyan-600">16</span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-700">仓储物流部</p>
|
||
<p class="text-xs text-gray-500 mt-1">占比 10.3%</p>
|
||
</div>
|
||
<div class="dept-badge p-4 bg-gradient-to-br from-red-50 to-red-100 rounded-xl cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<i class="fas fa-shield-alt text-red-600 text-xl"></i>
|
||
<span class="text-2xl font-bold text-red-600">10</span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-700">质量安全部</p>
|
||
<p class="text-xs text-gray-500 mt-1">占比 6.4%</p>
|
||
</div>
|
||
<div class="dept-badge p-4 bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-xl cursor-pointer">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<i class="fas fa-user-tie text-indigo-600 text-xl"></i>
|
||
<span class="text-2xl font-bold text-indigo-600">6</span>
|
||
</div>
|
||
<p class="text-sm font-medium text-gray-700">管理层</p>
|
||
<p class="text-xs text-gray-500 mt-1">占比 3.8%</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 员工列表 -->
|
||
<div class="glass rounded-2xl p-6 card-hover mb-8">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||
<i class="fas fa-list text-purple-500"></i>
|
||
员工列表
|
||
</h3>
|
||
<div class="flex items-center gap-3">
|
||
<div class="flex bg-gray-100 rounded-xl p-1">
|
||
<button class="tab-btn active px-4 py-2 rounded-lg text-sm font-medium">全部</button>
|
||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium text-gray-600">在职</button>
|
||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium text-gray-600">试用期</button>
|
||
<button class="tab-btn px-4 py-2 rounded-lg text-sm font-medium text-gray-600">离职</button>
|
||
</div>
|
||
<button class="px-4 py-2 bg-gray-100 rounded-xl text-gray-600 text-sm font-medium hover:bg-gray-200 transition-colors">
|
||
<i class="fas fa-filter mr-2"></i>筛选
|
||
</button>
|
||
<button class="px-4 py-2 bg-gray-100 rounded-xl text-gray-600 text-sm font-medium hover:bg-gray-200 transition-colors">
|
||
<i class="fas fa-download mr-2"></i>导出
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表头 -->
|
||
<div class="grid grid-cols-12 gap-4 px-4 py-3 bg-gray-50 rounded-xl text-sm font-medium text-gray-600 mb-3">
|
||
<div class="col-span-3">员工信息</div>
|
||
<div class="col-span-2">部门/职位</div>
|
||
<div class="col-span-2">联系方式</div>
|
||
<div class="col-span-2">入职日期</div>
|
||
<div class="col-span-1">状态</div>
|
||
<div class="col-span-2 text-right">操作</div>
|
||
</div>
|
||
|
||
<!-- 员工数据 -->
|
||
<div class="space-y-3">
|
||
<!-- 员工1 -->
|
||
<div class="employee-card grid grid-cols-12 gap-4 px-4 py-4 bg-white rounded-xl border border-gray-100 items-center">
|
||
<div class="col-span-3 flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-xl flex items-center justify-center text-white font-bold text-lg">
|
||
张
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800">张伟</p>
|
||
<p class="text-xs text-gray-500">EMP2024001</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm font-medium text-gray-800">技术研发部</p>
|
||
<p class="text-xs text-gray-500">高级前端工程师</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">138****8888</p>
|
||
<p class="text-xs text-gray-500">zhangwei@company.com</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">2024-01-15</p>
|
||
<p class="text-xs text-gray-500">已入职 450 天</p>
|
||
</div>
|
||
<div class="col-span-1">
|
||
<span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-xs font-medium">在职</span>
|
||
</div>
|
||
<div class="col-span-2 flex items-center justify-end gap-2">
|
||
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
||
<i class="fas fa-eye text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center hover:bg-purple-100">
|
||
<i class="fas fa-edit text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-red-50 text-red-600 rounded-lg flex items-center justify-center hover:bg-red-100">
|
||
<i class="fas fa-trash text-sm"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 员工2 -->
|
||
<div class="employee-card grid grid-cols-12 gap-4 px-4 py-4 bg-white rounded-xl border border-gray-100 items-center">
|
||
<div class="col-span-3 flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center text-white font-bold text-lg">
|
||
李
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800">李明</p>
|
||
<p class="text-xs text-gray-500">EMP2024002</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm font-medium text-gray-800">市场销售部</p>
|
||
<p class="text-xs text-gray-500">销售经理</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">139****6666</p>
|
||
<p class="text-xs text-gray-500">liming@company.com</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">2024-02-01</p>
|
||
<p class="text-xs text-gray-500">已入职 433 天</p>
|
||
</div>
|
||
<div class="col-span-1">
|
||
<span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-xs font-medium">在职</span>
|
||
</div>
|
||
<div class="col-span-2 flex items-center justify-end gap-2">
|
||
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
||
<i class="fas fa-eye text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center hover:bg-purple-100">
|
||
<i class="fas fa-edit text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-red-50 text-red-600 rounded-lg flex items-center justify-center hover:bg-red-100">
|
||
<i class="fas fa-trash text-sm"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 员工3 -->
|
||
<div class="employee-card grid grid-cols-12 gap-4 px-4 py-4 bg-white rounded-xl border border-gray-100 items-center">
|
||
<div class="col-span-3 flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-pink-500 to-rose-500 rounded-xl flex items-center justify-center text-white font-bold text-lg">
|
||
王
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800">王芳</p>
|
||
<p class="text-xs text-gray-500">EMP2024003</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm font-medium text-gray-800">财务行政部</p>
|
||
<p class="text-xs text-gray-500">财务主管</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">137****5555</p>
|
||
<p class="text-xs text-gray-500">wangfang@company.com</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">2024-03-10</p>
|
||
<p class="text-xs text-gray-500">已入职 396 天</p>
|
||
</div>
|
||
<div class="col-span-1">
|
||
<span class="px-3 py-1 bg-green-100 text-green-600 rounded-full text-xs font-medium">在职</span>
|
||
</div>
|
||
<div class="col-span-2 flex items-center justify-end gap-2">
|
||
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
||
<i class="fas fa-eye text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center hover:bg-purple-100">
|
||
<i class="fas fa-edit text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-red-50 text-red-600 rounded-lg flex items-center justify-center hover:bg-red-100">
|
||
<i class="fas fa-trash text-sm"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 员工4 -->
|
||
<div class="employee-card grid grid-cols-12 gap-4 px-4 py-4 bg-white rounded-xl border border-gray-100 items-center">
|
||
<div class="col-span-3 flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-green-500 to-teal-500 rounded-xl flex items-center justify-center text-white font-bold text-lg">
|
||
陈
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800">陈杰</p>
|
||
<p class="text-xs text-gray-500">EMP2025001</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm font-medium text-gray-800">技术研发部</p>
|
||
<p class="text-xs text-gray-500">Java开发工程师</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">136****4444</p>
|
||
<p class="text-xs text-gray-500">chenjie@company.com</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">2025-01-05</p>
|
||
<p class="text-xs text-gray-500">已入职 95 天</p>
|
||
</div>
|
||
<div class="col-span-1">
|
||
<span class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-xs font-medium">试用期</span>
|
||
</div>
|
||
<div class="col-span-2 flex items-center justify-end gap-2">
|
||
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
||
<i class="fas fa-eye text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center hover:bg-purple-100">
|
||
<i class="fas fa-edit text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-red-50 text-red-600 rounded-lg flex items-center justify-center hover:bg-red-100">
|
||
<i class="fas fa-trash text-sm"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 员工5 -->
|
||
<div class="employee-card grid grid-cols-12 gap-4 px-4 py-4 bg-white rounded-xl border border-gray-100 items-center">
|
||
<div class="col-span-3 flex items-center gap-3">
|
||
<div class="w-12 h-12 bg-gradient-to-br from-orange-500 to-red-500 rounded-xl flex items-center justify-center text-white font-bold text-lg">
|
||
刘
|
||
</div>
|
||
<div>
|
||
<p class="font-semibold text-gray-800">刘洋</p>
|
||
<p class="text-xs text-gray-500">EMP2025002</p>
|
||
</div>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm font-medium text-gray-800">客户服务部</p>
|
||
<p class="text-xs text-gray-500">客服专员</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">135****3333</p>
|
||
<p class="text-xs text-gray-500">liuyang@company.com</p>
|
||
</div>
|
||
<div class="col-span-2">
|
||
<p class="text-sm text-gray-700">2025-02-20</p>
|
||
<p class="text-xs text-gray-500">已入职 49 天</p>
|
||
</div>
|
||
<div class="col-span-1">
|
||
<span class="px-3 py-1 bg-yellow-100 text-yellow-600 rounded-full text-xs font-medium">试用期</span>
|
||
</div>
|
||
<div class="col-span-2 flex items-center justify-end gap-2">
|
||
<button class="action-btn w-8 h-8 bg-blue-50 text-blue-600 rounded-lg flex items-center justify-center hover:bg-blue-100">
|
||
<i class="fas fa-eye text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-purple-50 text-purple-600 rounded-lg flex items-center justify-center hover:bg-purple-100">
|
||
<i class="fas fa-edit text-sm"></i>
|
||
</button>
|
||
<button class="action-btn w-8 h-8 bg-red-50 text-red-600 rounded-lg flex items-center justify-center hover:bg-red-100">
|
||
<i class="fas fa-trash text-sm"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 分页 -->
|
||
<div class="flex items-center justify-between mt-6 pt-4 border-t border-gray-100">
|
||
<p class="text-sm text-gray-500">显示 1-5 条，共 156 条</p>
|
||
<div class="flex items-center gap-2">
|
||
<button class="w-10 h-10 rounded-xl bg-gray-100 text-gray-400 flex items-center justify-center cursor-not-allowed">
|
||
<i class="fas fa-chevron-left"></i>
|
||
</button>
|
||
<button class="w-10 h-10 rounded-xl bg-gradient-to-r from-purple-500 to-pink-500 text-white flex items-center justify-center font-medium">1</button>
|
||
<button class="w-10 h-10 rounded-xl bg-gray-100 text-gray-600 flex items-center justify-center font-medium hover:bg-gray-200 transition-colors">2</button>
|
||
<button class="w-10 h-10 rounded-xl bg-gray-100 text-gray-600 flex items-center justify-center font-medium hover:bg-gray-200 transition-colors">3</button>
|
||
<span class="text-gray-400">...</span>
|
||
<button class="w-10 h-10 rounded-xl bg-gray-100 text-gray-600 flex items-center justify-center font-medium hover:bg-gray-200 transition-colors">32</button>
|
||
<button class="w-10 h-10 rounded-xl bg-gray-100 text-gray-600 flex items-center justify-center hover:bg-gray-200 transition-colors">
|
||
<i class="fas fa-chevron-right"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 底部区域 -->
|
||
<div class="grid grid-cols-2 gap-6">
|
||
<!-- 待审批事项 -->
|
||
<div class="glass rounded-2xl p-6 card-hover">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||
<i class="fas fa-clipboard-check text-orange-500"></i>
|
||
待审批事项
|
||
</h3>
|
||
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="p-4 bg-orange-50 rounded-xl border-l-4 border-orange-500 cursor-pointer hover:bg-orange-100 transition-colors">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h4 class="font-medium text-gray-800">请假申请 - 王芳</h4>
|
||
<span class="text-xs text-orange-600 font-medium">待审批</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-2">病假 2天 (2026-04-10 至 2026-04-11)</p>
|
||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||
<span><i class="fas fa-clock mr-1"></i>2小时前提交</span>
|
||
<span><i class="fas fa-user mr-1"></i>财务行政部</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4 bg-blue-50 rounded-xl border-l-4 border-blue-500 cursor-pointer hover:bg-blue-100 transition-colors">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h4 class="font-medium text-gray-800">加班申请 - 张伟</h4>
|
||
<span class="text-xs text-blue-600 font-medium">待审批</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-2">项目紧急上线，申请加班 4小时</p>
|
||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||
<span><i class="fas fa-clock mr-1"></i>4小时前提交</span>
|
||
<span><i class="fas fa-user mr-1"></i>技术研发部</span>
|
||
</div>
|
||
</div>
|
||
<div class="p-4 bg-green-50 rounded-xl border-l-4 border-green-500 cursor-pointer hover:bg-green-100 transition-colors">
|
||
<div class="flex items-center justify-between mb-2">
|
||
<h4 class="font-medium text-gray-800">转正申请 - 陈杰</h4>
|
||
<span class="text-xs text-green-600 font-medium">待审批</span>
|
||
</div>
|
||
<p class="text-sm text-gray-600 mb-2">试用期已满3个月，申请转正</p>
|
||
<div class="flex items-center gap-4 text-xs text-gray-500">
|
||
<span><i class="fas fa-clock mr-1"></i>1天前提交</span>
|
||
<span><i class="fas fa-user mr-1"></i>技术研发部</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 本月生日 -->
|
||
<div class="glass rounded-2xl p-6 card-hover">
|
||
<div class="flex items-center justify-between mb-6">
|
||
<h3 class="font-bold text-lg text-gray-800 flex items-center gap-2">
|
||
<i class="fas fa-birthday-cake text-pink-500"></i>
|
||
本月生日员工
|
||
</h3>
|
||
<button class="text-purple-600 text-sm font-medium hover:underline">查看全部</button>
|
||
</div>
|
||
<div class="space-y-4">
|
||
<div class="flex items-center gap-4 p-4 bg-gradient-to-r from-pink-50 to-purple-50 rounded-xl">
|
||
<div class="w-14 h-14 bg-gradient-to-br from-pink-500 to-purple-500 rounded-xl flex items-center justify-center text-white font-bold text-xl">
|
||
赵
|
||
</div>
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-gray-800">赵敏</h4>
|
||
<p class="text-sm text-gray-500">市场销售部 · 销售专员</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-lg font-bold text-pink-600">4月12日</p>
|
||
<p class="text-xs text-gray-500">3天后</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-4 p-4 bg-gradient-to-r from-blue-50 to-cyan-50 rounded-xl">
|
||
<div class="w-14 h-14 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center text-white font-bold text-xl">
|
||
孙
|
||
</div>
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-gray-800">孙强</h4>
|
||
<p class="text-sm text-gray-500">生产运营部 · 生产主管</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-lg font-bold text-blue-600">4月18日</p>
|
||
<p class="text-xs text-gray-500">9天后</p>
|
||
</div>
|
||
</div>
|
||
<div class="flex items-center gap-4 p-4 bg-gradient-to-r from-green-50 to-teal-50 rounded-xl">
|
||
<div class="w-14 h-14 bg-gradient-to-br from-green-500 to-teal-500 rounded-xl flex items-center justify-center text-white font-bold text-xl">
|
||
周
|
||
</div>
|
||
<div class="flex-1">
|
||
<h4 class="font-semibold text-gray-800">周丽</h4>
|
||
<p class="text-sm text-gray-500">客户服务部 · 客服主管</p>
|
||
</div>
|
||
<div class="text-right">
|
||
<p class="text-lg font-bold text-green-600">4月25日</p>
|
||
<p class="text-xs text-gray-500">16天后</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
</body>
|
||
</html>
|