ALAYA NEW CLOUD · BP
记录每一次界面调整的改前问题、修改方案、设计原因、定版参数和复用边界。后续优化同类型页面时，先从这里检查已有结论。
卡片式资源列表家族的统一优化链路，覆盖极核训练、云容器实例和 Alaya Lab 三个页面，记录改了什么以及为什么。
改前问题
三个资源列表的表头描边、字体继承和卡片间距不一致；极核训练还被 AntD 隐藏测量行额外撑出首个间距。
修改方案
统一表头为整块语义表面，只保留整体外轮廓；统一字体与 16px 间距，并在 AntD 卡片表格中隐藏测量行。
为什么改
三个页面属于同一卡片式资源列表家族，用户需要用同一套视觉规则识别、比较和操作不同资源。
JobTableRender.less / cloudContainerInstance / alayaLab改前问题
大卡片占高且技术字段过长；视图切换增加认知成本，时间、创建人、状态、镜像和分页器也缺少统一展示规则。
修改方案
收敛为表格骨架的复合列表：首列组合任务身份信息，状态独立成列，长镜像截断并显示深色 Tooltip；统一状态色、图标尺度、行边界与分页器。
为什么改
训练任务列表的核心是快速识别任务并横向比较关键指标。一个稳定视图比两个职责重叠的视图更高效。
JobTableRender.tsx / JobTable.tsx / TaskStatusTag
改前问题
筛选条件不易确认；“更多”浮层过窄、热区局促，查询与行操作都缺少清晰反馈。
修改方案
已选条件按需显示第二排摘要；操作浮层扩为 120px，菜单项 36px，并使用 hover 展开。
为什么改
列表工作流既要看清当前查询范围，也要快速执行轻操作；两者共同决定列表的操作效率。
FilterToolbar / JobTableRender.less
改前问题
400px 宽度导致随机断行，标题和正文挤在内容区，大段红黑混排，风险层级失控。
修改方案
宽度调整为标准 M 档 560px；标题进入标准 Modal 标题区，并使用 20px AntD 警告语义图标；说明和风险分段，风险使用浅红提示区。
为什么改
语义图标先建立风险预期，结构化说明再帮助用户理解后果；两者共同服务这一次确认弹窗改造。
JobModalCom.tsx
改前问题
基本信息与任务配置的头部、分割线和间距不统一；资源、存储和运行信息的层级不清，表头与状态标签也出现视觉语义不一致。
修改方案
基本信息保留为独立模块；任务配置作为一个大模块，资源配置、存储配置和任务运行信息作为内部二级分区。统一标题区、内容间距、表头 token 和状态映射。
为什么改
详情页需要先建立对象概览，再连续阅读配置与运行信息。一个主模块承载多个相关分区，比拆成多个同级卡片更符合信息层级。
TaskInfo / SemanticStatusTag / PodStatusTag
每个页面单独记录改前问题、改后规则、实现文件和验收证据；没有截图或实测证据的页面不标为完成。
| 页面 | 页面类型 | 本批修改 | 实现文件 | 验收证据 | 前端状态 |
|---|---|---|---|---|---|
极核训练/backend/resource/vks-raw/HTrain |
表格骨架卡片列表 | 整体表头、16px 间距、白色内容面、1px 外描边；隐藏 AntD 测量行。 | quantumTrain/main/index.lessJobTableRender.less |
实机截图 + computed-style：表头 44px、首行间距 16px、行高 72px、14/500/22。 | 已验证 |
云容器实例/backend/resource/vks-raw/cci |
独立业务卡片列表 | 整块表头、卡片之间 16px、白色卡片面、统一文字层级和操作区边界。 | cloudContainerInstance/main/index.less |
HMR 编译通过；需要在当前真实数据页复核表头、卡片和分页器。 | 待视觉复核 |
Alaya Lab/backend/resource/alayaLab |
独立业务卡片列表 | 按同类列表规则统一表头、筛选区高度、卡片间距、标签、操作和分页器。 | alayaLab/main/index.less |
HMR 编译通过；需要在真实页面复核筛选区高度、卡片图标和翻页格式。 | 待视觉复核 |
交付包
规范页负责表达决策，前端分支负责实现，截图和 computed-style 负责验收。当前交接分支为 ui/queue-v2-polish，基于 origin/queue-v2。
统一验收项
表头 14px / 500 / 22px；gray-2 语义背景；只保留整体 1px 外描边；无列间竖线；表头到第一张卡片、卡片到卡片均为 16px；筛选区不单独加白底；分页器控件同高。
未完成项
CCI 和 Alaya Lab 代码已编译，但本批尚未补齐真实页面截图与测量证据，因此保留为“待视觉复核”，不会冒充定版。
所有 BP 列表页和数据面优先复用的固定参数。
| 对象 | 定版值 | 为什么 | 适用范围 |
|---|---|---|---|
| 列表页标题栏 | height: 56px | 建立稳定页面起点，标题垂直居中。 | 资源列表页 |
| Tab / 菜单栏 | height: 48px | 标签文字居中，激活线固定在底部。 | 含状态切换的列表页 |
| 筛选区 | background: transparent | 避免标题、筛选和数据面被多个白块割裂。 | FilterToolbar / ProTable search |
| 整页背景图 | opacity: 10% | 保留品牌氛围，不影响数据可读性。 | BP 应用壳层 |
| 右侧主内容面 | white 60% | 与整页背景融合，同时承托密集内容。 | 主内容容器 |
| 工具图标 | 20px / hit-area 40px | 符合 16/20/24 图标尺度，保证点击热区。 | 顶部工具区 |
| Tooltip | dark translucent | 短提示需要与白色 Dropdown/Popover 区分。 | 截断文本、图标说明 |
| 列表分页器 | 32px / top 16px / right | 页码与每页条数同高；当前页用 8% 主题色浅底和蓝色数字，避免强描边产生按钮大小错觉。 | 表格与卡片列表 |
| 颜色与描边 | var(--alaya-*) | 避免页面级硬编码，支持主题统一调整。 | 全局 |
| 辅助语义色 | semanticPalette | Tag、Badge、Alert、Result、message 与语义图标共用蓝/青/绿/琥珀/橙/红/灰色板；同一业务对象的列表和详情复用状态组件。 | 全局状态反馈 |
| 状态标签映射 | 20px / 12px / dot 5px | 原始状态只标准化一次，文案、语义色、状态点、图标和动效从同一结果派生；同一业务域禁止混用 Ant Badge、Tag color 和页面硬编码状态色。 | 列表、详情、内嵌表格、抽屉、结果页 |
| 同类列表表头 | 14px / 500 / 22px / gap 16px | 极核训练、云容器实例和 Alaya Lab 共用同一表头规则；表头保留整体外描边，不给每列增加内部竖线。AntD 卡片表格需隐藏测量行，避免首个间距被撑成 32px。 | 计算资源列表家族 |
| 前端同步 | 决策 -> 规范页 -> 共享实现 -> 证据回填 | 台账不是代码生成器；前端必须按受影响路由和共享组件落地，并回传文件、编译结果与视觉证据。 | 所有定版改动 |
| 详情页二级分区 | 20px 24px / gap 12px | 相关配置留在一个主模块内，通过 14px 二级标题和 1px 分隔线建立层级，不重复包装成同级卡片。 | 对象详情页 |
先看它长什么样，再按信息语义选组件；外形相近不代表可以互换。
色阶：背景使用 5 阶色的 15% 透明度，文字使用 8 阶色，圆点使用 5 阶实色。用于：运行、创建、排队、成功、失败、停用等生命周期状态。不用作：框架、资源类型或筛选条件。
用于：类型、框架、来源、能力分类。保持白底灰边，不抢状态层级。
用于：未读数量、小红点，以及密集表格中的轻量行内状态。关键业务状态或需要强化比较时，仍使用带底色的 Status Tag。
用于：筛选完成后的条件摘要，可单项移除。它属于查询结果上下文，不是状态展示。
用于：表单中从少量互斥或多选项里做选择。外层浅灰、选中项白底；它是输入控件，不用于只读状态展示。
在当前页面完成短流程。按内容复杂度选择尺寸，不按“看起来宽一点”临时写值。
480px560px640px800px960pxInfoCircleFilledblue-5 · #0064FACheckCircleFilledgreen-5 · #3BB346ExclamationCircleFilledorange-5 · #FC8800CloseCircleFilledred-5 · #F93920用于简短的信息反馈与确认。选择左侧类型可查看对应调用方式，并打开 BP 定版样式的实际弹窗。
暂停任务将停止计费，并删除该任务当前运行的容器组。
| 规范项 | 定版值 | 使用说明 |
|---|---|---|
| 容器 | white / radius 2px | 沿用 BP 当前偏直角的基础圆角，使用主题轻阴影；不做毛玻璃和大投影。 |
| 标题 | 16px / 24px / 600 | 普通表单、详情、配置弹窗只使用纯文字标题。 |
| 语义图标 | 20px / gap 8px / color-5 | Info / Success / Warning / Error 分别使用 AntD 的 InfoCircleFilled / CheckCircleFilled / ExclamationCircleFilled / CloseCircleFilled，并使用新版色板的 5 阶实色；正文不重复。 |
| 色阶关系 | Icon: 5 / Tag: bg 5@15% + text 8 + dot 5 | 图标承担强语义提示，直接使用 5 阶实色；BP 当前浅色状态 Tag 使用 5 阶色的 15% 背景、8 阶文字和 5 阶状态点，因此同一语义色的视觉明度不会完全相同。 |
| 内容 | 14px / 22px | 正文和说明保持可读；风险文本放入浅色语义提示区，不使用大段红黑混排。 |
| 内边距 | 20px 24px | 内容容器遵循 20 / 24 间距档；表单字段纵向间距 16px。 |
| 关闭按钮 | icon 16px / hit-area 32px | 放在右上角；hover 使用浅灰底。阻断型流程可隐藏，但必须有明确退出路径。 |
| 底部操作 | height 32px / padding-inline 16px / gap 8px | 按钮宽度由文案和左右 padding 自然决定，不强制最小宽度；次操作在左、主操作在右，不可逆删除使用 danger 主按钮。 |
| 遮罩与关闭 | mask 45% | 表单、危险确认和有未保存内容的弹窗设置 maskClosable=false，避免误关闭。 |
| 高度与滚动 | max-height: calc(100vh - 96px) | 超高时只滚动 body，标题与 footer 保持可见；不要让整个页面跟随滚动。 |
| 移动端 | width: calc(100vw - 32px) | 小于 576px 时覆盖固定宽度；复杂表单改为全屏页或 Drawer。 |
| 状态清理 | destroyOnHidden | 需要每次重新初始化时启用；Modal 内 Form 同时使用 preserve=false 或显式 reset。 |
Modal / ModalForm / Modal.confirm
任务配置已更新，新的配置将在下一次启动时生效。
已经形成复用规则的壳层、浮层和视觉资产方向。
| 日期 | 决策 | 原因 | 状态 |
|---|---|---|---|
| 2026-07-24 | 同类列表表头与间距定版 | 统一计算资源列表的表头字体、整体描边和 16px 间距；修复 AntD 隐藏测量行导致极核训练首个间距变成 32px 的问题。 | 定版 |
| 2026-07-23 | 云容器实例连续复合表格 | 由分离卡片试改为连续表格骨架：gray-2 表头、单一外框、1px 行分隔；保留业务工具与操作，将完整 ID、镜像路径收至详情。等待页面确认后定版。 | WIP |
| 2026-07-23 | Modal 五档尺寸体系 | 弹窗只使用 480 / 560 / 640 / 800 / 960，消除临时宽度并建立复杂度边界。 | 定版 |
| 2026-07-23 | 状态标签单源映射 | 避免缺省状态出现“活跃文字 + 中性灰色”的语义错配。 | 定版 |
| 2026-07-23 | 任务信息详情层级统一 | 基本信息独立，相关任务配置集中在一个主模块的二级分区内。 | 定版 |
| 2026-07-22 | 全局辅助语义色板统一 | 消除任务标签与 Ant 语义组件的颜色割裂，降低默认高饱和辅助色的突兀感。 | 定版 |
| 2026-07-07 | PageContainer 默认头部透明 | 避免逐页写 header.style，也避免白色壳层嵌套。 | 定版 |
| 2026-07-06 | 侧栏收起按钮放在侧栏右下区域 | 控制对象属于侧栏，不能遮挡 Logo 或导致顶部导航位移。 | 定版 |
| 2026-07-06 | 顶部浮层纯白、统一圆角 | 毛玻璃在密集菜单中降低可读性，纯白更稳定。 | 定版 |
| 2026-07-06 | Select 去除蓝色方形 focus 异常 | 默认焦点框与圆角输入控件冲突，破坏整体规范。 | 定版 |
| 2026-07-06 | 空状态 2.5D 图片统一 | 底座、倾角和元素聚合方式仍需继续确认。 | WIP |
保证每次设计调整能被后续页面正确复用。