From cd03ccead90b9b3c8b2ae79b8b307db57b426c7b Mon Sep 17 00:00:00 2001
From: "xinxin.wu" <xinxin.wu@fit2cloud.com>
Date: Wed, 17 Apr 2024 21:20:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E6=94=B9=E5=85=A8=E5=B1=80bug?=
 =?UTF-8?q?=E6=A0=91=E6=A8=A1=E5=BF=AB=E6=82=AC=E6=B5=AE=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?&=E7=BC=BA=E9=99=B7=E7=AE=A1=E7=90=86bug&=E8=84=9A=E6=9C=AC?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95style?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../business/ms-case-associate/index.vue      |  2 +-
 .../ms-common-script/formApiImportDrawer.vue  |  2 +-
 .../ms-common-script/ms-addScriptDrawer.vue   |  3 +-
 .../ms-common-script/ms-script-menu.vue       | 33 +++++++-------
 .../business/ms-link-file/fileTree.vue        |  2 +-
 .../src/components/business/ms-tree/index.vue |  5 ++-
 .../components/pure/ms-code-editor/index.vue  |  5 +++
 frontend/src/components/pure/navbar/index.vue |  6 +++
 frontend/src/config/pathMap.ts                |  3 ++
 .../requestComposition/response/result.vue    | 12 +++--
 .../response/result/body.vue                  |  5 +++
 .../api-test/debug/components/moduleTree.vue  |  2 +-
 .../management/api/preview/quote.vue          |  9 ++++
 .../management/components/moduleTree.vue      |  2 +-
 .../common/importApiDrawer/moduleTree.vue     |  4 +-
 .../operationScenarioModuleTree.vue           |  2 +-
 .../api-test/scenario/recycle/recycleTree.vue |  2 +-
 .../components/bug-detail-drawer.vue          | 44 +++++++++++--------
 .../components/caseTree.vue                   |  8 ++--
 .../components/recycleCaseTable.vue           |  4 +-
 .../tabDependency/preAndPostCaseDrawer.vue    |  2 +-
 .../caseManagementFeature/index.vue           |  2 +-
 .../caseReview/components/detail/caseTree.vue |  2 +-
 .../components/index/moduleTree.vue           |  4 +-
 .../fileManagement/components/folderTree.vue  |  4 +-
 .../testPlan/components/testPlanTree.vue      |  4 +-
 26 files changed, 115 insertions(+), 58 deletions(-)

diff --git a/frontend/src/components/business/ms-case-associate/index.vue b/frontend/src/components/business/ms-case-associate/index.vue
index fbf71300a8..311b80be49 100644
--- a/frontend/src/components/business/ms-case-associate/index.vue
+++ b/frontend/src/components/business/ms-case-associate/index.vue
@@ -78,7 +78,7 @@
             <template #title="nodeData">
               <div class="inline-flex w-full">
                 <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-                <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+                <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
               </div>
             </template>
           </MsTree>
diff --git a/frontend/src/components/business/ms-common-script/formApiImportDrawer.vue b/frontend/src/components/business/ms-common-script/formApiImportDrawer.vue
index 7bd4044c04..f79a49a5ea 100644
--- a/frontend/src/components/business/ms-common-script/formApiImportDrawer.vue
+++ b/frontend/src/components/business/ms-common-script/formApiImportDrawer.vue
@@ -53,7 +53,7 @@
             <template #title="nodeData">
               <div class="inline-flex w-full">
                 <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-                <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+                <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
               </div>
             </template>
           </MsTree>
diff --git a/frontend/src/components/business/ms-common-script/ms-addScriptDrawer.vue b/frontend/src/components/business/ms-common-script/ms-addScriptDrawer.vue
index 7996a4c60c..c57c3d7dec 100644
--- a/frontend/src/components/business/ms-common-script/ms-addScriptDrawer.vue
+++ b/frontend/src/components/business/ms-common-script/ms-addScriptDrawer.vue
@@ -2,7 +2,8 @@
   <MsDrawer
     v-model:visible="showScriptDrawer"
     :title="form.id ? t('project.commonScript.editPublicScript') : t('project.commonScript.addPublicScript')"
-    :width="768"
+    :width="900"
+    min-width="900px"
     :footer="true"
     unmount-on-close
     :ok-loading="props.confirmLoading"
diff --git a/frontend/src/components/business/ms-common-script/ms-script-menu.vue b/frontend/src/components/business/ms-common-script/ms-script-menu.vue
index 0c72a659b2..adca1e3305 100644
--- a/frontend/src/components/business/ms-common-script/ms-script-menu.vue
+++ b/frontend/src/components/business/ms-common-script/ms-script-menu.vue
@@ -1,6 +1,6 @@
 <template>
