短表单信息块按前端实现回改：默认等分、放不下的块按内容加宽，数值 18px

- .sf-tiles 改为可换行的 flex；.sf-tile 基准宽度比四等分多 1px、最小宽度取内容宽度，一行最多三块
- .sf-tile b 改为 18px / 26px（与结果块同档），去掉单行省略号、过长时折行（不能折行时最小宽度会超出整行）
- 补录弹窗设计要点补一条信息块规则；README 记录回改；test.mjs 新增两条补录弹窗断言
- 重新生成 CMS-UI完整设计.html

CMS-UI完整设计.html

@@ -849,10 +849,13 @@ body.bk-solo .bk-host { width: 1440px; }
 .dg-s .dg-hd { border-bottom: 0; padding-top: 4px; }
 .dg-s .dg-bd { padding: 8px 24px 24px; display: flex; gap: 20px; }
 .dg-s .sf-main { flex: 1; min-width: 0; }
-.sf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
-.sf-tile { padding: 12px 16px; border-radius: var(--r-card); background: var(--c-primary-bg); min-width: 0; }
+/* 信息块（2026-10-18 按前端 DialogTiles 回改）：默认按块数等分；数值一行放不下的块按内容加宽，其余块平分剩下的宽度。
+   基准宽度比四等分多 1px：一行最多三块，三块里一块偏长时另两块能让出宽度；一整行都放不下时才整块换到下一行 */
+.sf-tiles { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
+.sf-tile { flex: 1 1 calc((100% - 48px) / 4 + 1px); min-width: fit-content; padding: 12px 16px; border-radius: var(--r-card); background: var(--c-primary-bg); }
 .sf-tile .l { display: block; font-size: 13px; color: var(--t2); }
-.sf-tile b { display: block; margin-top: 2px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--c-link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* 数值 18px / 26px，与结果块同档；写的是编号、证券等操作对象，过长时折行、不用省略号截断（也只有能折行，上面的最小宽度才会以整行为限） */
+.sf-tile b { display: block; margin-top: 2px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--c-link); overflow-wrap: anywhere; }
 .sf-tile b i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--c-link); opacity: .7; margin-left: 4px; }
 .sf-rows { display: flex; flex-direction: column; gap: 18px; }
 .sf-row { display: flex; gap: 16px; align-items: flex-start; }
