fix(测试跟踪): 功能用例UX问题修改

--bug=1022772 --user=宋昌昌 【测试跟踪】功能用例-设计验收问题汇总 https://www.tapd.cn/55049933/s/1343176

framework/sdk-parent/frontend/src/components/environment/commons/variable/FileBatchMove.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :title="this.$t('test_track.case.select_catalog')"
+  <el-dialog :title="$t('test_track.case.dump_module')"
              :visible.sync="dialogVisible"
              :before-close="close"
              :destroy-on-close="true" width="600px"
@@ -79,7 +79,7 @@ export default {
       this.dialogVisible = true;
       this.loading = true;
       this.result = getFileModules(getCurrentProjectID()).then(response => {
-        if (response.data != undefined && response.data != null) {
+        if (response.data !== undefined && response.data != null) {
           this.treeNodes = response.data;
           this.treeNodes.forEach(node => {
             node.name = node.name === 'DEF_MODULE' ? this.$t('commons.module_title') : node.name

framework/sdk-parent/frontend/src/components/new-ui/MsCaseDescTextItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="prerequisite-item-layout" v-if="data.stepModel === 'TEXT'">
     <h3>{{title}}</h3>
-    <span>{{content}}</span>
+    <span>{{filterText(content)}}</span>
   </div>
   <el-table v-else
     :data="data.steps" header-cell-class-name="case-desc-table-header-cell"
@@ -19,6 +19,15 @@ export default {
     data: Object,
     title: String,
     content: String
+  },
+  methods: {
+    filterText(val) {
+      if (val.trim() === '' || val.trim().length === 0) {
+        return this.$t('case.none');
+      } else {
+        return val;
+      }
+    }
   }
 }
 </script>

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

@@ -161,6 +161,7 @@ export default {
     upload_tip: "file size limit[0-500MB]",
     add_attachment: "Add",
     attachment: "Attachment",
+    dump_module: "Please select dump directory",
     upload_time: "Upload Time",
     total: "Total Case",
     node_id: "Node ID",

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

@@ -152,6 +152,7 @@ export default {
     upload_tip: "文件大小限制[0-500MB]",
     add_attachment: "添加",
     attachment: "附件",
+    dump_module: "请选择转存目录",
     upload_time: "上传时间",
     total: "用例总数",
     node_id: "节点ID",

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

@@ -152,6 +152,7 @@ export default {
     upload_tip: "文件大小限制[0-500MB]",
     add_attachment: "添加",
     attachment: "附件",
+    dump_module: "請選擇轉存目錄",
     upload_time: "上傳時間",
     total: "用例總數",
     node_id: "節點ID",

test-track/frontend/src/business/TestTrack.vue

@@ -59,6 +59,7 @@ input.el-input__inner {
  */
 .el-message-box__header {
   padding: 20px 24px 0 24px;
+  min-height: 24px;
 }
 
 .el-message-box__title {

test-track/frontend/src/business/case/TestCase.vue

@@ -16,7 +16,7 @@
             <span class="export-model">{{$t('test_track.case.import.import_by_excel')}}</span>
             <span class="export-tips">{{$t('test_track.case.export.export_to_excel_tips1')}}</span>
           </el-dropdown-item>
-          <el-dropdown-item style="margin-top: 10px" command="xmind">
+          <el-dropdown-item style="margin-top: 10px" command="xmind" divided>
             <span class="export-model">{{$t('test_track.case.import.import_by_xmind')}}</span>
             <span class="export-tips">{{$t('test_track.case.export.export_to_xmind_tips')}}</span>
           </el-dropdown-item>
@@ -32,7 +32,7 @@
             <span class="export-model">{{$t('test_track.case.export.export_to_excel')}}</span>
             <span class="export-tips">{{$t('test_track.case.export.export_to_excel_tips')}}</span>
           </el-dropdown-item>
-          <el-dropdown-item style="margin-top: 10px" command="xmind">
+          <el-dropdown-item style="margin-top: 10px" command="xmind" divided>
             <span class="export-model">{{$t('test_track.case.export.export_to_xmind')}}</span>
             <span class="export-tips">{{$t('test_track.case.export.export_to_xmind_tips')}}</span>
           </el-dropdown-item>

test-track/frontend/src/business/case/components/StepChangeItem.vue

@@ -4,12 +4,12 @@
                   <span class="el-dropdown-link">
                     {{ $t('test_track.case.change_type') }} <i class="el-icon-arrow-down el-icon--right"/>
                   </span>
-      <el-dropdown-menu style="margin: -10px 0">
+      <el-dropdown-menu style="margin: -5px 0">
         <el-dropdown-item :disabled="disable" command="STEP">
           <div>{{ $t('test_track.case.step_describe') }}</div>
 <!--          <div>{{ $t('test_track.case.step_describe_tip') }}</div>-->
         </el-dropdown-item>
-        <el-dropdown-item :disabled="disable" command="TEXT">
+        <el-dropdown-item :disabled="disable" command="TEXT" divided>
           <div>{{  $t('test_track.case.text_describe') }}</div>
 <!--          <div>{{ $t('test_track.case.text_describe_tip') }}</div>-->
         </el-dropdown-item>
@@ -42,7 +42,18 @@ export default {
 .el-dropdown-link {
   cursor: pointer;
   color: var(--primary_color);
+  width: 84px;
+  height: 26px;
+  padding: 5px 6px
 }
+
+.el-dropdown-link:hover {
+  cursor: pointer;
+  color: #783887;
+  background: rgba(120, 56, 135, 0.1);
+  border-radius: 4px;
+}
+
 .el-icon-arrow-down {
   font-size: 12px;
 }
@@ -50,5 +61,21 @@ export default {
 .step-change-item:hover {
   color: var(--primary_color);
   background-color: #F5F7FA;
+}
+
+.el-dropdown-menu__item:hover {
+  background-color: rgba(31, 35, 41, 0.1)!important;
+}
+
+.el-dropdown-menu__item {
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  color: #1F2329!important;
+}
+
+.el-dropdown-link {
+
 }
  </style>

test-track/frontend/src/business/case/components/TestCasePreview.vue

@@ -11,12 +11,12 @@
     </template>
     <div style="height: 100%; overflow: auto">
       <el-form :model="data" class="case-desc-form">
-        <div class="prerequisite-item-layout">
+        <div class="prerequisite-item-layout" style="margin-top: 24px; margin-bottom: 20px">
           <h3>{{$t('test_track.case.prerequisite')}}</h3>
           <span>{{data.prerequisite}}</span>
         </div>
-        <step-change-item :label-width="stepForLabelWidth" :form="data"/>
+        <step-change-item :label-width="formLabelWidth" :form="data"/>
-        <ms-case-desc-text-item v-if="data.stepModel === 'TEXT'" :title="$t('test_track.case.step_desc')" :data="data" :content="data.stepDescription"/>
+        <ms-case-desc-text-item v-if="data.stepModel === 'TEXT'" :title="$t('test_track.case.step_desc')" :data="data" :content="data.stepDescription" style="margin-bottom: 20px"/>
         <ms-case-desc-text-item v-if="data.stepModel === 'TEXT'" :title="$t('test_track.case.expected_results')" :data="data" :content="data.expectedResult"/>
         <ms-case-desc-text-item v-if="data.stepModel === 'STEP' || !data.stepModel" :data="data"/>
       </el-form>
@@ -99,7 +99,7 @@ export default {
 }
 
 .prerequisite-item-layout {
-  padding: 24px;
+  padding: 0px 24px 0 24px;
   font-family: 'PingFang SC';
   font-style: normal;
   font-weight: 400;
@@ -113,7 +113,7 @@ export default {
 
 .prerequisite-item-layout h3{
   font-weight: bold;
-  margin: 0 0 10px;
+  margin: 0 0 8px;
   font-size: 14px;
 }
 

test-track/frontend/src/business/case/components/case/CaseAttachmentComponent.vue

@@ -17,10 +17,8 @@
         "
       >
         <!-- 本地上传 -->
-        <div
+        <div class="local-row opt-row"
-          class="local-row"
           style="
-            display: flex;
             height: 32px;
             margin-top: 8px;
             line-height: 32px;
@@ -43,7 +41,7 @@
               :on-error="handleError"
               :disabled="readOnly || isCopy"
             >
-              <div class="icon" style="display: inline-flex; line-height: 34px">
+              <div class="icon" style="display: inline-flex; line-height: 34px" @click="uploadLocalFile">
                 <div style="margin-right: 10px">
                   <i class="el-icon-upload2" style="color: #646a73"></i>
                 </div>
@@ -58,11 +56,11 @@
           </div>
         </div>
         <!-- 关联文件 -->
-        <div
+        <div class="ref-row opt-row"
-          class="ref-row"
           @click="associationFile"
           style="
             display: flex;
+            justify-content: center;
             height: 32px;
             margin-bottom: 8px;
             line-height: 32px;
@@ -185,7 +183,11 @@ export default {
     this.getFileMetaData();
   },
   methods: {
+    uploadLocalFile() {
+      this.$refs['popover'].doClose();
+    },
     associationFile() {
+      this.$refs['popover'].doClose();
       if (this.readOnly || this.isCopy) {
         return;
       }
@@ -321,8 +323,8 @@ export default {
     _handleDelete(file, index) {
       // 中断所有正在上传的文件
       if (this.cancelFileToken && this.cancelFileToken.length >= 1) {
-        this.cancelFileToken.forEach((cacelToken) => {
+        this.cancelFileToken.forEach((cancelToken) => {
-          cacelToken.cancelFunc();
+          cancelToken.cancelFunc();
         });
       }
       this.fileList.splice(index, 1);
@@ -515,4 +517,12 @@ export default {
   border-color: #DCDFE6;
   background-color: whitesmoke;
 }
+
+.attachment-popover .opt-row{
+  width: 100%!important;
+}
+
+.attachment-popover .opt-row:hover {
+  background-color: rgba(31, 35, 41, 0.1);;
+}
 </style>

test-track/frontend/src/business/case/components/case/CaseIssueRelate.vue

@@ -400,11 +400,11 @@ export default {
   color: #783887;
 }
 .relate-box {
-  padding: px2rem(24) 0 0 0;
+  padding: 1.3rem 0 0 0;
   .relate-header {
     display: flex;
     justify-content: space-between;
-    margin-bottom: px2rem(16);
+    margin-bottom: 1.3rem;
     .menu-left-row {
       width: 98px;
       height: 32px;
@@ -421,4 +421,16 @@ export default {
     }
   }
 }
+
+.el-dropdown-menu__item:hover {
+  background-color: rgba(31, 35, 41, 0.1)!important;
+}
+
+.el-dropdown-menu__item {
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  color: #1F2329!important;
+}
 </style>

test-track/frontend/src/business/case/components/case/CaseStepChange.vue

@@ -8,11 +8,11 @@
       {{ $t("test_track.case.change_type") }}
       <i class="el-icon-arrow-down el-icon--right" />
     </span>
-    <el-dropdown-menu>
+    <el-dropdown-menu style="margin: 5px 0; width: 120px; padding: 5px 0;">
       <el-dropdown-item :disabled="disable" command="STEP">
         <div>{{ $t("test_track.case.step_describe") }}</div>
       </el-dropdown-item>
-      <el-dropdown-item :disabled="disable" command="TEXT">
+      <el-dropdown-item :disabled="disable" command="TEXT" divided>
         <div>{{ $t("test_track.case.text_describe") }}</div>
       </el-dropdown-item>
     </el-dropdown-menu>
@@ -45,6 +45,7 @@ export default {
   color: #646a73;
   padding: 0.2rem 0.5rem;
 }
+
 .el-dropdown-link:hover {
   cursor: pointer;
   color: #783887;
@@ -59,4 +60,22 @@ export default {
   color: #1f2329;
   background: rgba(31, 35, 41, 0.1);
 }
+
+.el-dropdown-menu__item:hover {
+  background-color: rgba(31, 35, 41, 0.1)!important;
+}
+
+.el-dropdown-menu__item {
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  color: #1F2329!important;
+}
+</style>
+
+<style>
+.el-popper .popper__arrow{
+  display: none!important;
+}
 </style>

test-track/frontend/src/business/case/components/case/CaseStepItem.vue

@@ -364,7 +364,7 @@ i.el-icon-more:hover {
 }
 .case-step-item-popover .sub-opt-row {
   display: flex;
-  width: 118px;
+  width: 100%;
   height: 32px;
   margin-top: 4px;
   margin-bottom: 4px;
@@ -392,20 +392,32 @@ i.el-icon-more:hover {
   height: 1px;
   background-color: rgba(31, 35, 41, 0.15);
 }
+
+.case-step-item-popover .copy-row:hover {
+  background-color: rgba(31, 35, 41, 0.1);;
+}
+
 .case-step-item-popover .copy-row .icon {
   color: #646a73;
 }
 .case-step-item-popover .copy-row .title {
   color: #1f2329;
 }
+
+.case-step-item-popover .delete-row:hover {
+  background-color: rgba(31, 35, 41, 0.1)!important;
+}
+
 .case-step-item-popover .delete-row .icon {
   color: #f54a45;
 }
 .case-step-item-popover .delete-row .title {
   color: #f54a45;
 }
+
 .case-step-item-popover .delete-row {
-  background-color: transparent!important;
+  background-color: transparent;
+  padding: 0;
 }
 .opt-readonly {
   pointer-events: none;

test-track/frontend/src/business/case/components/case/CaseTestRelate.vue

@@ -281,7 +281,20 @@ export default {
   .table-wrap {
   }
 }
+
 .disable-row {
   cursor: not-allowed;
 }
+
+.el-dropdown-menu__item:hover {
+  background-color: rgba(31, 35, 41, 0.1)!important;
+}
+
+.el-dropdown-menu__item {
+  font-family: 'PingFang SC';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  color: #1F2329!important;
+}
 </style>

test-track/frontend/src/business/case/components/case/diff/CaseDiffViewer.vue

@@ -881,7 +881,7 @@ export default {
 }
 
 .delete-row {
-  padding: 0px 4px;
+  padding: 0 4px;
   width: 32px;
   height: 16px;
   background: rgba(245, 74, 69, 0.2);

test-track/frontend/src/business/case/components/case/relate/CaseApiRelate.vue

@@ -3,6 +3,7 @@
     @clearSelect="clearSelect"
     @setProject="setProject"
     @save="saveCaseRelevance"
+    :dialog-title="$t('api_test.home_page.failed_case_list.table_value.case_type.api')"
     ref="baseRelevance"
   >
     <template v-slot:aside>

test-track/frontend/src/business/case/components/case/relate/CaseLoadRelate.vue

@@ -3,6 +3,7 @@
     @clearSelect="clearSelect"
     @setProject="setProject"
     @save="saveCaseRelevance"
+    :dialog-title="$t('api_test.home_page.failed_case_list.table_value.case_type.load')"
     ref="baseRelevance"
   >
     <test-case-relate-load-list

test-track/frontend/src/business/case/components/case/relate/CaseScenarioRelate.vue

@@ -3,6 +3,7 @@
     @clearSelect="clearSelect"
     @setProject="setProject"
     @save="saveCaseRelevance"
+    :dialog-title="$t('api_test.home_page.failed_case_list.table_value.case_type.scene')"
     ref="baseRelevance"
   >
     <template v-slot:aside>

test-track/frontend/src/business/case/components/case/relate/CaseUiScenarioRelate.vue

@@ -3,6 +3,7 @@
     @clearSelect="clearSelect"
     @setProject="setProject"
     @save="saveCaseRelevance"
+    :dialog-title="$t('api_test.home_page.failed_case_list.table_value.case_type.ui')"
     ref="baseRelevance"
   >
     <template v-slot:aside>

test-track/frontend/src/business/case/components/export/TestCaseExportFieldList.vue

@@ -1,15 +1,17 @@
 <template>
   <div>
     <el-row v-for="rowIndex in fieldRowCount" :key="rowIndex">
-    <span v-for="(item, index) in fields"
+      <span v-for="(item, index) in fields" :key="item.id">
-          :key="item.id">
         <el-col :span="6"
                 v-if="Math.floor(index / colCountEachRow) === rowIndex - 1">
           <el-checkbox
             v-model="item.enable"
             :disabled="item.disabled"
             @change="change">
-          {{ item.name | ellipsis}}
+            <el-tooltip v-if="item.name.length >= 5" :content="item.name">
+              <span>{{ item.name | ellipsis}}</span>
+            </el-tooltip>
+            <span v-else>{{ item.name }}</span>
           </el-checkbox>
         </el-col>
       </span>
@@ -44,7 +46,7 @@ export default {
       if (!value) {
         return '';
       }
-      if (value.length > 5) {
+      if (value.length >= 5) {
         return value.slice(0, 4) + '...';
       }
       return value;
@@ -57,4 +59,8 @@ export default {
 .el-row {
   margin-bottom: 10px;
 }
+
+.el-col-6 {
+  min-width: 90px;
+}
 </style>

test-track/frontend/src/business/case/components/export/TestCaseExportFieldSelectTable.vue

@@ -4,7 +4,7 @@
     <ms-table :data="tableData" ref="table" :enable-selection="false" style="margin-top: 8px">
       <el-table-column
         prop="fieldType"
-        width="150"
+        width="120"
         :label="$t('custom_field.field_type')">
         <template v-slot:default="scope">
           <el-checkbox v-model="scope.row.isSelectAll" :indeterminate="scope.row.isIndeterminate" @change="fieldRowChange(scope.row)">{{scope.row.fieldType}}</el-checkbox>

test-track/frontend/src/business/case/components/export/TestCaseExportToExcel.vue

@@ -4,6 +4,7 @@
              :title="$t('test_track.case.export.export_to_excel')"
              :visible.sync="dialogVisible"
              width="40%"
+             custom-class="export-dialog"
              @close="close">
     <span class="select-row">{{!exportAll ? $t('test_track.batch_operate_select_row_count', [size]) : $t('test_track.select_all_row')}}</span>
     <test-case-export-field-select-table
@@ -123,3 +124,9 @@ export default {
   font-size: 20px;
 }
 </style>
+
+<style>
+.export-dialog {
+  min-width: 420px!important;
+}
+</style>

test-track/frontend/src/business/review/view/components/commnet/CommentHistoryItem.vue

@@ -144,7 +144,7 @@ export default {
 .main {
   overflow-y: scroll;
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   margin-top: 10px;
 }