refactor: 修改样式

frontend/src/business/components/settings/organization/IssuesManagement.vue

@@ -1,49 +1,52 @@
 <template>
   <el-card class="header-title" v-loading="result.loading">
     <div>
-      <div>{{$t('organization.select_defect_platform')}}</div>
+      <div>{{$t('organization.integration.select_defect_platform')}}</div>
       <el-radio-group v-model="platform" style="margin-top: 10px" @change="change">
-        <el-radio v-for="(item, index) in platforms" :key="index" :label="item.value" size="small">
+        <el-radio label="Tapd">
-          {{item.name}}
+          <img class="platform" src="../../../../assets/tapd.png" alt="Tapd"/>
+        </el-radio>
+        <el-radio label="Jira">
+          <img class="platform" src="../../../../assets/jira.png" alt="Jira"/>
         </el-radio>
       </el-radio-group>
     </div>
 
     <div style="width: 500px">
-      <div style="margin-top: 20px;margin-bottom: 10px">{{$t('organization.basic_auth_info')}}</div>
+      <div style="margin-top: 20px;margin-bottom: 10px">{{$t('organization.integration.basic_auth_info')}}</div>
-      <el-form :model="form" ref="form" label-width="100px" size="small" :disabled="show" :rules="rules">
+      <el-form :model="form" ref="form" label-width="120px" size="small" :disabled="show" :rules="rules">
-        <el-form-item :label="$t('organization.api_account')" prop="account">
+        <el-form-item :label="$t('organization.integration.api_account')" prop="account">
-          <el-input v-model="form.account" :placeholder="$t('organization.input_api_account')"/>
+          <el-input v-model="form.account" :placeholder="$t('organization.integration.input_api_account')"/>
         </el-form-item>
-        <el-form-item :label="$t('organization.api_password')" prop="password">
+        <el-form-item :label="$t('organization.integration.api_password')" prop="password">
           <el-input v-model="form.password" auto-complete="new-password"
-                    :placeholder="$t('organization.input_api_password')" show-password/>
+                    :placeholder="$t('organization.integration.input_api_password')" show-password/>
         </el-form-item>
-        <el-form-item label="JIRA 地址" prop="url" v-if="platform === 'Jira'">
+        <el-form-item :label="$t('organization.integration.jira_url')" prop="url" v-if="platform === 'Jira'">
-          <el-input v-model="form.url" placeholder="请输入Jira地址"/>
+          <el-input v-model="form.url" :placeholder="$t('organization.integration.input_jira_url')"/>
         </el-form-item>
       </el-form>
     </div>
 
-    <div style="margin-left: 100px">
+    <div style="margin-left: 120px">
       <el-button type="primary" size="mini" :disabled="!show" @click="testConnection">{{$t('ldap.test_connect')}}
       </el-button>
       <el-button v-if="showEdit" size="mini" @click="edit">{{$t('commons.edit')}}</el-button>
       <el-button type="primary" v-if="showSave" size="mini" @click="save('form')">{{$t('commons.save')}}</el-button>
-      <el-button v-if="showCancel" size="mini" @click="cancelEdit">取消编辑</el-button>
+      <el-button v-if="showCancel" size="mini" @click="cancelEdit">{{$t('organization.integration.cancel_edit')}}</el-button>
       <el-button type="info" size="mini" @click="cancelIntegration('form')" :disabled="!show">
-        取消集成
+        {{$t('organization.integration.cancel_integration')}}
       </el-button>
     </div>
 
     <div class="defect-tip">
-      <div>{{$t('organization.use_tip')}}</div>
+      <div>{{$t('organization.integration.use_tip')}}</div>
       <div>
-        1. {{$t('organization.use_tip_one')}}
+        1. {{$t('organization.integration.use_tip_one')}}
       </div>
       <div>
-        2. {{$t('organization.use_tip_two')}}
+        2. {{$t('organization.integration.use_tip_two')}}
-        <router-link to="/track/project/all" style="margin-left: 5px">{{$t('organization.link_the_project_now')}}
+        <router-link to="/track/project/all" style="margin-left: 5px">{{$t('organization.integration.link_the_project_now')}}
         </router-link>
       </div>
     </div>
@@ -65,20 +68,10 @@
         showEdit: true,
         showSave: false,
         showCancel: false,
