tmui-cli 2.0.1 → 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//345/212/250/347/224/273 xAnimation.md"

@@ -0,0 +1,153 @@
+# 动画 xAnimation
+
+## 介绍
+
+动画组件
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.81+ | 1.1.20 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-animation/x-animation.uvue
+```
+
+## 使用
+
+```ts
+<x-animation></x-animation>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| autoPlay | `是否自动播放`<br> | `boolean` | `false` |
+| duration | `动画播放的时间+50+5`<br> | `number` | `350` |
+| delay | `当自动播放时，延迟自动播放的时间`<br> | `number` | `0` |
+| name | `动画名称`<br> | `string` | `'fadeIn'` |
+| ease | `缓动动画名称`<br> | `string` | `'tmxEase'` |
+| control | `自动监测是否播放。如果标志为play就开始播放动画，但`<br>`如果动画在播放中这个值不会有任何响应，而且需要v-model:playing用法来双向绑定读取此属性`<br>`你可以通过播放事件来确定修改此值。`<br>` 'play' \`<br>` 'default'`<br> | `string` | `'default'` |
+| status | `播放状态，只能用来读取此值，不可更改，使用时请v-model:status来读取动态的状态值`<br> | `xAnimationStatusType` | `'complete'` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| beforePlay | `-` | 播放前执行 |
+| complete | `-` | 播放完成执行 |
+| play | `-` | 播放时触发 |
+| update:control | `-` | 同步控制播放参数<br>等同v-model:control |
+| update:status | `-` | 当前播放的状态<br>等同vmodel:status<br>它是单向输出的 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认插槽,下面的数据微信没有` | status: object<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| play | - | `-` | 播放动画 |
+
+
+## 示例文件路径
+
+```json
+/pages/qita/animation
+```
+
+## 示例源码
+
+```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">动画 Animation</x-text>
+			<x-text color="#999999">
+				autoPlay允许自动播放，revert允许让动画类似toogle，即动画反转切换播放。如果设置为false将不会轮流播放，而是一次性的从头开始。
+				由于uniapp
+				x通过ref执行组件方法比较麻烦需要as类型还要取refs,非常不方便。因此我创意的通过设置control来执行动画，默认为default，播放期间始终会被设置为play，结束会自动设置会default，然后你通过v-model:control来读取设置play来控制播放。比使用ref方法更为方便。
+			</x-text>
+		</x-sheet>
+
+		<x-sheet >
+			<x-picker :list="list" v-model="aniIndex" v-model:model-str="animationName">
+				<x-cell title="选择效果" :label="animationName" :card="false"></x-cell>
+			</x-picker>
+			<view style="overflow: hidden;">
+				<x-animation :autoPlay="true" :name="animationName" v-model:control="control" >
+					<view
+						style="width:100%;height: 100px;background-color: #81be26;padding:32rpx;margin-bottom: 20px;">
+						<text style="color: white;font-size:18px">{{animationName}}</text>
+					</view>
+				</x-animation>
+			</view>
+			<x-button :block="true" @click="control='play'" size="normal">播放动画</x-button>
+		</x-sheet>
+		
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b">应用到 实际 场景中</x-text>
+		</x-sheet>
+		<view class="mx-16 round-10">
+			<x-animation :auto-play="true" name="leftIn" :duration="1700" ease="easeInOutBack">
+				<x-cell :bottomBorderInsert="true" :card="false" url="/pages/index/button" icon="apps-line"
+					desc="UTS版本tmui组件库,高质量库" title="常见组件库"></x-cell>
+				<x-cell :bottomBorderInsert="true" :card="false" url="/pages/index/icon" icon="price-tag-3-line"
+					label="+￥32" label-color="red" icon-color="red"></x-cell>
+				<x-cell :bottomBorderInsert="true" :card="false" icon="chat-smile-2-line" url="/pages/index/tag"
+					label="tmx测试" icon-color="orange"></x-cell>
+				<x-cell :bottomBorderInsert="true" :card="false" :show-bottom-border="false" icon="chat-smile-2-line"
+					url="/pages/index/tag" label="tmx测试" icon-color="orange"></x-cell>
+			</x-animation>
+		</view>
+		<view style="height:50px"></view>
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from 'vue'
+	import { PICKER_ITEM_INFO } from "@/uni_modules/tmx-ui"
+
+	const animationName = ref<string>('fadeIn')
+	const control = ref<string>('default')
+	const aniIndex = ref<string[]>(['0'])
+	const list = ref<PICKER_ITEM_INFO[]>([
+		{ title: "fadeIn" } as PICKER_ITEM_INFO,
+		{ title: "fadeOut" } as PICKER_ITEM_INFO,
+		{ title: "zoomIn" } as PICKER_ITEM_INFO,
+		{ title: "zoomOut" } as PICKER_ITEM_INFO,
+		{ title: "leftIn" } as PICKER_ITEM_INFO,
+		{ title: "leftOut" } as PICKER_ITEM_INFO,
+		{ title: "rightIn" } as PICKER_ITEM_INFO,
+		{ title: "rightOut" } as PICKER_ITEM_INFO,
+		{ title: "topIn" } as PICKER_ITEM_INFO,
+		{ title: "topOut" } as PICKER_ITEM_INFO,
+		{ title: "bottomIn" } as PICKER_ITEM_INFO,
+		{ title: "bottomOut" } as PICKER_ITEM_INFO,
+	])
+</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//345/216/237/347/224/237/345/233/276/350/241/250 Chart.md"

@@ -0,0 +1,97 @@
+# 原生图表 Chart
+
+## 介绍
+
+全新的原生图表支持所有平台，暗黑适配，更美观，渲染速度快，非webview，x-skia-u 绘制。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.87+ | 1.1.22 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-chart/x-chart.uvue
+```
+
+## 使用
+
+```ts
+<x-chart></x-chart>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| width | ``<br> | `string` | `'100%'` |
+| height | ``<br> | `string` | `'280px'` |
+| options | ``<br> | `ChartOptions` | `():ChartOptions null => (null)` |
+| preventScroll | `是否禁止页面滚动（拦截触摸事件），默认 true。设为 false 则允许页面滚动`<br> | `boolean` | `false` |
+| interactive | `是否启用交互（点击高亮、提示框），默认 true。设为 false 则纯展示`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | - |
+| reachEdge | `-` | - |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| setOptions | - | `-` | - |
+| redraw | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/chart/index
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<x-cell title="折线图 / 面积图" url="/pages/chart/line"></x-cell>
+	<x-cell title="柱状图系列" url="/pages/chart/bar"></x-cell>
+	<x-cell title="饼图系列" url="/pages/chart/pie"></x-cell>
+	<x-cell title="地图" url="/pages/chart/map"></x-cell>
+	<x-cell title="分组 / 堆叠柱" url="/pages/chart/bar-group"></x-cell>
+	<x-cell title="缩放图" url="/pages/chart/zoom"></x-cell>
+	<x-cell title="仪表盘图" url="/pages/chart/gauge"></x-cell>
+	<x-cell title="雷达图" url="/pages/chart/radar"></x-cell>
+	<x-cell title="散点图" url="/pages/chart/scatter"></x-cell>
+	<x-cell title="漏斗图 / 金字塔" url="/pages/chart/funnel"></x-cell>
+	<x-cell title="旭日图 / 矩形树图" url="/pages/chart/tree"></x-cell>
+	<x-cell title="K线图" url="/pages/chart/kline"></x-cell>
+	<view style="height:50px"></view>
+
+</template>
+
+<script lang="ts" setup>
+	
+</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//345/233/276/347/211/207/350/243/201/345/211/252 xImageResizer.md"

@@ -0,0 +1,117 @@
+# 图片裁剪 xImageResizer
+
+## 介绍
+
+兼容PC操作，可双指缩放，单指平移，翻转，也可支持电脑端滚轮缩放，鼠标平移，裁剪框四角缩放，功能齐全，操作方便。
+web端裁剪后返回的是Base64数据，其它端是文件连接。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-image-resizer/x-image-resizer.uvue
+```
+
+## 使用
+
+```ts
+<x-image-resizer></x-image-resizer>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| cropWidth | `裁剪框宽，px单位，裁剪后的图片不是这个大小，而是按比例缩放`<br> | `number` | `300` |
+| cropHeight | `裁剪框高，px单位，裁剪后的图片不是这个大小，而是按比例缩放`<br> | `number` | `300` |
+| compress | `压缩质量0-1`<br> | `number` | `1` |
+| src | `待裁剪的图片，任意地址，网络（web要注意跨域），本地地址，相对地址均可。`<br> | `string` | `''` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| confirm | `filepath: string<br>` | 确认时返回文件<br>ios,安卓返回的是缓存文件路径<br>web返回的是Bolb文件对象<br>微信返回的是base64图片数据 |
+| cancel | `-` | 取消裁剪时触 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/qita/image-resizer
+```
+
+## 示例源码
+
+```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 -->
+	<view class="imgresize" style="flex:1;background-color:#000000">
+		<x-image-resizer :compress="0.5" class="imgresize" @confirm="confirm" @cancel="oncancel" 
+		src="https://cdn.tmui.design/xui/tmui4.0banner1.jpg"
+		></x-image-resizer>
+	</view>
+</template>
+
+<script setup lang="ts">
+const confirm = (path:string)=>{
+	console.log(path)
+	// uni.previewImage({
+	// 	urls:[path],
+	// 	current:path
+	// })
+}
+const oncancel = ()=>{
+	uni.navigateBack()
+}
+</script>
+
+
+<style>
+	/* #ifdef MP-WEIXIN */
+	page,body,html{
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		background-color: black;
+	}
+	/* #endif */
+	.imgresize{
+		width: 100%;
+		height: 100%;
+		/* #ifdef MP-WEIXIN */
+		height: 100vh;
+		/* #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//345/233/276/350/241/250 xEchart.md"

@@ -0,0 +1,238 @@
+# 图表 xEchart
+
+## 介绍
+
+是百度图表6.0.0,全量版本
+传递正常的百度对象数据且需要将数据JSON.stringify化
+图表文档：https://echarts.apache.org/zh/index.html
+编译微信版本：https://echarts.apache.org/zh/builder.html
+微信版本请使用1.1.18下dmeo qita/echarts.esm.min.js文件。或者自己下载[Echart下载](https://github.com/apache/echarts/tree/6.0.0/dist)
+注意的是：如果你的配置中函数函数，需要自己转换为字符串【如果是微信端建议直接传对象，不要转为字符串这样兼容性更好。】
+比如：函数对象请参考我demo页面的示例规则分平台写否则无法实现函数对象。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-echart/x-echart.uvue
+```
+
+## 使用
+
+```ts
+<x-echart></x-echart>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| width | `容器宽`<br> | `string` | `'auto'` |
+| height | `容器高`<br> | `string` | `'250px'` |
+| opts | `hbx sdk4.76+后建议不要使用此属性，请改用ref方法setOptions`<br> | `string` | `''` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| init | `-` | 当图表初始化完成后触发，此时可以使用ref或者参数chart来来设置图表数据了。 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| setOptions | `data: union` <br>  - `小程序是object,非小程序是json序列化的字符串。` <br>  | `-` | 设置图表数据，小程序可以直接传图表对象数据。非小程序，需要序列化为字符串再赋值。 |
+| getImg | - | `-` | 暂未开放 |
+| setEcharts | `ins: Echart` <br>  - `微信专用函数。Echart实例` <br>  | `-` | 设置图表实例 |
+| eventJsCall | - | `-` | - |
+| cahrtActions | `funName: string` <br>  - `第一个参数是方法名如：resize` <br> `args: string` <br>  - `方法参数` <br> `arg: null` <br>  - `固定为null` <br>  | `-` | chart对象函数操作 |
+
+
+## 示例文件路径
+
+```json
+/pages/qita/echart
+```
+
+## 示例源码
+
+```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">图表 Echart</x-text>
+			<x-text color="#999999">
+				是百度图表6.0.0,全量版本
+			</x-text>
+		</x-sheet>
+		<x-sheet dark-color="#dcdcdc">
+			<x-echart ref="echart" @init="oninit" ></x-echart>
+			<x-button :block="true" @click="changeData">改变数据</x-button>
+			<x-button class="mt-20" :block="true" @click="addEchartsclick">注册click事件(不要重复注册)</x-button>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">测试饼图</x-text>
+		</x-sheet>
+		<x-sheet dark-color="#dcdcdc">
+			<x-echart ref="echart2" height="300px" @init="initPie" ></x-echart>
+		</x-sheet>
+		<view style="height:50px"></view>
+</template>
+
+<script setup lang="ts">
+	const echart = ref<XEchartComponentPublicInstance | null>(null)
+	const echart2 = ref<XEchartComponentPublicInstance | null>(null)
+	// #ifdef MP-WEIXIN
+	import * as echarts from "./echarts.esm.min.js"
+	// #endif
+
+	onReady(() => {
+		// #ifdef MP
+		let ele = echart.value!
+		let ele2 = echart2.value!
+		ele.setEcharts(echarts)
+		ele2.setEcharts(echarts)
+		// #endif
+	})
+	function addEchartsclick() {
+		let ele = echart.value!
+		ele.cahrtActions("click", "", (data : any) => {
+			console.log(data)
+			if (data!=null&& typeof data == 'object') {
+				uni.showModal({
+					title: "提醒",
+					content: JSON.stringify(data! as UTSJSONObject),
+					showCancel: false
+				})
+			}
+		})
+	}
+
+	function changeData() {
+		let opts = {
+			title: {
+				text: 'xui'
+			},
+			legend: {
+				data: ['xui']
+			},
+			xAxis: {
+				data: ['衬衫', '羊毛衫', '裤子', '高跟鞋', '袜子', '1高跟鞋']
+			},
+			yAxis: {},
+			series: [
+				{
+					name: 'xui',
+					type: 'bar',
+					data: [100, 50, 20, 70, 40, 600]
+				}
+			]
+		} as UTSJSONObject
+
+		echart.value?.setOptions?.(opts)
+		
+		
+		let ele = echart.value!
+		ele.cahrtActions('resize', '', null)
+	}
+	function initPie() {
+		let option = {
+			title: {
+				text: 'Referer of a Website',
+				subtext: 'Fake Data',
+				left: 'center'
+			},
+			tooltip: {
+				trigger: 'item'
+				// #ifndef MP
+				,formatter: "function(params){return params.name+'['+params.value+']';}"
+				// #endif
+				// #ifdef MP
+				,formatter: function(params){return params.name+'['+params.value+']';}
+				// #endif
+			},
+			legend: {
+				orient: 'vertical',
+				left: 'left'
+			},
+			series: [
+				{
+					name: 'Access From',
+					type: 'pie',
+					radius: '50%',
+					data: [
+						{ value: 1048, name: 'Search Engine' },
+						{ value: 735, name: 'Direct' },
+						{ value: 580, name: 'Email' },
+						{ value: 484, name: 'Union Ads' },
+						{ value: 300, name: 'Video Ads' }
+					],
+					emphasis: {
+						itemStyle: {
+							shadowBlur: 10,
+							shadowOffsetX: 0,
+							shadowColor: 'rgba(0, 0, 0, 0.5)'
+						}
+					}
+				}
+			]
+		} as UTSJSONObject;
+
+		echart2.value?.setOptions?.(option)
+	}
+
+	function oninit() {
+		let opts = {
+			title: {
+				text: 'ECharts示例'
+			},
+			tooltip: {},
+			legend: {
+				data: ['销量']
+			},
+			xAxis: {
+				data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+			},
+		
+			yAxis: {},
+			series: [
+				{
+					name: '销量',
+					type: 'bar',
+					data: [5, 20, 36, 10, 10, 20]
+				}
+			]
+
+		} as UTSJSONObject
+		echart.value?.setOptions?.(opts)
+	}
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)