style: 表格高度自适应

frontend/src/App.vue

@@ -24,7 +24,8 @@
   import { watchStyle, watchTheme, setFavicon } from '@/utils/theme';
   import { WorkbenchRouteEnum } from './enums/routeEnum';
   import { getPublicKeyRequest } from './api/modules/user';
-  // import MsEmpty from '@/components/pure/ms-empty/index.vue';
+  import MsEmpty from '@/components/pure/ms-empty/index.vue';
+  import { useEventListener, useWindowSize } from '@vueuse/core';
 
   const appStore = useAppStore();
   const userStore = useUserStore();
@@ -91,5 +92,12 @@
     if (!whiteList.includes(window.location.hash)) {
       await checkIsLogin();
     }
+    const { height } = useWindowSize();
+    appStore.innerHeight = height.value;
+  });
+  /** 屏幕大小改变时重新赋值innerHeight */
+  useEventListener(window, 'resize', () => {
+    const { height } = useWindowSize();
+    appStore.innerHeight = height.value;
   });
 </script>

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

@@ -714,5 +714,12 @@
   left: auto;
   .arco-drawer {
     box-shadow: -1px 0 4px 0 rgb(2 2 2 / 10%);
+    &-header {
+      .arco-drawer-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: var(--color-text-1);
+      }
+    }
   }
 }

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

@@ -92,6 +92,8 @@ export interface MsTableProps<T> {
   debug?: boolean;
   // 是否展示第一行的操作
   showFirstOperation?: boolean;
+  // 已经使用的高度
+  heightUsed?: number;
   [key: string]: any;
 }
 

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

@@ -1,11 +1,9 @@
 // 核心的封装方法，详细参数看文档  https://arco.design/vue/component/table
 // hook/table-props.ts
 
-import { ref } from 'vue';
+import { ref, watchEffect } from 'vue';
 import dayjs from 'dayjs';
 import { useAppStore, useTableStore } from '@/store';
-import { SpecialColumnEnum } from '@/enums/tableEnum';
-
 import type { TableData } from '@arco-design/web-vue';
 import type { TableQueryParams, CommonList } from '@/models/common';
 import type { MsTableProps, MsTableDataItem, MsTableColumn, MsTableErrorStatus } from './type';
@@ -37,7 +35,8 @@ export default function useTableProps<T>(
     bordered: true,
     showPagination: true,
     size: 'default',
-    scroll: { maxHeight: '800px', minWidth: '1600px', y: '600px' },
+    heightUsed: 294,
+    scroll: { x: 1400, y: appStore.innerHeight - 294 },
     checkable: true,
     loading: false,
     data: [],
@@ -272,6 +271,11 @@ export default function useTableProps<T>(
     },
   });
 
+  watchEffect(() => {
+    const { heightUsed } = propsRes.value;
+    propsRes.value.scroll = { ...propsRes.value.scroll, y: appStore.innerHeight - (heightUsed || 294) };
+  });
+
   return {
     propsRes,
     propsEvent,

frontend/src/store/modules/app/index.ts

@@ -47,6 +47,7 @@ const useAppStore = defineStore('app', {
     defaultThemeConfig,
     defaultLoginConfig,
     defaultPlatformConfig,
+    innerHeight: 0,
     pageConfig: {
       ...defaultThemeConfig,
       ...defaultLoginConfig,

frontend/src/store/modules/app/types.ts

@@ -32,6 +32,7 @@ export interface AppState {
   defaultLoginConfig: LoginConfig;
   defaultPlatformConfig: PlatformConfig;
   pageConfig: PageConfig;
+  innerHeight: number;
 }
 
 export interface UploadFileTaskState {

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

@@ -163,9 +163,7 @@
         loading.value = true;
         await createOrUpdateProjectByOrg({ id: props.currentProject?.id, ...form });
         Message.success(
-          isEdit.value
-            ? t('system.organization.updateOrganizationSuccess')
-            : t('system.organization.createOrganizationSuccess')
+          isEdit.value ? t('system.project.updateProjectSuccess') : t('system.project.createProjectSuccess')
         );
         handleCancel(true);
       } catch (error) {

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

@@ -81,6 +81,7 @@
     {
       title: 'system.organization.userName',
       slotName: 'name',
+      dataIndex: 'name',
       showTooltip: true,
       width: 200,
     },
@@ -98,8 +99,9 @@
   ];
 
   const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectMemberByProjectId, {
+    heightUsed: 240,
     columns: projectColumn,
-    scroll: { maxHeight: '700px', y: '650px' },
+    scroll: { x: '100%' },
     selectable: false,
     noDisable: false,
     pageSimple: true,

frontend/src/views/setting/organization/project/locale/en-US.ts

@@ -71,4 +71,6 @@ export default {
   'system.project.projectNameRequired': 'Project name cannot be empty',
   'system.project.createTip': 'After the project is enabled, it will be displayed in the project switching list',
   'system.project.affiliatedOrgRequired': 'Affiliated organization cannot be empty',
+  'system.project.createProjectSuccess': 'Create project success',
+  'system.project.updateProjectSuccess': 'Update project success',
 };

frontend/src/views/setting/organization/project/locale/zh-CN.ts

@@ -66,4 +66,6 @@ export default {
   'system.project.projectNameRequired': '项目名称不能为空',
   'system.project.createTip': '项目启用后，将展示在项目切换列表',
   'system.project.affiliatedOrgRequired': '所属组织不能为空',
+  'system.project.createProjectSuccess': '创建项目成功',
+  'system.project.updateProjectSuccess': '更新项目成功',
 };

frontend/src/views/setting/organization/project/orgProject.vue

@@ -149,7 +149,6 @@
       slotName: 'operation',
       dataIndex: 'operation',
       fixed: 'right',
-      width: 230,
     },
   ];
 

frontend/src/views/setting/system/organizationAndProject/components/addProjectModal.vue

@@ -163,9 +163,7 @@
         loading.value = true;
         await createOrUpdateProject({ id: props.currentProject?.id, ...form });
         Message.success(
-          isEdit.value
-            ? t('system.organization.updateOrganizationSuccess')
-            : t('system.organization.createOrganizationSuccess')
+          isEdit.value ? t('system.project.updateProjectSuccess') : t('system.project.createProjectSuccess')
         );
 
         handleCancel(true);

frontend/src/views/setting/system/organizationAndProject/components/projectDrawer.vue

@@ -72,7 +72,8 @@
 
   const { propsRes, propsEvent, loadList, setLoadListParams, setKeyword } = useTable(postProjectTableByOrgId, {
     columns: projectColumn,
-    scroll: { maxHeight: '700px', y: '650px' },
+    scroll: { x: '100%' },
+    heightUsed: 240,
     selectable: false,
     noDisable: false,
     pageSimple: true,

frontend/src/views/setting/system/organizationAndProject/components/userDrawer.vue

@@ -106,7 +106,8 @@
     postUserTableByOrgIdOrProjectId,
     {
       columns: projectColumn,
-      scroll: { maxHeight: '700px', y: '650px' },
+      scroll: { x: '100%' },
+      heightUsed: 240,
       selectable: false,
       noDisable: false,
       pageSimple: true,