my_meeting/frontend/index.html

262 lines
13 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=20260511m">
<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>Agent test space</h1>
</div>
<div class="topbar-actions">
<button class="btn primary" id="btn-import">&#23548;&#20837;&#20250;&#35758;</button>
<button class="btn" id="btn-import-template">&#23548;&#20837;&#27169;&#26495;</button>
<button class="btn" id="btn-settings">&#35774;&#32622;</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>&#36164;&#28304;&#31649;&#29702;&#22120;</span>
<small id="sidebar-meeting-name">&#24403;&#21069;&#20250;&#35758;&#65306;&#26410;&#36873;&#25321;</small>
<small id="sidebar-meeting-meta">&#35831;&#20174;&#24038;&#20391;&#36873;&#25321;&#19968;&#20010;&#20250;&#35758;&#24320;&#22987;&#22788;&#29702;&#12290;</small>
</div>
<div class="header-badges">
<span class="badge muted" id="badge-summary">&#26410;&#29983;&#25104;&#24635;&#32467;</span>
<span class="badge muted" id="badge-topics">&#26410;&#29983;&#25104;&#20027;&#39064; 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>&#20250;&#35758;&#32467;&#26524;</span>
<div class="status-block">
<div class="status-row">
<span class="status-label">&#24403;&#21069;&#29366;&#24577;</span>
<span class="status-light idle" id="left-status-light"></span>
<span class="status-text" id="left-status-text">&#31354;&#38386;</span>
</div>
<div class="status-meta" id="selected-meeting-tip">&#26410;&#36873;&#25321;&#20250;&#35758;</div>
</div>
</div>
<div class="toolbar">
<button class="btn primary sm" id="btn-process" disabled>&#24635;&#32467;</button>
<button class="btn sm" id="btn-toggle-result-edit" disabled>&#32534;&#36753;</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>&#36873;&#25321;&#20250;&#35758;&#21518;&#21363;&#21487;&#26597;&#30475;&#32467;&#26524;&#65292;&#25110;&#30452;&#25509;&#24320;&#22987;&#24635;&#32467;&#12290;</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>&#32534;&#36753;&#21306;</span>
<div class="status-block">
<div class="status-row">
<span class="status-label">&#24403;&#21069;&#29366;&#24577;</span>
<span class="status-light idle" id="right-status-light"></span>
<span class="status-text" id="right-status-text">&#31354;&#38386;</span>
</div>
<div class="status-meta" id="editor-resource-label">&#24403;&#21069;&#36164;&#28304;&#65306;&#27169;&#26495;</div>
</div>
</div>
<div class="toolbar">
<label class="inline-label" for="tpl-select">&#27169;&#26495;</label>
<select class="btn sm" id="tpl-select"></select>
<button class="btn sm" id="btn-reparse-guide" disabled>&#35299;&#26512;</button>
<button class="btn sm" id="btn-toggle-side-edit" disabled>&#32534;&#36753;</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">&#27169;&#26495;&#20351;&#29992;&#35828;&#26126;</h3>
<p id="guide-modal-subtitle">&#30830;&#35748;&#21518;&#24320;&#22987;&#24635;&#32467;&#65292;&#21487;&#20808;&#34917;&#20805;&#19968;&#20123;&#20851;&#27880;&#35201;&#28857;</p>
</div>
<button class="icon-btn" id="btn-close-process-guide" aria-label="&#20851;&#38381;">&times;</button>
</div>
<div class="guide-modal-body">
<label class="form-field">
<span>&#27169;&#26495;&#35828;&#26126;</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>&#34917;&#20805;&#35828;&#26126;&#65288;&#21487;&#31354;&#65289;</span>
<textarea id="process-extra-notes" class="guide-notes" spellcheck="false" placeholder="&#20363;&#22914;&#65306;&#24378;&#35843;&#21738;&#20123;&#32467;&#26500;&#35201;&#20445;&#30041;&#12289;&#21738;&#20123;&#20869;&#23481;&#35201;&#37325;&#28857;&#35299;&#37322;&#12289;&#21738;&#20123;&#25514;&#36766;&#38656;&#35201;&#36991;&#20813;"></textarea>
</label>
</div>
<div class="modal-actions">
<button class="btn" id="btn-process-guide-edit">&#32534;&#36753;</button>
<button class="btn" id="btn-process-guide-reparse">&#37325;&#35299;&#26512;</button>
<button class="btn primary" id="btn-process-guide-confirm">&#30830;&#35748;</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">&#27169;&#26495;&#20351;&#29992;&#35828;&#26126;&#34917;&#20805;</h3>
<p id="reparse-modal-subtitle">&#29992;&#20110;&#22266;&#23450;&#27169;&#26495;&#20351;&#29992;&#35268;&#26684;&#65292;&#20248;&#21270;&#26368;&#32456;&#36755;&#20986;&#32467;&#26524;&#65288;&#21487;&#19981;&#22635;&#20889;&#65289;</p>
</div>
<button class="icon-btn" id="btn-close-reparse-guide" aria-label="&#20851;&#38381;">&times;</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="&#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>
<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">&#27491;&#22312;&#37325;&#26032;&#35299;&#26512;&#27169;&#26495;&#35828;&#26126;...</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">&#21462;&#28040;</button>
<button class="btn primary" id="btn-reparse-modal-confirm">&#30830;&#35748;&#35299;&#26512;</button>
</div>
</div>
</div>
<div class="modal-mask" id="modal-import">
<div class="modal-box">
<h3>&#23548;&#20837;&#20250;&#35758;&#36716;&#24405;</h3>
<label class="form-field">
<span>&#20250;&#35758;&#21517;&#31216;</span>
<input type="text" id="import-name" placeholder="&#20363;&#22914;&#65306;2026-05-08 &#21608;&#20363;&#20250;">
</label>
<label class="form-field">
<span>&#36716;&#24405;&#25991;&#20214;&#65288;.txt / .md&#65289;</span>
<input type="file" id="import-file" accept=".txt,.md">
</label>
<div class="modal-actions">
<button class="btn" data-close="modal-import">&#21462;&#28040;</button>
<button class="btn primary" id="btn-confirm-import">&#23548;&#20837;</button>
</div>
</div>
</div>
<div class="modal-mask" id="modal-import-template">
<div class="modal-box">
<h3>&#23548;&#20837;&#27169;&#26495;</h3>
<label class="form-field">
<span>&#27169;&#26495;&#21517;&#31216;</span>
<input type="text" id="import-template-name" placeholder="&#20363;&#22914;&#65306;template3.md">
</label>
<label class="form-field">
<span>&#27169;&#26495;&#25991;&#20214;&#65288;.md&#65289;</span>
<input type="file" id="import-template-file" accept=".md">
</label>
<div class="modal-actions">
<button class="btn" data-close="modal-import-template">&#21462;&#28040;</button>
<button class="btn primary" id="btn-confirm-import-template">&#23548;&#20837;</button>
</div>
</div>
</div>
<div class="modal-mask" id="modal-settings">
<div class="modal-box">
<h3>API &#37197;&#32622;</h3>
<label class="form-field">
<span>&#24403;&#21069;&#27169;&#22411;</span>
<input type="text" id="cfg-current-model" readonly>
</label>
<label class="form-field">
<span>&#27169;&#22411;&#21015;&#34920;</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">&#26032;&#22686;&#27169;&#22411;</button>
<button class="btn" id="btn-save-settings">&#20445;&#23384;&#24403;&#21069;</button>
<button class="btn" id="btn-key-delete">&#21024;&#38500;&#27169;&#22411;</button>
<button class="btn" data-close="modal-settings">&#21462;&#28040;</button>
</div>
</div>
</div>
<div class="modal-mask" id="modal-add-model">
<div class="modal-box">
<h3>&#26032;&#22686;&#27169;&#22411;</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">&#21462;&#28040;</button>
<button class="btn primary" id="btn-confirm-add-model">&#20445;&#23384;</button>
</div>
</div>
</div>
<div class="toast" id="toast"></div>
<script type="module" src="/assets/app.js?v=20260511m"></script>
</body>
</html>