form-design优化代码格式，清除无用的注释与引用 (#2547)

* fix: 修复form设计器在黑暗模式下的显示问题

* perf: [form-design]优化源代码，清除无用注释与注释

src/views/form-design/components/VFormCreate/components/FormRender.vue

@@ -1,5 +1,4 @@
 <template>
-  <!-- <component :is="layoutTag" v-bind="schema.colProps"> -->
   <template v-if="['Grid'].includes(schema.component)">
     <Row class="grid-row">
       <Col
@@ -36,7 +35,6 @@
       <slot :name="schema.componentProps!.slotName"></slot>
     </template>
   </VFormItem>
-  <!-- </component> -->
 </template>
 <script lang="ts">
   import { defineComponent, PropType } from 'vue';

src/views/form-design/components/VFormCreate/index.vue

@@ -1,13 +1,10 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/29
  * @Description: 表单渲染器，根据json生成表单
 -->
 <template>
   <div class="v-form-container">
     <Form class="v-form-model" ref="eFormModel" :model="formModel" v-bind="formModelProps">
       <Row>
-        <!-- <component :is="wrapperComp"> -->
         <FormRender
           v-for="(schema, index) of noHiddenList"
           :key="index"
@@ -26,7 +23,6 @@
             ></slot>
           </template>
         </FormRender>
-        <!-- </component> -->
       </Row>
     </Form>
   </div>
@@ -104,7 +100,6 @@
         const { field } = unref(schema);
 
         linkOn[field!]?.forEach((formItem) => {
-          // console.log('handleChange', formItem, field, value);
           formItem.update?.(value, formItem, fApi.value as IVFormMethods);
         });
       };

src/views/form-design/components/VFormDesign/components/CodeModal.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/12/7
  * @Description: 渲染代码
 -->
 <template>

src/views/form-design/components/VFormDesign/components/ComponentProps.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/26
  * @Description: 组件属性控件
 -->
 <template>
@@ -33,7 +31,6 @@
               v-model:value="formConfig.currentItem.componentProps[item.name]"
             />
           </FormItem>
-          <!-- </Row> -->
           <FormItem label="控制属性">
             <Col v-for="item in controlOptions" :key="item.name">
               <Checkbox
