色彩规范

全局色彩通过 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);
}

Button 内图标对齐（全局强约束）

任何 SVG 图标跟文字共存（Button icon prop / flex 容器 / inline span）必须 inline-flex + alignItems center + lineHeight 0，否则 RemixIcon / DinoIcons SVG 默认 baseline 对齐会比中文字偏下 1-2px。

.ant-btn .ant-btn-icon {
  display: inline-flex !important;
  align-items: center !important;
  line-height: 0 !important;
}
.ant-btn .ant-btn-icon > svg {
  display: block !important;
}

<div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
  <span style={{
    display: 'inline-flex',
    alignItems: 'center',
    lineHeight: 0
  }}>
    {icon}
  </span>
  <span>文字</span>
</div>

详见 feedback_inline_icon_alignment.md（项目记忆，强约束 — 写代码时主动应用，不等用户指出再修）。

顶部导航栏

基于 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}，无返回按钮。标题区是独立白底块，下方 children 容器承载筛选/表格。按业务需要分三种形态：

二级页面（详情/编辑）

默认带返回按钮（不传 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>

生命周期 4 态映射（强约束）

运营中心所有"生命周期阶段"状态（内测/公测/运营/已下架）必须按下表映射，跨页面统一。

分类 Tag vs 状态 Tag — 视觉重量必须拉开

同卡片/同行里"分类"（产品线/类型）+ "状态"（生命周期）共存时，必须视觉区分，否则用户分不清。

表格列规范

所有 ProTable / Table 共用一套操作列宽度档位和数值列对齐规则， 避免每个页面各算一套尺寸。新页面强约束，存量页面随 bug fix / 改版逐步迁移。

操作列宽度档位

档位 = 最小可读宽度。视觉舒适宽度 ≈ 档位 × 1.25（觉得局促时按 1.25 加宽）。

// 公式
列宽 = 单元格左右 padding (32px)
     + Σ 操作文字宽度
     + (操作数 - 1) × 8px 间距
     + 16px 安全余量

// 参数依据
AntD Table padding-inline   : 16px (默认)
OperationRender / Space gap : 8px (默认)
中文 14px 正文              : 2 字 ≈ 28px · 3 字 ≈ 42px

删除操作的 friction

删除走 Modal.confirm 二次确认即可（已是项目惯例）— 这就是 friction，不要再嵌进 Dropdown 隐藏， 否则用户找不到。隐藏式的「更多 ▾」只用于操作数量 ≥ 4 时压缩视觉。

数值列右对齐

价格、金额、单价、数量、配额、百分比等数值类列必须 align: 'right'， 小数点视觉自然对齐，扫读时易做大小比较。配 D-DIN 数字字体（global.css 已注册）。

代码示例

// ✅ 价格列：右对齐 + D-DIN 字体 span 包裹
{
  title: '价格',
  dataIndex: 'price',
  width: 140,
  align: 'right',
  render: (_, r) => <span className={styles.numericValue}>{r.price}</span>,
}

// ✅ 操作列：固定宽度 + OperationRender
{
  title: '操作',
  valueType: 'option',
  width: 120, // 2 个短词最小档
  render: (_, r) => (
    <OperationRender space>
      <Typography.Link onClick={() => openEdit(r)}>编辑</Typography.Link>
      <Typography.Link type="danger" onClick={() => handleDelete(r)}>删除</Typography.Link>
    </OperationRender>
  ),
}

// .ui.less 里数字字体（global.css 已注册 D-DIN @font-face）
.numericValue {
  font-family: 'D-DIN', sans-serif;
  font-weight: 500;
  letter-spacing: 0.2px;
}

反例

编码字段（code / key / id）展示规约

运营中心所有编码字段（商品编码 / 套餐 code / 产品 code / 区域 code 等）统一展示样式。
核心规则：主题色 = 可下钻。所有蓝色 Typography.Link 必须有真实跳转/Modal，不能是死链接。

列表筛选区

ProTable 内置 search 筛选区位于表格上方、工具栏下方。一排槽位密度直接影响运营查找效率：太挤（4 字段一排）下拉截断难读；太松（2 字段一排）多字段时翻折页不连贯。本节定下默认密度 + 高频字段抽 Tab 快筛规则。

默认密度：3 字段 + 1 操作 = 一排 4 列

每个 grid col 占 span: 6（24 / 6 = 4 列）。AntD ProTable 默认即此密度，无需额外配置。

高频枚举抽 Tab 快筛

当某筛选字段同时满足以下条件时，从 search 区抽出来做 PageContainer.tabList 快筛（参见 内容区标题 · 形态 C）：

实际示例（ProductList）

原 4 字段「产品编码 / 产品名称 / 产品线 / 状态」→ 状态抽到 Tab 快筛，剩 3 个常驻 search 区刚好 3+1 一排放满。

// columns 配置 — status 加 hideInSearch
{
  title: '状态',
  dataIndex: 'status',
  hideInSearch: true, // 抽到 PageContainer.tabList
  render: (_, r) => <Badge status=...>
}

// 页面层 — PageContainer.tabList + state 联动
const [statusTab, setStatusTab] = useState('all');
useEffect(() => { actionRef.current?.reload(); }, [statusTab]);

<PageContainer
  tabList={[
    { tab: '全部', key: 'all' },
    { tab: '在售', key: 'active' },
    { tab: '已下架', key: 'offline' },
  ]}
  tabActiveKey={statusTab}
  onTabChange={setStatusTab}
>
  <AlayaProTable request={async (params) => {
    const filtered = statusTab === 'all'
      ? data : data.filter((i) => i.status === statusTab);
    return { data: filtered, total: filtered.length };
  }} />
</PageContainer>

表单选择器组件

Form 互斥单选 / 多选场景下我们有 6 种组件可选：AntD Segmented、AntD Radio.Group(button)、3 个自定义 Alaya* 卡片组件（AlayaTabs / AlayaCheckboxCards / AlayaRadioStackCards）、Select 下拉。每种视觉重量 / 适用场景不同，避免随意混用，按下方决策树选。

决策树

                                     ┌─ 视图 / 模式切换（table↔card · tab 导航）? ──→ Segmented（滑块）
                                     │
                                     │                                  ┌─ 想要 均分铺满? ─→ + .alaya-radio-block
                                     │── Form 短词 ladder / 等价单选 ──┤
                                     │                                  └─ 紧凑跟随内容? ─→ 默认 outline
                                     │                                  （以上两种都用 Radio.Group(button)）
   单选 ── 2-4 项 ───────────────────┤
                                     │── 重要决策 · 含图标 · 仅标题 ────────────────→ <AlayaTabs>
                                     │
                                     └── 重要决策 · 含 标题 + 描述 ──────────────────→ <AlayaRadioStackCards>

   多选 ── 2-N 项 · 需 status 配色（运营/公测/内测/下线）─────────────→ <AlayaCheckboxCards>

   ≥ 5 项（单选）─────────────────────────────────────────────────→ Select
   ≥ 8 项 + 长选项 ──────────────────────────────────────────────→ Select showSearch

6 种组件对比

代码示例

// ✅ Segmented（视图/模式切换 — table↔card 类）
<Segmented
  options=[
    { label: '表格', value: 'table', icon: <RiTableLine /> },
    { label: '卡片', value: 'card', icon: <RiLayoutGridLine /> },
  ]
/>

// ✅ Radio.Group(button) + alaya-radio-block（Form ladder · 均分铺满）
<Radio.Group
  optionType="button"
  className="alaya-radio-block"
  options=[
    { label: '内测', value: 'BETA' },
    { label: '公测', value: 'PUBLIC_BETA' },
    { label: '运营', value: 'ACTIVE' },
  ]
/>

// ✅ Radio.Group(button) 默认（短词等价 · 紧凑跟随内容）
<Radio.Group optionType="button">
  <Radio.Button value="hangzhou">杭州</Radio.Button>
  <Radio.Button value="shanghai">上海</Radio.Button>
  <Radio.Button value="beijing">北京</Radio.Button>
</Radio.Group>

// ✅ AlayaTabs（水平卡片单选 · 仅标题 + 图标）
<AlayaTabs
  options=[
    { label: '线上', value: 'online', icon: <RiGlobalLine size=20 /> },
    { label: '线下', value: 'offline', icon: <RiFileTextLine size=20 /> },
  ]
/>

// ✅ AlayaRadioStackCards（垂直堆叠单选 · 含描述）
<AlayaRadioStackCards
  options=[
    {
      value: 'public',
      title: '公开',
      description: '全部客户可见 · 控制台自助下单',
      icon: <RiGlobalLine size=16 />,
    },
    {
      value: 'group',
      title: '限定客户群',
      description: '仅勾选的客户群可见 · 多选取并集',
      icon: <RiTeamLine size=16 />,
    },
  ]
/>

// ✅ AlayaCheckboxCards（多选 · status 5 态配色）
<AlayaCheckboxCards
  options=[
    { value: 'cn-hangzhou', label: '华东 1（杭州）', status: 'active' },
    { value: 'cn-shenzhen-gpu', label: '深圳 GPU', status: 'beta', tag: '公测' },
    { value: 'ap-singapore', label: '新加坡', status: 'internal', tag: '内测' },
    { value: 'cn-qingdao', label: '青岛', status: 'offline', tag: '已下线' },
  ]
/>

// ✅ Select（≥ 5 项）
<Select
  options=[
    { label: '弹性容器集群 VKS', value: 'VKS' },
    { label: '云容器实例 CCI-INSTANCE', value: 'CCI_INSTANCE' },
    { label: '带宽 BANDWIDTH', value: 'BANDWIDTH' },
    { label: '弹性公网 IP EIP', value: 'EIP' },
    { label: '大模型 API LLM', value: 'LLM' },
    { label: '对象存储 OSS', value: 'OSS' },
    { label: '文件存储 NAS', value: 'NAS' },
    { label: '块存储 EBS', value: 'EBS' },
  ]
/>

<AlayaTabs> 规格（自定义组件）

Figma 设计稿 27148:18292 / 26978:48187 对齐。源码 src/components/AlayaTabs/。每个 item 独立边框 + 圆角 + 8px gap + 三态主题色，自适应宽度跟随内容。

<AlayaCheckboxCards> 规格（多选 · 5 态配色）

源码 src/components/AlayaCheckboxCards/。AlayaTabs 的多选扩展，每项含内置 16×16 勾选框 + label + 可选 tag 角标。status 决定卡片配色与可勾选性。

<AlayaRadioStackCards> 规格（垂直堆叠单选 · 含描述）

源码 src/components/AlayaRadioStackCards/。每项占满父容器宽度，左侧圆形 radio + 右侧 icon + 标题 + 描述。适用于「重要决策且需要 1~2 行描述帮助用户理解」的场景，AlayaTabs 撑不下描述时用这个。

.alaya-radio-block 规格（Radio.Group 均分修饰）

AntD 5.18 的 Radio.Group 还没有原生 block prop（5.21+ 才加）。给 Radio.Group 加 className="alaya-radio-block"，每个按钮 flex:1 平分容器宽度。源码 src/global.ui.css。

反例

列表展现模式选型（运营后台）

运营后台列表按性质二选一，不做视图切换：业务对象类用卡片（卡片 12/页 + 翻页器），流水 / 数据类用表格。哪种用哪种由列表性质决定。

两类列表分工

规约要点

• 不做视图切换器 — 哪种用哪种由列表性质决定，给业务对象强加表格 / 给数据类强加卡片都是反例。"切换器"曾被考虑但最终撤回（用户原话：「商品管理这个模块我不是说没有表格视图了吗」）
• 卡片视图：12/页 + 翻页器 — 不做无限滚动。运营场景是「翻到第 N 页定位某条 → 跳详情 → 回来」，URL 友好分页比无限滚动顺手；24 太多 / 6 太少，12 = 3 列 × 4 行刚好一屏
• 表格视图：20/页起步，密度高，AntD 内置排序 / 筛选 / 行选直接用
• URL 带分页位置 — ?page=N&pageSize=12（或 20），刷新 / 跳详情回来都不丢位置，可分享链接
• 判断技巧 — 看每条数据是否有"图标 + 名称 + 关键指标"的"形象感"。有 → 卡片；只是金额/日期/状态/ID → 表格

代码示例

// 业务对象类：纯卡片 + 12/页 + 翻页器
<Row gutter={[16, 16]}>
  {items.slice((page - 1) * 12, page * 12).map(renderCard)}
</Row>
{items.length > 12 && (
  <Pagination
    current={page}
    pageSize={12}
    total={items.length}
    showSizeChanger={false}
    onChange={setPage}
  />
)}

// 流水/数据类：纯表格
<Table
  columns={columns}
  dataSource={items}
  pagination={{ pageSize: 20, showSizeChanger: true }}
/>

反例

Drawer 统一规范

所有运营中心新建/编辑 Drawer 一律按本节规约重做。规约沉淀自 CommodityList 4 步 Steps 向导 Drawer，2026-05-11 同步到 ProductList / BundleList / AidcList / MeterList / BillingMode 五个 Drawer。

硬性规约表

硬性禁止（4 条）

2026-05-11 落地清单（5 Drawer）

代码模板

import { Drawer, Form, Button, Space } from 'antd';
import AlayaCheckboxCards from '@/components/AlayaCheckboxCards';

<Drawer
  title="新建商品"
  width={800}                              // 统一 800
  open={open}
  onClose={onClose}
  footer={
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <Button onClick={onClose}>取消</Button>
      <Button type="primary" onClick={onSubmit}>提交</Button>
    </div>
  }
>
  <Form layout="vertical">                // 单列垂直，禁止 Row+Col 两列
    <Form.Item name="code" label="商品编码" rules={[...]} />
    <Form.Item name="name" label="商品名称" rules={[...]} />
    <Form.Item name="regions" label="可售区域">
      <AlayaCheckboxCards options={regionOptions} />
    </Form.Item>
  </Form>
</Drawer>

Drawer footer 操作按钮位置

Drawer footer 操作按钮有 2 种模式：项目默认全部右对齐（普通 Drawer 沿用），Wizard 类（多步 Steps 向导）单独走 取消左 / 主操作右。

两种模式对比

为什么 Wizard 单独一套

• 语义对比 — 取消是"逃生通道"，跟「步骤推进」链路语义不同，左右分离强化对比
• 防误点 — 主操作（下一步 / 提交）远离取消，数据丢失风险降低
• 视线动线 — 用户填完表单视线流向右下，主操作就在动线末端
• 业界共识 — macOS 系统设置 / 安装向导 / onboarding 经典布局

代码示例

// ✅ Wizard Drawer — 取消左 / 主操作右
<Drawer
  footer={
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <Button onClick={onClose}>取消</Button>
      <Space>
        {step > 0 && <Button onClick={onPrev}>上一步</Button>}
        {step < lastStep
          ? <Button type="primary" onClick={onNext}>下一步</Button>
          : <Button type="primary" onClick={onSubmit}>提交</Button>}
      </Space>
    </div>
  }
  // 不要再加 styles={{ footer: { textAlign: 'right' } }}
/>

// ✅ 普通 Drawer — 全部右对齐
<Drawer
  footer={
    <>
      <Button style={{ marginRight: 8 }} onClick={onClose}>取消</Button>
      <Button type="primary" onClick={onSubmit}>确认</Button>
    </>
  }
  styles={{ footer: { textAlign: 'right' } }}
/>

新增路由

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

商品模块 · /ops/misc/commodity

计价模块 · /ops/misc/pricing

侧栏图标替换 · 14 项

改动文件清单

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

新增文件

已有文件修改

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

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

下架 / 停售 Modal 统一规范

覆盖项目里 6 个破坏性操作 Modal — 结构、尺寸、组件用法、文案全部对齐，让运营 / PM / 测试在不同页面看到的"下架 / 停售"操作有完全一致的体验。

1. 宽度统一 width=560

2. 标题规范

❌ 标题禁带 emoji（⏸ / 🔄 / 🛑 等）
✅ 涉及目标对象时带「目标名」让运营确认操作哪一条

3. 内容区结构

❌ 禁止："彻底删除"FAQ 提示 / 6 态流转图等开发文档式内容（这些是 ui/doc 范畴）

3.1. 影响范围数字 — 中性黑色 strong，不要橙/红

4. Form 字段规范

5. Footer 按钮规范

6. 全局 Modal 间距 — 跟 stop modal 共享

已在 src/global.ui.css 全局调整（影响所有 Modal）：

.ant-modal-root .ant-modal .ant-modal-content > .ant-modal-header {
  padding-bottom: 24px !important;
  margin-bottom: 0 !important;
}
.ant-modal-root .ant-modal .ant-modal-content > .ant-modal-footer {
  padding-top: 24px !important;
  margin-top: 0 !important;
}
.ant-modal-root .ant-modal .ant-modal-content {
  overflow: visible !important;  /* 让 Select dropdown 不被裁 */
}

7. 6 个 stop Modal 实现一览

文字提示词规范

覆盖 Input / TextArea / Select placeholder、Label 后缀（如「（必填）」）、Alert / Modal 内部文案。统一才能让运营 / PM / 测试一眼读懂，不被工程师术语劝退。

1. Placeholder 示例分隔符 — 统一 / （带空格）

为什么 / 比 · 好：斜杠在中文 placeholder 里更易识别为"或者"的语义；中点 · 容易跟正文里的中点冲突，视觉上是"和并列"而不是"或多选"。

2. 词汇选择 — 运营 / 业务语言，禁工程师术语

3. Label 后缀 — 禁冗余"（必填）"

4. Modal / Drawer 内文案 — 禁"开发文档式"

5. 5 个下架 / 停售 Modal placeholder 现状

6. 通用模板

表格分页规约

解决"小数据表格挂废分页器 1/1 页"的视觉噪音问题。按表格性质分三档，不一刀切「全部分页」也不一刀切「全部不分页」。

三个判断维度

业务对象列表 — 必须分页

数据天花板高 / 用户主要任务是筛选 + 浏览 + 操作。

<AlayaProTable
  pagination={{
    pageSize: 10,            // 默认 10/页
    showSizeChanger: true,   // 允许切 20 / 50 / 100
    showQuickJumper: true,   // 大数据集允许跳页
    showTotal: (total) => `共 ${total} 条`,
  }}
/>

详情页关联资源 — 条件分页

数据天花板低（一般 1-30） / 用户已经聚焦某个主对象 / 需要看到所有关联。

// 数据 < 10：不分页
<Table pagination={false} ... />

// 数据 >= 10：分页（同业务列表但 showSizeChanger 可关）
<Table
  pagination={{
    pageSize: 10,
    showSizeChanger: false,  // 详情页关联资源不需要 100/页
    showTotal: (total) => `共 ${total} 条`,
  }}
/>

固定枚举 — 永不分页

数据规模业务上固定，加分页 = 反模式，违背"固定数据"语义。

<Table pagination={false} ... />

边界场景 FAQ

落地清单

详细规约文档：ui/doc/tablePagination.md

状态 vs 类型 — 双轴视觉规约

跨列表 / 详情页统一两类语义的视觉表达。状态用小圆点（Badge dot），类型用色块标签（Tag color），跨页面用户秒识别"圆点 = 状态属性 / 色块 = 分类身份"。

Badge dot 颜色规约（状态用）

Tag color 规约（类型用）

类型 Tag 加颜色区分，对齐原型设计。

详细规约：ui/doc/statusVsTypeDisplay.md

列表页 Tab 切换规约

业务对象类列表都用 PageContainer.tabList 状态切换。不加 tab 仅 2 类例外：已用段头分类（如 CommodityList IaaS / LLM）/ 不存在状态字段。

主轴：状态而非类型

数据分布不均的处理

某态当前 mock 数据为 0 时（如 BillingMode 默认全 active），补 1-2 条 mock 让 tab 不空，业务上真实环境会有这些态。

连带改动：删除 subTitle

加 tabList 时顺手删开发文档式 subTitle（如「基础设施单元 · 所有原价和计费模式的'地理坐标'」）。PM 视角的描述应该放在帮助 / 文档，不挂页面顶部。

详细规约：ui/doc/listFilterTab.md

active 状态文案规约

status: 'active' 状态文案带「中」字表达"进行时"语义，避免名词歧义（"运营"会被理解为名词"运营部门"）。

命名风格

详细规约：ui/doc/activeStatusWording.md

业务模型 4 层 · 产品 / 商品 / 规格族 / SKU + 计量项

Alaya 运营中心标准业务模型层级 · 跨页面认知基础。注意正确顺序是「产品 → 商品 → 规格族 → SKU」，商品在规格族上面（之前曾讲反过）。

产品（Product · 品类）
  └── 商品（Commodity · 售卖配置）
        └── 规格族（SPU · Standard Product Unit · 配置族）
              └── SKU（Stock Keeping Unit · 最终售卖单元）
                    × 计量项（meter · 横切计费字段）
                    × 算力中心系数
                    × 计费模式系数
                    = 客户账单

各层定义（以云容器实例为例）

直观记法

• 产品 = 卖什么类型（业务目录视角）
• 商品 = 怎么切售卖（销售视角，按计费形态 + 资源类型切）
• 规格族 = 同商品下的硬件变种（工程视角，卡型 / 档位族）
• SKU = 最终具体配置（财务视角，挂价格的最小单元）
• 计量项 = 计费的最小度量字段（数据视角，量纲）

价格计算链路

客户实际用量（如 100 GPU·h + 200 CPU·h）
   × 计量项基准单价（gpu.hours = ¥4.40 / cpu.hours = ¥0.12）
   × 算力中心系数（杭州 ×1.0 / 香港 ×1.42）
   × 计费模式系数（按量 ×1.0 / 包年 ×0.85）
   = 账单金额

详细规约：ui/doc/billingHierarchy.md

已下架行不整体置灰

表格里 status: 'offline' 的行不要 opacity-60 整行透明、不要单元格文字灰。状态信号交给状态 Badge + 副信息（下架日期），整行置灰会让"启用 / 下架详情"等操作链接看起来不可点。

禁止做的

• rowClassName={(r) => r.status === 'offline' ? 'opacity-60' : ''} — 整行透明
• <span className={r.status === 'offline' ? styles.textOffline : ''}> — 单元格灰
• 价格 / 数字列根据 status 切换灰色

正确做法

• 状态列：<Badge status="default" text="已下架" /> 灰圆点 + 文字
• 状态列下方副信息：小灰字下架日期（如 "2026-02-15"）
• 其他列：保持默认色，不区分 status
• 操作列：Typography.Link 保持默认蓝色（运营仍可点"下架详情 / 启用"）

详细规约：memory feedback_offline_row_no_dim.md

详情页 4 Tab 规范

所有详情页统一形态：PageContainer + ProCard「基本信息」+ ProCard「关联资源 Tab」。对齐 Figma node 27615:41659。

基本信息卡（顶部）

• 左 88×88 大图标（产品 icon / AIDC icon）
• 右标题：名称 18px / 500 + 状态 Badge dot
• Descriptions column={3} colon size="small" — 必含新建/编辑表单的所有用户编辑字段（标题视觉重复不是删字段的理由）
• 备注 / 描述独立一行：<span 灰 label：><span 默认色 value>，不加灰底块

关联资源 Tab（下方）

• 用 AntD Tabs + HTML table（不用 antd Table，性能更轻）
• tab 数 ≤ 4 个：基础 / 计费模型 / 产品 / 商品 之类
• 每个 tab 数据 < 10 条不分页（按 表格分页规约）

告警走 alertProps（不挂 body）

详情页告警（如「底层计量项已下架影响计费」）走 PageContainer.alertProps 放标题栏区域，不散装到 body 顶部，避免抢主内容视觉焦点。

header.extra 操作按钮

• 主操作右：编辑（primary + RiEditLine icon）
• 次操作左：商品 selector / 查看商品 / 导出 等
• onBack：history.back()

详细规约：ui/doc/detailPageStandard.md + ui/doc/detailPageBasicInfo.md

Drawer 表单单列垂直

运营中心所有 Drawer 表单 Form.Item 一行一个字段，禁止用 Row + Col 做两列布局。Form.List 行内字段（如 SKU 表格、阶梯表格）例外。

正确做法

<Form layout="vertical">
  <Form.Item name="code" label="编码" rules={[...]}><Input /></Form.Item>
  <Form.Item name="name" label="名称" rules={[...]}><Input /></Form.Item>
  <Form.Item name="line" label="产品线"><Select ... /></Form.Item>
</Form>

为什么

• Drawer 一般 800-960 宽，两列字段挤变形（label 截断 / placeholder 没空间）
• 单列上下扫读符合表单填写心理流
• 跨 Drawer 统一形态，用户认知模型稳定

原型 2 列 grid 怎么办

原型 HTML 经常用 grid-cols-2 写两列字段，不要按原型布局照抄，强约束改单列。原型是 PM 视角的"字段都列了"草图，不是布局规约。

详细规约：memory feedback_drawer_form_vertical.md

Modal 标题不带 icon

AntD <Modal title="..." /> 用纯文字，不带 icon。「禁 emoji」≠「必须 RemixIcon」—— 默认是没 icon。

正确

<Modal title="计量项下架" ... />
<Modal title="商品状态变更" ... />

禁止

<Modal title={<><RiPauseCircleLine /> 计量项下架</>} ... />
<Modal title="⏸ 计量项下架" ... />

例外

仅 Modal.confirm 系列允许带语义 icon（success / warning / error / info），那是 AntD 内置交互模式，不需要自定义。

详细规约：memory feedback_modal_title_no_icon.md

不擅自改 PM 产品文案 + 业务模型

UI Developer 的边界是「样式 + 布局 + 交互」，不包括字面文字 + 不包括"加几个状态枚举"。即便发现规约不一致也要先问用户拍板。

不许擅自改的

允许动的（UI 规约层）

• 视觉组件选择（如 Tag → Badge 切换形态，字面值不变）
• 颜色映射 / 主题 token
• 布局 / 间距 / 字号
• 交互形态（卡片 vs 表格 / Drawer vs 独立页面）

发现页面间文案不一致怎么办

