feat: tagGroup

ui/src/components/tag-group/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="tag-group" v-if="props.tags.length">
+    <el-tag class="default-tag" style="max-width: 100%;">
+      <span class="ellipsis" style="max-width: 100%;">{{ props.tags[0] }}</span>
+    </el-tag>
+    <el-tooltip effect="light">
+      <el-tag class="info-tag ml-4" v-if="props.tags?.length > 1">
+        +{{ props.tags?.length - 1 }}
+      </el-tag>
+      <template #content>
+        <el-tag v-for="item in props.tags.slice(1)" :key="item" class="default-tag mr-4">
+          {{ item }}
+        </el-tag>
+      </template>
+    </el-tooltip>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  tags: string[],
+}>()
+
+</script>
+
+<style lang="scss" scoped>
+.tag-group {
+  :deep(.el-tag__content) {
+    width: 100%;
+  }
+}
+</style>

ui/src/views/system-chat-user/group/index.vue

@@ -14,8 +14,7 @@
         <div class="user-left border-r p-16">
           <div class="user-left_title flex-between">
             <h4 class="medium">{{ $t('views.chatUser.group.title') }}</h4>
-            <el-tooltip effect="dark"
+            <el-tooltip effect="dark" :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
-                        :content="`${$t('common.create')}${$t('views.chatUser.group.title')}`"
               placement="top">
               <el-button type="primary" text @click="createOrUpdate()">
                 <AppIcon iconName="app-copy"></AppIcon>
@@ -24,15 +23,14 @@
           </div>
 
           <div class="p-8">
-            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search"
+            <el-input v-model="filterText" :placeholder="$t('common.search')" prefix-icon="Search" clearable />
-                      clearable/>
           </div>
           <div class="list-height-left">
             <el-scrollbar v-loading="loading">
               <common-list :data="filterList" @click="clickUserGroup" :default-active="current?.id">
                 <template #default="{ row }">
                   <div class="flex-between">
-                    <span>{{ row.name }}</span>
+                    <span class="ellipsis" style="max-width: initial;">{{ row.name }}</span>
                     <el-dropdown :teleported="false">
                       <el-button text>
                         <el-icon class="color-secondary">
@@ -71,8 +69,7 @@
           <div class="flex align-center">
             <h4 class="medium">{{ current?.name }}</h4>
             <el-divider direction="vertical" class="mr-8 ml-8" />
-            <AppIcon iconName="app-wordspace" style="font-size: 16px"
+            <AppIcon iconName="app-wordspace" style="font-size: 16px" class="color-input-placeholder"></AppIcon>
-                     class="color-input-placeholder"></AppIcon>
             <span class="color-input-placeholder ml-4">
               {{ paginationConfig.total }}
             </span>
@@ -91,19 +88,15 @@
               <el-select class="complex-search__left" v-model="searchType" style="width: 120px">
                 <el-option :label="$t('views.login.loginForm.username.label')" value="username" />
               </el-select>
-              <el-input v-if="searchType === 'username'" v-model="searchForm.username"
+              <el-input v-if="searchType === 'username'" v-model="searchForm.username" @change="getList"
-                        @change="getList"
+                :placeholder="$t('common.searchBar.placeholder')" style="width: 220px" clearable />
-                        :placeholder="$t('common.searchBar.placeholder')" style="width: 220px"
-                        clearable/>
             </div>
           </div>
 
-          <app-table :data="tableData" :pagination-config="paginationConfig"
+          <app-table :data="tableData" :pagination-config="paginationConfig" @sizeChange="handleSizeChange"
-                     @sizeChange="handleSizeChange"
             @changePage="getList" @selection-change="handleSelectionChange">
             <el-table-column type="selection" width="55" />
-            <el-table-column prop="nick_name"
+            <el-table-column prop="nick_name" :label="$t('views.userManage.userForm.nick_name.label')" />
-                             :label="$t('views.userManage.userForm.nick_name.label')"/>
             <el-table-column prop="username" :label="$t('views.login.loginForm.username.label')" />
             <el-table-column prop="source" :label="$t('views.userManage.source.label')">
               <template #default="{ row }">
@@ -124,8 +117,7 @@
             </el-table-column>
             <el-table-column :label="$t('common.operation')" width="100" fixed="right">
               <template #default="{ row }">
-                <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`"
+                <el-tooltip effect="dark" :content="`${$t('views.role.member.delete.button')}`" placement="top">
-                            placement="top">
                   <el-button type="primary" text @click.stop="handleDeleteUser(row)">
                     <el-icon>
                       <EditPen />

ui/src/views/system-chat-user/user-manage/index.vue

@@ -69,10 +69,9 @@
             {{ row.phone || '-' }}
           </template>
         </el-table-column>
-        <!-- TODO -->
         <el-table-column prop="user_group_names" :label="$t('views.chatUser.group.title')">
           <template #default="{ row }">
-            {{ row.user_group_names || '-' }}
+            <TagGroup :tags="row.user_group_names" />
           </template>
         </el-table-column>
         <el-table-column prop="source" :label="$t('views.userManage.source.label')">
@@ -153,6 +152,7 @@ import userManageApi from '@/api/system/chat-user'
 import { datetimeFormat } from '@/utils/time'
 import { MsgSuccess, MsgConfirm } from '@/utils/message'
 import { t } from '@/locales'
+import TagGroup from '@/components/tag-group/index.vue'
 import iconMap from '@/components/app-icon/icons/common'
 import type { ChatUserItem } from '@/api/type/systemChatUser'
 import SystemGroupApi from '@/api/system/user-group'

ui/src/views/workspace/index.vue

@@ -20,7 +20,7 @@
               <common-list :data="filterList" @click="clickWorkspace" :default-active="currentWorkspace?.id">
                 <template #default="{ row }">
                   <div class="flex-between">
-                    <span>{{ row.name }}</span>
+                    <span class="ellipsis" style="max-width: initial;">{{ row.name }}</span>
                     <el-dropdown :teleported="false">
                       <el-button text>
                         <el-icon class="color-secondary">