feat(项目设置): 菜单管理前端页面

frontend/src/components/business/ms-user-group-comp/addUserModal.vue

@@ -2,7 +2,7 @@
   <a-modal
     v-model:visible="currentVisible"
     class="ms-modal-form ms-modal-medium"
-    text-align="start"
+    title-align="start"
     :ok-text="t('system.userGroup.add')"
     unmount-on-close
     @cancel="handleCancel(false)"

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

@@ -144,13 +144,13 @@
         </slot>
       </template>
       <template #expand-icon="{ expanded }">
-        <icon-down-circle v-if="expanded" />
+        <MsIcon v-if="!expanded" :size="8" type="icon-icon_right_outlined" class="text-[rgb(var(--primary-6))]" />
-        <icon-right-circle v-else />
+        <MsIcon v-else :size="8" class="text-[var(--color-text-4)]" type="icon-icon_down_outlined" />
       </template>
     </a-table>
     <div
-      class="mt-[16px] flex h-[32px] w-[100%] min-w-[952px] flex-row flex-nowrap items-center justify-end px-0"
+      class="mt-[16px] flex h-[32px] w-[100%] flex-row flex-nowrap items-center justify-end px-0"
-      :class="{ 'justify-between': showBatchAction }"
+      :class="{ 'justify-between': showBatchAction, 'min-w-[952px]': attrs.selectable }"
     >
       <batch-action
         v-if="showBatchAction"
@@ -226,7 +226,11 @@
   const selectTotal = computed(() => {
     const { selectorStatus } = props;
     if (selectorStatus === SelectAllEnum.CURRENT) {
-      return (attrs.msPagination as MsPaginationI)?.pageSize || appStore.pageSize;
+      const { pageSize, total } = attrs.msPagination as MsPaginationI;
+      if (pageSize > total) {
+        return total;
+      }
+      return pageSize;
     }
     return (attrs.msPagination as MsPaginationI)?.total || appStore.pageSize;
   });
@@ -456,4 +460,7 @@
   :deep(.arco-checkbox:hover .arco-checkbox-icon-hover::before) {
     background: none !important;
   }
+  :deep(.arco-table .arco-table-expand-btn) {
+    border-color: transparent;
+  }
 </style>

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

@@ -8,7 +8,6 @@ import type { TableData } from '@arco-design/web-vue';
 import type { TableQueryParams, CommonList } from '@/models/common';
 import { SelectAllEnum } from '@/enums/tableEnum';
 import type { MsTableProps, MsTableDataItem, MsTableColumn, MsTableErrorStatus, SetPaginationPrams } from './type';
