style(接口测试): 接口定义保存时弹框页面UI优化

--story=1010649 --user=郭雨琦
https://www.tapd.cn/55049933/prong/stories/view/1155049933001010649?url_cache_key=from_url_iteration_list_af1c2a348ba1b2cbec7f7734af247d0e&action_entry_type=stories

api-test/frontend/src/business/definition/components/sync/ApiSyncCaseConfig.vue

@@ -1,87 +1,85 @@
 <template>
   <el-dialog
+    width="600px"
     :visible.sync="batchSyncApiVisible" :close-on-click-modal="false"
     :title="$t('commons.save') + '&' + $t('workstation.sync') + $t('commons.setting')"
     v-if="isXpack">
-    <el-row style="margin-bottom: 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
+    <el-row class="box-class" style="margin-bottom: 16px;">
-      <div class="timeClass">
+      <div class="time-class">
-          <span style="font-size: 16px; font-weight: bold; padding-left: 10px">{{
+        <span>{{ $t('api_test.definition.one_click_sync') + 'case' }}</span>
-              $t('api_test.definition.one_click_sync') + 'case'
+        <el-switch v-model="apiSyncRuleRelation.syncCase" style="float:right;"></el-switch>
-            }}</span>
-        <el-switch v-model="apiSyncRuleRelation.syncCase" style="float:right; padding-right: 10px"></el-switch>
       </div>
-      <br/>
+      <span class="tip-class">{{ $t('workstation.batch_sync_api_tips') }}</span>
-      <span style="font-size: 12px; padding-left: 10px">{{ $t('workstation.batch_sync_api_tips') }}</span
+
-      ><br/><br/>
+      <div v-if="apiSyncRuleRelation.syncCase">
-      <span v-if="apiSyncRuleRelation.syncCase" style="font-size: 16px; font-weight: bold; padding-left: 10px">
+        <div style="border-top: solid rgba(31, 35, 41, 0.15) 1px; margin: 16px 0;"></div>
+        <span class="time-class">
           {{ $t('workstation.sync') + $t('commons.setting') }}
-          <i class="el-icon-arrow-down" v-if="showApiSyncConfig" @click="showApiSyncConfig = false"/>
+        </span>
-          <i class="el-icon-arrow-right" v-if="!showApiSyncConfig" @click="showApiSyncConfig = true"/> </span
-      ><br/><br/>
-      <div v-if="showApiSyncConfig">
         <sync-setting
-          style="padding-left: 20px"
+          style="margin-top: 16px"
-          v-if="apiSyncRuleRelation.syncCase"
           v-bind:sync-data="apiSyncRuleRelation.apiSyncConfig"
           ref="synSetting"
           @updateSyncData="updateSyncData"></sync-setting>
       </div>
     </el-row>
-    <el-row style="margin-bottom: 10px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)">
+    <el-row class="box-class" style="margin-bottom: 10px;">
-      <div class="timeClass">
+      <div class="time-class">
-          <span style="font-size: 16px; font-weight: bold; padding-left: 10px">
+        <div style="display: flex">
+          <span>
             {{ $t('api_test.definition.change_notification') }}
+          </span>
+          <el-tooltip
+            class="ms-num"
+            effect="dark"
+            :content="$t('project_application.workstation.api_receiver_tip')"
+            placement="top">
+            <svg-icon iconClass="question" class-name="ms-menu-img"
+                      :style="{color:'#8F959E',margin: '4px 0 0 0'}"></svg-icon>
+          </el-tooltip>
+        </div>
+        <el-switch v-model="apiSyncRuleRelation.sendNotice" style="float:right;"></el-switch>
+      </div>
+      <span class="tip-class"> {{ $t('api_test.definition.recipient_tips') }} </span>
+      <span
+        class="tip-class" style="color: var(--primary_color);cursor: pointer;" @click="gotoApiMessage">
+        {{ $t('project_application.workstation.go_to_api_message') }}
+      </span>
+      <el-row v-if="apiSyncRuleRelation.sendNotice">
+        <div style="border-top: solid rgba(31, 35, 41, 0.15) 1px; margin: 16px 0;"></div>
+        <span class="text-class">{{ $t('api_test.definition.recipient') }}</span>
+        <div style="color: var(--primary_color);margin-top: 8px;">
+          <el-checkbox v-model="apiSyncRuleRelation.caseCreator"><span
+            class="text-class">{{ 'CASE' + $t('api_test.creator') }}</span></el-checkbox>
+          <el-checkbox v-model="apiSyncRuleRelation.scenarioCreator">
+            <span class="text-class">{{ $t('commons.scenario') + $t('api_test.creator') }}</span>
+          </el-checkbox>
+        </div>
+      </el-row>
+    </el-row>
+    <span slot="footer" class="dialog-footer">
+      <div class="bottom-class">
+        <div class="close-class">
+          <el-checkbox v-model="apiSyncRuleRelation.showUpdateRule" style="color: #8F959E;width: 16px;height: 16px">
+          </el-checkbox>
+          <span class="text-class" style="margin-left: 8px;margin-right: 5px;">
+              {{ $t('project_application.workstation.no_show_setting') }}
+            </span>
             <el-tooltip
               class="ms-num"
               effect="dark"
