feat(公共组件): 增加评论人ids

frontend/src/assets/style/arco-reset.less

@@ -795,7 +795,6 @@
 
 /*** 徽标 ****/
 .arco-badge-number {
-  width: 30px !important;
   height: 16px !important;
   line-height: 16px;
   text-align: center;

frontend/src/components/business/ms-comment/comment.tsx

@@ -74,6 +74,8 @@ export default defineComponent({
       currentItem.parentId = item.parentId || '';
     };
 
+    const noticeUserIds = ref<string[]>([]);
+
     const renderInput = (item: CommentItem) => {
       return (
         <CommentInput

frontend/src/components/business/ms-comment/input.vue

@@ -10,7 +10,7 @@
     <div class="w-full items-center">
       <a-input v-if="!isActive" class="w-full" @click="isActive = true"></a-input>
       <div v-else class="flex flex-col justify-between">
-        <MsRichText v-model:raw="currentContent" class="w-full" />
+        <MsRichText v-model:raw="currentContent" v-model:commentIds="commentIds" class="w-full" />
         <div class="mt-4 flex flex-row justify-end gap-[12px]">
           <a-button @click="cancelClick">{{ t('common.cancel') }}</a-button>
           <a-button type="primary" :disabled="!currentContent" @click="publish">{{ t('common.publish') }}</a-button>
@@ -22,6 +22,7 @@
 
 <script lang="ts" setup>
   import { ref } from 'vue';
+  import { useVModel } from '@vueuse/core';
 
   import MsAvatar from '@/components/pure/ms-avatar/index.vue';
   import MsRichText from '@/components/pure/ms-rich-text/MsRichText.vue';
@@ -38,6 +39,7 @@
     isShowAvatar: boolean; // 是否显示评论人头像
     isUseBottom: boolean; // 是否被用于底部
     defaultValue?: string; // 默认值
+    noticeUserIds?: string[]; // 评论人id列表
   }>();
 
   const currentContent = ref(props.defaultValue || '');
@@ -48,6 +50,7 @@
   }>();
 
   const isActive = ref(false);
+  const commentIds = useVModel(props, 'noticeUserIds', emit);
 
   const publish = () => {
     emit('publish', currentContent.value);

frontend/src/components/pure/ms-drawer/index.vue

@@ -128,6 +128,7 @@
     popupContainer: 'body',
     disabledWidthDrag: false,
     okPermission: () => [], // 确认按钮权限
+    closable: true,
   });
   const emit = defineEmits(['update:visible', 'confirm', 'cancel', 'continue']);
 

frontend/src/components/pure/ms-form-create/formCreate.vue

@@ -1,5 +1,5 @@
 <template>
-  <FormCreate v-model:api="formApi" :rule="formRules" :option="option"></FormCreate>
+  <FormCreate v-model:api="formApi" :rule="formRules" :option="props.option"></FormCreate>
 </template>
 
 <script setup lang="ts">

frontend/src/components/pure/ms-rich-text/MsRichText.vue

@@ -94,6 +94,7 @@
       uploadImage?: (file: File) => Promise<any>;
       maxHeight?: string;
       filedIds?: string[];
+      commentIds?: string[];
     }>(),
     {
       raw: '',
@@ -107,9 +108,11 @@
     (event: 'update:raw', value: string): void;
     (event: 'update:filedIds', value: string[]): void;
     (event: 'update', value: string): void;
+    (event: 'update:commentIds', value: string): void;
   }>();
 
-  const imagesNodes = useVModel(props, 'filedIds', emit);
+  const imagesNodesIds = useVModel(props, 'filedIds', emit);
+  const commentNodeIds = useVModel(props, 'commentIds', emit);
 
   async function asyncWorker(arg: Task): Promise<void> {
     if (!props.uploadImage) {
@@ -142,6 +145,7 @@
 
   const attachmentSelectorModal = ref(false);
   const selectedimagesNode = ref<string>();
+  const selectedCommentNode = ref<string>();
 
   onMounted(() => {
     const debounceOnUpdate = useDebounceFn(() => {
@@ -194,7 +198,7 @@
                         images.push(node.attrs.fileId);
                       }
                     });
-                    imagesNodes.value = images;
+                    imagesNodesIds.value = images;
                     if (!selectedimagesNode.value) {
                       // eslint-disable-next-line prefer-destructuring
                       selectedimagesNode.value = images[0];
@@ -206,6 +210,32 @@
             ];
           },
         }),
