From a2bb9cdeeb5dbe117f605309a5a6a36de6e7f024 Mon Sep 17 00:00:00 2001
From: Jianguo-Genius <herman.song.yang@gmail.com>
Date: Tue, 23 Apr 2024 17:37:24 +0800
Subject: [PATCH] =?UTF-8?q?style(=E7=B3=BB=E7=BB=9F=E8=AE=BE=E7=BD=AE):=20?=
 =?UTF-8?q?=E5=B0=8F=E5=B1=8F=E6=83=85=E5=86=B5=E4=B8=8B=E5=B9=B3=E5=8F=B0?=
 =?UTF-8?q?=E9=9B=86=E6=88=90=E5=B1=95=E7=A4=BA=E6=9B=B4=E5=8F=8B=E5=A5=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workspace/integration/BugManagement.vue   | 75 ++++++++++++-------
 1 file changed, 46 insertions(+), 29 deletions(-)

diff --git a/system-setting/frontend/src/business/workspace/integration/BugManagement.vue b/system-setting/frontend/src/business/workspace/integration/BugManagement.vue
index de123006b1..90ac9a46f8 100644
--- a/system-setting/frontend/src/business/workspace/integration/BugManagement.vue
+++ b/system-setting/frontend/src/business/workspace/integration/BugManagement.vue
@@ -5,31 +5,40 @@
         {{ $t('organization.integration.select_defect_platform') }}
       </div>
 
-      <el-form class="platform-radio">
+      <el-form style=" margin-left:-20px;">
         <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 :alt="config.label" :src="getPlatformImageUrl(config)" class="platform"/>
-            </el-radio>
-          </span>
-            </el-col>
-          </el-row>
+          <table>
+            <tr>
+              <td>
+                <el-radio class="platform-radio" label="Tapd">
+                  <img alt="Tapd" class="platform" src="/assets/tapd.png"/>
+                </el-radio>
+              </td>
+              <td>
+                <el-radio class="platform-radio" label="AzureDevops">
+                  <img alt="AzureDevops" class="platform" src="/assets/AzureDevops.png"/>
+                </el-radio>
+              </td>
+              <td v-for="config in firstRowPlatformConfigImages" :key="config.key">
+                  <span>
+                     <el-radio :label="config.label" class="platform-radio">
+                      <img :alt="config.label" :src="getPlatformImageUrl(config)" class="platform"
+                           style="width: 150px;height: auto"/>
+                    </el-radio>
+                  </span>
+              </td>
+            </tr>
+            <tr v-for="(row, index) in otherPlatformConfigImages" :key="index">
+              <td v-for="config in row" :key="config.key">
+                  <span>
+                     <el-radio :label="config.label" class="platform-radio">
+                      <img :alt="config.label" :src="getPlatformImageUrl(config)" class="platform"
+                           style="width: 150px;height: auto"/>
+                    </el-radio>
+                  </span>
+              </td>
+            </tr>
+          </table>
         </el-radio-group>
       </el-form>
 
@@ -61,20 +70,28 @@ export default {
     return {
       loading: false,
       platformConfigs: [],
+      firstRowPlatformConfigImages: [],
+      otherPlatformConfigImages: [],
       platform: TAPD,
     }
   },
   activated() {
     this.platformConfigs = [];
-
+    this.firstRowPlatformConfigImages = [];
+    this.otherPlatformConfigImages = [];
     getIntegrationInfo()
       .then((r) => {
         for (let i = 0; i < r.data.length; i++) {
-          let pageNum = Math.floor(i / 5);
-          if (!this.platformConfigs[pageNum]) {
-            this.platformConfigs.push([]);
+          this.platformConfigs.push(r.data[i]);
+          if (i < 2) {
+            this.firstRowPlatformConfigImages.push(r.data[i]);
+          } else {
+            let pageNum = Math.floor((i - 2) / 4);
+            if (!this.otherPlatformConfigImages[pageNum]) {
+              this.otherPlatformConfigImages.push([]);
+            }
+            this.otherPlatformConfigImages[pageNum].push(r.data[i]);
           }
-          this.platformConfigs[pageNum].push(r.data[i]);
         }
       });