表单设计器_表单设计器 csdn-CSDN博客

本文链接：https://blog.csdn.net/hometowna/article/details/144313131

初衷

固定模板标签没办法满足定制化需求，每次需求变动都需要通过改代码的方式去实现且不能影响到原本功能，那就要整体测试（很麻烦是吧），显然改代码的方式不太实际且效率极低，所以可以通过搭建一个表单设计器满足此类需求，问题不就解决了吗😎，还可以进行数据处理使表单字段更加灵活，本文暂不讨论数据处理模块，可以先想下怎么实现比较合理

技术选型

React 18

React 是 Meta（原 Facebook）开发的用于构建用户界面的 JavaScript 库。

核心特性：

并发渲染（Concurrent Rendering）：支持异步可中断的渲染机制，提升复杂应用的响应速度。
自动批处理（Automatic Batching）：优化状态更新逻辑，减少不必要的渲染。
Suspense 增强：支持在服务端渲染（SSR）中更灵活地处理异步加载内容。
新 API：如 useTransition、useDeferredValue 用于优化用户交互体验。
适用场景：构建高性能、交互复杂的单页应用（SPA）或服务端渲染应用。

react-dnd

基于 React 的拖放（Drag and Drop）库，用于实现复杂的拖拽交互

核心特性：

基于 HTML5 拖放 API：兼容性好，支持移动端和桌面端。
声明式 API：通过 React 组件和高阶组件（如 useDrag、useDrop）实现拖放逻辑。
数据驱动：通过传递 item 对象管理拖放内容的数据传递。
灵活性：支持自定义拖放预览、拖放效果和逻辑验证。
适用场景：看板工具（如 Trello）、表格排序、可视化编辑器等需要拖拽交互的场景。

zustand

轻量级状态管理库，专为 React 设计，提供简洁的状态管理方案

核心特性：

极简 API：通过 create 函数创建 store，使用 useStore hook 消费状态。
无样板代码：相比 Redux，省去了 Actions 和 Reducers 的繁琐定义。
高性能：支持选择器（Selectors）避免不必要的组件渲染。
中间件支持：可集成持久化、日志、Immer（用于不可变数据）等插件。
适用场景：中小型应用的状态管理，或替代 Redux 的轻量级方案。

实践

配置拖拽组件

export const generalComponents: ComponentDefinition[] = [
  {
    id: 'text-template',
    type: ComponentType.TEXT,
    category: ComponentCategory.GENERAL,
    name: '文本框',
    icon: 'FontSizeOutlined',
    props: {
    },
  },
  {
    id: 'input-template',
    type: ComponentType.INPUT,
    category: ComponentCategory.GENERAL,
    name: '输入框',
    icon: 'FormOutlined',
    props: {
    },
  },
];

组件的配置项

export const componentPropertyConfigs: ComponentPropertyConfig[] = [
  {
    type: ComponentType.TEXT,
    properties: textProperties,
  },
  {
    type: ComponentType.INPUT,
    properties: inputProperties,
  },
  {
    type: ComponentType.QRCODE,
    properties: qrcodeProperties,
  }
];

export const getPropertyConfigByType = (type: ComponentType): PropertyConfig[] => {
  const config = componentPropertyConfigs.find(config => config.type === type);
  return config ? config.properties : [];
};