表单设计画布 · 描边方案对比

模拟「布局容器嵌套字段」场景。请在每个画布里点击选中、悬停感受差异。 选中整张卡片表示你倾向的方案(可多选对比后口头反馈)。

色值对齐本项目 Mint:#10b981(已替换 FormCreate 默认蓝 #2E73FF)
A

现状:始终蓝色/绿色虚线

每个组件常驻 dashed outline,嵌套时多层叠加

噪音大 层级一目了然
点击组件试试 · 悬停看 hover
栅格布局
申请人
请输入
⧉×
部门
请选择
⧉×
+×
请假事由
请输入
⧉×
B

悬停显框

默认无描边;悬停出现浅色实线;选中为实线主色

推荐候选 操作时才出现辅助线
默认干净 · 鼠标移上去才有框
栅格布局
申请人
请输入
⧉×
部门
请选择
⧉×
+×
请假事由
请输入
⧉×
C

仅选中显框

默认完全无框;悬停仅微弱底色;只有选中才有实线

最干净 嵌套边界稍难辨认
几乎像真实表单 · 点一下才高亮
栅格布局
申请人
请输入
⧉×
部门
请选择
⧉×
+×
请假事由
请输入
⧉×
D

淡化常驻虚线

保留常驻提示,但透明度大幅降低;选中再加重

改动最小 多层仍在,只是变淡
虚线还在,但不再抢眼
栅格布局
申请人
请输入
⧉×
部门
请选择
⧉×
+×
请假事由
请输入
⧉×
E

混合:布局淡框 + 字段悬停

容器保留极淡虚线帮辨层级;普通字段默认无框

推荐候选 兼顾布局与干净
只有「栅格」常驻淡框 · 字段悬停才出
栅格布局
申请人
请输入
⧉×
部门
请选择
⧉×
+×
请假事由
请输入
⧉×
F

左侧指示条(无四周虚线)

用左边色条 + 选中内描边,彻底去掉虚线网格感

视觉更现代 实现略多一点
无虚线框 · 左侧色条表示可编辑区域
栅格布局
申请人
请输入
⧉×
部门
请选择
⧉×
+×
请假事由
请输入
⧉×