From 665e09df41fa342025314fb910620033ff95e21d Mon Sep 17 00:00:00 2001
From: guoyuqi <xiaomeinvG@126.com>
Date: Wed, 20 Mar 2024 17:28:02 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E7=94=A8=E4=BE=8B=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=94=A8=E4=BE=8B=E5=85=B3=E8=81=94=E7=BC=BA?=
 =?UTF-8?q?=E9=99=B7=E6=97=A0=E6=B3=95=E6=9F=A5=E7=9C=8B=E6=A0=87=E7=AD=BE?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E7=94=A8=E4=BE=8B=E8=AF=84=E5=AE=A1=E6=B2=A1?=
 =?UTF-8?q?=E6=9C=89=E7=94=A8=E4=BE=8B=E7=AD=89=E7=BA=A7=E5=AD=97=E6=AE=B5?=
 =?UTF-8?q?=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

--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
---
 .../components/pure/ms-upload/fileList.vue    | 40 +++++++++++++++----
 frontend/src/main.ts                          | 12 +++++-
 frontend/src/views/bug-management/index.vue   | 12 +++---
 .../components/caseTable.vue                  | 15 +++++--
 .../tabContent/tabBug/addDefectDrawer.vue     |  4 +-
 .../tabContent/tabBug/linkDefectDrawer.vue    | 33 ++++++++++-----
 .../tabContent/tabDemand/demand.vue           | 14 ++++---
 .../tabDemand/thirdDemandDrawer.vue           | 17 ++++----
 .../components/tabContent/tabDetail.vue       |  2 +-
 .../components/detail/caseTable.vue           |  8 ++++
 10 files changed, 113 insertions(+), 44 deletions(-)

diff --git a/frontend/src/components/pure/ms-upload/fileList.vue b/frontend/src/components/pure/ms-upload/fileList.vue
index 396c5877b5..afef64a5fb 100644
--- a/frontend/src/components/pure/ms-upload/fileList.vue
+++ b/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>
diff --git a/frontend/src/main.ts b/frontend/src/main.ts
index 642168aecf..eb13f4e3c3 100644
--- a/frontend/src/main.ts
+++ b/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);
 
diff --git a/frontend/src/views/bug-management/index.vue b/frontend/src/views/bug-management/index.vue
index 4f3ca5d52c..64da324e32 100644
--- a/frontend/src/views/bug-management/index.vue
+++ b/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"
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue b/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
index 1bb100cd9b..a0ee5408ea 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/caseTable.vue
+++ b/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>
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue
index b94813c510..af0e97ccb0 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/addDefectDrawer.vue
+++ b/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)"
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/linkDefectDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/linkDefectDrawer.vue
index bd9c22c38e..f27494037a 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabBug/linkDefectDrawer.vue
+++ b/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>('');
 
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/demand.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/demand.vue
index e20560801b..e84471998a 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/demand.vue
+++ b/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);
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/thirdDemandDrawer.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/thirdDemandDrawer.vue
index 108905b6db..3482b201ac 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDemand/thirdDemandDrawer.vue
+++ b/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) {
diff --git a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue b/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
index f839cc150f..277b668faa 100644
--- a/frontend/src/views/case-management/caseManagementFeature/components/tabContent/tabDetail.vue
+++ b/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);
diff --git a/frontend/src/views/case-management/caseReview/components/detail/caseTable.vue b/frontend/src/views/case-management/caseReview/components/detail/caseTable.vue
index 4518d5192c..03c8c9af1c 100644
--- a/frontend/src/views/case-management/caseReview/components/detail/caseTable.vue
+++ b/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 = {