zkxw/docs/superpowers/specs/2026-08-06-oa-form-designer-outline-style-e-design.md

OA 表单设计器画布描边优化（方案 E）

日期： 2026-08-06
状态： 已确认
范围： web-admin OA 审批设计器「表单设计」Tab（oa-fc-host iframe）

背景

@form-create/designer 为每个画布组件包一层 _fd-drag-tool，默认常驻蓝色虚线 outline。嵌套布局时多层虚线叠加，影响操作与阅读。对比 Demo（docs/demos/oa-form-designer-outline-styles.html）后选定 方案 E。

目标行为

对象	识别	默认	悬停	选中
叶子字段	._fd-drag-tool 且内部无子 ._fd-drag-tool	无描边	浅绿实线	Mint 实线 #10b981
布局容器	._fd-drag-tool:has(._fd-drag-tool)	极淡虚线	略加深	Mint 实线 #10b981

方案

• 仅 CSS 覆盖，落在 web-admin/src/oa-fc-host/App.vue 的 <style>。
• 容器识别用 :has()；空布局暂按叶子处理，拖入子项后自动变为淡虚线容器。
• 将库内残留的选中框 / 拖拽按钮默认蓝 #2E73FF 统一为 Mint。
• 不做： 预览态、左侧组件列表、运行时开关、改 node_modules。

验收

1. 打开审批设计器 →「表单设计」。
2. 拖入普通输入：默认无虚线；悬停有浅框；点击选中为实线。
3. 拖入栅格/布局并放入字段：外层常驻极淡虚线，内层字段默认无框。
4. 操作按钮背景为主色绿，无默认蓝。

参考

• Demo：docs/demos/oa-form-designer-outline-styles.html（方案 E）
• 库样式：@form-create/designer → DragTool.vue（outline: 1px dashed var(--fc-tool-border-color)）