fix(测试用例&测试计划): 执行评论展示步骤详情

--bug=1044985 --user=吕梦园
https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001044985

frontend/src/components/business/ms-minders/featureCaseMinder/commentList.vue

@@ -21,6 +21,7 @@
         :review-comment-list="reviewCommentList"
         :active-comment="activeComment"
         :permissions="['FUNCTIONAL_CASE:READ+COMMENT']"
+        show-step-detail-trigger
       />
       <template v-else>
         <MsComment
@@ -256,4 +257,7 @@
     overflow-y: auto;
     height: calc(100% - 130px);
   }
+  :deep(.comment-list-item-name) {
+    max-width: 130px;
+  }
 </style>

frontend/src/components/business/ms-minders/testPlanFeatureCaseMinder/index.vue

@@ -112,6 +112,7 @@
           :review-comment-list="executeHistoryList"
           active-comment="executiveComment"
           not-show-review-name
+          show-step-detail-trigger
         />
       </template>
     </MsMinderEditor>
@@ -483,11 +484,12 @@
   const executeHistoryList = ref<ExecuteHistoryItem[]>([]);
   async function initExecuteHistory(data: MinderJsonNodeData) {
     try {
-      executeHistoryList.value = await executeHistory({
+      const res = await executeHistory({
         caseId: data?.caseId,
         id: data.id,
         testPlanId: props.planId,
       });
+      executeHistoryList.value = res.map((item) => ({ ...item, stepsText: item.stepsExecResult }));
     } catch (error) {
       // eslint-disable-next-line no-console
       console.log(error);
@@ -825,7 +827,7 @@
 
 <style lang="less" scoped>
   :deep(.comment-list-item-name) {
-    max-width: 200px;
+    max-width: 130px;
   }
   :deep(.ms-list) {
     margin: 0;

frontend/src/models/testPlan/testPlan.ts

@@ -269,6 +269,7 @@ export interface ExecuteHistoryItem {
   createTime: string;
   deleted: boolean;
   caseEditType: string; // 类型是：步骤描述
+  showResult: boolean;
 }
 
 export interface moduleForm {

frontend/src/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue

@@ -0,0 +1,50 @@
+<template>
+  <a-trigger trigger="click" position="bottom" :popup-translate="[0, 4]">
+    <MsButton type="text" class="!mr-0">
+      {{ t('system.orgTemplate.stepDetail') }}
+    </MsButton>
+    <template #content>
+      <div class="step-detail-trigger-content">
+        <StepDetail :step-list="getStepData()" is-disabled is-preview is-test-plan :is-disabled-test-plan="false" />
+      </div>
+    </template>
+  </a-trigger>
+</template>
+
+<script setup lang="ts">
+  import MsButton from '@/components/pure/ms-button/index.vue';
+  import StepDetail from '@/views/case-management/caseManagementFeature/components/addStep.vue';
+
+  import { useI18n } from '@/hooks/useI18n';
+
+  const props = defineProps<{
+    stepsText: string;
+  }>();
+
+  const { t } = useI18n();
+
+  function getStepData() {
+    if (props.stepsText) {
+      return JSON.parse(props.stepsText).map((item: any) => {
+        return {
+          id: item.id,
+          step: item.desc,
+          expected: item.result,
+          actualResult: item.actualResult,
+          executeResult: item.executeResult,
+        };
+      });
+    }
+    return [];
+  }
+</script>
+
+<style scoped lang="less">
+  .step-detail-trigger-content {
+    padding: 16px;
+    width: 700px;
+    border-radius: var(--border-radius-medium);
+    box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
+    @apply bg-white;
+  }
+</style>

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/reviewCommentList.vue

@@ -4,12 +4,22 @@
       <div v-for="item of props.reviewCommentList" :key="item.id" class="ms-comment-list-item">
         <MSAvatar :avatar="item.userLogo" />
         <div class="flex-1">
-          <div class="flex items-center gap-[8px]">
+          <div class="flex items-center">
             <a-tooltip :content="item.userName" :mouse-enter-delay="300">
               <div class="comment-list-item-name one-line-text max-w-[300px] font-medium text-[var(--color-text-1)]">
                 {{ item.userName }}
               </div>
             </a-tooltip>
+            <a-divider
+              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP' && item.showResult"
+              direction="vertical"
+              margin="8px"
+            ></a-divider>
+            <StepDetailTrigger
+              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP' && item.showResult"
+              :steps-text="item.stepsText"
+            />
+            <a-divider direction="vertical" margin="8px"></a-divider>
             <div v-if="item.status === 'PASS'" class="flex items-center">
               <MsIcon type="icon-icon_succeed_filled" class="mr-[4px] text-[rgb(var(--success-6))]" />
               {{ t('caseManagement.caseReview.pass') }}
@@ -87,6 +97,7 @@
   import MSAvatar from '@/components/pure/ms-avatar/index.vue';
   import MsEmpty from '@/components/pure/ms-empty/index.vue';
   import { CommentItem } from '@/components/business/ms-comment/types';
+  import StepDetailTrigger from '@/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue';
 
   import { useI18n } from '@/hooks/useI18n';
   import { characterLimit } from '@/utils';
@@ -97,6 +108,7 @@
     reviewCommentList: any[];
     activeComment: string;
     notShowReviewName?: boolean;
+    showStepDetailTrigger?: boolean;
   }>();
 
   const router = useRouter();

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabComment/tabCommentIndex.vue

@@ -26,6 +26,7 @@
       v-show="activeComment === 'reviewComment' || activeComment === 'executiveComment'"
       :review-comment-list="reviewCommentList"
       :active-comment="activeComment"
+      show-step-detail-trigger
     />
   </div>
 </template>

frontend/src/views/test-plan/testPlan/detail/featureCase/detail/executionHistory/index.vue

@@ -9,31 +9,14 @@
               <div class="one-line-text max-w-[300px] font-medium text-[var(--color-text-1)]">{{ item.userName }}</div>
             </a-tooltip>
             <a-divider
-              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP'"
+              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP' && item.showResult"
               direction="vertical"
               margin="8px"
             ></a-divider>
-            <a-trigger
+            <StepDetailTrigger
-              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP'"
+              v-if="props.showStepDetailTrigger && item.caseEditType == 'STEP' && item.showResult"
-              trigger="click"
+              :steps-text="item.stepsExecResult"
-              position="bottom"
+            />
-              :popup-translate="[0, 4]"
-            >
-              <MsButton type="text" class="!mr-0">
-                {{ t('system.orgTemplate.stepDetail') }}
-              </MsButton>
-              <template #content>
-                <div class="step-detail-trigger-content">
-                  <StepDetail
-                    :step-list="getStepData(item.stepsExecResult)"
-                    is-disabled
-                    is-preview
-                    is-test-plan
-                    :is-disabled-test-plan="false"
-                  />
-                </div>
-              </template>
-            </a-trigger>
             <a-divider direction="vertical" margin="8px"></a-divider>
             <div v-if="item.status === 'SUCCESS'" class="flex items-center">
               <MsIcon type="icon-icon_succeed_filled" class="mr-[4px] text-[rgb(var(--success-6))]" />
@@ -76,13 +59,12 @@
 </template>
 
 <script setup lang="ts">
-  import { ref } from 'vue';
   import dayjs from 'dayjs';
 
   import MsAvatar from '@/components/pure/ms-avatar/index.vue';
-  import MsButton from '@/components/pure/ms-button/index.vue';
   import MsEmpty from '@/components/pure/ms-empty/index.vue';
   import StepDetail from '@/views/case-management/caseManagementFeature/components/addStep.vue';
+  import StepDetailTrigger from '@/views/case-management/caseManagementFeature/components/stepDetailTrigger.vue';
 
   import { useI18n } from '@/hooks/useI18n';
   import { characterLimit } from '@/utils';
@@ -125,11 +107,4 @@
       }
     }
   }
-  .step-detail-trigger-content {
-    padding: 16px;
-    width: 700px;
-    border-radius: var(--border-radius-medium);
-    box-shadow: 0 4px 10px -1px rgb(100 100 102 / 15%);
-    @apply bg-white;
-  }
 </style>