You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

359 lines
23 KiB
HTML

4 days ago
<!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>