yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor: 按 codereview 意见修改

pull/79/head
dhb52 2025-04-23 22:37:33 +08:00
parent 1fb5a9e31d
commit 10514ec1b8
22 changed files with 118 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/web-antd/package.json
View File

@ -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:*",

2
apps/web-antd/src/bootstrap.ts
View File

@ -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';

3
apps/web-antd/src/components/FormCreate/index.ts
View File

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

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

@ -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';

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

@ -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);
});
}
};

13
apps/web-antd/src/components/FormCreate/src/components/DictSelect.vue → apps/web-antd/src/components/form-create/components/dict-select.vue
View File

@ -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',
});

2
apps/web-antd/src/components/FormCreate/src/components/useApiSelect.tsx → apps/web-antd/src/components/form-create/components/use-api-select.tsx
View File

@ -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';

0
apps/web-antd/src/components/FormCreate/src/components/useImagesUpload.tsx → apps/web-antd/src/components/form-create/components/use-images-upload.tsx
View File

84
apps/web-antd/src/components/FormCreate/src/useFormCreateDesigner.ts → apps/web-antd/src/components/form-create/helpers.ts
View File

@ -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,
useUploadImgsRule,
} from './config';
useUploadImageRule,
useUploadImagesRule,
} 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 uploadImgsRule = useUploadImgsRule();
const uploadImageRule = useUploadImageRule();
const uploadImagesRule = useUploadImagesRule();
/**
* 构建表单组件
@ -43,8 +109,8 @@ export const useFormCreateDesigner = async (designer: Ref) => {
const components = [
editorRule,
uploadFileRule,
uploadImgRule,
uploadImgsRule,
uploadImageRule,
uploadImagesRule,
];
components.forEach((component) => {
// 插入组件规则

3
apps/web-antd/src/components/form-create/index.ts Normal file
View File

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

0
apps/web-antd/src/components/FormCreate/src/config/selectRule.ts → apps/web-antd/src/components/form-create/rules/data.ts
View File

6
apps/web-antd/src/components/form-create/rules/index.ts Normal file
View File

@ -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';

6
apps/web-antd/src/components/FormCreate/src/config/useDictSelectRule.ts → apps/web-antd/src/components/form-create/rules/use-dict-select.ts
View File

@ -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,
})) ?? [];

2
apps/web-antd/src/components/FormCreate/src/config/useEditorRule.ts → apps/web-antd/src/components/form-create/rules/use-editor-rule.ts
View File

@ -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 = '富文本';

6
apps/web-antd/src/components/FormCreate/src/config/useSelectRule.ts → apps/web-antd/src/components/form-create/rules/use-select-rule.ts
View File

@ -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

2
apps/web-antd/src/components/FormCreate/src/config/useUploadFileRule.ts → apps/web-antd/src/components/form-create/rules/use-upload-file-rule.ts
View File

@ -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 = '文件上传';

4
apps/web-antd/src/components/FormCreate/src/config/useUploadImgRule.ts → apps/web-antd/src/components/form-create/rules/use-upload-image-rule.ts
View File

@ -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 {

4
apps/web-antd/src/components/FormCreate/src/config/useUploadImgsRule.ts → apps/web-antd/src/components/form-create/rules/use-upload-images-rule.ts
View File

@ -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 {

11
apps/web-antd/src/components/FormCreate/src/type/index.ts → apps/web-antd/src/components/form-create/typing.ts
View File

@ -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 {

6
apps/web-antd/src/plugins/formCreate/index.ts → apps/web-antd/src/plugins/form-create/index.ts
View File

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

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

@ -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';

7
pnpm-lock.yaml
View File

@ -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: