FcDesigner

Appearance

目录结构 ​

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

项目概况：

  • 技术栈：Vue 3 + Element Plus/Ant Design Vue（PC 设计器/渲染器），同时包含 Vant（移动端渲染器）
  • 开发/构建工具：Vue CLI（本地 dev 示例）、Vite（库构建/预览页构建）、Gulp（多语言产物打包）
  • 核心目标：通过拖拽生成表单规则（DragRule），并在设计态/运行态基于 JSON 规则渲染表单；内置 AI 面板与多语言能力

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

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

  • 入口导出与全局注册：src/index.js
  • 设计器主体（画布/面板/交互）：src/components/FcDesigner.vue（以及 src/components/* 下的一系列配置面板组件）
  • 左侧组件面板 / 拖拽规则集合：src/config/index.js、src/config/rule/*
  • 菜单与分组：src/config/menu.js
  • 运行态组件注册（给 FormCreate runtime 使用）：src/form/index.js
  • 样式与图标：src/style/index.css、src/style/icon.css
  • 多语言：src/locale/*.js（源码） + 根目录 locale/（构建产物）
  • 本地开发示例项目：examples/（由 vue.config.js 配置为 Vue CLI pages 入口）

目录结构 ​

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

text
packages/element-ui/
  src/                      # 核心源码（设计器 + 内置组件 + 规则 + 工具）
    index.js                # 包入口：注册设计器内部组件、运行态组件，并导出 FcDesigner
    components/             # 设计器 UI + 部分运行态组件（表格/子表单/签名等）
      FcDesigner.vue        # 设计器主入口（画布 + 面板 + 顶部工具等）
      DragBox.vue           # 拖拽容器（vuedraggable 渲染 children 并排序）
      DragTool.vue          # 设计态“包裹层/工具条”（激活/复制/删除等）
      EventConfig.vue       # 事件配置面板
      FetchConfig.vue       # 数据源配置面板
      Validate.vue          # 校验规则编辑
      ai/                   # AI 面板（对话/Markdown 渲染）
      language/             # 多语言配置面板
      style/                # 样式配置（样式编辑器 + 输入控件）
      table/                # 表格组件（含设计态/预览态 View）
      tableForm/            # 表格表单组件（含 View/列配置）
    config/                 # 设计器的“组件清单/拖拽规则/菜单”等配置
      base/                 # 通用配置片段（field/form/style/validate）
      rule/                 # 每个组件一个 DragRule 定义（最常改）
      index.js              # 拖拽规则汇总（dragRuleList）
      menu.js               # 左侧面板菜单结构与分组
    form/
      index.js              # 运行态组件注册（向 formCreate 注册内置组件）
    locale/                 # 源码层 i18n（编译后输出到根目录 locale/）
    style/                  # 全局样式与字体资源
    utils/                  # 公共工具（form 封装、locale、template、message、jsonDiff 等）
  examples/                 # 本地开发/演示项目（Vue CLI pages 指向这里）
  types/                    # 类型声明输出（types/index.d.ts）
  dist/                     # 构建输出（build / build:form / build:preview）
  locale/                   # 构建输出：多语言产物（build:locale）
  vue.config.js             # Vue CLI dev pages 配置（examples 作为入口）
  vite.config.build.js      # 设计器库构建（src/index.js -> dist/index.*.js）
  vite.config.form.js       # 运行态组件包构建（src/form/index.js -> dist/components.*.js）
  vite.config.preview.js    # 预览页构建（基于根目录 index.html）
  vite.config.locale.js     # 多语言构建（由 gulpfile.js 批量触发）
  gulpfile.js               # 多语言批量构建任务
  package.json              # scripts/依赖/产物入口定义

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

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

package.json ​

  • dev：vue-cli-service serve（由 vue.config.js 把入口指向 examples/）
  • build：同时执行：
    • vite build --config ./vite.config.build.js（构建设计器库）
    • vite build --config ./vite.config.form.js（构建运行态组件注册包）
  • build:form：仅构建运行态组件注册包（vite.config.form.js）
  • build:preview：构建预览页（vite.config.preview.js，注意 base 需按部署路径调整）
  • build:locale：Gulp 批量对 src/locale/*.js 逐语言构建，输出到根目录 locale/

说明：packages/element-ui 当前为 Vue 3 版本（peerDependencies.vue 为 ^3.5）。

gulpfile.js：多语言批量构建 ​

build:locale 会：

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

vue.config.js 与 examples/：本地开发与演示项目 ​

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

  • vue.config.js 把 Vue CLI 的 pages.app.entry 指向 examples/main.js
  • examples/App.vue 作为演示入口容器（用于调试设计器交互与内置组件）

src/：核心源码分层 ​

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

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

  • 导入设计器主组件：components/FcDesigner.vue
  • 注册设计态需要的组件：通过 designerForm.component(...)
  • 注册运行态组件：通过 formCreate.component(...)（同时兼容设计态/预览态）
  • 接入规则与菜单：引入 config/menu 与 config/index（dragRuleList）
  • 导出 API：对外暴露 addDragRule、addMenu、useLocale、t 以及一组 utils（如 makeOptionsRule 等）

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

src/components/：设计器 UI（拖拽画布 + 配置面板 + 内置组件） ​

设计器主体统一放在 src/components/ 下，典型职责包括：

  • 画布与拖拽交互：拖入组件、排序、选中等（如 DragBox.vue、DragTool.vue）
  • 配置面板：事件（EventConfig.vue）、数据源（FetchConfig.vue）、校验（Validate.vue）、样式（style/）等
  • 高级能力：ai/（AI 面板）、language/（多语言配置）、HtmlEditor.vue/FnEditor.vue 等编辑器组件
  • 内置可渲染组件：如 table/、tableForm/、SignaturePad.vue、FcTitle.vue 等

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

src/components/（补充）：内置可渲染组件与 View ​

这里既包含设计器面板组件，也包含一些运行态会用到的内置组件，以及配套的 View（设计态/预览态展示）：

  • 内置组件：SignaturePad.vue、table/Table.vue、tableForm/TableForm.vue、FcTitle.vue 等
  • 配套 View：table/TableView.vue、tableForm/TableFormView.vue、tableForm/TableFormColumnView.vue 等

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

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

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

  • config/menu.js：左侧面板菜单结构与分组
  • config/index.js：拖拽规则的汇总入口（dragRuleList）
  • config/rule/：每个组件一个文件，定义 DragRule（最常改）
  • config/base/：通用配置片段（field/form/style/validate 等“基础项”）

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

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

src/form/：运行态组件注册入口 ​

src/form/index.js 负责把内置组件注册到 @form-create/element-ui（FormCreate runtime）里，便于运行态直接使用：

  • 例如 FcEditor、TableForm、FcTable、SignaturePad 等

当你遇到“某个 rule.type 在运行态渲染不出来”，优先确认组件是否已在这里或 src/index.js 中完成注册，且规则里的 type 与组件名一致。

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

包括但不限于：

  • FormCreate 封装：utils/form.js（导出 formCreate 与 designerForm）
  • 多语言：utils/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，entry: src/index.js）
  • 运行态组件注册包：dist/components.es.js、dist/components.umd.js（vite.config.form.js，entry: src/form/index.js）
  • 预览页：默认输出到 dist/（vite.config.preview.js，基于根目录 index.html，base 需按部署路径调整）
  • 多语言产物：locale/*（gulpfile.js + vite.config.locale.js）
  • 类型声明：types/index.d.ts