tmui-cli 2.0.0 → 2.0.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/205/266/345/256/203/347/273/204/344/273/266//346/200/235/347/273/264/345/257/274/345/233/276 xTreeFlat.md"

@@ -0,0 +1,130 @@
+# 思维导图 xTreeFlat
+
+## 介绍
+
+平面树 / 思维导图。x-skia-u 绘制：App 整帧 SkiaRecorder 一次 renderFrame；节点 roundRect + fillTextBox；native-view 上手势覆盖层。大数据量时布局缓存子树高/宽与节点尺寸，连线按 id 索引；请保证各节点 id 全局唯一。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-tree-flat/x-tree-flat.uvue
+```
+
+## 使用
+
+```ts
+<x-tree-flat></x-tree-flat>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| canvasWidth | ``<br> | `` | `800` |
+| canvasHeight | ``<br> | `` | `800` |
+| width | ``<br> | `` | `'100%'` |
+| height | ``<br> | `` | `'600'` |
+| list | ``<br> | `` | `[] as XTREEFLAT_NODES[]` |
+| opts | ``<br> | `` | `() : XTreeFlatOpts   null => {     return null }` |
+| autoFit | ``<br> | `` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| init | `-` | - |
+| change | `-` | - |
+| click | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| setData | - | `-` | - |
+| fitView | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/qita/tree-flat
+```
+
+## 示例源码
+
+```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">思维导图 xTreeFlat</x-text>
+		<x-text color="#999999">
+			这是一个横向布局的思维导图,可以用来展示结构或组织架构或流程,纯原生绘制,性能高
+		</x-text>
+		<x-radio-group class="mt-16" v-model="layout">
+			<x-radio value="horizontal" class="mr-24" label="横向布局"></x-radio>
+			<x-radio value="vertical" label="上下布局"></x-radio>
+		</x-radio-group>
+		<x-radio-group class="mt-12" v-model="lineType">
+			<x-radio value="straight" class="mr-24" label="折线连接"></x-radio>
+			<x-radio value="curve" label="曲线连接"></x-radio>
+		</x-radio-group>
+	</x-sheet>
+	<view class="flex-1">
+		<!-- :list="nodes"  -->
+		<x-tree-flat :canvasWidth="1200" :opts="opts" ref="xmind" @init="oninit" height="100%"></x-tree-flat>
+	</view>
+
+</template>
+
+<script setup>
+	import { XTreeFlatOpts, XTREEFLAT_NODES } from '@/uni_modules/tmx-ui';
+	import { TestFlatData } from "./mock.uts"
+	const xmind = ref<XTreeFlatComponentPublicInstance | null>(null)
+	const layout = ref<'horizontal' | 'vertical'>('horizontal')
+	const lineType = ref<'straight' | 'curve'>('straight')
+	const opts = computed(() : XTreeFlatOpts => {
+		return { lineWidth: 2, layout: layout.value, lineType: lineType.value } as XTreeFlatOpts
+	})
+	const oninit = () => {
+		console.warn("导图引擎启动成功，可以设置数据了")
+		xmind.value!.setData(JSON.parseArray<XTREEFLAT_NODES>(TestFlatData)!)
+	}
+</script>
+
+<style>
+	/* #ifdef MP */
+	page,
+	body {
+		height: 100vh;
+		display: flex;
+		flex-direction: column;
+	}
+
+	/* #endif */
+</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/205/266/345/256/203/347/273/204/344/273/266//346/211/213/345/212/277/345/272/223 xFinger.md"

