跪拜 Guibai
← All articles
Vue.js · Frontend · Frontend Framework

FcDesigner v3.5 Adds Cascading Field IDs, Drag-and-Drop Outlines, and AI Assistance to Vue Form Building

By 无懈可击 ·
Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Internal tools and enterprise SaaS still run on forms, and hand-coding them for every CRUD screen is slow and error-prone. A Vue-native designer that handles cascading field relationships, outline reordering, and lifecycle hooks means teams can ship complex form UIs without pulling in a separate low-code platform.

Summary

FcDesigner v3.5 ships with several workflow improvements aimed at large-scale form projects. Field IDs now accept cascading dropdown selection, cutting manual mapping errors. The outline panel supports drag-and-drop reordering that syncs directly with the canvas, and a new beforeUnmount lifecycle hook lets developers run cleanup logic before a component is destroyed. Option components gain text and JSON input modes alongside a redesigned configuration layout.

The release also extends the designer's extensibility: a header slot accepts custom branding or action buttons, and the built-in code editor now provides API hints. Under the hood, the team added design-rule export, recursive validation for drag-in restrictions, background-image styling, and a default-collapsed left menu.

FcDesigner ships for Element Plus, Ant Design Vue, and Vant mobile, each installable as a scoped npm package. The project remains open-source under the form-create umbrella and targets government, OA, ERP, e-commerce, and workflow systems.

Takeaways
Field IDs now support cascading dropdown selection, reducing manual mapping errors on large forms.
Option components accept plain text or JSON input, with a redesigned configuration panel.
The outline panel supports drag-and-drop sorting that updates the canvas in real time.
A beforeUnmount lifecycle hook is available for component cleanup logic.
A header slot lets teams inject branding, shortcuts, or business buttons into the designer toolbar.
The code editor now provides API and code hints when writing event functions.
Design rules can be exported, and drag-in restrictions include recursive validation.
Background images are now configurable via the style panel, and the left menu can default to a collapsed state.
Packages are available for Element Plus, Ant Design Vue, and Vant mobile.
Conclusions

Adding cascading field selection and outline drag-and-drop targets the pain point of large forms with dozens of interdependent fields — a scenario where manual configuration breaks down.

Shipping a beforeUnmount hook signals that FcDesigner is being used in long-lived, stateful applications where component teardown matters, not just one-off form mockups.

The header slot and code hints push the tool from a standalone designer toward an embeddable SDK that teams can white-label inside their own platforms.

Concepts & terms
beforeUnmount lifecycle
A Vue component lifecycle hook called immediately before a component instance is unmounted and destroyed, useful for cleanup tasks such as removing event listeners or cancelling timers.
Cascading field selection
A UI pattern where selecting a value in one dropdown filters the available options in a subsequent dropdown, often used to navigate hierarchical data such as nested form field IDs.
Source: juejin.cn ↗ Google Translate ↗ Backup ↗