色彩规范

全局色彩通过 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（控件专用）

使用示例

// DO：直接用 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>
)

内容区标题 + Alert

基于自定义 PageContainer（包裹 ProLayout PageContainer）， 提供主标题（来自路由 name）、副标题、右侧操作区、可选 Alert 警告。 本次改版去除所有内联硬编码像素，全部走 AntD CSS 变量，样式抽到 pageContainer/index.less。

一级页面（列表/概览）

backIcon={false}，无返回按钮。标题区是独立白底块，Alert / 内容容器在下方灰底区。

二级页面（详情/编辑）

默认带返回按钮（不传 backIcon 即生效），点击返回上一级路由。

可选元素

在一级或二级形态上叠加，按业务需要选用。

规格

Alert 4 种类型（设计规范定义）

底色 / 边框 / 图标走 设计规范（公司网站设计规范.txt）里 colorXxxBg / colorXxxBorder / colorXxx 三层 token。Info 跟随我们自定义的主色蓝；Success/Warning/Error 复用规范里的 Green/Gold/Red 色板。

Alert 用法

// 直接用 AntD 官方 Alert，不要包装
import { Alert } from 'antd';

<Alert type="info" showIcon message="提示信息" />
<Alert type="success" showIcon message="操作成功" />
<Alert type="warning" showIcon message="请注意" />
<Alert type="error" showIcon message="操作失败" />

// PageContainer.alertProps 仅承载页面级注意事项，type 在组件层硬编码 info（不可改）
<PageContainer alertProps={{ description: '状态流转：内测 → 公测 → 运营 → 已下线' }} />

使用方式

// PageContainer 自定义封装：src/components/pageContainer/index.tsx
import PageContainer from '@/components/pageContainer';

<PageContainer
  subTitle="管理客户透支额度规则"
  extra={[
    <Button>导出</Button>,
    <Button type="primary">新建规则</Button>,
  ]}
  alertProps={{
    /* type 在 pageContainer 层固定 info，不暴露；这里只给文案 */
    description: '设置了透支规则的客户...',
  }}
>
  <AlayaProTable ... />
</PageContainer>

Alert 应用规约

列表页标题下「那一行字」到底该不该写、写什么，不只是前端样式问题，更是产品文案规约。 现状是同一种"页面级文案"被两个 API（alertProps 和 header.subTitle）混用， 且 PM 写文案时**没有区分模块描述和 Alert 提示的语义**。本节给 PM 一套判定规则，给前端一份待清洗清单。

统一规则：所有页面级 Alert（不论是规则说明 info 还是动态告警 warning）一律走 PageContainer.alertProps，渲染到标题白底块内。type 由业务传值，颜色和图标自动跟随。

核心判定：模块描述 vs Alert 提示

type · 颜色 · 场景

Alert 不论何种类型，位置统一（标题白底块内）。颜色 / 图标按 type 自动匹配（图标在 pageContainer 里按 type 映射）。

代码实现

// 静态 info 规则说明（默认 type）
<PageContainer
  alertProps={{ description: '状态流转：内测 → 公测 → 运营 → 已下线' }}
/>

// 动态 warning 业务告警（条件渲染：异常时才有 description）
<PageContainer
  alertProps={hasResourceAlert ? {
    type: 'warning',
    description: `底层资源告警：${...}`,
    action: <a>查看影响明细</a>,  {/* 右侧操作（可选） */}
  } : undefined}
/>

全项目盘点（15 处）

截至 2026-05-08，所有列表页头部含文案的 15 处实例分类如下（不含商品管理 warning 告警 1 处）。全部走统一 alertProps。 留 / 删 / 待 PM 复核 。每条都标注了菜单位置，方便对照页面查看。

文案标点：句末统一不带句号

不论文案是完整陈述句、祈使句，还是图示型规则——所有 alert 末尾一律不加句号。

下一步动作

FAQ

侧栏菜单

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

完整侧栏交互预览

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

