From 945dc317ededf2b8ee6b90db8d993bef004fa472 Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Fri, 20 Dec 2024 11:44:00 +0800
Subject: [PATCH 1/2] style(auth): style of forms

---
 src/style/common.scss                         |  48 ++-
 src/views/Auth/components/BuiltInConfig.vue   |   5 +-
 src/views/Auth/components/CInfoConfig.vue     |   4 +-
 src/views/Auth/components/DatabaseConfig.vue  |  65 ++--
 src/views/Auth/components/HttpConfig.vue      |  17 +-
 src/views/Auth/components/JwtConfig.vue       |   5 +-
 src/views/Auth/components/KerberosConfig.vue  |   5 +-
 src/views/Auth/components/LdapConfig.vue      |   5 +-
 src/views/Auth/style/authConfig.scss          |  10 +-
 src/views/General/Users.vue                   |   3 +-
 .../MessageTransform/TransformCreate.vue      |  33 +-
 .../MessageTransform/TransformDetail.vue      |  26 +-
 .../components/TransformForm.vue              | 354 +++++++++--------
 .../Schema/ExternalSchemaCreate.vue           |  26 +-
 .../Schema/ExternalSchemaDetail.vue           |   5 +-
 src/views/RuleEngine/Schema/SchemaCreate.vue  |  26 +-
 src/views/RuleEngine/Schema/SchemaDetail.vue  |   4 +-
 .../Schema/components/ExternalSchemaForm.vue  | 111 +++---
 .../Schema/components/SchemaRegistryForm.vue  | 114 +++---
 .../SchemaValidation/ValidationCreate.vue     |  27 +-
 .../SchemaValidation/ValidationDetail.vue     |   2 +
 .../components/SchemaValidationForm.vue       | 362 +++++++++---------
 22 files changed, 673 insertions(+), 584 deletions(-)

diff --git a/src/style/common.scss b/src/style/common.scss
index 8f88f5b5f..61d08a566 100644
--- a/src/style/common.scss
+++ b/src/style/common.scss
@@ -325,6 +325,20 @@ p.description {
     margin-top: 30px;
   }
 }
+.part-header-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  line-height: 1.6;
+  padding-top: 8px;
+  padding-bottom: 16px;
+  .part-header {
+    margin-top: 0;
+    margin-bottom: 0;
+    padding-right: 12px;
+    text-align: right;
+  }
+}
 
 .bold {
   font-weight: 600;
@@ -495,8 +509,20 @@ input:disabled {
   }
 }
 .el-card {
-  &.app-card {
-    margin-bottom: 24px;
+  &.app-card,
+  &.ft-card {
+    margin-bottom: 16px;
+  }
+  .el-card__body >.el-form {
+    padding-top: 8px;
+    margin-bottom: -16px;
+  }
+  &.ft-card {
+    .el-card__body {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
   }
   .el-tabs.detail-tabs {
     .el-tabs__header {
@@ -995,3 +1021,21 @@ code {
 .chart-tooltip {
   border-radius: 0 !important;
 }
+.el-form.tong-form {
+  .el-col-12,
+  .el-col-8 {
+    width: 100%;
+    max-width: 100%;
+    flex-basis: 100%;
+  }
+  .el-form-item {
+    display: flex;
+    .el-form-item__label {
+      line-height: 32px;
+      display: inline-flex;
+      text-align: right;
+      height: 32px;
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/src/views/Auth/components/BuiltInConfig.vue b/src/views/Auth/components/BuiltInConfig.vue
index 233cd7130..b2ceb71b3 100644
--- a/src/views/Auth/components/BuiltInConfig.vue
+++ b/src/views/Auth/components/BuiltInConfig.vue
@@ -5,9 +5,8 @@
       ref="formCom"
       :model="builtConfig"
       :rules="rules"
-      class="create-form"
-      label-position="top"
-      require-asterisk-position="right"
+      class="create-form tong-form"
+      label-width="200px"
     >
       <el-row :gutter="20" v-if="authType === 'authz'">
         <el-col :span="12">
diff --git a/src/views/Auth/components/CInfoConfig.vue b/src/views/Auth/components/CInfoConfig.vue
index 66ce64013..74c136036 100644
--- a/src/views/Auth/components/CInfoConfig.vue
+++ b/src/views/Auth/components/CInfoConfig.vue
@@ -4,8 +4,8 @@
       ref="formCom"
       :model="cinfoConfig"
       :rules="rules"
-      class="create-form"
-      label-position="top"
+      class="create-form tong-form"
+      label-width="200px"
     >
       <el-row :gutter="20">
         <el-col :span="20">
diff --git a/src/views/Auth/components/DatabaseConfig.vue b/src/views/Auth/components/DatabaseConfig.vue
index 6aafa1f45..9984dc210 100644
--- a/src/views/Auth/components/DatabaseConfig.vue
+++ b/src/views/Auth/components/DatabaseConfig.vue
@@ -3,9 +3,8 @@
     <!-- Connect -->
     <el-form
       ref="formCom"
-      class="create-form"
-      label-position="top"
-      require-asterisk-position="right"
+      class="create-form tong-form"
+      label-width="200px"
       :model="databaseConfig"
       :rules="rules"
     >
@@ -154,17 +153,17 @@
             <el-form-item required prop="query" class="label-whole-line">
               <template #label>
                 <span>SQL</span>
-                <el-button
-                  size="small"
-                  @click="setDefaultContent('query')"
-                  class="button-in-label-line"
-                >
-                  {{ $t('Auth.setDefault') }}
-                </el-button>
-                <el-button class="help-btn" size="small" @click="toggleNeedHelp">
-                  {{ $t('Base.help') }}
-                </el-button>
               </template>
+              <el-button
+                size="small"
+                @click="setDefaultContent('query')"
+                class="button-in-label-line"
+              >
+                {{ $t('Auth.setDefault') }}
+              </el-button>
+              <el-button class="help-btn" size="small" @click="toggleNeedHelp">
+                {{ $t('Base.help') }}
+              </el-button>
               <el-collapse-transition>
                 <div class="help-container" v-if="needHelp">
                   <HelpBlock :auth-type="authType" :database-type="database" />
@@ -180,17 +179,17 @@
             <el-form-item class="label-whole-line">
               <template #label>
                 <span>{{ $t('Auth.filter') }}</span>
-                <el-button
-                  class="button-in-label-line"
-                  size="small"
-                  @click="setDefaultContent('filter')"
-                >
-                  {{ $t('Auth.setDefault') }}
-                </el-button>
-                <el-button class="help-btn" size="small" @click="toggleNeedHelp">
-                  {{ $t('Base.help') }}
-                </el-button>
               </template>
+              <el-button
+                class="button-in-label-line"
+                size="small"
+                @click="setDefaultContent('filter')"
+              >
+                {{ $t('Auth.setDefault') }}
+              </el-button>
+              <el-button class="help-btn" size="small" @click="toggleNeedHelp">
+                {{ $t('Base.help') }}
+              </el-button>
               <el-collapse-transition>
                 <div class="help-container" v-if="needHelp">
                   <HelpBlock :auth-type="authType" :database-type="database" />
@@ -211,17 +210,17 @@
             <el-form-item required prop="cmd" class="label-whole-line">
               <template #label>
                 <span>{{ $t('Auth.cmd') }}</span>
-                <el-button
-                  class="button-in-label-line"
-                  size="small"
-                  @click="setDefaultContent('cmd')"
-                >
-                  {{ $t('Auth.setDefault') }}
-                </el-button>
-                <el-button class="help-btn" size="small" @click="toggleNeedHelp">
-                  {{ $t('Base.help') }}
-                </el-button>
               </template>
+              <el-button
+                class="button-in-label-line"
+                size="small"
+                @click="setDefaultContent('cmd')"
+              >
+                {{ $t('Auth.setDefault') }}
+              </el-button>
+              <el-button class="help-btn" size="small" @click="toggleNeedHelp">
+                {{ $t('Base.help') }}
+              </el-button>
               <el-collapse-transition>
                 <div class="help-container" v-if="needHelp">
                   <HelpBlock :auth-type="authType" :database-type="database" />
diff --git a/src/views/Auth/components/HttpConfig.vue b/src/views/Auth/components/HttpConfig.vue
index bdec10952..a55ad9b49 100644
--- a/src/views/Auth/components/HttpConfig.vue
+++ b/src/views/Auth/components/HttpConfig.vue
@@ -2,9 +2,8 @@
   <div class="http-config config">
     <el-form
       ref="formCom"
-      class="create-form"
-      label-position="top"
-      require-asterisk-position="right"
+      label-width="200px"
+      class="create-form tong-form"
       :model="httpConfig"
       :rules="rules"
     >
@@ -61,13 +60,13 @@
                   :desc="tl('httpBodyTip')"
                   desc-marked
                 />
-                <el-button size="small" @click="setDefaultContent" class="button-in-label-line">
-                  {{ $t('Auth.setDefault') }}
-                </el-button>
-                <el-button class="help-btn" size="small" @click="toggleNeedHelp">
-                  {{ $t('Base.help') }}
-                </el-button>
               </template>
+              <el-button size="small" @click="setDefaultContent" class="button-in-label-line">
+                {{ $t('Auth.setDefault') }}
+              </el-button>
+              <el-button class="help-btn" size="small" @click="toggleNeedHelp">
+                {{ $t('Base.help') }}
+              </el-button>
               <el-collapse-transition>
                 <div class="help-container" v-if="needHelp">
                   <HelpBlock :auth-type="authType" database-type="http" />
diff --git a/src/views/Auth/components/JwtConfig.vue b/src/views/Auth/components/JwtConfig.vue
index e5d5d4ef3..0e72ceb75 100644
--- a/src/views/Auth/components/JwtConfig.vue
+++ b/src/views/Auth/components/JwtConfig.vue
@@ -8,9 +8,8 @@
       ref="formCom"
       :model="jwtConfig"
       :rules="rules"
-      class="create-form"
-      label-position="top"
-      require-asterisk-position="right"
+      class="create-form tong-form"
+      label-width="200px"
     >
       <el-row :gutter="20">
         <!-- JWT -->
diff --git a/src/views/Auth/components/KerberosConfig.vue b/src/views/Auth/components/KerberosConfig.vue
index 7f5c064f4..0701d7d78 100644
--- a/src/views/Auth/components/KerberosConfig.vue
+++ b/src/views/Auth/components/KerberosConfig.vue
@@ -4,9 +4,8 @@
       ref="formCom"
       :model="kerberosConfig"
       :rules="rules"
-      class="create-form"
-      label-position="top"
-      require-asterisk-position="right"
+      class="create-form tong-form"
+      label-width="200px"
     >
       <el-row :gutter="20">
         <el-col :span="12">
diff --git a/src/views/Auth/components/LdapConfig.vue b/src/views/Auth/components/LdapConfig.vue
index f7014cee7..0aa569bdd 100644
--- a/src/views/Auth/components/LdapConfig.vue
+++ b/src/views/Auth/components/LdapConfig.vue
@@ -2,9 +2,8 @@
   <div class="ldap-config config">
     <el-form
       ref="formCom"
-      class="create-form"
-      label-position="top"
-      require-asterisk-position="right"
+      class="create-form tong-form"
+      label-width="200px"
       :model="ldapConfig"
       :rules="rules"
     >
diff --git a/src/views/Auth/style/authConfig.scss b/src/views/Auth/style/authConfig.scss
index 735eb910e..0da27044e 100644
--- a/src/views/Auth/style/authConfig.scss
+++ b/src/views/Auth/style/authConfig.scss
@@ -5,9 +5,8 @@
     }
     .button-in-label-line {
       position: absolute;
-      top: 50%;
+      top: -32px;
       right: 0;
-      transform: translateY(-50%);
     }
     .el-upload-list {
       display: none;
@@ -19,16 +18,16 @@
   .help-btn {
     position: absolute;
     right: 80px;
-    top: -1px;
+    top: -32px;
   }
   .help-container {
     width: 100%;
-    margin-top: 12px;
+    margin-bottom: 16px;
   }
   .help-block {
     padding: 24px;
     background: var(--color-bg-split);
-    margin-bottom: 22px;
+    margin-bottom: 0;
     line-height: 1.6;
     .help-bock__code {
       background: #1c2a28;
@@ -56,7 +55,6 @@
   }
   .viewer-container {
     border: 1px solid var(--color-border-primary);
-    margin-top: 12px;
     width: 100%;
     height: 280px;
   }
diff --git a/src/views/General/Users.vue b/src/views/General/Users.vue
index c81c6a8f1..76f087adb 100644
--- a/src/views/General/Users.vue
+++ b/src/views/General/Users.vue
@@ -72,8 +72,7 @@
         ref="formCom"
         :model="record"
         :rules="rules"
-        label-position="top"
-        require-asterisk-position="right"
+        label-width="120px"
         @keyup.enter="save()"
       >
         <el-form-item v-if="accessType !== 'chPass'" prop="username" :label="tl('username')">
diff --git a/src/views/RuleEngine/MessageTransform/TransformCreate.vue b/src/views/RuleEngine/MessageTransform/TransformCreate.vue
index e935ccea1..2d2543df5 100644
--- a/src/views/RuleEngine/MessageTransform/TransformCreate.vue
+++ b/src/views/RuleEngine/MessageTransform/TransformCreate.vue
@@ -5,24 +5,25 @@
     />
     <el-card class="app-card">
       <TransformForm ref="formCom" v-model="formData" />
-      <div>
-        <el-button @click="cancel">
-          {{ t('Base.cancel') }}
-        </el-button>
-        <el-button type="primary" :disabled="!$hasPermission('post')" plain @click="openTest">
-          {{ tl('preview') }}
-        </el-button>
-        <el-button
-          type="primary"
-          :disabled="!$hasPermission('post')"
-          :loading="isSubmitting"
-          @click="submit"
-        >
-          {{ t('Base.create') }}
-        </el-button>
-      </div>
+    </el-card>
+    <el-card class="ft-card">
+      <el-button @click="cancel">
+        {{ t('Base.cancel') }}
+      </el-button>
+      <el-button type="primary" :disabled="!$hasPermission('post')" plain @click="openTest">
+        {{ tl('preview') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :disabled="!$hasPermission('post')"
+        :loading="isSubmitting"
+        @click="submit"
+      >
+        {{ t('Base.create') }}
+      </el-button>
     </el-card>
   </div>
+
   <TestDrawer :message-transform="formData" v-model="showTestDrawer" />
 </template>
 
diff --git a/src/views/RuleEngine/MessageTransform/TransformDetail.vue b/src/views/RuleEngine/MessageTransform/TransformDetail.vue
index b207e05e6..3e8e35876 100644
--- a/src/views/RuleEngine/MessageTransform/TransformDetail.vue
+++ b/src/views/RuleEngine/MessageTransform/TransformDetail.vue
@@ -39,19 +39,19 @@
         <el-tab-pane :label="t('Base.setting')" :name="DetailTab.Setting">
           <el-card class="app-card">
             <TransformForm v-if="!isLoading" ref="formCom" v-model="transformData" is-edit />
-            <div>
-              <el-button type="primary" plain :disabled="!$hasPermission('post')" @click="openTest">
-                {{ tl('preview') }}
-              </el-button>
-              <el-button
-                type="primary"
-                :disabled="!$hasPermission('put')"
-                :loading="isSubmitting"
-                @click="updateTransform"
-              >
-                {{ $t('Base.update') }}
-              </el-button>
-            </div>
+          </el-card>
+          <el-card class="ft-card">
+            <el-button type="primary" plain :disabled="!$hasPermission('post')" @click="openTest">
+              {{ tl('preview') }}
+            </el-button>
+            <el-button
+              type="primary"
+              :disabled="!$hasPermission('put')"
+              :loading="isSubmitting"
+              @click="updateTransform"
+            >
+              {{ $t('Base.update') }}
+            </el-button>
           </el-card>
         </el-tab-pane>
       </div>
diff --git a/src/views/RuleEngine/MessageTransform/components/TransformForm.vue b/src/views/RuleEngine/MessageTransform/components/TransformForm.vue
index 8984e430c..3262ec466 100644
--- a/src/views/RuleEngine/MessageTransform/components/TransformForm.vue
+++ b/src/views/RuleEngine/MessageTransform/components/TransformForm.vue
@@ -1,181 +1,203 @@
 <template>
   <el-form
-    class="message-transform-form"
-    ref="formCom"
+    class="message-transform-form tong-form"
     label-width="200px"
+    ref="formCom"
     :model="formData"
     :rules="rules"
   >
-    <el-form-item prop="name" :label="tl('name')">
-      <el-input v-model="formData.name" :disabled="isEdit" />
-    </el-form-item>
-
-    <el-form-item prop="topics" :label="tl('msgSourceTopic')">
-      <ul class="topic-list">
-        <li class="topic-item" v-for="(item, $index) in formData.topics" :key="$index">
-          <el-form-item :prop="`topics.${$index}`" :rules="arrayItemRule.topic">
-            <el-input v-model="formData.topics[$index]" />
-            <div class="btn-container vertical-align-center">
-              <el-button
-                class="btn-del"
-                :icon="Delete"
-                :disabled="formData.topics.length <= 1 || !$hasPermission('delete')"
-                @click="delTopic($index)"
-              />
-              <el-button
-                v-if="$index === formData.topics.length - 1"
-                class="btn-add"
-                :icon="Plus"
-                :disabled="!$hasPermission('post')"
-                @click="addTopic"
-              />
-            </div>
-          </el-form-item>
-        </li>
-      </ul>
-    </el-form-item>
-
-    <el-form-item prop="description" :label="tl('note')">
-      <el-input v-model="formData.description" />
-    </el-form-item>
-
+    <el-row :gutter="24">
+      <el-col :span="15">
+        <el-form-item prop="name" :label="tl('name')">
+          <el-input v-model="formData.name" :disabled="isEdit" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="15">
+        <el-form-item prop="topics" :label="tl('msgSourceTopic')">
+          <ul class="topic-list">
+            <li class="topic-item" v-for="(item, $index) in formData.topics" :key="$index">
+              <el-form-item :prop="`topics.${$index}`" :rules="arrayItemRule.topic">
+                <el-input v-model="formData.topics[$index]" />
+                <div class="btn-container vertical-align-center">
+                  <el-button
+                    class="btn-del"
+                    :icon="Delete"
+                    :disabled="formData.topics.length <= 1 || !$hasPermission('delete')"
+                    @click="delTopic($index)"
+                  />
+                  <el-button
+                    v-if="$index === formData.topics.length - 1"
+                    class="btn-add"
+                    :icon="Plus"
+                    :disabled="!$hasPermission('post')"
+                    @click="addTopic"
+                  />
+                </div>
+              </el-form-item>
+            </li>
+          </ul>
+        </el-form-item>
+      </el-col>
+      <el-col :span="15">
+        <el-form-item prop="description" :label="tl('note')">
+          <el-input v-model="formData.description" />
+        </el-form-item>
+      </el-col>
+    </el-row>
     <div>
-      <p class="part-header">{{ tl('messageFormatTransformation') }}</p>
-      <p class="tip">{{ tl('formatTransDesc') }}</p>
-      <div class="row-formats">
-        <!-- ------- DECODER ------- -->
-        <el-form-item prop="payload_decoder.type" :label="tl('inputFormat')">
-          <el-select
-            v-model="(formData.payload_decoder as any).type"
-            @change="handleDecoderTypeChanged(formData.payload_decoder), checkOperations()"
-          >
-            <el-option
-              v-for="{ label, value } in formatOpts"
-              :key="value"
-              :value="value"
-              :label="label"
+      <div class="part-header-container">
+        <p class="part-header">{{ tl('messageFormatTransformation') }}</p>
+        <p class="tip">{{ tl('formatTransDesc') }}</p>
+      </div>
+      <el-row>
+        <el-col :span="20">
+          <el-row :gutter="24" class="row-formats">
+            <!-- ------- DECODER ------- -->
+            <el-col :span="12">
+              <el-form-item prop="payload_decoder.type" :label="tl('inputFormat')">
+                <el-select
+                  v-model="(formData.payload_decoder as any).type"
+                  @change="handleDecoderTypeChanged(formData.payload_decoder), checkOperations()"
+                >
+                  <el-option
+                    v-for="{ label, value } in formatOpts"
+                    :key="value"
+                    :value="value"
+                    :label="label"
+                  />
+                </el-select>
+              </el-form-item>
+              <div
+                class="space-between schema-select-container"
+                v-if="showSchemaSelect(formData.payload_decoder.type)"
+              >
+                <el-form-item
+                  prop="payload_decoder.schema"
+                  :label="`${getSchemaTypeLabel(formData.payload_decoder.type)} Schema`"
+                >
+                  <el-select v-model="(formData.payload_decoder as any).schema">
+                    <el-option
+                      v-for="{ name } in getSchemaTypeList(formData.payload_decoder.type)"
+                      :key="name"
+                      :value="name"
+                      :label="name"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  prop="payload_decoder.message_type"
+                  v-if="showMessageTypeSelect(formData.payload_decoder.type)"
+                >
+                  <el-input
+                    v-model="(formData.payload_decoder as any).message_type"
+                    :placeholder="tl('messageType')"
+                  />
+                </el-form-item>
+              </div>
+            </el-col>
+            <!-- ------- ENCODER ------- -->
+            <el-col :span="12">
+              <el-form-item prop="payload_encoder.type" :label="tl('outputFormat')">
+                <el-select
+                  v-model="(formData.payload_encoder as any).type"
+                  @change="handleTypeChanged(formData.payload_encoder), checkOperations()"
+                >
+                  <el-option
+                    v-for="{ label, value } in formatOpts"
+                    :key="value"
+                    :value="value"
+                    :label="label"
+                    :disabled="isDisabledEncodeType(value)"
+                  />
+                </el-select>
+              </el-form-item>
+              <div
+                class="space-between schema-select-container"
+                v-if="showSchemaSelect(formData.payload_encoder.type)"
+              >
+                <el-form-item
+                  prop="payload_encoder.schema"
+                  :label="`${getSchemaTypeLabel(formData.payload_encoder.type)} Schema`"
+                >
+                  <el-select v-model="(formData.payload_encoder as any).schema">
+                    <el-option
+                      v-for="{ name } in getSchemaTypeList(formData.payload_encoder.type)"
+                      :key="name"
+                      :value="name"
+                      :label="name"
+                    />
+                  </el-select>
+                </el-form-item>
+                <el-form-item
+                  prop="payload_encoder.message_type"
+                  v-if="showMessageTypeSelect(formData.payload_encoder.type)"
+                >
+                  <el-input
+                    v-model="(formData.payload_encoder as any).message_type"
+                    :placeholder="tl('messageType')"
+                  />
+                </el-form-item>
+              </div>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </div>
+    <div>
+      <div class="part-header-container">
+        <p class="part-header">{{ tl('messagePropsTransformation') }}</p>
+        <p class="tip">{{ tl('propsTransDesc') }}</p>
+      </div>
+      <el-row :gutter="24">
+        <el-col :span="21">
+          <el-form-item prop="operations" ref="OperationsFormItemRef">
+            <OperationsTable
+              v-model="formData.operations"
+              :transformation-form="formData"
+              :required="isOperationsRequired"
+              @blur="validateOperations"
             />
-          </el-select>
-        </el-form-item>
-        <div
-          class="space-between schema-select-container"
-          v-if="showSchemaSelect(formData.payload_decoder.type)"
-        >
-          <el-form-item
-            prop="payload_decoder.schema"
-            :label="`${getSchemaTypeLabel(formData.payload_decoder.type)} Schema`"
-          >
-            <el-select v-model="(formData.payload_decoder as any).schema">
-              <el-option
-                v-for="{ name } in getSchemaTypeList(formData.payload_decoder.type)"
-                :key="name"
-                :value="name"
-                :label="name"
-              />
-            </el-select>
           </el-form-item>
-          <el-form-item
-            prop="payload_decoder.message_type"
-            v-if="showMessageTypeSelect(formData.payload_decoder.type)"
-          >
-            <el-input
-              v-model="(formData.payload_decoder as any).message_type"
-              :placeholder="tl('messageType')"
-            />
+        </el-col>
+      </el-row>
+    </div>
+    <div>
+      <div class="part-header-container">
+        <p class="part-header">{{ tl('transformationFailureOperation') }}</p>
+      </div>
+      <el-row :gutter="24">
+        <el-col :span="15">
+          <el-form-item prop="failure_action" :label="tl('actionAfterFailure')" class="label-right">
+            <el-radio-group v-model="formData.failure_action">
+              <el-radio
+                v-for="{ label, value } in failureActionOpts"
+                :key="value"
+                :value="value"
+                :label="value"
+              >
+                {{ label }}
+              </el-radio>
+            </el-radio-group>
           </el-form-item>
-        </div>
-
-        <!-- ------- ENCODER ------- -->
-        <el-form-item prop="payload_encoder.type" :label="tl('outputFormat')">
-          <el-select
-            v-model="(formData.payload_encoder as any).type"
-            @change="handleTypeChanged(formData.payload_encoder), checkOperations()"
-          >
-            <el-option
-              v-for="{ label, value } in formatOpts"
-              :key="value"
-              :value="value"
-              :label="label"
-              :disabled="isDisabledEncodeType(value)"
-            />
-          </el-select>
-        </el-form-item>
-        <div
-          class="space-between schema-select-container"
-          v-if="showSchemaSelect(formData.payload_encoder.type)"
-        >
-          <el-form-item
-            prop="payload_encoder.schema"
-            :label="`${getSchemaTypeLabel(formData.payload_encoder.type)} Schema`"
-          >
-            <el-select v-model="(formData.payload_encoder as any).schema">
+        </el-col>
+        <el-col :span="15">
+          <el-form-item :label="tl('outputLogs')" class="label-right">
+            <el-switch v-model="outputLogs" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="15" v-if="outputLogs">
+          <el-form-item prop="log_failure.level" :label="t('MonitoringIntegration.logsLevel')">
+            <el-select v-model="formData.log_failure!.level">
               <el-option
-                v-for="{ name } in getSchemaTypeList(formData.payload_encoder.type)"
-                :key="name"
-                :value="name"
-                :label="name"
+                v-for="{ label, value } in messageTransformLogLevelOpts"
+                :key="value"
+                :value="value"
+                :label="label"
               />
             </el-select>
           </el-form-item>
-          <el-form-item
-            prop="payload_encoder.message_type"
-            v-if="showMessageTypeSelect(formData.payload_encoder.type)"
-          >
-            <el-input
-              v-model="(formData.payload_encoder as any).message_type"
-              :placeholder="tl('messageType')"
-            />
-          </el-form-item>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <p class="part-header">{{ tl('messagePropsTransformation') }}</p>
-      <p class="tip">{{ tl('propsTransDesc') }}</p>
-      <el-form-item prop="operations" ref="OperationsFormItemRef">
-        <OperationsTable
-          v-model="formData.operations"
-          :transformation-form="formData"
-          :required="isOperationsRequired"
-          @blur="validateOperations"
-        />
-      </el-form-item>
-    </div>
-
-    <div>
-      <p class="part-header">{{ tl('transformationFailureOperation') }}</p>
-      <el-form-item prop="failure_action" :label="tl('actionAfterFailure')" class="label-right">
-        <el-radio-group v-model="formData.failure_action">
-          <el-radio
-            v-for="{ label, value } in failureActionOpts"
-            :key="value"
-            :value="value"
-            :label="value"
-          >
-            {{ label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item :label="tl('outputLogs')" class="label-right">
-        <el-switch v-model="outputLogs" />
-      </el-form-item>
-
-      <el-form-item
-        v-if="outputLogs"
-        prop="log_failure.level"
-        :label="t('MonitoringIntegration.logsLevel')"
-      >
-        <el-select v-model="formData.log_failure!.level">
-          <el-option
-            v-for="{ label, value } in messageTransformLogLevelOpts"
-            :key="value"
-            :value="value"
-            :label="label"
-          />
-        </el-select>
-      </el-form-item>
+        </el-col>
+      </el-row>
     </div>
   </el-form>
 </template>
@@ -494,8 +516,8 @@ defineExpose({
     right: -12px;
     transform: translateX(100%);
   }
-  .part-header + .tip {
-    margin-bottom: 20px;
+  .part-header {
+    width: 200px;
   }
   .column-type.el-table__cell {
     vertical-align: top;
diff --git a/src/views/RuleEngine/Schema/ExternalSchemaCreate.vue b/src/views/RuleEngine/Schema/ExternalSchemaCreate.vue
index 412af4386..8517dcad4 100644
--- a/src/views/RuleEngine/Schema/ExternalSchemaCreate.vue
+++ b/src/views/RuleEngine/Schema/ExternalSchemaCreate.vue
@@ -6,19 +6,19 @@
     />
     <el-card class="app-card schema-create-card">
       <ExternalSchemaForm class="schema-create-form" ref="FormCom" v-model="formData" />
-      <div class="schema-create-ft">
-        <el-button @click="cancel">
-          {{ $t('Base.cancel') }}
-        </el-button>
-        <el-button
-          type="primary"
-          :disabled="!$hasPermission('post')"
-          :loading="isSubmitting"
-          @click="submit"
-        >
-          {{ $t('Base.create') }}
-        </el-button>
-      </div>
+    </el-card>
+    <el-card class="ft-card">
+      <el-button @click="cancel">
+        {{ $t('Base.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :disabled="!$hasPermission('post')"
+        :loading="isSubmitting"
+        @click="submit"
+      >
+        {{ $t('Base.create') }}
+      </el-button>
     </el-card>
   </div>
 </template>
diff --git a/src/views/RuleEngine/Schema/ExternalSchemaDetail.vue b/src/views/RuleEngine/Schema/ExternalSchemaDetail.vue
index 6a577167a..9e8faa6c1 100644
--- a/src/views/RuleEngine/Schema/ExternalSchemaDetail.vue
+++ b/src/views/RuleEngine/Schema/ExternalSchemaDetail.vue
@@ -23,13 +23,15 @@
     <el-tabs class="detail-tabs">
       <div class="app-wrapper">
         <el-tab-pane :label="t('Base.setting')">
-          <el-card class="detail-card overview-visible" v-loading="isLoading">
+          <el-card class="app-card detail-card overview-visible" v-loading="isLoading">
             <ExternalSchemaForm
               class="schema-create-form"
               ref="FormCom"
               v-model="schemaData"
               is-edit
             />
+          </el-card>
+          <el-card class="ft-card">
             <el-button
               type="primary"
               :disabled="!$hasPermission('put')"
@@ -48,7 +50,6 @@
 <script lang="ts" setup>
 import { deleteExternalSchema, getExternalSchemaDetail, putExternalSchema } from '@/api/ruleengine'
 import DetailHeader from '@/components/DetailHeader.vue'
-import PreWithEllipsis from '@/components/PreWithEllipsis.vue'
 import useI18nTl from '@/hooks/useI18nTl'
 import useOperationConfirm from '@/hooks/useOperationConfirm'
 import type { ExternalSchema } from '@/types/typeAlias'
diff --git a/src/views/RuleEngine/Schema/SchemaCreate.vue b/src/views/RuleEngine/Schema/SchemaCreate.vue
index fc19591fa..c8e2a7c4e 100644
--- a/src/views/RuleEngine/Schema/SchemaCreate.vue
+++ b/src/views/RuleEngine/Schema/SchemaCreate.vue
@@ -11,19 +11,19 @@
         v-model="formData"
         :fixed-type="!isInSinglePage && !!type"
       />
-      <div class="schema-create-ft">
-        <el-button @click="cancel">
-          {{ $t('Base.cancel') }}
-        </el-button>
-        <el-button
-          type="primary"
-          :disabled="!$hasPermission('post')"
-          :loading="isSubmitting"
-          @click="submit"
-        >
-          {{ $t('Base.create') }}
-        </el-button>
-      </div>
+    </el-card>
+    <el-card class="ft-card">
+      <el-button @click="cancel">
+        {{ $t('Base.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :disabled="!$hasPermission('post')"
+        :loading="isSubmitting"
+        @click="submit"
+      >
+        {{ $t('Base.create') }}
+      </el-button>
     </el-card>
   </div>
 </template>
diff --git a/src/views/RuleEngine/Schema/SchemaDetail.vue b/src/views/RuleEngine/Schema/SchemaDetail.vue
index 38ddc801b..ac4511b8f 100644
--- a/src/views/RuleEngine/Schema/SchemaDetail.vue
+++ b/src/views/RuleEngine/Schema/SchemaDetail.vue
@@ -19,13 +19,15 @@
     <el-tabs class="detail-tabs">
       <div class="app-wrapper">
         <el-tab-pane :label="t('Base.setting')">
-          <el-card class="detail-card overview-visible" v-loading="isLoading">
+          <el-card class="app-card detail-card overview-visible" v-loading="isLoading">
             <SchemaRegistryForm
               class="schema-create-form"
               ref="FormCom"
               v-model="schemaData"
               is-edit
             />
+          </el-card>
+          <el-card class="ft-card">
             <el-button
               type="primary"
               :disabled="!$hasPermission('put')"
diff --git a/src/views/RuleEngine/Schema/components/ExternalSchemaForm.vue b/src/views/RuleEngine/Schema/components/ExternalSchemaForm.vue
index a12bbb551..8957e86c0 100644
--- a/src/views/RuleEngine/Schema/components/ExternalSchemaForm.vue
+++ b/src/views/RuleEngine/Schema/components/ExternalSchemaForm.vue
@@ -1,53 +1,62 @@
 <template>
-  <el-form ref="FormCom" label-width="200px" :model="form" :rules="rules">
-    <el-form-item prop="name">
-      <template #label>
-        <FormItemLabel
-          :label="t('Base.name')"
-          :desc="tl('externalSchemaNameTip')"
-          popper-class="is-wider"
-          desc-marked
-        />
+  <el-form ref="FormCom" class="tong-form" label-width="200px" :model="form" :rules="rules">
+    <el-row :gutter="24">
+      <el-col :span="12">
+        <el-form-item prop="name">
+          <template #label>
+            <FormItemLabel
+              :label="t('Base.name')"
+              :desc="tl('externalSchemaNameTip')"
+              popper-class="is-wider"
+              desc-marked
+            />
+          </template>
+          <el-input v-model="form.name" :disabled="isEdit" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="tl('type')" prop="type">
+          <el-select v-model="form.type">
+            <el-option
+              v-for="{ value, label } in schemaTypeOpts"
+              :key="value"
+              :label="label"
+              :value="value"
+            />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item label="URL" prop="url">
+          <el-input v-model="form.url" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="12">
+        <el-form-item :label="startCase(t('Auth.authn'))">
+          <el-select v-model="authType">
+            <el-option :label="t('Base.none')" :value="AuthType.None" />
+            <el-option :label="tl('basicAuth')" :value="AuthType.Basic" />
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <template v-if="authType === AuthType.Basic">
+        <el-col :span="12">
+          <el-form-item :label="$t('Base.username')" prop="auth.username">
+            <el-input v-model="form.auth.username" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="tl('password')" prop="auth.password">
+            <el-input
+              v-model="form.auth.password"
+              type="password"
+              show-password
+              autocomplete="new-password"
+            />
+          </el-form-item>
+        </el-col>
       </template>
-      <el-input v-model="form.name" :disabled="isEdit" />
-    </el-form-item>
-
-    <el-form-item :label="tl('type')" prop="type">
-      <el-select v-model="form.type">
-        <el-option
-          v-for="{ value, label } in schemaTypeOpts"
-          :key="value"
-          :label="label"
-          :value="value"
-        />
-      </el-select>
-    </el-form-item>
-
-    <el-form-item label="URL" prop="url">
-      <el-input v-model="form.url" />
-    </el-form-item>
-
-    <el-form-item :label="startCase(t('Auth.authn'))">
-      <el-select v-model="authType">
-        <el-option :label="t('Base.none')" :value="AuthType.None" />
-        <el-option :label="tl('basicAuth')" :value="AuthType.Basic" />
-      </el-select>
-    </el-form-item>
-
-    <template v-if="authType === AuthType.Basic">
-      <el-form-item :label="$t('Base.username')" prop="auth.username">
-        <el-input v-model="form.auth.username" />
-      </el-form-item>
-
-      <el-form-item :label="tl('password')" prop="auth.password">
-        <el-input
-          v-model="form.auth.password"
-          type="password"
-          show-password
-          autocomplete="new-password"
-        />
-      </el-form-item>
-    </template>
+    </el-row>
   </el-form>
 </template>
 <script lang="ts" setup>
@@ -115,9 +124,3 @@ const FormCom = ref()
 const validate = () => customValidate(FormCom.value)
 defineExpose({ validate })
 </script>
-
-<style scoped>
-.el-form-item {
-  margin-bottom: 20px;
-}
-</style>
diff --git a/src/views/RuleEngine/Schema/components/SchemaRegistryForm.vue b/src/views/RuleEngine/Schema/components/SchemaRegistryForm.vue
index 8b90fc427..42383f12d 100644
--- a/src/views/RuleEngine/Schema/components/SchemaRegistryForm.vue
+++ b/src/views/RuleEngine/Schema/components/SchemaRegistryForm.vue
@@ -2,64 +2,70 @@
   <el-form
     ref="FormCom"
     label-width="200px"
-    class="schema-registry-form"
+    class="schema-registry-form tong-form"
     :rules="rules"
     :model="schemaForm"
   >
-    <el-form-item prop="name">
-      <template #label>
-        <FormItemLabel :label="t('Base.name')" :desc="tl('schemaNameTip')" desc-marked />
-      </template>
-      <el-input v-model="schemaForm.name" :disabled="isEdit" />
-    </el-form-item>
-
-    <el-form-item :label="t('Base.note')" prop="description">
-      <el-input v-model="schemaForm.description" />
-    </el-form-item>
-
-    <template v-if="!fixedType">
-      <el-form-item :label="tl('type')" prop="type">
-        <el-select v-model="schemaForm.type">
-          <el-option
-            v-for="{ label, value } in schemaTypeOpts"
-            :key="value"
-            :label="label"
-            :value="value"
-          />
-        </el-select>
-      </el-form-item>
-    </template>
-
-    <el-form-item label="Schema" prop="source">
-      <template #label>
-        <span>Schema</span>
-        <InfoTooltip v-if="selectedJSON" popper-class="is-wider">
-          <template #content>
-            <MarkdownContent :content="tl('JSONSchemaVersionTip')" />
+    <el-row :gutter="24">
+      <el-col :span="8">
+        <el-form-item prop="name">
+          <template #label>
+            <FormItemLabel :label="t('Base.name')" :desc="tl('schemaNameTip')" desc-marked />
           </template>
-        </InfoTooltip>
+          <el-input v-model="schemaForm.name" :disabled="isEdit" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item :label="t('Base.note')" prop="description">
+          <el-input v-model="schemaForm.description" />
+        </el-form-item>
+      </el-col>
+      <template v-if="!fixedType">
+        <el-col :span="8" />
+        <el-col :span="8">
+          <el-form-item :label="tl('type')" prop="type">
+            <el-select v-model="schemaForm.type">
+              <el-option
+                v-for="{ label, value } in schemaTypeOpts"
+                :key="value"
+                :label="label"
+                :value="value"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
       </template>
-      <div class="monaco-container">
-        <Monaco
-          v-model="schemaForm.source"
-          :id="createRandomString()"
-          :lang="isJSONFormat ? 'json' : 'plaintext'"
-          :custom-monaco-handler="disableCompletionItems"
-          @blur="onBlurChanged"
-        />
-      </div>
-    </el-form-item>
-
-    <el-button
-      v-if="selectedJSON"
-      class="btn-schema"
-      type="primary"
-      plain
-      @click="openJSONSchemaDialog"
-    >
-      {{ tl('generateFromJSON') }}
-    </el-button>
-
+      <el-col :span="24">
+        <el-form-item label="Schema" prop="source">
+          <template #label>
+            <span>Schema</span>
+            <InfoTooltip v-if="selectedJSON" popper-class="is-wider">
+              <template #content>
+                <MarkdownContent :content="tl('JSONSchemaVersionTip')" />
+              </template>
+            </InfoTooltip>
+          </template>
+          <div class="monaco-container">
+            <Monaco
+              v-model="schemaForm.source"
+              :id="createRandomString()"
+              :lang="isJSONFormat ? 'json' : 'plaintext'"
+              :custom-monaco-handler="disableCompletionItems"
+              @blur="onBlurChanged"
+            />
+          </div>
+          <el-button
+            v-if="selectedJSON"
+            class="btn-schema"
+            type="primary"
+            plain
+            @click="openJSONSchemaDialog"
+          >
+            {{ tl('generateFromJSON') }}
+          </el-button>
+        </el-form-item>
+      </el-col>
+    </el-row>
     <JSONSchemaGeneratorDialog v-model="showJSONSchemaDialog" @submit="updateSchema" />
   </el-form>
 </template>
@@ -221,7 +227,7 @@ defineExpose({ validate })
 <style lang="scss" scoped>
 .schema-registry-form {
   .btn-schema {
-    margin-bottom: 20px;
+    margin-top: 24px;
   }
 }
 </style>
diff --git a/src/views/RuleEngine/SchemaValidation/ValidationCreate.vue b/src/views/RuleEngine/SchemaValidation/ValidationCreate.vue
index 46dfdbaba..a0ebaa53c 100644
--- a/src/views/RuleEngine/SchemaValidation/ValidationCreate.vue
+++ b/src/views/RuleEngine/SchemaValidation/ValidationCreate.vue
@@ -5,19 +5,19 @@
     />
     <el-card class="app-card">
       <SchemaValidationForm ref="formCom" v-model="formData" />
-      <div>
-        <el-button @click="cancel">
-          {{ t('Base.cancel') }}
-        </el-button>
-        <el-button
-          type="primary"
-          :disabled="!$hasPermission('post')"
-          :loading="isSubmitting"
-          @click="submit"
-        >
-          {{ t('Base.create') }}
-        </el-button>
-      </div>
+    </el-card>
+    <el-card class="ft-card">
+      <el-button @click="cancel">
+        {{ t('Base.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :disabled="!$hasPermission('post')"
+        :loading="isSubmitting"
+        @click="submit"
+      >
+        {{ t('Base.create') }}
+      </el-button>
     </el-card>
   </div>
 </template>
@@ -75,6 +75,5 @@ const submit = async () => {
 <style lang="scss" scoped>
 .message-validation-form {
   width: 70%;
-  margin-bottom: 36px;
 }
 </style>
diff --git a/src/views/RuleEngine/SchemaValidation/ValidationDetail.vue b/src/views/RuleEngine/SchemaValidation/ValidationDetail.vue
index db971a5bd..fe6a6510d 100644
--- a/src/views/RuleEngine/SchemaValidation/ValidationDetail.vue
+++ b/src/views/RuleEngine/SchemaValidation/ValidationDetail.vue
@@ -44,6 +44,8 @@
               v-model="validationData"
               is-edit
             />
+          </el-card>
+          <el-card class="ft-card">
             <el-button
               type="primary"
               :disabled="!$hasPermission('put')"
diff --git a/src/views/RuleEngine/SchemaValidation/components/SchemaValidationForm.vue b/src/views/RuleEngine/SchemaValidation/components/SchemaValidationForm.vue
index e5204bf8e..5f7c9a063 100644
--- a/src/views/RuleEngine/SchemaValidation/components/SchemaValidationForm.vue
+++ b/src/views/RuleEngine/SchemaValidation/components/SchemaValidationForm.vue
@@ -1,192 +1,207 @@
 <template>
   <el-form
-    class="message-validation-form"
-    ref="formCom"
+    class="message-validation-form tong-form"
     label-width="200px"
+    ref="formCom"
     :model="formData"
     :rules="rules"
   >
-    <el-form-item prop="name" :label="tl('name')">
-      <el-input v-model="formData.name" :disabled="isEdit" />
-    </el-form-item>
-
-    <el-form-item prop="topics" :label="tl('msgSourceTopic')">
-      <ul class="topic-list">
-        <li class="topic-item" v-for="(item, $index) in formData.topics" :key="$index">
-          <el-form-item :prop="`topics.${$index}`" :rules="arrayItemRule.topic">
-            <el-input v-model="formData.topics[$index]" />
-            <div class="btn-container vertical-align-center">
-              <el-button
-                class="btn-del"
-                :icon="Delete"
-                :disabled="formData.topics.length <= 1 || !$hasPermission('delete')"
-                @click="delTopic($index)"
-              />
-              <el-button
-                v-if="$index === formData.topics.length - 1"
-                class="btn-add"
-                :icon="Plus"
-                :disabled="!$hasPermission('post')"
-                @click="addTopic"
-              />
-            </div>
-          </el-form-item>
-        </li>
-      </ul>
-    </el-form-item>
-
-    <el-form-item prop="description" :label="tl('note')">
-      <el-input v-model="formData.description" />
-    </el-form-item>
-
+    <el-row :gutter="24">
+      <el-col :span="15">
+        <el-form-item prop="name" :label="tl('name')">
+          <el-input v-model="formData.name" :disabled="isEdit" />
+        </el-form-item>
+      </el-col>
+      <el-col :span="15">
+        <el-form-item prop="topics" :label="tl('msgSourceTopic')">
+          <ul class="topic-list">
+            <li class="topic-item" v-for="(item, $index) in formData.topics" :key="$index">
+              <el-form-item :prop="`topics.${$index}`" :rules="arrayItemRule.topic">
+                <el-input v-model="formData.topics[$index]" />
+                <div class="btn-container vertical-align-center">
+                  <el-button
+                    class="btn-del"
+                    :icon="Delete"
+                    :disabled="formData.topics.length <= 1 || !$hasPermission('delete')"
+                    @click="delTopic($index)"
+                  />
+                  <el-button
+                    v-if="$index === formData.topics.length - 1"
+                    class="btn-add"
+                    :icon="Plus"
+                    :disabled="!$hasPermission('post')"
+                    @click="addTopic"
+                  />
+                </div>
+              </el-form-item>
+            </li>
+          </ul>
+        </el-form-item>
+      </el-col>
+      <el-col :span="15">
+        <el-form-item prop="description" :label="tl('note')">
+          <el-input v-model="formData.description" />
+        </el-form-item>
+      </el-col>
+    </el-row>
     <div>
-      <p class="part-header">{{ tl('verificationMethod') }}</p>
-      <el-form-item prop="strategy" :label="tl('validationStrategy')" class="label-right">
-        <el-radio-group v-model="formData.strategy">
-          <el-radio
-            v-for="{ label, value } in validationStrategyOpts"
-            :key="value"
-            :value="value"
-            :label="value"
-          >
-            {{ label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item prop="checks" :label="tl('validationList')">
-        <el-table class="key-and-value-editor shadow-none" :data="formData.checks">
-          <el-table-column class-name="column-type" :label="tl('type')" :min-width="180">
-            <template #default="{ $index }">
-              <el-select
-                v-model="formData.checks[$index].type"
-                @change="handleValidatorTypeChanged($event, $index)"
+      <div class="part-header-container">
+        <p class="part-header">{{ tl('verificationMethod') }}</p>
+      </div>
+      <el-row :gutter="24">
+        <el-col :span="15">
+          <el-form-item prop="strategy" :label="tl('validationStrategy')" class="label-right">
+            <el-radio-group v-model="formData.strategy">
+              <el-radio
+                v-for="{ label, value } in validationStrategyOpts"
+                :key="value"
+                :value="value"
+                :label="value"
               >
-                <el-option
-                  v-for="{ label, value } in validationItemTypeOpts"
-                  :key="value"
-                  :value="(value as any)"
-                  :label="label"
-                />
-              </el-select>
-            </template>
-          </el-table-column>
-          <el-table-column
-            class-name="column-value"
-            :min-width="300"
-            :label="`${tl('schema')}/SQL`"
-          >
-            <template #default="{ row, $index }">
-              <template v-if="row.type && isSchemaRegistry(row.type)">
-                <div class="space-between">
-                  <el-form-item :prop="`checks.${$index}.schema`" :rules="arrayItemRule.schema">
-                    <el-select v-model="(formData.checks[$index] as any).schema">
-                      <el-option
-                        v-for="{ name } in getSchemaTypeList(formData.checks[$index].type as string)"
-                        :key="name"
-                        :value="name"
-                        :label="name"
-                      />
-                    </el-select>
-                  </el-form-item>
-                  <el-form-item
-                    v-if="formData.checks[$index].type === SchemaRegistryType.Protobuf"
-                    :prop="`checks.${$index}.message_type`"
-                    :rules="arrayItemRule.message_type"
+                {{ label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="21">
+          <el-form-item prop="checks" :label="tl('validationList')">
+            <el-table class="key-and-value-editor shadow-none" :data="formData.checks">
+              <el-table-column class-name="column-type" :label="tl('type')" :min-width="180">
+                <template #default="{ $index }">
+                  <el-select
+                    v-model="formData.checks[$index].type"
+                    @change="handleValidatorTypeChanged($event, $index)"
                   >
-                    <el-input
-                      v-model="(formData.checks[$index] as any).message_type"
-                      :placeholder="tl('messageType')"
+                    <el-option
+                      v-for="{ label, value } in validationItemTypeOpts"
+                      :key="value"
+                      :value="(value as any)"
+                      :label="label"
                     />
-                  </el-form-item>
-                </div>
-              </template>
-
-              <el-form-item v-else :prop="`checks.${$index}.sql`" :rules="arrayItemRule.sql">
-                <el-input
-                  :modelValue="formatSQLInInput((formData.checks[$index] as any).sql)"
-                  readonly
-                  @click="editSQL($index)"
-                >
-                  <template #suffix>
-                    <el-button link type="primary" @click="editSQL($index)">
-                      {{ !row.sql ? tl('setting') : tl('view') }}
-                    </el-button>
+                  </el-select>
+                </template>
+              </el-table-column>
+              <el-table-column
+                class-name="column-value"
+                :min-width="300"
+                :label="`${tl('schema')}/SQL`"
+              >
+                <template #default="{ row, $index }">
+                  <template v-if="row.type && isSchemaRegistry(row.type)">
+                    <div class="space-between">
+                      <el-form-item :prop="`checks.${$index}.schema`" :rules="arrayItemRule.schema">
+                        <el-select v-model="(formData.checks[$index] as any).schema">
+                          <el-option
+                            v-for="{ name } in getSchemaTypeList(formData.checks[$index].type as string)"
+                            :key="name"
+                            :value="name"
+                            :label="name"
+                          />
+                        </el-select>
+                      </el-form-item>
+                      <el-form-item
+                        v-if="formData.checks[$index].type === SchemaRegistryType.Protobuf"
+                        :prop="`checks.${$index}.message_type`"
+                        :rules="arrayItemRule.message_type"
+                      >
+                        <el-input
+                          v-model="(formData.checks[$index] as any).message_type"
+                          :placeholder="tl('messageType')"
+                        />
+                      </el-form-item>
+                    </div>
                   </template>
-                </el-input>
-              </el-form-item>
-            </template>
-          </el-table-column>
-          <el-table-column width="120">
-            <template #header>
-              <el-button link @click="addValidationItem" :disabled="!$hasPermission('post')">
-                {{ $t('Base.add') }}
-              </el-button>
-            </template>
-            <template #default="{ $index }">
-              <div class="space-between">
-                <el-button
-                  class="btn-del"
-                  :icon="Delete"
-                  :disabled="!$hasPermission('delete')"
-                  @click="deleteValidationItem($index)"
-                />
-                <template
-                  v-if="
-                    formData.checks[$index].type && isSchemaRegistry(formData.checks[$index].type)
-                  "
-                >
-                  <el-tooltip :content="t('components.schema-create')" placement="top">
+
+                  <el-form-item v-else :prop="`checks.${$index}.sql`" :rules="arrayItemRule.sql">
+                    <el-input
+                      :modelValue="formatSQLInInput((formData.checks[$index] as any).sql)"
+                      readonly
+                      @click="editSQL($index)"
+                    >
+                      <template #suffix>
+                        <el-button link type="primary" @click="editSQL($index)">
+                          {{ !row.sql ? tl('setting') : tl('view') }}
+                        </el-button>
+                      </template>
+                    </el-input>
+                  </el-form-item>
+                </template>
+              </el-table-column>
+              <el-table-column width="120">
+                <template #header>
+                  <el-button link @click="addValidationItem" :disabled="!$hasPermission('post')">
+                    {{ $t('Base.add') }}
+                  </el-button>
+                </template>
+                <template #default="{ $index }">
+                  <div class="space-between">
                     <el-button
-                      class="btn-add"
-                      :icon="Plus"
-                      :disabled="!$hasPermission('post')"
-                      @click="addSchema($index)"
+                      class="btn-del"
+                      :icon="Delete"
+                      :disabled="!$hasPermission('delete')"
+                      @click="deleteValidationItem($index)"
                     />
-                  </el-tooltip>
+                    <template
+                      v-if="
+                        formData.checks[$index].type &&
+                        isSchemaRegistry(formData.checks[$index].type)
+                      "
+                    >
+                      <el-tooltip :content="t('components.schema-create')" placement="top">
+                        <el-button
+                          class="btn-add"
+                          :icon="Plus"
+                          :disabled="!$hasPermission('post')"
+                          @click="addSchema($index)"
+                        />
+                      </el-tooltip>
+                    </template>
+                  </div>
                 </template>
-              </div>
-            </template>
-          </el-table-column>
-        </el-table>
-      </el-form-item>
+              </el-table-column>
+            </el-table>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </div>
-
     <div>
-      <p class="part-header">{{ tl('validationFailureOperation') }}</p>
-      <el-form-item prop="failure_action" :label="tl('actionAfterFailure')" class="label-right">
-        <el-radio-group v-model="formData.failure_action">
-          <el-radio
-            v-for="{ label, value } in failureActionOpts"
-            :key="value"
-            :value="value"
-            :label="value"
-          >
-            {{ label }}
-          </el-radio>
-        </el-radio-group>
-      </el-form-item>
-
-      <el-form-item :label="tl('outputLogs')" class="label-right">
-        <el-switch v-model="outputLogs" />
-      </el-form-item>
-
-      <el-form-item
-        v-if="outputLogs"
-        prop="log_failure.level"
-        :label="t('MonitoringIntegration.logsLevel')"
-      >
-        <el-select v-model="formData.log_failure!.level">
-          <el-option
-            v-for="{ label, value } in validationLogLevelOpts"
-            :key="value"
-            :value="value"
-            :label="label"
-          />
-        </el-select>
-      </el-form-item>
+      <div class="part-header-container">
+        <p class="part-header">{{ tl('validationFailureOperation') }}</p>
+      </div>
+      <el-row :gutter="24">
+        <el-col :span="15">
+          <el-form-item prop="failure_action" :label="tl('actionAfterFailure')" class="label-right">
+            <el-radio-group v-model="formData.failure_action">
+              <el-radio
+                v-for="{ label, value } in failureActionOpts"
+                :key="value"
+                :value="value"
+                :label="value"
+              >
+                {{ label }}
+              </el-radio>
+            </el-radio-group>
+          </el-form-item>
+        </el-col>
+        <el-col :span="15">
+          <el-form-item :label="tl('outputLogs')" class="label-right">
+            <el-switch v-model="outputLogs" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="15" v-if="outputLogs">
+          <el-form-item prop="log_failure.level" :label="t('MonitoringIntegration.logsLevel')">
+            <el-select v-model="formData.log_failure!.level">
+              <el-option
+                v-for="{ label, value } in validationLogLevelOpts"
+                :key="value"
+                :value="value"
+                :label="label"
+              />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
     </div>
-
     <SchemaCreateDrawer
       v-model="showSchemaCreateDrawer"
       :type="currentSchemaType"
@@ -465,5 +480,8 @@ defineExpose({
     line-height: 32px;
     padding-right: 12px;
   }
+  .part-header {
+    width: 200px;
+  }
 }
 </style>

From f2c94406f9ff4087f33b952b968511e5066c4fd6 Mon Sep 17 00:00:00 2001
From: Kinplemelon <wujiu529@gmail.com>
Date: Fri, 20 Dec 2024 17:59:56 +0800
Subject: [PATCH 2/2] style(global): basic form layout

---
 .../ListenerDrawer/ListenerDrawer.vue         |  8 +--
 src/style/common.scss                         | 25 +++++--
 src/style/normalize.scss                      | 31 ++++----
 src/style/schemaForm.scss                     |  1 -
 src/views/AdvancedMQTT/AutoSub.vue            | 67 +++++++----------
 src/views/AdvancedMQTT/Rewrite.vue            |  4 +-
 src/views/Auth/AuthnCreate.vue                | 72 ++++++++++---------
 src/views/Auth/AuthnDetails.vue               |  8 ++-
 src/views/Auth/AuthzCreate.vue                | 44 ++++++------
 src/views/Auth/AuthzDetails.vue               |  8 ++-
 src/views/Auth/components/AuthnManager.vue    |  7 +-
 src/views/Auth/components/HttpConfig.vue      | 12 ++--
 src/views/Auth/style/auth.scss                |  3 -
 src/views/Auth/style/authConfig.scss          |  5 +-
 .../Clients/components/CreateSubscribe.vue    |  8 +--
 .../ClusterLinking/ClusterLinkingCreate.vue   | 26 +++----
 .../ClusterLinking/ClusterLinkingDetail.vue   |  2 +
 .../components/ClusterLinkingForm.vue         |  5 +-
 src/views/Diagnose/LogTrace/LogTrace.vue      | 16 +++--
 src/views/Diagnose/SlowSubConfig.vue          |  7 +-
 src/views/Diagnose/TopicMetrics.vue           |  4 +-
 src/views/Exhook/ExhookCreate.vue             | 26 +++----
 src/views/Exhook/ExhookDetail.vue             |  2 +
 src/views/Exhook/components/ExhookForm.vue    |  6 +-
 src/views/Gateway/components/coapBasic.vue    |  2 +-
 src/views/Gateway/components/exprotoBasic.vue |  2 +-
 .../Gateway/components/gbt32960Basic.vue      |  2 +-
 src/views/Gateway/components/jt808Basic.vue   |  2 +-
 src/views/Gateway/components/lwm2mBasic.vue   |  2 +-
 src/views/Gateway/components/mqttsnBasic.vue  |  2 +-
 src/views/Gateway/components/ocppBasic.vue    |  2 +-
 src/views/Gateway/components/stompBasic.vue   |  2 +-
 src/views/General/SSODetail.vue               | 22 +++---
 src/views/General/components/APIKeyDialog.vue |  4 +-
 .../General/components/APIKeyResultDialog.vue | 14 ++--
 src/views/General/components/BannedDialog.vue |  4 +-
 src/views/RuleEngine/Bridge/BridgeDetail.vue  | 49 ++++++-------
 .../BridgeConfig/BridgeInfluxdbConfig.vue     |  5 +-
 .../Components/UsingSchemaBridgeConfig.vue    |  6 +-
 .../RuleEngine/Connector/ConnectorCreate.vue  | 60 ++++++++--------
 .../RuleEngine/Connector/ConnectorDetail.vue  | 46 ++++++------
 .../components/ConnectorCreateDrawer.vue      |  5 +-
 .../components/ConnectorSchemaForm.vue        |  6 +-
 .../components/TestDrawer.vue                 |  2 +-
 src/views/RuleEngine/Source/SourceDetail.vue  | 49 ++++++-------
 .../components/CopySubmitDialog.vue           |  2 +-
 .../components/RuleInputsDrawer.vue           |  8 +--
 .../components/RuleOutputsDrawer.vue          |  4 +-
 src/views/Webhook/WebhookCreate.vue           | 29 +++-----
 src/views/Webhook/WebhookDetail.vue           | 23 +++---
 50 files changed, 356 insertions(+), 395 deletions(-)

diff --git a/src/components/ListenerDrawer/ListenerDrawer.vue b/src/components/ListenerDrawer/ListenerDrawer.vue
index 7ebb5634a..4ac821870 100644
--- a/src/components/ListenerDrawer/ListenerDrawer.vue
+++ b/src/components/ListenerDrawer/ListenerDrawer.vue
@@ -10,8 +10,8 @@
     destroy-on-close
   >
     <el-form
-      label-position="top"
-      require-asterisk-position="right"
+      class="tong-form"
+      label-width="200px"
       :rules="listenerFormRules"
       :model="listenerRecord"
       :validate-on-rule-change="false"
@@ -65,7 +65,6 @@
         <el-col :span="12">
           <el-form-item :label="tl('maxConn')" prop="max_connections">
             <Oneof
-              class="in-one-row"
               v-model="listenerRecord.max_connections"
               :items="[{ type: 'number' }, { symbols: [INFINITY_VALUE], type: 'enum' }]"
             />
@@ -137,7 +136,6 @@
         <el-col v-if="!typesWithoutMaxConnectionRate.includes(listenerRecord.type)" :span="12">
           <el-form-item :label="t('Gateway.maxConnRate')" prop="max_conn_rate">
             <Oneof
-              class="in-one-row"
               v-model="listenerRecord.max_conn_rate"
               :items="[{ type: 'rate' }, { symbols: [INFINITY_VALUE], type: 'enum' }]"
             />
@@ -146,7 +144,6 @@
         <el-col :span="12">
           <el-form-item :label="t('Gateway.maxMsgPubRate')" prop="messages_rate">
             <Oneof
-              class="in-one-row"
               v-model="listenerRecord.messages_rate"
               :items="[{ type: 'rate' }, { symbols: [INFINITY_VALUE], type: 'enum' }]"
             />
@@ -155,7 +152,6 @@
         <el-col :span="12">
           <el-form-item :label="t('Gateway.maxMsgPubTraffic')" prop="bytes_rate">
             <Oneof
-              class="in-one-row"
               v-model="listenerRecord.bytes_rate"
               :items="[
                 {
diff --git a/src/style/common.scss b/src/style/common.scss
index 61d08a566..083e0982b 100644
--- a/src/style/common.scss
+++ b/src/style/common.scss
@@ -513,7 +513,7 @@ input:disabled {
   &.ft-card {
     margin-bottom: 16px;
   }
-  .el-card__body >.el-form {
+  .el-card__body >.el-form:not(.search-wrapper) {
     padding-top: 8px;
     margin-bottom: -16px;
   }
@@ -533,6 +533,11 @@ input:disabled {
     }
   }
 }
+.el-dialog__body {
+  >.el-form {
+    margin-bottom: -24px;
+  }
+}
 .block-title {
   margin-top: 0;
   margin-bottom: 0;
@@ -1028,14 +1033,20 @@ code {
     max-width: 100%;
     flex-basis: 100%;
   }
-  .el-form-item {
-    display: flex;
+  .el-col-12:not(.custom-col-24).dividing-line-below::after {
+    width: 100%;
+  }
+  &.el-form--label-right {
     .el-form-item__label {
-      line-height: 32px;
-      display: inline-flex;
       text-align: right;
-      height: 32px;
-      margin-bottom: 0;
     }
   }
+  .advanced-settings-btn {
+    margin-top: 0;
+    margin-bottom: 24px;
+    margin-left: 200px;
+  }
+  .btn-container {
+    margin-top: 0;
+  }
 }
diff --git a/src/style/normalize.scss b/src/style/normalize.scss
index b1a6e18d9..e660a645c 100644
--- a/src/style/normalize.scss
+++ b/src/style/normalize.scss
@@ -987,25 +987,24 @@
 
 /* Dialog */
 .el-dialog {
+  .el-dialog__header {
+    padding: 16px;
+    margin-right: 0;
+    border-bottom: 1px solid var(--color-grey-6);
+  }
+  .el-dialog__headerbtn {
+    top: 3px;
+  }
+  .el-dialog__body {
+    padding: 20px 16px;
+  }
+  .el-dialog__footer {
+    padding: 12px 16px;
+    border-top: 1px solid var(--color-grey-6);
+  }
   &.dialog-with-divider {
     .el-dialog__headerbtn {
       height: 50px;
     }
-
-    .el-dialog__header {
-      padding: 16px 24px;
-      margin-right: 0;
-      border-bottom: 1px solid var(--color-border-card);
-
-    }
-
-    .el-dialog__body {
-      padding: 24px;
-    }
-
-    .el-dialog__footer {
-      padding: 12px 16px;
-      border-top: 1px solid var(--color-border-card);
-    }
   }
 }
diff --git a/src/style/schemaForm.scss b/src/style/schemaForm.scss
index f1a2c4328..ec518ab89 100644
--- a/src/style/schemaForm.scss
+++ b/src/style/schemaForm.scss
@@ -1,5 +1,4 @@
 .schema-form {
-  padding-bottom: 24px;
   &.is-loading {
     min-height: 400px;
     .el-skeleton {
diff --git a/src/views/AdvancedMQTT/AutoSub.vue b/src/views/AdvancedMQTT/AutoSub.vue
index f85708de7..6d1f45a54 100644
--- a/src/views/AdvancedMQTT/AutoSub.vue
+++ b/src/views/AdvancedMQTT/AutoSub.vue
@@ -56,9 +56,9 @@
       :rules="subsRules"
       :model="subsInput"
       ref="subsForm"
-      label-position="top"
-      require-asterisk-position="right"
       @keyup.enter="submitSubs(isEdit)"
+      class="tong-form"
+      label-width="160px"
     >
       <el-form-item :label="$t('Base.topic')" prop="topic">
         <el-input v-model="subsInput.topic" />
@@ -68,44 +68,31 @@
           <el-option v-for="item in QoSOptions" :key="item" :value="item" />
         </el-select>
       </el-form-item>
-      <el-row :gutter="20">
-        <el-col :span="8">
-          <el-form-item :label="$t('Clients.noLocal')" prop="nl">
-            <el-select v-model="subsInput.nl">
-              <el-option
-                v-for="{ value, label } in noLocalOpts"
-                :label="label"
-                :value="value"
-                :key="value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="$t('Clients.retainAsPublished')" prop="rap">
-            <el-select v-model="subsInput.rap">
-              <el-option
-                v-for="{ value, label } in retainAsPublishedOpts"
-                :label="label"
-                :value="value"
-                :key="value"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-        <el-col :span="8">
-          <el-form-item :label="$t('Clients.retainHandling')" prop="rh">
-            <el-select v-model="subsInput.rh">
-              <el-option
-                v-for="item in retainHandlingOpts"
-                :label="item"
-                :value="item"
-                :key="item"
-              />
-            </el-select>
-          </el-form-item>
-        </el-col>
-      </el-row>
+      <el-form-item :label="$t('Clients.noLocal')" prop="nl">
+        <el-select v-model="subsInput.nl">
+          <el-option
+            v-for="{ value, label } in noLocalOpts"
+            :label="label"
+            :value="value"
+            :key="value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('Clients.retainAsPublished')" prop="rap">
+        <el-select v-model="subsInput.rap">
+          <el-option
+            v-for="{ value, label } in retainAsPublishedOpts"
+            :label="label"
+            :value="value"
+            :key="value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('Clients.retainHandling')" prop="rh">
+        <el-select v-model="subsInput.rh">
+          <el-option v-for="item in retainHandlingOpts" :label="item" :value="item" :key="item" />
+        </el-select>
+      </el-form-item>
     </el-form>
     <template #footer>
       <el-button @click="closeDialog()">{{ $t('Base.cancel') }}</el-button>
diff --git a/src/views/AdvancedMQTT/Rewrite.vue b/src/views/AdvancedMQTT/Rewrite.vue
index f7fe2de1f..81ad099a3 100644
--- a/src/views/AdvancedMQTT/Rewrite.vue
+++ b/src/views/AdvancedMQTT/Rewrite.vue
@@ -47,9 +47,9 @@
       ref="rewriteForm"
       :model="rewriteInput"
       :rules="rewriteRules"
-      label-position="top"
-      require-asterisk-position="right"
       @keyup.enter="submitRewrite(isEdit)"
+      class="tong-form"
+      label-width="160px"
     >
       <el-form-item :label="tl('action')" prop="action">
         <el-select v-model="rewriteInput.action">
diff --git a/src/views/Auth/AuthnCreate.vue b/src/views/Auth/AuthnCreate.vue
index c3cc8d319..0926185d6 100644
--- a/src/views/Auth/AuthnCreate.vue
+++ b/src/views/Auth/AuthnCreate.vue
@@ -36,14 +36,6 @@
           </template>
         </el-radio-group>
         <p class="item-description">{{ mechanismDesc }}</p>
-        <div class="step-btn">
-          <el-button @click="cancelCreate()">
-            {{ $t('Base.cancel') }}
-          </el-button>
-          <el-button type="primary" @click="handleNext">
-            {{ $t('Base.nextStep') }}
-          </el-button>
-        </div>
       </div>
       <!-- Backend -->
       <div v-if="step === 1" class="create-form">
@@ -114,18 +106,6 @@
             })
           }}
         </p>
-        <div class="step-btn">
-          <el-button @click="handleBack">
-            {{ $t('Base.backStep') }}
-          </el-button>
-          <el-button
-            type="primary"
-            @click="handleNext"
-            :disabled="needSelectInSecondStep && !backend"
-          >
-            {{ $t('Base.nextStep') }}
-          </el-button>
-        </div>
       </div>
       <!-- Config -->
       <div v-else-if="step === 2">
@@ -168,23 +148,45 @@
             {{ isWork ? $t('Auth.testSuccess') : $t('Auth.testFailed') }}
           </div>
         </div>
-        <div class="step-btn">
-          <!-- <el-button @click="handleTest">
+      </div>
+    </el-card>
+    <el-card class="ft-card">
+      <template v-if="step === 0">
+        <el-button @click="cancelCreate()">
+          {{ $t('Base.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="handleNext">
+          {{ $t('Base.nextStep') }}
+        </el-button>
+      </template>
+      <template v-if="step === 1">
+        <el-button @click="handleBack">
+          {{ $t('Base.backStep') }}
+        </el-button>
+        <el-button
+          type="primary"
+          @click="handleNext"
+          :disabled="needSelectInSecondStep && !backend"
+        >
+          {{ $t('Base.nextStep') }}
+        </el-button>
+      </template>
+      <template v-else-if="step === 2">
+        <!-- <el-button @click="handleTest">
             {{ $t('Base.test') }}
           </el-button> -->
-          <el-button @click="handleBack">
-            {{ $t('Base.backStep') }}
-          </el-button>
-          <el-button
-            type="primary"
-            :disabled="!$hasPermission('post')"
-            :loading="saveLoading"
-            @click="handleCreate"
-          >
-            {{ $t('Base.create') }}
-          </el-button>
-        </div>
-      </div>
+        <el-button @click="handleBack">
+          {{ $t('Base.backStep') }}
+        </el-button>
+        <el-button
+          type="primary"
+          :disabled="!$hasPermission('post')"
+          :loading="saveLoading"
+          @click="handleCreate"
+        >
+          {{ $t('Base.create') }}
+        </el-button>
+      </template>
     </el-card>
   </div>
 </template>
diff --git a/src/views/Auth/AuthnDetails.vue b/src/views/Auth/AuthnDetails.vue
index 438d65a35..a207b3323 100644
--- a/src/views/Auth/AuthnDetails.vue
+++ b/src/views/Auth/AuthnDetails.vue
@@ -106,6 +106,11 @@
               ref="formCom"
             />
             <jwt-config ref="formCom" v-else v-model="configData" is-edit />
+            <!-- <el-button @click="handleTest">
+              {{ $t('Base.test') }}
+            </el-button> -->
+          </el-card>
+          <el-card class="ft-card">
             <el-button @click="$router.push('/authentication')" v-if="!gateway">
               {{ $t('Base.cancel') }}
             </el-button>
@@ -117,9 +122,6 @@
             >
               {{ $t('Base.update') }}
             </el-button>
-            <!-- <el-button @click="handleTest">
-              {{ $t('Base.test') }}
-            </el-button> -->
           </el-card>
         </el-tab-pane>
         <el-tab-pane
diff --git a/src/views/Auth/AuthzCreate.vue b/src/views/Auth/AuthzCreate.vue
index ae0ce2476..d4d0c2e97 100644
--- a/src/views/Auth/AuthzCreate.vue
+++ b/src/views/Auth/AuthzCreate.vue
@@ -31,14 +31,6 @@
             </el-radio>
           </el-badge>
         </el-radio-group>
-        <div class="step-btn">
-          <el-button @click="$router.push('/authorization')">
-            {{ $t('Base.cancel') }}
-          </el-button>
-          <el-button type="primary" @click="handleNext" :disabled="!type">
-            {{ $t('Base.nextStep') }}
-          </el-button>
-        </div>
       </div>
       <!-- Config -->
       <div v-if="step === 1">
@@ -69,21 +61,31 @@
           :database="type"
           auth-type="authz"
         />
-        <div class="step-btn">
-          <el-button @click="handleBack">
-            {{ $t('Base.backStep') }}
-          </el-button>
-          <el-button
-            type="primary"
-            :disabled="!$hasPermission('post')"
-            @click="handleCreate"
-            :loading="saveLoading"
-          >
-            {{ $t('Base.create') }}
-          </el-button>
-        </div>
       </div>
     </el-card>
+    <el-card class="ft-card">
+      <template v-if="step === 0">
+        <el-button @click="$router.push('/authorization')">
+          {{ $t('Base.cancel') }}
+        </el-button>
+        <el-button type="primary" @click="handleNext" :disabled="!type">
+          {{ $t('Base.nextStep') }}
+        </el-button>
+      </template>
+      <template v-if="step === 1">
+        <el-button @click="handleBack">
+          {{ $t('Base.backStep') }}
+        </el-button>
+        <el-button
+          type="primary"
+          :disabled="!$hasPermission('post')"
+          @click="handleCreate"
+          :loading="saveLoading"
+        >
+          {{ $t('Base.create') }}
+        </el-button>
+      </template>
+    </el-card>
   </div>
 </template>
 
diff --git a/src/views/Auth/AuthzDetails.vue b/src/views/Auth/AuthzDetails.vue
index 288a44141..18c821715 100644
--- a/src/views/Auth/AuthzDetails.vue
+++ b/src/views/Auth/AuthzDetails.vue
@@ -80,6 +80,11 @@
               v-model="configData"
               ref="formCom"
             />
+            <!-- <el-button @click="handleTest">
+              {{ $t('Base.test') }}
+            </el-button> -->
+          </el-card>
+          <el-card class="ft-card">
             <el-button @click="$router.push('/authorization')">
               {{ $t('Base.cancel') }}
             </el-button>
@@ -91,9 +96,6 @@
             >
               {{ $t('Base.update') }}
             </el-button>
-            <!-- <el-button @click="handleTest">
-              {{ $t('Base.test') }}
-            </el-button> -->
           </el-card>
         </el-tab-pane>
       </div>
diff --git a/src/views/Auth/components/AuthnManager.vue b/src/views/Auth/components/AuthnManager.vue
index c47ee6749..3c9a2a7d6 100644
--- a/src/views/Auth/components/AuthnManager.vue
+++ b/src/views/Auth/components/AuthnManager.vue
@@ -88,8 +88,8 @@
         ref="recordForm"
         :model="record"
         :rules="getRules()"
-        label-position="top"
-        require-asterisk-position="right"
+        class="tong-form"
+        label-width="120px"
       >
         <el-form-item prop="user_id" :label="getFiledLabel(field)">
           <el-input v-model="record.user_id" :disabled="isEdit" />
@@ -360,9 +360,6 @@ const resetIsSuperuser = () => {
       width: 260px;
     }
   }
-  .border-checkbox {
-    margin-top: 16px;
-  }
 
   .add-funcs-container {
     display: flex;
diff --git a/src/views/Auth/components/HttpConfig.vue b/src/views/Auth/components/HttpConfig.vue
index a55ad9b49..38dd72516 100644
--- a/src/views/Auth/components/HttpConfig.vue
+++ b/src/views/Auth/components/HttpConfig.vue
@@ -26,11 +26,13 @@
 
           <el-col :span="24">
             <el-form-item>
-              <FormItemLabel
-                :label="$t('RuleEngine.headers')"
-                :desc="isMethodGet ? tl('httpHeaderDesc') : undefined"
-                desc-marked
-              />
+              <template #label>
+                <FormItemLabel
+                  :label="$t('RuleEngine.headers')"
+                  :desc="isMethodGet ? tl('httpHeaderDesc') : undefined"
+                  desc-marked
+                />
+              </template>
               <key-and-value-editor v-model="httpConfig.headers" />
             </el-form-item>
           </el-col>
diff --git a/src/views/Auth/style/auth.scss b/src/views/Auth/style/auth.scss
index 58c8cee82..39950b037 100644
--- a/src/views/Auth/style/auth.scss
+++ b/src/views/Auth/style/auth.scss
@@ -26,9 +26,6 @@
       margin-bottom: 32px;
     }
   }
-  .step-btn {
-    margin-top: 24px;
-  }
   .result-block {
     .result-title {
       font-size: 16px;
diff --git a/src/views/Auth/style/authConfig.scss b/src/views/Auth/style/authConfig.scss
index 0da27044e..07ce0cb94 100644
--- a/src/views/Auth/style/authConfig.scss
+++ b/src/views/Auth/style/authConfig.scss
@@ -1,4 +1,7 @@
 .config {
+  .el-form{
+    margin-bottom: -16px;
+  }
   .create-form {
     .el-form-item {
       position: relative;
@@ -12,7 +15,7 @@
       display: none;
     }
   }
-  .config-sub-block {
+  .config-sub-block:not(:last-child) {
     margin-bottom: 16px;
   }
   .help-btn {
diff --git a/src/views/Clients/components/CreateSubscribe.vue b/src/views/Clients/components/CreateSubscribe.vue
index 57fd934d8..289b9867a 100644
--- a/src/views/Clients/components/CreateSubscribe.vue
+++ b/src/views/Clients/components/CreateSubscribe.vue
@@ -7,13 +7,7 @@
     @close="close"
     @open="open"
   >
-    <el-form
-      ref="FormCom"
-      :model="record"
-      :rules="rules"
-      label-position="top"
-      require-asterisk-position="right"
-    >
+    <el-form ref="FormCom" :model="record" :rules="rules" class="tong-form" label-width="160px">
       <el-form-item v-if="!clientId" prop="clientid" :label="$t('Base.clientid')">
         <el-input v-model="record.clientid" :placeholder="$t('Base.clientid')" />
       </el-form-item>
diff --git a/src/views/Config/ClusterLinking/ClusterLinkingCreate.vue b/src/views/Config/ClusterLinking/ClusterLinkingCreate.vue
index 393ed8b8c..2b78e312e 100644
--- a/src/views/Config/ClusterLinking/ClusterLinkingCreate.vue
+++ b/src/views/Config/ClusterLinking/ClusterLinkingCreate.vue
@@ -5,19 +5,19 @@
     />
     <el-card class="app-card">
       <ClusterLinkingForm ref="FormCom" v-model="formData" />
-      <div>
-        <el-button @click="cancel">
-          {{ t('Base.cancel') }}
-        </el-button>
-        <el-button
-          type="primary"
-          :disabled="!$hasPermission('post')"
-          :loading="isSubmitting"
-          @click="submit"
-        >
-          {{ t('Base.create') }}
-        </el-button>
-      </div>
+    </el-card>
+    <el-card class="ft-card">
+      <el-button @click="cancel">
+        {{ t('Base.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :disabled="!$hasPermission('post')"
+        :loading="isSubmitting"
+        @click="submit"
+      >
+        {{ t('Base.create') }}
+      </el-button>
     </el-card>
   </div>
 </template>
diff --git a/src/views/Config/ClusterLinking/ClusterLinkingDetail.vue b/src/views/Config/ClusterLinking/ClusterLinkingDetail.vue
index 323a310ec..8e6049624 100644
--- a/src/views/Config/ClusterLinking/ClusterLinkingDetail.vue
+++ b/src/views/Config/ClusterLinking/ClusterLinkingDetail.vue
@@ -46,6 +46,8 @@
               :edit-data-topic-length="editDataTopicLength"
               is-edit
             />
+          </el-card>
+          <el-card class="ft-card">
             <el-button
               type="primary"
               :disabled="!$hasPermission('put')"
diff --git a/src/views/Config/ClusterLinking/components/ClusterLinkingForm.vue b/src/views/Config/ClusterLinking/components/ClusterLinkingForm.vue
index 383c431eb..37a0e3ae4 100644
--- a/src/views/Config/ClusterLinking/components/ClusterLinkingForm.vue
+++ b/src/views/Config/ClusterLinking/components/ClusterLinkingForm.vue
@@ -1,11 +1,10 @@
 <template>
   <el-form
     ref="FormCom"
-    class="cluster-linking-form"
+    class="cluster-linking-form tong-form"
     :model="record"
     :rules="rules"
-    label-position="top"
-    require-asterisk-position="right"
+    label-width="200px"
   >
     <el-row :gutter="20">
       <el-col :span="12">
diff --git a/src/views/Diagnose/LogTrace/LogTrace.vue b/src/views/Diagnose/LogTrace/LogTrace.vue
index 55cb750d7..9d5362f55 100644
--- a/src/views/Diagnose/LogTrace/LogTrace.vue
+++ b/src/views/Diagnose/LogTrace/LogTrace.vue
@@ -121,10 +121,10 @@
     >
       <el-form
         ref="createForm"
-        label-position="top"
-        require-asterisk-position="right"
+        class="tong-form"
         :model="record"
         :rules="createRules"
+        label-width="200px"
       >
         <el-row :gutter="20">
           <el-col :span="12">
@@ -188,11 +188,13 @@
           </el-col>
           <el-col :span="12">
             <el-form-item prop="payload_encode">
-              <FormItemLabel
-                :label="$t('LogTrace.payload')"
-                :desc="$t('LogTrace.payloadDesc')"
-                desc-marked
-              />
+              <template #label>
+                <FormItemLabel
+                  :label="$t('LogTrace.payload')"
+                  :desc="$t('LogTrace.payloadDesc')"
+                  desc-marked
+                />
+              </template>
               <el-select v-model="record.payload_encode">
                 <el-option
                   v-for="{ label, value } in encodeTypeOpt"
diff --git a/src/views/Diagnose/SlowSubConfig.vue b/src/views/Diagnose/SlowSubConfig.vue
index 018ab09bc..cfbf99437 100644
--- a/src/views/Diagnose/SlowSubConfig.vue
+++ b/src/views/Diagnose/SlowSubConfig.vue
@@ -7,11 +7,11 @@
       <div class="config-block">
         <h6 class="config-block-title">{{ $t('SlowSub.basicSettings') }}</h6>
         <el-form
+          class="slow-sub-form tong-form"
           ref="formCom"
+          label-width="200px"
           :model="configForm"
           :rules="rulesOfConfigForm"
-          label-position="top"
-          require-asterisk-position="right"
         >
           <el-row :gutter="32">
             <el-col :span="12">
@@ -237,6 +237,9 @@ getConfig()
   color: var(--color-title-primary);
   line-height: 25px;
 }
+.slow-sub-form {
+  width: 70%;
+}
 .type-desc {
   line-height: 1.5;
 }
diff --git a/src/views/Diagnose/TopicMetrics.vue b/src/views/Diagnose/TopicMetrics.vue
index 33c9ac864..4d2148104 100644
--- a/src/views/Diagnose/TopicMetrics.vue
+++ b/src/views/Diagnose/TopicMetrics.vue
@@ -148,9 +148,9 @@
       <el-form
         ref="record"
         :model="topicInput"
-        label-position="top"
-        require-asterisk-position="right"
         :rules="topicRules"
+        class="tong-form"
+        label-width="100px"
         @submit.prevent="addTopic()"
       >
         <el-form-item prop="topic" :label="$t('Base.topic')">
diff --git a/src/views/Exhook/ExhookCreate.vue b/src/views/Exhook/ExhookCreate.vue
index 8d08b2e93..4e4aaa6c3 100644
--- a/src/views/Exhook/ExhookCreate.vue
+++ b/src/views/Exhook/ExhookCreate.vue
@@ -3,19 +3,19 @@
     <detail-header :item="{ name: tl('addExhook'), path: '/exhook' }" />
     <el-card class="app-card exhook-create-card">
       <ExhookForm ref="formCom" v-model="formData" />
-      <div class="exhook-create-ft">
-        <el-button @click="cancel">
-          {{ $t('Base.cancel') }}
-        </el-button>
-        <el-button
-          type="primary"
-          :disabled="!$hasPermission('post')"
-          :loading="isSubmitting"
-          @click="submit"
-        >
-          {{ $t('Base.create') }}
-        </el-button>
-      </div>
+    </el-card>
+    <el-card class="ft-card">
+      <el-button @click="cancel">
+        {{ $t('Base.cancel') }}
+      </el-button>
+      <el-button
+        type="primary"
+        :disabled="!$hasPermission('post')"
+        :loading="isSubmitting"
+        @click="submit"
+      >
+        {{ $t('Base.create') }}
+      </el-button>
     </el-card>
   </div>
 </template>
diff --git a/src/views/Exhook/ExhookDetail.vue b/src/views/Exhook/ExhookDetail.vue
index b31f63246..662864fc1 100644
--- a/src/views/Exhook/ExhookDetail.vue
+++ b/src/views/Exhook/ExhookDetail.vue
@@ -67,6 +67,8 @@
         <el-tab-pane :label="t('Base.setting')" name="settings">
           <el-card class="app-card">
             <ExhookForm class="exhook-form" ref="formCom" v-model="exhookData" is-edit />
+          </el-card>
+          <el-card class="ft-card">
             <el-button
               type="primary"
               :disabled="!$hasPermission('put')"
diff --git a/src/views/Exhook/components/ExhookForm.vue b/src/views/Exhook/components/ExhookForm.vue
index d3044aafe..d6eff3b0a 100644
--- a/src/views/Exhook/components/ExhookForm.vue
+++ b/src/views/Exhook/components/ExhookForm.vue
@@ -1,11 +1,10 @@
 <template>
   <el-form
-    class="exhook-create-form"
+    class="exhook-create-form tong-form"
     ref="formCom"
-    label-position="top"
-    require-asterisk-position="right"
     :model="formData"
     :rules="rules"
+    label-width="200px"
   >
     <el-row :gutter="24">
       <el-col :span="12">
@@ -64,7 +63,6 @@
           </template>
           <Oneof
             v-model="formData.auto_reconnect"
-            in-row
             disabled-label=" "
             :items="[{ type: 'duration' }, { symbols: [false], type: 'enum' }]"
             :input-props="{ enabledUnits: ['ms', 's', 'm', 'h', 'd'] }"
diff --git a/src/views/Gateway/components/coapBasic.vue b/src/views/Gateway/components/coapBasic.vue
index 7716d98f8..edf447e5f 100644
--- a/src/views/Gateway/components/coapBasic.vue
+++ b/src/views/Gateway/components/coapBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form label-position="top">
+    <el-form class="tong-form" label-width="200px">
       <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item prop="connection_required">
diff --git a/src/views/Gateway/components/exprotoBasic.vue b/src/views/Gateway/components/exprotoBasic.vue
index da85500e5..449453cb3 100644
--- a/src/views/Gateway/components/exprotoBasic.vue
+++ b/src/views/Gateway/components/exprotoBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form label-position="top">
+    <el-form class="tong-form" label-width="200px">
       <div>
         <el-row :gutter="30">
           <el-col :span="12">
diff --git a/src/views/Gateway/components/gbt32960Basic.vue b/src/views/Gateway/components/gbt32960Basic.vue
index 441e39082..dd5785921 100644
--- a/src/views/Gateway/components/gbt32960Basic.vue
+++ b/src/views/Gateway/components/gbt32960Basic.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="gbt32960-basic">
-    <el-form label-position="top" :model="gbtValue">
+    <el-form class="tong-form" label-width="200px" :model="gbtValue">
       <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item :label="tl('mountPoint')">
diff --git a/src/views/Gateway/components/jt808Basic.vue b/src/views/Gateway/components/jt808Basic.vue
index fcd4fb9dd..ae95aee20 100644
--- a/src/views/Gateway/components/jt808Basic.vue
+++ b/src/views/Gateway/components/jt808Basic.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="jt808-basic">
-    <el-form ref="refForm" label-position="top" :model="jValue" :rules="rules">
+    <el-form ref="refForm" class="tong-form" label-width="200px" :model="jValue" :rules="rules">
       <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item :label="tl('mountPoint')">
diff --git a/src/views/Gateway/components/lwm2mBasic.vue b/src/views/Gateway/components/lwm2mBasic.vue
index 31d4287d9..3534c2c06 100644
--- a/src/views/Gateway/components/lwm2mBasic.vue
+++ b/src/views/Gateway/components/lwm2mBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form label-position="top">
+    <el-form class="tong-form" label-width="200px">
       <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item :label="tl('resDirectory')">
diff --git a/src/views/Gateway/components/mqttsnBasic.vue b/src/views/Gateway/components/mqttsnBasic.vue
index 25389a87b..bcaebeba2 100644
--- a/src/views/Gateway/components/mqttsnBasic.vue
+++ b/src/views/Gateway/components/mqttsnBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mqttsn-basic">
-    <el-form label-position="top" :model="mValue">
+    <el-form class="tong-form" label-width="200px" :model="mValue">
       <el-row :gutter="30">
         <el-col :span="12" prop="gateway_id">
           <el-form-item :label="'Gateway ID'">
diff --git a/src/views/Gateway/components/ocppBasic.vue b/src/views/Gateway/components/ocppBasic.vue
index 10992f880..66474d350 100644
--- a/src/views/Gateway/components/ocppBasic.vue
+++ b/src/views/Gateway/components/ocppBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ocpp-basic">
-    <el-form label-position="top" :model="oValue">
+    <el-form class="tong-form" label-width="200px" :model="oValue">
       <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item :label="tl('mountPoint')">
diff --git a/src/views/Gateway/components/stompBasic.vue b/src/views/Gateway/components/stompBasic.vue
index 90794261b..ee50d4305 100644
--- a/src/views/Gateway/components/stompBasic.vue
+++ b/src/views/Gateway/components/stompBasic.vue
@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-form label-position="top">
+    <el-form class="tong-form" label-width="200px">
       <el-row :gutter="30">
         <el-col :span="12">
           <el-form-item :label="tl('maxHeader')">
diff --git a/src/views/General/SSODetail.vue b/src/views/General/SSODetail.vue
index e401e3585..187354b93 100644
--- a/src/views/General/SSODetail.vue
+++ b/src/views/General/SSODetail.vue
@@ -9,18 +9,16 @@
           <component ref="FormCom" :is="formCom" v-model="formData" :is-edit="!!baseInfo" />
         </el-col>
       </el-row>
-      <el-row class="schema-form">
-        <el-col class="btn-col" :span="24" :style="store.getters.configPageBtnStyle">
-          <el-button
-            type="primary"
-            :disabled="!$hasPermission('put')"
-            :loading="isSubmitting"
-            @click="saveConfig"
-          >
-            {{ $t('Base.update') }}
-          </el-button>
-        </el-col>
-      </el-row>
+    </el-card>
+    <el-card class="ft-card">
+      <el-button
+        type="primary"
+        :disabled="!$hasPermission('put')"
+        :loading="isSubmitting"
+        @click="saveConfig"
+      >
+        {{ $t('Base.update') }}
+      </el-button>
     </el-card>
   </div>
 </template>
diff --git a/src/views/General/components/APIKeyDialog.vue b/src/views/General/components/APIKeyDialog.vue
index c5a31744f..b659e35b0 100644
--- a/src/views/General/components/APIKeyDialog.vue
+++ b/src/views/General/components/APIKeyDialog.vue
@@ -8,11 +8,11 @@
   >
     <el-form
       ref="formCom"
-      label-position="top"
-      require-asterisk-position="right"
       :model="formData"
       :rules="rules"
       :class="{ 'is-view': operationType === 'view' }"
+      class="tong-form"
+      label-width="120px"
     >
       <el-row :gutter="24">
         <el-col :span="12">
diff --git a/src/views/General/components/APIKeyResultDialog.vue b/src/views/General/components/APIKeyResultDialog.vue
index 3b089c1b5..8e85287b8 100644
--- a/src/views/General/components/APIKeyResultDialog.vue
+++ b/src/views/General/components/APIKeyResultDialog.vue
@@ -7,15 +7,15 @@
     :z-index="2000"
   >
     <TipContainer :content="$t('APIKey.resultTip')" />
-    <el-form ref="formCom" label-position="top">
+    <el-form ref="formCom" class="tong-form" label-width="120px">
       <el-row :gutter="24">
         <el-col :span="24">
           <el-form-item label="API Key">
             <el-row :gutter="16">
-              <el-col :span="21">
+              <el-col :span="18">
                 <el-input v-model="APIKeyData.api_key" disabled />
               </el-col>
-              <el-col :span="3">
+              <el-col :span="6">
                 <el-button @click="copyText(APIKeyData.api_key)">{{ $t('Base.copy') }}</el-button>
               </el-col>
             </el-row>
@@ -24,10 +24,10 @@
         <el-col :span="24">
           <el-form-item label="Secret Key">
             <el-row :gutter="16">
-              <el-col :span="21">
+              <el-col :span="18">
                 <el-input v-model="APIKeyData.api_secret" disabled />
               </el-col>
-              <el-col :span="3">
+              <el-col :span="6">
                 <el-button @click="copyText(APIKeyData.api_secret)">
                   {{ $t('Base.copy') }}
                 </el-button>
@@ -96,5 +96,9 @@ watch(showDialog, async (val) => {
       color: var(--color-text-primary);
     }
   }
+  .el-form-item__content > .el-row {
+    width: unset;
+    flex-grow: 1;
+  }
 }
 </style>
diff --git a/src/views/General/components/BannedDialog.vue b/src/views/General/components/BannedDialog.vue
index 47e43f0f4..afa8e012c 100644
--- a/src/views/General/components/BannedDialog.vue
+++ b/src/views/General/components/BannedDialog.vue
@@ -10,8 +10,8 @@
       ref="FormCom"
       :model="record"
       :rules="rules"
-      label-position="top"
-      require-asterisk-position="right"
+      class="tong-form"
+      label-width="160px"
       @keyup.enter="save()"
     >
       <el-row :gutter="20">
diff --git a/src/views/RuleEngine/Bridge/BridgeDetail.vue b/src/views/RuleEngine/Bridge/BridgeDetail.vue
index a2adab0f2..3abca35b4 100644
--- a/src/views/RuleEngine/Bridge/BridgeDetail.vue
+++ b/src/views/RuleEngine/Bridge/BridgeDetail.vue
@@ -119,27 +119,27 @@
                 :form-props="formProps"
               />
             </div>
-            <div v-if="!isFromRule" class="btn-area">
-              <el-button
-                v-if="bridgeInfo.type"
-                type="primary"
-                :disabled="!$hasPermission('put')"
-                plain
-                :loading="isTesting"
-                @click="testConnection"
-              >
-                {{ tl('testTheConnection') }}
-              </el-button>
-              <el-button
-                type="primary"
-                v-if="bridgeInfo.type"
-                :disabled="!$hasPermission('put') || isWebhookAction"
-                :loading="updateLoading"
-                @click="updateBridgeInfo()"
-              >
-                {{ $t('Base.update') }}
-              </el-button>
-            </div>
+          </el-card>
+          <el-card v-if="!isFromRule" class="ft-card">
+            <el-button
+              v-if="bridgeInfo.type"
+              type="primary"
+              :disabled="!$hasPermission('put')"
+              plain
+              :loading="isTesting"
+              @click="testConnection"
+            >
+              {{ tl('testTheConnection') }}
+            </el-button>
+            <el-button
+              type="primary"
+              v-if="bridgeInfo.type"
+              :disabled="!$hasPermission('put') || isWebhookAction"
+              :loading="updateLoading"
+              @click="updateBridgeInfo()"
+            >
+              {{ $t('Base.update') }}
+            </el-button>
           </el-card>
         </el-tab-pane>
       </div>
@@ -417,13 +417,6 @@ defineExpose({
   width: 75%;
   min-height: 400px;
 }
-.btn-area {
-  margin-top: 24px;
-  .el-button {
-    margin-left: 0;
-    margin-right: 12px;
-  }
-}
 .hide-tabs {
   > :deep(.el-tabs__header) {
     display: none;
diff --git a/src/views/RuleEngine/Bridge/Components/BridgeConfig/BridgeInfluxdbConfig.vue b/src/views/RuleEngine/Bridge/Components/BridgeConfig/BridgeInfluxdbConfig.vue
index c42a8468b..1376b1ae6 100644
--- a/src/views/RuleEngine/Bridge/Components/BridgeConfig/BridgeInfluxdbConfig.vue
+++ b/src/views/RuleEngine/Bridge/Components/BridgeConfig/BridgeInfluxdbConfig.vue
@@ -1,9 +1,8 @@
 <template>
   <el-form
     ref="formCom"
-    label-position="top"
-    require-asterisk-position="right"
-    class="bridge-influxdb-config bridge-config"
+    class="bridge-influxdb-config bridge-config tong-form"
+    label-width="200px"
     :rules="formRules"
     :model="formData"
     :disabled="disabled"
diff --git a/src/views/RuleEngine/Bridge/Components/UsingSchemaBridgeConfig.vue b/src/views/RuleEngine/Bridge/Components/UsingSchemaBridgeConfig.vue
index 6e643d9c2..1b2208118 100644
--- a/src/views/RuleEngine/Bridge/Components/UsingSchemaBridgeConfig.vue
+++ b/src/views/RuleEngine/Bridge/Components/UsingSchemaBridgeConfig.vue
@@ -104,11 +104,9 @@ const saveLoading = ref(false)
 const formCom = ref()
 
 const formBindProps = computed(() => ({
-  labelWidth: undefined,
-  labelPosition: 'top',
-  requireAsteriskPosition: 'right',
+  labelWidth: '200px',
   disabled: props.disabled,
-  class: '',
+  class: 'tong-form',
   ...props.formProps,
 }))
 
diff --git a/src/views/RuleEngine/Connector/ConnectorCreate.vue b/src/views/RuleEngine/Connector/ConnectorCreate.vue
index 1f12edf72..69b4c878a 100644
--- a/src/views/RuleEngine/Connector/ConnectorCreate.vue
+++ b/src/views/RuleEngine/Connector/ConnectorCreate.vue
@@ -30,36 +30,36 @@
           :copy="isCopy"
         />
       </div>
-      <div class="form-ft">
-        <el-button v-if="(isInSinglePage && step === 0) || !isInSinglePage" @click="cancel">
-          {{ $t('Base.cancel') }}
+    </el-card>
+    <el-card class="ft-card form-ft">
+      <el-button v-if="(isInSinglePage && step === 0) || !isInSinglePage" @click="cancel">
+        {{ $t('Base.cancel') }}
+      </el-button>
+      <el-button v-if="step === 0" type="primary" :disabled="isSubmitting" @click="goNextStep">
+        {{ $t('Base.nextStep') }}
+      </el-button>
+      <template v-else-if="step === 1">
+        <el-button v-if="isInSinglePage" :disabled="isSubmitting" @click="goPreStep">
+          {{ $t('Base.backStep') }}
         </el-button>
-        <el-button v-if="step === 0" type="primary" :disabled="isSubmitting" @click="goNextStep">
-          {{ $t('Base.nextStep') }}
+        <el-button
+          type="primary"
+          plain
+          :loading="isTesting"
+          :disabled="!$hasPermission('post')"
+          @click="handleTest"
+        >
+          {{ tl('testTheConnection') }}
         </el-button>
-        <template v-else-if="step === 1">
-          <el-button v-if="isInSinglePage" :disabled="isSubmitting" @click="goPreStep">
-            {{ $t('Base.backStep') }}
-          </el-button>
-          <el-button
-            type="primary"
-            plain
-            :loading="isTesting"
-            :disabled="!$hasPermission('post')"
-            @click="handleTest"
-          >
-            {{ tl('testTheConnection') }}
-          </el-button>
-          <el-button
-            type="primary"
-            :loading="isSubmitting"
-            :disabled="!$hasPermission('post')"
-            @click="submit"
-          >
-            {{ $t('Base.create') }}
-          </el-button>
-        </template>
-      </div>
+        <el-button
+          type="primary"
+          :loading="isSubmitting"
+          :disabled="!$hasPermission('post')"
+          @click="submit"
+        >
+          {{ $t('Base.create') }}
+        </el-button>
+      </template>
     </el-card>
   </div>
   <CreateRuleWithConnector
@@ -241,9 +241,5 @@ checkProps()
     margin-bottom: 24px;
     --color-bg-info: var(--color-bg-split);
   }
-
-  .form-ft {
-    margin-top: 24px;
-  }
 }
 </style>
diff --git a/src/views/RuleEngine/Connector/ConnectorDetail.vue b/src/views/RuleEngine/Connector/ConnectorDetail.vue
index 1360ee1eb..87ae2ca77 100644
--- a/src/views/RuleEngine/Connector/ConnectorDetail.vue
+++ b/src/views/RuleEngine/Connector/ConnectorDetail.vue
@@ -82,29 +82,29 @@
               v-bind="fromComProps"
             />
           </div>
-          <div class="btn-area">
-            <el-button @click="saveAsCopy" :disabled="isWebhookConnector">
-              {{ tl('saveAsCopy') }}
-            </el-button>
-            <el-button
-              v-if="connectorData.type"
-              type="primary"
-              plain
-              :loading="isTesting"
-              @click="handleTest"
-            >
-              {{ tl('testTheConnection') }}
-            </el-button>
-            <el-button
-              type="primary"
-              v-if="connectorData.type"
-              :loading="isSubmitting"
-              :disabled="isWebhookConnector"
-              @click="submit"
-            >
-              {{ $t('Base.update') }}
-            </el-button>
-          </div>
+        </el-card>
+        <el-card class="ft-card">
+          <el-button @click="saveAsCopy" :disabled="isWebhookConnector">
+            {{ tl('saveAsCopy') }}
+          </el-button>
+          <el-button
+            v-if="connectorData.type"
+            type="primary"
+            plain
+            :loading="isTesting"
+            @click="handleTest"
+          >
+            {{ tl('testTheConnection') }}
+          </el-button>
+          <el-button
+            type="primary"
+            v-if="connectorData.type"
+            :loading="isSubmitting"
+            :disabled="isWebhookConnector"
+            @click="submit"
+          >
+            {{ $t('Base.update') }}
+          </el-button>
         </el-card>
       </div>
     </div>
diff --git a/src/views/RuleEngine/Connector/components/ConnectorCreateDrawer.vue b/src/views/RuleEngine/Connector/components/ConnectorCreateDrawer.vue
index acd40f9fd..856685920 100644
--- a/src/views/RuleEngine/Connector/components/ConnectorCreateDrawer.vue
+++ b/src/views/RuleEngine/Connector/components/ConnectorCreateDrawer.vue
@@ -61,11 +61,12 @@ const cancel = () => (showDrawer.value = false)
     }
   }
   // Set a special style for the button block of the creation page
-  .form-ft {
+  .el-card.ft-card {
     position: fixed;
     bottom: 0;
     right: 0;
-    padding: 10px 20px;
+    padding: 16px;
+    margin-bottom: 0;
   }
 }
 </style>
diff --git a/src/views/RuleEngine/Connector/components/ConnectorSchemaForm.vue b/src/views/RuleEngine/Connector/components/ConnectorSchemaForm.vue
index d2895d359..6b73eb585 100644
--- a/src/views/RuleEngine/Connector/components/ConnectorSchemaForm.vue
+++ b/src/views/RuleEngine/Connector/components/ConnectorSchemaForm.vue
@@ -94,10 +94,8 @@ const saveLoading = ref(false)
 const formCom = ref()
 
 const formBindProps = computed(() => ({
-  labelWidth: undefined,
-  labelPosition: 'top',
-  requireAsteriskPosition: 'right',
-  class: '',
+  labelWidth: '200px',
+  class: 'tong-form',
   ...props.formProps,
 }))
 
diff --git a/src/views/RuleEngine/MessageTransform/components/TestDrawer.vue b/src/views/RuleEngine/MessageTransform/components/TestDrawer.vue
index cbd23e554..1e7e0dccb 100644
--- a/src/views/RuleEngine/MessageTransform/components/TestDrawer.vue
+++ b/src/views/RuleEngine/MessageTransform/components/TestDrawer.vue
@@ -6,7 +6,7 @@
     :title="tl('preview')"
     size="700px"
   >
-    <el-form ref="FormRef" :model="formData" :rules="rules" label-position="top">
+    <el-form ref="FormRef" :model="formData" :rules="rules" class="tong-form" label-width="120px">
       <el-row :gutter="20">
         <el-col :span="8">
           <el-form-item prop="peername" :label="t('Clients.peername')">
diff --git a/src/views/RuleEngine/Source/SourceDetail.vue b/src/views/RuleEngine/Source/SourceDetail.vue
index c3db51225..6a7c539e0 100644
--- a/src/views/RuleEngine/Source/SourceDetail.vue
+++ b/src/views/RuleEngine/Source/SourceDetail.vue
@@ -86,27 +86,27 @@
                 @init="resetRawBridgeInfoAfterComponentInit"
               />
             </div>
-            <div v-if="!isFromRule" class="btn-area">
-              <el-button
-                v-if="sourceInfo.type"
-                type="primary"
-                :disabled="!$hasPermission('put')"
-                plain
-                :loading="isTesting"
-                @click="testConnection"
-              >
-                {{ tl('testTheConnection') }}
-              </el-button>
-              <el-button
-                type="primary"
-                v-if="sourceInfo.type"
-                :disabled="!$hasPermission('put')"
-                :loading="updateLoading"
-                @click="updateSourceInfo()"
-              >
-                {{ $t('Base.update') }}
-              </el-button>
-            </div>
+          </el-card>
+          <el-card v-if="!isFromRule" class="ft-card">
+            <el-button
+              v-if="sourceInfo.type"
+              type="primary"
+              :disabled="!$hasPermission('put')"
+              plain
+              :loading="isTesting"
+              @click="testConnection"
+            >
+              {{ tl('testTheConnection') }}
+            </el-button>
+            <el-button
+              type="primary"
+              v-if="sourceInfo.type"
+              :disabled="!$hasPermission('put')"
+              :loading="updateLoading"
+              @click="updateSourceInfo()"
+            >
+              {{ $t('Base.update') }}
+            </el-button>
           </el-card>
         </el-tab-pane>
       </div>
@@ -363,13 +363,6 @@ defineExpose({
   width: 75%;
   min-height: 400px;
 }
-.btn-area {
-  margin-top: 24px;
-  .el-button {
-    margin-left: 0;
-    margin-right: 12px;
-  }
-}
 .hide-tabs {
   > :deep(.el-tabs__header) {
     display: none;
diff --git a/src/views/RuleEngine/components/CopySubmitDialog.vue b/src/views/RuleEngine/components/CopySubmitDialog.vue
index 74b872231..5b499e3c3 100644
--- a/src/views/RuleEngine/components/CopySubmitDialog.vue
+++ b/src/views/RuleEngine/components/CopySubmitDialog.vue
@@ -1,6 +1,6 @@
 <template>
   <el-dialog v-model="showDialog" width="400px" :title="tl('saveAsCopy')" :z-index="2000">
-    <el-form label-position="top">
+    <el-form class="tong-form" label-width="100px">
       <el-form-item :label="formItemLabel" :error="inputError">
         <el-input v-model="inputValue" />
       </el-form-item>
diff --git a/src/views/RuleEngine/components/RuleInputsDrawer.vue b/src/views/RuleEngine/components/RuleInputsDrawer.vue
index 57b205b49..4ab4c1d44 100644
--- a/src/views/RuleEngine/components/RuleInputsDrawer.vue
+++ b/src/views/RuleEngine/components/RuleInputsDrawer.vue
@@ -6,13 +6,7 @@
     size="60%"
     destroy-on-close
   >
-    <el-form
-      label-position="top"
-      require-asterisk-position="right"
-      :model="inputForm"
-      :rules="rules"
-      ref="FormCom"
-    >
+    <el-form :model="inputForm" :rules="rules" ref="FormCom" class="tong-form" label-width="200px">
       <el-row :gutter="26">
         <el-col :span="12">
           <el-form-item :label="tl('inputType')" prop="type">
diff --git a/src/views/RuleEngine/components/RuleOutputsDrawer.vue b/src/views/RuleEngine/components/RuleOutputsDrawer.vue
index b66fcd4b8..527498001 100644
--- a/src/views/RuleEngine/components/RuleOutputsDrawer.vue
+++ b/src/views/RuleEngine/components/RuleOutputsDrawer.vue
@@ -7,11 +7,11 @@
     destroy-on-close
   >
     <el-form
-      label-position="top"
-      require-asterisk-position="right"
       :model="outputForm"
       :rules="outputFormRules"
       ref="formCom"
+      class="tong-form"
+      label-width="200px"
     >
       <el-row :gutter="26">
         <el-col :span="12">
diff --git a/src/views/Webhook/WebhookCreate.vue b/src/views/Webhook/WebhookCreate.vue
index fd7c3f00a..187d7b2dc 100644
--- a/src/views/Webhook/WebhookCreate.vue
+++ b/src/views/Webhook/WebhookCreate.vue
@@ -3,16 +3,16 @@
     <detail-header :item="{ name: t('components.webhook-create'), routeName: 'webhook' }" />
     <el-card class="webhook-create-card app-card">
       <WebhookFormCom v-if="webhook" ref="FormCom" v-model="webhook" />
-      <div class="card-ft">
-        <el-button
-          :loading="isSubmitting"
-          :disabled="!$hasPermission('post')"
-          type="primary"
-          @click="submit"
-        >
-          {{ tl('save') }}
-        </el-button>
-      </div>
+    </el-card>
+    <el-card class="ft-card">
+      <el-button
+        :loading="isSubmitting"
+        :disabled="!$hasPermission('post')"
+        type="primary"
+        @click="submit"
+      >
+        {{ tl('save') }}
+      </el-button>
     </el-card>
   </div>
 </template>
@@ -80,12 +80,3 @@ const submit = async () => {
   }
 }
 </script>
-
-<style lang="scss">
-.webhook-create-card {
-  padding: 12px 104px;
-  .card-ft {
-    padding-top: 36px;
-  }
-}
-</style>
diff --git a/src/views/Webhook/WebhookDetail.vue b/src/views/Webhook/WebhookDetail.vue
index 7171bba40..81ca07d05 100644
--- a/src/views/Webhook/WebhookDetail.vue
+++ b/src/views/Webhook/WebhookDetail.vue
@@ -53,16 +53,16 @@
         <el-tab-pane :label="t('Base.setting')" :name="DetailTab.Setting" lazy>
           <el-card class="detail-card webhook-create-card app-card" v-loading="infoLoading">
             <WebhookFormCom v-if="webhookData" ref="FormCom" v-model="webhookData" is-edit />
-            <div class="card-ft">
-              <el-button
-                :loading="isSubmitting"
-                :disabled="!$hasPermission('put')"
-                type="primary"
-                @click="submit"
-              >
-                {{ tl('save') }}
-              </el-button>
-            </div>
+          </el-card>
+          <el-card class="ft-card">
+            <el-button
+              :loading="isSubmitting"
+              :disabled="!$hasPermission('put')"
+              type="primary"
+              @click="submit"
+            >
+              {{ tl('save') }}
+            </el-button>
           </el-card>
         </el-tab-pane>
       </div>
@@ -212,9 +212,6 @@ getWebhookData()
 
 <style lang="scss">
 .webhook-detail {
-  .card-ft {
-    padding-top: 36px;
-  }
   .overview-container {
     min-height: 400px;
   }