-  <div v-if="!innerExpand" class="w-[32%] min-w-[30%] max-w-[42%] bg-white p-3 pl-0">
-    <div class="mb-2 flex items-center justify-between">
+  <div v-if="!innerExpand" class="w-[32%] min-w-[260px] max-w-[42%] flex-1 bg-white p-3 pl-0">
+    <div class="mb-2 flex w-full items-center justify-between">
       <div class="flex items-center">
         <span v-if="innerExpand" class="collapsebtn mr-1 flex items-center justify-center" @click="expandedHandler">
           <icon-right class="text-[12px] text-[var(--color-text-4)]" />
@@ -8,22 +8,23 @@
         <span v-else class="expand mr-1 flex items-center justify-center" @click="expandedHandler">
           <icon-down class="text-[12px] text-[rgb(var(--primary-6))]" />
         </span>
-        <div class="font-medium">{{ t('project.commonScript.codeSnippet') }}</div>
+        <div class="one-line-text font-medium">{{ t('project.commonScript.codeSnippet') }}</div>
       </div>
 
-      <a-select
-        v-model="innerLanguageType"
-        :disabled="props.disabled"
-        class="max-w-[50%]"
-        :placeholder="t('project.commonScript.pleaseSelected')"
-        @change="changeHandler"
-      >
-        <a-option v-for="item of languages" :key="item.value" :value="item.value">
-          <a-tooltip :content="item.text">
-            {{ item.text }}
-          </a-tooltip>
-        </a-option>
-      </a-select>
+      <div class="ml-[24px] flex-1">
+        <a-select
+          v-model="innerLanguageType"
+          :disabled="props.disabled"
+          :placeholder="t('project.commonScript.pleaseSelected')"
+          @change="changeHandler"
+        >
+          <a-option v-for="item of languages" :key="item.value" :value="item.value">
+            <a-tooltip :content="item.text">
+              {{ item.text }}
+            </a-tooltip>
+          </a-option>
+        </a-select>
+      </div>
     </div>
     <div class="p-[12px] pt-0">
       <div v-for="item of SCRIPT_MENU" :key="item.value" class="menuItem px-1" @click="handleClick(item)">
diff --git a/frontend/src/components/business/ms-link-file/fileTree.vue b/frontend/src/components/business/ms-link-file/fileTree.vue
index 2704d0ab77..7e27347294 100644
--- a/frontend/src/components/business/ms-link-file/fileTree.vue
+++ b/frontend/src/components/business/ms-link-file/fileTree.vue
@@ -33,7 +33,7 @@
               nodeData.name
             }}</div
           >
-          <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+          <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
         </div>
       </template>
     </MsTree>
diff --git a/frontend/src/components/business/ms-tree/index.vue b/frontend/src/components/business/ms-tree/index.vue
index 765ff979c1..c6352d9cb6 100644
--- a/frontend/src/components/business/ms-tree/index.vue
+++ b/frontend/src/components/business/ms-tree/index.vue
@@ -405,7 +405,7 @@
     @apply h-full;
     .ms-tree {
       .ms-scroll-bar();
-      @apply h-full;
+      @apply h-full overflow-auto;
       .arco-tree-node {
         border-radius: var(--border-radius-small);
         &:hover {
@@ -418,6 +418,9 @@
               }
             }
           }
+          .ms-tree-node-count {
+            @apply hidden;
+          }
           .ms-tree-node-extra {
             @apply visible w-auto;
           }
diff --git a/frontend/src/components/pure/ms-code-editor/index.vue b/frontend/src/components/pure/ms-code-editor/index.vue
index bbfcbe8e6f..970729beba 100644
--- a/frontend/src/components/pure/ms-code-editor/index.vue
+++ b/frontend/src/components/pure/ms-code-editor/index.vue
@@ -252,6 +252,10 @@
           }
         }
       }
+      // 获取编码方式对应内容
+      function getEncodingCode() {
+        return editor.getValue();
+      }
 
       const init = () => {
         // 注册自定义主题 TODO:自定义主题高亮色还没配置
@@ -351,6 +355,7 @@
         undo,
         redo,
         format,
+        getEncodingCode,
       };
     },
   });
diff --git a/frontend/src/components/pure/navbar/index.vue b/frontend/src/components/pure/navbar/index.vue
index 04fe182217..2cc64335f0 100644
--- a/frontend/src/components/pure/navbar/index.vue
+++ b/frontend/src/components/pure/navbar/index.vue
@@ -265,6 +265,12 @@
   function goMessageCenter() {
     messageCenterVisible.value = true;
   }
