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

* fix: 修复form设计器在黑暗模式下的显示问题 * perf: [form-design]优化源代码，清除无用注释与注释
2025-09-03 10:56:00 +00:00 · 2023-02-15 11:42:35 +08:00
parent 334a0ea8e5
commit e1804bd866
28 changed files with 60 additions and 221 deletions
--- a/src/views/form-design/assets/iconfont/index.js
+++ b/src/views/form-design/assets/iconfont/index.js
--- a/src/views/form-design/components/VFormCreate/components/FormRender.vue
+++ b/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';
--- a/src/views/form-design/components/VFormCreate/index.vue
+++ b/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);
        });
      };
--- a/src/views/form-design/components/VFormDesign/components/CodeModal.vue
+++ b/src/views/form-design/components/VFormDesign/components/CodeModal.vue
@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/12/7
 * @Description: 渲染代码
 -->
 <template>
--- a/src/views/form-design/components/VFormDesign/components/ComponentProps.vue
+++ b/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) => {
--- a/src/views/form-design/components/VFormDesign/components/FormItemColumnProps.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormItemColumnProps.vue
@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/24
 * @Description: 表单项属性
 -->
 <template>
--- a/src/views/form-design/components/VFormDesign/components/FormItemProps.vue
+++ b/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);
        });
--- a/src/views/form-design/components/VFormDesign/components/FormNode.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormNode.vue
@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/19
 * @Description: 拖拽节点控件
 -->
 <template>
--- a/src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue
+++ b/src/views/form-design/components/VFormDesign/components/FormNodeOperate.vue
@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/11
 * @Description: 节点操作复制删除控件
 -->
 <template>
--- a/src/views/form-design/components/VFormDesign/components/FormOptions.vue
+++ b/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>
--- a/src/views/form-design/components/VFormDesign/components/FormProps.vue
+++ b/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 || {
--- a/src/views/form-design/components/VFormDesign/components/ImportJsonModal.vue
+++ b/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 &&
--- a/src/views/form-design/components/VFormDesign/components/JsonModal.vue
+++ b/src/views/form-design/components/VFormDesign/components/JsonModal.vue
@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/23
 * @Description: 渲染JSON数据
 -->
 <template>
--- a/src/views/form-design/components/VFormDesign/components/LayoutItem.vue
+++ b/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>
--- a/src/views/form-design/components/VFormDesign/components/RuleProps.vue
+++ b/src/views/form-design/components/VFormDesign/components/RuleProps.vue
@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/25
 * @Description: 正则校验选项组件
 -->
 <template>
--- a/src/views/form-design/components/VFormDesign/config/componentPropsConfig.ts
+++ b/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',
--- a/src/views/form-design/components/VFormDesign/index.vue
+++ b/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>
--- a/src/views/form-design/components/VFormDesign/modules/FormComponentPanel.vue
+++ b/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
 -->
--- a/src/views/form-design/components/VFormDesign/modules/PropsPanel.vue
+++ b/src/views/form-design/components/VFormDesign/modules/PropsPanel.vue
@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/19
 * @Description: 右侧属性配置面板
 -->
 <template>
--- a/src/views/form-design/components/VFormDesign/modules/Toolbar.vue
+++ b/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',
--- a/src/views/form-design/components/VFormItem/index.vue
+++ b/src/views/form-design/components/VFormItem/index.vue
@@ -1,6 +1,4 @@
 <!--
- * @Author: ypt
- * @Date: 2021/11/19
 * @Description:
 -->
 <template>
--- a/src/views/form-design/components/VFormItem/vFormItem.vue
+++ b/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>
--- a/src/views/form-design/components/VFormPreview/index.vue
+++ b/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 = {};
--- a/src/views/form-design/components/VFormPreview/useForm.vue
+++ b/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);
  };

--- a/src/views/form-design/components/index.ts
+++ b/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);

--- a/src/views/form-design/core/formItemConfig.ts
+++ b/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',
--- a/src/views/form-design/examples/baseForm.vue
+++ b/src/views/form-design/examples/baseForm.vue
@@ -15,8 +15,8 @@
      // },
      componentProps: {
        placeholder: '自定义placeholder',
-        onChange: (e: any) => {
-          console.log(e);
+        onChange: (_e: any) => {
+          //
        },
      },
    },
--- a/src/views/form-design/utils/message.ts
+++ b/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);
  },
-  // Vue.prototype.$message,
-);
+  error: (msg: string) => {
+    createMessage.error(msg);
+  },
+  warning: (msg: string) => {
+    createMessage.warning(msg);
+  },
+  info: (msg: string) => {
+    createMessage.info(msg);
+  },
+});

 export default message;