tmui-cli 2.0.1 → 2.0.3

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//345/233/276/347/211/207 xImage.md"

@@ -0,0 +1,132 @@
+# 图片 xImage
+
+## 介绍
+
+宽高可以设置，支持百分比，px,rpx
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-image/x-image.uvue
+```
+
+## 使用
+
+```ts
+<x-image></x-image>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| width | `宽度，18rpx,18px,15%，只写"18"表示18rpx`<br> | `string` | `"100%"` |
+| height | `高度，auto,%,rpx,px`<br> | `string` | `"auto"` |
+| src | `图片源`<br> | `string` | `""` |
+| previewSrc | `预览的图片源，为空则与src同步`<br> | `string` | `""` |
+| model | `模式`<br> | `IMG_MODEL` | `"fill"` |
+| preview | `点击后是否预览图片,默认值是'null'字符串哦，这样就可以读取全局统一的配置，因为在x平台空值就会编译为true，因此使用字符串null代替空值。`<br> | `union` | `"null"` |
+| ratio | `预览占位比例 宽/高，默认5/4=1.25`<br> | `number` | `1.25` |
+| round | `圆角`<br> | `string` | `'0'` |
+| iconSize | `加载和失败时的图标大小`<br> | `string` | `"16"` |
+| placeBgColor | `占位背景色`<br> | `string` | `"#F5F5F5"` |
+| placeDarkBgColor | `占位暗黑时的背景，不填默认inputDarkColor`<br> | `string` | `""` |
+| fadeShow | `是否在安卓上显示过渡动画`<br> | `boolean` | `false` |
+| lazy | `用于在scrollview根节点的页面进行懒加载`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 图片被点击 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| loading | `加载中的插槽,插槽内自行给你布局的view宽和高写100%` | - |
+| error | `加载失败时的插槽,插槽内自行给你布局的view宽和高写100%` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| resize | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/image
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+		
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">图片 image</x-text>
+			<x-text color="#999999" >
+				图片自带加载功能，宽和高可以不设置，自动以父级宽度为最大值，如果只设置了宽，高会自动设置，免去了大家设置图片宽高的麻烦
+				支持百分比，px,rpx单位宽高设置
+			</x-text>
+		</x-sheet>
+
+		<view >
+			<x-sheet class="flex flex-row" style="justify-content: space-between;align-items: flex-start;">
+				<x-image width="18%" src="https://picsum.photos/id/10/200/200"></x-image>
+				<x-image width="18%" src="https://picsum.photos/id/20/200/200"></x-image>
+				<x-image width="18%" src="https://picsum.photos/id/30/200/200"></x-image>
+				<x-image width="18%" src="https://picsum.photos/id/40/200/200"></x-image>
+				<x-image width="18%" src="https://picsum.photos/id/50/200/200"></x-image>
+			</x-sheet>
+				
+			<x-sheet >
+				<x-image round="12" src="https://picsum.photos/id/67/800/500"></x-image>
+				<x-text font-size="18" class=" text-weight-b my-8">本地图片显示</x-text>
+				<x-image width="150" height="150"  src="/static/tmui4xLibs/static/logo.png"></x-image>
+			</x-sheet>
+			<x-sheet class="flex flex-row flex-row-center-between">
+				<x-image width="150" height="150" src="https://picsum.photos/id/82/300/300"></x-image>
+				<x-image width="150" height="150" src="https://picsum.photos/id/96/300/300"></x-image>
+			</x-sheet>
+				
+			<x-sheet>
+				<view class="flex flex-row flex-row-center-between flex-wrap">
+					<x-image width="48%" src="https://picsum.photos/id/110/600/400"></x-image>
+					<x-image width="48%" src="https://picsum.photos/id/120/600/400"></x-image>
+				</view>
+			</x-sheet>
+		</view>
+	
+</template>
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+
+</style>
+
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//345/233/276/351/233/206 xImageGroup.md"

