refactor: 重构标签组件&系统用户标签展示

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

@@ -68,7 +68,7 @@
             </div>
           </template>
           <template #cell="{ column, record, rowIndex }">
-            <div class="flex flex-row flex-nowrap items-center">
+            <div :class="{ 'flex flex-row items-center': !item.isTag }">
               <template v-if="item.dataIndex === SpecialColumnEnum.ENABLE">
                 <slot name="enable" v-bind="{ record }">
                   <div v-if="record.enable" class="flex flex-row flex-nowrap items-center gap-[2px]">
@@ -84,11 +84,11 @@
                 </slot>
               </template>
               <template v-else-if="item.isTag">
-                <span
+                <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>
-                </span>
+                </template>
                 <MsTagGroup v-else :tag-list="record[item.dataIndex as string]" type="primary" theme="outline" />
               </template>
               <template v-else-if="item.slotName === SpecialColumnEnum.OPERATION">

frontend/src/components/pure/ms-tag/ms-tag-group.vue

@@ -1,14 +1,14 @@
 <template>
-  <div class="flex min-h-[22px] flex-row">
-    <MsTag v-for="tag of showTagList" :key="tag.id" v-bind="attrs">
-      {{ props.isStringTag ? tag : tag[props.nameKey] }}
-    </MsTag>
-    <a-tooltip :content="tagsTooltip">
-      <MsTag v-if="props.tagList.length > props.showNum" v-bind="attrs">
+  <a-tooltip :content="tagsTooltip">
+    <div class="flex max-w-[440px] flex-row">
+      <MsTag v-for="tag of showTagList" :key="tag.id" :width="getTagWidth(tag)" v-bind="attrs">
+        {{ props.isStringTag ? tag : tag[props.nameKey] }}
+      </MsTag>
+      <MsTag v-if="props.tagList.length > props.showNum" :width="numberTagWidth" v-bind="attrs">
         +{{ props.tagList.length - props.showNum }}</MsTag
       >
-    </a-tooltip>
-  </div>
+    </div>
+  </a-tooltip>
 </template>
 
 <script setup lang="ts">
@@ -42,6 +42,18 @@
   const tagsTooltip = computed(() => {
     return filterTagList.value.map((e: any) => (props.isStringTag ? e : e[props.nameKey])).join('，');
   });
+
+  const getTagWidth = (tag: { [x: string]: any }) => {
+    const tagStr = props.isStringTag ? tag : tag[props.nameKey];
+    const tagWidth = tagStr.length;
+    // 16个中文字符
+    return tagWidth < 16 ? tagWidth : 16;
+  };
+
+  const numberTagWidth = computed(() => {
+    const numberStr = `${props.tagList.length - props.showNum}`;
+    return numberStr.length + 4;
+  });
 </script>
 
 <style scoped lang="less"></style>

frontend/src/components/pure/ms-tag/ms-tag.vue

@@ -3,9 +3,14 @@
     v-bind="attrs"
     :type="props.type"
     defer
-    :style="{ ...typeStyle, 'margin-right': tagMargin, 'max-width': '144px' }"
+    :style="{
+      ...typeStyle,
+      'margin-right': tagMargin,
+      'min-width': props.width && `${props.width}ch`,
+      'max-width: 144px': !props.width,
+    }"
     :size="props.size"
-    class="one-line-text inline-block"
+    class="inline-block"
   >
     <slot name="icon"></slot>
     <slot></slot>
@@ -26,6 +31,7 @@
       size?: Size; // tag尺寸
       theme?: Theme; // tag主题
       selfStyle?: any; // 自定义样式
+      width?: number; // tag宽度,不传入时绑定max-width
     }>(),
     {
       type: 'default',

frontend/src/layout/page-layout.vue

@@ -3,6 +3,7 @@
     <transition name="fade" mode="out-in" appear>
       <!-- transition内必须有且只有一个根元素，不然会导致二级路由的组件无法渲染 -->
       <div v-show="true" class="page-content">
+        <!-- TODO 实验性组件，以后优化 -->
         <Suspense v-if="!route.meta.isCache">
           <component :is="Component" :key="route.fullPath" />
         </Suspense>

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

@@ -193,7 +193,6 @@
   import useTable from '@/components/pure/ms-table/useTable';
   import MsTableMoreAction from '@/components/pure/ms-table-more-action/index.vue';
   import type { ActionsItem } from '@/components/pure/ms-table-more-action/types';
-  import MsTagGroup from '@/components/pure/ms-tag/ms-tag-group.vue';
   import MsUpload from '@/components/pure/ms-upload/index.vue';
   import MsBatchForm from '@/components/business/ms-batch-form/index.vue';
   import type { FormItemModel, MsBatchFormInstance } from '@/components/business/ms-batch-form/types';
@@ -245,11 +244,13 @@
       title: 'system.user.tableColumnOrg',
       dataIndex: 'organizationList',
       isTag: true,
+      width: 300,
     },
     {
       title: 'system.user.tableColumnUserGroup',
       isTag: true,
       dataIndex: 'userRoleList',
+      width: 300,
     },
     {
       title: 'system.user.tableColumnStatus',
@@ -265,7 +266,6 @@
     },
   ];
   const tableStore = useTableStore();
-  tableStore.initColumn(TableKeyEnum.SYSTEM_USER, columns, 'drawer');
   const { propsRes, propsEvent, loadList, setKeyword, resetSelector } = useTable(
     getUserList,
     {
@@ -878,6 +878,7 @@
   function downLoadUserTemplate() {
     window.open('/templates/user_import.xlsx', '_blank');
   }
+  await tableStore.initColumn(TableKeyEnum.SYSTEM_USER, columns, 'drawer');
 </script>
 
 <style lang="less" scoped>