# MicroApps Console Demo — 设计 Spec - **日期**：2026-05-09 - **作者**：Nancy + Claude（plan owner） - **状态**：Draft，待 user review - **产物**：单 HTML 文件 demo，给 PM 看效果用 --- ## 1. 目标 把 Figma 文件 `Micro-Apps-20250923` 中的两张设计稿——**MicroApps · Master Console** 与 **MicroApps · My Sessions**——实现成**一个可交互的单 HTML 文件 demo**，供 PM 直接打开查看效果，无需 build / install / 部署。 ### Figma 真源 - 文件：[Micro-Apps-20250923](https://www.figma.com/design/DtZcMkhNy6qh6jbQQnhreQ/Micro-Apps-20250923?node-id=2956-4544) - Master Console：1920 variant `3278:1835` / 1440 variant `3289:2530` - My Sessions：1920 variant `3289:2726` / 1440 variant `3289:2922` - 默认参考 1440 variant 实现，1920 用于扩展端验证 --- ## 2. 范围（Scope） ### In scope - 两张页面（Master Console、My Sessions）的视觉与交互实现 - 顶部导航 + 筛选栏 + 可折叠 App 卡片 + Sessions 表格 - 状态管理的轻交互（搜索/状态过滤/排序/折叠 真实生效） - Clone session、URL inline 编辑、Stop 确认弹窗、Open 新 tab 4 项真实操作 - 1200–2400px 流式响应 - Dark theme，按 Figma 1:1 - Mock 数据：Figma 已展开的 4 个 App 用真数据 + 另 4 个 App 补合理 mock 行 - 持久化范围：折叠状态用 sessionStorage（刷新保持），其他不持久化 ### Out of scope - 测试（Demo 性质） - 无障碍审计 / WCAG 校对 - 真实后端 / API 接入 / 鉴权 - Light theme（Figma 设计稿是 dark only） - 多语言 / i18n - vue-router / Pinia / build 工具链 --- ## 3. 架构决策 | 决策项 | 选定方案 | 理由 | |---|---|---| | 产物形态 | **单 HTML 文件** | PM 双击打开，可直接上传分享 | | 框架 | Vue 3 via CDN（`vue.global.prod.js`） | 状态管理简单；无 build；~33KB gzip | | 路由 | hash 路由（`#/master-console`、`#/my-sessions`），自实现 | 不增加 vue-router 依赖；URL 可分享 | | 状态 | Vue `ref` / `computed`，inline | 2 页 demo 不需要 Pinia | | tvu-design-system 依赖 | **不依赖** | 单 HTML 文件不能消费 npm 包；视觉/token 参 Figma 真源 | | 构建工具 | **无** | 直接写 HTML/CSS/JS | | 类型系统 | **无 TS**（纯 JS） | 单文件浏览器直跑 | --- ## 4. 文件结构 ``` /Users/nancy/Documents/AICoding/VS_Code/MicroApps Console/ ├── docs/ │ └── 2026-05-09-design.md # 本文档 ├── microapps-console-demo.html # 唯一交付物，自包含 └── (可选) assets/ └── open-placeholder.png # 后续用户提供 demo 图替换 ``` 预估 HTML 体量：~1500–2500 行（含内联 CSS 与 mock 数据）。 --- ## 5. 数据模型 ### 5.1 App ```js // JS 对象（JSDoc 类型注释） /** * @typedef {Object} App * @property {string} id - kebab-case 唯一键，如 'av-sync' * @property {string} name - 展示名，如 'AV Sync' * @property {string} iconColor - Figma 每 App 头部彩色圆形图标的 hex 色值 * @property {string|null} tag - 可选 App 级标签（如 "+ Cluster"），未在 Figma * 完全确认前用 null；implementation 阶段从 * Figma get_design_context 取真值 */ ``` ### 5.2 Session ```js /** * @typedef {'on-air' | 'preview' | 'analyzing' | 'inactive'} SessionStatus * @typedef {'healthy' | 'warning' | 'error'} SessionHealth * * @typedef {Object} Session * @property {string} id - 唯一 ID * @property {string} appId - 归属 App * @property {string} objectId - 长 UUID，UI 截断显示 * @property {string} source - 创建人/源（如 '@john.doe'） * @property {string} eventName - 事件名 * @property {string} inputUrl - 输入流 URL（可 inline 编辑） * @property {SessionStatus} status - 状态 * @property {SessionHealth} health - 健康度 * @property {number|null} startedAt - Unix ms；status === 'inactive' 时为 null * @property {string|null} errorMessage - health === 'error' 时填充，tooltip 显示 */ ``` ### 5.3 派生数据 - `activeDuration = now - startedAt`（仅 status ≠ 'inactive' 时显示，格式 `02:14:32`） - `visibleApps = applyFilters(APPS, FILTERS)`（搜索 + 状态过滤 + 排序） - `expandedApps = Set`（持久化到 sessionStorage） ### 5.4 全局 Filter ```js { search: '', // 文本输入 activeOnly: 'all' | 'active' | 'inactive', // 仅 Master Console statuses: { 'on-air': true, preview: true, analyzing: true, inactive: true }, sort: 'app-az' | 'updated-desc' | 'sessions-desc', } ``` 切换 Master Console / My Sessions 时 filter state **保留**（除 `activeOnly` 仅 Master Console 可见）。 ### 5.5 Mock 数据 - Figma 已展开的 4 个 App（AV Sync / Color Correction / Media Analyzer / Test Pattern Generator）→ Object ID / Source / Event Name / Input URL / Status / health 1:1 抠 Figma - 未展开的 4 个 App（Audio Remapping / Graphics Insertion / SCTE Insertion / Standard Conversion）→ 每个补 2-3 行同风格 mock，覆盖至少 2 种 status + 至少 1 个 error health --- ## 6. 组件分解 10 个 Vue inline 组件，全部定义在同一 `