Profile chip

React 玩家资料条组件：头像、名字、标有经验值的经验条与等级，排在同一块斜切块上。

安装

terminal

# once per project: where @zzzui items come frompnpm dlx shadcn@latest registry add @zzzui=https://zzzui.catforest.dev/r/{name}.jsonpnpm dlx shadcn@latest add @zzzui/profile-chip

示例

获得经验

profile-chip-basic.tsx

import { useState } from "react";import { Avatar, AvatarFallback } from "@/components/zero/avatar";import { Button } from "@/components/zero/button";import { ProfileChip } from "@/components/zero/profile-chip";export default function ProfileChipBasic() {  const [xp, setXp] = useState(685);  const [level, setLevel] = useState(8);  const max = 790;  return (    <div className="grid justify-items-start gap-5">      <ProfileChip        name="Wren"        level={level}        xp={xp}        xpMax={max}        avatar={          <Avatar size="sm">            <AvatarFallback>WR</AvatarFallback>          </Avatar>        }      />      <Button        size="sm"        variant="secondary"        onClick={() => {          if (xp + 60 >= max) {            setLevel((l) => l + 1);            setXp(xp + 60 - max);          } else setXp(xp + 60);        }}      >        Deliver (+60 xp)      </Button>    </div>  );}

行为

一块固定高度的斜切块，从左到右依次是：头像；名字及其下方的细经验条（「稀有」稀有度的蓝色，条上标有经验值）；大号斜体的等级数字，下方标有 LEVEL。经验条按慢速时长缓动到新的长度。

读屏软件读到的是一句完整的话，而非各个部分：「Wren, level 8, 685 of 790 experience」。

属性

ProfileChip

属性	类型	默认值	说明
name	string	—	玩家名。
level	number	—	等级。
xp / xpMax	number	—	当前经验值，以及本级升级所需的总经验值。
avatar	ReactNode	—	一个 Avatar。
label	(name, level, xp, xpMax) => string	"{name}, level {level}, {xp} of {xpMax} experience"	读屏软件读出的整句，代替组件的各个部分。