目录结构

本文介绍设计器项目的目录结构与各模块职责，帮助你在二次开发时快速定位“入口在哪里、规则在哪里、组件在哪里、构建产物会输出到哪”。

项目概况：

• 技术栈：Vue 3 + Element Plus/Ant Design Vue（PC 设计器/渲染器），同时包含 Vant（移动端渲染器）
• 构建工具：Vite（多份 config 按目标产物拆分）、Gulp（多语言产物打包）
• 核心目标：可视化拖拽生成规则（DragRule），并在设计态/运行态以数据驱动渲染表单

快速定位：从哪里开始看？

如果你第一次看这个项目，建议按下面顺序“自顶向下”阅读：

• 入口导出与全局注册：src/index.js
• 设计器画布主体：src/designer/（核心入口文件在该目录下）
• 左侧组件面板 / 拖拽规则集合：src/config/index.js、src/config/rule/*
• 菜单与分组：src/config/menu.js
• 渲染器（runtime）注册：
  • Element Plus：src/form/elm.js
  • Ant Design Vue：src/form/antdv.js
  • Vant（mobile）：src/form/mobile.js
• 扩展点（组件/能力注入）：src/extension/setting.js
• 本地开发示例项目：examples/*（pnpm run dev 直接跑这里）

目录结构

下面是按职责提炼后的结构（省略大量规则文件与工具实现）：

fc-designer/
  src/                      # 核心源码（设计器 + 渲染器 + 规则 + 工具）
    components/             # 运行态组件（含一些“预览/只读 View”组件）
      mobile/               # 移动端特有组件（配合 Vant 渲染器）
    config/                 # 设计器的“组件清单/拖拽规则/菜单/模板”等配置
      base/                 # 通用配置片段（表单/字段/校验/样式等基础项）
      index.js              # 拖拽规则汇总（dragRuleList）
      menu.js               # 左侧面板菜单结构
      rule/                 # 每个组件的 DragRule 定义（拖入后生成的 rule、右侧配置项等）
      template/             # 预置模板（快捷生成布局/片段）
    designer/               # 设计器 UI（拖拽画布、右侧面板、事件/计算/样式等配置）
      ai/                   # AI 辅助（对话/渲染）
      computed/             # 条件/计算/变量（computed）相关的配置 UI
      DragBox.vue           # 拖拽容器（vuedraggable 渲染 children 并排序）
      DragTool.vue          # 设计态“包裹层/工具条”（激活/复制/删除/新增子项等）
      EventConfig.vue       # 单组件事件配置入口（事件编辑面板）
      FetchConfig.vue       # 数据源配置入口（单组件/局部 fetch）
      FcDesigner.vue        # 设计器主入口（画布 + 面板 + 顶部工具等）
      fetch/                # 数据源配置
        GlobalFetchConfig.vue # 全局数据源/请求配置（remote/static）
      FieldInput.vue        # 字段输入/选择器（字段树选择/复制/生成 field）
      FieldList.vue         # 字段树列表（搜索 + 可拖拽）
      FormList.vue          # 表单/模板列表（支持异步 load 并切换当前表单）
      GlobalClassConfig.vue # 全局样式类/全局样式编辑
      GlobalEventConfig.vue # 全局事件配置（函数/流程）
      GlobalVariableConfig.vue # 全局变量配置（变量 key + handle）
      ImportDialog.vue      # 导入（docx/xlsx/csv/json 或 JSON 文本）
      JsonPreview.vue       # JSON 预览（查看当前 rule/options 等）
      language/             # 多语言配置与引用
      PageInput.vue         # 多页面切换/新增/复制/删除（显示并复制页面 ID）
      PrintForm.vue         # 打印/导出预览（使用 ViewForm 渲染当前规则）
      QuickLayout.vue       # 快捷布局（批量设置 col.span）
      RuleSelect.vue        # 规则/字段选择器（字段选择、联动选择等多处复用）
      SlotsConfig.vue       # 简化插槽配置（easySlots + onClick 行为编辑）
      style/                # 样式配置（样式编辑器 + 各类样式输入控件）
      TypeSelect.vue        # 类型切换（尽量保留 field/校验/计算/样式等）
      Validate.vue          # 校验规则编辑（pattern/validator/computed 等）
    form/                   # runtime 渲染器入口（PC/移动）及样式
    extension/              # 二次扩展入口（组件扩展、designer 更新钩子等）
    locale/                 # 源码层 i18n（编译后输出到根目录 locale/）
    style/                  # 全局样式与字体资源
    utils/                  # 公共工具（公式/行为/预览/导入导出/多语言/模板等）
    index.js                # 包入口：注册组件/规则/工具并导出设计器入口
  examples/                 # 本地开发/演示项目（Vite root 指向这里）
  locale/                   # 构建输出：多语言产物（由 gulp + vite.config.locale.js 生成）
  types/                    # 类型声明输出（index.d.ts）
  gulpfile.js               # 多语言打包任务
  index*.html               # 静态入口页（预览/不同版本入口）
  vite.*.js                 # 多目标构建配置（完整包/PC/移动端渲染器/预览页/多语言/试用版等）

根目录：项目级配置与多目标构建

根目录主要是“项目配置 + 构建配置 + 演示入口 + 产物输出”。

package.json

• vite.dev.config.js：开发环境配置，root 指向 examples/
• vite.config.build.js：完整包构建，lib entry 为 src/index.js，输出到 dist/（index.es.js / index.umd.js）
• vite.config.pc.js：PC 设计器包构建，输出到 dist/pc/
• vite.config.elm.js：Element Plus runtime 渲染器构建，entry 为 src/form/elm.js，输出到 dist/render/element-plus/
• vite.config.antdv.js：Ant Design Vue runtime 渲染器构建，entry 为 src/form/antdv.js，输出到 dist/render/ant-design-vue/
• vite.config.mobile.js：Vant runtime 渲染器构建，entry 为 src/form/mobile.js，输出到 dist/render/vant/
• vite.config.preview.js：预览页构建（默认 base: '/view/'，按部署需要调整）
• vite.config.locale.js：多语言构建（entry 为 src/locale/<lang>.js，输出到根目录 locale/）

gulpfile.js：多语言批量构建

build:locale 会：

• 先清理根目录 locale/
• 遍历 src/locale/*.js
• 按语言逐个调用 vite build --config vite.config.locale.js -m <lang>

examples/：本地开发与演示项目

开发时你运行的不是 src/ 直接启动，而是 examples/：

• examples/main.js / examples/App.vue 作为演示入口
• vite.dev.config.js 把 Vite 的 root 设置为 examples/，因此本地调试体验更接近真实使用方

src/：核心源码分层

src/index.js：包入口（注册与导出）

你可以把它理解为“总装配线”：

• 导入设计器核心组件：例如 src/designer/ 下的主入口组件
• 注册设计态需要的组件：通过 designerForm.component(...)
• 注册运行态组件：通过 formCreate.component(...)（同时兼容设计态/预览态）
• 挂载扩展点：读取 extension/setting.js 的扩展组件与更新钩子
• 导出 API：对外暴露 addDragRule、addMenu、useLocale、setFormula、setBehavior 等

做二次开发时，绝大多数“全局层面的新增能力”最终都会落在这里完成接线。

src/designer/：设计器 UI（拖拽画布 + 配置面板）

这里是设计器的主体实现，典型职责包括：

• 画布与拖拽交互：拖入组件、排序、选中、快捷布局等
• 右侧配置面板：属性（Props）、样式（Style）、校验（Validate）、事件（Event）、计算（Computed）等
• 导入导出/预览/打印：如 ImportDialog.vue、JsonPreview.vue、PrintForm.vue
• 高级能力：
  • computed/：条件/变量/表达式等配置组件
  • fetch/：数据源/接口配置
  • language/：多语言配置面板
  • style/：样式编辑器与各类样式输入控件
  • ai/：AI 相关面板与渲染

当你需要“改界面、改交互、改右侧面板的配置能力”，大概率就在这里动手。

src/components/：运行态组件（包含 View/预览组件）

这里存放的是表单渲染时真正参与交互的组件，以及一些“只读/预览展示”的 View 组件：

• PC 组件：如 SignaturePad.vue、DataTable.vue、TableForm.vue 等
• 配套 View 组件：如 DialogView.vue、JsonComponentView.vue、ValueView.vue
• 移动端组件：集中在 components/mobile/（配合 Vant 渲染器）

通常规则（DragRule）决定了你最终会渲染哪个组件类型；组件实现则决定了交互细节。

src/config/：菜单、规则、模板与基础配置

这是“让设计器知道有哪些组件、如何拖拽生成规则、右侧显示哪些配置项”的核心目录：

• config/menu.js：左侧面板菜单结构与分组
• config/index.js：拖拽规则的汇总入口（dragRuleList）
• config/rule/：每个组件一个文件，定义 DragRule（最常改）
• config/template/：预置模板（如快速生成几列布局、表格布局片段等）
• config/base/：通用配置片段（字段/表单/样式/校验等“基础项”）

新增一个可拖拽组件的常见落点：

• 组件实现：src/components/<YourComp>.vue（必要时也加移动端版本）
• DragRule：src/config/rule/<yourRule>.js
• 规则汇总/菜单配置：src/config/index.js、src/config/menu.js
• 注册接线：src/index.js（设计态/运行态注册）

src/form/：运行态渲染器入口（PC/移动）

这层负责把组件与渲染器环境串起来，并提供各端样式：

• Element Plus runtime：form/elm.js + form/elm.css
• Ant Design Vue runtime：form/antdv.js + form/antdv.css
• Vant runtime：form/mobile.js + form/mobile.css

当你遇到“某个 rule.type 在运行态渲染不出来 / 样式不一致”，优先看这里是否注册/引入齐全。

src/extension/：二次扩展入口

这里提供“面向外部扩展”的集中出口，典型包含：

• 扩展组件集合：例如 setting.extend.components
• 设计器更新钩子：例如 setting.updateDesigner(...)
• 组件视图映射：例如 setting.componentViews

建议把“项目级自定义扩展”尽量收敛到这里，避免把业务逻辑散落在 src/index.js。

src/utils/：跨模块通用能力

包括但不限于：

• 公式/行为：formulas.js、behavior.js
• 预览/导出/模板：preview.js、template.js、sfc.js
• 多语言工具：locale.js

当你想复用能力或抽离通用逻辑时，优先考虑放在这里。

src/locale/ 与根目录 locale/

• src/locale/：源码层语言包（如 en.js、zh-cn.js）
• 根目录 locale/：构建后的语言产物（build:locale 生成，包含 *.es.js 等）

构建产物：会输出到哪里？

结合 package.json 的 scripts 与 Vite 配置，主要产物路径如下：

• 完整包：dist/index.es.js、dist/index.umd.js（vite.config.build.js）
• PC 设计器包：dist/pc/*（vite.config.pc.js）
• PC 渲染器（Element Plus runtime）：dist/render/element-plus/form-create.*.js（vite.config.elm.js）
• PC 渲染器（Ant Design Vue runtime）：dist/render/ant-design-vue/form-create.*.js（vite.config.antdv.js）
• 移动端渲染器（Vant runtime）：dist/render/vant/form-create.*.js（vite.config.mobile.js）
• 多语言产物：locale/*（gulpfile.js + vite.config.locale.js）