style(global): basic form layout

emqx · Dec 20, 2024 · 224ef91 · 224ef91
1 parent 945dc31
commit 224ef91
Show file tree

Hide file tree

Showing 47 changed files with 337 additions and 388 deletions.
diff --git 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
@@ -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,12 @@ 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;
     }
   }
 }
diff --git 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/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
@@ -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
@@ -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
@@ -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
@@ -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>