320 lines
22 KiB
HTML
320 lines
22 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>知识库管理 - 指摘管理系统</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', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
.sidebar-active {
|
|
background-color: rgba(26, 115, 232, 0.1);
|
|
color: #1a73e8;
|
|
border-right: 4px solid #1a73e8;
|
|
}
|
|
.upload-dashed {
|
|
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%23D1D5DBFF' stroke-width='3' stroke-dasharray='8%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
}
|
|
.upload-dashed:hover {
|
|
background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='16' ry='16' stroke='%231A73E8FF' stroke-width='3' stroke-dasharray='8%2c 12' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
|
|
border-color: transparent;
|
|
}
|
|
.tab-active {
|
|
border-bottom: 3px solid #1a73e8;
|
|
color: #1a73e8;
|
|
font-weight: 700;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="bg-gray-50 text-gray-800 flex overflow-hidden h-screen">
|
|
<!-- Sidebar (完全相同) -->
|
|
<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 sidebar-active 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 text-gray-600 hover:bg-gray-50 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>
|
|
<div class="p-4 border-t border-gray-100">
|
|
<div class="bg-blue-50 rounded-xl p-4">
|
|
<div class="flex items-center gap-3 mb-2">
|
|
<div class="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
|
|
<iconify-icon class="text-white text-sm" icon="lucide:sparkles"></iconify-icon>
|
|
</div>
|
|
<span class="text-xs font-bold text-blue-800 tracking-tight">AI Agent 状态</span>
|
|
</div>
|
|
<div class="flex items-center justify-between">
|
|
<span class="text-[10px] text-blue-600 font-medium italic">正在监控指摘状态...</span>
|
|
<span class="flex h-2 w-2 rounded-full bg-green-500 animate-pulse"></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
<!-- Header -->
|
|
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-8 flex-none">
|
|
<div class="flex items-center gap-4">
|
|
<h2 class="text-lg font-semibold text-gray-800">知识库管理</h2>
|
|
<span class="text-xs text-gray-400">2026年7月17日 星期五</span>
|
|
</div>
|
|
<div class="flex items-center gap-6">
|
|
<div class="relative">
|
|
<iconify-icon class="text-xl text-gray-500 hover:text-blue-600 cursor-pointer" icon="lucide:bell"></iconify-icon>
|
|
<span class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 text-white text-[10px] flex items-center justify-center rounded-full border-2 border-white font-bold">3</span>
|
|
</div>
|
|
<div class="flex items-center gap-3 pl-6 border-l border-gray-100">
|
|
<div class="text-right">
|
|
<p class="text-xs font-bold text-gray-900 leading-none">李志强</p>
|
|
<p class="text-[10px] text-gray-400 mt-1">系统管理员</p>
|
|
</div>
|
|
<img alt="User Avatar" class="w-9 h-9 rounded-full border border-gray-200" src="https://modao.cc/agent-py/media/generated_images/2026-06-26/3897ae65e7734794adc3fbb56826b171.jpg" />
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Scrollable Content -->
|
|
<div class="flex-1 overflow-y-auto p-8 space-y-8 bg-gray-50">
|
|
<!-- Tabs -->
|
|
<div class="border-b border-gray-200 bg-white rounded-t-2xl px-6 pt-4">
|
|
<div class="flex gap-8">
|
|
<button class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700 tab-active" data-tab="documents" onclick="switchTab('documents')">
|
|
<iconify-icon icon="lucide:file-text" class="inline mr-1"></iconify-icon> 文档管理
|
|
</button>
|
|
<button class="pb-3 text-sm font-medium text-gray-500 hover:text-gray-700" data-tab="audit" onclick="switchTab('audit')">
|
|
<iconify-icon icon="lucide:search" class="inline mr-1"></iconify-icon> 检索审计
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content: 文档管理 -->
|
|
<div id="tab-documents" class="space-y-6">
|
|
<!-- Upload Area -->
|
|
<div class="bg-white p-10 rounded-2xl border border-gray-100 shadow-sm flex flex-col items-center justify-center text-center upload-dashed group transition-all">
|
|
<div class="w-20 h-20 bg-blue-50 text-blue-600 rounded-full flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
|
|
<iconify-icon class="text-4xl" icon="lucide:upload-cloud"></iconify-icon>
|
|
</div>
|
|
<h3 class="text-lg font-bold text-gray-900 mb-2">点击或拖拽文件到此处上传</h3>
|
|
<p class="text-sm text-gray-400 mb-6">支持 PDF, Word (.docx), TXT, Markdown 格式，单个文件不超过 50MB</p>
|
|
<input class="hidden" id="fileInput" type="file" multiple accept=".pdf,.docx,.txt,.md" />
|
|
<button class="bg-blue-600 text-white px-8 py-3 rounded-xl font-bold hover:bg-blue-700 transition-all shadow-lg shadow-blue-200" onclick="document.getElementById('fileInput').click()">选择文件</button>
|
|
</div>
|
|
|
|
<!-- Document List -->
|
|
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-sm font-bold text-gray-700">文档列表</span>
|
|
<span class="text-xs text-gray-400">共 6 个文档</span>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="text-xs font-semibold text-gray-500 hover:text-blue-600 px-3 py-1 bg-white rounded-lg border border-gray-200 hover:border-blue-300 transition-all">重新向量化 (3)</button>
|
|
<button class="text-xs font-semibold text-red-500 hover:text-red-700 px-3 py-1 bg-white rounded-lg border border-gray-200 hover:border-red-300 transition-all">删除 (3)</button>
|
|
</div>
|
|
</div>
|
|
<table class="w-full text-left">
|
|
<thead class="bg-gray-50 border-b border-gray-100">
|
|
<tr>
|
|
<th class="px-6 py-3 w-10"><input type="checkbox" id="selectAllDocs" onchange="toggleAllDocs()" /></th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider">文件名</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider">上传人</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider">上传时间</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider">状态</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">分块数</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider text-right">操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-50">
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4"><input type="checkbox" class="doc-checkbox" onchange="updateDocSelectAll()" /></td>
|
|
<td class="px-6 py-4 font-medium text-gray-800">API设计规范_v2.1.pdf</td>
|
|
<td class="px-6 py-4 text-sm text-gray-600">李志强</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-07-15 14:23</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-0.5 bg-green-100 text-green-700 rounded-full text-[10px] font-bold">已完成</span></td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">42</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-3">
|
|
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:rotate-ccw" width="16"></iconify-icon></button>
|
|
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4"><input type="checkbox" class="doc-checkbox" onchange="updateDocSelectAll()" /></td>
|
|
<td class="px-6 py-4 font-medium text-gray-800">故障排查手册.docx</td>
|
|
<td class="px-6 py-4 text-sm text-gray-600">陈志伟</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-07-14 09:15</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-0.5 bg-yellow-100 text-yellow-700 rounded-full text-[10px] font-bold">处理中</span></td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">-</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-3">
|
|
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:rotate-ccw" width="16"></iconify-icon></button>
|
|
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 transition-colors">
|
|
<td class="px-6 py-4"><input type="checkbox" class="doc-checkbox" onchange="updateDocSelectAll()" /></td>
|
|
<td class="px-6 py-4 font-medium text-gray-800">测试用例模板.md</td>
|
|
<td class="px-6 py-4 text-sm text-gray-600">张美心</td>
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-07-13 11:40</td>
|
|
<td class="px-6 py-4"><span class="px-2 py-0.5 bg-red-100 text-red-700 rounded-full text-[10px] font-bold">失败</span></td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">0</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex justify-end gap-3">
|
|
<button class="text-gray-400 hover:text-blue-600"><iconify-icon icon="lucide:rotate-ccw" width="16"></iconify-icon></button>
|
|
<button class="text-gray-400 hover:text-red-600"><iconify-icon icon="lucide:trash-2" width="16"></iconify-icon></button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tab Content: 检索审计 -->
|
|
<div id="tab-audit" class="hidden space-y-6">
|
|
<!-- Stats -->
|
|
<div class="grid grid-cols-3 gap-6">
|
|
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase">今日检索次数</p>
|
|
<h3 class="text-3xl font-bold text-gray-900 mt-2">147</h3>
|
|
<p class="text-xs text-gray-400 mt-1"><span class="text-green-600 font-bold">↑ 12%</span> 较昨日</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase">平均响应时间</p>
|
|
<h3 class="text-3xl font-bold text-gray-900 mt-2">186 ms</h3>
|
|
<p class="text-xs text-gray-400 mt-1">低于 200ms 目标</p>
|
|
</div>
|
|
<div class="bg-white p-6 rounded-2xl border border-gray-100 shadow-sm">
|
|
<p class="text-[10px] font-bold text-gray-400 uppercase">热门检索词</p>
|
|
<h3 class="text-lg font-bold text-gray-900 mt-2">“数据库连接”</h3>
|
|
<p class="text-xs text-gray-400 mt-1">共 34 次检索</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Search Log Table -->
|
|
<div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div class="p-6 border-b border-gray-100 flex justify-between items-center bg-gray-50/50">
|
|
<span class="text-sm font-bold text-gray-700">检索日志</span>
|
|
<button class="text-xs font-semibold text-blue-600 hover:text-blue-800 flex items-center gap-1">
|
|
<iconify-icon icon="lucide:download" width="14"></iconify-icon> 导出日志
|
|
</button>
|
|
</div>
|
|
<table class="w-full text-left">
|
|
<thead class="bg-gray-50 border-b border-gray-100">
|
|
<tr>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider">时间</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider">用户</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider">关键词</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">命中数</th>
|
|
<th class="px-6 py-3 text-[11px] font-bold text-gray-400 uppercase tracking-wider text-center">耗时 (ms)</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-50">
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-07-17 10:32:15</td>
|
|
<td class="px-6 py-4 text-sm font-medium text-gray-800">陈志伟</td>
|
|
<td class="px-6 py-4 text-sm text-gray-700">4K 适配 侧边栏</td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">3</td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">120</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-07-17 09:45:02</td>
|
|
<td class="px-6 py-4 text-sm font-medium text-gray-800">张美心</td>
|
|
<td class="px-6 py-4 text-sm text-gray-700">数据库慢查询 索引</td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">5</td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">205</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="px-6 py-4 text-sm text-gray-500">2026-07-17 08:55:33</td>
|
|
<td class="px-6 py-4 text-sm font-medium text-gray-800">李志强</td>
|
|
<td class="px-6 py-4 text-sm text-gray-700">API 文档 参数错误</td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">1</td>
|
|
<td class="px-6 py-4 text-center text-sm text-gray-500">95</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
// Tab switching
|
|
function switchTab(tab) {
|
|
document.querySelectorAll('[data-tab]').forEach(btn => btn.classList.remove('tab-active'));
|
|
document.querySelector(`[data-tab="${tab}"]`).classList.add('tab-active');
|
|
document.getElementById('tab-documents').classList.toggle('hidden', tab !== 'documents');
|
|
document.getElementById('tab-audit').classList.toggle('hidden', tab !== 'audit');
|
|
}
|
|
|
|
// Document checkboxes
|
|
function toggleAllDocs() {
|
|
const checked = document.getElementById('selectAllDocs').checked;
|
|
document.querySelectorAll('.doc-checkbox').forEach(cb => cb.checked = checked);
|
|
}
|
|
|
|
function updateDocSelectAll() {
|
|
const all = document.querySelectorAll('.doc-checkbox');
|
|
const checked = document.querySelectorAll('.doc-checkbox:checked');
|
|
document.getElementById('selectAllDocs').checked = all.length > 0 && checked.length === all.length;
|
|
}
|
|
|
|
// Simulate file upload
|
|
document.getElementById('fileInput').addEventListener('change', function(e) {
|
|
if (this.files.length > 0) {
|
|
alert(`已选择 ${this.files.length} 个文件，开始上传并向量化。`);
|
|
this.value = '';
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |