创信出口贸易合同管理系统的界面规范。系统是内部业务后台：财务、资料、许可证、信息员等岗位每天在同一套页面里录单、核价、生成合同和登记履约。界面以 antd 6 默认主题为基础，外加深蓝侧栏、白色顶栏和灰色工作区。新页面先复用 antd 组件和本系统的布局组件，不另造视觉风格。
内容基本规则
- 界面文字全部用简体中文。数字、币种代码（USD、CNY）、车架号、合同号保持原样。
- 按钮用“动词 + 对象”：
提交核价、去核价、补充资料、生成合同、打包下载。返回按钮只写返回。 - 确认弹窗写清后果：“确定删除？”配危险按钮；停用、撤销类操作写出影响范围。
- 空状态和错误分开写：列表加载失败显示“订单加载失败，请重试”并带
重试按钮，不显示“暂无数据”。 - 不用 emoji，不用感叹号，不写营销语气。页面里不放解释性注释段落；必要说明放在字段旁的灰色
caption文字或Tooltip。
统一名词
同一事物在所有页面用同一个名称。下表是界面中已固定的名称（来源：代码 FIXED_ROLE_LABELS、ORDER_STATUS 和二期需求 SSOT）。
| 类别 | 界面用词 | 不要写成 |
|---|---|---|
| 岗位 | 超级管理员、公司管理员、资料岗、许可证岗、信息员、退税财务、核价财务、经销商 | 出纳（客户口语，对应现有财务岗位） |
| 订单状态 | 草稿、已提交核价、待生成合同、生成中、合同已生成、被退回 | — |
| 交易对方 | 国外客户（境外买方）、经销商（境内买单方）、车辆供应方、贸易参与企业 | 客户（单独使用时含义不清） |
| 核价 | 核价台、订价参数、供应方含税单价、美元单价、换汇比、核价汇率、经销商费率、加点、贸易链 | 定价参数 |
| 核价方式 | 方式①按供应方含税单价、方式②按美元单价、方式③结汇后定内贸价 | — |
| 单据 | 单据模板、形式发票、外贸合同、境内人民币合同、铭牌 | 合同模板（客户页面） |
| 履约 | 收汇、结汇、付款、许可证提交、许可证签发、报关、结关、运输单证 | 显汇、报关运 |
| 结算 | 汇差（与经销商多退少补）、汇兑损益（报表口径） | 两者混用 |
视觉基础
颜色
- 工作区底色
page-bg，卡片、表格、顶栏、弹窗用surface。不在page-bg上直接放正文段落：text-muted在page-bg上低于 4.5:1。 - 主操作用 antd 主色
primary（antd 默认 #1677ff，系统未改主题）。一个区域只放一个主按钮。 - 侧栏只用侧栏色：底色
sider-bg，菜单文字nav-text，选中项底色nav-active加白字，分组标题nav-section。 - 结果与状态用成对的底色和边框：达标
ok-bg+ok-border+ok-text；不达标或阻断bad-bg+bad-border+bad-text；警告warn-bg+warn-border。状态同时带文字（“达标”“不达标”标签、“暂不能确认”标题），不只靠颜色区分。 - 订单状态用 antd
Tag预设色：草稿 default、已提交核价 blue、待生成合同 orange、生成中 processing、合同已生成 green、被退回 red。用OrderStatusTag，不要手写颜色。 brand只用于品牌图标。登录页用sider-bg到sider-bg-alt的斜向渐变，这是唯一的渐变。
文字
- 字体栈
sans：PingFang SC、Microsoft YaHei，再回退系统字体。系统没有自带字体文件。 - 页内标题
page-heading（h2，21px 粗体：浏览器默认 1.5em，正文 14px）放在页头左侧；顶栏标题header-title15px 与菜单名一致。 - 正文
body14px/22px。小节标题section-title14px 粗体，左侧 3pxnav-active蓝条。 - 金额、汇率、数量用等宽数字（
cx-num或font-variant-numeric: tabular-nums），表格中金额列右对齐；订单详情车型明细表金额左对齐（一期版式）。 - 换汇比用
ratio-value20px 粗体，颜色随达标结果。
布局
- 主布局固定：侧栏宽
sider-width220px，顶栏高header-height52px，内容区上下 20px，左右至少 24px；工作区内容最宽workspace-max1440px，超出部分两侧留白。用AppShell。 - 列表页：
PageToolbar（左标题，右“新建”类主按钮）→ 一行筛选（Space wrap：状态 Select 130px、搜索框 170px、对象 Select 190px、日期范围）→Table size="middle"，分页显示“共 N 条”，整行可点击进入详情。 - 对象页：
ObjectHeader（左标题 + 状态标签，右操作按钮，返回在最右）→ 提示Alert→ 进度Steps（小号，放在小卡片里）→ 带页签的Card。 - 工作台页（核价页）：两栏，左栏宽、右栏窄并吸顶；右栏放计算结果和确认操作。卡片间距 16px。
- 待办任务：
Card标题区放Segmented（待我处理 / 无人处理 / 全部），正文放Table。 - 弹窗在工作区内居中、略偏上。表单弹窗宽度跟随内容，用 antd
Modal。弹窗里的表单按下面“表单”一节。 - 键值行用
KV：标签列宽label-width96px。只读详情用Descriptions bordered size="small" column={2}。
表单
所有表单控件用同一尺寸。页面表单和弹窗表单只在标签位置上不同。
- 控件尺寸：页面表单和弹窗表单都用 antd 默认尺寸 middle。输入框、选择框、数字框和按钮高 32px（
control-height）。Form、Form.Item和输入控件不设size="small"。size="small"只用于表格、Descriptions、表格行内按钮和提示条中的操作按钮。 - 页面表单（订单录入、补充资料等）：标签在输入框上方（
Form layout="vertical"），字段按网格多列排列。 - 弹窗表单：用
Cx.ModalForm（antdForm的水平布局）。字段排成一列，标签和输入框在同一行，标签右对齐，标签后有冒号，必填项有红色星号。右对齐使标签紧靠输入框，长标签和短标签混排时也容易对应。 - 标签列宽：一个弹窗内所有标签同宽，宽度按最长的标签计算。汉字和全角符号每个 14px，其他字符每个 8px，再加 24px（星号和冒号）。示例：“国外客户名称（英文）”10 个字，列宽 164px；“车辆供应方名称”7 个字，列宽 122px。
ModalForm的labels属性按这个规则计算列宽。 - 窄屏：视口不超过 575px 时（例如 390px 宽的手机），antd 把标签放到输入框上方，输入框占满弹窗宽度。不另写窄屏样式。
- 表单项间距用 antd 默认值 24px。校验提示显示在输入框下方，占用这个间距。
- 没有标签的说明文字（例如“开户行和账号由资料岗补充”）加类名
cx-form-offset，与输入框左对齐。 - 新建或修改主档时的同名和相似提醒用
Cx.DuplicateHint，见“查重提醒”。
查重提醒
新建或修改主档（国外客户、车辆供应方等）时，在名称输入框正下方显示查重提醒，与输入框左对齐。
- 同名：红色
Alert type="error"。同名会阻断保存，确认按钮不可用。新建时提醒内有“选用”按钮，点击后选用已有记录。修改时提醒写“不能改成这个名称”，没有“选用”。同名记录已停用时，没有“选用”。有同名时，不再列相似记录。 - 相似：黄色
Alert type="warning"。相似不阻断保存：用户可以选用已有记录，也可以继续新建。修改时不列相似记录。 - 相似记录最多列 3 条，按相似度从高到低。每条显示名称、一行地址和“选用”按钮。地址过长时截断，鼠标悬停显示全文。
- 超过 3 条时，只列前 3 条，列表下方没有条数说明。理由：接口只返回按相似度排序的前几条（当前最多 5 条），条数不能代表全部相似记录；第 4 条以后相似度更低，用处小；用户继续输入名称时列表会更新，也可以在订单表单的下拉框中搜索全部记录。
- 颜色的意思：红色表示必须处理后才能保存，黄色表示请核对后再继续。两种提醒都有文字说明，不看颜色也能区分。
圆角、边框、阴影
- 圆角：控件和状态条
radius-sm6px；结果卡、贸易链卡片、Cardradius-md8px；登录卡片radius-lg12px。 - 卡片靠底色区分，不加阴影。阴影只有登录卡片
shadow-login。 - 分隔线：小节标题下
line，表格行table-line。
状态与动效
- 加载用 antd
Skeleton（详情页）或Table loading。不做页面切换动画。 - 禁用菜单项透明度 0.4。悬停沿用 antd 默认。
- 焦点用 antd 默认焦点环；可点击的表格行
focus-visible时显示 2pxprimary描边。
图标
- 只用
@ant-design/icons的 Outlined 系列，通过Cx.Icon name="…"或组件的icon属性使用。侧栏菜单固定图标：首页看板 DashboardOutlined、待办任务 CheckSquareOutlined、核价台 DollarOutlined、订单录入 PlusOutlined、订单列表 UnorderedListOutlined、经销商管理 ShopOutlined、单据模板 FileTextOutlined、用户管理 TeamOutlined、公司资料 BankOutlined、车型与配件 CarOutlined、交易资料与参数 SettingOutlined；二期新增预警提醒 WarningOutlined、资金流 TransactionOutlined、报表 BarChartOutlined。 - 操作按钮图标：编辑 FormOutlined、提交 SendOutlined、删除 DeleteOutlined、查看 EyeOutlined、下载 DownloadOutlined、返回 ArrowLeftOutlined、新建 PlusOutlined。
- 品牌图标见 Logos 组，或用
Cx.BrandIcon。不用 emoji。
组件
Cx.Root包住整块界面：提供 antd 中文语言包。所有 antd 组件也在同一命名空间：Cx.Button、Cx.Table、Cx.Form、Cx.Form.Item、Cx.Typography.Text。- 本系统组件：
AppShell、PageToolbar、ObjectHeader、OrderStatusTag、SectionTitle、StatusStrip、KV、ResultCard、BlockerList、ModalForm、DuplicateHint、ChainFlow、BrandIcon、Icon。属性见各组件说明和components/index.d.ts。 - 函数：
Cx.navFor(岗位中文名)返回该岗位的侧栏菜单（AppShell不传nav时自动使用）；Cx.labelWidthFor(标签数组)返回弹窗表单的标签列宽。 - 加载顺序：
components/bundle.css，然后脚本components/lib/react.production.min.js、components/lib/react-dom.production.min.js（已有 React 18 的页面跳过这两个）、components/lib/dayjs.min.js、components/lib/dayjs-zh-cn.js、components/lib/antd.min.js、components/lib/ant-design-icons.min.js，最后components/bundle.js（全局window.Cx）。bundle.css中的变量都带默认值，不依赖tokens.css。