创信出口贸易合同管理系统的界面规范。系统是内部业务后台：财务、资料、许可证、信息员等岗位每天在同一套页面里录单、核价、生成合同和登记履约。界面以 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-title 15px 与菜单名一致。
• 正文 body 14px/22px。小节标题 section-title 14px 粗体，左侧 3px nav-active 蓝条。
• 金额、汇率、数量用等宽数字（cx-num 或 font-variant-numeric: tabular-nums），表格中金额列右对齐；订单详情车型明细表金额左对齐（一期版式）。
• 换汇比用 ratio-value 20px 粗体，颜色随达标结果。

布局

• 主布局固定：侧栏宽 sider-width 220px，顶栏高 header-height 52px，内容区上下 20px，左右至少 24px；工作区内容最宽 workspace-max 1440px，超出部分两侧留白。用 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-width 96px。只读详情用 Descriptions bordered size="small" column={2}。

表单

所有表单控件用同一尺寸。页面表单和弹窗表单只在标签位置上不同。

• 控件尺寸：页面表单和弹窗表单都用 antd 默认尺寸 middle。输入框、选择框、数字框和按钮高 32px（control-height）。Form、Form.Item 和输入控件不设 size="small"。size="small" 只用于表格、Descriptions、表格行内按钮和提示条中的操作按钮。
• 页面表单（订单录入、补充资料等）：标签在输入框上方（Form layout="vertical"），字段按网格多列排列。
• 弹窗表单：用 Cx.ModalForm（antd Form 的水平布局）。字段排成一列，标签和输入框在同一行，标签右对齐，标签后有冒号，必填项有红色星号。右对齐使标签紧靠输入框，长标签和短标签混排时也容易对应。
• 标签列宽：一个弹窗内所有标签同宽，宽度按最长的标签计算。汉字和全角符号每个 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-sm 6px；结果卡、贸易链卡片、Card radius-md 8px；登录卡片 radius-lg 12px。
• 卡片靠底色区分，不加阴影。阴影只有登录卡片 shadow-login。
• 分隔线：小节标题下 line，表格行 table-line。

状态与动效

• 加载用 antd Skeleton（详情页）或 Table loading。不做页面切换动画。
• 禁用菜单项透明度 0.4。悬停沿用 antd 默认。
• 焦点用 antd 默认焦点环；可点击的表格行 focus-visible 时显示 2px primary 描边。

图标

• 只用 @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。