my_meeting/frontend/index.html

215 lines
9.5 KiB
HTML
Raw Normal View History

2026-05-09 03:23:57 +00:00
<!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>
2026-05-11 02:00:40 +00:00
<link rel="stylesheet" href="/assets/styles.css?v=20260511e">
2026-05-09 03:23:57 +00:00
<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-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">
2026-05-09 08:32:17 +00:00
<span>资源管理器</span>
2026-05-09 03:23:57 +00:00
<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">
2026-05-09 08:32:17 +00:00
<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>
2026-05-09 03:23:57 +00:00
</div>
2026-05-09 08:32:17 +00:00
<div class="toolbar">
<button class="btn primary sm" id="btn-process" disabled>总结</button>
2026-05-09 09:08:32 +00:00
<button class="btn sm" id="btn-toggle-result-edit" disabled>编辑</button>
2026-05-09 08:32:17 +00:00
</div>
2026-05-09 03:23:57 +00:00
</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>
2026-05-09 03:23:57 +00:00
</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>
2026-05-09 08:32:17 +00:00
<textarea id="result-editor" spellcheck="false"></textarea>
2026-05-09 03:23:57 +00:00
<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">
2026-05-11 02:00:40 +00:00
<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>
2026-05-09 09:08:32 +00:00
</div>
<div class="status-meta" id="editor-resource-label">当前资源:模板</div>
2026-05-09 09:08:32 +00:00
</div>
2026-05-09 03:23:57 +00:00
</div>
<div class="toolbar">
2026-05-09 09:36:05 +00:00
<label class="inline-label" for="tpl-select">模板</label>
2026-05-09 03:23:57 +00:00
<select class="btn sm" id="tpl-select"></select>
2026-05-09 09:08:32 +00:00
<button class="btn sm" id="btn-reparse-guide" disabled>解析</button>
<button class="btn sm" id="btn-toggle-side-edit" disabled>编辑</button>
2026-05-09 03:23:57 +00:00
</div>
</div>
<div class="panel-body panel-scroll" id="template-body">
2026-05-09 08:32:17 +00:00
<textarea id="side-editor" spellcheck="false"></textarea>
<article id="side-preview" class="md-content"></article>
<pre id="side-plain-preview"></pre>
2026-05-09 03:23:57 +00:00
</div>
</section>
</main>
</div>
2026-05-11 02:00:40 +00:00
<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">&#27169;&#26495;&#35828;&#26126;&#34917;&#20805;</div>
<div class="guide-inline-prompt-subtitle">&#21487;&#20026;&#31354;&#65307;&#20250;&#21644;&#31995;&#32479;&#35299;&#26512;&#27169;&#26495;&#19968;&#36215;&#29992;&#20110;&#37325;&#26032;&#35299;&#26512;</div>
<textarea id="reparse-guide-notes" class="guide-inline-textarea" spellcheck="false" placeholder="&#20363;&#22914;&#65306;&#24378;&#35843;&#21738;&#20123;&#32467;&#26500;&#24517;&#39035;&#20445;&#30041;&#12289;&#21738;&#20123;&#27573;&#33853;&#38656;&#35201;&#37325;&#28857;&#35299;&#37322;&#12289;&#21738;&#20123;&#25514;&#36766;&#38656;&#35201;&#36991;&#20813;"></textarea>
<div class="guide-inline-actions">
<button class="btn" id="btn-reparse-guide-cancel">&#21462;&#28040;</button>
<button class="btn primary" id="btn-reparse-guide-confirm">&#30830;&#35748;&#37325;&#35299;&#26512;</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>
2026-05-09 03:23:57 +00:00
<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-settings">
<div class="modal-box">
<h3>API 配置</h3>
<label class="form-field">
<span>Base URL</span>
<input type="text" id="cfg-url" placeholder="http://host:port/v1">
</label>
<label class="form-field">
<span>API Key</span>
<input type="text" id="cfg-key" placeholder="your-api-key">
</label>
<label class="form-field">
<span>Model Name</span>
<input type="text" id="cfg-model" placeholder="Qwen3.6-35B">
</label>
<div class="modal-actions">
<button class="btn" data-close="modal-settings">取消</button>
<button class="btn primary" id="btn-save-settings">保存</button>
</div>
</div>
</div>
<div class="toast" id="toast"></div>
2026-05-11 02:00:40 +00:00
<script type="module" src="/assets/app.js?v=20260511e"></script>
2026-05-09 03:23:57 +00:00
</body>
</html>