-        platforms: [
-          {
-            name: 'TAPD',
-            value: 'Tapd',
-          },
-          {
-            name: 'JIRA',
-            value: 'Jira',
-          }
-        ],
         rules: {
-          account: {required: true, message: this.$t('organization.input_api_account'), trigger: ['change', 'blur']},
+          account: {required: true, message: this.$t('organization.integration.input_api_account'), trigger: ['change', 'blur']},
-          password: {required: true, message: this.$t('organization.input_api_password'), trigger: ['change', 'blur']},
+          password: {required: true, message: this.$t('organization.integration.input_api_password'), trigger: ['change', 'blur']},
-          url: {required: true, message: '请输入url', trigger: ['change', 'blur']}
+          url: {required: true, message: this.$t('organization.integration.input_jira_url'), trigger: ['change', 'blur']}
         },
       }
     },
@@ -119,7 +112,7 @@
       cancelIntegration() {
         if (this.form.account && this.form.password && this.platform) {
 
-          this.$alert("确认取消集成 " + this.platform + "？", '', {
+          this.$alert(this.$t('organization.integration.cancel_confirm') + this.platform + "？", '', {
             confirmButtonText: this.$t('commons.confirm'),
             callback: (action) => {
               if (action === 'confirm') {
@@ -127,19 +120,19 @@
                 param.orgId = getCurrentUser().lastOrganizationId;
                 param.platform = this.platform;
                 this.result = this.$post("service/integration/delete", param, () => {
-                  this.$success("操作成功");
+                  this.$success(this.$t('organization.integration.successful_operation'));
                   this.init('');
                 });
               }
             }
           });
         } else  {
-          this.$warning("未集成该平台！");
+          this.$warning(this.$t('organization.integration.not_integrated'));
         }
       },
       save(form) {
         if (!this.platform) {
-          this.$warning("请选择集成的平台！");
+          this.$warning(this.$t('organization.integration.choose_platform'));
           return;
         }
         let param = {};
@@ -196,7 +189,7 @@
       },
       testConnection() {
         this.result = this.$get("issues/auth/" + this.platform, () => {
-          this.$success("验证通过！");
+          this.$success(this.$t('organization.integration.verified'));
         });
       }
     }
@@ -215,4 +208,9 @@
     padding: 10px;
     border-radius: 3px;
   }
+
+  .platform {
+    height: 90px;
+    vertical-align: middle
+  }
 </style>

frontend/src/i18n/en-US.js

