文档

设计规范

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/ 下的界面组件,新写的组件优先放在那里。

界面必须处理的状态

加载中、空数据、无权限、余额不足、部分成功、执行中、提交结果未知、重试、取消、结果过期。用示例数据的界面要明确标注,不能当作已接入后端。

On this page