+        Extension.create({
+          addProseMirrorPlugins() {
+            return [
+              new Plugin({
+                key: new PluginKey(Mention.name),
+                props: {
+                  decorations: (state) => {
+                    const commentUsers: string[] = [];
+                    const { doc } = state;
+                    doc.descendants((node) => {
+                      if (node.type.name === 'mention') {
+                        commentUsers.push(node.attrs.id);
+                      }
+                    });
+                    commentNodeIds.value = commentUsers;
+                    if (!selectedCommentNode.value) {
+                      // eslint-disable-next-line prefer-destructuring
+                      selectedCommentNode.value = commentUsers[0];
+                    }
+                    return DecorationSet.empty;
+                  },
+                },
+              }),
+            ];
+          },
+        }),
         ExtensionTaskList,
         ExtensionLink.configure({
           autolink: false,

frontend/src/locale/en-US/index.ts

@@ -37,6 +37,7 @@ export default {
     'menu.caseManagement.featureCaseRecycle': 'Recycle',
     'menu.caseManagement.featureCaseList': 'Case list',
     'menu.caseManagement.featureCaseDetail': 'Create Case',
+    'menu.caseManagement.featureCaseEdit': 'Edit Case',
     'menu.caseManagement.featureCaseCreateSuccess': 'Create Success',
     'menu.caseManagement.caseManagementReview': 'Feature Case Review',
     'menu.caseManagement.caseManagementReviewCreate': 'Create Review',

frontend/src/locale/zh-CN/index.ts

@@ -41,6 +41,7 @@ export default {
     'menu.caseManagement.featureCaseRecycle': '回收站',
     'menu.caseManagement.featureCaseList': '用例列表',
     'menu.caseManagement.featureCaseDetail': '创建用例',
+    'menu.caseManagement.featureCaseEdit': '编辑用例',
     'menu.caseManagement.featureCaseCreateSuccess': '创建用例成功',
     'menu.caseManagement.caseManagementReview': '用例评审',
     'menu.caseManagement.caseManagementReviewCreate': '创建评审',

frontend/src/models/caseManagement/featureCase.ts

@@ -224,6 +224,7 @@ export interface TabItemType {
   key: string;
   title: string;
   enable: boolean;
+  total: number;
 }
 
 // 需求

frontend/src/router/routes/modules/caseManagement.ts

@@ -42,8 +42,9 @@ const CaseManagement: AppRouteRecordRaw = {
           },
           {
             name: CaseManagementRouteEnum.CASE_MANAGEMENT_CASE_DETAIL,
-            editTag: 'id',
             locale: 'menu.caseManagement.featureCaseDetail',
+            editTag: 'id',
+            editLocale: 'menu.caseManagement.featureCaseEdit',
           },
         ],
       },

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

@@ -146,6 +146,7 @@
         :content="commentContent"
         is-show-avatar
         is-use-bottom
+        :notice-user-ids="noticeUserIds"
         @publish="publishHandler"
       />
     </template>
@@ -205,6 +206,7 @@
   const appStore = useAppStore();
   const commentContent = ref('');
   const commentRef = ref();
+  const noticeUserIds = ref<string[]>([]); // 通知人ids
 
   const currentProjectId = computed(() => appStore.currentProjectId);
 

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

@@ -12,6 +12,7 @@
     :pagination="props.pagination"
     :table-data="props.tableData"
     :page-change="props.pageChange"
+    :mask-closable="true"
     @loaded="loadedCase"
   >
     <template #titleLeft>
@@ -184,6 +185,7 @@
       </div>
       <inputComment
         v-model:content="content"
+        v-model:notice-user-ids="noticeUserIds"
         v-permission="['FUNCTIONAL_CASE:READ+COMMENT']"
         :is-active="isActive"
         is-show-avatar
@@ -483,8 +485,9 @@
   watch(
     () => props.visible,
     (val) => {
-      showDrawerVisible.value = val;
       if (val) {
+        showDrawerVisible.value = val;
+        activeTab.value = 'detail';
         settingDrawerRef.value.getTabModule();
       }
     }
@@ -508,21 +511,17 @@
   const content = ref('');
   const commentRef = ref();
   const isActive = ref<boolean>(false);
+
+  const noticeUserIds = ref<string[]>([]);
   async function publishHandler(currentContent: string) {
-    const regex = /data-id="([^"]*)"/g;
-    const matchesNotifier = currentContent.match(regex);
-    let notifiers = '';
-    if (matchesNotifier?.length) {
-      notifiers = matchesNotifier.map((match) => match.replace('data-id="', '').replace('"', '')).join(';');
-    }
     try {
       const params: CommentParams = {
         caseId: detailInfo.value.id,
-        notifier: notifiers,
+        notifier: noticeUserIds.value.join(';'),
         replyUser: '',
         parentId: '',
         content: currentContent,
-        event: notifiers ? 'AT' : 'COMMENT', // 任务事件(仅评论: ’COMMENT‘; 评论并@: ’AT‘; 回复评论/回复并@: ’REPLAY‘;)
+        event: noticeUserIds.value.join(';') ? 'AT' : 'COMMENT', // 任务事件(仅评论: ’COMMENT‘; 评论并@: ’AT‘; 回复评论/回复并@: ’REPLAY‘;)
       };
       await createCommentList(params);
       commentRef.value.getAllCommentList();

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

@@ -82,11 +82,13 @@
         key: 'requirement',
         title: 'caseManagement.featureCase.requirement',
         enable: true,
+        total: 0,
       },
       {
         key: 'bug',
         title: 'caseManagement.featureCase.bug',
         enable: true,
+        total: 0,
       },
     ],
     // testPlan: [
@@ -108,31 +110,37 @@
           key: 'changeHistory',
           title: 'caseManagement.featureCase.changeHistory',
           enable: true,
+          total: 0,
         },
       ];
     }
     return [];
   }
+
   const tabDefaultSettingList = ref<TabItemType[]>([
     {
       key: 'case',
       title: 'caseManagement.featureCase.case',
       enable: true,
+      total: 0,
     },
     {
       key: 'dependency',
       title: 'caseManagement.featureCase.dependency',
       enable: true,
+      total: 0,
     },
     {
       key: 'caseReview',
       title: 'caseManagement.featureCase.caseReview',
       enable: true,
+      total: 0,
     },
     {
       key: 'comments',
       title: 'caseManagement.featureCase.comments',
       enable: true,
+      total: 0,
     },
     // TOTO Xpack 不上
     // ...getTabList(),