262 lines
12 KiB
HTML
262 lines
12 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>Meeting Summary</title>
|
||
<link rel="stylesheet" href="/assets/styles.css?v=20260511l">
|
||
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/13.0.3/marked.min.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="app-shell">
|
||
<header class="topbar">
|
||
<div>
|
||
<p class="eyebrow">FRONTEND + BACKEND</p>
|
||
<h1>Meeting Summary Workspace</h1>
|
||
</div>
|
||
<div class="topbar-actions">
|
||
<button class="btn primary" id="btn-import">导入会议</button>
|
||
<button class="btn" id="btn-import-template">导入模板</button>
|
||
<button class="btn" id="btn-settings">设置</button>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="workspace" id="main-container">
|
||
<aside class="panel" id="sidebar">
|
||
<div class="panel-header sidebar-header">
|
||
<div class="panel-heading">
|
||
<span>资源管理器</span>
|
||
<small id="sidebar-meeting-name">当前会议：未选择</small>
|
||
<small id="sidebar-meeting-meta">请从左侧选择一个会议开始处理。</small>
|
||
</div>
|
||
<div class="header-badges">
|
||
<span class="badge muted" id="badge-summary">未生成总结</span>
|
||
<span class="badge muted" id="badge-topics">未生成主题 JSON</span>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body">
|
||
<div class="tree" id="file-tree"></div>
|
||
</div>
|
||
</aside>
|
||
|
||
<div class="gutter" id="gutter-1"></div>
|
||
|
||
<section class="panel panel-main" id="result-panel">
|
||
<div class="panel-header">
|
||
<div class="panel-heading">
|
||
<span>会议结果</span>
|
||
<div class="status-block">
|
||
<div class="status-row">
|
||
<span class="status-label">当前状态</span>
|
||
<span class="status-light idle" id="left-status-light"></span>
|
||
<span class="status-text" id="left-status-text">空闲</span>
|
||
</div>
|
||
<div class="status-meta" id="selected-meeting-tip">未选择会议</div>
|
||
</div>
|
||
</div>
|
||
<div class="toolbar">
|
||
<button class="btn primary sm" id="btn-process" disabled>总结</button>
|
||
<button class="btn sm" id="btn-toggle-result-edit" disabled>编辑</button>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body panel-scroll" id="result-body">
|
||
<div id="result-empty" class="empty-state">
|
||
<div class="empty-icon">M</div>
|
||
<p>选择会议后即可查看结果，或直接开始总结。</p>
|
||
</div>
|
||
<div id="processing-indicator" class="processing" hidden>
|
||
<div class="stream-box" id="stream-box">
|
||
<div class="stream-title" id="stream-title"></div>
|
||
<pre class="stream-content" id="stream-content"></pre>
|
||
</div>
|
||
</div>
|
||
<textarea id="result-editor" spellcheck="false"></textarea>
|
||
<article id="result-md" class="md-content"></article>
|
||
</div>
|
||
</section>
|
||
|
||
<div class="gutter" id="gutter-2"></div>
|
||
|
||
<section class="panel" id="template-panel">
|
||
<div class="panel-header">
|
||
<div class="panel-heading">
|
||
<span>编辑区</span>
|
||
<div class="status-block">
|
||
<div class="status-row">
|
||
<span class="status-label">当前状态</span>
|
||
<span class="status-light idle" id="right-status-light"></span>
|
||
<span class="status-text" id="right-status-text">空闲</span>
|
||
</div>
|
||
<div class="status-meta" id="editor-resource-label">当前资源：模板</div>
|
||
</div>
|
||
</div>
|
||
<div class="toolbar">
|
||
<label class="inline-label" for="tpl-select">模板</label>
|
||
<select class="btn sm" id="tpl-select"></select>
|
||
<button class="btn sm" id="btn-reparse-guide" disabled>解析</button>
|
||
<button class="btn sm" id="btn-toggle-side-edit" disabled>编辑</button>
|
||
</div>
|
||
</div>
|
||
<div class="panel-body panel-scroll" id="template-body">
|
||
<textarea id="side-editor" spellcheck="false"></textarea>
|
||
<article id="side-preview" class="md-content"></article>
|
||
<pre id="side-plain-preview"></pre>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="modal-mask" id="modal-process-guide">
|
||
<div class="modal-box guide-modal">
|
||
<div class="guide-modal-head">
|
||
<div>
|
||
<h3 id="guide-modal-title">模板使用说明</h3>
|
||
<p id="guide-modal-subtitle">确认后开始总结，可先补充一些关注要点</p>
|
||
</div>
|
||
<button class="icon-btn" id="btn-close-process-guide" aria-label="关闭">×</button>
|
||
</div>
|
||
<div class="guide-modal-body">
|
||
<label class="form-field">
|
||
<span>模板说明</span>
|
||
<textarea id="process-guide-editor" class="guide-editor" spellcheck="false"></textarea>
|
||
</label>
|
||
<div class="guide-inline-prompt" id="reparse-guide-prompt" hidden>
|
||
<div class="guide-inline-prompt-box">
|
||
<div class="guide-inline-prompt-title">模板说明补充</div>
|
||
<div class="guide-inline-prompt-subtitle">可为空；会和系统解析模板一起用于重新解析</div>
|
||
<textarea id="reparse-guide-notes" class="guide-inline-textarea" spellcheck="false" placeholder="例如：强调哪些结构必须保留、哪些段落需要重点解释、哪些措辞需要避免"></textarea>
|
||
<div class="guide-inline-actions">
|
||
<button class="btn" id="btn-reparse-guide-cancel">取消</button>
|
||
<button class="btn primary" id="btn-reparse-guide-confirm">确认重解析</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<label class="form-field">
|
||
<span>补充说明（可空）</span>
|
||
<textarea id="process-extra-notes" class="guide-notes" spellcheck="false" placeholder="例如：强调哪些结构要保留、哪些内容要重点解释、哪些措辞需要避免"></textarea>
|
||
</label>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="btn" id="btn-process-guide-edit">编辑</button>
|
||
<button class="btn" id="btn-process-guide-reparse">重解析</button>
|
||
<button class="btn primary" id="btn-process-guide-confirm">确认</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-mask" id="modal-reparse-guide">
|
||
<div class="modal-box reparse-modal">
|
||
<div class="guide-modal-head">
|
||
<div>
|
||
<h3 id="reparse-modal-title">模板使用说明补充</h3>
|
||
<p id="reparse-modal-subtitle">用于固定模板使用规格，优化最终输出结果（可不填写）</p>
|
||
</div>
|
||
<button class="icon-btn" id="btn-close-reparse-guide" aria-label="关闭">×</button>
|
||
</div>
|
||
<div class="reparse-modal-body" id="reparse-modal-form">
|
||
<textarea id="reparse-modal-notes" class="guide-inline-textarea reparse-modal-textarea" spellcheck="false" placeholder="例如：强调哪些结构必须保留、哪些段落需要重点解释、哪些措辞需要避免"></textarea>
|
||
</div>
|
||
<div class="reparse-modal-body" id="reparse-modal-progress" hidden>
|
||
<div class="stream-box reparse-stream-box">
|
||
<div class="stream-title" id="reparse-stream-title">正在重新解析模板说明...</div>
|
||
<pre class="stream-content reparse-stream-content" id="reparse-stream-content"></pre>
|
||
</div>
|
||
</div>
|
||
<div class="modal-actions">
|
||
<button class="btn" id="btn-reparse-modal-cancel">取消</button>
|
||
<button class="btn primary" id="btn-reparse-modal-confirm">确认重解析</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-mask" id="modal-import">
|
||
<div class="modal-box">
|
||
<h3>导入会议转录</h3>
|
||
<label class="form-field">
|
||
<span>会议名称</span>
|
||
<input type="text" id="import-name" placeholder="例如：2026-05-08 周例会">
|
||
</label>
|
||
<label class="form-field">
|
||
<span>转录文件（.txt / .md）</span>
|
||
<input type="file" id="import-file" accept=".txt,.md">
|
||
</label>
|
||
<div class="modal-actions">
|
||
<button class="btn" data-close="modal-import">取消</button>
|
||
<button class="btn primary" id="btn-confirm-import">导入</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-mask" id="modal-import-template">
|
||
<div class="modal-box">
|
||
<h3>导入模板</h3>
|
||
<label class="form-field">
|
||
<span>模板名称</span>
|
||
<input type="text" id="import-template-name" placeholder="例如：template3.md">
|
||
</label>
|
||
<label class="form-field">
|
||
<span>模板文件（.md）</span>
|
||
<input type="file" id="import-template-file" accept=".md">
|
||
</label>
|
||
<div class="modal-actions">
|
||
<button class="btn" data-close="modal-import-template">取消</button>
|
||
<button class="btn primary" id="btn-confirm-import-template">导入</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-mask" id="modal-settings">
|
||
<div class="modal-box">
|
||
<h3>API 配置</h3>
|
||
<label class="form-field">
|
||
<span>当前模型</span>
|
||
<input type="text" id="cfg-current-model" readonly>
|
||
</label>
|
||
<label class="form-field">
|
||
<span>模型列表</span>
|
||
<select id="cfg-key-select"></select>
|
||
</label>
|
||
<label class="form-field">
|
||
<span>Max Tokens</span>
|
||
<input type="number" id="cfg-max-tokens" min="1" step="1">
|
||
</label>
|
||
<div class="modal-actions settings-key-actions">
|
||
<button class="btn" id="btn-key-add">新增模型</button>
|
||
<button class="btn" id="btn-save-settings">保存当前</button>
|
||
<button class="btn" id="btn-key-delete">删除模型</button>
|
||
<button class="btn" data-close="modal-settings">取消</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal-mask" id="modal-add-model">
|
||
<div class="modal-box">
|
||
<h3>新增模型</h3>
|
||
<label class="form-field">
|
||
<span>Model Name</span>
|
||
<input type="text" id="cfg-add-model-name" placeholder="Qwen3.6-35B">
|
||
</label>
|
||
<label class="form-field">
|
||
<span>Base URL</span>
|
||
<input type="text" id="cfg-add-base-url" placeholder="http://host:port/v1">
|
||
</label>
|
||
<label class="form-field">
|
||
<span>API Key</span>
|
||
<input type="text" id="cfg-add-api-key" placeholder="your-api-key">
|
||
</label>
|
||
<label class="form-field">
|
||
<span>Max Tokens</span>
|
||
<input type="number" id="cfg-add-max-tokens" min="1" step="1" placeholder="64000">
|
||
</label>
|
||
<div class="modal-actions">
|
||
<button class="btn" data-close="modal-add-model">取消</button>
|
||
<button class="btn primary" id="btn-confirm-add-model">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="toast" id="toast"></div>
|
||
<script type="module" src="/assets/app.js?v=20260511l"></script>
|
||
</body>
|
||
</html>
|