fix(缺陷管理): 缺陷管理详情页增加关联用例的角标

--bug=1036510 --user=宋天阳 【缺陷管理】缺陷详情-用例tab页签未展示数量统计 https://www.tapd.cn/55049933/s/1471524

backend/services/bug-management/src/main/java/io/metersphere/bug/dto/response/BugDetailDTO.java

@@ -58,4 +58,7 @@ public class BugDetailDTO {
     @Schema(description = "缺陷状态")
     private String status;
 
+    @Schema(description = "缺陷关联的用例数")
+    private long linkCaseCount;
+
 }

backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.java

@@ -65,4 +65,6 @@ public interface ExtBugRelateCaseMapper {
      * @return 缺陷集合
      */
     List<BugProviderDTO> getAssociateBugs(@Param("request") AssociateBugPageRequest request, @Param("sort") String sort);
+
+    long countByCaseId(String caseId);
 }

backend/services/bug-management/src/main/java/io/metersphere/bug/mapper/ExtBugRelateCaseMapper.xml

@@ -88,6 +88,11 @@
             brc.create_time desc
         </if>
     </select>
+    <select id="countByCaseId" resultType="java.lang.Long">
+        SELECT count(id)
+        FROM bug_relation_case brc
+        where brc.bug_id = #{caseId}
+    </select>
 
     <sql id="queryWhereConditionByProvider">
         <if test="request.caseId != null and request.caseId != ''">

backend/services/bug-management/src/main/java/io/metersphere/bug/service/BugService.java

@@ -300,6 +300,7 @@ public class BugService {
         BugFollowerExample example = new BugFollowerExample();
         example.createCriteria().andBugIdEqualTo(id).andUserIdEqualTo(currentUser);
         detail.setFollowFlag(bugFollowerMapper.countByExample(example) > 0);
+        detail.setLinkCaseCount(extBugRelateCaseMapper.countByCaseId(id));
         return detail;
     }
 

frontend/src/views/bug-management/components/bug-detail-drawer.vue

@@ -86,38 +86,32 @@
           <template #first>
             <div class="leftWrapper h-full">
               <div class="header h-[50px]">
-                <a-tabs v-model:active-key="activeTab" lazy-load>
-                  <a-tab-pane key="detail">
-                    <template #title>
-                      {{ t('bugManagement.detail.detail') }}
-                    </template>
+                <MsTab
+                  v-model:active-key="activeTab"
+                  :content-tab-list="contentTabList"
+                  :get-text-func="getTabBadge"
+                  class="no-content relative mb-[8px] border-b border-[var(--color-text-n8)]"
+                />
+                <div class="tab-pane-container">
                   <BugDetailTab
+                    v-if="activeTab === 'detail'"
                     ref="bugDetailTabRef"
                     :form-item="formItem"
                     :allow-edit="true"
                     :detail-info="detailInfo"
                     @update-success="updateSuccess"
                   />
-                  </a-tab-pane>
-                  <a-tab-pane key="case">
-                    <template #title>
-                      {{ t('bugManagement.detail.case') }}
-                    </template>
-                    <BugCaseTab :bug-id="detailInfo.id" />
-                  </a-tab-pane>
-                  <a-tab-pane key="comment">
-                    <template #title>
-                      {{ t('bugManagement.detail.comment') }}
-                    </template>
-                    <CommentTab ref="commentRef" :bug-id="detailInfo.id" />
-                  </a-tab-pane>
-                  <a-tab-pane key="history">
-                    <template #title>
-                      {{ t('bugManagement.detail.changeHistory') }}
-                    </template>
-                    <BugHistoryTab :bug-id="detailInfo.id" />
-                  </a-tab-pane>
-                </a-tabs>
+
+                  <BugCaseTab
+                    v-else-if="activeTab === 'case'"
+                    :bug-id="detailInfo.id"
+                    @updateCaseSuccess="updateSuccess"
+                  />
+
+                  <CommentTab v-else-if="activeTab === 'comment'" ref="commentRef" :bug-id="detailInfo.id" />
+
+                  <BugHistoryTab v-else-if="activeTab === 'history'" :bug-id="detailInfo.id" />
+                </div>
               </div>
             </div>
           </template>
@@ -142,15 +136,6 @@
                   <MsTag v-for="item of tags" :key="item"> {{ item }} </MsTag>
                 </span>
               </div>
-              <!-- 创建人 创建时间需求说先去掉 -->
-              <!-- <div class="baseItem">
-                <span class="label"> {{ t('bugManagement.detail.creator') }}</span>
-                <span>{{ detailInfo?.createUserName }}</span>
-              </div>
-              <div class="baseItem">
-                <span class="label"> {{ t('bugManagement.detail.createTime') }}</span>
-                <span>{{ dayjs(detailInfo?.createTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
-              </div> -->
             </div>
           </template>
         </MsSplitBox>
@@ -178,6 +163,7 @@
   import type { FormItem, FormRuleItem } from '@/components/pure/ms-form-create/types';
   import MsIcon from '@/components/pure/ms-icon-font/index.vue';
   import MsSplitBox from '@/components/pure/ms-split-box/index.vue';
+  import MsTab from '@/components/pure/ms-tab/index.vue';
   import type { MsPaginationI } from '@/components/pure/ms-table/type';
   import MsTag from '@/components/pure/ms-tag/ms-tag.vue';
   import { CommentInput } from '@/components/business/ms-comment';
@@ -221,6 +207,7 @@
     pageChange: (page: number) => Promise<void>; // 分页变更函数
   }>();
 
+  const caseCount = ref(0);
   const appStore = useAppStore();
   const commentContent = ref('');
   const commentRef = ref();
@@ -232,7 +219,7 @@
   const showDrawerVisible = defineModel<boolean>('visible', { default: false });
   const bugDetailTabRef = ref();
 
-  const activeTab = ref<string | number>('detail');
+  const activeTab = ref<string>('detail');
 
   const detailInfo = ref<Record<string, any>>({ match: [] }); // 存储当前详情信息，通过loadBug 获取
   const tags = ref([]);
@@ -279,6 +266,7 @@
     const { templateId } = detail;
     // tag 赋值
     tags.value = detail.tags || [];
+    caseCount.value = detail.linkCaseCount;
     const tmpObj = {};
     if (detail.customFields && Array.isArray(detail.customFields)) {
       detail.customFields.forEach((item) => {
@@ -292,6 +280,23 @@
     // 初始化自定义字段
     await templateChange(templateId, tmpObj, { platformBugKey: detail.platformBugId, fromStatusId: detail.status });
   }
+  /**
+   * 获取 tab 的参数数量徽标
+   */
+  function getTabBadge(tabKey: string) {
+    switch (tabKey) {
+      case 'detail':
+        return '';
+      case 'case':
+        return `${caseCount.value > 0 ? caseCount.value : ''}`;
+      case 'comment':
+        return '';
+      case 'history':
+        return '';
+      default:
+        return '';
+    }
+  }
 
   const editLoading = ref<boolean>(false);
 
@@ -299,6 +304,27 @@
     detailDrawerRef.value?.initDetail();
   }
 
+  const contentTabList = computed(() => {
+    return [
+      {
+        value: 'detail',
+        label: t('bugManagement.detail.detail'),
+      },
+      {
+        value: 'case',
+        label: t('bugManagement.detail.case'),
+      },
+      {
+        value: 'comment',
+        label: t('bugManagement.detail.comment'),
+      },
+      {
+        value: 'history',
+        label: t('bugManagement.detail.changeHistory'),
+      },
+    ];
+  });
+
   function updateHandler() {
     router.push({
       name: RouteEnum.BUG_MANAGEMENT_DETAIL,

frontend/src/views/bug-management/components/bugCaseTab.vue

@@ -115,6 +115,7 @@
     (e: 'update:project', val: string): void;
     (e: 'success', val: string[]): void;
     (e: 'close'): void;
+    (e: 'updateCaseSuccess'): void;
   }>();
   const keyword = ref<string>('');
 
@@ -218,6 +219,7 @@
       const { relateId } = record;
       await cancelAssociation(relateId);
       await getFetch();
+      emit('updateCaseSuccess');
       Message.success(t('common.unLinkSuccess'));
     } catch (error) {
       console.log(error);
@@ -236,6 +238,7 @@
       await batchAssociation(params);
       await getFetch();
       Message.success(t('common.linkSuccess'));
+      emit('updateCaseSuccess');
       innerVisible.value = false;
     } catch (error) {
       // eslint-disable-next-line no-console