web/console/src/components/EntityDisplay/README.md
统一的实体显示组件，支持用户和群组信息的显示。
<template>
<!-- 显示用户头像 -->
<EntityDisplay type="user" :id="userId" mode="avatar" />
<!-- 显示群组名称 -->
<EntityDisplay type="group" :id="groupId" mode="name" />
<!-- 完整显示（头像 + 名称） -->
<EntityDisplay type="user" :id="userId" mode="full" />
</template>
<script setup lang="ts">
import EntityDisplay from '@/components/EntityDisplay/index.vue'
const userId = ref(123)
const groupId = ref(456)
</script>
import { useEntityInfo } from '@/hooks/useEntityInfo'
import { ENTITY_TYPE } from '@/types/entity'
const { getEntityInfo, getBatchEntityInfo } = useEntityInfo()
// 获取用户信息
const userInfo = await getEntityInfo(ENTITY_TYPE.USER, userId)
// 获取群组信息
const groupInfo = await getEntityInfo(ENTITY_TYPE.GROUP, groupId)
// 批量获取
const entities = await getBatchEntityInfo([
{ type: ENTITY_TYPE.USER, id: 1 },
{ type: ENTITY_TYPE.GROUP, id: 2 }
])
为了保持向后兼容性，EntityDisplay 组件内部提供了兼容性组件：
<template>
<!-- 使用统一的 EntityDisplay 组件 -->
<EntityDisplay type="user" :entity-id="userId" mode="avatar" />
<EntityDisplay type="group" :entity-id="groupId" mode="name" />
</template>
<script setup lang="ts">
import EntityDisplay from '@/components/EntityDisplay/index.vue'
</script>
新的统一组件提供了更好的性能和一致性。
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | 'user' | 'group' | - | 实体类型 |
| id | number | string | - | 实体ID |
| mode | 'avatar' | 'name' | 'full' | 'avatar' | 显示模式 |
| avatarSize | number | string | 20 | 头像大小 |
| avatarShape | 'circle' | 'square' | 'circle' | 头像形状 |
| showLoading | boolean | true | 是否显示加载状态 |
| defaultAvatar | string | '' | 自定义默认头像路径 |
import { useEntityInfo } from '@/hooks/useEntityInfo'
import { ENTITY_TYPE } from '@/types/entity'
const {
loading,
getEntityInfo,
getBatchEntityInfo,
clearEntityCache
} = useEntityInfo()
// 获取用户信息
const userInfo = await getEntityInfo(ENTITY_TYPE.USER, 123)
// 获取群组信息
const groupInfo = await getEntityInfo(ENTITY_TYPE.GROUP, 456)
// 批量获取
const users = await getBatchEntityInfo(ENTITY_TYPE.USER, [123, 456])
// 原有的 Hook 仍然可用，但建议迁移到统一 Hook
import { useUserInfo } from '@/hooks/useUserInfo'
import { useGroupInfo } from '@/hooks/useGroupInfo'
const { getUserInfo } = useUserInfo()
const { getGroupInfo } = useGroupInfo()
// 实体类型
export type EntityType = 'user' | 'group'
// 用户信息
export interface UserInfo {
user_id: number
nickname: string
name: string
avatar: string
email: string
mobile: string
role: number
status: number
departments: unknown[]
created_time: number
value: number
label: string
}
// 群组信息
export interface GroupInfo {
group_id: number
group_name: string
sort: number
value: number
label: string
avatar?: string
}
<!-- 旧的写法 -->
<UserDisplay
:user-id="123"
mode="full"
:avatar-size="32"
/>
<!-- 新的写法 -->
<EntityDisplay
type="user"
:entity-id="123"
mode="full"
:avatar-size="32"
/>
<!-- 旧的写法 -->
<GroupDisplay
:group-id="456"
mode="compact"
:show-avatar="false"
/>
<!-- 新的写法 -->
<EntityDisplay
type="group"
:entity-id="456"
mode="compact"
:show-avatar="false"
/>
<script setup lang="ts">
// 旧的写法
import { useUserInfo } from '@/hooks/useUserInfo'
import { useGroupInfo } from '@/hooks/useGroupInfo'
const { loading: userLoading, getUserInfo } = useUserInfo()
const { loading: groupLoading, getGroupInfo } = useGroupInfo()
// 新的写法
import { useEntityInfo } from '@/hooks/useEntityInfo'
import { ENTITY_TYPE } from '@/types/entity'
const { loading, getEntityInfo } = useEntityInfo()
// 获取用户信息
const userInfo = await getEntityInfo(ENTITY_TYPE.USER, 123)
// 获取群组信息
const groupInfo = await getEntityInfo(ENTITY_TYPE.GROUP, 456)
</script>
EntityDisplay 组件