色彩规范

全局色彩通过 config/theme.ts 注入 AntD ConfigProvider， 以 CSS 变量形式输出（前缀 --alaya-*），全项目共享。

主题色 · Primary

品牌主色 #4362FF，按钮、链接、选中态、菜单激活态。本次改版从橙 #FF921C 切换到蓝色，与其他蓝色产品对齐。

中性色 · Gray

10 阶灰色，全部文字色、边框色、填充色、背景色都从此推导。

辅助色 · Orange 原主色 · 保留供 warning 状态色使用

原主色橙色降级为辅助色。状态色（待审核、待支付等）若需暖色调从此选取，不要新增其他色族。

文字层级

文字色严格使用 语义层变量（如 colorText、colorTextSecondary）， 而不是直接引用 gray-10、gray-8 等调色板层级。

语义变量

边框、填充、背景的语义层级映射，确保改版时能从单一来源调整。

边框 · Border

填充 · Fill

背景 · Background

间距 Spacing

全部使用 AntD 标准 token（与 Figma 设计稿一致）。 基础尺寸 sizeUnit: 4 + sizeStep: 4，输出 11 档 Size.Base 阶梯。 Padding / Margin 都是 Base 的别名引用，外加 Content Padding / Control Padding 两组语义专用。 不要自己造 spacing* 自定义 token，组件直接消费 AntD CSS 变量。

Size.Base · 基础阶梯（11 档）

所有 Padding/Margin 都引用此层数值。CSS 变量 --alaya-size-*。

Padding / Margin（Base 别名）

Content Padding（内容专用）

内容区域专用 padding，页面水平内边距用 paddingContentHorizontalLG，标题区垂直用 paddingContentVertical。

Control Padding（控件专用）

使用示例

// ✅ 推荐：直接用 AntD 标准 CSS 变量（与 Figma 一致）
.my-page {
  padding: 0 var(--alaya-padding-content-horizontal-lg);  /* 24 */
}
.my-section + .my-section {
  margin-top: var(--alaya-margin);  /* 16 */
}
.my-table-cell {
  padding: var(--alaya-padding-sm) var(--alaya-padding);  /* 12 16 */
}

// ❌ 禁止：硬编码像素
.my-page { padding: 0 24px; }

// ❌ 禁止：自造 spacing* 语义 token
// 不要在 theme.ts 里加 spacingPagePaddingX 之类的，AntD 标准命名已经有对应 token

DinoIcons · 恐龙图标库

24 个 duotone（双色）风格 SVG 图标，统一替换原 codesign iconfont 实现侧栏图标风格。 通过 { ReactComponent } inline SVG 方式渲染，颜色跟随 currentColor， 默认 colorTextTertiary，菜单选中/hover 跟随 colorPrimary。

默认状态 · gray-6

使用方式

// 1. 在 route config 中使用 dino-* 字符串
{
  name: '商品',
  icon: 'dino-bag-shopping',
  path: '/ops/misc/commodity',
}

// 2. app.tsx 的 menuDataRender 自动转换为 React 组件
menuDataRender(menuData) {
  const patchDinoIcons = (items) => items.map((item) => {
    if (typeof item.icon === 'string' && item.icon.startsWith('dino-')) {
      item.icon = React.createElement(dinoIconMap[item.icon]);
    }
    return item;
  });
  return patchDinoIcons(menuData);
}

顶部导航栏

基于 ProLayout 顶部 Header，layout: 'mix' + splitMenus: true 模式： 一级菜单在 header（横向）、子菜单在 sidebar（纵向）。 左侧 Logo + 平台名，中部一级菜单，右侧操作区（Locale / Avatar）。 本次改版按 Figma 把所有硬编码值改成 AntD token 引用。

完整效果

开启右侧「Inspect」浮层按钮后 hover 任意元素查看具体 token / 尺寸。

规格（全部走 AntD token，禁止硬编码）

实际代码（src/app.tsx）

logo: (
  <div style={{ display: 'flex', alignItems: 'center' }}>
    <img src={AlayaNewLogo} style={{
      height: 'var(--alaya-control-height-lg)',  /* 40 */
    }} />
    <p style={{
      fontSize: 'var(--alaya-font-size-lg)',           /* 16 */
      marginLeft: 'var(--alaya-margin-xs)',            /* 8 */
      color: 'var(--alaya-color-text-heading)',
      marginBottom: 0,
      fontWeight: 500,
    }}>
      运营平台
    </p>
  </div>
)

侧栏菜单

基于 ProLayout 定制：底部折叠按钮、菜单 hover/选中/展开各状态颜色、动画时长。 下面按层级（L1 一级叶子 / L2 一级父菜单 / L3 二级子菜单 / L4 折叠按钮）+ 状态系统化展示。

完整侧栏交互预览

下面是完整侧栏，可直接 hover / 点击体验真实交互。

Tag 标签

统一使用 AntD Tag 组件的 color 预设值（success/error/warning/processing）， 不要直接用 color="green"、color="red" 等颜色名，避免与主题脱节。

语义预设

通用语义池，业务方按"成功/失败/警告/进行中/默认/品牌"语义选择，文案自填。

使用示例

// ✅ 正确：用语义 color 预设，文案随业务自填
<Tag color="success">销售中</Tag>
<Tag color="success">运行中</Tag>
<Tag color="warning">待审核</Tag>
<Tag color="processing">同步中</Tag>

// ❌ 错误：硬编码颜色名 / 色值
<Tag color="green">销售中</Tag>
<Tag color="#52c41a">销售中</Tag>

新增路由

所有页面均使用 mock 数据，前端接入时需替换为真实 API。

商品模块 · /ops/misc/commodity

计价模块 · /ops/misc/pricing

侧栏图标替换 · 14 项

改动文件清单

合并前请重点 review 以下文件。

新增文件

已有文件修改

已知遗留问题（不在本次改版范围）

主题色已通过 config/theme.ts 切换到蓝色，AntD 内置组件 + 用 var(--alaya-*) 的自定义样式都自动跟随。 但项目中仍有 十几处硬编码 #FF921C 橙色，未走主题系统：