-import { set } from 'nprogress';
 
 export interface Pagination {
   current: number;

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

@@ -29,6 +29,9 @@ export default {
     'menu.projectManagement': 'Project',
     'menu.projectManagement.fileManagement': 'File Management',
     'menu.featureTest.featureCase': 'Feature Case',
+    'meun.workstation': 'Workstation',
+    'menu.loadTest': 'Performance Test',
+    'menu.caseManagement': 'Feature Test',
     'menu.projectManagement.projectPermission': 'Project Permission',
     'menu.projectManagement.log': 'Log',
     'menu.settings': 'Settings',

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

@@ -24,6 +24,9 @@ export default {
     'menu.featureTest': '功能测试',
     'menu.apiTest': '接口测试',
     'menu.uiTest': 'UI测试',
+    'meun.workstation': '工作台',
+    'menu.loadTest': '性能测试',
+    'menu.caseManagement': '功能测试',
     'menu.performanceTest': '性能测试',
     'menu.projectManagement': '项目管理',
     'menu.projectManagement.log': '日志',

frontend/src/models/projectManagement/menuManagement.ts

@@ -4,6 +4,8 @@ export interface MenuTableListItem {
   module: string;
   moduleEnable: boolean;
   moduleDesc?: string;
+  children?: MenuTableListItem[];
+  isLeaf?: boolean;
 }
 
 export interface MenuTableListParams {

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

@@ -7,8 +7,8 @@
   </div>
   <MsBaseTable class="mt-[16px]" v-bind="propsRes" v-on="propsEvent">
     <template #module="{ record }">
-      <MsIcon :type="getMenuIcon(record.module)" />
+      <MsIcon class="text-[var(--color-text-4)]" :type="getMenuIcon(record.module)" />
-      <span class="ml-[4px]">{{ record.module }}</span>
+      <span class="ml-[4px]">{{ t(`menu.${record.module}`) }}</span>
     </template>
     <template #moduleEnable="{ record }">
       <a-switch v-model="record.moduleEnable" @change="handleMenuStatusChange(record)" />
@@ -57,30 +57,38 @@
       width: 150,
     },
   ];
-  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(postTabletList, {
+  const { propsRes, propsEvent, loadList, setLoadListParams } = useTable(
+    postTabletList,
+    {
       showPagination: false,
       columns,
       selectable: false,
       scroll: { x: '100%' },
       noDisable: true,
-  });
+      rowKey: 'module',
+    },
+    (item) => {
+      item = { ...item, children: [], isLeaf: false };
+      return item;
+    }
+  );
 
   const getMenuIcon = (type: MenuEnum) => {
     switch (type) {
       case MenuEnum.workstation:
         return 'icon-icon_pc_filled';
       case MenuEnum.testPlan:
-        return 'icon-icon_test_plan_filled';
+        return 'icon-icon_test-tracking_filled';
       case MenuEnum.bugManagement:
         return 'icon-icon_defect';
       case MenuEnum.caseManagement:
-        return 'icon_functional_testing';
+        return 'icon-icon_functional_testing';
       case MenuEnum.apiTest:
         return 'icon-icon_api-test-filled';
       case MenuEnum.uiTest:
         return 'icon-icon_ui-test-filled';
       default:
-        return 'icon_performance-test-filled';
+        return 'icon-icon_performance-test-filled';
     }
   };
 

frontend/src/views/project-management/projectAndPermission/userGroup/addUserModal.vue

@@ -9,7 +9,7 @@
   >
     <template #title> {{ t('system.organization.addMember') }} </template>
     <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" :model="form" layout="vertical">
         <a-form-item
           field="name"
           :label="t('system.organization.member')"

frontend/src/views/setting/organization/project/components/addUserModal.vue

@@ -9,7 +9,7 @@
   >
     <template #title> {{ t('system.organization.addMember') }} </template>
     <div class="form">
-      <a-form ref="formRef" :model="form" size="large" :style="{ width: '600px' }" layout="vertical">
+      <a-form ref="formRef" class="rounded-[4px]" :model="form" layout="vertical">
         <a-form-item
           field="name"
           :label="t('system.organization.member')"

frontend/src/views/setting/system/pluginManager/components/tableExpand.vue

@@ -7,13 +7,18 @@
     }"
   >
     <div class="ms-scroll">
-      <div v-for="(item, index) in record.pluginForms" :key="item.id" class="ms-self"
+      <div v-for="(item, index) in record.pluginForms" :key="item.id" class="ms-self">
-        ><span class="circle text-xs leading-[16px]"> {{ index + 1 }} </span
+        <span class="circle text-xs leading-[16px]"> {{ index + 1 }} </span>
-        ><span class="cursor-pointer text-[rgb(var(--primary-5))]" @click="emit('MessageEvent', record, item)">{{
+        <span class="cursor-pointer text-[rgb(var(--primary-5))]" @click="emit('MessageEvent', record, item)">{{
           item.name
-        }}</span></div
+        }}</span>
+        <span
+          class="ml-[150px] cursor-pointer text-[rgb(var(--primary-5))]"
+          @click="emit('MessageEvent', record, item)"
+          >{{ item.name }}</span
         >
       </div>
+    </div>
   </a-scrollbar>
 </template>