设计规范
OceanWay 界面的设计来源与采用规则
来源
- 设计规范仓库:
Oceanway-design维护品牌、设计 token、组件和规范。 - 在线设计实验室:docs.oceanway.site/components/design,可以阅读规范和预览交互。
- 品牌来源:仓库中的
design-system/brand-enterprise-v1.md。
采用规则
- 界面基于 shadcn/ui,使用 OceanWay 的配色、字体、密度、间距和状态规范,不直接用 shadcn 的默认主题。
- 引用已确认的品牌资源,不自行重画 Logo。
- Console 的账户、Key 列表、用量等登录后页面,可以参考 new-api 的界面再按 OceanWay 风格调整。
- 现阶段优先接口、业务闭环和真实联调;界面用于核对流程、字段、权限和异常状态,暂不做额外的视觉方案和反复排版。
各产品的现状
| 产品 | 现状 | 方向 |
|---|---|---|
| Console、Admin | 已按 shadcn 和 OceanWay 风格实现 | 迁入平台后保持 |
| Studio | 使用 Ant Design 等组件库 | 逐步对齐 |
| Drama | 自写样式 + Phosphor 图标 | 迁入产品工程时逐步对齐 |
| Commerce | 自写样式 + Lucide 图标 | 迁入产品工程时逐步对齐 |
| Site | 独立的品牌展示设计 | 保持品牌一致 |
产品工程的三个子站共用 src/shared/ 下的界面组件,新写的组件优先放在那里。
界面必须处理的状态
加载中、空数据、无权限、余额不足、部分成功、执行中、提交结果未知、重试、取消、结果过期。用示例数据的界面要明确标注,不能当作已接入后端。