From e217d1e9e5a6b176d0e8415074e1875f74d254b0 Mon Sep 17 00:00:00 2001
From: song-cc-rock <changchang.song@fit2cloud.com>
Date: Tue, 28 Mar 2023 14:16:32 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E6=B5=8B=E8=AF=95=E8=B7=9F=E8=B8=AA):=20?=
 =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=AF=B9=E6=AF=94=E9=97=AE=E9=A2=98=E6=B1=87?=
 =?UTF-8?q?=E6=80=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--bug=1023474 --user=宋昌昌 【测试跟踪】功能用例-编辑-版本对比-问题汇总 https://www.tapd.cn/55049933/s/1356366
---
 .../src/business/app-layout/index.vue         |   3 +-
 .../business/case/components/TestCaseEdit.vue |  18 +-
 .../case/diff/CaseDiffSideViewer.vue          |   4 +-
 .../components/case/diff/CaseDiffViewer.vue   | 356 +++++++++---------
 .../case/components/case/diff/version_diff.js |  12 +-
 .../components/head/TestCaseEditNameView.vue  |   2 +-
 6 files changed, 204 insertions(+), 191 deletions(-)

diff --git a/framework/sdk-parent/frontend/src/business/app-layout/index.vue b/framework/sdk-parent/frontend/src/business/app-layout/index.vue
index dd56f2a398..7f9944ea48 100644
--- a/framework/sdk-parent/frontend/src/business/app-layout/index.vue
+++ b/framework/sdk-parent/frontend/src/business/app-layout/index.vue
@@ -277,8 +277,9 @@ export default {
 }
 
 .container {
-  padding: 0px !important;
+  padding: 0!important;
   height: calc(100vh);
+  background-color: #F5F6F7;
 }
 
 .ms-aside-left {
diff --git a/test-track/frontend/src/business/case/components/TestCaseEdit.vue b/test-track/frontend/src/business/case/components/TestCaseEdit.vue
index 00ccac0313..c3b280b96a 100644
--- a/test-track/frontend/src/business/case/components/TestCaseEdit.vue
+++ b/test-track/frontend/src/business/case/components/TestCaseEdit.vue
@@ -1802,7 +1802,7 @@ export default {
             color: #646a73;
             align-items: center;
             margin-left: px2rem(8);
-            padding: -1px 0.2rem;
+            padding: 0.1rem 0.4rem;
 
             .version-icon {
               width: 20.17px;
@@ -1897,7 +1897,7 @@ export default {
           .label-row {
           }
           margin-right: px2rem(20.67);
-          padding: 0.2rem 0.5rem 0.2rem 0;
+          padding: 0.1rem 0.4rem 0.1rem 0;
         }
 
         .next-public-row.head-opt {
@@ -1909,7 +1909,7 @@ export default {
           .label-row {
           }
           margin-right: px2rem(20.67);
-          padding: 0.2rem 0 0.2rem 0.5rem;
+          padding: 0.1rem 0 0.1rem 0.4rem;
         }
 
         .follow-row.head-opt {
@@ -1921,7 +1921,7 @@ export default {
           .label-row {
           }
           margin-right: px2rem(10);
-          padding: 0.2rem 0.5rem;
+          padding: 0.1rem 0.4rem;
         }
 
         .edit-public-row.head-opt {
@@ -1933,7 +1933,7 @@ export default {
           .label-row {
           }
           margin-right: px2rem(20.67);
-          padding: 0.2rem 0.5rem;
+          padding: 0.1rem 0.4rem;
         }
 
         .copy-public-row.head-opt {
@@ -1945,10 +1945,10 @@ export default {
           .label-row {
           }
           margin-right: px2rem(20.67);
-          padding: 0.2rem 0.5rem;
+          padding: 0.1rem 0.4rem;
         }
         .close-row.head-opt {
-          padding: 0.2rem;
+          padding: 0.15rem;
         }
         .add-public-row.head-opt {
           .icon-row {
@@ -1971,7 +1971,7 @@ export default {
           .label-row {
           }
           margin-right: px2rem(24);
-          padding: 0.2rem 0.5rem;
+          padding: 0.1rem 0.4rem;
         }
       }
     }
@@ -2012,6 +2012,7 @@ export default {
           font-size: 14px;
           color: #783887;
           cursor: pointer;
+          padding: 0.3rem;
         }
         .diff-latest:hover{
           background: rgba(120, 56, 135, 0.1);
@@ -2027,6 +2028,7 @@ export default {
           font-size: 14px;
           color: #783887;
           cursor: pointer;
+          padding: 0.3rem;
         }
       }
     }
diff --git a/test-track/frontend/src/business/case/components/case/diff/CaseDiffSideViewer.vue b/test-track/frontend/src/business/case/components/case/diff/CaseDiffSideViewer.vue
index 1c1437c138..5b196359ac 100644
--- a/test-track/frontend/src/business/case/components/case/diff/CaseDiffSideViewer.vue
+++ b/test-track/frontend/src/business/case/components/case/diff/CaseDiffSideViewer.vue
@@ -42,7 +42,7 @@ export default {
   props: {
     width: {
       type: Number,
-      default: 1200,
+      default: 1152,
     },
     dialogTitle: {
       type: String,
@@ -56,7 +56,7 @@ export default {
       if (!isNaN(this.width)) {
         //计算rem
         let remW = (this.width / 1440) * 100;
-        let standW = (1200 / 1440) * 100;
+        let standW = (1152 / 1440) * 100;
         return remW > standW ? remW : standW + "%";
       }
       return this.width;
diff --git a/test-track/frontend/src/business/case/components/case/diff/CaseDiffViewer.vue b/test-track/frontend/src/business/case/components/case/diff/CaseDiffViewer.vue
index 3528e75516..c0b9806ed9 100644
--- a/test-track/frontend/src/business/case/components/case/diff/CaseDiffViewer.vue
+++ b/test-track/frontend/src/business/case/components/case/diff/CaseDiffViewer.vue
@@ -38,218 +38,232 @@
       <div class="tab-pane-wrap">
         <el-tabs v-model="caseActiveName" @tab-click="tabClick">
           <el-tab-pane :label="$t('case.use_case_detail')" name="detail">
-            <div class="content-conatiner">
-              <div class="case-name-row">
-                <div class="case-name case-title-wrap case-content-wrap">
-                  <div class="name title-wrap">{{ $t("case.case_name") }}</div>
-                  <div class="required required-item"></div>
-                </div>
-                <div class="content-wrap">
-                  <div class="opt-row">
-                    <case-diff-text
-                      :diffInfo="contentDiffData.caseName"
-                    ></case-diff-text>
+            <el-scrollbar>
+              <div class="content-container">
+                <div class="case-name-row">
+                  <div class="case-name case-title-wrap case-content-wrap">
+                    <div class="name title-wrap">{{ $t("case.case_name") }}</div>
+                    <div class="required required-item"></div>
+                  </div>
+                  <div class="content-wrap">
+                    <div class="opt-row">
+                      <case-diff-text
+                        :diffInfo="contentDiffData.caseName"
+                      ></case-diff-text>
+                    </div>
                   </div>
                 </div>
-              </div>
-              <!-- pre condition -->
-              <div class="pre-condition-row">
-                <div class="condition-name case-title-wrap case-content-wrap">
-                  <div class="name title-wrap">
-                    {{ $t("case.preconditions") }}
+                <!-- pre condition -->
+                <div class="pre-condition-row">
+                  <div class="condition-name case-title-wrap case-content-wrap">
+                    <div class="name title-wrap">
+                      {{ $t("case.preconditions") }}
+                    </div>
+                  </div>
+                  <div class="content-wrap">
+                    <div class="opt-row">
+                      <case-diff-text
+                        :diffInfo="contentDiffData.prerequisite"
+                      ></case-diff-text>
+                    </div>
                   </div>
                 </div>
-                <div class="content-wrap">
-                  <div class="opt-row">
-                    <case-diff-text
-                      :diffInfo="contentDiffData.prerequisite"
-                    ></case-diff-text>
-                  </div>
-                </div>
-              </div>
 
-              <!-- step description -->
-              <div class="step-desc-row">
-                <!-- 类型切换 -->
-                <div class="step-desc-name case-title-wrap case-content-wrap">
-                  <div class="name title-wrap">
-                    {{
-                      contentDiffData.stepModel === "TEXT"
-                        ? $t("test_track.case.text_describe")
-                        : $t("test_track.case.step_describe")
-                    }}
+                <!-- step description -->
+                <div class="step-desc-row">
+                  <!-- 类型切换 -->
+                  <div class="step-desc-name case-title-wrap case-content-wrap">
+                    <div class="name title-wrap">
+                      {{
+                        contentDiffData.stepModel === "TEXT"
+                          ? $t("test_track.case.text_describe")
+                          : $t("test_track.case.step_describe")
+                      }}
+                    </div>
+                    <div class="update-type-row title-wrap"></div>
                   </div>
-                  <div class="update-type-row title-wrap"></div>
-                </div>
-                <!-- 文本描述 -->
-                <div class="content-wrap">
-                  <div class="opt-row">
-                    <case-diff-text
-                      :diffInfo="contentDiffData.stepDescription"
-                    ></case-diff-text>
+                  <!-- 文本描述 -->
+                  <div class="content-wrap">
+                    <div class="opt-row">
+                      <case-diff-text
+                        :diffInfo="contentDiffData.stepDescription"
+                      ></case-diff-text>
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <!-- expect -->
-              <div
-                class="expect-row"
-                v-if="contentDiffData.stepModel === 'TEXT'"
-              >
-                <div class="expect-name case-title-wrap case-content-wrap">
-                  <div class="name title-wrap">
-                    {{ $t("test_track.case.expected_results") }}
+                <!-- expect -->
+                <div
+                  class="expect-row"
+                  v-if="contentDiffData.stepModel === 'TEXT'"
+                >
+                  <div class="expect-name case-title-wrap case-content-wrap">
+                    <div class="name title-wrap">
+                      {{ $t("test_track.case.expected_results") }}
+                    </div>
+                  </div>
+                  <div class="content-wrap">
+                    <div class="opt-row">
+                      <case-diff-text
+                        :diffInfo="contentDiffData.expectedResult"
+                      ></case-diff-text>
+                    </div>
                   </div>
                 </div>
-                <div class="content-wrap">
-                  <div class="opt-row">
-                    <case-diff-text
-                      :diffInfo="contentDiffData.expectedResult"
-                    ></case-diff-text>
-                  </div>
-                </div>
-              </div>
 
-              <!-- remark -->
-              <div class="remark-row">
-                <div class="remark-name case-title-wrap case-content-wrap">
-                  <div class="name title-wrap">{{ $t("commons.remark") }}</div>
-                </div>
-                <div class="content-wrap">
-                  <div class="opt-row">
-                    <case-diff-text
-                      :diffInfo="contentDiffData.remark"
-                    ></case-diff-text>
+                <!-- remark -->
+                <div class="remark-row">
+                  <div class="remark-name case-title-wrap case-content-wrap">
+                    <div class="name title-wrap">{{ $t("commons.remark") }}</div>
+                  </div>
+                  <div class="content-wrap">
+                    <div class="opt-row">
+                      <case-diff-text
+                        :diffInfo="contentDiffData.remark"
+                      ></case-diff-text>
+                    </div>
                   </div>
                 </div>
-              </div>
 
-              <!-- 附件 -->
-              <div class="attachment-row">
-                <div class="attachment-name case-title-wrap case-content-wrap">
-                  <div class="name title-wrap">{{ $t("case.attachment") }}</div>
-                </div>
-                <div class="content-wrap">
-                  <!-- 添加附件 -->
-                  <!-- tip -->
-                  <div class="opt-btn">
-                    <div class="attachment-preview" v-if="showAttachment">
-                      <case-attachment-viewer
-                        :tableData="attachmentDiffData"
-                        :isCopy="false"
-                        :readOnly="true"
-                        :is-delete="false"
-                      ></case-attachment-viewer>
-                      <div v-if="!showAttachment">{{ $t("case.none") }}</div>
+                <!-- 附件 -->
+                <div class="attachment-row">
+                  <div class="attachment-name case-title-wrap case-content-wrap">
+                    <div class="name title-wrap">{{ $t("case.attachment") }}</div>
+                  </div>
+                  <div class="content-wrap">
+                    <!-- 添加附件 -->
+                    <!-- tip -->
+                    <div class="opt-btn">
+                      <div class="attachment-preview" v-if="showAttachment">
+                        <case-attachment-viewer
+                          :tableData="attachmentDiffData"
+                          :isCopy="false"
+                          :readOnly="true"
+                          :is-delete="false"
+                        ></case-attachment-viewer>
+                        <div v-if="!showAttachment">{{ $t("case.none") }}</div>
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
+            </el-scrollbar>
           </el-tab-pane>
           <!-- 关联测试用例 -->
           <el-tab-pane
             :label="$t('case.associate_test_cases')"
             name="associateTestCases"
           >
-            <div class="content-conatiner">
-              <case-diff-test-relate
-                :tableData="testCaseRelateData"
-              ></case-diff-test-relate>
-            </div>
+            <el-scrollbar>
+              <div class="content-container">
+                <case-diff-test-relate
+                  :tableData="testCaseRelateData"
+                ></case-diff-test-relate>
+              </div>
+            </el-scrollbar>
           </el-tab-pane>
           <!-- 关联缺陷 -->
           <el-tab-pane
             :label="$t('test_track.case.relate_issue')"
             name="associatedDefects"
           >
-            <div class="content-conatiner">
-              <case-diff-issue-relate
-                :tableData="issuesData"
-              ></case-diff-issue-relate>
-            </div>
+            <el-scrollbar>
+              <div class="content-container">
+                <case-diff-issue-relate
+                  :tableData="issuesData"
+                ></case-diff-issue-relate>
+              </div>
+            </el-scrollbar>
           </el-tab-pane>
           <!-- 依赖关系 -->
           <el-tab-pane :label="$t('case.dependencies')" name="dependencies">
-            <div class="content-conatiner">
-              <case-diff-relationship
-                :resourceId="caseId"
-                :preTableData="preTableData"
-                :postTableData="postTableData"
-              ></case-diff-relationship>
-            </div>
+            <el-scrollbar>
+              <div class="content-container">
+                <case-diff-relationship
+                  :resourceId="caseId"
+                  :preTableData="preTableData"
+                  :postTableData="postTableData"
+                ></case-diff-relationship>
+              </div>
+            </el-scrollbar>
           </el-tab-pane>
           <!-- 评论 -->
           <el-tab-pane :label="$t('case.comment')" name="comment">
-            <div class="content-conatiner">
-              <case-comment-viewer
-                :readOnly="true"
-                :comments="diffCommentsData"
-              ></case-comment-viewer>
-            </div>
+            <el-scrollbar>
+              <div class="content-container">
+                <case-comment-viewer
+                  :readOnly="true"
+                  :comments="diffCommentsData"
+                ></case-comment-viewer>
+              </div>
+            </el-scrollbar>
           </el-tab-pane>
           <!-- 变更记录 -->
           <!-- <el-tab-pane :label="$t('case.change_record')" name="changeRecord">
-            <div class="content-conatiner"></div>
+            <div class="content-container"></div>
           </el-tab-pane> -->
         </el-tabs>
       </div>
-      <div class="base-info-wrap">
-        <!-- 所属模块 -->
-        <div class="module-row">
-          <div class="case-title-wrap">
-            <div class="name title-wrap">
-              {{ $t("test_track.case.module") }}
+      <div class="content-base-info-wrap">
+        <el-scrollbar>
+          <div class="base-info-wrap">
+            <!-- 所属模块 -->
+            <div class="module-row">
+              <div class="case-title-wrap">
+                <div class="name title-wrap">
+                  {{ $t("test_track.case.module") }}
+                </div>
+                <div class="required required-item"></div>
+              </div>
+              <case-diff-text :diffInfo="baseInfoDiffData.modules"></case-diff-text>
             </div>
-            <div class="required required-item"></div>
-          </div>
-          <case-diff-text :diffInfo="baseInfoDiffData.modules"></case-diff-text>
-        </div>
-        <!-- 自定义字段 -->
-        <div
-          class="module-row item-row"
-          v-for="(item, index) in customDiffData"
-          :key="index"
-        >
-          <div class="case-title-wrap">
-            <div class="name title-wrap">
-              {{ item.key }}
+            <!-- 自定义字段 -->
+            <div
+              class="module-row item-row"
+              v-for="(item, index) in customDiffData"
+              :key="index"
+            >
+              <div class="case-title-wrap">
+                <div class="name title-wrap">
+                  {{ item.key }}
+                </div>
+                <div class="required required-item" v-if="item.required"></div>
+              </div>
+              <case-diff-text
+                :diffInfo="[{ diffArr: item.value }]"
+              ></case-diff-text>
             </div>
-            <div class="required required-item" v-if="item.required"></div>
-          </div>
-          <case-diff-text
-            :diffInfo="[{ diffArr: item.value }]"
-          ></case-diff-text>
-        </div>
-        <!-- 关联需求 -->
-        <div class="module-row item-row">
-          <div class="case-title-wrap">
-            <div class="name title-wrap">
-              {{ $t("test_track.related_requirements") }}
+            <!-- 关联需求 -->
+            <div class="module-row item-row">
+              <div class="case-title-wrap">
+                <div class="name title-wrap">
+                  {{ $t("test_track.related_requirements") }}
+                </div>
+                <div class="required required-item"></div>
+              </div>
+              <case-diff-text :diffInfo="baseInfoDiffData.story"></case-diff-text>
             </div>
-            <div class="required required-item"></div>
-          </div>
-          <case-diff-text :diffInfo="baseInfoDiffData.story"></case-diff-text>
-        </div>
-        <!-- 需求ID/名称 -->
-        <div class="module-row item-row">
-          <div class="case-title-wrap">
-            <div class="name title-wrap">
-              {{ $t("test_track.case.demand_name_id") }}
+            <!-- 需求ID/名称 -->
+            <div class="module-row item-row">
+              <div class="case-title-wrap">
+                <div class="name title-wrap">
+                  {{ $t("test_track.case.demand_name_id") }}
+                </div>
+                <div class="required required-item"></div>
+              </div>
+              <case-diff-text :diffInfo="baseInfoDiffData.storyId"></case-diff-text>
             </div>
-            <div class="required required-item"></div>
-          </div>
-          <case-diff-text :diffInfo="baseInfoDiffData.storyId"></case-diff-text>
-        </div>
-        <!-- 标签 -->
-        <div class="module-row item-row">
-          <div class="case-title-wrap">
-            <div class="name title-wrap">
-              {{ $t("commons.tag") }}
+            <!-- 标签 -->
+            <div class="module-row item-row">
+              <div class="case-title-wrap">
+                <div class="name title-wrap">
+                  {{ $t("commons.tag") }}
+                </div>
+              </div>
+              <case-diff-text :diffInfo="tagDiffData.tags"></case-diff-text>
             </div>
           </div>
-          <case-diff-text :diffInfo="tagDiffData.tags"></case-diff-text>
-        </div>
+        </el-scrollbar>
       </div>
     </div>
   </div>
@@ -914,6 +928,10 @@ export default {
   text-align: center;
   line-height: 16px;
 }
+
+.content-base-info-wrap {
+  height: calc(100vh - 110px);
+}
 </style>
 <style lang="scss" scoped>
 // 正文部分
@@ -934,22 +952,21 @@ export default {
     }
 
     :deep(.el-tabs__content) {
-      overflow: auto;
+      overflow: hidden;
     }
   }
   .base-info-wrap {
     width: px2rem(304);
-    height: calc(100vh - 130px);
-    overflow-y: scroll;
+    max-height: calc(70vh);
     padding: 24px;
     .item-row {
       margin-top: 21px;
     }
   }
-  .content-conatiner {
+  .content-container {
     padding-left: px2rem(24);
     padding-right: px2rem(24);
-    height: calc(100vh - 130px);
+    max-height: calc(70vh);
   }
 }
 .case-content-wrap {
@@ -978,9 +995,6 @@ export default {
 .attachment-preview :deep(.atta-box) {
   width: 25rem !important;
 }
-:deep(.atta-box .atta-container) {
-  width: 100% !important;
-}
 :deep(.atta-box .atta-container .icon) {
   // width: 100% !important;
 }
diff --git a/test-track/frontend/src/business/case/components/case/diff/version_diff.js b/test-track/frontend/src/business/case/components/case/diff/version_diff.js
index 42c2dc55d8..1f6d2a888f 100644
--- a/test-track/frontend/src/business/case/components/case/diff/version_diff.js
+++ b/test-track/frontend/src/business/case/components/case/diff/version_diff.js
@@ -152,8 +152,7 @@ export default class DefaultDiffExecutor extends AbstractVersionDiffExecutor {
       {
         diffArr: DiffUtil.diffText(
           this.origin.prerequisite,
-          this.target.prerequisite,
-          true
+          this.target.prerequisite
         ),
       },
     ];
@@ -162,8 +161,7 @@ export default class DefaultDiffExecutor extends AbstractVersionDiffExecutor {
       {
         diffArr: DiffUtil.diffText(
           this.origin.stepDescription,
-          this.target.stepDescription,
-          true
+          this.target.stepDescription
         ),
       },
     ];
@@ -172,8 +170,7 @@ export default class DefaultDiffExecutor extends AbstractVersionDiffExecutor {
       {
         diffArr: DiffUtil.diffText(
           this.origin.expectedResult,
-          this.target.expectedResult,
-          true
+          this.target.expectedResult
         ),
       },
     ];
@@ -182,8 +179,7 @@ export default class DefaultDiffExecutor extends AbstractVersionDiffExecutor {
       {
         diffArr: DiffUtil.diffText(
           this.origin.remark,
-          this.target.remark,
-          true
+          this.target.remark
         ),
       },
     ];
diff --git a/test-track/frontend/src/business/case/components/head/TestCaseEditNameView.vue b/test-track/frontend/src/business/case/components/head/TestCaseEditNameView.vue
index 6df933a3d9..f6c1e2e694 100644
--- a/test-track/frontend/src/business/case/components/head/TestCaseEditNameView.vue
+++ b/test-track/frontend/src/business/case/components/head/TestCaseEditNameView.vue
@@ -94,7 +94,7 @@ export default {
 
 .name-text {
   width: auto;
-  padding: 0.2rem;
+  padding: 0.1rem 0.4rem;
 }
 
 .input-error :deep(.el-input__inner) {