@@ -122,7 +119,6 @@
     },
     setup() {
       // 让compuated属性自动更新
-      // const dummyUpdate = ref(0);
 
       const allOptions = ref([] as Omit<IBaseFormAttrs, 'tag'>[]);
       const showControlAttrs = (includes: string[] | undefined) => {

src/views/form-design/components/VFormDesign/components/FormItemColumnProps.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/24
  * @Description: 表单项属性
 -->
 <template>

src/views/form-design/components/VFormDesign/components/FormItemProps.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/24
  * @Description: 表单项属性，控件属性面板
 -->
 <template>
@@ -129,7 +127,6 @@
       };
 
       const controlPropsList = computed(() => {
-        // console.log('const list2 = computed(() => {');
         return baseFormItemControlAttrs.filter((item) => {
           return showProps(item.exclude);
         });

src/views/form-design/components/VFormDesign/components/FormNode.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/19
  * @Description: 拖拽节点控件
 -->
 <template>

src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/11
  * @Description: 节点操作复制删除控件
 -->
 <template>

src/views/form-design/components/VFormDesign/components/FormOptions.vue

@@ -5,7 +5,6 @@
         <div class="options-box">
           <Input v-model:value="item.span" class="options-value" />
           <a class="options-delete" @click="deleteGridOptions(index)">
-            <!-- <a-icon type="delete" /> -->
             <Icon icon="ant-design:delete-outlined" />
           </a>
         </div>
@@ -21,7 +20,6 @@
           <Input v-model:value="item.label" />
           <Input v-model:value="item.value" class="options-value" />
           <a class="options-delete" @click="deleteOptions(index)">
-            <!-- <a-icon type="delete" /> -->
             <Icon icon="ant-design:delete-outlined" />
           </a>
         </div>

src/views/form-design/components/VFormDesign/components/FormProps.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/23
  * @Description: 右侧属性面板控件 表单属性面板
 -->
 <template>
@@ -89,7 +87,6 @@
       InputNumber,
       Slider,
       Checkbox,
-      // RadioButtonGroup,
       RadioGroup: Radio.Group,
       RadioButton: Radio.Button,
       Form,
@@ -97,7 +94,6 @@
       Col,
     },
     setup() {
-      // const labelColspan = computed(()=>)
       const { formConfig } = useFormDesignState();
 
       formConfig.value = formConfig.value || {

src/views/form-design/components/VFormDesign/components/ImportJsonModal.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/12/7
  * @Description: 导入JSON模板
 -->
 <template>
@@ -17,7 +15,6 @@
   >
     <p class="hint-box">导入格式如下:</p>
     <div class="v-json-box">
-      <!-- <CodeEditor style="height: 100%" ref="myEditor" v-model="json"></CodeEditor> -->
       <CodeEditor v-model:value="json" ref="myEditor" :mode="MODE.JSON" />
     </div>
 
@@ -91,7 +88,6 @@
       };
       const handleImportJson = () => {
         // 导入JSON
-        console.log(state.json);
         try {
           const editorJsonData = JSON.parse(state.json) as IFormConfig;
           editorJsonData.schemas &&

src/views/form-design/components/VFormDesign/components/JsonModal.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/23
  * @Description: 渲染JSON数据
 -->
 <template>

src/views/form-design/components/VFormDesign/components/LayoutItem.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/19
  * @Description: 表单项布局控件
  * 千万不要在template下面的第一行加注释，因为这里拖动的第一个元素
 -->
@@ -20,8 +18,6 @@
             :key="index"
             :span="colItem.span"
           >
-            <!-- <div class="draggable-box"> -->
-            <!-- <div class="list-main"> -->
             <draggable
               class="list-main draggable-box"
               :component-data="{ name: 'list', tag: 'div', type: 'transition-group' }"
@@ -36,7 +32,6 @@
               @start="$emit('dragStart', $event, colItem.children)"
               @add="$emit('handleColAdd', $event, colItem.children)"
             >
-              <!-- <transition-group tag="div" name="list" class="list-main"> -->
               <template #item="{ element }">
                 <LayoutItem
                   class="drag-move"
@@ -46,10 +41,7 @@
                   @handle-delete="$emit('handle-delete')"
                 />
               </template>
-              <!-- </transition-group> -->
             </draggable>
-            <!-- </div> -->
-            <!-- </div> -->
           </Col>
         </Row>
         <FormNodeOperate :schema="schema" :currentItem="currentItem" />
@@ -130,6 +122,5 @@
 
   .hidden-item {
     background-color: rgb(240, 191, 195);
-    //opacity: 0.5;
   }
 </style>

src/views/form-design/components/VFormDesign/components/RuleProps.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/25
  * @Description: 正则校验选项组件
 -->
 <template>

src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts

@@ -1046,13 +1046,13 @@ const componentAttrs: IBaseComponentProps = {
       component: 'Input',
     },
   ],
-  ColorPicker: [
-    {
-      name: 'defaultValue',
-      label: '默认值',
-      component: 'AColorPicker',
-    },
-  ],
+  // ColorPicker: [
+  //   {
+  //     name: 'defaultValue',
+  //     label: '默认值',
+  //     component: 'AColorPicker',
+  //   },
+  // ],
   slot: [
     {
       name: 'slotName',

src/views/form-design/components/VFormDesign/index.vue

@@ -1,7 +1,7 @@
 <template>
   <Layout>
     <LayoutSider
-      class="left sider"
+      :class="`left ${prefixCls}-sider`"
       collapsible
       collapsedWidth="0"
       width="270"
@@ -52,7 +52,7 @@
       />
     </LayoutContent>
     <LayoutSider
-      class="right sider"
+      :class="`right ${prefixCls}-sider`"
       collapsible
       :reverseArrow="true"
       collapsedWidth="0"
@@ -102,6 +102,7 @@
   import { useRefHistory, UseRefHistoryReturn } from '@vueuse/core';
   import { globalConfigState } from './config/formItemPropsConfig';
   import { IFormDesignMethods, IPropsPanel, IToolbarMethods } from '../../typings/form-type';
+  import { useDesign } from '/@/hooks/web/useDesign';
 
   import { CollapseContainer } from '/@/components/Container/index';
   defineProps({
@@ -110,6 +111,7 @@
       default: 'v-form-antd表单设计器',
     },
   });
+  const { prefixCls } = useDesign('form-design');
   // 子组件实例
   const propsPanel = ref<null | IPropsPanel>(null);
   const jsonModal = ref<null | IToolbarMethods>(null);
@@ -135,18 +137,7 @@
     },
     activeKey: 1,
   });
-  // const _state = reactive<IState>({
-  //   locale: zhCN, // 国际化
-  //   baseComponents, // 基础控件列表
-  //   layoutComponents, // 布局组件列表
-  //   customComponents,
-  //   propsPanel,
-  //   jsonModal,
-  //   eFormPreview,
-  //   eFormPreview2,
-  //   importJsonModal,
-  //   codeModal,
-  // });
+
   const setFormConfig = (config: IFormConfig) => {
     //外部导入时，可能会缺少必要的信息。
     config.schemas = config.schemas || [];
@@ -198,24 +189,13 @@
    * @param schemas
    * @param index
    */
-  const handleAddAttrs = (_formItems: IVFormComponent[], _index: number) => {
-    // const item = schemas[index];
-    // setGlobalConfigState(item);
-    // generateKey(item);
-    // handleListPush(item);
-  };
+  const handleAddAttrs = (_formItems: IVFormComponent[], _index: number) => {};
 
   const handleListPushDrag = (item: IVFormComponent) => {
     const formItem = cloneDeep(item);
     setGlobalConfigState(formItem);
     generateKey(formItem);
-    // if (!formConfig.value.currentItem?.key) {
-    //   formConfig.value.schemas.push(formItem);
-    //   handleSetSelectItem(formItem);
-    //   return formItem;
-    // }
-    // handleCopy(formItem, false);
-    // handleCopy(formItem, false);
+
     return formItem;
   };
   /**
@@ -354,8 +334,16 @@
 </script>
 
 <style lang="less" scoped>
-  .sider {
-    //需要设置背景色，让主题生效
-    background-color: @component-background;
+  @prefix-cls: ~'@{namespace}-form-design';
+
+  [data-theme='dark'] {
+  .@{prefix-cls}-sider{
+    background-color: #1f1f1f;
+  }}
+
+  [data-theme='light'] {
+    .@{prefix-cls}-sider{
+    background-color: #fff;
+  }
   }
 </style>

src/views/form-design/components/VFormDesign/modules/FormComponentPanel.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/18
  * @Description: 中间表单布局面板
  * https://github.com/SortableJS/vue.draggable.next/issues/138
 -->

src/views/form-design/components/VFormDesign/modules/PropsPanel.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/19
  * @Description: 右侧属性配置面板
 -->
 <template>

src/views/form-design/components/VFormDesign/modules/Toolbar.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/23
  * @Description: 工具栏
 -->
 <template>
@@ -10,20 +8,17 @@
     <div class="left-btn-box">
       <Tooltip v-for="item in toolbarsConfigs" :title="item.title" :key="item.icon">
         <a @click="$emit(item.event)" class="toolbar-text">
-          <!-- <a-icon :type="item.icon" /> -->
           <Icon :icon="item.icon" />
         </a>
       </Tooltip>
       <Divider type="vertical" />
       <Tooltip title="撤销">
         <a :class="{ disabled: !canUndo }" :disabled="!canUndo" @click="undo">
-          <!-- <a-icon type="undo" /> -->
           <Icon icon="ant-design:undo-outlined" />
         </a>
       </Tooltip>
       <Tooltip title="重做">
         <a :class="{ disabled: !canRedo }" :disabled="!canRedo" @click="redo">
-          <!-- <a-icon type="redo" /> -->
           <Icon icon="ant-design:redo-outlined" />
         </a>
       </Tooltip>
@@ -58,19 +53,19 @@
       }>({
         toolbarsConfigs: [
           {
-            title: '预览',
+            title: '预览-支持布局',
             type: 'preview',
             event: 'handlePreview',
             icon: 'ant-design:chrome-filled',
           },
           {
-            title: '预览2',
+            title: '预览-不支持布局',
             type: 'preview',
             event: 'handlePreview2',
             icon: 'ant-design:chrome-filled',
           },
           {
-            title: '导入',
+            title: '导入JSON',
             type: 'importJson',
             event: 'handleOpenImportJsonModal',
             icon: 'ant-design:import-outlined',

src/views/form-design/components/VFormItem/index.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/19
  * @Description:
 -->
 <template>

src/views/form-design/components/VFormItem/vFormItem.vue

@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/19
  * @Description:
    `<FormItem`
     :tableAction="tableAction"
@@ -11,15 +9,6 @@
     :formModel="formModel"
     :setFormModel="setFormModel"
   >
-
-  <FormItem
-  :tableAction="tableAction"
-  :formActionType="formActionType"
-  :schema="schemaNew"
-  :formProps="getProps"
-  :allDefaultValues="defaultValueRef"
-  :formModel="formModel"
-  >
 -->
 
 <template>

src/views/form-design/components/VFormPreview/index.vue

@@ -1,11 +1,9 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/29
  * @Description: 渲染组件，无法使用Vben的组件
 -->
 <template>
   <Modal
-    title="预览(标准Ant控件)"
+    title="预览(支持布局)"
     :visible="visible"
     @ok="handleGetData"
     @cancel="handleCancel"
@@ -29,7 +27,7 @@
   </Modal>
 </template>
 <script lang="ts">
-  import { defineComponent, reactive, ref, toRaw, toRefs } from 'vue';
+  import { defineComponent, reactive, ref, toRefs } from 'vue';
   import { IFormConfig } from '../../typings/v-form-component';
   import { IAnyObject } from '../../typings/base-type';
   import VFormCreate from '../VFormCreate/index.vue';
@@ -75,21 +73,16 @@
        * @return {Promise<void>}
        */
       const handleCancel = () => {
-        // console.log('handleCancel');
         state.visible = false;
         state.formModel = {};
       };
       const handleGetData = async () => {
-        // console.log('handleGetData');
-        console.log(toRaw(state.formModel));
         const _data = await state.fApi.submit?.();
-        // console.log('handleGetData', 'end');
         jsonModal.value?.showModal?.(_data);
-        // jsonModal.value?.showModal?.(toRaw(state.formModel));
       };
 
       const onSubmit = (_data: IAnyObject) => {
-        // console.log('-> data', data);
+        //
       };
       const onCancel = () => {
         state.formModel = {};

src/views/form-design/components/VFormPreview/useForm.vue

@@ -1,11 +1,9 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/29
  * @Description: 使用vbenForm的功能进行渲染
 -->
 <template>
   <Modal
-    title="预览(VbenForm)"
+    title="预览(不支持布局)"
     :visible="state.visible"
     @ok="handleGetData"
     @cancel="handleCancel"
@@ -66,7 +64,6 @@
    */
   const handleGetData = async () => {
     let data = await validate();
-    console.log(data);
     jsonModal.value?.showModal?.(data);
   };
 

src/views/form-design/components/index.ts

@@ -55,8 +55,6 @@ componentMap.set('RangePicker', DatePicker.RangePicker);
 componentMap.set('WeekPicker', DatePicker.WeekPicker);
 componentMap.set('TimePicker', TimePicker);
 
-componentMap.set('ColorPicker', TimePicker);
-
 componentMap.set('IconPicker', IconPicker);
 componentMap.set('Divider', Divider);
 

src/views/form-design/core/formItemConfig.ts

@@ -1,7 +1,4 @@
 /**
- * @name: formItemConfig
- * @author: ypt
- * @date: 2021/11/18 16:25
  * @description：表单配置
  */
 import { IVFormComponent } from '../typings/v-form-component';
@@ -338,17 +335,17 @@ export const baseComponents: IVFormComponent[] = [
   //   hiddenLabel: true,
   //   componentProps: {},
   // },
-  {
-    component: 'ColorPicker',
-    label: '颜色选择器',
-    icon: 'carbon:color-palette',
-    field: '',
-    colProps: { span: 24 },
-    componentProps: {
-      defaultValue: '',
-      value: '',
-    },
-  },
+  // {
+  //   component: 'ColorPicker',
+  //   label: '颜色选择器',
+  //   icon: 'carbon:color-palette',
+  //   field: '',
+  //   colProps: { span: 24 },
+  //   componentProps: {
+  //     defaultValue: '',
+  //     value: '',
+  //   },
+  // },
 
   {
     component: 'slot',

src/views/form-design/examples/baseForm.vue

@@ -15,8 +15,8 @@
       // },
       componentProps: {
         placeholder: '自定义placeholder',
-        onChange: (e: any) => {
-          console.log(e);
+        onChange: (_e: any) => {
+          //
         },
       },
     },

src/views/form-design/utils/message.ts

@@ -1,21 +1,18 @@
-// import Vue from 'vue';
-
-const message = Object.assign(
-  {
-    success: (msg: string) => {
-      console.log(msg);
-    },
-    error: (msg: string) => {
-      console.error(msg);
-    },
-    warning: (msg: string) => {
-      console.warn(msg);
-    },
-    info: (msg: string) => {
-      console.info(msg);
-    },
+import { useMessage } from '/@/hooks/web/useMessage';
+const { createMessage } = useMessage();
+const message = Object.assign({
+  success: (msg: string) => {
+    createMessage.success(msg);
+  },
+  error: (msg: string) => {
+    createMessage.error(msg);
+  },
+  warning: (msg: string) => {
+    createMessage.warning(msg);
+  },
+  info: (msg: string) => {
+    createMessage.info(msg);
   },
-  // Vue.prototype.$message,
-);
+});
 
 export default message;