refactor: 按 codereview 意见修改

apps/web-antd/package.json

@@ -29,7 +29,6 @@
     "@form-create/ant-design-vue": "catalog:",
     "@form-create/antd-designer": "catalog:",
     "@tinymce/tinymce-vue": "catalog:",
-    "@types/crypto-js": "catalog:",
     "@types/lodash.clonedeep": "catalog:",
     "@vben/access": "workspace:*",
     "@vben/common-ui": "workspace:*",

apps/web-antd/src/bootstrap.ts

@@ -11,7 +11,7 @@ import '@vben/styles/antd';
 import { useTitle } from '@vueuse/core';
 
 import { $t, setupI18n } from '#/locales';
-import { setupFormCreate } from '#/plugins/formCreate';
+import { setupFormCreate } from '#/plugins/form-create';
 
 import { initComponentAdapter } from './adapter/component';
 import App from './app.vue';

apps/web-antd/src/components/FormCreate/index.ts

@@ -1,3 +0,0 @@
-export { useApiSelect } from './src/components/useApiSelect';
-
-export { useFormCreateDesigner } from './src/useFormCreateDesigner';

apps/web-antd/src/components/FormCreate/src/config/index.ts

@@ -1,6 +0,0 @@
-export { useDictSelectRule } from './useDictSelectRule';
-export { useEditorRule } from './useEditorRule';
-export { useSelectRule } from './useSelectRule';
-export { useUploadFileRule } from './useUploadFileRule';
-export { useUploadImgRule } from './useUploadImgRule';
-export { useUploadImgsRule } from './useUploadImgsRule';

apps/web-antd/src/components/FormCreate/src/utils/index.ts

@@ -1,65 +0,0 @@
-export function makeRequiredRule() {
-  return {
-    type: 'Required',
-    field: 'formCreate$required',
-    title: '是否必填',
-  };
-}
-
-export const localeProps = (
-  t: (msg: string) => any,
-  prefix: string,
-  rules: any[],
-) => {
-  return rules.map((rule: { field: string; title: any }) => {
-    if (rule.field === 'formCreate$required') {
-      rule.title = t('props.required') || rule.title;
-    } else if (rule.field && rule.field !== '_optionType') {
-      rule.title = t(`components.${prefix}.${rule.field}`) || rule.title;
-    }
-    return rule;
-  });
-};
-
-/**
- * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
- *
- * @param rule  组件的生成规则 https://www.form-create.com/v3/guide/rule
- * @param fields 解析后表单组件字段
- * @param parentTitle  如果是子表单，子表单的标题，默认为空
- */
-export const parseFormFields = (
-  rule: Record<string, any>,
-  fields: Array<Record<string, any>> = [],
-  parentTitle: string = '',
-) => {
-  const { type, field, $required, title: tempTitle, children } = rule;
-  if (field && tempTitle) {
-    let title = tempTitle;
-    if (parentTitle) {
-      title = `${parentTitle}.${tempTitle}`;
-    }
-    let required = false;
-    if ($required) {
-      required = true;
-    }
-    fields.push({
-      field,
-      title,
-      type,
-      required,
-    });
-    // TODO 子表单 需要处理子表单字段
-    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
-    //   // 解析子表单的字段
-    //   rule.props.rule.forEach((item) => {
-    //     parseFields(item, fieldsPermission, title)
-    //   })
-    // }
-  }
-  if (children && Array.isArray(children)) {
-    children.forEach((rule) => {
-      parseFormFields(rule, fields);
-    });
-  }
-};

apps/web-antd/src/components/form-create/components/dict-select.vue

@@ -1,5 +1,7 @@
 <!-- 数据字典 Select 选择器 -->
 <script lang="ts" setup>
+import type { DictSelectProps } from '../typing';
+
 import { computed, useAttrs } from 'vue';
 
 import {
@@ -17,18 +19,9 @@ import {
   getStrDictOptions,
 } from '#/utils/dict';
 
-// 接受父组件参数
-interface Props {
-  dictType: string; // 字典类型
-  valueType?: 'bool' | 'int' | 'str'; // 字典值类型
-  selectType?: 'checkbox' | 'radio' | 'select'; // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
-  // eslint-disable-next-line vue/require-default-prop
-  formCreateInject?: any;
-}
-
 defineOptions({ name: 'DictSelect' });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<DictSelectProps>(), {
   valueType: 'str',
   selectType: 'select',
 });

apps/web-antd/src/components/form-create/components/use-api-select.tsx

@@ -1,4 +1,4 @@
-import type { ApiSelectProps } from '#/components/FormCreate/src/type';
+import type { ApiSelectProps } from '#/components/form-create/typing';
 
 import { defineComponent, onMounted, ref, useAttrs } from 'vue';
 

apps/web-antd/src/components/form-create/helpers.ts

@@ -1,19 +1,85 @@
 import type { Ref } from 'vue';
 
-import type { Menu } from '#/components/FormCreate/src/type';
+import type { Menu } from '#/components/form-create/typing';
 
 import { nextTick, onMounted } from 'vue';
 