+
+  onMounted(() => {
+    if (route.query.task) {
+      goTaskCenter();
+    }
+  });
 </script>
 
 <style scoped lang="less">
diff --git a/frontend/src/config/pathMap.ts b/frontend/src/config/pathMap.ts
index f99f65c6d2..d97f8c9947 100644
--- a/frontend/src/config/pathMap.ts
+++ b/frontend/src/config/pathMap.ts
@@ -734,6 +734,9 @@ export const pathMap: PathMapItem[] = [
         key: 'PROJECT_MANAGEMENT_TASK_CENTER', // 项目管理-任务中心
         locale: 'menu.projectManagement.taskCenter',
         route: '',
+        routeQuery: {
+          task: 'projectTask',
+        },
         permission: [],
         level: MENU_LEVEL[2],
       },
diff --git a/frontend/src/views/api-test/components/requestComposition/response/result.vue b/frontend/src/views/api-test/components/requestComposition/response/result.vue
index ecd1bc0556..307ce7f19d 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/result.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result.vue
@@ -4,7 +4,12 @@
       <a-tab-pane v-for="item of responseCompositionTabList" :key="item.value" :title="item.label" />
     </a-tabs>
     <div class="response-container">
-      <ResBody v-if="activeTab === ResponseComposition.BODY" :request-result="props.requestResult" @copy="copyScript" />
+      <ResBody
+        v-if="activeTab === ResponseComposition.BODY"
+        ref="resBodyRef"
+        :request-result="props.requestResult"
+        @copy="copyScript"
+      />
       <ResConsole v-else-if="activeTab === ResponseComposition.CONSOLE" :console="props.console?.trim()" />
       <ResValueScript
         v-else-if="
@@ -116,10 +121,11 @@
   });
 
   const { copy, isSupported } = useClipboard({ legacy: true });
-
+  const resBodyRef = ref();
   function copyScript() {
+    const encodingFormatValue = resBodyRef.value.responseEditorRef.getEncodingCode();
     if (isSupported) {
-      copy(props.requestResult?.responseResult.body || '');
+      copy(encodingFormatValue || '');
       Message.success(t('common.copySuccess'));
     } else {
       Message.warning(t('apiTestDebug.copyNotSupport'));
diff --git a/frontend/src/views/api-test/components/requestComposition/response/result/body.vue b/frontend/src/views/api-test/components/requestComposition/response/result/body.vue
index c570cd6961..104faf3114 100644
--- a/frontend/src/views/api-test/components/requestComposition/response/result/body.vue
+++ b/frontend/src/views/api-test/components/requestComposition/response/result/body.vue
@@ -95,6 +95,11 @@
       downloadUrlFile(imageUrl.value, `response.${props.requestResult?.responseResult.contentType.split('/')[1]}`);
     }
   }
+  const responseEditorRef = ref();
+
+  defineExpose({
+    responseEditorRef,
+  });
 </script>
 
 <style scoped></style>
diff --git a/frontend/src/views/api-test/debug/components/moduleTree.vue b/frontend/src/views/api-test/debug/components/moduleTree.vue
index 85a85177a4..24bd945b3b 100644
--- a/frontend/src/views/api-test/debug/components/moduleTree.vue
+++ b/frontend/src/views/api-test/debug/components/moduleTree.vue
@@ -105,7 +105,7 @@
           </div>
           <div v-else class="inline-flex w-full">
             <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+            <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
           </div>
         </template>
         <template #extra="nodeData">
diff --git a/frontend/src/views/api-test/management/components/management/api/preview/quote.vue b/frontend/src/views/api-test/management/components/management/api/preview/quote.vue
index 48e958b3dc..6722bfdae0 100644
--- a/frontend/src/views/api-test/management/components/management/api/preview/quote.vue
+++ b/frontend/src/views/api-test/management/components/management/api/preview/quote.vue
@@ -50,12 +50,20 @@
       dataIndex: 'num',
       slotName: 'num',
       width: 150,
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+        sorter: true,
+      },
     },
     {
       title: 'apiTestManagement.resourceName',
       dataIndex: 'resourceName',
       showTooltip: true,
       width: 150,
+      sortable: {
+        sortDirections: ['ascend', 'descend'],
+        sorter: true,
+      },
     },
     {
       title: 'apiTestManagement.resourceType',
@@ -87,6 +95,7 @@
       scroll: { x: '100%' },
       selectable: false,
       heightUsed: 374,
+      showJumpMethod: true,
     },
     (item) => ({
       ...item,
diff --git a/frontend/src/views/api-test/management/components/moduleTree.vue b/frontend/src/views/api-test/management/components/moduleTree.vue
index 6a852432a5..bb54e5c3fb 100644
--- a/frontend/src/views/api-test/management/components/moduleTree.vue
+++ b/frontend/src/views/api-test/management/components/moduleTree.vue
@@ -130,7 +130,7 @@
           </div>
           <div v-else :id="nodeData.id" class="inline-flex w-full">
             <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-            <div v-if="!props.isModal" class="ml-[4px] text-[var(--color-text-4)]"
+            <div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]"
               >({{ modulesCount[nodeData.id] || 0 }})</div
             >
           </div>
diff --git a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/moduleTree.vue b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/moduleTree.vue
index 6ee8d8311e..6b6785d97b 100644
--- a/frontend/src/views/api-test/scenario/components/common/importApiDrawer/moduleTree.vue
+++ b/frontend/src/views/api-test/scenario/components/common/importApiDrawer/moduleTree.vue
@@ -48,7 +48,9 @@
         <template #title="nodeData">
           <div class="inline-flex w-full">
             <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">({{ moduleCountMap[nodeData.id] || 0 }})</div>
+            <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]"
+              >({{ moduleCountMap[nodeData.id] || 0 }})</div
+            >
           </div>
         </template>
       </MsTree>
diff --git a/frontend/src/views/api-test/scenario/components/operationScenarioModuleTree.vue b/frontend/src/views/api-test/scenario/components/operationScenarioModuleTree.vue
index faaf269fb9..235d56ccf0 100644
--- a/frontend/src/views/api-test/scenario/components/operationScenarioModuleTree.vue
+++ b/frontend/src/views/api-test/scenario/components/operationScenarioModuleTree.vue
@@ -30,7 +30,7 @@
         <template #title="nodeData">
           <div :id="nodeData.id" class="inline-flex w-full">
             <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+            <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
           </div>
         </template>
       </MsTree>
diff --git a/frontend/src/views/api-test/scenario/recycle/recycleTree.vue b/frontend/src/views/api-test/scenario/recycle/recycleTree.vue
index a6c96f3e5f..bb83d4df0b 100644
--- a/frontend/src/views/api-test/scenario/recycle/recycleTree.vue
+++ b/frontend/src/views/api-test/scenario/recycle/recycleTree.vue
@@ -46,7 +46,7 @@
         <template #title="nodeData">
           <div :id="nodeData.id" class="inline-flex w-full">
             <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+            <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
           </div>
         </template>
       </MsTree>
diff --git a/frontend/src/views/bug-management/components/bug-detail-drawer.vue b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
index e36fb6715d..7a4584335e 100644
--- a/frontend/src/views/bug-management/components/bug-detail-drawer.vue
+++ b/frontend/src/views/bug-management/components/bug-detail-drawer.vue
@@ -445,25 +445,32 @@
     emit('submit');
   }
 
+  const tabList = [
+    {
+      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'),
+    },
+  ];
+
+  /**
+   * 如果模块没有开启用例管理
+   */
   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'),
-      },
-    ];
+    return appStore.currentMenuConfig.includes('caseManagement')
+      ? tabList
+      : tabList.filter((item) => item.value !== 'case');
   });
 
   function updateHandler() {
@@ -784,7 +791,6 @@
   //  width: 100%;
   //  word-wrap: break-word;
   //}
-
   :deep(.arco-form-item-content) {
     overflow-wrap: anywhere;
   }
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseTree.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseTree.vue
index df3b558406..55a4c991ec 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTree.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/caseTree.vue
@@ -1,5 +1,5 @@
 <template>
-  <a-spin class="w-full" :style="{ height: `calc(100vh - 346px)` }" :loading="loading">
+  <a-spin class="min-h-[400px] w-full" :loading="loading">
     <MsTree
       v-model:focus-node-key="focusNodeKey"
       :selected-keys="props.selectedKeys"
@@ -26,7 +26,9 @@
       <template #title="nodeData">
         <div class="inline-flex w-full">
           <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-          <div v-if="!props.isModal" class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+          <div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]"
+            >({{ nodeData.count || 0 }})</div
+          >
         </div>
       </template>
       <template v-if="!props.isModal" #extra="nodeData">
@@ -343,7 +345,7 @@
       };
     }
     return {
-      height: 'calc(100vh - 325px)',
+      height: 'calc(100vh - 335px)',
       threshold: 200,
       fixedSize: true,
       buffer: 15,
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue b/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
index 1de8114403..20c3a234e0 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/recycleCaseTable.vue
@@ -52,7 +52,9 @@
                 <template #title="nodeData">
                   <div class="inline-flex w-full" @click="setFocusKey(nodeData)">
                     <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-                    <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+                    <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]"
+                      >({{ nodeData.count || 0 }})</div
+                    >
                   </div>
                 </template>
               </MsTree>
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue
index c092ce7682..c1718253ac 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDependency/preAndPostCaseDrawer.vue
@@ -50,7 +50,7 @@
                   @click="setFocusKey(nodeData)"
                   >{{ nodeData.name }}</div
                 >
-                <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+                <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
               </div>
             </template>
           </MsTree>
diff --git a/frontend/src/views/case-management/caseManagementFeature/index.vue b/frontend/src/views/case-management/caseManagementFeature/index.vue
index a0354f270a..aacf272c81 100644
--- a/frontend/src/views/case-management/caseManagementFeature/index.vue
+++ b/frontend/src/views/case-management/caseManagementFeature/index.vue
@@ -78,7 +78,7 @@
           </div>
           <div class="flex-1">
             <a-divider class="!my-0 !mb-0" />
-            <div class="case">
+            <div class="case mt-2">
               <div
                 class="flex items-center px-[20px]"
                 :class="getActiveClass('recycle')"
diff --git a/frontend/src/views/case-management/caseReview/components/detail/caseTree.vue b/frontend/src/views/case-management/caseReview/components/detail/caseTree.vue
index 416fae9844..e758f9b50d 100644
--- a/frontend/src/views/case-management/caseReview/components/detail/caseTree.vue
+++ b/frontend/src/views/case-management/caseReview/components/detail/caseTree.vue
@@ -38,7 +38,7 @@
         <template #title="nodeData">
           <div class="inline-flex w-full">
             <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-            <div class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+            <div class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
           </div>
         </template>
       </MsTree>
diff --git a/frontend/src/views/case-management/caseReview/components/index/moduleTree.vue b/frontend/src/views/case-management/caseReview/components/index/moduleTree.vue
index 9ff2de1dea..51e28cca8a 100644
--- a/frontend/src/views/case-management/caseReview/components/index/moduleTree.vue
+++ b/frontend/src/views/case-management/caseReview/components/index/moduleTree.vue
@@ -59,7 +59,9 @@
         <template #title="nodeData">
           <div class="inline-flex w-full">
             <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-            <div v-if="!props.isModal" class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+            <div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]"
+              >({{ nodeData.count || 0 }})</div
+            >
           </div>
         </template>
         <template v-if="!props.isModal" #extra="nodeData">
diff --git a/frontend/src/views/project-management/fileManagement/components/folderTree.vue b/frontend/src/views/project-management/fileManagement/components/folderTree.vue
index 9914c6253f..800b0a48ec 100644
--- a/frontend/src/views/project-management/fileManagement/components/folderTree.vue
+++ b/frontend/src/views/project-management/fileManagement/components/folderTree.vue
@@ -33,7 +33,9 @@
       <template #title="nodeData">
         <div class="inline-flex w-full">
           <div class="one-line-text text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-          <div v-if="!props.isModal" class="ml-auto text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+          <div v-if="!props.isModal" class="ms-tree-node-count ml-auto text-[var(--color-text-4)]"
+            >({{ nodeData.count || 0 }})</div
+          >
         </div>
       </template>
       <template v-if="!props.isModal" #extra="nodeData">
diff --git a/frontend/src/views/test-plan/testPlan/components/testPlanTree.vue b/frontend/src/views/test-plan/testPlan/components/testPlanTree.vue
index 5296f2732d..67603286d4 100644
--- a/frontend/src/views/test-plan/testPlan/components/testPlanTree.vue
+++ b/frontend/src/views/test-plan/testPlan/components/testPlanTree.vue
@@ -32,7 +32,9 @@
       <template #title="nodeData">
         <div class="inline-flex w-full">
           <div class="one-line-text w-[calc(100%-32px)] text-[var(--color-text-1)]">{{ nodeData.name }}</div>
-          <div v-if="!props.isModal" class="ml-[4px] text-[var(--color-text-4)]">({{ nodeData.count || 0 }})</div>
+          <div v-if="!props.isModal" class="ms-tree-node-count ml-[4px] text-[var(--color-text-4)]"
+            >({{ nodeData.count || 0 }})</div
+          >
         </div>
       </template>
       <template v-if="!props.isModal" #extra="nodeData">