review：【INFRA】表单构建的代码意见

apps/web-antd/package.json

@@ -49,14 +49,12 @@
     "crypto-js": "catalog:",
     "dayjs": "catalog:",
     "highlight.js": "catalog:",
-    "lodash.clonedeep": "catalog:",
     "pinia": "catalog:",
     "vue": "catalog:",
     "vue-dompurify-html": "catalog:",
     "vue-router": "catalog:"
   },
   "devDependencies": {
-    "@types/crypto-js": "catalog:",
-    "@types/lodash.clonedeep": "catalog:"
+    "@types/crypto-js": "catalog:"
   }
 }

apps/web-antd/src/bootstrap.ts

@@ -58,6 +58,7 @@ async function bootstrap(namespace: string) {
   setupFormCreate(app);
 
   // vue-dompurify-html
+  // TODO @dhb52：VueDOMPurifyHTML 是不是不用引入哈？
   app.use(VueDOMPurifyHTML);
 
   // 配置Motion插件

apps/web-antd/src/components/dict-tag/dict-tag.vue

@@ -41,17 +41,14 @@ const dictTag = computed(() => {
   switch (colorType) {
     case 'danger': {
       colorType = 'error';
-
       break;
     }
     case 'info': {
       colorType = 'default';
-
       break;
     }
     case 'primary': {
       colorType = 'processing';
-
       break;
     }
     default: {

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

@@ -13,11 +13,7 @@ import {
   SelectOption,
 } from 'ant-design-vue';
 
-import {
-  getBoolDictOptions,
-  getIntDictOptions,
-  getStrDictOptions,
-} from '#/utils/dict';
+import { getDictObj, getIntDictOptions, getStrDictOptions } from '#/utils/dict';
 
 defineOptions({ name: 'DictSelect' });
 
@@ -29,10 +25,11 @@ const props = withDefaults(defineProps<DictSelectProps>(), {
 const attrs = useAttrs();
 
 // 获得字典配置
+// TODO @dhb：可以使用 getDictOptions 替代么？
 const getDictOptions = computed(() => {
   switch (props.valueType) {
     case 'bool': {
-      return getBoolDictOptions(props.dictType);
+      return getDictObj(props.dictType, 'bool');
     }
     case 'int': {
       return getIntDictOptions(props.dictType);

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

@@ -1,8 +1,6 @@
 import { onMounted, ref } from 'vue';
 
-import { buildUUID } from '@vben/utils';
-
-import cloneDeep from 'lodash.clonedeep';
+import { buildUUID, cloneDeep } from '@vben/utils';
 
 import * as DictDataApi from '#/api/system/dict/type';
 import {

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

@@ -1,8 +1,6 @@
 import type { SelectRuleOption } from '#/components/form-create/typing';
 
-import { buildUUID } from '@vben/utils';
-
-import cloneDeep from 'lodash.clonedeep';
+import { buildUUID, cloneDeep } from '@vben/utils';
 
 import {
   localeProps,

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

@@ -1,21 +1,21 @@
 import type { Rule } from '@form-create/ant-design-vue';
 
-// 数据字典 Select 选择器组件 Props 类型
+/** 数据字典 Select 选择器组件 Props 类型 */
 export interface DictSelectProps {
   dictType: string; // 字典类型
-  valueType?: 'bool' | 'int' | 'str'; // 字典值类型
+  valueType?: 'bool' | 'int' | 'str'; // 字典值类型 TODO @芋艿：'boolean' | 'number' | 'string'；需要和 vue3 一起统一！
   selectType?: 'checkbox' | 'radio' | 'select'; // 选择器类型，下拉框 select、多选框 checkbox、单选框 radio
   formCreateInject?: any;
 }
 
-// 左侧拖拽按钮
+/** 左侧拖拽按钮 */
 export interface MenuItem {
   label: string;
   name: string;
   icon: string;
 }
 
-// 左侧拖拽按钮分类
+/** 左侧拖拽按钮分类 */
 export interface Menu {
   title: string;
   name: string;
@@ -24,6 +24,7 @@ export interface Menu {
 
 export type MenuList = Array<Menu>;
 
+// TODO @dhb52：MenuList、Menu、MenuItem、DragRule 这几个，是不是没用到呀？
 // 拖拽组件的规则
 export interface DragRule {
   icon: string;
@@ -40,7 +41,7 @@ export interface DragRule {
   props(v: any, v1: any): Rule[];
 }
 
-// 通用下拉组件 Props 类型
+/** 通用 API 下拉组件 Props 类型 */
 export interface ApiSelectProps {
   name: string; // 组件名称
   labelField?: string; // 选项标签
@@ -49,7 +50,7 @@ export interface ApiSelectProps {
   isDict?: boolean; // 是否字典选择器
 }
 
-// 选择组件规则配置类型
+/** 选择组件规则配置类型 */
 export interface SelectRuleOption {
   label: string; // label 名称
   name: string; // 组件名称

apps/web-antd/src/components/tinymce/editor.vue

@@ -157,11 +157,10 @@ const initOptions = computed((): InitOptions => {
         const { httpRequest } = useUpload();
         httpRequest(file)
           .then((url) => {
-            // console.log('tinymce 上传图片成功:', url);
             resolve(url);
           })
           .catch((error) => {
-            // console.error('tinymce 上传图片失败:', error);
+            console.error('tinymce 上传图片失败:', error);
             reject(error.message);
           });
       });

apps/web-antd/src/locales/langs/en-US/common.json

@@ -1,5 +0,0 @@
-{
-  "copy": "Copy",
-  "copySuccess": "Copy Success",
-  "copyError": "Copy Error"
-}

apps/web-antd/src/locales/langs/zh-CN/common.json

@@ -1,5 +0,0 @@
-{
-  "copy": "复制",
-  "copySuccess": "复制成功",
-  "copyError": "复制失败"
-}

apps/web-antd/src/utils/dict.ts

@@ -95,6 +95,7 @@ function getDictOptions(
   return dictOptions.length > 0 ? dictOptions : [];
 }
 
+// TODO @dhb52：下面的一系列方法，看看能不能复用 getDictOptions 方法
 export const getIntDictOptions = (dictType: string): NumberDictDataType[] => {
   // 获得通用的 DictDataType 列表
   const dictOptions = getDictOptions(dictType) as DictDataType[];
@@ -110,6 +111,7 @@ export const getIntDictOptions = (dictType: string): NumberDictDataType[] => {
   return dictOption;
 };
 
+// TODO @dhb52：下面的一系列方法，看看能不能复用 getDictOptions 方法
 export const getStrDictOptions = (dictType: string) => {
   // 获得通用的 DictDataType 列表
   const dictOptions = getDictOptions(dictType) as DictDataType[];
@@ -125,6 +127,7 @@ export const getStrDictOptions = (dictType: string) => {
   return dictOption;
 };
 
+// TODO @dhb52：下面的一系列方法，看看能不能复用 getDictOptions 方法
 export const getBoolDictOptions = (dictType: string) => {
   const dictOption: DictDataType[] = [];
   const dictOptions = getDictOptions(dictType) as DictDataType[];

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

@@ -14,7 +14,6 @@ import xml from 'highlight.js/lib/languages/java';
 import json from 'highlight.js/lib/languages/json';
 
 import { useFormCreateDesigner } from '#/components/form-create';
-import { $t } from '#/locales';
 
 import 'highlight.js/styles/github.css';
 
@@ -121,10 +120,10 @@ const copy = async (text: string) => {
   if (isSupported) {
     await copy();
     if (unref(copied)) {
-      message.success($t('common.copySuccess'));
+      message.success('复制成功');
     }
   } else {
-    message.error($t('common.copyError'));
+    message.error('复制失败');
   }
 };
 
@@ -173,9 +172,7 @@ onMounted(async () => {
     <!-- 弹窗：表单预览 -->
     <Modal :title="dialogTitle" :footer="false" :fullscreen-button="false">
       <div>
-        <Button style="float: right" @click="copy(formData)">
-          {{ $t('common.copy') }}
-        </Button>
+        <Button style="float: right" @click="copy(formData)"> 复制 </Button>
         <div>
           <pre><code v-dompurify-html="highlightedCode(formData)" class="hljs"></code></pre>
         </div>

pnpm-lock.yaml

@@ -743,9 +743,6 @@ importers:
       highlight.js:
         specifier: 'catalog:'
         version: 11.11.1
-      lodash.clonedeep:
-        specifier: 'catalog:'
-        version: 4.5.0
       pinia:
         specifier: ^2.3.1
         version: 2.3.1(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3))