1. 不要"统一"
2. 列差异给用户看（"ProductList 用 X / CommodityList 用 Y"）
3. 问用户：A 保留各自 / B 统一到 X / C 统一到 Y
4. 等用户拍板再改

详细规约：memory feedback_no_product_copy_edit.md

列表 / 详情 mock 必须同步

同一对象在列表页和详情页的 mock 数据（名称 / 编码 / 状态 / 字段）必须保持一致，改一边要同步另一边。

典型 List ↔ Detail 对

• ProductList ↔ ProductDetail
• CommodityList ↔ CommoditySku
• AidcList ↔ AidcDetail
• BillingMode ↔ BillingModeDetail（如有）
• BundleList ↔ BundleDetail（如有）

改 mock 的 checklist

反例

ProductList: name: '云容器实例（固定规格）'
ProductDetail: name: '云容器实例'
→ 用户点进详情看到名字不一样，怀疑系统错误

详细规约：memory feedback_list_detail_mock_sync.md

编码字段统一展示

编码字段（code / spuCode / meterCode 等）跨场景统一形态。禁止 <Typography.Text code> 带边框等宽。

禁止

• <Typography.Text code>VKS</Typography.Text>（自带灰底框 + 等宽字体 → 抢视觉）
• 自加 mono 字体 className 让编码"看起来更技术"（除非原型明确要求 font-mono，且只用于专业开发场景如计量项详情）

详细规约：memory feedback_code_field_display.md

原型规范三合一

Alaya 原型 HTML（/Users/dang/Desktop/计费-v1.7/*.html）是 PM 规约源头。3 条解读规则：

① 可点击都要落地

原型里所有 onclick 标记的元素（蓝色 link / 按钮 / 卡片 / Tag）都要有真实交互，不能做死按钮 / 死链接。点击 → 跳转 / 打开 Drawer / 弹 Modal / showToast 都行，但不能没反应。

② dev-spec / 字段规则块 不上 UI

原型里 <div class="dev-spec"> 灰底块 + 「📐 字段规则 / 正则 / 长度 / 锁定」这类是开发文档给前端看的，不做到 UI 上。校验落到 rules，UI 保留 placeholder + 关键 LockTag 就够了。

③ 原型既是布局也是内容规约

文字 / 数值 / 占位顺序全是规约。动手前先复制原型对应段到对话逐字段核对；不写 fallback 写 catalog（产品名 / 状态名 / 字段名都按原型来）。

3 条规则的边界

英文字段名是开发草稿

原型 HTML 里 <th>Code</th> / <th>Status</th> 这种英文是开发草稿记号，不是 PM 拍板的产品文案。运营控制台所有表头 / Tab / 按钮 / 字段 label 都要中文化。

详细规约：memory feedback_prototype_clickables.md + feedback_prototype_dev_spec.md + feedback_prototype_content_spec.md

Drawer 单选 / 多选组件选择

Drawer 表单单选 / 多选不能"看着像 Select 就用 Select"，要按选项数和视觉权重选组件。

为什么

• 2-5 项 Radio 全展开扫读最快，省一次点击
• 6+ 项 Radio 会撑爆 Drawer 横向空间
• 多选需要"看到全部已选" → 卡片网格 / Select tags 两种

详细规约：memory feedback_drawer_singleselect.md

运营后台列表 — 卡片 vs 表格 二选一

运营后台所有列表页按数据性质二选一，不做视图切换器。

判断口诀

详细规约：memory feedback_ops_table_first.md + ui/doc/listViewMode.md

视图切换需事先审核

任何页面加 Segmented / Tabs 切换不同呈现前必须先问用户，不限于运营后台。

需要审核的场景

• 加「卡片 / 表格」切换器（Segmented）
• 加「按状态 / 按类型」切换器
• 加 Tabs 让一个页面承担多种数据呈现
• 详情页加 4 Tab 以外的非标准切换

不需要审核的场景

• PageContainer.tabList（标题栏带 Tab）的状态筛选 — 已是全局规约
• 详情页的 4 Tab 关联资源 — 已是详情页规范
• Drawer 内 view 切换（如 SPU 子视图）— 已写过 ui/doc/drawerViewSwitch.md

为什么

视图切换会让用户认知模型不稳定，是重设计决策，应该 PM 拍板而不是开发凭"我觉得这样更好"加。

详细规约：memory feedback_view_toggle_approval.md

PageContainer 标题栏带 Tab 是固定形态

用 ProLayout 原生 tabList + tabActiveKey + onTabChange 实现标题栏 Tab，已有 4 条 :has CSS 覆盖把布局对齐到总高 90px。

标准实现

<PageContainer
  backIcon={false}
  tabList={[
    { tab: '全部', key: 'all' },
    { tab: '在售', key: 'active' },
    { tab: '已下架', key: 'offline' },
  ]}
  tabActiveKey={statusTab}
  onTabChange={(key) => setStatusTab(key)}
>
  <AlayaProTable ... />
</PageContainer>

不要这样做

• ❌ 在 body 里自加 <Tabs> 模拟标题栏 Tab — 会破坏 PageContainer 总高布局
• ❌ 用 Segmented 替代 tabList — Segmented 是 mini 切换器，不是页面级筛选

详细规约：memory feedback_pagecontainer_tabs.md + ui/doc/pageContainerWithTabs.md

inline icon 跟文字水平居中

SVG icon + 文字共存时必须 inline-flex + alignItems: 'center' + lineHeight: 0 三件套，否则视觉总会差几像素。

标准写法

<span style={{
  display: 'inline-flex',
  alignItems: 'center',
  gap: 4,
  lineHeight: 0,
}}>
  <RiCheckLine size={14} />
  <span style={{ lineHeight: 1.5 }}>运营中</span>
</span>

为什么

• SVG 默认 vertical-align: baseline，跟文字基线对齐而非中线
• line-height 影响 SVG 容器高度，造成"图标被文字行高拉低"
• 三件套：父级 inline-flex + alignItems center 强制中线对齐 + 父级 lineHeight 0 消除文字行高影响 + 子级 lineHeight 恢复

老踩坑

每次都"看上去差一点点"调半天，最后回归三件套。已经被坑过 N 次，记到 memory 了。

详细规约：memory feedback_inline_icon_alignment.md

切图比例不准擅自 stretch

切图（设计师给的 4x PNG 资源）禁 background-size: 100% 100%。用 background-size: auto 100%（或 contain），或调容器尺寸 = 切图原比例。

为什么

• 切图里有端头装饰 / 曲率 / 高光等按原比例画的视觉细节
• 100% 100% 强制拉伸 → 圆角变椭圆 / 曲线变形 / 高光位置漂移
• 设计师切图时已经按真实容器尺寸做了像素级调整，前端只需配合不要破坏

正确做法

/* 容器尺寸保持切图原比例 */
.banner {
  width: 1280px;     /* 切图原始宽 ÷ scale */
  height: 320px;     /* 切图原始高 ÷ scale */
  background-image: url(/banner.png);
  background-size: auto 100%;   /* 高占满，宽按比例 */
  background-repeat: no-repeat;
}

