VOZEB-COMPONENT-INVENTORY-01 — 原始组件资产与可复用构建清单
Task ID: VOZEB-COMPONENT-INVENTORY-01
目标用户结果: 在开始页面改造前，拥有一份覆盖 VOZEB-PRO 原始组件的可复用组件地图和可视化实验室
原始基线: VOZEB-PRO v0.0.6 / upstream 4de8360
Foundation 包基线: codex/oceanway-bootstrap / d0037e9
候选提交: 本文件所在 commit（最终 SHA/tree 见交接报告）
范围: 只读盘点、共享 UI 基础层、组件 manifest、/components 展示
非目标: 页面整体迁移、后端契约/数据模型、真实生成与计费、部署发布本候选包从完整基线 SHA d0037e99bbbec29f59e320d5ee6ba3fc8daeb6fe 以显式白名单
拆分；包含本文件的 commit 即可复现该组件候选。Foundation R1 在此基础上新增四个
反馈/设置原子（Notice、Tooltip、Switch、Checkbox）；组件候选 R2 又补充了通用 range、
segmented、pagination 与四个偏好字段；R3 进一步固化 Prompt/Media 的低层 view-model
表面（PromptCard、PromptDetail、MediaBrowser）。Manifest 当前共 245 项：built 99、
candidate 41、domain 94、controller 9、legacy 2、planned 0。其中 React Bits
登记 27 项（extract 15、reference 12、direct 0）；这些条目均通过 OceanWay
适配层承载固定快照，不把上游示例直接作为业务运行时依赖。
1. 结论先行
VOZEB-PRO 并没有独立的 packages/ui 或 Storybook。它的复用资产分散在
web/src/components、web/src/app/**/components、Ant Design 配置和多份全局 CSS 中。
因此本阶段采用“原代码保留 + 轻量适配层”的方式：
- 不复制一套新的 Button、Modal、Table 或 WebGL。复杂控件继续使用项目已有的 Ant Design， 下拉菜单继续使用原有 Radix Select。
- 纯表现和跨页面控件进入
web/src/components/ui；Ocean/React Bits 材质与动效进入web/src/components/ocean。 - Agent、作品、提示词、后台、Canvas 和 Drama 的状态机仍留在业务域；共享层只接 serializable view props 和 callbacks。
- 所有原始共享组件（94 个运行时
.tsx，另有 6 个组件测试）以及页面域下的 62 个app/**/components组件都登记在component-manifest.ts，组件实验室 对“已固化、可提取、业务域、控制器、遗留、规划中”逐项展示。未构建的组件不会从清单中 消失，而是以待构建卡片呈现。 - React Bits 只按组件级源码复用：当前使用 GlassSurface、MoltenMetal、Spotlight、 Tilt、Magnetic、AnimatedContent/Reveal、ShinyText、AnimatedList、GlareHover、 CountUp、GradientText、GradualBlur、LogoLoop、PixelSwap、RotatingText、ScrollExpand 的轻量适配；保留许可证和来源，不引入 整个站点运行时，也不为每张卡创建 WebGL。
- 组件库同时支持 Ocean Air 浅色与 Abyss 深色模式。两套模式共享同一语义角色，桌面端 通过现有左侧栏切换，移动端通过紧凑工具区切换；组件不得在 JSX/CSS 中写死另一套颜色。
2. 原始资产统计
| 来源/目录 | 运行时组件 | 主要职责 | 当前处理 |
|---|---|---|---|
components/admin | 48 | 后台分区、设置、渠道、用户、财务 | 领域组件保留；Panel/Metric/Status/Field 抽取 |
components/agent | 5 | Markdown、媒体、消息动作、生成控件 | 视觉可复用；编排留业务域 |
components/layout | 11 | 壳层、侧栏、Logo、通知、账户 | 先保留行为，提取 props 化壳层 |
components/works | 10 | 作品卡片、预览、社区动作、瀑布流 | 提取 Work view model |
components/prompts | 3 | 提示词卡片、详情、选择器 | 提取 Prompt view model；R3 已固化低层卡片/详情 |
components/billing | 2 | 套餐卡片与选择弹层 | 提取 Product view model |
| 根级生成/媒体/空态 | 7 | 模型、生成偏好、媒体、空态 | 控件抽取；服务和归一化留业务 |
auth / profile / my-prompts / media | 5 | 身份、头像、页面容器、懒加载 | 视觉壳复用，数据策略留业务 |
components/ui | 3 | Select、主题切换、文字 reveal | 直接保留并纳入共享入口 |
| 共享组件合计 | 94 | 另有 6 个组件测试文件 |
admin/admin-retail-migration-section.tsx 是 OceanWay 在引导迁移阶段新增的扩展，不计入
VOZEB-PRO 原始 94 个；layout/ocean-particle-background.tsx 是兼容导出。两者都在 manifest
中显式登记，但分别标记为 OceanWay domain extension 和 legacy compatibility。
另外，原始 web/src/app/**/components 还有 62 个页面域组件：Canvas 36、Create 13、
Admin 11、Drama 1、Works 1。它们也进入 manifest 和实验室，但统一标记为
domain，因为它们携带画布几何、生成编排、短剧状态机或后台权限语义，不能直接搬到无业务
的 ui 层。
原始组件的测试文件不作为运行时组件搬运，但继续作为行为 Oracle：
admin-section-nav.test.tsx、admin-user-identity.test.tsx、agent-markdown.test.tsx、
agent-message-controls.test.tsx、billing-plan-grid.test.tsx、site-logo.test.tsx。
3. 复用分层
L0 — Token、材质和运行时边界
global-ocean-air-theme.css、global-liquid-glass.css：颜色角色、透明度、hairline、 focus、阴影和减少透明度回退的单一来源。OceanGlassSurface：React Bits GlassSurface 的适配器；一层材质只产生一条边界。OceanGlassCard：静态卡片/面板，不创建 WebGL。OceanAmbientBackground：首页唯一动态背景；MoltenMetal仅在组件实验室中展示复杂 React Bits 背景。页面级 WebGL context loss 会切换到 CSS fallback，并在同一挂载周期内 禁止重复创建 renderer。
L1 — 共享原子组件（本阶段已构建）
入口为 web/src/components/ui/index.ts：
Button、IconButton、Input、Textarea、Field、Badge、StatusDot、
StatusBadge、OceanNotice、OceanTooltip、OceanSwitch、OceanCheckbox、
OceanRangeField、OceanSegmentedControl、OceanPagination、OceanVideoQualityField、
OceanSuggestedPositiveIntegerField、OceanPositiveNumberField、OceanSwitchPreference、Tabs、
Progress、Skeleton、LoadingState、EmptyState、
MediaFrame、Avatar、Section、SectionHeader、Surface/GlassSurface，以及原有
Select、DiaTextReveal、AnimatedThemeToggler。
这些组件只负责 DOM 语义、状态、焦点和布局槽位，不请求 API、不读取 store、不决定模型或
积分。CompactEmptyState 作为兼容名称委托给共享 EmptyState，现有页面无需一次性改名。
L2 — 可提取的产品复合组件（清单已登记，页面改造前逐个固化）
| 组件 kit | 原始来源 | 解耦规则 |
|---|---|---|
| Workspace Kit | layout/app-workspace-shell、app-sidebar、mobile-nav-drawer、site-logo、user-status-actions、通知/版本弹层 | 注入导航项、账户摘要、健康状态和动作；不把 session/API 放进 UI |
| Agent Kit | agent/*、creative-agent-controls、compact-agent-generation-settings、model-picker | 统一 AgentComposerCore；能力、模型、附件、run 状态用 view model 注入 |
| Generation Kit | creative-generation-preferences、*-settings-panel、creative-generation-preference-fields | capability schema 驱动；normalize 和真实任务调用留页面 |
| Media Kit | lazy-media-image、agent-media-preview、作品媒体浏览器 | OceanMediaBrowser 只接显式 kind、source/poster/thumbnail 和 active 回调；归属/签名 URL 留 adapter |
| Prompt Kit | prompt-card、prompt-detail-dialog、prompt-select-dialog、my-prompts | OceanPromptCard/Detail 只接 Prompt view model；Modal、剪贴板、保存和 onSelect 留 adapter |
| Work Kit | public-work-*、responsive-masonry-grid | 只接 Work/Creator view model；like/report/follow 为回调 |
| Admin Kit | admin-panel、settings controls、identity、status、media tabs | 数据表、Drawer、Form 继续用 Ant Design；Panel/Metric/状态壳统一 |
| Auth / Install Kit | auth-form、install wizard、database config builder | 字段、注册门禁、验证码/MFA、步骤、状态和动作槽位进入 Ocean；Session、数据库检查和安装写入留 adapter |
Ocean MediaFrame 已将 MediaSource 的类型契约具体化为显式 image、video、audio 和
document 分支；Asset、Work、Drama、Canvas 候选直接复用该渲染边界，不根据 URL 猜测
类型。跨页 AssetPicker 通过 selectedItems 补齐离开当前页的已选对象，ID 列表仍由页面
adapter 作为选择事实维护。
L3 — 业务域组件（不下沉）
Create 的 Agent 编排、Canvas 节点/相机/工具栏、Drama 场景和镜头编辑器、Admin 分区控制器、
身份 hydration、stores 和 API hooks 都保留在所属页面。它们可以消费 L1/L2，但不能反向让
共享 UI 依赖 use-* store、计费、权限或上游 DTO。
R3 — Prompt / Media 低层候选（本轮已固化）
本轮只把三个可在多个页面复用、且不拥有业务副作用的表面登记为 built 候选：
OceanPromptCard：OceanPromptCardItem只包含 id、标题、正文、封面、分类、标签和已格式化时间； body 使用键盘可操作的role="button"，预览、打开和插入等动作通过独立回调注入，避免嵌套 interactive control。OceanPromptDetail：OceanPromptDetailItem在卡片 view model 上增加来源和创建时间；它是 可嵌入的 detail surface，不拥有 Modal 生命周期、剪贴板、收藏/保存或持久化。OceanMediaBrowser：媒体条目显式声明image、video、audio或document，支持受控或 非受控 active selection、键盘 roving focus、poster/thumbnail 与 loading/empty/error 状态； 不依据 URL 猜类型，不启动视频缩略图，也不负责签名 URL、下载或归属检查。
三个组件共用 Ocean semantic tokens、单边界玻璃约束和 React Bits 的局部
GlareHover / Reveal / AnimatedList 适配；prefers-reduced-motion、
prefers-reduced-transparency 和 forced-colors 下均保留可读静态内容。组件实验室用合成
view model 展示卡片、详情和多模态轨道，并以 no-op callbacks 验证不会触发真实请求。
4. VOZEB-PRO 运行时组件逐项地图
下面的清单与 manifest 一一对应。状态含义：
- built：当前已有可直接复用的实现或本阶段已固化的共享入口；在本 Foundation v1 候选中表示“视觉实现已存在”，不等于目标页面已迁移或 Gate 1 已通过；
- candidate：保留原实现的视觉/交互细节，需先做 props/view-model 解耦；
- domain：应在业务域复用，不能直接放进共享 UI；
- controller：控制器、hydrator 或副作用，不是视觉组件；
- legacy：无现行消费者，仅作原型对照；
- planned：由多个原始组件合并出的后继 kit，尚未形成视觉候选；当前 manifest 已无 planned 项，后续新增 kit 仍须先经过该状态。
Admin（48 个原始 + 1 个 OceanWay 扩展）
admin-account-deletion-section、admin-billing-sections、admin-cdk-section、
admin-channel-protocol-setup、admin-commerce-conversion-panel、
admin-configuration-sections、admin-content-sections、admin-dashboard-elements、
admin-dashboard、admin-data-backup、admin-data-lifecycle-settings、
admin-external-storage、admin-generation-log、admin-generation-operations-section、
admin-generation-settings、admin-help-section、admin-local-media-storage、
admin-logical-model-manager、admin-logs-section、admin-marketing-sections、
admin-media-type-tabs、admin-overview、admin-panel、admin-points-section、
admin-quota-rules、admin-retail-migration-section、admin-return-button、admin-section-nav、
admin-settings-controls、admin-site-preview、admin-system-channel-editor、
admin-system-sections、admin-update-center、admin-upstream-sections、
admin-user-editor-modal、admin-user-identity、admin-users-section、
admin-wallet-section、agent-skill-create-modal、admin-channel-detail-drawer、
admin-channel-onboarding-drawer、admin-channel-status-badge、admin-channel-workspace、
以及 6 个 use-admin-dashboard-* 控制器。
可直接复用的是 Panel、PanelHeader、Metric、设置控件、身份单元、媒体类型 tabs 和
状态 badge；用户、渠道、账务、备份、权限和保存逻辑留 Admin 域。
Agent / Generation（10）
agent-markdown、agent-media-preview、agent-message-actions、
compact-agent-generation-settings、creative-agent-controls、
audio-settings-panel、creative-generation-preference-fields、
creative-generation-preferences、image-settings-panel、video-settings-panel。
Markdown、媒体预览、消息动作和字段控件可作为共享视觉；模型目录、能力限制、seedance/
音频归一化、运行与扣费保持页面适配器。video-settings-panel 当前无消费者，标记为
legacy/candidate，不在改造前直接接入。
Layout / Auth（13）
announcement-notification-center、app-providers、app-sidebar、app-workspace-shell、
client-root-init、github-link、mobile-nav-drawer、site-announcement-popup、
site-logo、user-status-actions、version-release-modal、auth-form、
auth-user-hydrator。
Logo、侧栏视觉、通知行、版本弹层和表单字段可提取；providers、hydrator、登录策略和 会话状态是基础设施，不进入组件库。
Works / Prompts / Billing（16）
Works：public-creator-modal、public-creator-profile、public-work-card-title、
public-work-community-actions、public-work-gallery-card、public-work-like-button、
public-work-media-browser、public-work-preview-modal、public-work-report-button、
responsive-masonry-grid。
Prompts：prompt-card、prompt-detail-dialog、prompt-select-dialog、
my-prompts-page。Billing：billing-plan-grid、billing-plans-modal。
这些组件的布局和展示细节可复用，但 API、社区权限、支付状态、查询和分页不能下沉。
Media / Root UI（12，包括媒体、根级与 3 个原始 UI 组件）
lazy-media-image、compact-empty-state、model-picker、profile-avatar-uploader、
audio-settings-panel、creative-generation-preference-fields、creative-generation-preferences、
image-settings-panel、video-settings-panel，以及原始 ui/select、ui/dia-text-reveal、
ui/animated-theme-toggler。
懒加载、空态、选择器和主题动效已经进入共享层或有兼容入口；模型选项、上传签名和用户 资料仍由业务 adapter 提供。
R3 的 OceanPromptCard、OceanPromptDetail 与 OceanMediaBrowser 位于 Ocean patterns
入口，不替换上述原始页面组件；它们是后续页面迁移可以选择的低层候选，原始
prompt-detail-dialog、prompt-select-dialog 和 public-work-media-browser 仍保留在
inventory 中，直到各自的业务 adapter 与页面验收任务明确。
5. React Bits 复用边界
| React Bits 能力 | OceanWay 入口 | 用法 |
|---|---|---|
| GlassSurface | OceanGlassSurface | 主 Agent/少量焦点表面；SVG filter 不可用时 CSS fallback |
| MoltenMetal | MoltenMetal | /components 背景实验；单实例、动态 import OGL |
| SoftAurora/背景模式 | OceanAmbientBackground | 首页唯一背景，页面隐藏或 reduced motion 时暂停 |
| SpotlightCard | OceanSpotlight | 小范围 pointer CSS 变量，不给每张列表卡挂渲染器 |
| TiltedCard / Magnet | OceanTilt / OceanMagnetic | 媒体卡和小型动作，低幅度、可关闭 |
| AnimatedContent | OceanReveal | 视口进入动效；减少动效时直接显示内容 |
| ShinyText | OceanShinyText | 仅短标签/实验室标题，正文保持中性色 |
| AnimatedList / GlareHover | OceanAnimatedList / OceanGlareHover | 局部短列表与媒体 sheen；不创建 renderer |
| CountUp / RotatingText | OceanCountUp / OceanRotatingText | 非账务摘要与短副文案；始终保留静态可读值 |
| GradientText / GradualBlur | OceanGradientText / OceanGradualBlur | token 绑定 eyebrow 与滚动边缘 veil |
| LogoLoop / PixelSwap / ScrollExpand | OceanLogoLoop / OceanPixelSwap / OceanScrollExpand | 品牌条、非交互媒体和详情图；CSS 优先 |
来源、版本和 MIT + Commons Clause 条款见 web/THIRD_PARTY_NOTICES.md。
不把 React Bits 当作业务状态库，也不把其示例页复制成产品页面。
6. 组件实验室覆盖规则
/components 是本阶段唯一的组件审查入口：
- Foundation 区展示 Button、IconButton、Input、Textarea、Field、Badge、Status、Notice、 Tooltip、Switch、Checkbox、Range、Segmented、Pagination 与生成偏好字段、Tabs、 Progress、Skeleton、Loading、Empty、MediaFrame、Avatar、Surface 的 default/disabled/ loading/error 等状态。
- Ocean 区展示材质四参数、React Bits MoltenMetal 动态背景、GlassSurface、Agent
Composer，以及 Spotlight、Tilt、Magnetic、Reveal、ShinyText、BlurText、DiaTextReveal、ClickSpark、
GlareHover、AnimatedList、CountUp、GradientText、GradualBlur、LogoLoop、PixelSwap、
RotatingText、ScrollExpand 等轻量动效适配。组件实验室提供重播入口，便于检查 mount-time
动效；
OceanAmbientBackground是页面级唯一 背景源，不在此处与 MoltenMetal 并挂；SlicedWaves仅保留研究候选 metadata。 - VOZEB inventory 区展示原始 94 个共享运行时组件、1 个 OceanWay 迁移扩展、1 个兼容遗留项、62 个页面域组件及 12 个后继 kit。每张卡标出来源路径、
readiness 和复用策略；
candidate/domain/controller/legacy/planned均视为“未构建或待 适配”，不得隐藏。AssetPicker、PromptBrowser、WorkGallery、AdminTable/DetailDrawer、CanvasKit 和 DramaKit、AuthKit、InstallWizardKit 已有真实的 view-model-only 预览（含 loading/refreshing/empty/error/forbidden、提交/锁定/步骤阻断、选择/预览、移动端和局部动效）；PromptCard、PromptDetail、MediaBrowser 在 Prompt / Media 面板中提供真实的 view-model-only 预览；其余条目仍提供按 layer/readiness 生成的 非业务契约预览骨架，只表达 slots、状态线和副作用边界，不伪造业务实例。 - 展示页只使用合成数据和 no-op callbacks，不触发真实模型调用、上传、扣费或持久化。
- 动效统一遵守
prefers-reduced-motion、prefers-reduced-transparency、页面隐藏暂停和 无 WebGL 回退；列表本身不挂独立 WebGL。
7. 开始页面改造前的完成定义
- 原始基线、许可证、依赖和 94 个运行时组件已登记；OceanWay 迁移扩展与 OceanParticleBackground 兼容导出单独标注。
- 共享 L1 原子组件有统一入口和状态属性。
- React Bits/Ocean 动效有单一入口和性能边界。
- 未构建组件在
/components有可见清单卡片。 - Agent Conversation、Generation Settings、Asset/Prompt/Work Browser、Admin Kit 完成 props/view-model 固化并有实际预览；上传、查询、权限和写操作仍由页面 adapter 接管。
- Canvas/Drama domain kit 完成视觉状态矩阵和合成数据预览；几何、任务、审阅、生成和 持久化状态仍留在对应业务域。
- Auth/Install kit 完成字段、注册门禁、邮箱验证码/MFA、步骤和安全状态的 view-model-only 预览；InstallWizardKit 的令牌输入只保存在组件客户端内存并通过回调上交；Session、数据库 检查、管理员创建和安装写入仍留在页面 adapter。
- Foundation smoke E2E 已覆盖首页、组件实验室、桌面主题切换、390/430 移动端导航和 Reduced Motion/WebGL fallback（本地系统 Chrome：12 total，10 passed / 2 skipped，含 setup）；这只是候选 运行证据，不替代用户视觉确认或正式 Testing。
- 以上 kit 在目标路由逐页替换，且通过页面、响应式和键盘回归。
本清单完成后，下一项工作应是按页面切片建立迁移任务；不在本阶段把候选组件误标为“全项目 已改造”。