refactor(form): 优化代码

packages/form/src/containers/Container.vue

@@ -312,6 +312,7 @@ const type = computed((): string => {
     });
   }
   if (type === 'form') return '';
+  if (type === 'container') return '';
   return type?.replace(/([A-Z])/g, '-$1').toLowerCase() || (items.value ? '' : 'text');
 });
 

packages/form/src/fields/Text.vue

@@ -11,15 +11,14 @@
         @input="inputHandler"
         @keyup="keyUpHandler($event)"
       >
-        <template #append v-if="config.append">
-          <span v-if="typeof config.append === 'string'">{{ config.append }}</span>
+        <template #append v-if="appendConfig">
           <TMagicButton
-            v-if="typeof config.append === 'object' && config.append.type === 'button'"
+            v-if="appendConfig.type === 'button'"
             style="color: #409eff"
             :size="size"
             @click.prevent="buttonClickHandler"
           >
-            {{ config.append.text }}
+            {{ appendConfig.text }}
           </TMagicButton>
         </template>
       </TMagicInput>
@@ -36,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, ref } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { TMagicButton, TMagicInput, TMagicPopover } from '@tmagic/design';
 import { isNumber } from '@tmagic/utils';
@@ -59,6 +58,26 @@ useAddField(props.prop);
 
 const mForm = inject<FormState | undefined>('mForm');
 
+const appendConfig = computed(() => {
+  if (typeof props.config.append === 'string') {
+    return {
+      text: props.config.append,
+      type: 'button',
+      handler: undefined,
+    };
+  }
+
+  if (props.config.append && typeof props.config.append === 'object') {
+    if (props.config.append.value === 0) {
+      return false;
+    }
+
+    return props.config.append;
+  }
+
+  return false;
+});
+
 const popoverVisible = ref(false);
 
 const confirmTrimHandler = () => {
@@ -83,10 +102,9 @@ const inputHandler = (v: string) => {
 };
 
 const buttonClickHandler = () => {
-  if (typeof props.config.append === 'string') return;
-
-  if (props.config.append?.handler) {
-    props.config.append.handler(mForm, {
+  if (!appendConfig.value) return;
+  if (typeof appendConfig.value.handler === 'function') {
+    appendConfig.value.handler(mForm, {
       model: props.model,
       values: mForm?.values,
     });
@@ -150,11 +168,3 @@ const keyUpHandler = ($event: KeyboardEvent) => {
   emit('change', props.model[props.name]);
 };
 </script>
-<style lang="scss" scoped>
-.m-form-validate__warning {
-  color: var(--el-color-warning);
-  font-size: 12px;
-  width: 100%;
-  line-height: 1.4;
-}
-</style>

packages/form/src/index.ts

@@ -49,6 +49,7 @@ import Timerange from './fields/Timerange.vue';
 import { setConfig } from './utils/config';
 import Form from './Form.vue';
 import FormDialog from './FormDialog.vue';
+import type { FormConfig } from './schema';
 
 import './theme/index.scss';
 
@@ -88,6 +89,10 @@ export { default as MSelect } from './fields/Select.vue';
 export { default as MCascader } from './fields/Cascader.vue';
 export { default as MDynamicField } from './fields/DynamicField.vue';
 
+export const createForm = function (config: FormConfig) {
+  return config;
+};
+
 export interface InstallOptions {
   [key: string]: any;
 }

packages/form/src/schema.ts

@@ -320,8 +320,9 @@ export interface TextConfig extends FormItem, Input {
     | string
     | {
         text: string;
+        value?: 0 | 1;
         type: 'button';
-        handler: (
+        handler?: (
           mForm: FormState | undefined,
           data: {
             model: any;

packages/form/src/theme/index.scss

@@ -2,6 +2,7 @@
 @use "./form-drawer.scss";
 @use "./form.scss";
 @use "./date-time.scss";
+@use "./text.scss";
 @use "./link.scss";
 @use "./fieldset.scss";
 @use "./group-list.scss";

packages/form/src/theme/text.scss

@@ -0,0 +1,6 @@
+.m-form-validate__warning {
+  color: var(--el-color-warning);
+  font-size: 12px;
+  width: 100%;
+  line-height: 1.4;
+}

packages/form/src/utils/createForm.ts

@@ -1,25 +0,0 @@
-/*
- * Tencent is pleased to support the open source community by making TMagicEditor available.
- *
- * Copyright (C) 2023 THL A29 Limited, a Tencent company.  All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { FormConfig } from '../schema';
-
-export const createForm = function (config: FormConfig) {
-  return config;
-};
-
-export default createForm;

packages/form/tests/unit/utils/createForm.spec.ts

@@ -20,7 +20,7 @@ import { describe, expect, test } from 'vitest';
 
 import { FormConfig } from '@tmagic/form';
 
-import createForm from '../../../src/utils/createForm';
+import { createForm } from '../../../src';
 
 describe('createForm', () => {
   test('正常创建', () => {