[stdf]Update Avatar compoent, demo and documents.

demo/src/lib/symbol/ri-svelte-line.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.8001 3.77035C17.9455 0.859147 14.082 0.00263458 11.1708 1.85727L6.11044 5.08107C3.23141 6.91521 2.36191 10.714 4.13686 13.6135C2.93471 15.5852 2.87555 18.1496 4.20064 20.2296C6.05528 23.1408 9.91876 23.9973 12.83 22.1427L17.8903 18.9189C20.7693 17.0847 21.6388 13.2859 19.8639 10.3865C21.0656 8.41543 21.1254 5.85071 19.8001 3.77035ZM18.448 8.77425C17.6282 8.11539 16.6628 7.68286 15.6505 7.49851C15.6882 7.26497 15.6437 7.01723 15.5066 6.80202C15.2099 6.33623 14.5917 6.19918 14.1259 6.49593L9.06558 9.71973C8.59979 10.0165 8.46275 10.6346 8.75949 11.1004C9.05623 11.5662 9.67439 11.7033 10.1402 11.4065L12.2487 10.0633C14.2283 8.8021 16.8554 9.38453 18.1166 11.3641C19.3778 13.3438 18.7953 15.9709 16.8157 17.2321L11.7554 20.4559C9.77574 21.717 7.14858 21.1346 5.88742 19.155C5.11002 17.9347 5.03292 16.4671 5.55276 15.2257C6.37258 15.8846 7.33791 16.3171 8.35026 16.5014C8.31252 16.735 8.35701 16.9827 8.49412 17.1979C8.79086 17.6637 9.40902 17.8008 9.87481 17.504L14.9352 14.2802C15.401 13.9835 15.538 13.3653 15.2413 12.8995C14.9445 12.4337 14.3264 12.2967 13.8606 12.5934L11.7521 13.9367C9.77247 15.1978 7.1453 14.6154 5.88415 12.6358C4.62299 10.6562 5.20542 8.02901 7.18504 6.76786L12.2454 3.54406C14.225 2.2829 16.8522 2.86533 18.1133 4.84495C18.8906 6.06498 18.9681 7.5324 18.448 8.77425Z"></path></svg>

demo/src/routes/en_US/avatar/+page.svelte

@@ -1,6 +1,6 @@
 <!-- Avatar Demo -->
 <script>
-	import { Avatar, Avatars, Divider } from '../../../../../packages/stdf/components';
+	import { Avatar, Avatars, Divider, Icon } from '../../../../../packages/stdf/components';
 
 	const icons = [
 		{ name: 'ri-aliens-fill', theme: true, top: -1, size: 16 },
@@ -9,21 +9,22 @@
 		{ name: 'ri-emotion-line', theme: true, top: -1, size: 46 },
 	];
 