-              :content="$t('project_application.workstation.api_receiver_tip')"
+              :content="$t('project_application.workstation.no_show_setting_tip')"
               placement="top">
-              <i class="el-icon-warning"/>
+              <svg-icon iconClass="question" class-name="ms-menu-img"
+                        :style="{color:'#8F959E',margin: '2px 0 0 0'}"></svg-icon>
             </el-tooltip>
-          </span>
+        </div>
-        <el-switch v-model="apiSyncRuleRelation.sendNotice" style="float:right;padding-right: 10px"></el-switch>
+        <div>
+          <el-button @click="batchSyncApiVisible = false">{{ $t('commons.cancel') }}</el-button>
+          <el-button type="primary" @click="batchSync()">{{ $t('commons.confirm') }}</el-button>
+        </div>
       </div>
-      <span style="font-size: 12px; padding-left: 10px"> {{ $t('api_test.definition.recipient_tips') }} </span><br/>
+    </span>
-      <p
-        style="
-            font-size: 12px;
-            color: var(--primary_color);
-            margin-bottom: 20px;
-            text-decoration: underline;
-            cursor: pointer;
-            padding-left: 10px;
-          "
-        @click="gotoApiMessage">
-        {{ $t('project_application.workstation.go_to_api_message') }}
-      </p>
-      <el-row v-if="apiSyncRuleRelation.sendNotice" style="margin-bottom: 5px; margin-top: 5px">
-        <el-col :span="4"
-        ><span style="font-weight: bold; padding-left: 10px">{{ $t('api_test.definition.recipient') + ':' }}</span>
-        </el-col>
-        <el-col :span="20" style="color: var(--primary_color)">
-          <el-checkbox v-model="apiSyncRuleRelation.caseCreator">{{ 'CASE' + $t('api_test.creator') }}</el-checkbox>
-          <el-checkbox v-model="apiSyncRuleRelation.scenarioCreator">
-            {{ $t('commons.scenario') + $t('api_test.creator') }}
-          </el-checkbox>
-        </el-col>
-      </el-row>
-    </el-row>
-    <el-row>
-      <el-checkbox v-model="apiSyncRuleRelation.showUpdateRule" style="padding-left: 10px"
-      >{{ $t('project_application.workstation.no_show_setting') }}
-      </el-checkbox>
-      <el-tooltip
-        class="ms-num"
-        effect="dark"
-        :content="$t('project_application.workstation.no_show_setting_tip')"
-        placement="top">
-        <i class="el-icon-warning"/>
-      </el-tooltip>
-    </el-row>
-    <span slot="footer" class="dialog-footer">
-        <el-button @click="batchSyncApiVisible = false">{{ $t('commons.cancel') }}</el-button>
-        <el-button type="primary" @click="batchSync()">{{ $t('commons.confirm') }}</el-button>
-      </span>
   </el-dialog>
 </template>
 
@@ -140,5 +138,75 @@ export default {
 </script>
 
 <style scoped>
+.box-class {
+  background: #FFFFFF;
+  border: 1px solid #DEE0E3;
+  border-radius: 4px;
+  width: 552px;
+  left: 4px;
+  top: -16px;
+  padding: 16px;
+}
+
+:deep(.el-dialog__title) {
+  font-size: 16px;
+  font-weight: 500;
+  /* left: 4px; */
+  margin-left: 4px;
+  color: #1F2329;
+  font-style: normal;
+  line-height: 24px;
+}
+
+.time-class {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 22px;
+  color: #1F2329;
+  margin-bottom: 8px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tip-class {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #646A73;
+}
+
+.bottom-class {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: -40px 4px 4px;
+}
+
+.text-class {
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #1F2329;
+}
+
+.close-class {
+  display: flex;
+  align-items: center;
+}
 
 </style>
+<style lang="scss" scoped>
+.ms-menu-img {
+  width: 15px;
+  height: 15px;
+  border: 0;
+  display: inline-block;
+  box-sizing: border-box;
+  background-repeat: no-repeat;
+  background-position: 50% center;
+}
+</style>

api-test/frontend/src/business/definition/util/SyncSetting.vue

@@ -1,25 +1,28 @@
 <template>
   <div>
     <el-row>
-      <el-col :span="4">{{ $t('api_test.mock.req_param') + ':' }}</el-col>
+      <span class="text-class">{{ $t('api_test.mock.req_param') }}</span>
-      <el-col :span="20" style="color: var(--primary_color)">
+      <div style="color: var(--primary_color);margin-top: 8px;">
-        <el-checkbox v-model="fromData.headers" @change="changeEvent">{{ 'Header' + '\xa0\xa0' }}</el-checkbox>
+        <el-checkbox v-model="fromData.headers" @change="changeEvent"><span class="text-class">{{
-        <el-checkbox v-model="fromData.query" @change="changeEvent"
+            'Header' + '\xa0\xa0'
-          >{{ $t('api_test.definition.request.query_param') }}
+          }}</span></el-checkbox>
+        <el-checkbox v-model="fromData.query" @change="changeEvent">
+          <span class="text-class">{{ $t('api_test.definition.request.query_param') }}</span>
         </el-checkbox>
-        <el-checkbox v-model="fromData.rest" @change="changeEvent"
+        <el-checkbox v-model="fromData.rest" @change="changeEvent">
-          >{{ $t('api_test.definition.request.rest_param') }}
+          <span class="text-class">{{ $t('api_test.definition.request.rest_param') }}</span>
         </el-checkbox>
-        <el-checkbox v-model="fromData.body" @change="changeEvent">{{ $t('api_test.request.body') }}</el-checkbox>
+        <el-checkbox v-model="fromData.body" @change="changeEvent"><span
-      </el-col>
+          class="text-class">{{ $t('api_test.request.body') }}</span></el-checkbox>
+      </div>
     </el-row>
-    <el-row>
+    <el-row style="margin-top: 16px">
-      <el-col :span="4">{{ $t('api_test.definition.request.other_config') + ':' }}</el-col>
+      <span class="text-class">{{ $t('api_test.definition.request.other_config') }}</span>
-      <el-col :span="20" style="color: var(--primary_color)">
+      <div style="color: var(--primary_color);margin-top: 8px;">
-        <el-checkbox v-model="fromData.delNotSame" @change="changeEvent"
+        <el-checkbox v-model="fromData.delNotSame" @change="changeEvent">
-          >{{ $t('workstation.delNotSame') }}
+          <span class="text-class">{{ $t('workstation.delNotSame') }}</span>
         </el-checkbox>
-      </el-col>
+      </div>
     </el-row>
   </div>
 </template>
@@ -57,7 +60,11 @@ export default {
 </script>
 
 <style scoped>
-.el-row {
+.text-class {
-  margin-bottom: 3px;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 22px;
+  color: #1F2329;
 }
 </style>

framework/sdk-parent/frontend/src/assets/module/question.svg

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
+     y="0px"
+     viewBox="0 0 24 24" style="enable-background:new 0 0 44 44;" xml:space="preserve">
+  <g>
+    <path class="st0" d="M4.222 4.222A10.969 10.969 0 0 1 12 1c3.037 0 5.789 1.232 7.778 3.222l-.707.707.707-.707A10.969 10.969 0 0 1 23 12c0 3.037-1.232 5.789-3.222 7.778A10.969 10.969 0 0 1 12 23a10.969 10.969 0 0 1-7.778-3.222l.707-.707-.707.707A10.969 10.969
+     0 0 1 1 12c0-3.037 1.232-5.789 3.222-7.778ZM12 3a8.969 8.969 0 0 0-6.364 2.636A8.969
+     8.969 0 0 0 3 12a8.969 8.969 0 0 0 2.636 6.364A8.969 8.969 0 0 0 12 21a8.968 8.968 0 0 0 6.364-2.636A8.968 8.968 0 0 0 21 12a8.969 8.969 0 0 0-2.636-6.364A8.969 8.969 0 0 0 12 3Z"/>
+    <path class="st0"
+          d="M8 9.312a4 4 0 1 1 5 3.874v1.126a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1 2 2 0 1 0-2-2 1 1 0 0 1-2 0ZM12 18.812a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"/>
+  </g>
+</svg>

framework/sdk-parent/frontend/src/i18n/lang/en-US.js

@@ -542,6 +542,9 @@ const message = {
       performance: 'Performance',
       scenario_case: 'Scenario Case'
     },
+    sync_case_tips: 'Note: After ignoring, the affected use cases will no longer have reminders, please operate with caution',
+    batch_sync_api_tips: 'Batch synchronization, some use case parameters that do not need to be synchronized may also be overwritten, causing the test to fail, please operate with caution',
+    batch_ignore_case_tips: 'Note: After batch ignoring, the affected use cases will no longer have reminders, please operate with caution',
   },
   display: {
     title: 'Theme',
@@ -1334,7 +1337,7 @@ const message = {
       one_click_sync: "One-click sync",
       change_notification: "Change Notification",
       recipient: "Recipient",
-      recipient_tips: "When the API changes, the associated CASE creator and automation scene creator will receive in-site messages",
+      recipient_tips: "When the API changes, the associated CASE creator and automation scene creator will receive in-site messages,can go to",
       select_comp: {
         no_data: "No Data",
         add_data: "Add Data"

framework/sdk-parent/frontend/src/i18n/lang/zh-CN.js

@@ -545,9 +545,9 @@ const message = {
       performance: '性能测试',
       scenario_case: '场景用例'
     },
-    apply_tip:'未开启工作台待更新设置',
+    apply_tip: '未开启工作台待更新设置',
     sync_case_tips: '注意: 忽略后，受影响的用例将不再有提醒，请谨慎操作',
-    batch_sync_api_tips: '注意: 批量同步，有可能部分不需要同步的用例参数也被覆盖，导致测试不通过，请谨慎操作',
+    batch_sync_api_tips: '批量同步，有可能部分不需要同步的用例参数也被覆盖，导致测试不通过，请谨慎操作',
     batch_ignore_case_tips: '注意: 批量忽略后，受影响的用例将不再有提醒，请谨慎操作',
   },
   display: {
@@ -1345,7 +1345,7 @@ const message = {
       one_click_sync: "一键同步",
       change_notification: "变更通知",
       recipient: "接收人",
-      recipient_tips: "当API发生变化时，关联的CASE创建人、自动化场景创建人会收到站内消息",
+      recipient_tips: "当API发生变化时，关联的CASE创建人、自动化场景创建人会收到站内消息,可前往",
       select_comp: {
         no_data: "无数据",
         add_data: "去添加"

framework/sdk-parent/frontend/src/i18n/lang/zh-TW.js

@@ -544,7 +544,10 @@ const message = {
       api_case: '接口用例',
       performance: '性能測試',
       scenario_case: '場景用例'
-    }
+    },
+    sync_case_tips: '注意: 忽略後，受影響的用例將不再有提醒，請謹慎操作',
+    batch_sync_api_tips: '批量同步，有可能部分不需要同步的用例參數也被覆蓋，導致測試不通過，請謹慎操作',
+    batch_ignore_case_tips: '注意: 批量忽略後，受影響的用例將不再有提醒，請謹慎操作',
   },
   display: {
     title: '顯示設置',
@@ -1341,7 +1344,7 @@ const message = {
       one_click_sync: "一鍵同步",
       change_notification: "變更通知",
       recipient: "接收人",
-      recipient_tips: "當API發生變化時，關聯的CASE創建人、自動化場景創建人會收到站內消息",
+      recipient_tips: "當API發生變化時，關聯的CASE創建人、自動化場景創建人會收到站內消息，可前往",
       select_comp: {
         no_data: "無數據",
         add_data: "去添加"