style(系统设置): 优化服务集成的平台展现设置

system-setting/frontend/src/business/workspace/integration/BugManagement.vue

@@ -1,20 +1,38 @@
 <template>
   <div class="header-title" v-loading="loading">
     <div>
-      <div>{{ $t('organization.integration.select_defect_platform') }}</div>
+      <div>
-      <el-radio-group v-model="platform" style="margin-top: 10px">
+        {{ $t('organization.integration.select_defect_platform') }}
-        <span v-for="config in platformConfigs" :key="config.key">
+      </div>
+
+      <el-form class="platform-radio">
+        <el-radio-group v-model="platform" style="margin-top: 10px;width: 100%">
+          <el-row>
+            <el-col :gutter="20" :span="4">
+              <el-radio class="platform-radio" label="Tapd">
+                <img alt="Tapd" class="platform" src="/assets/tapd.png"/>
+              </el-radio>
+            </el-col>
+            <el-col :gutter="20" :span="4">
+              <el-radio class="platform-radio" label="AzureDevops">
+                <img alt="AzureDevops" class="platform" src="/assets/AzureDevops.png"/>
+              </el-radio>
+            </el-col>
+            <el-col :gutter="20" :span="16">
+            </el-col>
+          </el-row>
+          <el-row v-for="(row, index) in platformConfigs" :key="index">
+            <el-col v-for="config in row" :key="config.key" :gutter="20" :span="4">
+            <span>
              <el-radio :label="config.label" class="platform-radio">
-            <img class="platform" :src="getPlatformImageUrl(config)" :alt="config.label"/>
+              <img :alt="config.label" :src="getPlatformImageUrl(config)" class="platform"/>
             </el-radio>
           </span>
-        <el-radio label="Tapd" class="platform-radio">
+            </el-col>
-          <img class="platform" src="/assets/tapd.png" alt="Tapd"/>
+          </el-row>
-        </el-radio>
-        <el-radio label="AzureDevops" class="platform-radio" v-xpack>
-          <img class="platform" src="/assets/AzureDevops.png" alt="AzureDevops"/>
-        </el-radio>
         </el-radio-group>
+      </el-form>
+
     </div>
 
     <tapd-setting v-if="tapdEnable" ref="tapdSetting"/>
@@ -51,7 +69,13 @@ export default {
 
     getIntegrationInfo()
       .then((r) => {
-        this.platformConfigs = r.data;
+        for (let i = 0; i < r.data.length; i++) {
+          let pageNum = Math.floor(i / 5);
+          if (!this.platformConfigs[pageNum]) {
+            this.platformConfigs.push([]);
+          }
+          this.platformConfigs[pageNum].push(r.data[i]);
+        }
       });
 
     this.platform = TAPD;
@@ -78,7 +102,7 @@ export default {
 }
 
 .platform {
-  height: 80px;
+  height: 60px;
   vertical-align: middle
 }