老踩坑

长江小学安防大屏 / 大巴山中药材驾驶舱多个 demo 项目都踩过这个坑 — 切图拉伸后设计师不认。

详细规约：memory feedback_preserve_cut_aspect.md

Drawer view 内部切换（不叠层）

Drawer 内出现"子流程"（如新建商品流程里要新建规格族）时，用同 Drawer 内 view 切换，不要叠层第二个 Drawer。

实现思路

• 父 Drawer 一直 open，加 spuViewOpen 等 state 控制内部 view
• 父 Drawer 的 title / footer / body / closeIcon 都按 view state 条件渲染
• 子 view 的 closeIcon 改成 <RiArrowLeftLine /> 返回箭头
• onClose：子 view 状态 → 返回父 view，不是关 Drawer

为什么不叠层

• 叠层 Drawer 视觉层级混乱（哪个是当前？）
• 背景遮罩重叠像素加深问题
• 用户关闭子 Drawer 容易误关父 Drawer

已实现案例

CommodityList 新建商品 Drawer → 「+ 新建规格族」子 view（task #103）

详细规约：ui/doc/drawerViewSwitch.md

Snapshot demo 模式

ops-center-web 的 demo 模式（部署到 alaya-ops-snapshot.pages.dev）通过 window.__SNAPSHOT__ 全局标记激活。

关键能力

• Mock 拦截：window.fetch 重写，所有 /api/ 请求返回 mockData 不真打后端
• access 全开：access Proxy 任何 key 返回 true，所有菜单可见
• 构建信息注入：window.__SNAPSHOT_BUILD__ = { hash, time } 供 UI 版本 tag 显示
• UI 版本标识：右上角橙色 tag「UI 版本」+ tooltip 显示 commit hash + build 时间
• 原型对比 FAB：右下角浮动按钮，点击叠层显示原型 HTML iframe，URL hash 联动子页

代码标记

所有 demo 模式相关代码用 @ui-change-snapshot 注释标记，方便合代码时整段删除恢复生产模式。

部署流程

# Node 20 切换
PATH="/Users/dang/.local/share/fnm/node-versions/v20.20.2/installation/bin:$PATH"

# 构建（输出到 dist/）
npm run build:snapshot

# 重命名
rm -rf dist-snapshot && mv dist dist-snapshot

# 部署到 CF Pages
npx wrangler pages deploy dist-snapshot \
  --project-name alaya-ops-snapshot \
  --branch main \
  --commit-dirty=true \
  --commit-message "<英文消息>"

详细规约：ui/doc/snapshotDemoMode.md + ui/doc/prototypeCompareFab.md

改动记录

本节按日期顺序记录 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），位置统一进白底块。

本节配套产出

2026-05-09 · 商品 / SKU 详情页 + 全局规范扩充

商品管理列表 / LLM 推理服务 / SKU 详情页迭代过程中沉淀的全局规则，全部进 src/global.ui.css + ui/doc/ 留底。

本轮配套产出

2026-05-09 · 表单选择器规范（4 种组件取舍）

迭代过程中反复在 Segmented / Radio.Group(button) / 自定义 alaya-tabs / Select 之间切换，沉淀决策树。

详见上方《表单选择器组件》整章。

2026-05-11 · ProTable 表格操作区 Toolbar 右侧 padding 对齐

修正 .ant-pro-table-list-toolbar-container 与下方表格单元格右沿错位 16px 的视觉 bug。

修改文件：src/global.ui.css（!important 规则 24 → 8）+ src/components/AlayaProTable/index.global.less（注释同步）+ ui/doc/toolbarPaddingFix.md（文档）

通用启示：覆盖 AntD ProTable 组件样式时，必须先确认有几层嵌套容器都加了 padding——任何"右侧多出一截"的视觉感往往来自两层 padding 叠加，不是 AntD 默认偏大。

2026-05-11 · 5 个 Drawer 统一规范重做

把 ProductList / BundleList / AidcList / MeterList / BillingMode 5 个新建/编辑 Drawer 全部对齐 CommodityList 4 步 Steps 抽屉的规范。新增 2 个共享卡片组件，统一 4 态生命周期颜色映射。

详见 Drawer 统一规范 节、ui/doc/drawerStandard.md、CHANGELOG-design-guo-minor.md「2026-05-11 · 5 个 Drawer 统一规范重做」。

2026-05-12 · 卡片视图规约定型 + 状态/分类 Tag 统一 + Loading 改造

围绕"业务对象类列表卡片"的视觉规约定型，覆盖状态显示、分类显示、操作位置、卡片样式、首屏 loading 五大维度。

详见 卡片列表规约 + 首屏 Loading 规范 节，ui/doc/cardListStandard.md + ui/doc/loadingSpinner.md，CHANGELOG-design-guo-minor.md「2026-05-12」。

2026-05-12 收口 · 列表视图模式最终规约 + 下架按钮颜色统一 + 编码 Link 规约

当天晚些时候用户三次拍板后的最终规约。

详见 表格列规范 · 编码字段展示 节。

2026-05-13 · BillingMode / MeterList 对齐原型 + 6 模块 toast 文案统一 + 价格颜色规约

围绕计价模块两张表单页 + 全局 toast 文案 + 数值色规约的三大整改。

详见 Toast 文案规约 + 价格 / 数值类显示规约，ui/doc/toastWording.md + ui/doc/priceDisplayRule.md，CHANGELOG-design-guo-minor.md「2026-05-13」。

Toast 文案规约

2026-05-13 由 PM 反馈定型："6 模块新建/编辑/下架的 toast 全部用『操作成功』，原型已经写好了专属文案，为什么不照着用？"

硬规

6 模块落地清单

价格 / 数值类显示规约

2026-05-13 PM 反馈："计量项列表的单价为什么用橘色？我们没这种用法。" 起源 MeterList 旧版用 var(--alaya-color-warning) 给单价上橘色 — warning 是"告警"语义，价格不是告警。

硬规

颜色语义对照

代码模板

// MeterList 标杆 (.less)
.priceInline {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.priceMain {
  font-weight: 600;
  color: var(--alaya-color-text);        /* ✅ 默认黑 */
}
.priceOffline {
  font-weight: 600;
  color: var(--alaya-color-text-quaternary); /* 已下架灰 */
}

// .tsx 渲染
<span className={styles.priceInline}>
  <span className={record.status === 'offline' ? styles.priceOffline : styles.priceMain}>
    {record.basePrice}
  </span>
  <span className={styles.priceUnit}>{record.basePriceUnit}</span>
</span>

业务对象类列表卡片规约

所有"业务对象类"列表卡片（ProductList / CommodityList / BundleList 等）按本规约定型。涵盖容器 / 卡片头 / 状态显示 / 分类显示 / 操作位置 / 视图切换 6 个维度。

硬性规约

卡片操作位置规则（核心）

┌──────────────────────────────┐
│ 卡片信息...                   │
│ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─  │
│ [危险]   ··    [次] [主]      │
│  左               右          │
└──────────────────────────────┘

状态 Tag vs 分类 Tag — 视觉重量必须拉开

代码模板

// cardHead：图标 + 标题块 + 状态 Tag
<div className={styles.cardHead}>
  <img src={iconMap[item.code]} width=64 height=64 />
  <div className={styles.cardTitleWrap}>
    <h3 className={styles.cardTitle}>
      {item.name}
      <span className={styles.cardCode}>{item.code}</span>
    </h3>
    {/* 分类用文字描述 */}
    <div className={styles.cardLine}>{item.line}</div>
  </div>
  {/* 状态用彩色 Tag */}
  <Tag color={statusTagColor[item.status]}>{statusLabelMap[item.status]}</Tag>
</div>

// actionRow：危险左 / 主操作右 / 锁底
<div className={styles.actionRow}>
  {item.status !== 'offline' && (
    <Button type="link" size="small" danger onClick={handleOffline}>下架</Button>
  )}
  <div className={styles.actionSpacer} />
  <Button type="link" size="small" onClick={handleEdit}>编辑</Button>
  <Button type="link" size="small" onClick={handleView}>查看商品</Button>
</div>

首屏 Loading 规范

首屏 loading 由三层视觉接力，HTML 静态层做，不依赖 React。文件位置：public/scripts/loading.js（首屏预加载脚本）+ src/components/loading-ui/（应用内 React 组件库）。

三层接力

LogoSpinner 关键技术点

内联骨架屏（关键设计决策）

React registerLoaded 函数（src/app.tsx）会物理 removeChild(#globalLoading) 删 logo DOM 节点，CSS opacity transition 无效。所以骨架屏必须从启动就在 DOM 底层 opacity:1，logo 上层覆盖 — React 删 logo 瞬间骨架屏自动暴露，零间隙。

应用内 Loading 组件库

已知局限（不再尝试解决）

详细规约 + 关键代码 + 移除时机逻辑 + 反例清单，见 ui/doc/loadingSpinner.md。