|
|
<!DOCTYPE html>
|
|
|
<html lang="zh-CN">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>人力管理系统 - 配置项管理</title>
|
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
|
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
|
<script>
|
|
|
tailwind.config = {
|
|
|
theme: {
|
|
|
extend: {
|
|
|
colors: {
|
|
|
primary: '#2D5CF6',
|
|
|
secondary: '#F5F6FA'
|
|
|
},
|
|
|
borderRadius: {
|
|
|
'none': '0px',
|
|
|
'sm': '2px',
|
|
|
DEFAULT: '4px',
|
|
|
'md': '8px',
|
|
|
'lg': '12px',
|
|
|
'xl': '16px',
|
|
|
'2xl': '20px',
|
|
|
'3xl': '24px',
|
|
|
'full': '9999px',
|
|
|
'button': '4px'
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style>
|
|
|
body {
|
|
|
min-height: 1024px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
.main-content {
|
|
|
flex: 1;
|
|
|
}
|
|
|
.nav-link:hover {
|
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
}
|
|
|
.ai-assistant {
|
|
|
animation: pulse 2s infinite;
|
|
|
}
|
|
|
@keyframes pulse {
|
|
|
0% {
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
50% {
|
|
|
opacity: 1;
|
|
|
transform: scale(1.05);
|
|
|
}
|
|
|
100% {
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
}
|
|
|
.table-row:hover {
|
|
|
background-color: #F5F6FA;
|
|
|
}
|
|
|
.search-input:focus {
|
|
|
outline: none;
|
|
|
box-shadow: 0 0 0 2px rgba(45, 92, 246, 0.5);
|
|
|
}
|
|
|
.card-shadow {
|
|
|
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="bg-gray-50">
|
|
|
<!-- 顶部导航栏 -->
|
|
|
<!-- <header class="bg-primary text-white sticky top-0 z-50">
|
|
|
<div class="container mx-auto px-4">
|
|
|
<div class="flex items-center justify-between h-16">
|
|
|
<div class="flex items-center">
|
|
|
<span class="font-['Pacifico'] text-xl mr-10">人力</span>
|
|
|
|
|
|
<nav class="hidden md:flex space-x-1">
|
|
|
<a href="#" class="nav-link px-3 py-2 text-sm rounded-button">多维统计</a>
|
|
|
<a href="#" class="nav-link px-3 py-2 text-sm rounded-button">人员管理</a>
|
|
|
<a href="#" class="nav-link px-3 py-2 text-sm rounded-button">组织管理</a>
|
|
|
<a href="#" class="nav-link px-3 py-2 text-sm rounded-button">考勤管理</a>
|
|
|
<a href="#" class="nav-link px-3 py-2 text-sm rounded-button">绩效管理</a>
|
|
|
<a href="#" class="nav-link px-3 py-2 text-sm rounded-button">薪酬管理</a>
|
|
|
<a href="#" class="nav-link px-3 py-2 text-sm rounded-button">知识库</a>
|
|
|
<a href="#" class="nav-link px-3 py-2 text-sm rounded-button">后台管理</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center space-x-4">
|
|
|
<div class="relative hidden lg:block">
|
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
|
<i class="fas fa-search text-gray-400" style="width: 16px; height: 16px; display: flex; justify-content: center; align-items: center;"></i>
|
|
|
</div>
|
|
|
<input type="text" class="search-input bg-white text-gray-800 pl-10 pr-4 py-2 rounded-button text-sm w-64 focus:outline-none" placeholder="搜索...">
|
|
|
</div>
|
|
|
|
|
|
<div class="flex items-center">
|
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional+asian+business+man+headshot+with+white+background&width=32&height=32&orientation=squarish&flag=ccdb4f7d825487d0239ffd0e25db8ae5"
|
|
|
alt="用户头像"
|
|
|
class="w-8 h-8 rounded-full object-cover">
|
|
|
</div>
|
|
|
|
|
|
<button class="ai-assistant bg-white text-primary px-3 py-1 rounded-button text-sm flex items-center whitespace-nowrap">
|
|
|
<i class="fas fa-robot mr-2" style="width: 14px; height: 14px; display: flex; justify-content: center; align-items: center;"></i>
|
|
|
AI助手
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</header> -->
|
|
|
|
|
|
<!-- 主要内容区 -->
|
|
|
<main class="main-content py-8">
|
|
|
<div class="container mx-auto px-4 max-w-6xl">
|
|
|
<!-- 页面标题和操作区 -->
|
|
|
<div class="flex justify-between items-center mb-6">
|
|
|
<h1 class="text-2xl font-semibold text-gray-800">配置项管理</h1>
|
|
|
<button class="bg-primary text-white px-4 py-2 rounded-button text-sm flex items-center whitespace-nowrap">
|
|
|
<i class="fas fa-plus mr-2" style="width: 14px; height: 14px; display: flex; justify-content: center; align-items: center;"></i>
|
|
|
新建配置项
|
|
|
</button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 搜索区 -->
|
|
|
<div class="bg-white card-shadow rounded-md p-6 mb-6">
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">配置项名称</label>
|
|
|
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-primary focus:border-primary">
|
|
|
</div>
|
|
|
<div>
|
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">配置项 Code</label>
|
|
|
<input type="text" class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:ring-primary focus:border-primary">
|
|
|
</div>
|
|
|
<div class="flex items-end">
|
|
|
<button class="bg-primary text-white px-4 py-2 rounded-button text-sm whitespace-nowrap w-full">
|
|
|
<i class="fas fa-search mr-2" style="width: 14px; height: 14px;"></i>
|
|
|
查询
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<!-- 配置项列表 -->
|
|
|
<div class="bg-white card-shadow rounded-md overflow-hidden">
|
|
|
<div class="overflow-x-auto">
|
|
|
<table class="min-w-full divide-y divide-gray-200">
|
|
|
<thead class="bg-gray-50">
|
|
|
<tr>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">配置名称</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">配置 Code</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">配置值</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">修改人</th>
|
|
|
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">修改时间</th>
|
|
|
<th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
|
<tr class="table-row">
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">系统名称</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">system.name</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">人力管理系统</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">张明远</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-05-12 14:30</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
|
<button class="text-primary hover:text-primary-dark mr-3">编辑</button>
|
|
|
<button class="text-red-600 hover:text-red-900">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="table-row">
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">登录超时时间</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">session.timeout</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">30分钟</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">李思雨</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-06-18 09:15</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
|
<button class="text-primary hover:text-primary-dark mr-3">编辑</button>
|
|
|
<button class="text-red-600 hover:text-red-900">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="table-row">
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">默认每页条数</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">page.size</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">20</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">王建国</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-07-22 16:45</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
|
<button class="text-primary hover:text-primary-dark mr-3">编辑</button>
|
|
|
<button class="text-red-600 hover:text-red-900">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="table-row">
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">系统Logo URL</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">system.logo</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">/assets/logo.png</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">赵晓雯</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-08-05 11:20</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
|
<button class="text-primary hover:text-primary-dark mr-3">编辑</button>
|
|
|
<button class="text-red-600 hover:text-red-900">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="table-row">
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">数据备份路径</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">backup.path</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">/data/backup</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">陈宇航</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-09-14 13:10</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
|
<button class="text-primary hover:text-primary-dark mr-3">编辑</button>
|
|
|
<button class="text-red-600 hover:text-red-900">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="table-row">
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">邮件服务器地址</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">mail.server</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">smtp.example.com</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">林志强</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-10-08 10:05</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
|
<button class="text-primary hover:text-primary-dark mr-3">编辑</button>
|
|
|
<button class="text-red-600 hover:text-red-900">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr class="table-row">
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">系统维护时间</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">maintenance.time</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">每周日 02:00-04:00</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">吴晓峰</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-11-19 15:30</td>
|
|
|
<td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
|
|
<button class="text-primary hover:text-primary-dark mr-3">编辑</button>
|
|
|
<button class="text-red-600 hover:text-red-900">删除</button>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
<div class="bg-white px-6 py-4 flex items-center justify-between border-t border-gray-200">
|
|
|
<div class="flex-1 flex justify-between sm:hidden">
|
|
|
<a href="#" class="relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
|
上一页
|
|
|
</a>
|
|
|
<a href="#" class="ml-3 relative inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50">
|
|
|
下一页
|
|
|
</a>
|
|
|
</div>
|
|
|
<div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
|
|
|
<div>
|
|
|
<p class="text-sm text-gray-700">
|
|
|
显示 <span class="font-medium">1</span> 到 <span class="font-medium">7</span> 条，共 <span class="font-medium">32</span> 条记录
|
|
|
</p>
|
|
|
</div>
|
|
|
<div>
|
|
|
<nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
|
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
|
<span class="sr-only">上一页</span>
|
|
|
<i class="fas fa-chevron-left" style="width: 12px; height: 12px; display: flex; justify-content: center; align-items: center;"></i>
|
|
|
</a>
|
|
|
<a href="#" aria-current="page" class="z-10 bg-primary border-primary text-white relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
|
1
|
|
|
</a>
|
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
|
2
|
|
|
</a>
|
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
|
3
|
|
|
</a>
|
|
|
<span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700">
|
|
|
...
|
|
|
</span>
|
|
|
<a href="#" class="bg-white border-gray-300 text-gray-500 hover:bg-gray-50 relative inline-flex items-center px-4 py-2 border text-sm font-medium">
|
|
|
8
|
|
|
</a>
|
|
|
<a href="#" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
|
|
|
<span class="sr-only">下一页</span>
|
|
|
<i class="fas fa-chevron-right" style="width: 12px; height: 12px; display: flex; justify-content: center; align-items: center;"></i>
|
|
|
</a>
|
|
|
</nav>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
|
|
|
<!-- 底部通栏 -->
|
|
|
<footer class="bg-gray-800 text-white py-8">
|
|
|
<div class="container mx-auto px-4">
|
|
|
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
|
<div>
|
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">关于我们</h3>
|
|
|
<ul class="space-y-2">
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">公司简介</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">发展历程</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">企业文化</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">招贤纳士</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">产品服务</h3>
|
|
|
<ul class="space-y-2">
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">人力资源系统</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">薪酬管理系统</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">绩效管理系统</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">培训管理系统</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">帮助中心</h3>
|
|
|
<ul class="space-y-2">
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">使用指南</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">常见问题</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">视频教程</a></li>
|
|
|
<li><a href="#" class="text-gray-300 hover:text-white text-sm">在线客服</a></li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div>
|
|
|
<h3 class="text-sm font-semibold uppercase tracking-wider mb-4">联系我们</h3>
|
|
|
<ul class="space-y-2">
|
|
|
<li class="text-gray-300 text-sm">电话：400-888-8888</li>
|
|
|
<li class="text-gray-300 text-sm">邮箱：contact@hrsystem.com</li>
|
|
|
<li class="text-gray-300 text-sm">地址：北京市海淀区科技园路88号</li>
|
|
|
<li class="flex space-x-4 mt-4">
|
|
|
<a href="#" class="text-gray-300 hover:text-white">
|
|
|
<i class="fab fa-weixin" style="width: 16px; height: 16px; display: flex; justify-content: center; align-items: center;"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-300 hover:text-white">
|
|
|
<i class="fab fa-weibo" style="width: 16px; height: 16px; display: flex; justify-content: center; align-items: center;"></i>
|
|
|
</a>
|
|
|
<a href="#" class="text-gray-300 hover:text-white">
|
|
|
<i class="fab fa-linkedin" style="width: 16px; height: 16px; display: flex; justify-content: center; align-items: center;"></i>
|
|
|
</a>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="border-t border-gray-700 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center">
|
|
|
<p class="text-gray-400 text-xs">© 2023 人力管理系统 版权所有</p>
|
|
|
<div class="flex space-x-6 mt-4 md:mt-0">
|
|
|
<a href="#" class="text-gray-400 hover:text-white text-xs">隐私政策</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-white text-xs">服务条款</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-white text-xs">法律声明</a>
|
|
|
<a href="#" class="text-gray-400 hover:text-white text-xs">ICP备案号：京ICP备12345678号</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</footer>
|
|
|
</body>
|
|
|
</html>
|