Tag 标签

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

语义预设

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

使用示例

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

// DON'T：硬编码颜色名 / 色值
<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 橙色，未走主题系统：

改动记录

本节按日期顺序记录 design-guo-minor 分支所有改动，**给前端同事 / PM 接手时快速对照"改了哪、为什么改、有什么风险"**。 每条改动包含：背景 / 涉及文件 / 风险点。

2026-05-01 ~ 02 · 接入 mfCloud 云端共享主题

前端架构师告知：Alaya 系产品（bp + ops + 其他）的主题切换标准做法是接入云端共享 ThemeProvider，CDN 加载，多产品同源。本地 config/theme.ts 改为 fallback。

2026-05-02 · 顶部导航栏全部走 AntD token

src/app.tsx 顶部导航栏原有大量硬编码（logo 高度 48 / 标题色 #333 / marginLeft 10 / fontWeight 450 等非 AntD scale），全部 token 化。

2026-05-02 ~ 03 · 侧栏图标全局替换（codesign iconfont → 恐龙图标库）

原侧栏菜单用 codesign 上传的 iconfont（icon-yy-xxx）。前端要求改用恐龙图标库（duotone 风格），通过本地 SVG + DinoIcons 组件承载。后期再统一上传 codesign 生成 iconfont 替换回。

2026-05-03 ~ 05 · 商品 / 计价模块原型页面（4 步 Steps + 路由改造）

综合中心新增「商品」「计价」两个一级菜单，需要原型页面给业务方走查。商品管理是 4 步向导（15+ 字段 + 条件联动），Drawer 承载不下，改为独立页面 + Steps。

新增路由

CRUD 模式

• ProductList · Drawer(600px) 新建/编辑 + Modal 下线
• CommodityList · 卡片/表格双视图 + 跳转独立页新建/编辑 + Modal 停售；含 Tier 2 资源告警 banner（详见下文 Alert 应用规约）
• CommodityCreate · 4 步 Steps 独立页面（ProForm + ProCard 水平布局）
• BundleList · Drawer(640px) 新建/编辑 + Modal 下线
• AidcList · Drawer(520px) 新建/编辑
• MeterList · Drawer(640px) 编辑 + 定价 Drawer + Modal 下线
• BillingMode · Drawer(560px) 新建/编辑 + Modal 绑定商品

2026-05-06 ~ 08 · PageContainer 多次迭代（核心改动）

PageContainer 是全局列表页容器，原有 3 处内联常量 + 硬编码像素，且 mfCloud 主题接入后外层白底块没了背景色（标题与下方 layout 灰底糊一起），需要重构 + 修复。

最终状态（建议前端只看这部分）

兼容性（9 个使用 alertProps 的页面）

BillMonth / HandmadeBill / BillSettlement / BillList / Export / overdraft / BundleList / AidcList / MeterList —— 业务渲染逻辑零变化，只是渲染位置从 children 区移入白底块 footer。

• HandmadeBill 内含 <DownloadBlobBtn> —— 测试通过，按钮在白底块内可正常点击下载
• BillMonth 多段条件渲染 —— 实际只渲染一行短句，无溢出风险

2026-05-07 ~ 08 · 设计规范页 design-system.html（本页）

前端 + 设计 + PM 缺一份共同对齐的"组件视觉规范 + Token 字典"。把所有 token、颜色、间距、组件状态、视觉规约整合成一个独立 HTML 页面，部署 CF Pages 给团队访问。

2026-05-08 · Alert 应用规约（产品 × 前端共同对齐）

Alert 在项目里有多种语义被混用：① PM 写文案时不区分"模块描述"和"alert 提示"；② 同一个文案位（PageContainer）被两个 API 混用；③ 商品管理的业务告警一开始我用了独立 <Alert type="warning">，跟其他页面不统一。统一收口：所有页面级 Alert 都走 PageContainer.alertProps，type 由业务传值（info / warning），位置统一进白底块。

本节配套产出