Preview Updated 2026-05-10

PresenceAvatars 在线用户行

多人协作场景下显示在线用户的头像行；头像 ring 颜色按 id 哈希，自己有更粗 ring，away 半透明，溢出 +N 折叠。

English translation pending This page hasn't been translated yet — falling back to Chinese. PRs welcome on GitHub.

基础用法

users 数组每项 { id, name, avatar?, color?, self?, away? }。超过 max 的合并成 +N。

背景视口

我

src/App.vue

<script setup lang="ts">
import { CfPresenceAvatars, type PresenceUser } from '@chufix-design/vue';

const users: PresenceUser[] = [
  { id: 'me', name: '我', self: true },
  { id: 'u1', name: 'Alice' },
  { id: 'u2', name: 'Bo' },
  { id: 'u3', name: 'Chen Qi' },
  { id: 'u4', name: 'Diana', away: true },
  { id: 'u5', name: 'Eric' },
  { id: 'u6', name: 'Fang' },
  { id: 'u7', name: 'Gina' },
];
</script>
<template>
  <CfPresenceAvatars :users="users" :max="5" />
</template>

<script setup>
import { CfPresenceAvatars } from '@chufix-design/vue';

const users= [
  { id: 'me', name: '我', self: true },
  { id: 'u1', name: 'Alice' },
  { id: 'u2', name: 'Bo' },
  { id: 'u3', name: 'Chen Qi' },
  { id: 'u4', name: 'Diana', away: true },
  { id: 'u5', name: 'Eric' },
  { id: 'u6', name: 'Fang' },
  { id: 'u7', name: 'Gina' },
];
</script>
<template>
  <CfPresenceAvatars :users="users" :max="5" />
</template>

import { CfPresenceAvatars } from '@chufix-design/react';

export default function Demo() {
  const users: PresenceUser[] = [
    { id: 'me', name: '我', self: true },
    { id: 'u1', name: 'Alice' },
    { id: 'u2', name: 'Bo' },
    { id: 'u3', name: 'Chen Qi' },
    { id: 'u4', name: 'Diana', away: true },
    { id: 'u5', name: 'Eric' },
    { id: 'u6', name: 'Fang' },
    { id: 'u7', name: 'Gina' },
  ];
  return (
    <>
      <CfPresenceAvatars users={users} max={5} />
    </>
  );
}

import { CfPresenceAvatars } from '@chufix-design/react';

export default function Demo() {
  const users= [
    { id: 'me', name: '我', self: true },
    { id: 'u1', name: 'Alice' },
    { id: 'u2', name: 'Bo' },
    { id: 'u3', name: 'Chen Qi' },
    { id: 'u4', name: 'Diana', away: true },
    { id: 'u5', name: 'Eric' },
    { id: 'u6', name: 'Fang' },
    { id: 'u7', name: 'Gina' },
  ];
  return (
    <>
      <CfPresenceAvatars users={users} max={5} />
    </>
  );
}

API

属性	类型	默认	说明
`users`	`PresenceUser[]`	—
`max`	`number`	`5`	超出折叠为 +N
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`showSelfFirst`	`boolean`	`true`	把 self 排在前