OceanLeo UI 样板间

这里是 @oceanleo/ui 共享前端外壳的活样板间。所有 *.oceanleo.com 站（除 crm）都引用这一个包，获得完全一致的侧边栏、模型选择、账户/设置/API 页与主题。改这个包一处，所有站重新部署即对齐——这就是消灭技术债的单一事实源。本页本身就是用共享外壳渲染的。

★ 产品站范本（侧栏 + 四页）›

2026-06-19 宗旨：侧边栏 + 首页/工作台/文件库/历史记录；首页输入框进 agent，高级任务一分为二（可拖竖线 + 大屏）。25 站照此复制。

外壳 AppShell›

左侧边栏 + 右上 header（模型选择）+ token 余额 + 账户区

三栏工作台 Studio›

全站统一版式：左操作区可折叠 StudioSection + 右结果区 ResultCanvas（= image 风格）

我的数据库 MyDatabasePage›

作品 / 上传素材 / 知识库三页签，全 OceanLeo 系列跨站共享

插件与连接器 PluginsPage›

技能、连接器与 MCP 服务器目录

模型选择 ModelPicker›

text / image / video / threed / audio 全分类，分组显示

标准输入框 + leo 助手›

全家桶统一输入框模板；AI 生成框带「leo 建议」按钮

账户页 AccountPage›

邮箱 / 余额 / 本月消耗 / 菜单 / 退出登录

设置页 SettingsPage›

个人资料 + 用量记录表（可插站点特有区块）

API 页 ApiPage›

余额 + 计费说明 + 模型市场 2D 选择器 + 价格来源

原子组件 UI›

Modal / ConfirmDialog / Switch / Select / Segmented / Skeleton …

主题色板 Theme›

配色 / 圆角 / 字号 / v-* 动画 / 滚动条

接入方式（每个站只需 4 步）