feat: 表格tableTag标签列根据列计算最大宽度&调整进入组织样式

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

@@ -66,7 +66,7 @@
         <a-table-column
           v-for="(item, idx) in currentColumns"
           :key="idx"
-          :width="item.isTag || item.isStringTag ? item.width || 360 : item.width"
+          :width="item.isTag || item.isStringTag ? columnLastWidthMap[item.dataIndex as string] : item.width"
           :align="item.align"
           :fixed="item.fixed"
           :sortable="item.sortable"
@@ -509,6 +509,71 @@
     }
   );
 
+  const columnLastWidthMap = ref<Record<string, any>>({});
+
+  // 获取单个标签的宽度
+  const getTagWidth = (tag: Record<string, any>, lastText: string) => {
+    const maxTagWidth = 144; // 单个标签最大宽度
+    const spanPadding = 8; // 标签内边距
+    const spanBorder = 2; // 标签边框
+    const marginRight = 4; // 标签之间的间距
+
+    const el = document.createElement('div');
+    el.style.visibility = 'hidden';
+    el.style.position = 'absolute';
+    el.style.fontSize = '12px';
+    // 最后一个标签显示为 +n，按照+n的宽度来计算
+    el.textContent = lastText || tag.name || tag;
+
+    document.body.appendChild(el);
+    let width = el.offsetWidth + spanPadding * 2 + spanBorder;
+
+    // 衡量宽度后将元素移除
+    document.body.removeChild(el);
+    width = width > maxTagWidth ? maxTagWidth + marginRight : width + marginRight;
+    return width;
+  };
+
+  // 获取所有行里边对应列标签宽度总和
+  const getRowTagTotalWidth = (tags: TableData[]) => {
+    const maxShowTagCount = 3; // 包含数字标签最多展示3个
+    const tablePadding = 24; // 表单元格内边距总和
+
+    const tagArr = tags.length > maxShowTagCount ? tags.slice(0, maxShowTagCount) : tags;
+    const totalWidth = tagArr.reduce((acc, tag, index) => {
+      const lastText = index === maxShowTagCount - 1 ? `+${tags.length - maxShowTagCount - 1}` : '';
+      const width = getTagWidth(tag, lastText);
+      return acc + width;
+    }, 0);
+
+    return totalWidth + tablePadding;
+  };
+
+  // 求总和里边最大宽度作为标签列宽
+  const getMaxRowTagWidth = (rows: TableData[], dataIndex: string) => {
+    const allTags = ((rows as TableData) || []).map((row: TableData) => row[dataIndex] || []);
+
+    const rowWidths = (allTags || []).map((tags: any) => {
+      return getRowTagTotalWidth(tags);
+    });
+    // 确保返回非负值
+    return Math.max(...rowWidths, 0);
+  };
+
+  watch(
+    () => attrs.data,
+    (val) => {
+      if (val) {
+        currentColumns.value.forEach((column) => {
+          const dataIndex = column.dataIndex as string;
+          if (column.isTag || column.isStringTag) {
+            columnLastWidthMap.value[dataIndex] = getMaxRowTagWidth((val as TableData[]) || [], dataIndex);
+          }
+        });
+      }
+    }
+  );
+
   function handleRadioChange(val: boolean, record: TableData) {
     if (val) {
       selectedKey.value = record[rowKey as string];

frontend/src/views/project-management/projectAndPermission/member/components/memberTable.vue

@@ -38,7 +38,7 @@
       v-on="propsEvent"
       @batch-action="handleTableBatch"
     >
-      <template #userRole="{ record }">
+      <template #userRoles="{ record }">
         <MsTagGroup
           v-if="!record.showUserSelect"
           :tag-list="record.userRoles || []"
@@ -169,9 +169,10 @@
     },
     {
       title: 'project.member.tableColumnUserGroup',
-      slotName: 'userRole',
+      slotName: 'userRoles',
-      dataIndex: 'userRoleIdNameMap',
+      dataIndex: 'userRoles',
       showDrag: true,
+      isTag: true,
       width: 300,
     },
     {

frontend/src/views/setting/organization/member/index.vue

@@ -216,6 +216,7 @@
       dataIndex: 'projectIdNameMap',
       showInTable: true,
       showDrag: true,
+      isTag: true,
     },
     {
       title: 'organization.member.tableColunmUsergroup',
@@ -223,6 +224,7 @@
       dataIndex: 'userRoleIdNameMap',
       showInTable: true,
       showDrag: true,
+      isTag: true,
     },
     {
       title: 'organization.member.tableColunmStatus',

frontend/src/views/setting/system/authorizedManagement/locale/en-US.ts

@@ -6,7 +6,7 @@ export default {
   'system.authorized.authorizedVersion': 'The authorized version',
   'system.authorized.authorizationsCount': 'Number of authorizations',
   'system.authorized.authorizationStatus': 'Authorization status',
-  'system.authorized.authorityChecking': 'Valid License',
+  'system.authorized.authorityChecking': 'Import License',
   'system.authorized.valid': 'valid',
   'system.authorized.invalid': 'invalid',
   'system.authorized.failure': 'failure',

frontend/src/views/setting/system/authorizedManagement/locale/zh-CN.ts

@@ -6,7 +6,7 @@ export default {
   'system.authorized.authorizedVersion': '授权版本',
   'system.authorized.authorizationsCount': '授权数量',
   'system.authorized.authorizationStatus': '授权状态',
-  'system.authorized.authorityChecking': '授权验证',
+  'system.authorized.authorityChecking': '导入License',
   'system.authorized.valid': '有效',
   'system.authorized.invalid': '无效',
   'system.authorized.failure': '失败',

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

@@ -144,6 +144,16 @@
     ])
   );
 
+  const operationWidth = computed(() => {
+    if (hasOperationPermission.value) {
+      return 250;
+    }
+    if (hasAnyPermission(['SYSTEM_ORGANIZATION_PROJECT:READ+RECOVER'])) {
+      return 100;
+    }
+    return 50;
+  });
+
   const organizationColumns: MsTableColumn = [
     {
       title: 'system.organization.ID',
@@ -200,7 +210,7 @@
       slotName: 'operation',
       dataIndex: 'operation',
       fixed: 'right',
-      width: hasOperationPermission.value ? 250 : 50,
+      width: operationWidth.value,
     },
   ];
 

frontend/src/views/setting/system/user/index.vue

@@ -377,6 +377,7 @@
       title: 'system.user.tableColumnUserGroup',
       dataIndex: 'userRoleList',
       slotName: 'userGroup',
+      isTag: true,
       showDrag: true,
       width: 300,
     },