my_meeting/frontend/index.html

139 lines
5.2 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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">
<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>
<small id="selected-meeting-tip">未选择会议</small>
</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>
<small id="editor-resource-label">当前资源:模板</small>
</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-open-template">打开模板</button>
<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-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>