JOJO
171833e4d1
- 四窗口固定顺序占位布局，空时收起到 0 宽；动画区分「运行中新出现」与「切换/加载」 - 文件记录：edit/write 埋点写入对话 metadata.edited_files，预览走既有 /api/file/content - 详情面板：lastDetail/lastStatus 快照、首次填充静态+瞬间到底、终态四色分类 - 数据通道全部走 REST 轮询（带 conversation_id 对话级隔离），含 demo 与设计文档
147 lines
6.9 KiB
HTML
147 lines
6.9 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>悬浮窗口栈 Demo · 待办 / 子智能体 / 后台指令</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="runner.css">
|
||
<link rel="stylesheet" href="file.css">
|
||
</head>
|
||
<body>
|
||
|
||
<!-- 模拟对话显示区域 -->
|
||
<main class="mock-chat">
|
||
<div class="mock-bubble mock-bubble--user">把待办、子智能体、后台指令都做成右上角的悬浮窗口</div>
|
||
<div class="mock-bubble mock-bubble--ai">好的，三个窗口上下排布在对话区右上角。子智能体和后台指令会持续产生输出，点击条目可以在左侧展开详情面板。</div>
|
||
<div class="mock-bubble mock-bubble--ai">条目左侧的 ⋯ 可以展开菜单（强制关闭）；运行中的条目状态点会呼吸，完成后变灰。</div>
|
||
</main>
|
||
|
||
<!-- 右上角悬浮窗口栈 -->
|
||
<div class="float-stack">
|
||
|
||
<!-- 待办事项 -->
|
||
<section class="float-window todo-window" id="todoWindow" hidden>
|
||
<header class="float-window__header">
|
||
<svg class="float-window__icon" viewBox="0 0 16 16" fill="none">
|
||
<path d="M2 4.5 3.5 6 6 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M8.5 5H14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||
<path d="M2 11 3.5 12.5 6 10" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M8.5 11.5H14" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||
</svg>
|
||
<span class="float-window__title">待办事项</span>
|
||
<span class="todo-counter" id="todoCounter">0/0</span>
|
||
</header>
|
||
<ul class="todo-list" id="todoList"></ul>
|
||
</section>
|
||
|
||
<!-- 子智能体 -->
|
||
<section class="float-window run-window" id="agentWindow" hidden>
|
||
<header class="float-window__header">
|
||
<svg class="float-window__icon" viewBox="0 0 16 16" fill="none">
|
||
<circle cx="8" cy="5.5" r="2.5" stroke="currentColor" stroke-width="1.4"/>
|
||
<path d="M3 13c.7-2.6 2.7-4 5-4s4.3 1.4 5 4" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||
</svg>
|
||
<span class="float-window__title">子智能体</span>
|
||
<span class="todo-counter" id="agentCounter">0/0</span>
|
||
</header>
|
||
<ul class="run-list" id="agentList"></ul>
|
||
</section>
|
||
|
||
<!-- 后台指令 -->
|
||
<section class="float-window run-window" id="cmdWindow" hidden>
|
||
<header class="float-window__header">
|
||
<svg class="float-window__icon" viewBox="0 0 16 16" fill="none">
|
||
<path d="M2.5 4.5 6 8l-3.5 3.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"/>
|
||
<path d="M8 12h5.5" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||
</svg>
|
||
<span class="float-window__title">后台指令</span>
|
||
<span class="todo-counter" id="cmdCounter">0/0</span>
|
||
</header>
|
||
<ul class="run-list" id="cmdList"></ul>
|
||
</section>
|
||
|
||
<!-- 文件记录 -->
|
||
<section class="float-window" id="fileWindow" hidden>
|
||
<header class="float-window__header">
|
||
<svg class="float-window__icon" viewBox="0 0 16 16" fill="none">
|
||
<path d="M4 2.5h5.5L12 5v8.5H4V2.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
||
<path d="M9.5 2.5V5H12" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span class="float-window__title">文件</span>
|
||
<span class="todo-counter" id="fileCounter">0</span>
|
||
</header>
|
||
<ul class="run-list" id="fileList"></ul>
|
||
</section>
|
||
</div>
|
||
|
||
<!-- 详情面板（悬浮窗左侧展开） -->
|
||
<section class="detail-panel" id="detailPanel" hidden>
|
||
<header class="detail-header">
|
||
<span class="detail-status-dot" id="detailDot"></span>
|
||
<span class="detail-title" id="detailTitle">—</span>
|
||
<span class="detail-badge" id="detailBadge">运行中</span>
|
||
<button class="detail-close" id="detailClose" title="关闭">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
<div class="detail-body" id="detailBody"></div>
|
||
</section>
|
||
|
||
<!-- 条目 ⋯ 菜单（子智能体/后台指令，全局单例） -->
|
||
<div class="item-menu" id="itemMenu" hidden>
|
||
<button class="menu-item menu-item--danger" id="menuKill">强制关闭</button>
|
||
</div>
|
||
|
||
<!-- 文件 ⋯ 菜单（全局单例） -->
|
||
<div class="item-menu file-menu" id="fileMenu" hidden>
|
||
<button class="menu-item" id="menuDownload">下载</button>
|
||
<button class="menu-item" id="menuReveal">在文件管理器中打开</button>
|
||
<button class="menu-item" id="menuCopyPath">复制路径</button>
|
||
</div>
|
||
|
||
<!-- 文件预览侧边栏（右侧滑入） -->
|
||
<section class="file-preview" id="filePreview">
|
||
<header class="preview-header">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<path d="M4 2.5h5.5L12 5v8.5H4V2.5z" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
||
<path d="M9.5 2.5V5H12" stroke="currentColor" stroke-width="1.3" stroke-linejoin="round"/>
|
||
</svg>
|
||
<span class="preview-name" id="previewName">—</span>
|
||
<span class="preview-path" id="previewPath"></span>
|
||
<button class="preview-close" id="previewClose" title="关闭">
|
||
<svg viewBox="0 0 16 16" fill="none">
|
||
<path d="M4 4l8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/>
|
||
</svg>
|
||
</button>
|
||
</header>
|
||
<div class="preview-body" id="previewBody"></div>
|
||
</section>
|
||
|
||
<!-- demo toast -->
|
||
<div class="demo-toast" id="demoToast"></div>
|
||
|
||
<!-- demo 控制台 -->
|
||
<div class="demo-panel">
|
||
<p class="demo-panel__hint">悬浮窗口栈 · 动画演示</p>
|
||
<div class="demo-panel__buttons">
|
||
<button class="demo-btn demo-btn--primary" id="btnCreate">创建待办（进入动画）</button>
|
||
<button class="demo-btn" id="btnComplete">完成下一项（划线动画）</button>
|
||
<button class="demo-btn" id="btnUpdate">收到新待办（替换动画）</button>
|
||
<button class="demo-btn" id="btnLong">长列表（8 条 · 滚动）</button>
|
||
<button class="demo-btn demo-btn--ghost" id="btnClear">清空</button>
|
||
<div class="demo-divider"></div>
|
||
<button class="demo-btn demo-btn--primary" id="btnNewAgent">＋ 新子智能体</button>
|
||
<button class="demo-btn demo-btn--primary" id="btnNewCmd">＋ 新后台指令</button>
|
||
<button class="demo-btn demo-btn--primary" id="btnEditFile">✎ 模拟编辑文件</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="app.js"></script>
|
||
<script src="runner.js"></script>
|
||
<script src="file.js"></script>
|
||
</body>
|
||
</html>
|