@@ -1876,7 +1879,7 @@ window.SPEC_DATA2 = (function () {
       todo: ["「直接下单」会打开发行端 HedgeOrderDialog（普通单 + 算法单），本稿没有画，按弹窗 J 的卡片分区实现。"] },
     { key: "dlg-fill", group: "弹层", title: "补录弹窗（短表单）", kind: "shell", end: "issue", active: "home", ovl: ["order", "fill"], sub: "短表单布局：标签在左 + 顶部信息块 + 底部结果块",
       src: "views/issue/order/components/HedgeFillDialog.vue；布局按 2026-10-08 给的下单弹窗",
-      points: ["宽 640px；标题下一行写操作的是哪一笔主订单和方向；顶部两个高亮信息块放主订单编号、证券，表单里不再重复。", "标签在左、右对齐、单列；对冲系统是「自定义｜TRS」两段切换，点一下下面的字段就变；成交股数、成交均价用带加减的数字框。", "算出来的值放在表单底部的灰色结果块里，写明算法，不可修改；必填项前有红星，校验失败的输入框变红并在下方显示原因。", "底部左侧一句提示，右侧取消、确定。长表单（新建投资者）仍用弹窗 J 的卡片分区。"],
+      points: ["宽 640px；标题下一行写操作的是哪一笔主订单和方向；顶部两个高亮信息块放主订单编号、证券，表单里不再重复。", "信息块数值 18px（与结果块同档）；默认按块数等分，数值一行放不下的块按内容加宽、其余块平分剩下的宽度，一行最多三块，一整行都放不下才换行；编号等操作对象过长时折行，不用省略号截断（2026-10-18 按前端实现回改）。", "标签在左、右对齐、单列；对冲系统是「自定义｜TRS」两段切换，点一下下面的字段就变；成交股数、成交均价用带加减的数字框。", "算出来的值放在表单底部的灰色结果块里，写明算法，不可修改；必填项前有红星，校验失败的输入框变红并在下方显示原因。", "底部左侧一句提示，右侧取消、确定。长表单（新建投资者）仍用弹窗 J 的卡片分区。"],
       todo: ["代码现状只有「确定」、校验失败用全局提示报错；本稿加了「取消」和行内校验——请确认。"] },
     { key: "dlg-investor", group: "弹层", title: "新建投资者弹窗（长表单）", kind: "shell", end: "sales", active: "投资者管理/投资者信息", ovl: ["investor"], sub: "弹窗 J 卡片分区",
       src: "views/sales/investor/components/InvestorCreateDialog.vue",

src/README.md

@@ -10,7 +10,7 @@
 | `kit.css` | 画布内组件样式（按钮、输入、标签、表格、卡片、提示、弹窗外观），全部读令牌 |
 | `frame.css` | 框架 A 的布局与收起态（取自分项选型 frames.css 的通用部分 + A） |
 | `overlay.css` | 弹窗骨架、表单项、弹窗 J 的卡片分区、抽屉骨架、描述表、数字卡片、抽屉 E |
-| `pages.css` | 新增页面：首页、页内页签、清算、A股自动化配置（`.acf-*`）、TRS 下单、票据详情、确认框、个人中心、404/401、登录、反馈类 |
+| `pages.css` | 新增页面：首页、页内页签、清算、A股自动化配置（`.acf-*`）、TRS 下单、票据详情、确认框、个人中心、404/401、登录、反馈类；短表单弹窗（`.sf-*`，信息块 2026-10-18 按前端 `DialogTiles` 回改：默认等分、数值一行放不下的块按内容加宽，数值 18px、过长折行不截断；方案稿在 `../../补录信息块编号折行·方案预览/`） |
 | `theme.css` | 令牌之外的结构差异（渐变勾选框、渐变页签线等，读 `--grad`，两套共用）＋ 深色专属的几条（`[data-dark]`、`[data-v="db"]`），最后加载 |
 | `fonts/` | Inter 400/500/600（构建时内嵌，F 的数字字体） |
 | `app.js` | 画布核心：图标、令牌注入、框架 A 外壳、列表页（TRS 委托查询是母单→子单树形行）、树形行表格 `treeTableHTML`（展开状态记在画布状态 `st.tree[表格键]`，动作 `tree` / `treeall`）、弹窗 J（补录、新建投资者）、抽屉 E（订单详情）、画布挂载与交互；对外暴露 `window.UI` |

src/data2.js

@@ -341,7 +341,7 @@ window.SPEC_DATA2 = (function () {
       todo: ["「直接下单」会打开发行端 HedgeOrderDialog（普通单 + 算法单），本稿没有画，按弹窗 J 的卡片分区实现。"] },
     { key: "dlg-fill", group: "弹层", title: "补录弹窗（短表单）", kind: "shell", end: "issue", active: "home", ovl: ["order", "fill"], sub: "短表单布局：标签在左 + 顶部信息块 + 底部结果块",
       src: "views/issue/order/components/HedgeFillDialog.vue；布局按 2026-10-08 给的下单弹窗",
-      points: ["宽 640px；标题下一行写操作的是哪一笔主订单和方向；顶部两个高亮信息块放主订单编号、证券，表单里不再重复。", "标签在左、右对齐、单列；对冲系统是「自定义｜TRS」两段切换，点一下下面的字段就变；成交股数、成交均价用带加减的数字框。", "算出来的值放在表单底部的灰色结果块里，写明算法，不可修改；必填项前有红星，校验失败的输入框变红并在下方显示原因。", "底部左侧一句提示，右侧取消、确定。长表单（新建投资者）仍用弹窗 J 的卡片分区。"],
+      points: ["宽 640px；标题下一行写操作的是哪一笔主订单和方向；顶部两个高亮信息块放主订单编号、证券，表单里不再重复。", "信息块数值 18px（与结果块同档）；默认按块数等分，数值一行放不下的块按内容加宽、其余块平分剩下的宽度，一行最多三块，一整行都放不下才换行；编号等操作对象过长时折行，不用省略号截断（2026-10-18 按前端实现回改）。", "标签在左、右对齐、单列；对冲系统是「自定义｜TRS」两段切换，点一下下面的字段就变；成交股数、成交均价用带加减的数字框。", "算出来的值放在表单底部的灰色结果块里，写明算法，不可修改；必填项前有红星，校验失败的输入框变红并在下方显示原因。", "底部左侧一句提示，右侧取消、确定。长表单（新建投资者）仍用弹窗 J 的卡片分区。"],
       todo: ["代码现状只有「确定」、校验失败用全局提示报错；本稿加了「取消」和行内校验——请确认。"] },
     { key: "dlg-investor", group: "弹层", title: "新建投资者弹窗（长表单）", kind: "shell", end: "sales", active: "投资者管理/投资者信息", ovl: ["investor"], sub: "弹窗 J 卡片分区",
       src: "views/sales/investor/components/InvestorCreateDialog.vue",

src/pages.css

@@ -149,10 +149,13 @@
 .dg-s .dg-hd { border-bottom: 0; padding-top: 4px; }
 .dg-s .dg-bd { padding: 8px 24px 24px; display: flex; gap: 20px; }
 .dg-s .sf-main { flex: 1; min-width: 0; }
-.sf-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
-.sf-tile { padding: 12px 16px; border-radius: var(--r-card); background: var(--c-primary-bg); min-width: 0; }
+/* 信息块（2026-10-18 按前端 DialogTiles 回改）：默认按块数等分；数值一行放不下的块按内容加宽，其余块平分剩下的宽度。
+   基准宽度比四等分多 1px：一行最多三块，三块里一块偏长时另两块能让出宽度；一整行都放不下时才整块换到下一行 */
+.sf-tiles { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 20px; }
+.sf-tile { flex: 1 1 calc((100% - 48px) / 4 + 1px); min-width: fit-content; padding: 12px 16px; border-radius: var(--r-card); background: var(--c-primary-bg); }
 .sf-tile .l { display: block; font-size: 13px; color: var(--t2); }
-.sf-tile b { display: block; margin-top: 2px; font-size: 20px; line-height: 28px; font-weight: 600; color: var(--c-link); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+/* 数值 18px / 26px，与结果块同档；写的是编号、证券等操作对象，过长时折行、不用省略号截断（也只有能折行，上面的最小宽度才会以整行为限） */
+.sf-tile b { display: block; margin-top: 2px; font-size: 18px; line-height: 26px; font-weight: 600; color: var(--c-link); overflow-wrap: anywhere; }
 .sf-tile b i { font-style: normal; font-size: 13px; font-weight: 400; color: var(--c-link); opacity: .7; margin-left: 4px; }
 .sf-rows { display: flex; flex-direction: column; gap: 18px; }
 .sf-row { display: flex; gap: 16px; align-items: flex-start; }

src/test.mjs

@@ -199,6 +199,16 @@ await goPage("drawer");
 ok((await st()).ovls.join() === "order" && (await count(`${cv} .kvg.bd3`)) === 2, "订单详情抽屉：两张描述表");
 await goPage("dlg-fill");
 ok((await st()).ovls.join() === "order,fill" && (await count(`${cv} .ovl.lv2 .sf-tile`)) === 2 && (await count(`${cv} .ovl.lv2 .sf-row`)) >= 5 && !(await has(`${cv} .ovl.lv2 .dg-s.lt`)) && (await page.$eval(`${cv} .ovl.lv2 .sf-row > label`, (el) => getComputedStyle(el).textAlign)) === "right", "补录弹窗：顶部两个信息块、标签在左，叠在抽屉上");
+// offsetWidth / offsetHeight 是布局尺寸，不受舞台缩放影响
+ok(await page.$$eval(`${cv} .ovl.lv2 .sf-tile b`, (els) => els.length === 2 && els.every((b) => getComputedStyle(b).fontSize === "18px" && b.offsetHeight === 26)), "补录弹窗：信息块数值 18px、一行显示");
+const tileGrow = await page.$$eval(`${cv} .ovl.lv2 .sf-tile`, ([a, b]) => {
+  const v = a.querySelector("b"), old = v.textContent;
+  v.textContent = "ABCDELTA-202609161234-0001"; // 比等分宽度长的编号
+  const r = { wa: a.offsetWidth, wb: b.offsetWidth, h: v.offsetHeight, sameRow: a.offsetTop === b.offsetTop };
+  v.textContent = old;
+  return r;
+});
+ok(tileGrow.wa > tileGrow.wb && tileGrow.h === 26 && tileGrow.sameRow, "补录弹窗：数值一行放不下的信息块按内容加宽，两块仍在同一行、数值不折行");
 await goPage("dlg-investor");
 ok((await st()).ovls.join() === "investor" && (await count(`${cv} .dgc`)) === 4 && (await text(`${cv} .brand`)).includes("销售"), "新建投资者：四张卡片，在销售端");
 const lackBefore = await text(`${cv} .dg-ft .hint`);