重新排版表单

src/i18n/locales/en-US.ts

@@ -1069,6 +1069,7 @@ export default {
         symbol:'Symbol',
         element:'Element',
         granularity:'Granularity',
+        unit:'Unit',
       }
     },
     traceManage: {

src/i18n/locales/zh-CN.ts

@@ -1071,6 +1071,7 @@ export default {
         symbol:"符号",
         element:'元素',
         granularity:'颗粒度',
+        unit:'单位',
         }
     },
     traceManage: {

src/views/perfManage/customTarget/index.vue

@@ -290,13 +290,25 @@ const modalStateFrom = Form.useForm(
           t('views.perfManage.customTarget.title') + t('common.unableNull'),
       },
     ],
+    unit: [
+      {
+        required: true,
+        message:
+          t('views.perfManage.customTarget.unit') + t('common.unableNull'),
+      },
+    ],
   })
 );
 
 /**性能测量数据集选择初始  value:neType*/
 function fnSelectPerformanceInit(value: any) {
   modalState.from.expression = '';
-  modalState.neTypPerformance = [{value:'granularity',label:t('views.perfManage.customTarget.granularity')}];
+  modalState.neTypPerformance = [
+    {
+      value: 'granularity',
+      label: t('views.perfManage.customTarget.granularity'),
+    },
+  ];
   // 当前语言
   var language = currentLocale.value.split('_')[0];
   if (language === 'zh') language = 'cn';
@@ -627,7 +639,10 @@ onMounted(() => {
             </a-form-item>
           </a-col>
           <a-col :lg="12" :md="12" :xs="24">
-            <a-form-item :label="t('views.perfManage.customTarget.status')" name="status">
+            <a-form-item
+              :label="t('views.perfManage.customTarget.status')"
+              name="status"
+            >
               <a-select
                 v-model:value="modalState.from.status"
                 default-value="0"
@@ -671,34 +686,40 @@ onMounted(() => {
           </a-col>
         </a-row>
 
-        <a-form-item
+        <a-row :gutter="16">
-          :label="t('views.perfManage.customTarget.expression')"
+          <a-col :lg="16" :md="16" :xs="24">
-          name="expression"
+            <a-form-item
-          :label-col="{ span: 3 }"
+              :label="t('views.perfManage.customTarget.expression')"
-          v-bind="modalStateFrom.validateInfos.expression"
+              name="expression"
-        >
+              :label-col="{ span: 4 }"
-          <a-input
+              v-bind="modalStateFrom.validateInfos.expression"
-            v-model:value="modalState.from.expression"
+            >
-            style="width: 80%"
+              <a-input v-model:value="modalState.from.expression" allow-clear>
-            allow-clear
+              </a-input>
-          >
+            </a-form-item>
-          </a-input>
+          </a-col>
-
+          <a-col :lg="8" :md="8" :xs="24">
-          <a-auto-complete
+            <a-form-item
-            v-model:value="modalState.from.unit"
+              :label="t('views.perfManage.customTarget.unit')"
-            :options="[
+              name="expression"
-              {
+              v-bind="modalStateFrom.validateInfos.unit"
-                label: 'Mbps',
+            >
-                value: 'Mbps',
+              <a-auto-complete
-              },
+                v-model:value="modalState.from.unit"
-              {
+                :options="[
-                label: '%',
+                  {
-                value: '%',
+                    label: 'Mbps',
-              },
+                    value: 'Mbps',
-            ]"
+                  },
-            style="width: 20%"
+                  {
-          ></a-auto-complete>
+                    label: '%',
-        </a-form-item>
+                    value: '%',
+                  },
+                ]"
+              ></a-auto-complete>
+            </a-form-item>
+          </a-col>
+        </a-row>
         <a-row :gutter="16">
           <a-col :lg="12" :md="12" :xs="24">
             <a-form-item