@@ -177,16 +177,27 @@ export default {
     select: 'Select Organization',
     service_integration: 'Service integration',
     defect_manage: 'Defect management platform',
-    select_defect_platform: 'Please select the defect management platform to be integrated:',
+    integration: {
-    basic_auth_info: 'Basic Auth account information:',
+      select_defect_platform: 'Please select the defect management platform to be integrated:',
-    api_account: 'API account',
+      basic_auth_info: 'Basic Auth account information:',
-    api_password: 'API password',
+      api_account: 'API account',
-    input_api_account: 'please enter account',
+      api_password: 'API password',
-    input_api_password: 'Please enter password',
+      jira_url: 'JIRA url',
-    use_tip: 'Usage guidelines:',
+      input_api_account: 'please enter account',
-    use_tip_one: 'Basic Auth account information is queried in "Company Management-Security and Integration-Open Platform"',
+      input_api_password: 'Please enter password',
-    use_tip_two: 'After saving the Basic Auth account information, you need to manually associate the ID/key in the Metersphere project',
+      input_jira_url: 'Please enter Jira address, for example: https://metersphere.atlassian.net/',
-    link_the_project_now: 'Link the project now',
+      use_tip: 'Usage guidelines:',
+      use_tip_one: 'Basic Auth account information is queried in "Company Management-Security and Integration-Open Platform"',
+      use_tip_two: 'After saving the Basic Auth account information, you need to manually associate the ID/key in the Metersphere project',
+      link_the_project_now: 'Link the project now',
+      cancel_edit: 'Cancel edit',
+      cancel_integration: 'Cancel integration',
+      cancel_confirm: 'Confirm cancellation of integration ',
+      successful_operation: 'Successful operation',
+      not_integrated: 'The platform is not integrated',
+      choose_platform: 'Please choose an integrated platform',
+      verified: 'Verified'
+    }
   },
   project: {
     name: 'Project name',

frontend/src/i18n/zh-CN.js

@@ -178,16 +178,27 @@ export default {
     delete_warning: '删除该组织将同步删除该组织下所有相关工作空间和相关工作空间下的所有项目，以及项目中的所有用例、接口测试、性能测试等,确定要删除吗?',
     service_integration: '服务集成',
     defect_manage: '缺陷管理平台',
-    select_defect_platform: '请选择要集成的缺陷管理平台：',
+    integration: {
-    basic_auth_info: 'Basic Auth 账号信息：',
+      select_defect_platform: '请选择要集成的缺陷管理平台：',
-    api_account: 'API 账号',
+      basic_auth_info: 'Basic Auth 账号信息：',
-    api_password: 'API 口令',
+      api_account: 'API 账号',
-    input_api_account: '请输入账号',
+      api_password: 'API 口令',
-    input_api_password: '请输入口令',
+      jira_url: 'JIRA 地址',
-    use_tip: '使用指引：',
+      input_api_account: '请输入账号',
-    use_tip_one: 'Basic Auth 账号信息在"公司管理-安全与集成-开放平台"中查询',
+      input_api_password: '请输入口令',
-    use_tip_two: '保存 Basic Auth 账号信息后，需要在 Metersphere 项目中手动关联 ID/key',
+      input_jira_url: '请输入Jira地址，例：https://metersphere.atlassian.net/',
-    link_the_project_now: '马上关联项目',
+      use_tip: '使用指引：',
+      use_tip_one: 'Basic Auth 账号信息在"公司管理-安全与集成-开放平台"中查询',
+      use_tip_two: '保存 Basic Auth 账号信息后，需要在 Metersphere 项目中手动关联 ID/key',
+      link_the_project_now: '马上关联项目',
+      cancel_edit: '取消编辑',
+      cancel_integration: '取消集成',
+      cancel_confirm: '确认取消集成 ',
+      successful_operation: '操作成功',
+      not_integrated: '未集成该平台',
+      choose_platform: '请选择集成的平台',
+      verified: '验证通过'
+    }
   },
   project: {
     recent: '最近的项目',

frontend/src/i18n/zh-TW.js

@@ -176,16 +176,27 @@ export default {
     delete_warning: '删除该组织将同步删除该组织下所有相关工作空间和相关工作空间下的所有项目，以及项目中的所有用例、接口测试、性能测试等,确定要删除吗?',
     service_integration: '服務集成',
     defect_manage: '缺陷管理平台',
-    select_defect_platform: '請選擇要集成的缺陷管理平台：',
+    integration: {
-    basic_auth_info: 'Basic Auth 賬號信息：',
+      select_defect_platform: '請選擇要集成的缺陷管理平台：',
-    api_account: 'API 賬號',
+      basic_auth_info: 'Basic Auth 賬號信息：',
-    api_password: 'API 口令',
+      api_account: 'API 賬號',
-    input_api_account: '請輸入賬號',
+      api_password: 'API 口令',
-    input_api_password: '請輸入口令',
+      jira_url: 'JIRA 地址',
-    use_tip: '使用指引：',
+      input_api_account: '請輸入賬號',
-    use_tip_one: 'Basic Auth 賬號信息在"公司管理-安全與集成-開放平台"中查詢',
+      input_api_password: '請輸入口令',
-    use_tip_two: '保存 Basic Auth 賬號信息後，需要在 Metersphere 項目中手動關聯 ID/key',
+      input_jira_url: '請輸入Jira地址，例：https://metersphere.atlassian.net/',
-    link_the_project_now: '馬上關聯項目',
+      use_tip: '使用指引：',
+      use_tip_one: 'Basic Auth 賬號信息在"公司管理-安全與集成-開放平台"中查詢',
+      use_tip_two: '保存 Basic Auth 賬號信息後，需要在 Metersphere 項目中手動關聯 ID/key',
+      link_the_project_now: '馬上關聯項目',
+      cancel_edit: '取消編輯',
+      cancel_integration: '取消集成',
+      cancel_confirm: '確認取消集成 ',
+      successful_operation: '操作成功',
+      not_integrated: '未集成該平台',
+      choose_platform: '請選擇集成的平台',
+      verified: '驗證通過'
+    }
   },
   project: {
     recent: '最近的項目',