-	const data = [
-		{ image: '/assets/images/dota_火女.png' },
-		{ image: '/assets/images/dota_火枪.png' },
-		{ image: '/assets/images/dota_小牛.png' },
-		{ image: '/assets/images/wall_1.jpg' },
-		{ image: '/assets/images/dota_斯温.png' },
-		{ image: '/assets/images/dota_水人.png' },
-		{ image: '/assets/images/wall_2.jpg' },
-		{ image: '/assets/images/wall_3.jpg' },
-		{ image: '/assets/images/wall_4.jpg' },
-		{ image: '/assets/images/avatar_1.jpg' },
-		{ image: '/assets/images/dota_火枪.png' },
-		{ image: '/assets/images/dota_小牛.png' },
-		{ image: '/assets/images/dota_斯温.png' },
+	const imgNames = [
+		'dota_火女.png',
+		'dota_火枪.png',
+		'dota_小牛.png',
+		'wall_1.jpg',
+		'dota_斯温.png',
+		'dota_水人.png',
+		'wall_2.jpg',
+		'wall_3.jpg',
+		'wall_4.jpg',
+		'avatar_1.jpg',
+		'dota_火枪.png',
+		'dota_小牛.png',
+		'dota_斯温.png',
 	];
+	const data = imgNames.map(name => ({ image: `/assets/images/${name}` }));
 </script>
 
 <div class="py-8 px-4">
@@ -121,5 +122,16 @@
 	<Avatars {data} top="add" />
 
 	<div class="font-bold mt-6 mb-2">Do not show top layer</div>
-	<Avatars {data} top="none" />
+	<Avatars {data} top={null} />
+
+	<div class="font-bold mt-6 mb-2">Custom top layer</div>
+	<Avatars {data}>
+		{#snippet top()}
+			<button class="bg-primary-200 dark:bg-dark-200 flex justify-center overflow-hidden relative w-12 h-12 rounded-full">
+				<div class="flex justify-center items-center w-full h-full text-primary-950 dark:text-dark-950">
+					<Icon name="ri-svelte-line" />
+				</div>
+			</button>
+		{/snippet}
+	</Avatars>
 </div>

demo/src/routes/zh_CN/avatar/+page.svelte

@@ -1,6 +1,6 @@
 <!-- Avatar Demo -->
 <script>
-	import { Avatar, Avatars, Divider } from '../../../../../packages/stdf/components';
+	import { Avatar, Avatars, Divider, Icon } from '../../../../../packages/stdf/components';
 
 	const icons = [
 		{ name: 'ri-aliens-fill', theme: true, top: -1, size: 16 },
@@ -9,21 +9,22 @@
 		{ name: 'ri-emotion-line', theme: true, top: -1, size: 46 },
 	];
 
-	const data = [
-		{ image: '/assets/images/dota_火女.png' },
-		{ image: '/assets/images/dota_火枪.png' },
-		{ image: '/assets/images/dota_小牛.png' },
-		{ image: '/assets/images/wall_1.jpg' },
-		{ image: '/assets/images/dota_斯温.png' },
-		{ image: '/assets/images/dota_水人.png' },
-		{ image: '/assets/images/wall_2.jpg' },
-		{ image: '/assets/images/wall_3.jpg' },
-		{ image: '/assets/images/wall_4.jpg' },
-		{ image: '/assets/images/avatar_1.jpg' },
-		{ image: '/assets/images/dota_火枪.png' },
-		{ image: '/assets/images/dota_小牛.png' },
-		{ image: '/assets/images/dota_斯温.png' },
+	const imgNames = [
+		'dota_火女.png',
+		'dota_火枪.png',
+		'dota_小牛.png',
+		'wall_1.jpg',
+		'dota_斯温.png',
+		'dota_水人.png',
+		'wall_2.jpg',
+		'wall_3.jpg',
+		'wall_4.jpg',
+		'avatar_1.jpg',
+		'dota_火枪.png',
+		'dota_小牛.png',
+		'dota_斯温.png',
 	];
+	const data = imgNames.map(name => ({ image: `/assets/images/${name}` }));
 </script>
 
 <div class="py-8 px-4">
@@ -121,5 +122,16 @@
 	<Avatars {data} top="add" />
 
 	<div class="font-bold mt-6 mb-2">不显示顶层</div>
-	<Avatars {data} top="none" />
+	<Avatars {data} top={null} />
+
+	<div class="font-bold mt-6 mb-2">自定义顶层</div>
+	<Avatars {data}>
+		{#snippet top()}
+			<button class="bg-primary-200 dark:bg-dark-200 flex justify-center overflow-hidden relative w-12 h-12 rounded-full">
+				<div class="flex justify-center items-center w-full h-full text-primary-950 dark:text-dark-950">
+					<Icon name="ri-svelte-line" />
+				</div>
+			</button>
+		{/snippet}
+	</Avatars>
 </div>

doc/components/avatar/api.md

@@ -1,39 +1,39 @@
 ## Avatar Props
 
-| 属性     | 类型   | 默认值                                            | 可选值                                | 必传 | 说明                        |
-| -------- | ------ | ------------------------------------------------- | ------------------------------------- | ---- | --------------------------- |
-| image    | String | ''                                                | -                                     | N    | 图片路径。                  |
-| alt      | String | ''                                                | -                                     | N    | 替换文本，建议单字。        |
-| icon     | Object | { name: 'ri-user-3-line', theme: true, size: 32 } | Icon Props                            | N    | 替换图标，传入 Icon Props。 |
-| altSize  | String | 'md'                                              | 'xs'/'sm'/'md'/'lg'/'xl'              | N    | 替换文本大小。              |
-| radius   | String | 'base'                                            | 'none'/'base'/'xl'/'2xl'/'3xl'/'full' | N    | 圆角风格。                  |
-| size     | String | 'md'                                              | 'xs'/'sm'/'base'/'md'/'lg'/'xl'/'2xl' | N    | 头像框大小。                |
-| imgSize  | String | 'l'                                               | 's'/'m'/'l'                           | N    | 头像图片大小。              |
-| line     | String | 'none'                                            | 'none'/'solid'/'dashed'/'dotted'      | N    | 边框风格。                  |
-| injClass | String | ''                                                | Class                                 | N    | 注入 CSS 名称。             |
+| 属性     | 类型                                          | 默认值                                              | 必传 | 说明                                                                     |
+| -------- | --------------------------------------------- | --------------------------------------------------- | ---- | ------------------------------------------------------------------------ |
+| image    | `string`                                      | `''`                                                | N    | 图片路径。                                                               |
+| alt      | `string`                                      | `''`                                                | N    | 替换文本，建议单字。                                                     |
+| icon     | `Icon`                                        | `{ name: 'ri-user-3-line', theme: true, size: 32 }` | N    | 替换图标 [Icon Props](https://stdf.design/#/components?nav=icon&tab=1)。 |
+| altSize  | `'xs'\|'sm'\|'md'\|'lg'\|'xl'`                | `'md'`                                              | N    | 替换文本大小。                                                           |
+| radius   | `'none'\|'base'\|'xl'\|'2xl'\|'3xl'\|'full'`  | `'base'`                                            | N    | 圆角风格。                                                               |
+| size     | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'` | `'md'`                                              | N    | 头像框大小。                                                             |
+| imgSize  | `'s'\|'m'\|'l'`                               | `'l'`                                               | N    | 头像图片大小。                                                           |
+| line     | `'none'\|'solid'\|'dashed'\|'dotted'`         | `'none'`                                            | N    | 边框风格。                                                               |
+| injClass | `string`                                      | `''`                                                | N    | 注入 CSS 名称。                                                          |
 
 ## Avatar Events
 
-| 名称  | 参数 | 描述       |
-| ----- | ---- | ---------- |
-| click | -    | 点击触发。 |
+| 名称    | 类型         | 参数 | 描述       |
+| ------- | ------------ | ---- | ---------- |
+| onclick | `() => void` | -    | 点击触发。 |
 
 ## Avatars Props
 
-| 属性      | 类型    | 默认值 | 可选值                                | 必传 | 说明                             |
-| --------- | ------- | ------ | ------------------------------------- | ---- | -------------------------------- |
-| data      | Array   | []     | -                                     | N    | 由 Avatar Props 组成的头像数据。 |
-| radius    | String  | 'full' | 'none'/'base'/'xl'/'2xl'/'3xl'/'full' | N    | 圆角风格。                       |
-| size      | String  | 'md'   | 'xs'/'sm'/'base'/'md'/'lg'/'xl'       | N    | 头像框大小。                     |
-| compact   | Number  | 5      | 1-10                                  | N    | 紧凑程度，越大越紧凑。           |
-| lineWidth | String  | 3      | '0'/'1'/'2'/'3'/'4'/'8'               | N    | 边框粗细。                       |
-| reverse   | Boolean | false  | true/false                            | N    | 是否反向。                       |
-| max       | Number  | 10     | -                                     | N    | 最大最大显示数量。               |
-| top       | String  | 0      | 'totle'/'add'/'none'/Slot             | N    | 顶层内容。                       |
-| injClass  | String  | ''     | Class                                 | N    | 注入 CSS 名称。                  |
+| 属性      | 类型                                          | 默认值    | 必传 | 说明                                                                                   |
+| --------- | --------------------------------------------- | --------- | ---- | -------------------------------------------------------------------------------------- |
+| data      | `Avatar[]`                                    | `[]`      | N    | 由 Avatar Props 组成的头像数据。                                                       |
+| radius    | `'none'\|'base'\|'xl'\|'2xl'\|'3xl'\|'full'`  | `'full'`  | N    | 圆角风格。                                                                             |
+| size      | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'` | `'md'`    | N    | 头像框大小。                                                                           |
+| compact   | `number`                                      | `5`       | N    | 紧凑程度，越大越紧凑。                                                                 |
+| lineWidth | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                | `'3'`     | N    | 边框粗细。                                                                             |
+| reverse   | `boolean`                                     | `false`   | N    | 是否反向。                                                                             |
+| max       | `number`                                      | `10`      | N    | 最大最大显示数量。                                                                     |
+| top       | `'totle'\|'add'\|null\|Snippet`               | `'totle'` | N    | 顶层内容，注：类型 [Snippet](https://svelte.dev/docs/svelte/snippet#Typing-snippets)。 |
+| injClass  | `string`                                      | `''`      | N    | 注入 CSS 名称。                                                                        |
 
 ## Avatars Events
 
-| 名称       | 参数 | 描述             |
-| ---------- | ---- | ---------------- |
-| clickgroup | -    | 点击头像组触发。 |
+| 名称    | 类型         | 参数 | 描述             |
+| ------- | ------------ | ---- | ---------------- |
+| onclick | `() => void` | -    | 点击头像组触发。 |

doc/components/avatar/api_en.md

@@ -1,39 +1,39 @@
 ## Avatar Props
 
-| Properties | Type   | Default value                                     | Optional value                        | required | Description                                  |
-| ---------- | ------ | ------------------------------------------------- | ------------------------------------- | -------- | -------------------------------------------- |
-| image      | String | ''                                                | -                                     | N        | Picture path.                                |
-| alt        | String | ''                                                | -                                     | N        | Replace the text, it is recommended to word. |
-| icon       | Object | { name: 'ri-user-3-line', theme: true, size: 32 } | Icon Props                            | N        | Replace the icon and pass in Icon Props.     |
-| altSize    | String | 'md'                                              | 'xs'/'sm'/'md'/'lg'/'xl'              | N        | Replace the text size.                       |
-| radius     | String | 'base'                                            | 'none'/'base'/'xl'/'2xl'/'3xl'/'full' | N        | Round -corner style.                         |
-| size       | String | 'md'                                              | 'xs'/'sm'/'base'/'md'/'lg'/'xl'/'2xl' | N        | The size of the avatar box.                  |
-| imgSize    | String | 'l'                                               | 's'/'m'/'l'                           | N        | Avatar picture size.                         |
-| line       | String | 'none'                                            | 'none'/'solid'/'dashed'/'dotted'      | N        | Border style.                                |
-| injClass   | String | ''                                                | Class                                 | N        | Inject the CSS name.                         |
+| Name     | Type                                          | Default                                             | Required | Description                                                               |
+| -------- | --------------------------------------------- | --------------------------------------------------- | -------- | ------------------------------------------------------------------------- |
+| image    | `string`                                      | `''`                                                | N        | Image path.                                                               |
+| alt      | `string`                                      | `''`                                                | N        | Alternative text, single character recommended.                           |
+| icon     | `Icon`                                        | `{ name: 'ri-user-3-line', theme: true, size: 32 }` | N        | Icon props [Icon Props](https://stdf.design/#/components?nav=icon&tab=1). |
+| altSize  | `'xs'\|'sm'\|'md'\|'lg'\|'xl'`                | `'md'`                                              | N        | Alternative text size.                                                    |
+| radius   | `'none'\|'base'\|'xl'\|'2xl'\|'3xl'\|'full'`  | `'base'`                                            | N        | Border radius style.                                                      |
+| size     | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'` | `'md'`                                              | N        | Avatar frame size.                                                        |
+| imgSize  | `'s'\|'m'\|'l'`                               | `'l'`                                               | N        | Avatar image size.                                                        |
+| line     | `'none'\|'solid'\|'dashed'\|'dotted'`         | `'none'`                                            | N        | Border style.                                                             |
+| injClass | `string`                                      | `''`                                                | N        | Inject CSS class name.                                                    |
 
 ## Avatar Events
 
-| Name  | Parameter | Description       |
-| ----- | --------- | ----------------- |
-| click | -         | Click to trigger. |
+| Name    | Type         | Parameters | Description         |
+| ------- | ------------ | ---------- | ------------------- |
+| onclick | `() => void` | -          | Triggered on click. |
 
 ## Avatars Props
 
-| Properties | Type    | Default value | Optional value                        | required | Description                               |
-| ---------- | ------- | ------------- | ------------------------------------- | -------- | ----------------------------------------- |
-| data       | Array   | []            | -                                     | N        | The avatar data composed of Avatar Props. |
-| radius     | String  | 'full'        | 'none'/'base'/'xl'/'2xl'/'3xl'/'full' | N        | Round -corner style.                      |
-| size       | String  | 'md'          | 'xs'/'sm'/'base'/'md'/'lg'/'xl'       | N        | The size of the avatar box.               |
-| compact    | Number  | 5             | 1-10                                  | N        | Compactness, the larger the more compact. |
-| lineWidth  | String  | 3             | '0'/'1'/'2'/'3'/'4'/'8'               | N        | Border thickness.                         |
-| reverse    | Boolean | false         | true/false                            | N        | Whether to reverse.                       |
-| max        | Number  | 10            | -                                     | N        | Maximum maximum display quantity.         |
-| top        | String  | 0             | 'totle'/'add'/'none'/Slot             | N        | Top content.                              |
-| injClass   | String  | ''            | Class                                 | N        | Inject the CSS name.                      |
+| Name      | Type                                          | Default   | Required | Description                                                                                |
+| --------- | --------------------------------------------- | --------- | -------- | ------------------------------------------------------------------------------------------ |
+| data      | `Avatar[]`                                    | `[]`      | N        | Avatar data array composed of Avatar Props.                                                |
+| radius    | `'none'\|'base'\|'xl'\|'2xl'\|'3xl'\|'full'`  | `'full'`  | N        | Border radius style.                                                                       |
+| size      | `'xs'\|'sm'\|'base'\|'md'\|'lg'\|'xl'\|'2xl'` | `'md'`    | N        | Avatar frame size.                                                                         |
+| compact   | `number`                                      | `5`       | N        | Compactness level, larger value means more compact.                                        |
+| lineWidth | `'0'\|'1'\|'2'\|'3'\|'4'\|'8'`                | `'3'`     | N        | Border width.                                                                              |
+| reverse   | `boolean`                                     | `false`   | N        | Whether to reverse the order.                                                              |
+| max       | `number`                                      | `10`      | N        | Maximum number of avatars to display.                                                      |
+| top       | `'totle'\|'add'\|null\|Snippet`               | `'totle'` | N        | Top content, Note: type [Snippet](https://svelte.dev/docs/svelte/snippet#Typing-snippets). |
+| injClass  | `string`                                      | `''`      | N        | Inject CSS class name.                                                                     |
 
 ## Avatars Events
 
-| Name       | Parameter | Description                    |
-| ---------- | --------- | ------------------------------ |
-| clickgroup | -         | Click avatar group to trigger. |
+| Name    | Type         | Parameters | Description                          |
+| ------- | ------------ | ---------- | ------------------------------------ |
+| onclick | `() => void` | -          | Triggered when avatar group clicked. |

doc/components/avatar/guide.md

@@ -24,6 +24,6 @@ image > alt > icon。
 
 v0.4.0 开始支持头像组，头像组的使用场景是在头像框内部显示多个头像，例如群聊头像、评论头像等。传入由 Avatar Props 组成的数组即可，头像组有自己的 Props 用于控制不同样式。
 
-默认顶层显示头像总数，可通过 top 参数控制顶层显示内容，可选值有 totle（显示头像总数）、add（新增头像 Icon）、none（不显示）、Slot（自定义顶层内容）。
+默认顶层显示头像总数，可通过 top 参数控制顶层显示内容，可选值有 totle（显示头像总数）、add（新增头像 Icon）、null（不显示）、Snippet（自定义顶层内容）。
 
 头像组 Props 自己也有一个 injClass，可为头像组注入 Class 名称，一般用于当默认边框颜色与背景色不统一时传入传入 ring 的颜色使其统一。

doc/components/avatar/guide_en.md

@@ -1,29 +1,29 @@
-> Avatar uses the icons ri-user-3-line and ri-user-add-line, please ensure that the symbol.svg file in your project includes these icons. For details, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
+> Avatar uses icons ri-user-3-line and ri-user-add-line. Please ensure these icons are included in your project's symbol.svg file. For detailed information, please refer to [STDF-Guide-Icon](https://stdf.design/#/guide/icon).
 
-## Description
+## Content Description
 
-The `Avatar` component can receive a relative or absolute path for `image`, which will be converted to the `src` attribute of the `img` tag inside the component. If `alt` is passed in, it will be displayed as text. If `icon` is passed in as `Icon Props`, the `Icon` component will be used to render the contents of the avatar. If none of `image`, `alt`, and `icon` are passed in, the `Avatar` component will default to using the `Icon` component to display a user icon.
+image accepts relative or absolute image paths, which will be converted to the src attribute of an img tag internally; alt displays the input text directly; icon accepts Icon Props to render avatar content using the Icon component, please refer to Icon API; if image, alt, and icon are not provided, the Avatar component will display a default user icon using the Icon component.
 
-Combined with other parameters for style adjustments, the configurability of the content means that the `Avatar` component is not only suitable for the specific use case of displaying avatars, but can be used flexibly for other purposes as well.
+With the configurability of content combined with other style adjustment parameters, the Avatar component is not limited to just avatar scenarios - please use it flexibly.
 
 ## Content Priority
 
-`image` > `alt` > `icon`
+image > alt > icon.
 
-## `imgSize`
+## imgSize
 
-This parameter determines the proportion of the avatar frame that the image inside it takes up. The three levels of `s`, `m`, and `l` correspond to 1/3, 2/3, and full width, respectively. Most use cases require full width, but if the design requires the use of a PNG format image, this parameter may be used to adjust the breathing room of the image within the frame.
+This parameter determines the ratio of the internal image to the entire avatar frame. The three levels s, m, l correspond to 1/3, 2/3, and full coverage respectively. Most business scenarios use full coverage, but some interface designs require PNG format images, in which case this parameter may need to be adjusted to give the page a sense of breathing space.
 
-## `injClass`
+## injClass
 
-The `injClass` parameter can be used to inject custom CSS class names (not limited to Tailwind CSS) into the `button` element inside the component. This allows for further customization of the component's appearance, as demonstrated in the example using `injClass` to customize the background and border colors.
+The injClass parameter allows injecting CSS class names (not limited to Tailwind CSS) into the component's internal button element, enabling more customization possibilities for component styles. The example demonstrates custom background color and border color through injClass.
 
-If the injected class name does not take effect, add a `!` before the class name, as demonstrated in the [Tailwind Important Modifier](https://tailwindcss.com/docs/configuration#important-modifier).
+If the injected class doesn't take effect, please add "!" before the class name. Refer to [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier).
 
 ## Avatar Group
 
-Starting with v0.4.0, the `Avatar` component supports avatar groups, which can be used to display multiple avatars inside an avatar frame, such as group chat avatars, comment avatars, etc. Simply pass in an array of `Avatar Props` to use. The avatar group has its own props for controlling different styles.
+Starting from v0.4.0, avatar groups are supported. Avatar groups are used to display multiple avatars within an avatar frame, such as group chat avatars or comment avatars. Simply pass in an array composed of Avatar Props, and the avatar group has its own Props to control different styles.
 
-By default, the total number of avatars is displayed at the top level, and the `top` parameter can be used to control what is displayed at the top level, with the following optional values: `totle` (displays the total number of avatars), `add` (displays an icon for adding avatars), `none` (does not display anything), and `Slot` (allows for custom content at the top level).
+By default, the top layer displays the total number of avatars. The top parameter can control the top layer content, with options including totle (display total avatar count), add (add avatar Icon), null (no display), and Snippet (custom top layer content).
 
-The avatar group props also have an `injClass` that can be used to insert a class name into the avatar group, which is generally used to unify the background and border colors when the default border color does not match the background color. Note that the `ring` color must be passed in.
+Avatar group Props also has its own injClass, which can inject Class names for the avatar group, typically used to unify the ring color when the default border color doesn't match the background color.

packages/stdf/components/avatar/Avatar.svelte

@@ -46,10 +46,10 @@
 	// 边框风格样式
 	// border style
 	const lineObj = {
-		none: '',
-		solid: 'border border-solid border-primary dark:border-dark',
-		dashed: 'border border-dashed border-primary dark:border-dark',
-		dotted: 'border border-dotted border-primary dark:border-dark',
+		none: ' ',
+		solid: ' border border-solid border-primary dark:border-dark',
+		dashed: ' border border-dashed border-primary dark:border-dark',
+		dotted: ' border border-dotted border-primary dark:border-dark',
 	};
 
 	// 替换文本大小样式
@@ -61,15 +61,10 @@
 	const iconSizeObj = { xs: 12, sm: 20, base: 24, md: 32, lg: 40, xl: 56, '2xl': 64 };
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class={`bg-primary-200 dark:bg-dark-200 flex justify-center overflow-hidden relative ${lineObj[line] || ''} ${
-		sizeObj[size] || sizeObj.md
-	} ${radiusObj[radius] || radiusObj.base} ${injClass}`}
-	onclick={() => {
-		onclick && onclick();
-	}}
+<button
+	class="bg-primary-200 dark:bg-dark-200 flex justify-center overflow-hidden relative{lineObj[line] || ''} {sizeObj[size] ||
+		sizeObj.md} {radiusObj[radius] || radiusObj.base} {injClass}"
+	onclick={() => onclick && onclick()}
 >
 	{#if image === '' && alt === ''}
 		<div class="m-auto">
@@ -77,7 +72,7 @@
 		</div>
 	{:else if image === '' && alt !== ''}
 		<div
-			class={`text-center text-primary-950 dark:text-dark-950 ${altSizeObj[altSize] || altSizeObj.md}`}
+			class="text-center text-primary-950 dark:text-dark-950 {altSizeObj[altSize] || altSizeObj.md}"
 			style="position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);"
 		>
 			{alt}
@@ -86,10 +81,10 @@
 		<div class="m-auto text-center">
 			<img
 				src={image}
-				class={`object-cover inline-block ${imgSizeObj[imgSize] || imgSizeObj.l}`}
+				class="object-cover inline-block {imgSizeObj[imgSize] || imgSizeObj.l}"
 				alt=""
 				style="position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);"
 			/>
 		</div>
 	{/if}
-</div>
+</button>

packages/stdf/components/avatar/Avatars.svelte

@@ -14,7 +14,7 @@
 		max = 10,
 		top = 'totle',
 		injClass = '',
-		onclickGroup,
+		onclick,
 	} = $props();
 
 	// 圆角风格样式
@@ -29,14 +29,7 @@
 	};
 	// 边框粗细样式
 	// border width style
-	const lineWidthClass = {
-		0: 'ring-0',
-		1: 'ring-1',
-		2: 'ring-2',
-		3: 'ring',
-		4: 'ring-4',
-		8: 'ring-8',
-	};
+	const lineWidthClass = { 0: 'ring-0', 1: 'ring-1', 2: 'ring-2', 3: 'ring', 4: 'ring-4', 8: 'ring-8' };
 
 	// 头像框大小样式
 	// avatar size style
@@ -52,26 +45,12 @@
 
 	// 替换文本大小样式
 	// replace text size style
-	const textSizeObj = {
-		xs: 'text-xs',
-		sm: 'text-sm',
-		base: 'text-lg',
-		md: 'text-3xl',
-		lg: 'text-4xl',
-		xl: 'text-6xl',
-	};
+	const textSizeObj = { xs: 'text-xs', sm: 'text-sm', base: 'text-lg', md: 'text-3xl', lg: 'text-4xl', xl: 'text-6xl' };
 
 	const dataInner = data.slice(0, max);
 </script>
 
-<!-- svelte-ignore a11y_click_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="flex"
-	onclick={() => {
-		onclickGroup && onclickGroup();
-	}}
->
+<button class="flex" onclick={() => onclick && onclick()}>
 	{#if reverse}
 		<div
 			class="relative {lineWidthClass[lineWidth] || lineWidthClass[2]} ring-primaryWhite dark:ring-darkBlack {radiusObj[radius] ||
@@ -93,9 +72,7 @@
 				>
 					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
 				</div>
-			{:else if top === 'none'}
-				<!-- none -->
-			{:else}
+			{:else if top === null}{:else}
 				{@render top?.()}
 			{/if}
 		</div>
@@ -130,11 +107,9 @@
 				>
 					<Icon name="ri-user-add-line" injClass="text-primary-950 dark:text-dark-950" />
 				</div>
-			{:else if top === 'none'}
-				<!-- none -->
-			{:else}
+			{:else if top === null}{:else}
 				{@render top?.()}
 			{/if}
 		</div>
 	{/if}
-</div>
+</button>