302 lines
18 KiB
HTML
302 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html lang="zh-CN">
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
|
<title>用户管理 - AI指摘管理系统</title>
|
|
<script src="https://modao.cc/agent-py/static/source/js/tailwindcss.js"></script>
|
|
<script src="https://modao.cc/agent-py/static/source/js/iconify-icon.min.js"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
|
|
.sidebar-active {
|
|
background-color: rgba(26, 115, 232, 0.1);
|
|
color: #1a73e8;
|
|
border-right: 4px solid #1a73e8;
|
|
}
|
|
|
|
.dept-active {
|
|
color: #1a73e8;
|
|
font-weight: 700;
|
|
background: #f8fafc;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-50 text-gray-800 flex overflow-hidden h-screen">
|
|
<!-- Sidebar (Shared) -->
|
|
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col flex-none">
|
|
<div class="p-6 flex items-center gap-3">
|
|
<div class="w-10 h-10 bg-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-blue-200">
|
|
<iconify-icon class="text-white text-2xl" icon="lucide:shield-check"></iconify-icon>
|
|
</div>
|
|
<div>
|
|
<h1 class="font-bold text-lg leading-none text-gray-900">IMS</h1>
|
|
<p class="text-[10px] text-gray-400 mt-1 uppercase tracking-widest font-semibold">AI Assistant</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 mt-4 px-3 space-y-1 overflow-y-auto">
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
|
href="dashboard.html">
|
|
<iconify-icon class="text-xl" icon="lucide:layout-dashboard"></iconify-icon>
|
|
<span class="font-medium text-sm">工作台</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
|
href="issues.html">
|
|
<iconify-icon class="text-xl" icon="lucide:list-todo"></iconify-icon>
|
|
<span class="font-medium text-sm">指摘列表</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
|
href="batch-input.html">
|
|
<iconify-icon class="text-xl" icon="lucide:file-up"></iconify-icon>
|
|
<span class="font-medium text-sm">批量录入</span>
|
|
</a>
|
|
<div class="pt-4 pb-2 px-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">AI 智能分析</div>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group" href="ai-analysis.html">
|
|
<iconify-icon class="text-xl" icon="lucide:brain-circuit"></iconify-icon>
|
|
<span class="font-medium text-sm">AI分析记录</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
|
href="knowledge-base.html">
|
|
<iconify-icon class="text-xl" icon="lucide:database"></iconify-icon>
|
|
<span class="font-medium text-sm">知识库管理</span>
|
|
</a>
|
|
<div class="pt-4 pb-2 px-4 text-[10px] font-bold text-gray-400 uppercase tracking-widest">系统设置</div>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg sidebar-active transition-all group"
|
|
href="users.html">
|
|
<iconify-icon class="text-xl" icon="lucide:users"></iconify-icon>
|
|
<span class="font-medium text-sm">用户管理</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
|
href="roles.html">
|
|
<iconify-icon class="text-xl" icon="lucide:key-round"></iconify-icon>
|
|
<span class="font-medium text-sm">角色权限</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 transition-all group"
|
|
href="agent-management.html">
|
|
<iconify-icon class="text-xl" icon="lucide:bot"></iconify-icon>
|
|
<span class="font-medium text-sm">Agent管理</span>
|
|
</a>
|
|
</nav>
|
|
</aside>
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-none">
|
|
<h2 class="text-lg font-semibold text-gray-800">用户管理</h2>
|
|
<div class="flex gap-4 items-center">
|
|
<div class="relative">
|
|
<iconify-icon class="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400"
|
|
icon="lucide:search"></iconify-icon>
|
|
<input
|
|
class="pl-9 pr-4 py-2 bg-gray-50 border border-gray-200 rounded-lg text-sm w-60 outline-none focus:ring-2 focus:ring-blue-500 transition-all"
|
|
placeholder="搜索姓名/账号..." type="text" />
|
|
</div>
|
|
<button
|
|
class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-blue-700 transition-all flex items-center gap-2"
|
|
onclick="document.getElementById('userModal').classList.remove('hidden')">
|
|
<iconify-icon icon="lucide:user-plus"></iconify-icon> 新增用户
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="flex-1 flex overflow-hidden">
|
|
<!-- Left: Org Tree -->
|
|
<div class="w-64 bg-white border-r border-gray-100 overflow-y-auto p-4">
|
|
<div class="flex items-center gap-2 mb-6 px-2">
|
|
<iconify-icon class="text-blue-600" icon="lucide:network"></iconify-icon>
|
|
<span class="text-sm font-bold text-gray-800">组织架构</span>
|
|
</div>
|
|
<div class="space-y-1">
|
|
<div class="flex items-center gap-2 p-2 rounded-lg dept-active cursor-pointer">
|
|
<iconify-icon class="text-xs" icon="lucide:chevron-down"></iconify-icon>
|
|
<iconify-icon class="text-sm" icon="lucide:building-2"></iconify-icon>
|
|
<span class="text-sm">IMS 总部</span>
|
|
</div>
|
|
<div class="pl-6 space-y-1 mt-1 border-l border-gray-100 ml-3">
|
|
<div
|
|
class="flex items-center gap-2 p-2 rounded-lg text-gray-600 hover:bg-gray-50 cursor-pointer">
|
|
<iconify-icon class="text-xs" icon="lucide:chevron-right"></iconify-icon>
|
|
<iconify-icon class="text-sm" icon="lucide:folder"></iconify-icon>
|
|
<span class="text-sm">研发中心</span>
|
|
</div>
|
|
<div class="pl-6 space-y-1 border-l border-gray-100 ml-3">
|
|
<div
|
|
class="flex items-center gap-2 p-2 rounded-lg text-blue-600 bg-blue-50 font-medium cursor-pointer">
|
|
<iconify-icon class="text-sm" icon="lucide:users-2"></iconify-icon>
|
|
<span class="text-sm">前端开发组</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-2 p-2 rounded-lg text-gray-600 hover:bg-gray-50 cursor-pointer">
|
|
<iconify-icon class="text-sm" icon="lucide:users-2"></iconify-icon>
|
|
<span class="text-sm">后端开发组</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-2 p-2 rounded-lg text-gray-600 hover:bg-gray-50 cursor-pointer">
|
|
<iconify-icon class="text-sm" icon="lucide:folder"></iconify-icon>
|
|
<span class="text-sm">质量保证部 (QA)</span>
|
|
</div>
|
|
<div
|
|
class="flex items-center gap-2 p-2 rounded-lg text-gray-600 hover:bg-gray-50 cursor-pointer">
|
|
<iconify-icon class="text-sm" icon="lucide:folder"></iconify-icon>
|
|
<span class="text-sm">架构部</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Right: User Table -->
|
|
<div class="flex-1 bg-gray-50 p-8 overflow-y-auto">
|
|
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<table class="w-full text-left">
|
|
<thead class="bg-gray-50 border-b border-gray-100">
|
|
<tr>
|
|
<th class="px-6 py-4 text-[11px] font-bold text-gray-400 uppercase tracking-wider">用户姓名
|
|
</th>
|
|
<th class="px-6 py-4 text-[11px] font-bold text-gray-400 uppercase tracking-wider">账号/邮箱
|
|
</th>
|
|
<th class="px-6 py-4 text-[11px] font-bold text-gray-400 uppercase tracking-wider">绑定角色
|
|
</th>
|
|
<th
|
|
class="px-6 py-4 text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">
|
|
状态</th>
|
|
<th
|
|
class="px-6 py-4 text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">
|
|
Agent 授权</th>
|
|
<th
|
|
class="px-6 py-4 text-[11px] font-bold text-gray-400 uppercase tracking-wider text-right">
|
|
操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-50">
|
|
<tr>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<img alt="Avatar" class="w-8 h-8 rounded-full border border-gray-200"
|
|
src="https://modao.cc/agent-py/media/generated_images/2026-06-30/177f9d3923ee4656a271725910bd7339.jpg" />
|
|
<span class="text-sm font-bold text-gray-900">李志强</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-xs text-gray-500 font-medium">[email protected]</td>
|
|
<td class="px-6 py-4">
|
|
<span
|
|
class="px-2 py-1 bg-purple-50 text-purple-700 rounded-md text-[10px] font-bold">超级管理员</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<span class="inline-flex w-2 h-2 rounded-full bg-green-500 mr-2"></span>
|
|
<span class="text-xs font-medium text-gray-700">正常</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-center text-blue-600">
|
|
<iconify-icon class="text-xl" icon="lucide:shield-check"></iconify-icon>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-blue-600 hover:underline text-xs font-bold mr-4">编辑</button>
|
|
<button class="text-red-500 hover:underline text-xs font-bold">禁用</button>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<img alt="Avatar" class="w-8 h-8 rounded-full border border-gray-200"
|
|
src="https://modao.cc/agent-py/media/generated_images/2026-06-30/b8ff5a3c6e6c4413b13ada0c277c17b8.jpg" />
|
|
<span class="text-sm font-bold text-gray-900">陈志伟</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-xs text-gray-500 font-medium">[email protected]</td>
|
|
<td class="px-6 py-4">
|
|
<span
|
|
class="px-2 py-1 bg-blue-50 text-blue-700 rounded-md text-[10px] font-bold">整改担当</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-center">
|
|
<span class="inline-flex w-2 h-2 rounded-full bg-green-500 mr-2"></span>
|
|
<span class="text-xs font-medium text-gray-700">正常</span>
|
|
</td>
|
|
<td class="px-6 py-4 text-center text-gray-300">
|
|
<iconify-icon class="text-xl" icon="lucide:shield-off"></iconify-icon>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<button class="text-blue-600 hover:underline text-xs font-bold mr-4">编辑</button>
|
|
<button class="text-red-500 hover:underline text-xs font-bold">禁用</button>
|
|
</td>
|
|
</tr>
|
|
<!-- More users... -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Modal Simulation -->
|
|
<div class="fixed inset-0 bg-black/50 backdrop-blur-sm z-[100] flex items-center justify-center hidden"
|
|
id="userModal">
|
|
<div class="bg-white rounded-3xl w-[500px] shadow-2xl border border-white overflow-hidden">
|
|
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
|
|
<h3 class="text-lg font-bold text-gray-900">新增用户信息</h3>
|
|
<button class="p-2 hover:bg-gray-100 rounded-lg text-gray-400"
|
|
onclick="document.getElementById('userModal').classList.add('hidden')">
|
|
<iconify-icon class="text-xl" icon="lucide:x"></iconify-icon>
|
|
</button>
|
|
</div>
|
|
<div class="p-8 space-y-6">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="space-y-1.5">
|
|
<label class="text-[10px] font-bold text-gray-400 uppercase">姓名</label>
|
|
<input
|
|
class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
|
placeholder="请输入姓名" type="text" />
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-[10px] font-bold text-gray-400 uppercase">账号 (工号)</label>
|
|
<input
|
|
class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
|
placeholder="IMS-XXXX" type="text" />
|
|
</div>
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-[10px] font-bold text-gray-400 uppercase">电子邮箱</label>
|
|
<input
|
|
class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none"
|
|
placeholder="[email protected]" type="email" />
|
|
</div>
|
|
<div class="space-y-1.5">
|
|
<label class="text-[10px] font-bold text-gray-400 uppercase">绑定角色</label>
|
|
<select
|
|
class="w-full bg-gray-50 border border-gray-200 rounded-lg px-4 py-2 text-sm focus:ring-2 focus:ring-blue-500 outline-none">
|
|
<option>超级管理员</option>
|
|
<option>指摘录入员</option>
|
|
<option>整改担当</option>
|
|
<option>验证人员</option>
|
|
</select>
|
|
</div>
|
|
<!-- Agent Specific Permission -->
|
|
<div class="p-4 bg-blue-50 rounded-2xl border border-blue-100">
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center gap-2 text-blue-800">
|
|
<iconify-icon class="text-xl" icon="lucide:bot"></iconify-icon>
|
|
<span class="text-sm font-bold">Agent 自动执行权限</span>
|
|
</div>
|
|
<div class="w-10 h-5 bg-blue-600 rounded-full relative cursor-pointer">
|
|
<div class="absolute right-0.5 top-0.5 w-4 h-4 bg-white rounded-full"></div>
|
|
</div>
|
|
</div>
|
|
<p class="text-[10px] text-blue-600/70 mt-2 leading-relaxed">
|
|
开启后，该用户允许 Agent 在不需要二次审批的情况下执行预设的高风险工具（如删除、状态强制流转等）。仅建议资深管理员开启。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="p-6 bg-gray-50 border-t border-gray-100 flex gap-3">
|
|
<button
|
|
class="flex-1 bg-white border border-gray-200 py-3 rounded-xl font-bold text-gray-600 hover:bg-white transition-all shadow-sm"
|
|
onclick="document.getElementById('userModal').classList.add('hidden')">取消</button>
|
|
<button
|
|
class="flex-[2] bg-blue-600 text-white py-3 rounded-xl font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-200">确认添加</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |