fix(用例管理): 修复用例关联缺陷无法查看标签以及用例评审没有用例等级字段问题

--bug=1037269 --user=郭雨琦 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001037269
--bug=1037255 --user=郭雨琦 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001037255
--bug=1037253 --user=郭雨琦 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001037253
--bug=1037228 --user=郭雨琦 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001037228
--bug=1036562 --user=郭雨琦 https://www.tapd.cn/55049933/bugtrace/bugs/view/1155049933001036562

frontend/src/components/pure/ms-upload/fileList.vue

@@ -37,9 +37,16 @@
               </a-avatar>
             </template>
             <template #title>
-              <div class="flex items-center">
+              <div class="m-b[2px] flex items-center">
                 <a-tooltip :content="item.file.name">
-                  <div class="one-line-text max-w-[80%] font-normal">{{ item.file.name }}</div>
+                  <div class="show-file-name">
+                    <div class="one-line-text max-w-[421px] font-normal">
+                      {{ item.file.name }}
+                    </div>
+                    <span v-if="getTextWidth(item.file.name) > 421" class="font-normal text-[var(--color-text-1)]">{{
+                      item.file.name.slice(item.file.name.indexOf('.') + 1)
+                    }}</span>
+                  </div>
                 </a-tooltip>
                 <slot name="title" :item="item"></slot>
               </div>
@@ -55,11 +62,14 @@
                 v-else-if="item.status === UploadStatus.done"
                 class="flex items-center gap-[8px] text-[12px] leading-[16px] text-[var(--color-text-4)]"
               >
-                {{
-                  `${formatFileSize(item.file.size)}  ${item.createUserName || ''}  ${getUploadDesc(item)} ${dayjs(
-                    item.createTime
-                  ).format('YYYY-MM-DD HH:mm:ss')}`
-                }}
+                <div class="one-line-text max-w-[421px]">
+                  {{
+                    `${formatFileSize(item.file.size)}  ${item.createUserName || ''}  ${getUploadDesc(item)} ${dayjs(
+                      item.createTime
+                    ).format('YYYY-MM-DD HH:mm:ss')}`
+                  }}
+                </div>
+
                 <div v-if="showUploadSuccess(item)" class="flex items-center">
                   <MsIcon type="icon-icon_succeed_colorful" />
                   {{ t('ms.upload.uploadSuccess') }}
@@ -271,6 +281,16 @@
     }
   }
 
+  function getTextWidth(text) {
+    const canvas = document.createElement('canvas');
+    const context = canvas.getContext('2d');
+    if (context != null) {
+      const metrics = context.measureText(text);
+      return metrics.width;
+    }
+    return 0;
+  }
+
   watch(
     () => asyncTaskStore.uploadFileTask.finishedTime,
     (val) => {
@@ -356,4 +376,10 @@
       cursor: pointer;
     }
   }
+  .show-file-name {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    padding-bottom: 4px;
+  }
 </style>

frontend/src/main.ts

@@ -27,7 +27,17 @@ async function bootstrap() {
   app.use(router);
   app.use(ArcoVue);
   app.use(ArcoVueIcon);
-  app.use(VueDOMPurifyHTML);
+  app.use(VueDOMPurifyHTML, {
+    hooks: {
+      afterSanitizeAttributes: (currentNode: Element) => {
+        if ('target' in currentNode && 'rel' in currentNode) {
+          const attribute = currentNode.getAttribute('target');
+          currentNode.setAttribute('target', attribute == null ? '_blank' : attribute);
+          currentNode.setAttribute('rel', 'noopener noreferrer nofollow');
+        }
+      },
+    },
+  });
   app.component('SvgIcon', SvgIcon);
   app.component('MsIcon', MsIcon);
 

frontend/src/views/bug-management/index.vue

@@ -34,18 +34,18 @@
       </template>
       <template #operation="{ record }">
         <div class="flex flex-nowrap items-center">
-          <span v-permission="['PROJECT_BUG:READ+ADD']" class="flex flex-row items-center">
-            <MsButton class="!mr-0" :disabled="currentPlatform !== record.platform" @click="handleCopy(record)">{{
-              t('common.copy')
-            }}</MsButton>
-            <a-divider class="!mx-2 h-[12px]" direction="vertical" />
-          </span>
           <span v-permission="['PROJECT_BUG:READ+UPDATE']" class="flex flex-row items-center">
             <MsButton class="!mr-0" :disabled="currentPlatform !== record.platform" @click="handleEdit(record)">{{
               t('common.edit')
             }}</MsButton>
             <a-divider class="!mx-2 h-[12px]" direction="vertical" />
           </span>
+          <span v-permission="['PROJECT_BUG:READ+ADD']" class="flex flex-row items-center">
+            <MsButton class="!mr-0" :disabled="currentPlatform !== record.platform" @click="handleCopy(record)">{{
+              t('common.copy')
+            }}</MsButton>
+            <a-divider class="!mx-2 h-[12px]" direction="vertical" />
+          </span>
           <MsTableMoreAction
             v-permission="['PROJECT_BUG:READ+DELETE']"
             :list="moreActionList"

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

@@ -13,10 +13,12 @@
   >
     <template #left>
       <a-popover title="" position="bottom">
-        <div class="one-line-text max-h-[32px] max-w-[116px] text-[var(--color-text-1)]"
-          >{{ moduleNamePath }}
-          <span class="text-[var(--color-text-4)]"> ({{ props.modulesCount[props.activeFolder] || 0 }})</span></div
-        >
+        <div class="show-table-top-title">
+          <div class="one-line-text max-h-[32px] max-w-[116px] text-[var(--color-text-1)]">
+            {{ moduleNamePath }}
+          </div>
+          <span class="text-[var(--color-text-4)]"> ({{ props.modulesCount[props.activeFolder] || 0 }})</span>
+        </div>
         <template #content>
           <div class="text-[14px] font-medium text-[var(--color-text-1)]">
             {{ moduleNamePath }}
@@ -1609,4 +1611,9 @@
   // :deep(.moduleNameClass) {
   //   box-shadow: 0 3px 14px 2px rgba(0/ 0/0 5%), 0 8px 10px 1px rgba(0/ 0/0 6%), 0 5px 5px -3px rgba(0/ 0/0 1%);
   // }
+  .show-table-top-title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 </style>

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue

@@ -1,12 +1,12 @@
 <template>
   <MsDrawer
     v-model:visible="showDrawer"
-    :mask="false"
+    :mask="true"
     :title="t('caseManagement.featureCase.createDefect')"
     :ok-text="t('common.confirm')"
     :ok-loading="drawerLoading"
     :width="800"
-    :mask-closable="false"
+    :mask-closable="true"
     unmount-on-close
     :show-continue="true"
     @continue="handleDrawerConfirm(true)"

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/linkDefectDrawer.vue

@@ -34,7 +34,7 @@
           <a-popover title="" position="right" style="width: 480px">
             <span class="ml-1 text-[rgb(var(--primary-5))]">{{ t('caseManagement.featureCase.preview') }}</span>
             <template #content>
-              <div class="markdown-body" style="margin-left: 48px" v-html="record.content"> </div>
+              <div v-dompurify-html="record.content" class="markdown-body" style="margin-left: 48px"> </div>
             </template>
           </a-popover>
         </template>
@@ -57,6 +57,7 @@
 
   import { TableKeyEnum } from '@/enums/tableEnum';
 
+  import { getCaseLevels } from '@/views/case-management/caseManagementFeature/components/utils';
   import debounce from 'lodash-es/debounce';
 
   const { t } = useI18n();
@@ -139,14 +140,28 @@
     },
   ];
 
-  const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(getDrawerDebugPage, {
-    columns,
-    tableKey: TableKeyEnum.CASE_MANAGEMENT_TAB_DEFECT,
-    selectable: true,
-    scroll: { x: 'auto' },
-    heightUsed: 340,
-    enableDrag: false,
-  });
+  const { propsRes, propsEvent, loadList, setLoadListParams, resetSelector } = useTable(
+    getDrawerDebugPage,
+    {
+      columns,
+      tableKey: TableKeyEnum.CASE_MANAGEMENT_TAB_DEFECT,
+      selectable: true,
+      scroll: { x: 'auto' },
+      heightUsed: 340,
+      enableDrag: false,
+    },
+    (record) => {
+      return {
+        ...record,
+        tags: (record.tags || []).map((item: string, i: number) => {
+          return {
+            id: `${record.id}-${i}`,
+            name: item,
+          };
+        }),
+      };
+    }
+  );
 
   const keyword = ref<string>('');
 

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/demand.vue

@@ -237,11 +237,6 @@
     loadList();
   };
 
-  const searchHandler = () => {
-    initData();
-    resetSelector();
-  };
-
   const customFields = ref<any[]>([]);
   async function initColumn() {
     fullColumns = [...columns];
@@ -269,9 +264,17 @@
   // 关联需求
   const linkDemandDrawer = ref<boolean>(false);
   function associatedDemand() {
+    initColumn();
     linkDemandDrawer.value = true;
   }
 
+  const searchHandler = () => {
+    if (linkDemandDrawer.value) {
+      initData();
+      resetSelector();
+    }
+  };
+
   function getSlotName(record: any, item: MsTableColumnData) {
     if (item?.options) {
       const currentRecord = {
@@ -347,7 +350,6 @@
       const result = await getCaseRelatedInfo(currentProjectId.value);
       if (result && result.platform_key) {
         platformInfo.value = { ...result };
-        initColumn();
       }
     } catch (error) {
       console.log(error);

frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/thirdDemandDrawer.vue

@@ -228,14 +228,15 @@
     }
   }
 
-  watch(
-    () => props.platformInfo.demand_platform_config,
-    (val) => {
-      if (val) {
-        initColumn();
-      }
-    }
-  );
+  // watch(
+  //   () => props.platformInfo.demand_platform_config,
+  //   (val) => {
+  //     if (val) {
+  //       console.log(val);
+  //       initColumn();
+  //     }
+  //   }
+  // );
 
   // watchEffect(() => {
   //   if (props.platformInfo.demand_platform_config) {

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

@@ -683,7 +683,7 @@
 
   function handleChange(_fileList: MsFileItem[], fileItem?: MsFileItem) {
     // 校验本地文件是否重复
-    const isRepeat = _fileList.filter((item) => item.name === fileItem?.name).length > 1;
+    const isRepeat = _fileList.filter((item) => item.name === fileItem?.name && item.local).length > 1;
     if (isRepeat) {
       fileList.value = _fileList.reduce((prev: MsFileItem[], current: MsFileItem) => {
         const isExist = prev.find((item: any) => item.name === current.name);

frontend/src/views/case-management/caseReview/components/detail/caseTable.vue

@@ -318,6 +318,8 @@
   import { CaseManagementRouteEnum } from '@/enums/routeEnum';
   import { TableKeyEnum } from '@/enums/tableEnum';
 
+  import { getCaseLevels } from '@/views/case-management/caseManagementFeature/components/utils';
+
   const caseLevelFields = ref<Record<string, any>>({});
   const caseFilterVisible = ref(false);
   const caseFilters = ref<string[]>([]);
@@ -429,6 +431,12 @@
       selectable: true,
       showSelectAll: true,
       draggable: { type: 'handle', width: 32 },
+    },
+    (record) => {
+      return {
+        ...record,
+        caseLevel: getCaseLevels(record.customFields),
+      };
     }
   );
   const batchActions = {