Spaces:
Running
Running
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HR Master Pro | 员工信息管理</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#3b82f6', | |
| secondary: '#10b981' | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .custom-scrollbar::-webkit-scrollbar { | |
| width: 6px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 3px; | |
| } | |
| .custom-scrollbar::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- 侧边栏 --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-white border-r border-gray-200"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-primary-600"> | |
| <div class="flex items-center"> | |
| <i data-feather="users" class="w-6 h-6 text-white"></i> | |
| <span class="ml-2 text-xl font-semibold text-white">HR Master Pro</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto custom-scrollbar"> | |
| <nav class="flex-1 space-y-2"> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-white rounded-md bg-primary-500"> | |
| <i data-feather="home" class="w-4 h-4 mr-3"></i> | |
| 仪表盘 | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="user" class="w-4 h-4 mr-3"></i> | |
| 员工管理 | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="file-text" class="w-4 h-4 mr-3"></i> | |
| 人事档案 | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="clock" class="w-4 h-4 mr-3"></i> | |
| 考勤管理 | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="dollar-sign" class="w-4 h-4 mr-3"></i> | |
| 薪资管理 | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-700 rounded-md hover:bg-gray-100"> | |
| <i data-feather="settings" class="w-4 h-4 mr-3"></i> | |
| 系统设置 | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img class="w-10 h-10 rounded-full" src="http://static.photos/people/200x200/1" alt="用户头像"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">管理员</p> | |
| <p class="text-xs text-gray-500">admin@company.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 主内容区 --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- 顶部导航 --> | |
| <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <button class="p-1 text-gray-500 rounded-md md:hidden hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="menu" class="w-6 h-6"></i> | |
| </button> | |
| <h1 class="ml-4 text-lg font-semibold text-gray-800">员工信息编辑器</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="bell" class="w-5 h-5"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="help-circle" class="w-5 h-5"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- 内容区域 --> | |
| <div class="flex-1 overflow-auto custom-scrollbar"> | |
| <div class="p-6"> | |
| <!-- 角色切换 --> | |
| <div class="flex mb-6 space-x-4"> | |
| <button class="px-4 py-2 text-sm font-medium rounded-md bg-primary-500 text-white"> | |
| 管理员视图 | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"> | |
| HR视图 | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"> | |
| 普通员工视图 | |
| </button> | |
| </div> | |
| <!-- 员工信息表单 --> | |
| <div class="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3"> | |
| <!-- 基本信息 --> | |
| <div class="p-6 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-800">基本信息</h2> | |
| <button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="flex items-center"> | |
| <img class="w-16 h-16 rounded-full" src="http://static.photos/people/200x200/2" alt="员工头像"> | |
| <div class="ml-4"> | |
| <button class="px-3 py-1 text-xs font-medium text-white rounded-md bg-primary-500">上传新照片</button> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">姓名</label> | |
| <input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="张三"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">性别</label> | |
| <select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <option>男</option> | |
| <option>女</option> | |
| <option>其他</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">出生日期</label> | |
| <input type="date" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="1990-05-15"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 工作信息 --> | |
| <div class="p-6 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-800">工作信息</h2> | |
| <button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">员工编号</label> | |
| <input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="EMP-2023-001"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">部门</label> | |
| <select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <option>技术部</option> | |
| <option>市场部</option> | |
| <option>人力资源部</option> | |
| <option>财务部</option> | |
| <option>行政部</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">职位</label> | |
| <input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="高级前端开发工程师"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">入职日期</label> | |
| <input type="date" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="2020-03-10"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">工作状态</label> | |
| <select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <option>在职</option> | |
| <option>试用期</option> | |
| <option>离职</option> | |
| <option>停职</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 联系方式 --> | |
| <div class="p-6 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-800">联系方式</h2> | |
| <button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="edit" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">手机号码</label> | |
| <input type="tel" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="13800138000"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">电子邮箱</label> | |
| <input type="email" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="zhangsan@company.com"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">紧急联系人</label> | |
| <input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="李四"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">紧急联系电话</label> | |
| <input type="tel" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="13900139000"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 教育背景 --> | |
| <div class="p-6 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-800">教育背景</h2> | |
| <button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="plus" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">学历</label> | |
| <select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <option>博士</option> | |
| <option>硕士</option> | |
| <option selected>本科</option> | |
| <option>大专</option> | |
| <option>高中</option> | |
| <option>其他</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">毕业院校</label> | |
| <input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="清华大学"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">专业</label> | |
| <input type="text" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="计算机科学与技术"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">毕业时间</label> | |
| <input type="date" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="2012-06-30"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 薪资信息 --> | |
| <div class="p-6 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-800">薪资信息</h2> | |
| <button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="lock" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">基本工资</label> | |
| <input type="number" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="15000" disabled> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">岗位津贴</label> | |
| <input type="number" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="3000" disabled> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">绩效奖金</label> | |
| <input type="number" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="2000" disabled> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">社保基数</label> | |
| <input type="number" class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500" value="10000" disabled> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 权限设置 --> | |
| <div class="p-6 bg-white rounded-lg shadow"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-medium text-gray-800">系统权限</h2> | |
| <button class="p-1 text-gray-500 rounded-md hover:text-gray-600 hover:bg-gray-100"> | |
| <i data-feather="settings" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700">用户角色</label> | |
| <select class="w-full px-3 py-2 mt-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-1 focus:ring-primary-500"> | |
| <option>普通员工</option> | |
| <option selected>部门经理</option> | |
| <option>HR专员</option> | |
| <option>系统管理员</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-300 rounded focus:ring-primary-500" checked> | |
| <span class="ml-2 text-sm text-gray-700">考勤管理权限</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-300 rounded focus:ring-primary-500"> | |
| <span class="ml-2 text-sm text-gray-700">薪资管理权限</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-300 rounded focus:ring-primary-500" checked> | |
| <span class="ml-2 text-sm text-gray-700">人事管理权限</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="w-4 h-4 text-primary-500 border-gray-300 rounded focus:ring-primary-500"> | |
| <span class="ml-2 text-sm text-gray-700">系统管理权限</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 操作按钮 --> | |
| <div class="flex justify-end mt-6 space-x-4"> | |
| <button class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50"> | |
| 取消 | |
| </button> | |
| <button class="px-4 py-2 text-sm font-medium text-white rounded-md bg-primary-500 hover:bg-primary-600"> | |
| 保存更改 | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| feather.replace(); | |
| // 角色切换按钮功能 | |
| document.querySelectorAll('.flex.space-x-4 button').forEach(button => { | |
| button.addEventListener('click', function() { | |
| document.querySelectorAll('.flex.space-x-4 button').forEach(btn => { | |
| btn.classList.remove('bg-primary-500', 'text-white'); | |
| btn.classList.add('text-gray-700', 'bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50'); | |
| }); | |
| this.classList.remove('text-gray-700', 'bg-white', 'border', 'border-gray-300', 'hover:bg-gray-50'); | |
| this.classList.add('bg-primary-500', 'text-white'); | |
| // 根据角色显示/隐藏相应字段 | |
| const role = this.textContent.trim(); | |
| if(role === 'HR视图') { | |
| document.querySelector('input[value="15000"]').disabled = false; | |
| document.querySelector('input[value="3000"]').disabled = false; | |
| document.querySelector('input[value="2000"]').disabled = false; | |
| document.querySelector('input[value="10000"]').disabled = false; | |
| } else { | |
| document.querySelector('input[value="15000"]').disabled = true; | |
| document.querySelector('input[value="3000"]').disabled = true; | |
| document.querySelector('input[value="2000"]').disabled = true; | |
| document.querySelector('input[value="10000"]').disabled = true; | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |