style(接口自动化): DUBBO协议接口 显示样式修改

frontend/src/business/components/api/automation/scenario/common/ScenarioImport.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :close-on-click-modal="false" :title="$t('api_test.api_import.title')" width="30%"
+  <el-dialog :close-on-click-modal="false" :title="$t('api_test.automation.scenario_import')" width="30%"
              :visible.sync="visible" class="api-import" v-loading="result.loading" @close="close">
 
     <div class="header-bar">

frontend/src/business/components/api/definition/components/request/dubbo/ConfigCenter.vue

@@ -1,83 +1,86 @@
 <template>
   <el-form :model="config" :rules="rules" ref="config" label-width="100px" size="small" :disabled="isReadOnly">
-    <div class="dubbo-form-description" v-if="description">
-      {{ description }}
-    </div>
-    <el-form-item label="Protocol" prop="protocol" class="dubbo-form-item">
-      <el-select v-model="config.protocol" class="select-100" clearable>
-        <el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
-      </el-select>
-    </el-form-item>
+    <el-row>
+      <div class="dubbo-form-description" v-if="description">
+        {{ description }}
+      </div>
+    </el-row>
 
-    <el-form-item label="Group" prop="group" class="dubbo-form-item">
-      <el-input v-model="config.group" maxlength="300" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+    <el-row>
+      <el-form-item label="Protocol" prop="protocol" class="dubbo-form-item">
+        <el-select v-model="config.protocol" class="select-100" clearable>
+          <el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="Group" prop="group" class="dubbo-form-item">
+        <el-input v-model="config.group" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+      <el-form-item label="Namespace" prop="namespace" class="dubbo-form-item">
+        <el-input v-model="config.namespace" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+      <el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
+        <el-input type="number" v-model="config.timeout" :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+    </el-row>
+    <el-row>
+      <el-form-item label="Address" prop="address" class="dubbo-form-item-long">
+        <el-input v-model="config.address" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
-    <el-form-item label="Namespace" prop="namespace" class="dubbo-form-item">
-      <el-input v-model="config.namespace" maxlength="300" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
-
-    <el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
-      <el-input type="number" v-model="config.timeout" :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
-
-    <el-form-item label="Address" prop="address" class="dubbo-form-item-long">
-      <el-input v-model="config.address" maxlength="300" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
-
-    <el-form-item label="UserName" prop="username" class="dubbo-form-item">
-      <el-input v-model="config.username" maxlength="100" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
-
-    <el-form-item label="Password" prop="password" class="dubbo-form-item">
-      <el-input v-model="config.password" maxlength="30" show-word-limit show-password autocomplete="new-password"
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="UserName" prop="username" class="dubbo-form-item">
+        <el-input v-model="config.username" maxlength="100" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
+      <el-form-item label="Password" prop="password" class="dubbo-form-item">
+        <el-input v-model="config.password" maxlength="30" show-word-limit show-password autocomplete="new-password"
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
+    </el-row>
   </el-form>
+
 </template>
 
 <script>
-import './dubbo.css'
-import {ConfigCenter} from "@/business/components/api/definition/model/ApiTestModel";
+  import './dubbo.css'
+  import {ConfigCenter} from "@/business/components/api/definition/model/ApiTestModel";
 
-export default {
-  name: "MsDubboConfigCenter",
-  props: {
-    description: String,
-    config: {},
-    isReadOnly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      protocols: ConfigCenter.PROTOCOLS,
-      methods: [],
-      rules: {
-        group: [
-          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ],
-        namespace: [
-          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ],
-        username: [
-          {max: 100, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ],
-        password: [
-          {max: 30, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ],
-        address: [
-          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ]
+  export default {
+    name: "MsDubboConfigCenter",
+    props: {
+      description: String,
+      config: {},
+      isReadOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        protocols: ConfigCenter.PROTOCOLS,
+        methods: [],
+        rules: {
+          group: [
+            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ],
+          namespace: [
+            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ],
+          username: [
+            {max: 100, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ],
+          password: [
+            {max: 30, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ],
+          address: [
+            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ]
+        }
       }
     }
   }
-}
 </script>

frontend/src/business/components/api/definition/components/request/dubbo/ConsumerAndService.vue

@@ -1,82 +1,86 @@
 <template>
 
   <el-form :model="consumer" :rules="rules" ref="consumer" label-width="100px" size="small" :disabled="isReadOnly">
-    <div class="dubbo-form-description" v-if="description">
-      {{ description }}
-    </div>
-    <el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
-      <el-input type="number" v-model="consumer.timeout" :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+    <el-row>
+      <div class="dubbo-form-description" v-if="description">
+        {{ description }}
+      </div>
+    </el-row>
+    <el-row>
+      <el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
+        <el-input type="number" v-model="consumer.timeout" :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+      <el-form-item label="Version" prop="version" class="dubbo-form-item">
+        <el-input v-model="consumer.version" maxlength="30" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
-    <el-form-item label="Version" prop="version" class="dubbo-form-item">
-      <el-input v-model="consumer.version" maxlength="30" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="Retries" prop="retries" class="dubbo-form-item">
+        <el-input type="number" v-model="consumer.retries" :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
-    <el-form-item label="Retries" prop="retries" class="dubbo-form-item">
-      <el-input type="number" v-model="consumer.retries" :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="Cluster" prop="cluster" class="dubbo-form-item">
+        <el-input v-model="consumer.cluster" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+    </el-row>
+    <el-row>
+      <el-form-item label="Group" prop="group" class="dubbo-form-item">
+        <el-input v-model="consumer.group" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
-    <el-form-item label="Cluster" prop="cluster" class="dubbo-form-item">
-      <el-input v-model="consumer.cluster" maxlength="300" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="Connections" prop="connections" class="dubbo-form-item">
+        <el-input type="number" v-model="consumer.connections" :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
-    <el-form-item label="Group" prop="group" class="dubbo-form-item">
-      <el-input v-model="consumer.group" maxlength="300" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="Async" prop="async" class="dubbo-form-item">
+        <el-select v-model="consumer.async" class="select-100" clearable>
+          <el-option v-for="option in asyncOptions" :key="option" :label="option" :value="option"/>
+        </el-select>
+      </el-form-item>
 
-    <el-form-item label="Connections" prop="connections" class="dubbo-form-item">
-      <el-input type="number" v-model="consumer.connections" :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
-
-    <el-form-item label="Async" prop="async" class="dubbo-form-item">
-      <el-select v-model="consumer.async" class="select-100" clearable>
-        <el-option v-for="option in asyncOptions" :key="option" :label="option" :value="option"/>
-      </el-select>
-    </el-form-item>
-
-    <el-form-item label="LoadBalance" prop="loadBalance" class="dubbo-form-item">
-      <el-select v-model="consumer.loadBalance" class="select-100" clearable>
-        <el-option v-for="option in loadBalances" :key="option" :label="option" :value="option"/>
-      </el-select>
-    </el-form-item>
+      <el-form-item label="LoadBalance" prop="loadBalance" class="dubbo-form-item">
+        <el-select v-model="consumer.loadBalance" class="select-100" clearable>
+          <el-option v-for="option in loadBalances" :key="option" :label="option" :value="option"/>
+        </el-select>
+      </el-form-item>
+    </el-row>
   </el-form>
 
 </template>
 
 <script>
-import './dubbo.css'
-import {ConsumerAndService, RegistryCenter} from "@/business/components/api/definition/model/ApiTestModel";
+  import './dubbo.css'
+  import {ConsumerAndService, RegistryCenter} from "@/business/components/api/definition/model/ApiTestModel";
 
-export default {
-  name: "MsDubboConsumerService",
-  props: {
-    description: String,
-    consumer: {},
-    isReadOnly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      asyncOptions: ConsumerAndService.ASYNC_OPTIONS,
-      loadBalances: ConsumerAndService.LOAD_BALANCE_OPTIONS,
-      methods: [],
-      rules: {
-        version: [
-          {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
-        ],
-        cluster: [
-          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ],
-        group: [
-          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ]
+  export default {
+    name: "MsDubboConsumerService",
+    props: {
+      description: String,
+      consumer: {},
+      isReadOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        asyncOptions: ConsumerAndService.ASYNC_OPTIONS,
+        loadBalances: ConsumerAndService.LOAD_BALANCE_OPTIONS,
+        methods: [],
+        rules: {
+          version: [
+            {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
+          ],
+          cluster: [
+            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ],
+          group: [
+            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ]
+        }
       }
     }
   }
-}
 </script>

frontend/src/business/components/api/definition/components/request/dubbo/Interface.vue

@@ -117,7 +117,7 @@
 
 <style scoped>
   .get-provider {
-    margin-bottom: 22px;
+    margin: 5px 5px 10px;
   }
 
   .select-100 {

frontend/src/business/components/api/definition/components/request/dubbo/RegistryCenter.vue

@@ -1,73 +1,78 @@
 <template>
   <el-form :model="registry" :rules="rules" ref="registry" label-width="100px" size="small" :disabled="isReadOnly">
-    <div class="dubbo-form-description" v-if="description">
-      {{ description }}
-    </div>
-    <el-form-item label="Protocol" prop="protocol" class="dubbo-form-item">
-      <el-select v-model="registry.protocol" class="select-100" clearable>
-        <el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
-      </el-select>
-    </el-form-item>
+    <el-row>
+      <div class="dubbo-form-description" v-if="description">
+        {{ description }}
+      </div>
+    </el-row>
+    <el-row>
+      <el-form-item label="Protocol" prop="protocol" class="dubbo-form-item">
+        <el-select v-model="registry.protocol" class="select-100" clearable>
+          <el-option v-for="p in protocols" :key="p" :label="p" :value="p"/>
+        </el-select>
+      </el-form-item>
 
-    <el-form-item label="Group" prop="group" class="dubbo-form-item">
-      <el-input v-model="registry.group" maxlength="300" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="Group" prop="group" class="dubbo-form-item">
+        <el-input v-model="registry.group" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
-    <el-form-item label="UserName" prop="username" class="dubbo-form-item">
-      <el-input v-model="registry.username" maxlength="100" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="UserName" prop="username" class="dubbo-form-item">
+        <el-input v-model="registry.username" maxlength="100" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
-    <el-form-item label="Password" prop="password" class="dubbo-form-item">
-      <el-input v-model="registry.password" maxlength="30" show-word-limit show-password autocomplete="new-password"
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="Password" prop="password" class="dubbo-form-item">
+        <el-input v-model="registry.password" maxlength="30" show-word-limit show-password autocomplete="new-password"
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+    </el-row>
+    <el-row>
+      <el-form-item label="Address" prop="address" class="dubbo-form-item-long">
+        <el-input v-model="registry.address" maxlength="300" show-word-limit
+                  :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
 
-    <el-form-item label="Address" prop="address" class="dubbo-form-item-long">
-      <el-input v-model="registry.address" maxlength="300" show-word-limit
-                :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
-
-    <el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
-      <el-input type="number" v-model="registry.timeout" :placeholder="$t('commons.input_content')"/>
-    </el-form-item>
+      <el-form-item label="Timeout" prop="timeout" class="dubbo-form-item">
+        <el-input type="number" v-model="registry.timeout" :placeholder="$t('commons.input_content')"/>
+      </el-form-item>
+    </el-row>
   </el-form>
 </template>
 
 <script>
-import './dubbo.css'
-import {RegistryCenter} from "@/business/components/api/definition/model/ApiTestModel";
+  import './dubbo.css'
+  import {RegistryCenter} from "@/business/components/api/definition/model/ApiTestModel";
 
-export default {
-  name: "MsDubboRegistryCenter",
-  props: {
-    description: String,
-    registry: {},
-    isReadOnly: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      protocols: RegistryCenter.PROTOCOLS,
-      methods: [],
-      rules: {
-        group: [
-          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ],
-        username: [
-          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ],
-        password: [
-          {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
-        ],
-        address: [
-          {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
-        ]
+  export default {
+    name: "MsDubboRegistryCenter",
+    props: {
+      description: String,
+      registry: {},
+      isReadOnly: {
+        type: Boolean,
+        default: false
+      }
+    },
+    data() {
+      return {
+        protocols: RegistryCenter.PROTOCOLS,
+        methods: [],
+        rules: {
+          group: [
+            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ],
+          username: [
+            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ],
+          password: [
+            {max: 30, message: this.$t('commons.input_limit', [0, 30]), trigger: 'blur'}
+          ],
+          address: [
+            {max: 300, message: this.$t('commons.input_limit', [0, 300]), trigger: 'blur'}
+          ]
+        }
       }
     }
   }
-}
 </script>