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

OA Form Designer Outline Style E Implementation Plan

For agentic workers: REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (- [ ]) syntax for tracking.

Goal: Reduce canvas outline noise in OA form designer using hybrid style E (soft dashed for containers, hover/active for leaves).

Architecture: CSS-only overrides in oa-fc-host/App.vue targeting FormCreate _fd-drag-tool. Containers detected via :has(._fd-drag-tool).

Tech Stack: Vue 3, @form-create/designer, SCSS/CSS in iframe host.

---

Task 1: Add hybrid outline CSS

Files:

• Modify: web-admin/src/oa-fc-host/App.vue

• [x] Add leaf default transparent outline + hover solid soft mint + active solid mint

• [x] Add container :has(._fd-drag-tool) soft dashed default

• [x] Override hardcoded #2E73FF on .active outline and ._fd-drag-btn to mint

• [ ] Manual verify in /#/system-manage/oa-approval/designer/:id → 表单设计 tab