@@ -0,0 +1,130 @@
+# 图集 xImageGroup
+
+## 介绍
+
+主要是为了一些需要快速图片排版集的展示，比如评论图集，详情列表图集等，快速开发时使用。方便快捷。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-image-group/x-image-group.uvue
+```
+
+## 使用
+
+```ts
+<x-image-group></x-image-group>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| list | `图片列表`<br>`只要包含有url字段即可。`<br>`label需要在图片显示的文本字段，如果没有不要出现此字段`<br>`如果提供了temp缩略图，会优先展示temp字段，预览时采用url原图`<br>`{url:string,label?:string,temp?:string}`<br> | `Array` | `():UTSJSONObject[] => [] as UTSJSONObject[]` |
+| model | `显示的模式见：https://doc.dcloud.net.cn/uni-app-x/component/image.html`<br> | `string` | `"scaleToFill"` |
+| height | `图片高,不要使用auto，%，`<br> | `string` | `"100"` |
+| width | `图片宽,不要使用auto，可以%值`<br> | `string` | `"33.33%"` |
+| gutter | `间隙`<br> | `string` | `"2"` |
+| labelModel | `inset表示文本在图片上`<br>`ouuter表示文本在正文展示`<br>`不要动态修改`<br> | `union` | `"inset"` |
+| labelFontSize | `如果有文字显示文字的大小`<br> | `string` | `"14"` |
+| labelFontColor | `如果有文字，显示文字的颜色`<br> | `string` | `"white"` |
+| darkLabelFontColor | `如果有文字，显示文字的颜色，暗黑时为空时取白`<br> | `string` | `""` |
+| preview | `是否预览图片`<br> | `boolean` | `true` |
+| round | `圆角`<br> | `string` | `"0"` |
+| maxCount | `最大显示数量,-1不限制全部展示`<br> | `number` | `-1` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `item: mixed<br>` | 图片项目被点击 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `当前设置了maxCount限制显示数量时，且list数量大于maxCount会显示更多数量，如果要自定义，请通过插槽改成你的布局。` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/image-group
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">图集 xImageGroup</x-text>
+		<x-text color="#999999" class="mb-12">主要是为了一些需要快速图片排版集的展示，比如评论图集，详情列表图集等，快速开发时使用。方便快捷</x-text>
+		<x-image-group round="6" :list="list"></x-image-group>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">宽允许百分比，方便响应式</x-text>
+		<x-image-group round="6" width="50%" :list="list3"></x-image-group>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">允许显示label在图片上</x-text>
+		<x-image-group round="6" :list="list2"></x-image-group>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">label在图片下上</x-text>
+		<x-image-group height="140" labelModel="outter" label-font-color="#333" dark-label-font-color="#afafaf"
+			:list="list2"></x-image-group>
+	</x-sheet>
+</template>
+
+<script setup lang="ts">
+	const list = [
+		{ url: 'https://picsum.photos/id/15/400/300' },
+		{ url: 'https://picsum.photos/id/25/400/300' },
+		{ url: 'https://picsum.photos/id/35/400/300' },
+		{ url: 'https://picsum.photos/id/45/400/300' },
+	]
+	const list2 = [
+		{ url: 'https://picsum.photos/id/100/400/300', label: "原生开发通常指的是为特定平台（如iOS或Android）使用该平台" },
+		{ url: 'https://picsum.photos/id/160/400/300', label: "使用该平台" },
+		{ url: 'https://picsum.photos/id/180/400/300', label: "通常指的是为特定平" },
+		{ url: 'https://picsum.photos/id/200/400/300', label: "该平" },
+	]
+	const list3 = [
+		{ url: 'https://picsum.photos/id/55/400/300' },
+		{ url: 'https://picsum.photos/id/65/400/300' },
+		{ url: 'https://picsum.photos/id/75/400/300' },
+		{ url: 'https://picsum.photos/id/85/400/300' },
+	]
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//345/234/206/345/275/242/350/277/233/345/272/246/347/216/257 xCircleProgress.md"

