my_meeting/frontend/index.html

152 lines
5.8 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>
<link rel="stylesheet" href="/assets/styles.css">
<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-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="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 08:32:17 +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>
<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>
<script type="module" src="/assets/app.js"></script>
</body>
</html>