OceanLeo UI 样板间
这里是 @oceanleo/ui 共享前端外壳的活样板间。所有 *.oceanleo.com 站(除 crm)都引用这一个包, 获得完全一致的侧边栏、模型选择、账户/设置/API 页与主题。改这个包一处,所有站 重新部署即对齐——这就是消灭技术债的单一事实源。本页本身就是用共享外壳渲染的。
外壳 AppShell›
左侧边栏 + 右上 header(模型选择)+ token 余额 + 账户区
模型选择 ModelPicker›
text / image / video / threed / audio 全分类,分组显示
账户页 AccountPage›
邮箱 / 余额 / 本月消耗 / 菜单 / 退出登录
设置页 SettingsPage›
个人资料 + 用量记录表(可插站点特有区块)
API 页 ApiPage›
余额 + 计费说明 + 模型市场 2D 选择器 + 价格来源
原子组件 UI›
Modal / ConfirmDialog / Switch / Select / Segmented / Skeleton …
主题色板 Theme›
配色 / 圆角 / 字号 / v-* 动画 / 滚动条
接入方式(每个站只需 4 步)
package.json加依赖@oceanleo/ui(git tag)next.config加transpilePackages: ["@oceanleo/ui"]layout.tsx加import "@oceanleo/ui/theme/ui.css"- 用
<AppShell>包裹页面,传 brand / nav / modelCategories