@@ -0,0 +1,150 @@
+# 圆形进度环 xCircleProgress
+
+## 介绍
+
+全端 x-skia-u 绘制圆环进度，不要官方 canvas。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-circle-progress/x-circle-progress.uvue
+```
+
+## 使用
+
+```ts
+<x-circle-progress></x-circle-progress>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| size | `可以是px,rpx,纯数字符串。带 rpx 才换算，否则按 px`<br> | `string` | `"60"` |
+| lineWidth | `可以是px,rpx,纯数字符串。带 rpx 才换算，否则按 px`<br> | `string` | `"3"` |
+| startAngle | `起始角度，默认是0，正上方顺时针`<br> | `number` | `0` |
+| color | `圆环背景颜色,暗黑时取inputDarkColor`<br> | `string` | `"info"` |
+| activeColor | `当前激活的进度颜色，空值读取全局值。`<br> | `string` | `""` |
+| modelValue | `当前的值,以百分比为值0-100，等同 v-model`<br> | `number` | `30` |
+| labelFontSize | `中间文本字号`<br> | `string` | `"16"` |
+| labelUnit | `数字的单位。`<br> | `string` | `"%"` |
+| showLabel | `是否显示中间文本。`<br> | `boolean` | `false` |
+| labelColor | `中间文本的颜色。`<br> | `string` | `"#333333"` |
+| darkLabelColor | `中间文本的暗黑颜色。空值是取白色`<br> | `string` | `""` |
+| duration | `进度条动画的时间,单位ms。`<br> | `number` | `300` |
+| linearColor | `进度渐变，如 linear-gradient(to right, #FFEB3A, #4DEF8E)，全端有效`<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认文本插槽` | current: number<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/circle-progress
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">圆形进度环 xCircleProgress</x-text>
+			<x-text  color="#999999" >样式灵活多变。全端 x-skia-u 绘制，渐变各端可用。</x-text>
+		</x-sheet>
+		<x-sheet>
+			<view class="flex flex-row flex-row-center-center">
+				<x-circle-progress :model-value="testValue"></x-circle-progress>
+				<x-circle-progress lineWidth="6" activeColor="success" linear-color="linear-gradient(to right, #FFEB3A, #4DEF8E)" class="mx-16"
+					:model-value="testValue"></x-circle-progress>
+				<x-circle-progress class="mr-32" lineWidth="10" color="error" activeColor="danger"
+					:model-value="testValue"></x-circle-progress>
+					<x-circle-progress activeColor="warn" :model-value="testValue"></x-circle-progress>
+			</view>
+			<view class="flex flex-row mt-32  flex-row-center-center pb-8">
+				<x-button @click="add">增加</x-button>
+				<x-button color="error" class="mx-16" @click="sur">减少</x-button>
+			</view>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">设置起始角度</x-text>
+		</x-sheet>
+		<x-sheet>
+			<view class="flex flex-row flex-row-center-center">
+				<x-circle-progress :start-angle="-90" lineWidth="20" size="100" :show-label="true"
+					:model-value="testValue"></x-circle-progress>
+				<x-circle-progress :start-angle="90" lineWidth="20" class="ml-32" size="100" :show-label="true" color="error"
+					activeColor="danger" :model-value="testValue"></x-circle-progress>
+			</view>
+		
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">尺寸，显示文本</x-text>
+		</x-sheet>
+		<x-sheet>
+			<view class="flex flex-row flex-row-center-center">
+				<x-circle-progress lineWidth="20" size="100" :show-label="true"
+					:model-value="testValue"></x-circle-progress>
+				<x-circle-progress lineWidth="20" class="ml-32" size="100" :show-label="true" color="error"
+					activeColor="danger" :model-value="testValue"></x-circle-progress>
+			</view>
+
+		</x-sheet>
+
+</template>
+
+<script lang="ts" setup>
+	const testValue = ref(50)
+	const add = () => {
+		let abs = testValue.value + 10;
+		if (abs > 100) {
+			abs = 100
+		}
+		testValue.value = abs
+	}
+	const sur = () => {
+		let abs = testValue.value - 10;
+		if (abs < 0) {
+			abs = 0
+		}
+		testValue.value = abs
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/261/225/347/244/272/347/273/204/344/273/266//345/244/264/345/203/217/347/273/204 xAvatarGroup.md"

@@ -0,0 +1,181 @@
+# 头像组 xAvatarGroup
+
+## 介绍
+
+平铺和堆叠方式。如果想要单头像建议使用：xSheet+xImage配合，+xBadge达到效果，因此我不再提供单头像组件，没有意义。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-avatar-group/x-avatar-group.uvue
+```
+
+## 使用
+
+```ts
+<x-avatar-group></x-avatar-group>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| list | `头像列表,也可以是文本数组，也可以是空字符串数组`<br> | `string[]` | `() : string[] => [] as string[]` |
+| size | `不允许使用auto,%只能数字或者带单位的数字2px,2rpx这种`<br> | `string` | `'32'` |
+| maxCount | `最多显示几个头像。`<br> | `number` | `5` |
+| round | `圆角`<br> | `string` | `'16'` |
+| gutter | `平铺或者堆叠时的间隙或者前推差值。`<br>`不允许使用auto,%只能数字或者带单位的数字2px,2rpx这种`<br> | `string` | `'16'` |
+| model | `显示类型见：`<br>`https://doc.dcloud.net.cn/uni-app-x/component/image.html#%E5%B1%9E%E6%80%A7`<br> | `string` | `"scaleToFill"` |
+| count | `显示在最后一个时，显示的数字。如果为0取list的长度`<br> | `number` | `0` |
+| showCount | `是否显示最后一个数字头像`<br> | `boolean` | `true` |
+| flat | `是否平铺，如果否就是堆叠。是就是正常排列。`<br> | `boolean` | `false` |
+| bgColor | `如果为文本头像时的背景`<br> | `string` | `"#f5f5f5"` |
+| darkBgColor | `如果为文本头像时的暗黑背景`<br>`空时默认取inputDarkBgcolor`<br> | `string` | `""` |
+| fontColor | `如果为文本头像时的文字颜色`<br> | `string` | `"#a6a6a6"` |
+| darkFontColor | `如果为文本头像时的暗黑背景`<br>`空时默认取inputDarkBgcolor`<br> | `string` | `"#ffffff"` |
+| fontSize | `字号`<br> | `string` | `"14"` |
+| randomBgColor | `文本头像时，是否随机背景色`<br> | `boolean` | `false` |
+| placeIcon | `如果当图片或者文本为空时的图片占位符`<br>`可以是图片地址或者图标名称`<br> | `string` | `'user-3-fill'` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `index: number<br>src: string<br>` | 头像被点击时 |
+| moreClick | `-` | 最后一个数字头像more被点击时 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| more | `more更多插槽，如果使用了这个插槽moreClick事件会丢失，请自己写在自己的布局上。` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/avatar-group
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef MP-WEIXIN -->
+	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
+		<navigation-bar :background-color="xThemeConfigNavBgColor"
+			:front-color="xThemeConfigNavFontColor"></navigation-bar>
+	</page-meta>
+	<!-- #endif -->
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">头像组 xAvatarGroup</x-text>
+		<x-text color="#999999">
+			平铺和堆叠方式。如果想要单头像建议使用：xSheet+xImage配合，+xBadge达到效果，因此我不再提供单头像组件，没有意义。
+		</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">堆叠</x-text>
+		<x-avatar-group :list="list" :max-count="8"></x-avatar-group>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">平铺</x-text>
+		<x-avatar-group :list="list" :flat="true" :max-count="8" gutter="3"></x-avatar-group>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">控制圆角及显示数量</x-text>
+		<x-avatar-group :list="list" round="4" :flat="true" :max-count="8" :count="1000" gutter="3"></x-avatar-group>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">文本头像</x-text>
+		<x-avatar-group :list="list2" round="4" :flat="true" :max-count="8" :count="1000" gutter="3"></x-avatar-group>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">文本头像随机颜色</x-text>
+		<x-avatar-group :randomBgColor="true" :list="list2" round="4" :flat="true" :max-count="8" :count="1000"
+			gutter="3"></x-avatar-group>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">头像与文本混搭,空时图标占位</x-text>
+		<x-avatar-group :randomBgColor="true" :list="list3" round="4" :flat="true" :max-count="8" :count="1000"
+			gutter="3"></x-avatar-group>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">插槽定制more</x-text>
+		<x-avatar-group :list="list" round="4" :flat="true" :max-count="4" :count="1000" gutter="3">
+			<template v-slot:more>
+				<x-sheet class="flex flex-center" width="32" height="32" :round="['4']" :margin="['0']" :padding="['0']"
+					color="primary">
+					<x-icon color="white" name="add-line"></x-icon>
+				</x-sheet>
+			</template>
+		</x-avatar-group>
+	</x-sheet>
+	<view style="height: 32px;"></view>
+
+</template>
+
+<script setup>
+	const list = [
+		"https://picsum.photos/id/64/100/100",
+		"https://picsum.photos/id/65/100/100",
+		"https://picsum.photos/id/77/100/100",
+		"https://picsum.photos/id/91/100/100",
+		"https://picsum.photos/id/103/100/100",
+		"https://picsum.photos/id/119/100/100",
+		"https://picsum.photos/id/129/100/100",
+		"https://picsum.photos/id/137/100/100",
+		"https://picsum.photos/id/142/100/100",
+		"https://picsum.photos/id/177/100/100",
+	] as string[]
+	const list2 = [
+		"同名自定义",
+		"Dclound",
+		"ak",
+		"sk",
+		"国家",
+		"天清色",
+		"漂亮",
+		"相爱一家人",
+		"北京",
+		"厉害了我的哥",
+		"呃",
+	] as string[]
+	const list3 = [
+		"同名自定义",
+		"https://picsum.photos/id/77/100/100",
+		"",
+		"sk",
+		"https://picsum.photos/id/119/100/100",
+		"",
+		"漂亮",
+		"https://picsum.photos/id/129/100/100",
+		"北京",
+		"https://picsum.photos/id/91/100/100",
+		"呃",
+	] as string[]
+</script>
+
+<style>
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)