优化

2026-10-21 07:53:36 +08:00
parent 7fcf7c2fce
commit 1350ca6508
3 changed files with 29 additions and 0 deletions
@@ -28,6 +28,7 @@
 | Canvas 图表字体、颜色、坐标网格与提示框主题 | [`adminWorkbenchChartTheme.ts`](../../apps/admin-web/src/styles/adminWorkbenchChartTheme.ts) |
 | 显式接入范围、变量归属、公共类与浮层作用域合同 | [`adminWorkbench.test.ts`](../../apps/admin-web/src/styles/adminWorkbench.test.ts) |
 | 原有表格、控件和弹窗密度 | [`adminDensityTokens.css`](../../apps/admin-web/src/styles/adminDensityTokens.css)、[`adminDensity.css`](../../apps/admin-web/src/styles/adminDensity.css) |
+| 弹框与抽屉的标题、正文滚动和底部操作 | [`AppDialog.vue`](../../apps/admin-web/src/shared/components/AppDialog.vue)、[`AppDrawer.vue`](../../apps/admin-web/src/shared/components/AppDrawer.vue)；真实 Element 挂载回归见 [`AppDialog.layout.test.ts`](../../apps/admin-web/src/shared/components/AppDialog.layout.test.ts) |

 以下列出样板的主要取值，便于理解效果；代码以对应令牌为准，修改数值只改唯一实现入口，不在页面重新声明默认值。

@@ -127,6 +128,18 @@ DataTable 的属性透传目标是内部表格，不能只把 `workbench-table`

 业务页只保留列数、排列、业务宽度与高度；接入公共类后删除被接管的私有配色、边框和标题外观，不能保留两套 CSS 再叠加优先级或 `!important`。共享组件应明确接入模式并核对实际调用者，避免影响尚未推广的页面。

+### 弹框与抽屉的布局边界
+
+新增、编辑先参考公共 `AppDialog`／`AppDrawer`，表单字段排列仍参考本业务已确认的样板。客户新增／编辑使用三列短字段，地址、备注和长内容跨列；小型确认框保留原宽度。智能装柜等工作台保留原有宽版和 92vh 高度，不把所有浮层压成同一尺寸。
+
+- 标题、正文和页脚样式只匹配当前浮层的直接子节点；业务页的 `:deep` 规则也必须限定自身，不能通过任意后代选择器影响子弹框。
+- 不假设 `AppDialog` 默认一定挂到 body。嵌在另一个弹框、工具栏或有裁切的容器中的独立浮层，应明确设置 `append-to-body`，并把主题类放到实际浮层根。核对关闭、重开、全屏和取消仅影响对应窗口。
+- 标题与底部操作不随长正文滚走，正文使用单一纵向滚动区；真实宽表可在自己的区域横向滚动。不要通过整框 `overflow: hidden`、固定短高度或隐藏按钮解决溢出。
+- 底部多按钮可换行且保持间距；已有复合底栏（统计、分页、提交等）保留自身布局，不强制改成一排普通按钮。工具栏的紧凑按钮尺寸不得传入浮层。
+- 长校验错误应占据正常布局空间，不能遮住下一行；长文件名允许换行，文件选择、上传和删除按钮保持可用宽度。必填标识、字段标签、错误和提交反馈不为清爽而删除。
+
+公共选择器修复至少覆盖真实 Element 挂载下的非 Teleport 嵌套、显式 Teleport、工具栏内浮层及全屏重开。组件测试可证明 DOM、状态与部分 CSS 作用域，不能证明浏览器像素布局或实际滚动已经验收；最终仍由用户在 1920×1080、100% 缩放下截图确认。
+
 ## 图表与数据表达

 Canvas 图表显式导入 `adminWorkbenchChartTheme`，在 option 构建处组合字体、轴标签、网格、颜色与 tooltip；不注册全局 ECharts 主题。业务 option 入口分别为 [`skuTrendChart.ts`](../../apps/admin-web/src/modules/self-operated/skuTrendChart.ts)、[`dashboardChartOptions.ts`](../../apps/admin-web/src/modules/self-operated/dashboardChartOptions.ts)、[`turnoverPresentation.ts`](../../apps/admin-web/src/modules/self-operated/turnoverPresentation.ts)。