You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1098 lines
54 KiB
1098 lines
54 KiB
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI 智能客服系统 - Support Bot</title>
|
|
<style>
|
|
:root { --bg:#f0f2f5; --card:#fff; --primary:#6366f1; --primary2:#8b5cf6; --success:#10b981; --warn:#f59e0b; --danger:#ef4444; --text:#1f2937; --sub:#6b7280; --border:#e5e7eb; --radius:10px; }
|
|
|
|
* { margin:0; padding:0; box-sizing:border-box; }
|
|
body { font-family: -apple-system,"Microsoft YaHei",sans-serif; background:var(--bg); color:var(--text); min-height:100vh; }
|
|
|
|
/* 顶部导航 */
|
|
.topbar { background:linear-gradient(135deg, var(--primary) 0%, var(--primary2) 100%); color:#fff; padding:0 24px; height:56px; display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:100; }
|
|
.topbar .logo { font-size:20px; font-weight:700; }
|
|
.topbar .ver { font-size:12px; opacity:.7; margin-left:4px; }
|
|
.topbar .links { margin-left:auto; display:flex; gap:12px; }
|
|
.topbar .links a { color:#fff; opacity:.8; text-decoration:none; font-size:13px; transition:opacity .2s; }
|
|
.topbar .links a:hover { opacity:1; }
|
|
|
|
/* Tab 导航 */
|
|
.tabs { display:flex; gap:0; background:var(--card); border-bottom:1px solid var(--border); padding:0 24px; position:sticky; top:56px; z-index:99; }
|
|
.tab-btn { padding:14px 24px; border:none; background:none; font-size:14px; cursor:pointer; border-bottom:3px solid transparent; color:var(--sub); transition:all .2s; font-family:inherit; display:flex; align-items:center; gap:6px; }
|
|
.tab-btn:hover { color:var(--text); }
|
|
.tab-btn.active { color:var(--primary); border-bottom-color:var(--primary); font-weight:600; }
|
|
.tab-icon { font-size:18px; }
|
|
|
|
/* 内容区 */
|
|
.main { max-width:1400px; margin:0 auto; padding:20px; }
|
|
.tab-panel { display:none; animation: fadeIn .3s ease; }
|
|
.tab-panel.active { display:block; }
|
|
@keyframes fadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
|
|
|
|
/* 卡片 */
|
|
.card { background:var(--card); border-radius:var(--radius); padding:20px; margin-bottom:16px; border:1px solid var(--border); }
|
|
.card h2 { font-size:16px; margin-bottom:12px; display:flex; align-items:center; gap:8px; }
|
|
.card h3 { font-size:14px; margin-bottom:8px; color:var(--sub); }
|
|
|
|
/* 表单 */
|
|
.input-row { display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap; }
|
|
.input, .textarea, .select { padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:inherit; outline:none; transition:border-color .2s; }
|
|
.input:focus, .textarea:focus, .select:focus { border-color:var(--primary); }
|
|
.input { flex:1; min-width:200px; }
|
|
.textarea { width:100%; resize:vertical; min-height:120px; }
|
|
.select { min-width:160px; }
|
|
.input-sm { width:120px; flex:none; }
|
|
|
|
.btn { padding:10px 20px; border:none; border-radius:8px; font-size:14px; cursor:pointer; font-family:inherit; font-weight:500; transition:all .2s; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
|
|
.btn:disabled { opacity:.5; cursor:not-allowed; }
|
|
.btn-primary { background:var(--primary); color:#fff; }
|
|
.btn-primary:hover:not(:disabled) { background:#4f46e5; }
|
|
.btn-purple { background:var(--primary2); color:#fff; }
|
|
.btn-purple:hover:not(:disabled) { background:#7c3aed; }
|
|
.btn-success { background:var(--success); color:#fff; }
|
|
.btn-outline { background:#fff; color:var(--primary); border:1px solid var(--primary); }
|
|
.btn-sm { padding:6px 12px; font-size:12px; }
|
|
.btn-danger { background:var(--danger); color:#fff; }
|
|
.btn-warn { background:var(--warn); color:#fff; }
|
|
|
|
/* 消息区 */
|
|
.msg-area { border:1px solid var(--border); border-radius:var(--radius); height:400px; overflow-y:auto; padding:16px; background:#fafbfc; margin-bottom:12px; display:flex; flex-direction:column; gap:10px; }
|
|
.msg { display:flex; gap:10px; max-width:85%; animation: fadeIn .3s; }
|
|
.msg.user { align-self:flex-end; flex-direction:row-reverse; }
|
|
.msg.assistant { align-self:flex-start; }
|
|
.msg-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; }
|
|
.msg.user .msg-avatar { background:var(--primary); color:#fff; }
|
|
.msg.assistant .msg-avatar { background:var(--success); color:#fff; }
|
|
.msg-bubble { padding:10px 14px; border-radius:12px; line-height:1.6; font-size:14px; word-break:break-word; white-space:pre-wrap; }
|
|
.msg.user .msg-bubble { background:var(--primary); color:#fff; border-bottom-right-radius:4px; }
|
|
.msg.assistant .msg-bubble { background:#fff; border:1px solid var(--border); border-bottom-left-radius:4px; }
|
|
.msg.streaming .msg-bubble { border-color:var(--primary); box-shadow:0 0 0 1px var(--primary); }
|
|
|
|
/* 商品信息展示 */
|
|
.result-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:12px; margin-top:12px; }
|
|
.result-item { background:#f9fafb; padding:12px 16px; border-radius:8px; border:1px solid var(--border); }
|
|
.result-item .label { font-size:12px; color:var(--sub); margin-bottom:4px; }
|
|
.result-item .value { font-size:14px; font-weight:500; }
|
|
.result-json { background:#1e293b; color:#e2e8f0; padding:16px; border-radius:8px; font-family:'Fira Code',monospace; font-size:13px; white-space:pre-wrap; overflow-x:auto; }
|
|
|
|
/* 文件上传区 */
|
|
.upload-zone { border:2px dashed var(--border); border-radius:var(--radius); padding:32px; text-align:center; transition:all .2s; cursor:pointer; margin-bottom:12px; }
|
|
.upload-zone:hover, .upload-zone.drag-over { border-color:var(--primary); background:#eef2ff; }
|
|
.upload-zone p { color:var(--sub); }
|
|
.upload-zone .icon { font-size:40px; margin-bottom:8px; }
|
|
|
|
/* Toast */
|
|
.toast-container { position:fixed; top:70px; right:20px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
|
|
.toast { padding:10px 18px; border-radius:8px; color:#fff; font-size:13px; animation:slideIn .3s; box-shadow:0 4px 12px rgba(0,0,0,.15); }
|
|
.toast.success { background:var(--success); }
|
|
.toast.error { background:var(--danger); }
|
|
.toast.info { background:var(--primary); }
|
|
@keyframes slideIn { from{opacity:0;transform:translateX(100px);} to{opacity:1;transform:translateX(0);} }
|
|
|
|
/* 流式结果比较 */
|
|
.stream-compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
|
|
.stream-compare .card { margin-bottom:0; }
|
|
|
|
/* 表格样式 */
|
|
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
|
|
.data-table th { background:#f9fafb; padding:10px 12px; text-align:left; font-weight:600; border-bottom:2px solid var(--border); white-space:nowrap; }
|
|
.data-table td { padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle; }
|
|
.data-table tr:hover { background:#f9fafb; }
|
|
.data-table .status-ready { color:var(--success); font-weight:600; }
|
|
.data-table .status-processing { color:var(--warn); font-weight:600; }
|
|
.data-table .status-failed { color:var(--danger); font-weight:600; }
|
|
|
|
/* 分页 */
|
|
.pagination { display:flex; gap:4px; justify-content:center; margin-top:12px; }
|
|
.pagination button { padding:6px 12px; border:1px solid var(--border); background:#fff; border-radius:6px; cursor:pointer; font-size:12px; }
|
|
.pagination button:hover:not(:disabled) { background:var(--primary); color:#fff; border-color:var(--primary); }
|
|
.pagination button:disabled { opacity:.5; cursor:not-allowed; }
|
|
.pagination button.active { background:var(--primary); color:#fff; border-color:var(--primary); }
|
|
|
|
/* 统计卡片 */
|
|
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:12px; margin-bottom:16px; }
|
|
.stat-card { background:#f9fafb; border-radius:8px; padding:16px; text-align:center; border:1px solid var(--border); }
|
|
.stat-card .number { font-size:28px; font-weight:700; color:var(--primary); }
|
|
.stat-card .label { font-size:12px; color:var(--sub); margin-top:4px; }
|
|
|
|
/* 弹窗 */
|
|
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.5); z-index:200; display:none; align-items:center; justify-content:center; }
|
|
.modal-overlay.active { display:flex; }
|
|
.modal-box { background:#fff; border-radius:var(--radius); width:90%; max-width:800px; max-height:85vh; overflow-y:auto; padding:24px; position:relative; }
|
|
.modal-box h2 { margin-bottom:16px; font-size:18px; }
|
|
.modal-close { position:absolute; top:16px; right:20px; font-size:24px; cursor:pointer; color:var(--sub); background:none; border:none; }
|
|
.modal-close:hover { color:var(--text); }
|
|
|
|
/* 分类标签 */
|
|
.category-tag { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; background:#eef2ff; color:var(--primary); }
|
|
|
|
/* 搜索结果 */
|
|
.search-result { background:#f9fafb; border-radius:8px; padding:12px; margin-bottom:8px; border:1px solid var(--border); }
|
|
.search-result .score { font-size:12px; color:var(--success); font-weight:600; }
|
|
.search-result .meta { font-size:12px; color:var(--sub); margin-top:4px; }
|
|
.search-result .content { font-size:13px; margin-top:6px; line-height:1.5; }
|
|
|
|
/* 响应式 */
|
|
@media(max-width:768px) { .tabs { overflow-x:auto; } .tab-btn { padding:12px 16px; font-size:13px; } .stream-compare { grid-template-columns:1fr; } .stat-grid { grid-template-columns:1fr 1fr; } }
|
|
|
|
.badge { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; font-weight:600; }
|
|
.badge-get { background:#dbeafe; color:#1d4ed8; }
|
|
.badge-post { background:#fef3c7; color:#b45309; }
|
|
.endpoint-info { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="topbar">
|
|
<span class="logo">🤖 Support Bot</span><span class="ver">AI 智能客服系统</span>
|
|
<span class="links">
|
|
<a href="/doc.html" target="_blank">📖 API 文档</a>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="tabs" id="tabs">
|
|
<button class="tab-btn active" data-tab="chat"><span class="tab-icon">💬</span>智能客服对话</button>
|
|
<button class="tab-btn" data-tab="product"><span class="tab-icon">🏷️</span>商品信息提取</button>
|
|
<button class="tab-btn" data-tab="document"><span class="tab-icon">📄</span>知识库文档管理</button>
|
|
</div>
|
|
|
|
<div class="main">
|
|
|
|
<!-- ==================== Tab 1: AI 智能客服对话 ==================== -->
|
|
<div class="tab-panel active" id="panel-chat">
|
|
<div class="card">
|
|
<h2>💬 智能客服对话</h2>
|
|
<p style="color:var(--sub);font-size:13px;margin-bottom:12px;">基于通义千问 · 电商客服场景 · 支持多轮对话上下文记忆</p>
|
|
|
|
<div class="input-row">
|
|
<input class="input input-sm" id="chatId" placeholder="会话ID" value="">
|
|
<select class="select" id="modeSelect">
|
|
<option value="sync">🔵 同步调用</option>
|
|
<option value="sse">🟢 SSE 流式 (Flux)</option>
|
|
<option value="sse2">🟡 ServerSentEvent</option>
|
|
<option value="sse3">🟣 SseEmitter</option>
|
|
</select>
|
|
<button class="btn btn-outline btn-sm" onclick="newChatId()">🔄 新会话</button>
|
|
<button class="btn btn-outline btn-sm" onclick="clearMessages()">🗑️ 清屏</button>
|
|
</div>
|
|
|
|
<div class="input-row" style="margin-top:8px;padding:12px;background:#f9fafb;border-radius:8px;border:1px solid var(--border);">
|
|
<label style="display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;">
|
|
<input type="checkbox" id="ragModeToggle" onchange="toggleRagMode()" style="width:16px;height:16px;cursor:pointer;">
|
|
<span style="font-weight:600;color:var(--primary);">📚 启用 RAG 知识库检索</span>
|
|
</label>
|
|
<select class="select" id="ragStrategySelect" style="display:none;margin-left:auto;" onchange="updateRagStatus()">
|
|
<option value="NONE">无重写</option>
|
|
<option value="REWRITE" selected>查询重写</option>
|
|
<option value="TRANSLATION">翻译扩展</option>
|
|
<option value="COMPRESSION">查询压缩</option>
|
|
<option value="MULTI_QUERY">多路扩展</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div id="ragStatusTip" style="display:none;margin-bottom:12px;padding:8px 12px;background:#eef2ff;border-radius:6px;font-size:12px;color:var(--primary);border-left:3px solid var(--primary);">
|
|
💡 当前已启用 RAG 知识库检索，将从向量数据库中检索相关信息以增强回答质量。
|
|
</div>
|
|
|
|
<div class="msg-area" id="chatMessages">
|
|
<div class="msg assistant">
|
|
<div class="msg-avatar">🤖</div>
|
|
<div class="msg-bubble">您好！我是电商智能客服助手。<br>可以帮您解答商品、订单、支付、物流和售后问题。<br><br>💡 提示：右侧下拉可切换对话模式，切换新会话开始全新对话。<br>📚 如需启用知识库检索，请勾选上方的"启用 RAG 知识库检索"选项。</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="input-row">
|
|
<input class="input" id="userInput" placeholder="输入问题，Enter 发送..." onkeydown="if(event.key==='Enter')chatSend()">
|
|
<button class="btn btn-primary" id="sendBtn" onclick="chatSend()">📨 发送</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== Tab 2: 商品信息提取 ==================== -->
|
|
<div class="tab-panel" id="panel-product">
|
|
<div class="card">
|
|
<div class="endpoint-info">
|
|
<span class="badge badge-get">GET</span>
|
|
<code style="font-size:13px;">/ai/product_info_app/chat/sync</code>
|
|
</div>
|
|
<h2>🏷️ 商品信息结构化提取</h2>
|
|
<p style="color:var(--sub);font-size:13px;margin-bottom:12px;">输入商品描述文本，AI 自动提取：标题、描述、价格、评分、评论数、品牌、分类</p>
|
|
|
|
<textarea class="textarea" id="productContent" placeholder="请输入商品网页内容或描述文本...
|
|
例如：Apple iPhone 15 Pro Max 256GB 原色钛金属，售价 ¥9999，京东好评率98%，累计2.5万+评价，品牌Apple，属于智能手机分类..."></textarea>
|
|
|
|
<div class="input-row" style="margin-top:12px;">
|
|
<button class="btn btn-primary" id="extractBtn" onclick="extractProduct()">🔍 提取商品信息</button>
|
|
<button class="btn btn-outline btn-sm" onclick="document.getElementById('productContent').value=''">清空</button>
|
|
<button class="btn btn-outline btn-sm" onclick="document.getElementById('productContent').value='Apple iPhone 15 Pro Max 256GB 原色钛金属，售价 ¥9999，京东好评率98%，累计2.5万+评价，品牌Apple，属于智能手机分类'">填入示例</button>
|
|
</div>
|
|
|
|
<div id="productResult" style="margin-top:16px;display:none;">
|
|
<h3>📊 提取结果</h3>
|
|
<div class="result-grid" id="productGrid"></div>
|
|
<div class="result-json" id="productJson" style="margin-top:12px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ==================== Tab 3: 知识库文档管理 ==================== -->
|
|
<div class="tab-panel" id="panel-document">
|
|
|
|
<!-- 统计面板 -->
|
|
<div class="card">
|
|
<h2>📊 知识库概览</h2>
|
|
<div class="stat-grid" id="statsGrid">
|
|
<div class="stat-card"><div class="number" id="statTotalDocs">-</div><div class="label">文档总数</div></div>
|
|
<div class="stat-card"><div class="number" id="statTotalVectors">-</div><div class="label">向量总数</div></div>
|
|
<div class="stat-card"><div class="number" id="statLastUpload">-</div><div class="label">最近上传</div></div>
|
|
</div>
|
|
<div id="statsDetail" style="font-size:13px;color:var(--sub);"></div>
|
|
</div>
|
|
|
|
<!-- 语义搜索 -->
|
|
<div class="card">
|
|
<h2>🔍 语义搜索测试</h2>
|
|
<p style="color:var(--sub);font-size:13px;margin-bottom:12px;">输入查询语句，测试知识库检索效果</p>
|
|
<div class="input-row">
|
|
<input class="input" id="searchQuery" placeholder="输入查询，如：Spring Boot 是什么？">
|
|
<input class="input input-sm" id="searchTopK" placeholder="TopK" value="5" type="number" min="1" max="20">
|
|
<input class="input input-sm" id="searchThreshold" placeholder="阈值" value="0.5" type="number" min="0" max="1" step="0.1">
|
|
<button class="btn btn-primary" onclick="doSearch()">🔍 搜索</button>
|
|
</div>
|
|
<div id="searchResults" style="margin-top:12px;"></div>
|
|
</div>
|
|
|
|
<!-- 分类管理 -->
|
|
<div class="card">
|
|
<h2>🏷️ 分类管理</h2>
|
|
<div class="input-row">
|
|
<input class="input" id="catName" placeholder="分类名称">
|
|
<input class="input" id="catDesc" placeholder="分类描述（可选）">
|
|
<input class="input input-sm" id="catSort" placeholder="排序" value="0" type="number">
|
|
<button class="btn btn-success" onclick="createCategory()">➕ 创建分类</button>
|
|
<button class="btn btn-outline btn-sm" onclick="loadCategories()">🔄 刷新</button>
|
|
</div>
|
|
<div id="categoryList" style="margin-top:12px;font-size:13px;">暂无分类</div>
|
|
</div>
|
|
|
|
<!-- 文档列表 -->
|
|
<div class="card">
|
|
<h2>📋 文档列表</h2>
|
|
<div class="input-row">
|
|
<select class="select" id="filterCategory" onchange="loadDocuments()">
|
|
<option value="">全部分类</option>
|
|
</select>
|
|
<select class="select" id="filterStatus" onchange="loadDocuments()">
|
|
<option value="">全部状态</option>
|
|
<option value="READY">✅ 已完成</option>
|
|
<option value="PROCESSING">⏳ 处理中</option>
|
|
<option value="FAILED">❌ 失败</option>
|
|
</select>
|
|
<button class="btn btn-outline btn-sm" onclick="loadDocuments()">🔄 刷新</button>
|
|
</div>
|
|
<div style="overflow-x:auto;">
|
|
<table class="data-table" id="docTable">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>标题</th>
|
|
<th>类型</th>
|
|
<th>状态</th>
|
|
<th>分块数</th>
|
|
<th>创建时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="docTableBody">
|
|
<tr><td colspan="7" style="text-align:center;color:var(--sub);">点击刷新加载文档</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="pagination" id="docPagination"></div>
|
|
</div>
|
|
|
|
<!-- 文档上传 -->
|
|
<div class="card">
|
|
<h2>📤 文档上传</h2>
|
|
<p style="color:var(--sub);font-size:13px;margin-bottom:16px;">上传文档到 RAG 知识库，自动分词 → 向量化 → 存入 PGVector</p>
|
|
|
|
<!-- 上传元信息 -->
|
|
<div class="input-row" style="padding:12px;background:#f9fafb;border-radius:8px;border:1px solid var(--border);margin-bottom:16px;">
|
|
<select class="select" id="uploadCategory">
|
|
<option value="">选择分类（可选）</option>
|
|
</select>
|
|
<input class="input" id="uploadTags" placeholder="标签，逗号分隔（可选）">
|
|
</div>
|
|
|
|
<!-- 子 Tab -->
|
|
<div style="display:flex;gap:4px;margin-bottom:16px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:8px;">
|
|
<button class="btn btn-sm doc-sub-tab active" data-doc="file">📎 通用文件</button>
|
|
<button class="btn btn-sm doc-sub-tab" data-doc="string">📝 文本内容</button>
|
|
<button class="btn btn-sm doc-sub-tab" data-doc="markdown">📑 Markdown</button>
|
|
<button class="btn btn-sm doc-sub-tab" data-doc="jsonBasic">📋 JSON 基本</button>
|
|
<button class="btn btn-sm doc-sub-tab" data-doc="jsonFields">🔑 JSON 按字段</button>
|
|
<button class="btn btn-sm doc-sub-tab" data-doc="jsonPointer">📍 JSON 按指针</button>
|
|
</div>
|
|
|
|
<!-- 通用文件 -->
|
|
<div class="doc-panel active" id="doc-file">
|
|
<div class="endpoint-info"><span class="badge badge-post">POST</span><code style="font-size:13px;">/upload/file</code><span style="font-size:12px;color:var(--sub);">（Tika 多格式解析）</span></div>
|
|
<div class="upload-zone" id="zone-file" onclick="document.getElementById('fileInput').click()">
|
|
<div class="icon">📎</div><p>点击或拖拽上传，支持多文件（PDF / Word / Excel / PPT / TXT 等）</p>
|
|
<input type="file" id="fileInput" style="display:none" multiple onchange="handleFileSelect(this,'file')">
|
|
</div>
|
|
<div id="fileFileInfo" style="margin-bottom:8px;font-size:13px;color:var(--sub);"></div>
|
|
<button class="btn btn-primary" id="btn-file" onclick="uploadDocument('file')" disabled>🚀 上传并向量化</button>
|
|
<div id="doc-file-result"></div>
|
|
</div>
|
|
|
|
<!-- 文本内容 -->
|
|
<div class="doc-panel" id="doc-string" style="display:none;">
|
|
<div class="endpoint-info"><span class="badge badge-post">POST</span><code style="font-size:13px;">/upload/string</code><span style="font-size:12px;color:var(--sub);">（直接上传文本）</span></div>
|
|
<input class="input" id="stringTitle" placeholder="文档标题" style="margin-bottom:8px;">
|
|
<textarea class="textarea" id="stringContent" placeholder="输入要加入知识库的文本内容...
|
|
例如：公司退换货政策、商品FAQ、物流说明等"></textarea>
|
|
<button class="btn btn-primary" style="margin-top:12px;" onclick="uploadDocument('string')">🚀 上传并向量化</button>
|
|
<div id="doc-string-result"></div>
|
|
</div>
|
|
|
|
<!-- Markdown -->
|
|
<div class="doc-panel" id="doc-markdown" style="display:none;">
|
|
<div class="endpoint-info"><span class="badge badge-post">POST</span><code style="font-size:13px;">/upload/markdown</code></div>
|
|
<div class="upload-zone" id="zone-md" onclick="document.getElementById('mdInput').click()">
|
|
<div class="icon">📑</div><p>点击或拖拽上传，支持多文件（Markdown .md）</p>
|
|
<input type="file" id="mdInput" style="display:none" accept=".md" multiple onchange="handleFileSelect(this,'markdown')">
|
|
</div>
|
|
<div id="mdFileInfo" style="margin-bottom:8px;font-size:13px;color:var(--sub);"></div>
|
|
<button class="btn btn-primary" id="btn-markdown" onclick="uploadDocument('markdown')" disabled>🚀 上传并向量化</button>
|
|
<div id="doc-markdown-result"></div>
|
|
</div>
|
|
|
|
<!-- JSON 基本 -->
|
|
<div class="doc-panel" id="doc-jsonBasic" style="display:none;">
|
|
<div class="endpoint-info"><span class="badge badge-post">POST</span><code style="font-size:13px;">/upload/json/basic</code><span style="font-size:12px;color:var(--sub);">（整体解析）</span></div>
|
|
<div class="upload-zone" id="zone-jsonB" onclick="document.getElementById('jsonBInput').click()">
|
|
<div class="icon">📋</div><p>点击或拖拽上传，支持多文件（JSON .json）</p>
|
|
<input type="file" id="jsonBInput" style="display:none" accept=".json" multiple onchange="handleFileSelect(this,'jsonBasic')">
|
|
</div>
|
|
<div id="jsonBFileInfo" style="margin-bottom:8px;font-size:13px;color:var(--sub);"></div>
|
|
<button class="btn btn-primary" id="btn-jsonBasic" onclick="uploadDocument('jsonBasic')" disabled>🚀 上传并向量化</button>
|
|
<div id="doc-jsonBasic-result"></div>
|
|
</div>
|
|
|
|
<!-- JSON 按字段 -->
|
|
<div class="doc-panel" id="doc-jsonFields" style="display:none;">
|
|
<div class="endpoint-info"><span class="badge badge-post">POST</span><code style="font-size:13px;">/upload/json/fields</code><span style="font-size:12px;color:var(--sub);">（按字段名提取）</span></div>
|
|
<div class="upload-zone" id="zone-jsonF" onclick="document.getElementById('jsonFInput').click()">
|
|
<div class="icon">🔑</div><p>点击或拖拽上传，支持多文件（JSON .json）</p>
|
|
<input type="file" id="jsonFInput" style="display:none" accept=".json" multiple onchange="handleFileSelect(this,'jsonFields')">
|
|
</div>
|
|
<div id="jsonFFileInfo" style="margin-bottom:8px;font-size:13px;color:var(--sub);"></div>
|
|
<input class="input" id="jsonFieldsInput" placeholder="输入要提取的字段名（逗号分隔），如：title,description,content" style="margin-bottom:12px;">
|
|
<button class="btn btn-primary" id="btn-jsonFields" onclick="uploadDocument('jsonFields')" disabled>🚀 上传并向量化</button>
|
|
<div id="doc-jsonFields-result"></div>
|
|
</div>
|
|
|
|
<!-- JSON 按指针 -->
|
|
<div class="doc-panel" id="doc-jsonPointer" style="display:none;">
|
|
<div class="endpoint-info"><span class="badge badge-post">POST</span><code style="font-size:13px;">/upload/json/pointer</code><span style="font-size:12px;color:var(--sub);">（JSON Pointer 路径拆分）</span></div>
|
|
<div class="upload-zone" id="zone-jsonP" onclick="document.getElementById('jsonPInput').click()">
|
|
<div class="icon">📍</div><p>点击或拖拽上传，支持多文件（JSON .json）</p>
|
|
<input type="file" id="jsonPInput" style="display:none" accept=".json" multiple onchange="handleFileSelect(this,'jsonPointer')">
|
|
</div>
|
|
<div id="jsonPFileInfo" style="margin-bottom:8px;font-size:13px;color:var(--sub);"></div>
|
|
<input class="input" id="jsonPointerInput" placeholder="输入 JSON Pointer 路径，如：/data/items 或 /products" style="margin-bottom:12px;">
|
|
<button class="btn btn-primary" id="btn-jsonPointer" onclick="uploadDocument('jsonPointer')" disabled>🚀 上传并向量化</button>
|
|
<div id="doc-jsonPointer-result"></div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- 文档详情弹窗 -->
|
|
<div class="modal-overlay" id="docModal">
|
|
<div class="modal-box">
|
|
<button class="modal-close" onclick="closeDocModal()">×</button>
|
|
<h2>📄 文档详情</h2>
|
|
<div id="docModalContent"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-container" id="toasts"></div>
|
|
|
|
<script>
|
|
// ==================== 全局状态 ====================
|
|
const API = 'http://localhost:9090';
|
|
let currentChatId = '';
|
|
let isRagMode = false;
|
|
let currentDocPage = 1;
|
|
let categoryMap = {}; // id -> name
|
|
|
|
// ==================== 工具函数 ====================
|
|
function toast(msg, type='info') {
|
|
const c = document.getElementById('toasts');
|
|
const d = document.createElement('div');
|
|
d.className = 'toast ' + type;
|
|
d.textContent = msg;
|
|
c.appendChild(d);
|
|
setTimeout(()=>{d.style.opacity='0';d.style.transition='opacity .3s';setTimeout(()=>d.remove(),300);},2500);
|
|
}
|
|
|
|
function $(id) { return document.getElementById(id); }
|
|
|
|
function formatBytes(b) { return b<1024?b+' B':b<1048576?(b/1024).toFixed(1)+' KB':(b/1048576).toFixed(1)+' MB'; }
|
|
|
|
function formatDate(d) {
|
|
if(!d) return '-';
|
|
const date = new Date(d);
|
|
return date.toLocaleString('zh-CN');
|
|
}
|
|
|
|
// ==================== Tab 切换 ====================
|
|
document.getElementById('tabs').addEventListener('click', function(e) {
|
|
const btn = e.target.closest('.tab-btn');
|
|
if(!btn) return;
|
|
document.querySelectorAll('.tab-btn').forEach(b=>b.classList.remove('active'));
|
|
btn.classList.add('active');
|
|
document.querySelectorAll('.tab-panel').forEach(p=>p.classList.remove('active'));
|
|
document.getElementById('panel-'+btn.dataset.tab).classList.add('active');
|
|
if(btn.dataset.tab === 'document') {
|
|
loadStats();
|
|
loadCategories();
|
|
loadDocuments();
|
|
}
|
|
});
|
|
|
|
// 子 Tab 切换 (文档管理)
|
|
document.addEventListener('click', function(e) {
|
|
const btn = e.target.closest('.doc-sub-tab');
|
|
if(!btn) return;
|
|
document.querySelectorAll('.doc-sub-tab').forEach(b=>{b.classList.remove('active');b.style.background='';b.style.color='';});
|
|
btn.classList.add('active');
|
|
btn.style.background='var(--primary)'; btn.style.color='#fff';
|
|
document.querySelectorAll('.doc-panel').forEach(p=>p.style.display='none');
|
|
document.getElementById('doc-'+btn.dataset.doc).style.display='block';
|
|
});
|
|
|
|
// ==================== 初始化 ====================
|
|
function init() {
|
|
newChatId();
|
|
const firstSub = document.querySelector('.doc-sub-tab.active');
|
|
if(firstSub) { firstSub.style.background='var(--primary)'; firstSub.style.color='#fff'; }
|
|
document.querySelectorAll('.doc-panel').forEach((p,i)=>{ if(i>0) p.style.display='none'; });
|
|
}
|
|
function newChatId() {
|
|
currentChatId = 'web_' + Date.now() + '_' + Math.random().toString(36).substr(2,6);
|
|
$('chatId').value = currentChatId;
|
|
return currentChatId;
|
|
}
|
|
function clearMessages() {
|
|
$('chatMessages').innerHTML = '';
|
|
$('chatMessages').innerHTML = '<div class="msg assistant"><div class="msg-avatar">🤖</div><div class="msg-bubble">已清屏，开始新的对话吧～</div></div>';
|
|
}
|
|
|
|
// ==================== RAG 模式切换 ====================
|
|
function toggleRagMode() {
|
|
isRagMode = $('ragModeToggle').checked;
|
|
$('ragStrategySelect').style.display = isRagMode ? 'block' : 'none';
|
|
$('ragStatusTip').style.display = isRagMode ? 'block' : 'none';
|
|
if (isRagMode) updateRagStatus();
|
|
}
|
|
|
|
function updateRagStatus() {
|
|
if (!isRagMode) return;
|
|
const strategy = $('ragStrategySelect').value;
|
|
const names = {'NONE':'无重写','REWRITE':'查询重写','TRANSLATION':'翻译扩展','COMPRESSION':'查询压缩','MULTI_QUERY':'多路扩展'};
|
|
$('ragStatusTip').innerHTML = `💡 当前已启用 RAG 知识库检索（策略：<strong>${names[strategy]||strategy}</strong>）`;
|
|
}
|
|
|
|
// ==================== Tab 1: AI 对话 ====================
|
|
function addMsg(role, content, isStreaming) {
|
|
const el = document.createElement('div');
|
|
el.className = 'msg ' + role + (isStreaming?' streaming':'');
|
|
el.innerHTML = '<div class="msg-avatar">'+(role==='user'?'👤':'🤖')+'</div><div class="msg-bubble"></div>';
|
|
$('chatMessages').appendChild(el);
|
|
const bubble = el.querySelector('.msg-bubble');
|
|
bubble.textContent = content;
|
|
const area = $('chatMessages');
|
|
area.scrollTop = area.scrollHeight;
|
|
return bubble;
|
|
}
|
|
|
|
async function chatSend() {
|
|
const input = $('userInput');
|
|
const message = input.value.trim();
|
|
if(!message) return;
|
|
input.value = ''; input.disabled = true; $('sendBtn').disabled = true;
|
|
addMsg('user', message);
|
|
const bubble = addMsg('assistant', '', true);
|
|
const mode = $('modeSelect').value;
|
|
const chatId = $('chatId').value || currentChatId;
|
|
try {
|
|
if (isRagMode && mode === 'sync') {
|
|
await chatRagSync(message, chatId, bubble);
|
|
} else if (isRagMode && mode !== 'sync') {
|
|
bubble.textContent = '⚠️ RAG 模式仅支持同步调用';
|
|
toast('RAG 模式暂不支持流式调用', 'error');
|
|
} else {
|
|
switch(mode) {
|
|
case 'sync': await chatSync(message, chatId, bubble); break;
|
|
case 'sse': await chatSSE(message, chatId, bubble); break;
|
|
case 'sse2': await chatServerSentEvent(message, chatId, bubble); break;
|
|
case 'sse3': await chatSseEmitter(message, chatId, bubble); break;
|
|
}
|
|
}
|
|
} catch(e) {
|
|
bubble.textContent = '请求失败：' + e.message;
|
|
toast('对话失败：' + e.message, 'error');
|
|
} finally {
|
|
bubble.parentElement.classList.remove('streaming');
|
|
input.disabled = false; $('sendBtn').disabled = false;
|
|
input.focus();
|
|
}
|
|
}
|
|
|
|
async function chatSync(message, chatId, bubble) {
|
|
const url = `${API}/ai/assistant_app/chat/sync?message=${encodeURIComponent(message)}&chatId=${encodeURIComponent(chatId)}`;
|
|
const res = await fetch(url);
|
|
if(!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
bubble.textContent = await res.text();
|
|
}
|
|
|
|
async function chatRagSync(message, chatId, bubble) {
|
|
const strategy = $('ragStrategySelect').value;
|
|
const url = `${API}/ai/assistant_app/chat/rag/sync?message=${encodeURIComponent(message)}&chatId=${encodeURIComponent(chatId)}&rewriteStrategy=${encodeURIComponent(strategy)}`;
|
|
const res = await fetch(url);
|
|
if(!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
bubble.textContent = await res.text();
|
|
}
|
|
|
|
async function chatSSE(message, chatId, bubble) {
|
|
bubble.textContent = '';
|
|
const url = `${API}/ai/assistant_app/chat/sse?message=${encodeURIComponent(message)}&chatId=${encodeURIComponent(chatId)}`;
|
|
const res = await fetch(url);
|
|
if(!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
while(true) {
|
|
const {done, value} = await reader.read();
|
|
if(done) break;
|
|
buffer += decoder.decode(value, {stream:true});
|
|
const lines = buffer.split('\n');
|
|
buffer = lines.pop() || '';
|
|
for(const line of lines) {
|
|
if(line.startsWith('data:')) {
|
|
const data = line.slice(5).trim();
|
|
if(data && data !== '[DONE]') bubble.textContent += data;
|
|
} else if(line.trim() && !line.startsWith(':')) {
|
|
bubble.textContent += line;
|
|
}
|
|
}
|
|
$('chatMessages').scrollTop = $('chatMessages').scrollHeight;
|
|
}
|
|
}
|
|
|
|
async function chatServerSentEvent(message, chatId, bubble) {
|
|
bubble.textContent = '';
|
|
const url = `${API}/ai/assistant_app/chat/server_sent_event?message=${encodeURIComponent(message)}&chatId=${encodeURIComponent(chatId)}`;
|
|
const res = await fetch(url);
|
|
if(!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
while(true) {
|
|
const {done, value} = await reader.read();
|
|
if(done) break;
|
|
buffer += decoder.decode(value, {stream:true});
|
|
const lines = buffer.split('\n');
|
|
buffer = lines.pop() || '';
|
|
for(const line of lines) {
|
|
if(line.startsWith('data:')) {
|
|
const data = line.slice(5).trim();
|
|
if(data && data !== '[DONE]') bubble.textContent += data;
|
|
}
|
|
}
|
|
$('chatMessages').scrollTop = $('chatMessages').scrollHeight;
|
|
}
|
|
}
|
|
|
|
async function chatSseEmitter(message, chatId, bubble) {
|
|
bubble.textContent = '';
|
|
const url = `${API}/ai/assistant_app/chat/sse_emitter?message=${encodeURIComponent(message)}&chatId=${encodeURIComponent(chatId)}`;
|
|
const res = await fetch(url);
|
|
if(!res.ok) throw new Error(`HTTP ${res.status}`);
|
|
const reader = res.body.getReader();
|
|
const decoder = new TextDecoder();
|
|
let buffer = '';
|
|
while(true) {
|
|
const {done, value} = await reader.read();
|
|
if(done) break;
|
|
buffer += decoder.decode(value, {stream:true});
|
|
const lines = buffer.split('\n');
|
|
buffer = lines.pop() || '';
|
|
for(const line of lines) {
|
|
if(line.startsWith('data:')) {
|
|
const data = line.slice(5).trim();
|
|
if(data && data !== '[DONE]') bubble.textContent += data;
|
|
} else if(line.trim() && !line.startsWith(':')) {
|
|
bubble.textContent += line;
|
|
}
|
|
}
|
|
$('chatMessages').scrollTop = $('chatMessages').scrollHeight;
|
|
}
|
|
}
|
|
|
|
// ==================== Tab 2: 商品信息提取 ====================
|
|
async function extractProduct() {
|
|
const content = $('productContent').value.trim();
|
|
if(!content) { toast('请输入商品描述内容', 'error'); return; }
|
|
const btn = $('extractBtn');
|
|
btn.disabled = true; btn.textContent = '⏳ 提取中...';
|
|
try {
|
|
const url = `${API}/ai/product_info_app/chat/sync?message=${encodeURIComponent(content)}`;
|
|
const res = await fetch(url);
|
|
if(!res.ok) throw new Error('HTTP '+res.status);
|
|
const text = await res.text();
|
|
const data = JSON.parse(text);
|
|
$('productResult').style.display = 'block';
|
|
const fields = ['title','description','price','rating','reviewCount','brand','category'];
|
|
const labels = {title:'商品标题',description:'描述',price:'价格',rating:'评分',reviewCount:'评论数',brand:'品牌',category:'分类'};
|
|
let html = '';
|
|
for(const f of fields) {
|
|
const val = data[f] !== null && data[f] !== undefined ? data[f] : '—';
|
|
html += `<div class="result-item"><div class="label">${labels[f]}</div><div class="value">${val}</div></div>`;
|
|
}
|
|
$('productGrid').innerHTML = html;
|
|
$('productJson').textContent = JSON.stringify(data, null, 2);
|
|
toast('商品信息提取成功！', 'success');
|
|
} catch(e) {
|
|
toast('提取失败：'+e.message, 'error');
|
|
} finally {
|
|
btn.disabled = false; btn.textContent = '🔍 提取商品信息';
|
|
}
|
|
}
|
|
|
|
// ==================== 知识库管理: 统计面板 ====================
|
|
async function loadStats() {
|
|
try {
|
|
const res = await fetch(`${API}/document/stats`);
|
|
const json = await res.json();
|
|
if(!json.success) return;
|
|
const d = json.data;
|
|
$('statTotalDocs').textContent = d.totalDocuments || 0;
|
|
$('statTotalVectors').textContent = d.totalVectors || 0;
|
|
$('statLastUpload').textContent = d.lastUploadTime ? formatDate(d.lastUploadTime) : '-';
|
|
let detail = '';
|
|
if(d.byFileType && Object.keys(d.byFileType).length > 0) {
|
|
detail += '文件类型: ' + Object.entries(d.byFileType).map(([k,v])=>`${k}: ${v}`).join(', ');
|
|
}
|
|
$('statsDetail').textContent = detail;
|
|
} catch(e) { console.error('加载统计失败', e); }
|
|
}
|
|
|
|
// ==================== 知识库管理: 分类管理 ====================
|
|
async function loadCategories() {
|
|
try {
|
|
const res = await fetch(`${API}/category/list`);
|
|
const json = await res.json();
|
|
if(!json.success) return;
|
|
const list = json.data || [];
|
|
categoryMap = {};
|
|
list.forEach(c => { categoryMap[c.id] = c.name; });
|
|
|
|
// 更新分类下拉框
|
|
const selects = [$('filterCategory'), $('uploadCategory')];
|
|
selects.forEach(sel => {
|
|
if(!sel) return;
|
|
const val = sel.value;
|
|
sel.innerHTML = '<option value="">' + (sel.id === 'filterCategory' ? '全部分类' : '选择分类（可选）') + '</option>';
|
|
list.forEach(c => {
|
|
sel.innerHTML += `<option value="${c.id}">${c.name}</option>`;
|
|
});
|
|
sel.value = val;
|
|
});
|
|
|
|
// 更新分类列表
|
|
if(list.length === 0) {
|
|
$('categoryList').innerHTML = '暂无分类';
|
|
} else {
|
|
$('categoryList').innerHTML = list.map(c =>
|
|
`<div style="padding:8px 0;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;">
|
|
<span><strong>${c.name}</strong> <span style="color:var(--sub);font-size:12px;">${c.description||''}</span></span>
|
|
<button class="btn btn-danger btn-sm" onclick="deleteCategory(${c.id})">删除</button>
|
|
</div>`
|
|
).join('');
|
|
}
|
|
} catch(e) { console.error('加载分类失败', e); }
|
|
}
|
|
|
|
async function createCategory() {
|
|
const name = $('catName').value.trim();
|
|
if(!name) { toast('请输入分类名称', 'error'); return; }
|
|
try {
|
|
const res = await fetch(`${API}/category`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type':'application/json'},
|
|
body: JSON.stringify({
|
|
name: name,
|
|
description: $('catDesc').value.trim(),
|
|
sortOrder: parseInt($('catSort').value) || 0
|
|
})
|
|
});
|
|
const json = await res.json();
|
|
if(json.success) {
|
|
toast('分类创建成功', 'success');
|
|
$('catName').value = '';
|
|
$('catDesc').value = '';
|
|
loadCategories();
|
|
} else {
|
|
toast(json.message || '创建失败', 'error');
|
|
}
|
|
} catch(e) { toast('创建分类失败：'+e.message, 'error'); }
|
|
}
|
|
|
|
async function deleteCategory(id) {
|
|
if(!confirm('确定删除此分类？关联文档将变为未分类')) return;
|
|
try {
|
|
const res = await fetch(`${API}/category/${id}`, {method:'DELETE'});
|
|
const json = await res.json();
|
|
if(json.success) {
|
|
toast('分类已删除', 'success');
|
|
loadCategories();
|
|
loadDocuments();
|
|
} else {
|
|
toast(json.message || '删除失败', 'error');
|
|
}
|
|
} catch(e) { toast('删除分类失败：'+e.message, 'error'); }
|
|
}
|
|
|
|
// ==================== 知识库管理: 文档列表 ====================
|
|
async function loadDocuments(page=1) {
|
|
currentDocPage = page;
|
|
const catId = $('filterCategory').value;
|
|
const status = $('filterStatus').value;
|
|
let url = `${API}/document/list?page=${page}&size=10`;
|
|
if(catId) url += `&categoryId=${catId}`;
|
|
if(status) url += `&status=${status}`;
|
|
try {
|
|
const res = await fetch(url);
|
|
const json = await res.json();
|
|
if(!json.success) {
|
|
$('docTableBody').innerHTML = `<tr><td colspan="7" style="text-align:center;color:var(--danger);">${json.message}</td></tr>`;
|
|
return;
|
|
}
|
|
const docs = json.data || [];
|
|
const total = json.total || 0;
|
|
const pages = json.pages || 1;
|
|
|
|
if(docs.length === 0) {
|
|
$('docTableBody').innerHTML = '<tr><td colspan="7" style="text-align:center;color:var(--sub);">暂无文档</td></tr>';
|
|
} else {
|
|
$('docTableBody').innerHTML = docs.map(d => {
|
|
const statusClass = d.status==='READY'?'status-ready':d.status==='PROCESSING'?'status-processing':'status-failed';
|
|
const catName = categoryMap[d.categoryId] || (d.categoryId>0?'未知':'未分类');
|
|
return `<tr>
|
|
<td>${d.id}</td>
|
|
<td><strong>${d.title}</strong><br><span style="font-size:11px;color:var(--sub);">${d.sourceName||''}</span></td>
|
|
<td><span class="category-tag">${d.fileType}</span></td>
|
|
<td><span class="${statusClass}">${d.status}</span></td>
|
|
<td>${d.chunkCount}</td>
|
|
<td>${formatDate(d.createTime)}</td>
|
|
<td>
|
|
<button class="btn btn-sm btn-outline" onclick="viewDocDetail(${d.id})">查看</button>
|
|
<button class="btn btn-sm btn-warn" onclick="reprocessDoc(${d.id})">重新处理</button>
|
|
<button class="btn btn-sm btn-danger" onclick="deleteDoc(${d.id})">删除</button>
|
|
</td>
|
|
</tr>`;
|
|
}).join('');
|
|
}
|
|
|
|
// 分页
|
|
let phtml = '';
|
|
if(pages > 1) {
|
|
phtml += `<button ${page<=1?'disabled':''} onclick="loadDocuments(${page-1})">上一页</button>`;
|
|
for(let i=1;i<=pages;i++) {
|
|
if(i===1 || i===pages || (i>=page-2 && i<=page+2)) {
|
|
phtml += `<button class="${i===page?'active':''}" onclick="loadDocuments(${i})">${i}</button>`;
|
|
} else if(i===page-3 || i===page+3) {
|
|
phtml += `<span style="padding:6px;">...</span>`;
|
|
}
|
|
}
|
|
phtml += `<button ${page>=pages?'disabled':''} onclick="loadDocuments(${page+1})">下一页</button>`;
|
|
}
|
|
$('docPagination').innerHTML = phtml;
|
|
} catch(e) {
|
|
$('docTableBody').innerHTML = `<tr><td colspan="7" style="text-align:center;color:var(--danger);">加载失败：${e.message}</td></tr>`;
|
|
}
|
|
}
|
|
|
|
async function viewDocDetail(id) {
|
|
try {
|
|
const [detailRes, chunksRes] = await Promise.all([
|
|
fetch(`${API}/document/${id}`),
|
|
fetch(`${API}/document/${id}/chunks`)
|
|
]);
|
|
const detailJson = await detailRes.json();
|
|
const chunksJson = await chunksRes.json();
|
|
|
|
if(!detailJson.success) { toast(detailJson.message, 'error'); return; }
|
|
|
|
const d = detailJson.data;
|
|
const chunks = chunksJson.success ? (chunksJson.data || []) : [];
|
|
const statusClass = d.status==='READY'?'status-ready':d.status==='PROCESSING'?'status-processing':'status-failed';
|
|
const catName = categoryMap[d.categoryId] || (d.categoryId>0?'未知':'未分类');
|
|
|
|
let html = `
|
|
<div style="margin-bottom:16px;">
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px;">
|
|
<div class="result-item"><div class="label">文档标题</div><div class="value">${d.title}</div></div>
|
|
<div class="result-item"><div class="label">原始文件名</div><div class="value">${d.sourceName||'-'}</div></div>
|
|
<div class="result-item"><div class="label">文件类型</div><div class="value">${d.fileType}</div></div>
|
|
<div class="result-item"><div class="label">文件大小</div><div class="value">${formatBytes(d.fileSize||0)}</div></div>
|
|
<div class="result-item"><div class="label">状态</div><div class="value"><span class="${statusClass}">${d.status}</span></div></div>
|
|
<div class="result-item"><div class="label">分块数</div><div class="value">${d.chunkCount}</div></div>
|
|
<div class="result-item"><div class="label">分类</div><div class="value">${catName}</div></div>
|
|
<div class="result-item"><div class="label">创建时间</div><div class="value">${formatDate(d.createTime)}</div></div>
|
|
</div>
|
|
<h3>📄 原文内容</h3>
|
|
<div style="background:#f9fafb;padding:12px;border-radius:8px;border:1px solid var(--border);font-size:13px;line-height:1.6;max-height:200px;overflow-y:auto;">${d.content||'-'}</div>
|
|
</div>
|
|
<h3>🧩 分块详情（${chunks.length} 个）</h3>
|
|
`;
|
|
|
|
chunks.forEach((chunk, i) => {
|
|
let meta = chunk.metadata;
|
|
if(typeof meta === 'object' && meta && meta.value) meta = meta.value;
|
|
let keywords = '';
|
|
try {
|
|
const m = typeof meta === 'string' ? JSON.parse(meta) : meta;
|
|
keywords = m.excerpt_keywords || '';
|
|
} catch(e) {}
|
|
html += `
|
|
<div class="search-result">
|
|
<div class="meta">#${i+1} ${keywords ? '| 关键词: ' + keywords : ''}</div>
|
|
<div class="content">${chunk.content||''}</div>
|
|
</div>
|
|
`;
|
|
});
|
|
|
|
$('docModalContent').innerHTML = html;
|
|
$('docModal').classList.add('active');
|
|
} catch(e) { toast('查看详情失败：'+e.message, 'error'); }
|
|
}
|
|
|
|
function closeDocModal() {
|
|
$('docModal').classList.remove('active');
|
|
}
|
|
|
|
async function deleteDoc(id) {
|
|
if(!confirm('确定删除此文档？关联的向量也将被删除')) return;
|
|
try {
|
|
const res = await fetch(`${API}/document/${id}`, {method:'DELETE'});
|
|
const json = await res.json();
|
|
if(json.success) {
|
|
toast(`已删除，连带删除 ${json.deletedVectors||0} 个向量`, 'success');
|
|
loadDocuments(currentDocPage);
|
|
loadStats();
|
|
} else {
|
|
toast(json.message || '删除失败', 'error');
|
|
}
|
|
} catch(e) { toast('删除失败：'+e.message, 'error'); }
|
|
}
|
|
|
|
async function reprocessDoc(id) {
|
|
if(!confirm('确定重新处理此文档？将重新分块并向量化')) return;
|
|
try {
|
|
const res = await fetch(`${API}/document/${id}/reprocess`, {method:'PUT'});
|
|
const json = await res.json();
|
|
if(json.success) {
|
|
toast('重新处理成功', 'success');
|
|
loadDocuments(currentDocPage);
|
|
} else {
|
|
toast(json.message || '重新处理失败', 'error');
|
|
}
|
|
} catch(e) { toast('重新处理失败：'+e.message, 'error'); }
|
|
}
|
|
|
|
// ==================== 知识库管理: 语义搜索 ====================
|
|
async function doSearch() {
|
|
const query = $('searchQuery').value.trim();
|
|
if(!query) { toast('请输入查询内容', 'error'); return; }
|
|
const topK = parseInt($('searchTopK').value) || 5;
|
|
const threshold = parseFloat($('searchThreshold').value) || 0.5;
|
|
|
|
$('searchResults').innerHTML = '<div style="text-align:center;padding:20px;color:var(--sub);">⏳ 搜索中...</div>';
|
|
|
|
try {
|
|
const res = await fetch(`${API}/document/search`, {
|
|
method: 'POST',
|
|
headers: {'Content-Type':'application/json'},
|
|
body: JSON.stringify({query, topK, similarityThreshold: threshold})
|
|
});
|
|
const json = await res.json();
|
|
if(!json.success) {
|
|
$('searchResults').innerHTML = `<div style="color:var(--danger);">搜索失败：${json.message}</div>`;
|
|
return;
|
|
}
|
|
const results = json.data || [];
|
|
if(results.length === 0) {
|
|
$('searchResults').innerHTML = '<div style="text-align:center;padding:20px;color:var(--sub);">未找到相关结果</div>';
|
|
return;
|
|
}
|
|
$('searchResults').innerHTML = results.map(r => {
|
|
const score = r.score !== null ? (1 - r.score).toFixed(4) : '-';
|
|
return `
|
|
<div class="search-result">
|
|
<div class="score">相似度得分: ${score} | ${r.title||'无标题'} | ${r.sourceName||'无来源'}</div>
|
|
<div class="content">${r.content||''}</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
} catch(e) {
|
|
$('searchResults').innerHTML = `<div style="color:var(--danger);">搜索失败：${e.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// ==================== Tab 3: 文档上传 ====================
|
|
const fileData = {};
|
|
function handleFileSelect(input, type) {
|
|
if(!input.files || input.files.length === 0) return;
|
|
fileData[type] = Array.from(input.files);
|
|
const totalSize = fileData[type].reduce((s, f) => s + f.size, 0);
|
|
const filenames = fileData[type].map(f => `<span style="display:inline-block;margin:2px 4px;padding:2px 8px;background:#eef2ff;border-radius:4px;font-size:12px;">${f.name} <span style="color:var(--sub);">(${formatBytes(f.size)})</span></span>`).join('');
|
|
const infoId = type === 'file' ? 'fileFileInfo' : type === 'markdown' ? 'mdFileInfo' : type === 'jsonBasic' ? 'jsonBFileInfo' : type === 'jsonFields' ? 'jsonFFileInfo' : 'jsonPFileInfo';
|
|
const label = fileData[type].length > 1 ? `已选择 <strong>${fileData[type].length}</strong> 个文件（共 ${formatBytes(totalSize)}）` : `已选择：<strong>${fileData[type][0].name}</strong> (${formatBytes(fileData[type][0].size)})`;
|
|
$(infoId).innerHTML = `${label}<br><div style="margin-top:4px;">${filenames}</div>`;
|
|
const btnMap = {file:'btn-file', markdown:'btn-markdown', jsonBasic:'btn-jsonBasic', jsonFields:'btn-jsonFields', jsonPointer:'btn-jsonPointer'};
|
|
if(btnMap[type]) $(btnMap[type]).disabled = false;
|
|
const zoneMap = {file:'zone-file', markdown:'zone-md', jsonBasic:'zone-jsonB', jsonFields:'zone-jsonF', jsonPointer:'zone-jsonP'};
|
|
if(zoneMap[type]) $(zoneMap[type]).style.borderColor = 'var(--success)';
|
|
}
|
|
|
|
async function uploadDocument(type) {
|
|
let baseUrl, resultId;
|
|
switch(type) {
|
|
case 'file': baseUrl = `${API}/upload/file`; resultId = 'doc-file-result'; break;
|
|
case 'string': baseUrl = `${API}/upload/string`; resultId = 'doc-string-result'; break;
|
|
case 'markdown': baseUrl = `${API}/upload/markdown`; resultId = 'doc-markdown-result'; break;
|
|
case 'jsonBasic': baseUrl = `${API}/upload/json/basic`; resultId = 'doc-jsonBasic-result'; break;
|
|
case 'jsonFields':
|
|
resultId = 'doc-jsonFields-result';
|
|
{ const fieldsStr = $('jsonFieldsInput').value.trim();
|
|
if(!fieldsStr) { toast('请输入要提取的字段名', 'error'); return; }
|
|
baseUrl = `${API}/upload/json/fields?fields=${encodeURIComponent(fieldsStr)}`; }
|
|
break;
|
|
case 'jsonPointer':
|
|
resultId = 'doc-jsonPointer-result';
|
|
{ const pointer = $('jsonPointerInput').value.trim();
|
|
if(!pointer) { toast('请输入 JSON Pointer 路径', 'error'); return; }
|
|
baseUrl = `${API}/upload/json/pointer?pointer=${encodeURIComponent(pointer)}`; }
|
|
break;
|
|
}
|
|
|
|
const btnId = {file:'btn-file', string:null, markdown:'btn-markdown', jsonBasic:'btn-jsonBasic', jsonFields:'btn-jsonFields', jsonPointer:'btn-jsonPointer'}[type];
|
|
const btn = btnId ? $(btnId) : null;
|
|
|
|
// 构建附加参数
|
|
const catId = $('uploadCategory').value;
|
|
const tagsStr = $('uploadTags').value.trim();
|
|
const extraParams = [];
|
|
if(catId) extraParams.push(`categoryId=${catId}`);
|
|
if(tagsStr) extraParams.push(`tags=${encodeURIComponent(tagsStr)}`);
|
|
const extraQuery = extraParams.length > 0 ? (baseUrl.includes('?') ? '&' : '?') + extraParams.join('&') : '';
|
|
|
|
if(type === 'string') {
|
|
if(btn) { btn.disabled = true; btn.textContent = '处理中...'; }
|
|
try {
|
|
const title = $('stringTitle').value.trim() || $('stringContent').value.trim().substring(0, 30);
|
|
let url = baseUrl + (baseUrl.includes('?') ? '&' : '?') + `title=${encodeURIComponent(title)}`;
|
|
if(catId) url += `&categoryId=${catId}`;
|
|
if(tagsStr) url += `&tags=${encodeURIComponent(tagsStr)}`;
|
|
const res = await fetch(url, { method:'POST', headers:{'Content-Type':'text/plain'}, body:$('stringContent').value });
|
|
const data = await res.json();
|
|
$(resultId).innerHTML = res.ok
|
|
? `<div style="margin-top:8px;padding:12px;background:#ecfdf5;border-radius:8px;font-size:13px;">${data.message} | 分块数：<strong>${data.data.chunkCount}</strong> | 状态：<strong>${data.data.status}</strong></div>`
|
|
: `<div style="margin-top:8px;padding:12px;background:#fef2f2;border-radius:8px;font-size:13px;color:var(--danger);">${data.message}</div>`;
|
|
if(res.ok) { toast(data.message, 'success'); loadDocuments(); loadStats(); }
|
|
} catch(e) {
|
|
$(resultId).innerHTML = `<div style="margin-top:8px;padding:12px;background:#fef2f2;border-radius:8px;font-size:13px;color:var(--danger);">上传失败：${e.message}</div>`;
|
|
toast('上传失败：'+e.message, 'error');
|
|
} finally {
|
|
if(btn) { btn.disabled = false; btn.textContent = '🚀 上传并向量化'; }
|
|
}
|
|
return;
|
|
}
|
|
|
|
const files = fileData[type];
|
|
if(!files || files.length === 0) { toast('请先选择文件', 'error'); return; }
|
|
if(btn) { btn.disabled = true; btn.textContent = files.length > 1 ? `0/${files.length}` : '处理中...'; }
|
|
|
|
let successCount = 0, failCount = 0;
|
|
const resultsHtml = [];
|
|
|
|
for(let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
if(btn && files.length > 1) btn.textContent = `${i+1}/${files.length}`;
|
|
try {
|
|
const formData = new FormData();
|
|
formData.append('file', file);
|
|
if(catId) formData.append('categoryId', catId);
|
|
if(tagsStr) formData.append('tags', tagsStr);
|
|
const res = await fetch(baseUrl + extraQuery, { method:'POST', body:formData });
|
|
const data = await res.json();
|
|
if(res.ok) {
|
|
successCount++;
|
|
resultsHtml.push(`<span style="color:var(--success);">${file.name}</span> — ${data.data.chunkCount||0} 分块`);
|
|
} else {
|
|
failCount++;
|
|
resultsHtml.push(`<span style="color:var(--danger);">${file.name}</span> — ${data.message||'错误'}`);
|
|
}
|
|
} catch(e) {
|
|
failCount++;
|
|
resultsHtml.push(`<span style="color:var(--danger);">${file.name}</span> — ${e.message}`);
|
|
}
|
|
}
|
|
|
|
const summary = successCount > 0
|
|
? `上传完成：成功 ${successCount} 个${failCount > 0 ? `，失败 ${failCount} 个` : ''}`
|
|
: `全部失败（${failCount} 个文件）`;
|
|
$(resultId).innerHTML = `<div style="margin-top:8px;padding:12px;background:${successCount>0?'#ecfdf5':'#fef2f2'};border-radius:8px;font-size:13px;">${summary}<br><div style="margin-top:6px;line-height:1.8;">${resultsHtml.join('<br>')}</div></div>`;
|
|
toast(summary, successCount > 0 ? 'success' : 'error');
|
|
if(btn) { btn.disabled = false; btn.textContent = '🚀 上传并向量化'; }
|
|
if(successCount > 0) { loadDocuments(); loadStats(); loadCategories(); }
|
|
}
|
|
|
|
// 拖放支持
|
|
['zone-file','zone-md','zone-jsonB','zone-jsonF','zone-jsonP'].forEach(id => {
|
|
const zone = document.getElementById(id);
|
|
if(!zone) return;
|
|
zone.addEventListener('dragover', e => { e.preventDefault(); zone.classList.add('drag-over'); });
|
|
zone.addEventListener('dragleave', () => zone.classList.remove('drag-over'));
|
|
zone.addEventListener('drop', e => {
|
|
e.preventDefault();
|
|
zone.classList.remove('drag-over');
|
|
const inputId = id.replace('zone-','');
|
|
const inputMap = {file:'fileInput', md:'mdInput', jsonB:'jsonBInput', jsonF:'jsonFInput', jsonP:'jsonPInput'};
|
|
const typeMap = {file:'file', md:'markdown', jsonB:'jsonBasic', jsonF:'jsonFields', jsonP:'jsonPointer'};
|
|
const input = document.getElementById(inputMap[inputId]);
|
|
if(input && e.dataTransfer.files[0]) {
|
|
input.files = e.dataTransfer.files;
|
|
handleFileSelect(input, typeMap[inputId]);
|
|
}
|
|
});
|
|
});
|
|
|
|
// 弹窗关闭点击外部
|
|
document.getElementById('docModal').addEventListener('click', function(e) {
|
|
if(e.target === this) closeDocModal();
|
|
});
|
|
|
|
// ==================== 启动 ====================
|
|
init();
|
|
</script>
|
|
</body>
|
|
</html>
|