@@ -0,0 +1,201 @@
+# 手势库 xFinger
+
+## 介绍
+
+多方向的手势库,包括旋转，捏合，轻扫，双击等手势
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-finger/x-finger.uvue
+```
+
+## 使用
+
+```ts
+<x-finger></x-finger>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| swiperDiff | `滑动多长距离，识别并触发滑动的方向`<br> | `number` | `50` |
+| dbClickDiff | `定义双击的时间间隔触发时机`<br> | `number` | `300` |
+| clickDiff | `定义单击click的时间间隔触发时机`<br> | `number` | `50` |
+| longDiff | `定义长按的时间间隔触发时机`<br> | `number` | `800` |
+| disabled | `是否禁用`<br> | `boolean` | `false` |
+| throttleDelay | `移动事件的节流间隔（毫秒），0表示不节流`<br> | `number` | `16` |
+| debounce | `是否启用防抖，防止快速连续触发`<br> | `boolean` | `false` |
+| minMoveDistance | `最小移动距离，小于此距离不触发移动事件`<br> | `number` | `1` |
+| accOffsetX | `连续性坐标初始位置x`<br> | `number` | `0` |
+| accOffsetY | `连续性坐标初始位置y`<br> | `number` | `0` |
+| accessibility | `是否启用无障碍访问支持`<br> | `boolean` | `true` |
+| ariaLabel | `无障碍标签`<br> | `string` | `'手势识别区域'` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| start | `evt: x,y,type,width,height<br>` | 触摸开始 |
+| move | `evt: x,y,type,width,height<br>` | 触摸移动时触发 |
+| end | `evt: x,y,type,width,height<br>` | 触摸结束 |
+| cancel | `evt: x,y,type,width,height<br>` | 触摸中断 |
+| doubleClick | `evt: x,y,type,width,height<br>` | doubleClick |
+| longPress | `evt: x,y,type,width,height<br>` | 长按事件 |
+| swiper | `evt: union<br>` | 滑动时触发 |
+| click | `evt: x,y,type,width,height<br>` | 单击 |
+| pinch | `<br>evt: x,y,x1,y1,len,scale,type,width,height<br>` | 缩放事件 |
+| rotate | `<br>evt: x,y,x1,y1,len,angle,type,width,height<br>` | 旋转事件 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽default` | x: number<br>x: number<br>x: number<br>x: number<br>x: string<br>y: number<br>y: number<br>y: number<br>y: number<br>y: string<br>accX: number<br>accX: number<br>accX: number<br>accX: number<br>accX: string<br>accY: number<br>accY: number<br>accY: number<br>accY: number<br>accY: string<br>type: number<br>type: number<br>type: number<br>type: number<br>type: string<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/qita/finger
+```
+
+## 示例源码
+
+```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">手势库 Finger</x-text>
+			<x-text color="#999999" >
+				提供高性能手势判断事件，自定义强，可自定义，长按，单击，双击,的时长及间隔。也可自定义滑动方向的间距判断。
+			</x-text>
+		</x-sheet>
+		
+		
+		
+
+
+		<view class="white round-10 pa-12 mx-16 mb-12 ">
+			<x-finger :accOffsetX="20" :accOffsetY="20">
+				<template v-slot:default="{x,y,accX,accY,type}">
+					<view style="height: 150px;width: 100%;background-color: rgba(0, 0, 0, 0.1);">
+						<text :style="{height:'50px',width:'80px',background: 'green',left:accX+'px',top:accY+'px'}">
+							X:{{accX}}
+							Y:{{accY}}
+						</text>
+					</view>
+				</template>
+			</x-finger>
+		</view>
+		
+		<view class="white round-10 pa-12 mx-16 mb-12 ">
+			<x-finger @swiper="mSwiper" @start="mStart" @move="mMove" @end="mEnd" @click="mClick"
+				@doubleClick="mdbClick" @longPress="mlongClick" @rotate="rotate" @pinch="pinch">
+			
+				<template v-slot:default="{x,y,type}">
+					<view style="width:100%;height:100px;background-color: rgba(0, 0, 0, 0.1);">
+					
+					</view>
+				</template>
+			</x-finger>
+			<text class="mt-12">
+				其它事件：{{diff}}
+			</text>
+		
+			<text>
+				滑动事件：{{swiperDiff}}
+			</text>
+			<text>
+				缩放：{{pinth}}
+				旋转：{{rotaValue}}
+			</text>
+		</view>
+
+</template>
+
+<script lang="uts" setup>
+	import { ref, onMounted } from 'vue'
+	// import {xOverflay} from "../../uni_modules/x-core"
+	// 响应式数据
+	const diff = ref("")
+	const swiperDiff = ref("")
+	const pinth = ref(0)
+	const rotaValue = ref(0)
+	const _x = ref(0)
+	const _y = ref(0)
+	
+	// 生命周期
+	onMounted(() => {
+	})
+	
+	
+	// 方法
+	const mSwiper = (evt : UTSJSONObject) => {
+		swiperDiff.value = JSON.stringify(evt)
+	}
+	
+	const mStart = (evt : UTSJSONObject) => {
+		diff.value = JSON.stringify(evt)
+	}
+	
+	const mMove = (evt : UTSJSONObject) => {
+		diff.value = JSON.stringify(evt)
+	}
+	
+	const mEnd = (evt : UTSJSONObject) => {
+		diff.value = JSON.stringify(evt)
+	}
+	
+	const mClick = (evt : UTSJSONObject) => {
+		diff.value = JSON.stringify(evt)
+	}
+	
+	const mdbClick = (evt : UTSJSONObject) => {
+		diff.value = JSON.stringify(evt)
+	}
+	
+	const mlongClick = (evt : UTSJSONObject) => {
+		diff.value = JSON.stringify(evt)
+	}
+	
+	const pinch = (evt : UTSJSONObject) => {
+		pinth.value = evt.getNumber('scale')!
+	}
+	
+	const rotate = (evt : UTSJSONObject) => {
+		rotaValue.value = evt.getNumber('angle')!
+	}
+</script>
+
+<style lang="scss" scoped>
+
+</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/205/266/345/256/203/347/273/204/344/273/266//346/217/220/345/217/212 xMention.md"

@@ -0,0 +1,174 @@
+# 提及 xMention
+
+## 介绍
+
+它是依照微信的输入体验来的,请自行体验效果,样式是可以直接在标签上写style来定义你想的外观.
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-mention/x-mention.uvue
+```
+
+## 使用
+
+```ts
+<x-mention></x-mention>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| bgColor | `输入框背景及标签背景`<br> | `string` | `"#f5f5f5"` |
+| darkBgColor | `输入框的暗黑背景色`<br>`空值读取全局的Input暗黑背景色`<br> | `string` | `""` |
+| btnColor | `右边按钮主题色，空取全局主题色`<br> | `string` | `""` |
+| fontSize | `文本大小`<br> | `string` | `"16"` |
+| fontColor | `文本颜色，暗黑时取白`<br> | `string` | `"#333333"` |
+| width | `宽`<br> | `string` | `"auto"` |
+| height | `高`<br> | `string` | `"40"` |
+| round | `圆角`<br> | `string` | `""` |
+| placeholder | `输入提示词,请输入内容，@选择朋友,按确认完成`<br> | `string` | `""` |
+| modelValue | `双向绑定`<br> | `string` | `""` |
+| mentionChar | `提及符号`<br> | `string` | `"@"` |
+| autFoucs | ``<br> | `boolean` | `false` |
+| adjustPosition | ``<br> | `boolean` | `false` |
+| holdKeyboard | ``<br> | `boolean` | `false` |
+| beforeRemove | ``<br> | `MENTION_BEFOREREMOVE_TYPE` | `(tag : string) : boolean => {     return true }` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `value: string<br>` | 字符变化时触发 |
+| mention | `-` | 输入提及符时触发 |
+| removemention | `value: string<br>` | 用记在删除字符时,如果触发删除标签时触发 |
+| confirm | `value: string<br>` | 键盘确认时触发. |
+| input | `value: string<br>` | 输入时触发. |
+| blur | `-` | 失去焦点 |
+| foucs | `-` | 获得焦点 |
+| keyboardheightchange | `height: number<br>` | 键盘高度变化时 |
+| update:modelValue | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| setFoucus | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/qita/mention
+```
+
+## 示例源码
+
+```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">提及 xMention</x-text>
+			<x-text color="#999999">此组件的输入体验与微信基本相符,体验比较完善它不与选择视图绑定,通过事件控制将会完美的支持自定界面.</x-text>
+		</x-sheet>
+	
+		<x-sheet v-for="(item,index) in chat" :key="index" >
+			<x-text :label="item" :height-light="pengyouListNames" height-light-color="red" ></x-text>
+		</x-sheet>
+		<x-sheet>
+			
+			<x-mention dark-bg-color="#333" 
+			style="border-radius: 6px;"
+			@confirm="onconfirm" ref="mention" @mention="onmention" :beforeRemove="beforeRemove" @removemention="removemention"
+				v-model="(keyword as string)"></x-mention>
+				
+				<x-text class="mt-n8 opacity-5" font-size="12" color="#999999">可以像微信一样选择朋友并在编辑朋友删除字符让之前选择的失效.然后继续选择,会在删除前和删除后通过事件通知.</x-text>
+		</x-sheet>
+
+		<x-drawer :showClose="true" :show-footer="false" title="请选择朋友" v-model:show="(show as boolean)" size="500px">
+			<view>
+				<x-cell @click="cellClick(item.name)" v-for="(item,index) in pengyouList" :card="false" :key="index"
+					:title="item.name" :bottom-border-insert="false"></x-cell>
+			</view>
+		</x-drawer>
+
+</template>
+
+<script setup lang="uts">
+	import { ref } from "vue"
+	type PENGYOU_TYPE = {
+		name : string,
+		id : string
+	}
+	const show = ref<boolean>(false)
+	const keyword = ref("")
+	const mention = ref<XMentionComponentPublicInstance | null>(null)
+	const pengyouList = ref<PENGYOU_TYPE[]>([])
+	const pengyouListNames = computed(():string[] => pengyouList.value.map((el:PENGYOU_TYPE):string=> ('@'+el.name)))
+	const chat = ref<string[]>([])
+	const tags = ref<string[]>([])
+
+	// 添加虚拟数据
+	for (let i = 0; i < 10; i++) {
+		pengyouList.value.push({
+			name: "朋友" + i,
+			id: i.toString()
+		} as PENGYOU_TYPE)
+	}
+
+	const onmention = () => {
+
+		show.value = true;
+	}
+	const cellClick = (str : string) => {
+		if(mention.value==null) return;
+		keyword.value += str + ' '
+		show.value = false;
+		mention.value!.$callMethod('setFoucus',true)
+		tags.value.push(str)
+	}
+	//删除前需要校验当前删除的标签是不是朋友标签,因为如果用户把光标移动有名称内删除,打乱了标签,其实已经不构成是标签了,就不需要删除了.
+	const beforeRemove = (tag : string) : boolean => {
+		let index = pengyouList.value.findIndex((el : PENGYOU_TYPE) : boolean => el.name == tag)
+		console.log("即将删除标签:", tag, index > 1 ? '是' : '否')
+		return index > -1
+	}
+	const removemention = (tag : string) => {
+		console.log("被删除标签:", tag)
+	}
+	const onconfirm = (nowval:string)=>{
+		chat.value.push(nowval)
+		keyword.value = ''
+	}
+</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/205/266/345/256/203/347/273/204/344/273/266//346/235/241/347/240/201 xBarcode.md"

@@ -0,0 +1,133 @@
+# 条码 xBarcode
+
+## 介绍
+
+用 x-skia-u 画一维码：ean13、ean8、upca、code128、code39、itf25、codabar。codebar 与 code128 共用 Code128 子集 B。
+ean13/ean8/upca 请按 GS1 位数与校验规则提供内容；codabar 须以 A/B/C/D 起止（如 A12345A）。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-barcode/x-barcode.uvue
+```
+
+## 使用
+
+```ts
+<x-barcode></x-barcode>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| width | `窗口宽`<br> | `string` | `"auto"` |
+| height | `容器高，影响条码高度`<br> | `string` | `"140px"` |
+| pading | `上下间隙，单位是 px`<br> | `number` | `20` |
+| color | `条码颜色`<br> | `string` | `"black"` |
+| encode | `编码：codebar/code128/ean13/ean8/upca/code39/itf25/codabar`<br> | `xBarcodeEncode` | `"ean13"` |
+| text | `条码内容`<br> | `string` | `""` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/qita/barcode
+```
+
+## 示例源码
+
+```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">条码 xBarcode</x-text>
+			<x-text color="#999999" >
+				支持 ean13、ean8、upca、code128、code39、itf25、codabar（codebar 与 code128 同为 Code128-B）
+			</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">ean13国内，国际商品码</x-text>
+			<x-text color="#999999" class="mb-12">
+				可使用淘宝等软件扫描识别
+			</x-text>
+			<x-sheet dark-color="#dcdcdc" :padding="['0']" :margin="['0']">
+				<x-barcode encode="ean13" text="6970980210024"></x-barcode>
+			</x-sheet>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">code128，常规条码</x-text>
+			<x-text color="#999999" class="mb-12">
+				需要专用的识别软件或者条码器识别，见：https://barcode.tec-it.com/en/Code128?data=ABC-abc-1234
+			</x-text>
+			
+			<x-sheet dark-color="#dcdcdc" :padding="['0']" :margin="['0']">
+				<x-barcode encode="code128" text="abc125698"></x-barcode>
+			</x-sheet>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">其它一维示例</x-text>
+			<x-text color="#999999" >ean8 / upca / code39 / itf25 / codabar</x-text>
+		</x-sheet>
+		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
+			<x-barcode style="background-color: red;" encode="ean8" text="96385074"></x-barcode>
+		</x-sheet>
+		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
+			<x-barcode encode="upca" text="012345678905"></x-barcode>
+		</x-sheet>
+		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
+			<x-barcode encode="code39" text="CODE39"></x-barcode>
+		</x-sheet>
+		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
+			<x-barcode encode="itf25" text="12345670"></x-barcode>
+		</x-sheet>
+		<x-sheet dark-color="#dcdcdc" :padding="['0']" >
+			<x-barcode encode="codabar" text="A123456A"></x-barcode>
+		</x-sheet>
+
+		<view style="height:50px"></view>
+	
+</template>
+
+<script setup lang="ts">
+	
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)