184 lines
6.6 KiB
HTML
184 lines
6.6 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>财务大模型智能问答客服系统</title>
|
||
<link rel="stylesheet" href="./style.css" />
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<aside class="sidebar">
|
||
<div class="brand">
|
||
<div class="brand-mark">财</div>
|
||
<div>
|
||
<div class="brand-title">财务智能问答</div>
|
||
<div class="brand-subtitle">制度依据 · 流程追溯 · 审计闭环</div>
|
||
</div>
|
||
</div>
|
||
|
||
<nav class="nav">
|
||
<button class="nav-item active" data-view="chat" title="智能问答">
|
||
<span class="nav-icon">问</span><span>智能问答</span>
|
||
</button>
|
||
<button class="nav-item" data-view="documents" title="知识文档">
|
||
<span class="nav-icon">文</span><span>知识文档</span>
|
||
</button>
|
||
<button class="nav-item" data-view="audit" title="问答审计">
|
||
<span class="nav-icon">审</span><span>问答审计</span>
|
||
</button>
|
||
</nav>
|
||
|
||
<div class="login-panel">
|
||
<div id="loginForm">
|
||
<label>
|
||
<span>API 地址</span>
|
||
<input id="apiBaseInput" value="http://127.0.0.1:8000" />
|
||
</label>
|
||
<label>
|
||
<span>手机号</span>
|
||
<input id="phoneInput" value="13800000000" />
|
||
</label>
|
||
<div class="login-actions">
|
||
<button id="sendCodeBtn" class="ghost-btn">验证码</button>
|
||
<button id="loginBtn" class="primary-btn">登录</button>
|
||
</div>
|
||
</div>
|
||
<div id="loginState" class="login-state">未登录</div>
|
||
<button id="logoutBtn" class="logout-btn" hidden>退出</button>
|
||
</div>
|
||
</aside>
|
||
|
||
<main class="main">
|
||
<header class="topbar">
|
||
<div>
|
||
<h1 id="pageTitle">智能问答工作台</h1>
|
||
<p id="pageSubtitle">基于正式制度文档回答，答案保留来源引用和问答留痕。</p>
|
||
</div>
|
||
<div class="top-actions">
|
||
<span id="healthBadge" class="status-badge muted">未连接</span>
|
||
<button id="refreshBtn" class="icon-btn" title="刷新">↻</button>
|
||
</div>
|
||
</header>
|
||
|
||
<section id="chatView" class="view is-visible chat-layout">
|
||
<section class="conversation-panel">
|
||
<div class="panel-head">
|
||
<div>
|
||
<h2>会话</h2>
|
||
<p>本人历史问答记录</p>
|
||
</div>
|
||
<button id="newSessionBtn" class="icon-btn" title="新建会话">+</button>
|
||
</div>
|
||
<div id="sessionList" class="session-list"></div>
|
||
</section>
|
||
|
||
<section class="chat-panel">
|
||
<div id="messages" class="messages"></div>
|
||
<form id="chatForm" class="composer">
|
||
<textarea id="questionInput" rows="3" placeholder="输入财务制度、报销流程或系统操作问题..."></textarea>
|
||
<button class="primary-btn" type="submit">发送</button>
|
||
</form>
|
||
</section>
|
||
</section>
|
||
|
||
<section id="documentsView" class="view admin-view">
|
||
<div class="section-toolbar">
|
||
<div class="inline-form" style="margin-left:auto">
|
||
<a id="openAdpConsoleBtn" class="ghost-btn" href="https://adp.cloud.tencent.com" target="_blank" rel="noopener">打开 ADP 控制台</a>
|
||
<button id="refreshDocsBtn" class="primary-btn" type="button">刷新</button>
|
||
</div>
|
||
</div>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>文档名称</th>
|
||
<th>类型</th>
|
||
<th>大小</th>
|
||
<th>状态</th>
|
||
<th>生效范围</th>
|
||
<th>更新时间</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="documentRows"></tbody>
|
||
</table>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="auditView" class="view admin-view">
|
||
<div class="section-toolbar">
|
||
<div>
|
||
<h2>审计与用量</h2>
|
||
<p>查看登录、文档、问答和接口调用留痕。</p>
|
||
</div>
|
||
<button id="loadAuditBtn" class="ghost-btn">重新加载</button>
|
||
</div>
|
||
<div class="audit-grid">
|
||
<section class="usage-board">
|
||
<div><span>问答次数</span><strong id="auditQuestions">0</strong></div>
|
||
<div><span>活跃用户</span><strong id="auditUsers">0</strong></div>
|
||
<div><span>文档数量</span><strong id="auditDocs">0</strong></div>
|
||
<div><span>审计记录</span><strong id="auditCount">0</strong></div>
|
||
</section>
|
||
<div class="table-wrap">
|
||
<table>
|
||
<thead>
|
||
<tr>
|
||
<th>时间</th>
|
||
<th>操作</th>
|
||
<th>对象</th>
|
||
<th>详情</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="auditRows"></tbody>
|
||
</table>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<div id="documentModal" class="modal-backdrop" hidden>
|
||
<section class="modal">
|
||
<div class="modal-head">
|
||
<div>
|
||
<h2>新增知识文档</h2>
|
||
<p>拖拽或选择制度、手册、FAQ 文件上传。</p>
|
||
</div>
|
||
<button id="closeDocumentModalBtn" class="icon-btn" title="关闭">×</button>
|
||
</div>
|
||
<form id="documentForm" class="modal-body">
|
||
<label id="dropZone" class="drop-zone">
|
||
<input id="docFileInput" type="file" hidden />
|
||
<span class="drop-icon">↑</span>
|
||
<strong id="dropTitle">拖拽文件到这里，或点击选择文件</strong>
|
||
<small id="dropHint">支持 PDF、DOCX、XLSX、TXT、PNG、JPG 等知识材料</small>
|
||
</label>
|
||
<div class="modal-grid">
|
||
<label>
|
||
<span>标签</span>
|
||
<input id="docTagsInput" placeholder="例如：差旅,报销" />
|
||
</label>
|
||
<label>
|
||
<span>密级</span>
|
||
<select id="docLevelInput">
|
||
<option value="public">公开</option>
|
||
<option value="internal" selected>内部</option>
|
||
<option value="secret">保密</option>
|
||
</select>
|
||
</label>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button id="cancelDocumentModalBtn" class="ghost-btn" type="button">取消</button>
|
||
<button class="primary-btn" type="submit">上传并新增</button>
|
||
</div>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
|
||
<div id="toast" class="toast"></div>
|
||
<script src="./app.js"></script>
|
||
</body>
|
||
</html>
|