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.
738 lines
50 KiB
HTML
738 lines
50 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.tailwindcss.com"></script>
|
|
<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>
|
|
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>
|
|
.tree-item {
|
|
padding-left: 20px;
|
|
position: relative;
|
|
}
|
|
|
|
.tree-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 0;
|
|
height: 100%;
|
|
border-left: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.tree-item:last-child::before {
|
|
height: 50%;
|
|
}
|
|
|
|
.tree-item::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 8px;
|
|
top: 50%;
|
|
width: 8px;
|
|
border-bottom: 1px solid #e5e7eb;
|
|
}
|
|
|
|
.scroll-container {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: #cbd5e1 #f1f5f9;
|
|
}
|
|
|
|
.scroll-container::-webkit-scrollbar {
|
|
width: 6px;
|
|
height: 6px;
|
|
}
|
|
|
|
.scroll-container::-webkit-scrollbar-track {
|
|
background: #f1f5f9;
|
|
}
|
|
|
|
.scroll-container::-webkit-scrollbar-thumb {
|
|
background-color: #cbd5e1;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.hover-card:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
}
|
|
|
|
i.fa-icon {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="min-h-[1024px] bg-gray-50 flex flex-col">
|
|
<!-- 顶部导航 -->
|
|
<!-- <header class="bg-primary text-white shadow-md">
|
|
<div class="container mx-auto px-6 py-3 flex items-center justify-between">
|
|
<div class="flex items-center space-x-8">
|
|
<a href="#" class="text-xl font-['Pacifico']">人力</a>
|
|
<nav class="hidden md:flex space-x-6 text-sm">
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">多维统计</a>
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">人员管理</a>
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">组织管理</a>
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">考勤管理</a>
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">绩效管理</a>
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">薪酬管理</a>
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">知识库</a>
|
|
<a href="#" class="hover:bg-white/20 px-2 py-1 rounded-button transition">后台管理</a>
|
|
</nav>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<div class="relative">
|
|
<input type="text" placeholder="搜索..."
|
|
class="bg-white/20 text-white placeholder-white/70 text-sm rounded-button px-3 py-1 pl-8 w-40 focus:w-60 transition-all duration-300 focus:outline-none focus:ring-1 focus:ring-white/50">
|
|
<i
|
|
class="fa-icon fa-solid fa-magnifying-glass absolute left-2 top-1/2 transform -translate-y-1/2 text-white/70 text-xs"></i>
|
|
</div>
|
|
<button
|
|
class="bg-white/10 hover:bg-white/20 rounded-button px-3 py-1 text-sm flex items-center space-x-1 transition">
|
|
<i class="fa-icon fa-solid fa-robot text-xs"></i>
|
|
<span>AI 助手</span>
|
|
</button>
|
|
<div class="relative">
|
|
<img src="https://mastergo.com/ai/api/search-image?query=professional20business20profile20photo20of20a20young20asian20male20executive20with20white20background&width=32&height=32&orientation=squarish&flag=a6d20992702c7a888c93eb051f248a43"
|
|
alt="用户头像" class="w-8 h-8 rounded-full object-cover cursor-pointer">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header> -->
|
|
<!-- 主内容区域 -->
|
|
<main class="flex-grow container mx-auto px-6 py-8">
|
|
<div class="flex flex-col space-y-6">
|
|
<!-- 面包屑导航 -->
|
|
<!-- <div class="flex items-center text-sm text-gray-600">
|
|
<a href="#" class="hover:text-primary">首页</a>
|
|
<i class="fa-icon fa-solid fa-chevron-right mx-2 text-xs"></i>
|
|
<a href="#" class="hover:text-primary">系统管理</a>
|
|
<i class="fa-icon fa-solid fa-chevron-right mx-2 text-xs"></i>
|
|
<span class="text-gray-800">数据字典管理</span>
|
|
</div> -->
|
|
<!-- 页面标题和操作按钮 -->
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-2xl font-bold text-gray-800">数据字典管理</h1>
|
|
<div class="flex space-x-3">
|
|
<button
|
|
class="bg-primary hover:bg-blue-700 text-white rounded-button px-4 py-2 text-sm flex items-center space-x-2 transition">
|
|
<i class="fa-icon fa-solid fa-plus text-xs"></i>
|
|
<span>新增元数据域</span>
|
|
</button>
|
|
<button
|
|
class="bg-white border border-gray-300 hover:bg-gray-50 text-gray-700 rounded-button px-4 py-2 text-sm flex items-center space-x-2 transition">
|
|
<i class="fa-icon fa-solid fa-download text-xs"></i>
|
|
<span>导出配置</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<!-- 数据字典内容区域 -->
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden">
|
|
<div class="flex h-[1200px]">
|
|
<!-- 左侧树形结构 -->
|
|
<div class="w-1/4 border-r border-gray-200 overflow-y-auto scroll-container">
|
|
<div class="p-4 space-y-2">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-medium text-gray-700">员工模型</h3>
|
|
<button class="text-gray-400 hover:text-gray-600">
|
|
<i class="fa-icon fa-solid fa-ellipsis-vertical text-xs"></i>
|
|
</button>
|
|
</div>
|
|
<div class="mt-2 space-y-1">
|
|
<!-- 树形结构项 -->
|
|
<div class="tree-item">
|
|
<div
|
|
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa-icon fa-solid fa-folder text-yellow-400 text-sm"></i>
|
|
<span class="text-sm">基础信息</span>
|
|
</div>
|
|
<i class="fa-icon fa-solid fa-chevron-down text-gray-400 text-xs"></i>
|
|
</div>
|
|
<div class="ml-4 mt-1 space-y-1">
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">员工编号</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">姓名</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">性别</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item">
|
|
<div
|
|
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa-icon fa-solid fa-folder text-yellow-400 text-sm"></i>
|
|
<span class="text-sm">技术职务</span>
|
|
</div>
|
|
<i class="fa-icon fa-solid fa-chevron-right text-gray-400 text-xs"></i>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item">
|
|
<div
|
|
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer bg-blue-50">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa-icon fa-solid fa-folder-open text-yellow-400 text-sm"></i>
|
|
<span class="text-sm font-medium text-primary">绩效参数</span>
|
|
</div>
|
|
<i class="fa-icon fa-solid fa-chevron-down text-gray-400 text-xs"></i>
|
|
</div>
|
|
<div class="ml-4 mt-1 space-y-1">
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">代码量</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">文档字数</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">出勤时长</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">项目金额</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">培训时长</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">会议次数</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">会议时长</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">千行 bug 数</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">运维响应时间</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<i class="fa-icon fa-solid fa-file text-blue-400 text-sm mr-2"></i>
|
|
<span class="text-sm">员工满意度</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item">
|
|
<div
|
|
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa-icon fa-solid fa-folder text-yellow-400 text-sm"></i>
|
|
<span class="text-sm">联系方式</span>
|
|
</div>
|
|
<i class="fa-icon fa-solid fa-chevron-right text-gray-400 text-xs"></i>
|
|
</div>
|
|
</div>
|
|
<div class="tree-item">
|
|
<div
|
|
class="flex items-center justify-between py-1 px-2 rounded hover:bg-gray-100 cursor-pointer">
|
|
<div class="flex items-center space-x-2">
|
|
<i class="fa-icon fa-solid fa-folder text-yellow-400 text-sm"></i>
|
|
<span class="text-sm">其他信息</span>
|
|
</div>
|
|
<i class="fa-icon fa-solid fa-chevron-right text-gray-400 text-xs"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 右侧属性配置面板 -->
|
|
<div class="w-3/4 overflow-y-auto scroll-container">
|
|
<div class="p-6">
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h2 class="text-lg font-semibold text-gray-800">绩效参数属性配置</h2>
|
|
<button
|
|
class="bg-primary hover:bg-blue-700 text-white rounded-button px-3 py-1 text-sm flex items-center space-x-2 transition">
|
|
<i class="fa-icon fa-solid fa-plus text-xs"></i>
|
|
<span>新增属性</span>
|
|
</button>
|
|
</div>
|
|
<div class="bg-gray-50 rounded-lg p-4 mb-6">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">元数据域名称</label>
|
|
<input type="text" value="绩效参数"
|
|
class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
</div>
|
|
<div>
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">元数据域编码</label>
|
|
<input type="text" value="performance_params"
|
|
class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
</div>
|
|
<div class="col-span-2">
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">描述</label>
|
|
<textarea
|
|
class="w-full border border-gray-300 rounded-button px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary"
|
|
rows="2">用于记录员工各项绩效指标的参数集合</textarea>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<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-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
属性名称</th>
|
|
<th scope="col"
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
编码</th>
|
|
<th scope="col"
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
数据类型</th>
|
|
<th scope="col"
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
单位</th>
|
|
<th scope="col"
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
必填</th>
|
|
<th scope="col"
|
|
class="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
|
|
操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white divide-y divide-gray-200">
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
代码量</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">code_amount
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">行</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox" checked
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
文档字数</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">doc_words</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">字</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox" checked
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
出勤时长</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
attendance_hours</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">小时</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox" checked
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
项目金额</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">project_amount
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">元</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox"
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
培训时长</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">training_hours
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">小时</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox"
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
会议次数</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">meeting_count
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">次</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox" checked
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
会议时长</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">meeting_hours
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">分钟</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox"
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">千行
|
|
bug 数</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">bug_count</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">个/千行</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox" checked
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
运维响应时间</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">response_time
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">分钟</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox" checked
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm font-medium text-gray-900">
|
|
员工满意度</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">satisfaction
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<select
|
|
class="border border-gray-300 rounded-button px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary focus:border-primary">
|
|
<option>数字</option>
|
|
<option>文本</option>
|
|
<option>日期</option>
|
|
<option selected>列表</option>
|
|
</select>
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">分</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<input type="checkbox"
|
|
class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded">
|
|
</td>
|
|
<td class="px-4 py-3 whitespace-nowrap text-sm text-gray-500">
|
|
<button class="text-blue-600 hover:text-blue-900 mr-2">
|
|
<i class="fa-icon fa-solid fa-pen text-xs"></i>
|
|
</button>
|
|
<button class="text-red-600 hover:text-red-900">
|
|
<i class="fa-icon fa-solid fa-trash text-xs"></i>
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="mt-6 flex items-center justify-between">
|
|
<div class="text-sm text-gray-500">
|
|
显示 <span class="font-medium">1</span> 到 <span class="font-medium">10</span> 条，共
|
|
<span class="font-medium">10</span> 条记录
|
|
</div>
|
|
<div class="flex space-x-1">
|
|
<button
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">
|
|
上一页
|
|
</button>
|
|
<button
|
|
class="px-3 py-1 border border-primary bg-primary text-white rounded-button text-sm">
|
|
1
|
|
</button>
|
|
<button
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">
|
|
2
|
|
</button>
|
|
<button
|
|
class="px-3 py-1 border border-gray-300 rounded-button text-sm text-gray-700 bg-white hover:bg-gray-50">
|
|
下一页
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- 页脚 -->
|
|
<footer class="w-full bg-gray-800 text-white py-8">
|
|
<div class="container mx-auto px-4">
|
|
<div class="grid grid-cols-4 gap-8">
|
|
<div>
|
|
<h3 class="text-sm font-medium mb-4">关于我们</h3>
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
<li><a href="#" class="hover:text-white">公司简介</a></li>
|
|
<li><a href="#" class="hover:text-white">发展历程</a></li>
|
|
<li><a href="#" class="hover:text-white">企业文化</a></li>
|
|
<li><a href="#" class="hover:text-white">联系我们</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium mb-4">产品服务</h3>
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
<li><a href="#" class="hover:text-white">人力资源管理系统</a></li>
|
|
<li><a href="#" class="hover:text-white">薪酬管理系统</a></li>
|
|
<li><a href="#" class="hover:text-white">绩效管理系统</a></li>
|
|
<li><a href="#" class="hover:text-white">考勤管理系统</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium mb-4">帮助中心</h3>
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
<li><a href="#" class="hover:text-white">使用指南</a></li>
|
|
<li><a href="#" class="hover:text-white">常见问题</a></li>
|
|
<li><a href="#" class="hover:text-white">更新日志</a></li>
|
|
<li><a href="#" class="hover:text-white">API文档</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h3 class="text-sm font-medium mb-4">联系我们</h3>
|
|
<ul class="space-y-2 text-xs text-gray-300">
|
|
<li class="flex items-start">
|
|
<i class="fas fa-map-marker-alt fa-icon mr-2 mt-1"></i>
|
|
<span>北京市海淀区中关村软件园2号楼</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fas fa-phone fa-icon mr-2"></i>
|
|
<span>400-888-8888</span>
|
|
</li>
|
|
<li class="flex items-center">
|
|
<i class="fas fa-envelope fa-icon mr-2"></i>
|
|
<span>contact@hrsystem.com</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="border-t border-gray-700 mt-8 pt-6 flex flex-col md:flex-row justify-between items-center">
|
|
<div class="text-xs text-gray-400 mb-4 md:mb-0">
|
|
© 2023 人力资源管理系统 版权所有
|
|
</div>
|
|
<div class="flex space-x-4">
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
<i class="fab fa-weixin fa-icon"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
<i class="fab fa-weibo fa-icon"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
<i class="fab fa-github fa-icon"></i>
|
|
</a>
|
|
<a href="#" class="text-gray-400 hover:text-white">
|
|
<i class="fab fa-linkedin-in fa-icon"></i>
|
|
</a>
|
|
</div>
|
|
<div class="text-xs text-gray-400 mt-4 md:mt-0">
|
|
京ICP备12345678号-1
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</body>
|
|
|
|
</html> |