feat: 表格兼容string标签&应用管理误报规则默认展开

frontend/src/components/pure/ms-table/base-table.vue

@@ -83,13 +83,19 @@
                   </div>
                 </slot>
               </template>
-              <template v-else-if="item.isTag">
+              <template v-else-if="item.isTag || item.isStringTag">
                 <template
                   v-if="!record[item.dataIndex as string] || (Array.isArray(record[item.dataIndex as string]) && record[item.dataIndex as string].length === 0)"
                 >
                   <slot :name="item.slotName" v-bind="{ record, rowIndex, column }"> - </slot>
                 </template>
-                <MsTagGroup v-else :tag-list="record[item.dataIndex as string]" type="primary" theme="outline" />
+                <MsTagGroup
+                  v-else
+                  :is-string-tag="item.isStringTag"
+                  :tag-list="record[item.dataIndex as string]"
+                  type="primary"
+                  theme="outline"
+                />
               </template>
               <template v-else-if="item.slotName === SpecialColumnEnum.OPERATION">
                 <slot name="operation" v-bind="{ record, rowIndex }" />

frontend/src/components/pure/ms-table/type.ts

@@ -27,6 +27,8 @@ export interface MsTableColumnData extends TableColumnData {
   disableTitle?: string;
   // 当展示tooltip时，是否是Tag
   isTag?: boolean;
+  // 为字符串Tag
+  isStringTag?: boolean;
   // editType
   editType?: ColumnEditTypeEnum;
   // 撤销删除的组件

frontend/src/components/pure/ms-table/useTable.ts

@@ -215,7 +215,7 @@ export default function useTableProps<T>(
         // debug 模式下打印属性
         if (propsRes.value.debug && import.meta.env.DEV) {
           // eslint-disable-next-line no-console
-          // console.log('Table propsRes: ', propsRes.value);
+          console.log('Table propsRes: ', propsRes.value);
         }
       }
     } else {

frontend/src/views/project-management/projectAndPermission/menuManagement/components/falseAlermRule.vue

@@ -1,5 +1,10 @@
 <template>
-  <MsCard has-breadcrumb>
+  <MsCard simple>
+    <div class="mb-4">
+      <div class="back-btn" @click="handleBack">
+        <icon-arrow-left />
+      </div>
+    </div>
     <div class="mb-4 flex items-center justify-between">
       <a-button type="primary" @click="showAddRule(undefined)">{{ t('project.menu.addFalseAlertRules') }}</a-button>
       <a-input-search
@@ -17,9 +22,6 @@
       v-on="propsEvent"
       @batch-action="handleTableBatch"
     >
-      <template #label="{ record }">
-        <MsTagGroup is-string-tag theme="outline" :tag-list="record.typeList"> </MsTagGroup>
-      </template>
       <template #operation="{ record }">
         <template v-if="!record.enable">
           <MsButton class="!mr-0" @click="handleEnableOrDisableProject(record.id)">{{ t('common.enable') }}</MsButton>
@@ -69,6 +71,7 @@
 </template>
 
 <script lang="ts" setup>
+  import { useRouter } from 'vue-router';
   import { Message, TableData } from '@arco-design/web-vue';
 
   import MsButton from '@/components/pure/ms-button/index.vue';
@@ -79,7 +82,6 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import { ActionsItem } from '@/components/pure/ms-table-more-action/types';
-  import MsTagGroup from '@/components/pure/ms-tag/ms-tag-group.vue';
   import MsBatchForm from '@/components/business/ms-batch-form/index.vue';
   import { FormItemModel } from '@/components/business/ms-batch-form/types';
 
@@ -95,12 +97,14 @@
   import { useAppStore } from '@/store';
 
   import { FakeTableListItem } from '@/models/projectManagement/menuManagement';
+  import { ProjectManagementRouteEnum } from '@/enums/routeEnum';
   import { TableKeyEnum } from '@/enums/tableEnum';
 
   type UserModalMode = 'create' | 'edit';
 
   const { t } = useI18n();
   const appStore = useAppStore();
+  const router = useRouter();
   const currentProjectId = computed(() => appStore.currentProjectId);
   const addVisible = ref(false);
   const addLoading = ref(false);
@@ -160,9 +164,8 @@
     },
     {
       title: 'project.menu.rule.label',
-      dataIndex: 'type',
+      dataIndex: 'typeList',
-      slotName: 'label',
+      isStringTag: true,
-      isTag: true,
       width: 146,
     },
     {
@@ -203,9 +206,10 @@
       selectable: true,
       noDisable: false,
       size: 'default',
+      debug: true,
     },
     (record: TableData) => {
-      record.typeList = record.type.split(',');
+      record.typeList = record.type ? record.type.split(',') : [];
       record.ruleResult = getRowRuleString(record);
       return record;
     }
@@ -221,6 +225,12 @@
     resetSelector();
   };
 
+  const handleBack = () => {
+    router.push({
+      name: ProjectManagementRouteEnum.PROJECT_MANAGEMENT_PERMISSION_MENU_MANAGEMENT,
+    });
+  };
+
   const handleDelete = (v: string | BatchActionQueryParams) => {
     openDeleteModal({
       title: t('project.menu.rule.deleteRule', { size: typeof v === 'string' ? 1 : v.currentSelectCount }),
@@ -443,3 +453,19 @@
     fetchData();
   });
 </script>
+
+<style lang="less" scoped>
+  .back-btn {
+    @apply flex cursor-pointer items-center rounded-full;
+
+    margin-right: 8px;
+    width: 20px;
+    height: 20px;
+    border: 1px solid #ffffff;
+    background: linear-gradient(90deg, rgb(var(--primary-9)) 3.36%, #ffffff 100%);
+    box-shadow: 0 0 7px rgb(15 0 78 / 9%);
+    .arco-icon {
+      color: rgb(var(--primary-5));
+    }
+  }
+</style>

frontend/src/views/project-management/projectAndPermission/menuManagement/locale/zh-CN.ts

@@ -87,4 +87,5 @@ export default {
   'project.menu.rule.enableRuleTip': '开启后，展示在规则切换列表',
   'project.menu.rule.deleteRule': '确认删除 {size} 条误报规则吗？',
   'project.menu.rule.deleteRuleTip': '删除后，仅对新执行的测试报告生效，请谨慎操作！',
+  'project.menu.rule.goBackMenu': '返回应用管理',
 };

frontend/src/views/project-management/projectAndPermission/menuManagement/menuManagement.vue

@@ -7,7 +7,14 @@
       </div>
     </a-tooltip>
   </div>
-  <MsBaseTable ref="tableRef" class="mt-[16px]" v-bind="propsRes" @expand="expandChange" v-on="propsEvent">
+  <MsBaseTable
+    ref="tableRef"
+    class="mt-[16px]"
+    v-bind="propsRes"
+    :expanded-keys="expandedKeys"
+    @expand="expandChange"
+    v-on="propsEvent"
+  >
     <template #module="{ record }">
       <div v-if="record.children">
         <MsIcon class="text-[var(--color-text-4)]" :type="getMenuIcon(record.module)" />
@@ -642,9 +649,19 @@
     return pool?.name;
   };
 
+  const initExpendKeys = async () => {
+    if (router.currentRoute.value.redirectedFrom) {
+      // 从误报规则跳转回来的
+      await expandChange({ module: MenuEnum.apiTest });
+    } else {
+      expandedKeys.value = [];
+    }
+  };
+
   onMounted(() => {
     setLoadListParams({ projectId: currentProjectId.value });
     fetchData();
+    initExpendKeys();
   });
   watch(currentProjectId, () => {
     fetchData();