-import { apiSelectRule } from '#/components/FormCreate/src/config/selectRule';
+import { apiSelectRule } from '#/components/form-create/rules/data';
 
 import {
   useDictSelectRule,
   useEditorRule,
   useSelectRule,
   useUploadFileRule,
-  useUploadImgRule,
+  useUploadImageRule,
-  useUploadImgsRule,
+  useUploadImagesRule,
-} from './config';
+} from './rules';
+
+export function makeRequiredRule() {
+  return {
+    type: 'Required',
+    field: 'formCreate$required',
+    title: '是否必填',
+  };
+}
+
+export const localeProps = (
+  t: (msg: string) => any,
+  prefix: string,
+  rules: any[],
+) => {
+  return rules.map((rule: { field: string; title: any }) => {
+    if (rule.field === 'formCreate$required') {
+      rule.title = t('props.required') || rule.title;
+    } else if (rule.field && rule.field !== '_optionType') {
+      rule.title = t(`components.${prefix}.${rule.field}`) || rule.title;
+    }
+    return rule;
+  });
+};
+
+/**
+ * 解析表单组件的  field, title 等字段（递归，如果组件包含子组件）
+ *
+ * @param rule  组件的生成规则 https://www.form-create.com/v3/guide/rule
+ * @param fields 解析后表单组件字段
+ * @param parentTitle  如果是子表单，子表单的标题，默认为空
+ */
+export const parseFormFields = (
+  rule: Record<string, any>,
+  fields: Array<Record<string, any>> = [],
+  parentTitle: string = '',
+) => {
+  const { type, field, $required, title: tempTitle, children } = rule;
+  if (field && tempTitle) {
+    let title = tempTitle;
+    if (parentTitle) {
+      title = `${parentTitle}.${tempTitle}`;
+    }
+    let required = false;
+    if ($required) {
+      required = true;
+    }
+    fields.push({
+      field,
+      title,
+      type,
+      required,
+    });
+    // TODO 子表单 需要处理子表单字段
+    // if (type === 'group' && rule.props?.rule && Array.isArray(rule.props.rule)) {
+    //   // 解析子表单的字段
+    //   rule.props.rule.forEach((item) => {
+    //     parseFields(item, fieldsPermission, title)
+    //   })
+    // }
+  }
+  if (children && Array.isArray(children)) {
+    children.forEach((rule) => {
+      parseFormFields(rule, fields);
+    });
+  }
+};
 
 /**
  * 表单设计器增强 hook
@@ -29,8 +95,8 @@ import {
 export const useFormCreateDesigner = async (designer: Ref) => {
   const editorRule = useEditorRule();
   const uploadFileRule = useUploadFileRule();
-  const uploadImgRule = useUploadImgRule();
+  const uploadImageRule = useUploadImageRule();
-  const uploadImgsRule = useUploadImgsRule();
+  const uploadImagesRule = useUploadImagesRule();
 
   /**
    * 构建表单组件
@@ -43,8 +109,8 @@ export const useFormCreateDesigner = async (designer: Ref) => {
     const components = [
       editorRule,
       uploadFileRule,
-      uploadImgRule,
+      uploadImageRule,
-      uploadImgsRule,
+      uploadImagesRule,
     ];
     components.forEach((component) => {
       // 插入组件规则

apps/web-antd/src/components/form-create/index.ts

@@ -0,0 +1,3 @@
+export { useApiSelect } from './components/use-api-select';
+
+export { useFormCreateDesigner } from './helpers';

apps/web-antd/src/components/form-create/rules/index.ts

@@ -0,0 +1,6 @@
+export { useDictSelectRule } from './use-dict-select';
+export { useEditorRule } from './use-editor-rule';
+export { useSelectRule } from './use-select-rule';
+export { useUploadFileRule } from './use-upload-file-rule';
+export { useUploadImageRule } from './use-upload-image-rule';
+export { useUploadImagesRule } from './use-upload-images-rule';

apps/web-antd/src/components/form-create/rules/use-dict-select.ts

@@ -5,11 +5,11 @@ import { buildUUID } from '@vben/utils';
 import cloneDeep from 'lodash.clonedeep';
 
 import * as DictDataApi from '#/api/system/dict/type';
-import { selectRule } from '#/components/FormCreate/src/config/selectRule';
 import {
   localeProps,
   makeRequiredRule,
-} from '#/components/FormCreate/src/utils';
+} from '#/components/form-create/helpers';
+import { selectRule } from '#/components/form-create/rules/data';
 
 /**
  * 字典选择器规则，如果规则使用到动态数据则需要单独配置不能使用 useSelectRule
@@ -25,7 +25,7 @@ export const useDictSelectRule = () => {
       return;
     }
     dictOptions.value =
-      data?.map((item: DictDataApi.SystemDictTypeApi.SystemDictType) => ({
+      data?.map((item: DictDataApi.SystemDictTypeApi.DictType) => ({
         label: item.name,
         value: item.type,
       })) ?? [];

apps/web-antd/src/components/form-create/rules/use-editor-rule.ts

@@ -3,7 +3,7 @@ import { buildUUID } from '@vben/utils';
 import {
   localeProps,
   makeRequiredRule,
-} from '#/components/FormCreate/src/utils';
+} from '#/components/form-create/helpers';
 
 export const useEditorRule = () => {
   const label = '富文本';

apps/web-antd/src/components/form-create/rules/use-select-rule.ts

@@ -1,14 +1,14 @@
-import type { SelectRuleOption } from '#/components/FormCreate/src/type';
+import type { SelectRuleOption } from '#/components/form-create/typing';
 
 import { buildUUID } from '@vben/utils';
 
 import cloneDeep from 'lodash.clonedeep';
 
-import { selectRule } from '#/components/FormCreate/src/config/selectRule';
 import {
   localeProps,
   makeRequiredRule,
-} from '#/components/FormCreate/src/utils';
+} from '#/components/form-create/helpers';
+import { selectRule } from '#/components/form-create/rules/data';
 
 /**
  * 通用选择器规则 hook

apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts

@@ -3,7 +3,7 @@ import { buildUUID } from '@vben/utils';
 import {
   localeProps,
   makeRequiredRule,
-} from '#/components/FormCreate/src/utils';
+} from '#/components/form-create/helpers';
 
 export const useUploadFileRule = () => {
   const label = '文件上传';

apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts

@@ -3,9 +3,9 @@ import { buildUUID } from '@vben/utils';
 import {
   localeProps,
   makeRequiredRule,
-} from '#/components/FormCreate/src/utils';
+} from '#/components/form-create/helpers';
 
-export const useUploadImgRule = () => {
+export const useUploadImageRule = () => {
   const label = '单图上传';
   const name = 'ImageUpload';
   return {

apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts

@@ -3,9 +3,9 @@ import { buildUUID } from '@vben/utils';
 import {
   localeProps,
   makeRequiredRule,
-} from '#/components/FormCreate/src/utils';
+} from '#/components/form-create/helpers';
 
-export const useUploadImgsRule = () => {
+export const useUploadImagesRule = () => {
   const label = '多图上传';
   const name = 'ImagesUpload';
   return {

apps/web-antd/src/components/form-create/typing.ts

@@ -1,5 +1,12 @@
-import type { Rule } from '@form-create/ant-design-vue'; // 左侧拖拽按钮
+import type { Rule } from '@form-create/ant-design-vue';
-// 左侧拖拽按钮
+
+// 数据字典 Select 选择器组件 Props 类型
+export interface DictSelectProps {
+  dictType: string; // 字典类型
+  valueType?: 'bool' | 'int' | 'str'; // 字典值类型
+  selectType?: 'checkbox' | 'radio' | 'select'; // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
+  formCreateInject?: any;
+}
 
 // 左侧拖拽按钮
 export interface MenuItem {

apps/web-antd/src/plugins/form-create/index.ts

@@ -5,9 +5,9 @@ import FcDesigner from '@form-create/antd-designer';
 import Antd from 'ant-design-vue';
 
 // ======================= 自定义组件 =======================
-import { useApiSelect } from '#/components/FormCreate';
+import { useApiSelect } from '#/components/form-create';
-import DictSelect from '#/components/FormCreate/src/components/DictSelect.vue';
+import DictSelect from '#/components/form-create/components/dict-select.vue';
-import { useImagesUpload } from '#/components/FormCreate/src/components/useImagesUpload';
+import { useImagesUpload } from '#/components/form-create/components/use-images-upload';
 import { Tinymce } from '#/components/tinymce';
 import { FileUpload, ImageUpload } from '#/components/upload';
 

apps/web-antd/src/views/infra/build/index.vue

@@ -13,7 +13,7 @@ import hljs from 'highlight.js';
 import xml from 'highlight.js/lib/languages/java';
 import json from 'highlight.js/lib/languages/json';
 
-import { useFormCreateDesigner } from '#/components/FormCreate';
+import { useFormCreateDesigner } from '#/components/form-create';
 import { $t } from '#/locales';
 
 import 'highlight.js/styles/github.css';

pnpm-lock.yaml

@@ -683,9 +683,6 @@ importers:
       '@tinymce/tinymce-vue':
         specifier: 'catalog:'
         version: 6.1.0(vue@3.5.13(typescript@5.8.3))
-      '@types/crypto-js':
-        specifier: 'catalog:'
-        version: 4.2.2
       '@types/lodash.clonedeep':
         specifier: 'catalog:'
         version: 4.5.9
@@ -764,6 +761,10 @@ importers:
       vue-router:
         specifier: 'catalog:'
         version: 4.5.0(vue@3.5.13(typescript@5.8.3))
+    devDependencies:
+      '@types/crypto-js':
+        specifier: 'catalog:'
+        version: 4.2.2
 
   apps/web-ele:
     dependencies: