tmui-cli 5.3.1 → 5.3.3

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//345/274/225/345/257/274 xGuid.md"

@@ -2,10 +2,11 @@
 
 ## 介绍
 
-内部只可放置x-guid-item。在app上根节点必须是scroll-view或者list-view等可滚动的页面使用。
-还要设置容器:scroll-with-animation="false"禁止滚去动画。
-且你的元素唯一id必须是容器的直接子节点，否则会无效(安卓会无效，为了所有平台有效，必须是容器的直接第一级子节点)。
-您可以参考我的dmeo页面使用，严格按照demo使用！！！
+内部只可放置x-guid-item，遮罩与提示卡由当前激活的x-guid-item自己渲染。
+目标元素必须有页面内唯一的id、可见、且不被隐藏（不可以封装在会裁切的容器里）。
+蒸汽模式（HBuilderX 5.12+）各端页面默认可滚动，组件会自动把目标滚进可视区；
+若页面在pages.json里配置了disableScroll:true（自定义导航栏/tabbar页面官方推荐），页面不可滚动，
+自动滚动会失败并告警，此时请自行保证目标元素在可视区内，或者设置autoScroll=false。
 
 ## 平台兼容
 
@@ -29,9 +30,17 @@
 
 | 名称 | 说明 | 类型 | 默认值 |
 | ------ | ---- | ---- | ---- |
-| maskColor | ``<br> | `string` | `'rgba(0,0,0,0.4)'` |
+| maskColor | `遮罩颜色`<br> | `string` | `'rgba(0,0,0,0.4)'` |
 | activeId | `如果要双向绑定请使用v-model:active-id,您在子组件上定义的target-id属性，且是唯一的`<br> | `string` | `''` |
-| defaultActiveId | ``<br> | `string` | `''` |
+| defaultActiveId | `初始默认选中的id，为空不自动开始引导`<br> | `string` | `''` |
+| zIndex | `遮罩与提示卡的层级，页面里有更高的固定层（底栏等）时可调大`<br> | `number` | `50` |
+| holePadding | `挖洞区域在目标矩形基础上向外扩的边距（px），目标贴边时更好看`<br> | `number` | `0` |
+| holeRadius | `高亮环圆角（px）；四块矩形遮罩做不出圆角洞，圆角由环呈现，建议ringWidth >= holeRadius x 0.3`<br> | `number` | `0` |
+| ringColor | `高亮环颜色，为空不显示环`<br> | `string` | `''` |
+| ringWidth | `高亮环粗细（px）`<br> | `number` | `2` |
+| duration | `切换步骤时遮罩与提示卡的淡入时长（ms），0为不淡入`<br> | `number` | `250` |
+| autoScroll | `目标不在可视区时，是否自动滚动页面到目标处`<br> | `boolean` | `true` |
+| scrollOffset | `透传给uni.pageScrollTo的offsetTop，用于自定义导航栏留白；`<br> | `number` | `0` |
 
 
 ## Events 事件
@@ -67,7 +76,7 @@
 ```vue
 <template>
 	<!-- activeId -->
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>
@@ -75,8 +84,11 @@
 	<!-- #endif -->
 	<x-sheet>
 		<x-text font-size="18" class="text-weight-b mb-8">引导 xGuid {{activeId}}</x-text>
-		<x-text color="#999999">引导组件，需要定位聚焦的元素必须在页面上不可以在子组件中或者隐藏中，并且必须要设定唯一id标识。</x-text>
+		<x-text color="#999999">引导组件，需要定位聚焦的元素必须在页面上不可以在子组件中或者隐藏中，并且必须要设定唯一id标识。蒸汽模式各端页面默认可滚动，目标不在可视区时组件会自动滚过去；页面若在pages.json里配置了disableScroll:true（自定义导航栏/tabbar），自动滚动会失败并告警，此时请自行保证目标可见或设置autoScroll=false。</x-text>
 	</x-sheet>
+	<view class="pa-12">
+		<x-button color="primary" :block="true" @click="onStart">重新开始引导</x-button>
+	</view>
 	<view style="height:50px"></view>
 	<view id="testId1" class="mx-16 mb-16 pa-16">
 		<x-text font-size="18" class="text-weight-b mb-8">节点1 testId1</x-text>
@@ -103,20 +115,29 @@
 		<x-text font-size="18" class="text-weight-b mb-8">节点4 testId4</x-text>
 		<view class="flex flex-row flex-row-center-end">
 			<view>
-				<x-text color="#999999">testId4</x-text>
+				<x-text color="#999999">testId4（在屏幕外，验证自动滚动定位）</x-text>
 			</view>
 		</view>
 	</view>
 	<view style="height:200px"></view>
-	<x-guid v-model:activeId="activeId" defaultActiveId="testId1">
+	<!--
+	hole-padding：挖洞在目标基础上外扩，目标贴边时更好看
+	ring-color / ring-width / hole-radius：高亮环，四块矩形遮罩做不出圆角洞，圆角由环呈现
+	z-index：遮罩与提示卡的层级，页面有更高的固定层（底栏等）时可调大
+	-->
+	<x-guid v-model:activeId="activeId" defaultActiveId="testId1" :hole-padding="6" ring-color="primary"
+		:ring-width="3" :hole-radius="8">
 		<x-guid-item v-for="(item,index) in 4" :key="item" :order="index" :targetId="`testId${item}`"
 			:title="`标题${item}`" :content="`testId${item}`"></x-guid-item>
 	</x-guid>
 </template>
 
 <script lang="ts" setup>
-	const activeId = ref('')
+	const activeId = ref('')
 	
+	const onStart = () => {
+		activeId.value = 'testId1'
+	}
 </script>
 
 <style lang="scss">

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//345/274/225/345/257/274/345/255/220/347/273/204/344/273/266 xGuidItem.md"

@@ -2,7 +2,7 @@
 
 ## 介绍
 
-内部只可放置在x-guid内。
+内部只可放置在x-guid内，遮罩、高亮环、提示卡都由它自己渲染。
 
 ## 平台兼容
 
@@ -30,6 +30,15 @@
 | order | `必填；顺序索引，一般循环的index即可。`<br> | `number` | `0` |
 | title | `标题`<br> | `string` | `""` |
 | content | `内容描述`<br> | `string` | `""` |
+| bgColor | `提示卡的背景色`<br> | `string` | `"#000000"` |
+| darkBgColor | `提示卡的暗黑背景色，为空取bgColor`<br> | `string` | `""` |
+| color | `提示卡的文字色`<br> | `string` | `"#ffffff"` |
+| round | `提示卡圆角（px）`<br> | `number` | `12` |
+| maxWidth | `提示卡宽度（px）；超过视口可用宽度时自动收窄`<br> | `number` | `350` |
+| titleSize | `标题字号（px）`<br> | `number` | `18` |
+| contentSize | `内容描述字号（px）`<br> | `number` | `14` |
+| gap | `提示卡与挖洞的间距（px）`<br> | `number` | `12` |
+| edge | `提示卡与屏幕边缘、挖洞的最小间距（px）`<br> | `number` | `12` |
 
 
 ## Events 事件
@@ -62,7 +71,7 @@
 ```vue
 <template>
 	<!-- activeId -->
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>
@@ -70,8 +79,11 @@
 	<!-- #endif -->
 	<x-sheet>
 		<x-text font-size="18" class="text-weight-b mb-8">引导 xGuid {{activeId}}</x-text>
-		<x-text color="#999999">引导组件，需要定位聚焦的元素必须在页面上不可以在子组件中或者隐藏中，并且必须要设定唯一id标识。</x-text>
+		<x-text color="#999999">引导组件，需要定位聚焦的元素必须在页面上不可以在子组件中或者隐藏中，并且必须要设定唯一id标识。蒸汽模式各端页面默认可滚动，目标不在可视区时组件会自动滚过去；页面若在pages.json里配置了disableScroll:true（自定义导航栏/tabbar），自动滚动会失败并告警，此时请自行保证目标可见或设置autoScroll=false。</x-text>
 	</x-sheet>
+	<view class="pa-12">
+		<x-button color="primary" :block="true" @click="onStart">重新开始引导</x-button>
+	</view>
 	<view style="height:50px"></view>
 	<view id="testId1" class="mx-16 mb-16 pa-16">
 		<x-text font-size="18" class="text-weight-b mb-8">节点1 testId1</x-text>
@@ -98,20 +110,29 @@
 		<x-text font-size="18" class="text-weight-b mb-8">节点4 testId4</x-text>
 		<view class="flex flex-row flex-row-center-end">
 			<view>
-				<x-text color="#999999">testId4</x-text>
+				<x-text color="#999999">testId4（在屏幕外，验证自动滚动定位）</x-text>
 			</view>
 		</view>
 	</view>
 	<view style="height:200px"></view>
-	<x-guid v-model:activeId="activeId" defaultActiveId="testId1">
+	<!--
+	hole-padding：挖洞在目标基础上外扩，目标贴边时更好看
+	ring-color / ring-width / hole-radius：高亮环，四块矩形遮罩做不出圆角洞，圆角由环呈现
+	z-index：遮罩与提示卡的层级，页面有更高的固定层（底栏等）时可调大
+	-->
+	<x-guid v-model:activeId="activeId" defaultActiveId="testId1" :hole-padding="6" ring-color="primary"
+		:ring-width="3" :hole-radius="8">
 		<x-guid-item v-for="(item,index) in 4" :key="item" :order="index" :targetId="`testId${item}`"
 			:title="`标题${item}`" :content="`testId${item}`"></x-guid-item>
 	</x-guid>
 </template>
 
 <script lang="ts" setup>
-	const activeId = ref('')
+	const activeId = ref('')
 	
+	const onStart = () => {
+		activeId.value = 'testId1'
+	}
 </script>
 
 <style lang="scss">

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//346/220/234/347/264/242/346/240/217 xSearch.md"

@@ -83,7 +83,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//346/227/266/351/227/264/345/221/250 xWeekbar.md"

@@ -88,7 +88,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
 	</page-meta>

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//346/240/207/347/255/276/345/257/274/350/210/252 xTabs.md"

@@ -84,7 +84,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//346/240/207/351/242/230/345/257/274/350/210/252 xNavbar.md"

@@ -80,7 +80,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//347/262/230/346/200/247/345/270/203/345/261/200 Sticky.md"

@@ -63,7 +63,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//347/264/242/345/274/225 xIndexbar.md"

@@ -4,6 +4,7 @@
 
 特别提醒：本组件在1.0.9重构不向下兼容，并且删除了子组件：x-indexbar-item，不再需要子组件。请使用对应的动态插槽来渲染数据。
 App/Web/鸿蒙端内部为单个 list-view + sticky-section 原生吸顶：顶部 top 插槽随列表上推，下方按 A/B/C 分组，分类标题滑到当前组时原生吸顶（类似 iOS 通讯录 / 微信联系人）；小程序端为单个 scroll-view（using-sticky 吸顶），不用嵌套滚动。
+右侧索引条默认离右边 12px（right 属性可调），安卓端列表会为它让出一条（索引条宽 16px + right，默认 28px），索引条不再压在列表上，列表内容的可用宽度因此比其它端窄 28px；安卓的索引条触摸挂在每个字母上，不依赖矩形换算。
 
 ## 平台兼容
 
@@ -29,6 +30,7 @@ App/Web/鸿蒙端内部为单个 list-view + sticky-section 原生吸顶：顶
 | ------ | ---- | ---- | ---- |
 | width | `宽`<br> | `string` | `"auto"` |
 | height | `高，%,rpx,px单位均可。`<br> | `string` | `"100%"` |
+| right | `右侧索引条离右边的距离，px,rpx单位均可。`<br> | `string` | `"12"` |
 | dotActiveColor | `侧边指示激活时的文字颜色`<br>`空值是取全局主题值`<br> | `string` | `""` |
 | dotColor | `侧边指示未激活时的文字颜色`<br> | `string` | `"#c0c0c0"` |
 | dotBgColor | `侧边指示的背景颜色`<br> | `string` | `"white"` |
@@ -69,7 +71,7 @@ App/Web/鸿蒙端内部为单个 list-view + sticky-section 原生吸顶：顶
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
 	</page-meta>
@@ -77,13 +79,40 @@ App/Web/鸿蒙端内部为单个 list-view + sticky-section 原生吸顶：顶
 	<!-- #endif -->
 
 	
-	<view class="mx-16 flex-1">
-		<x-indexbar :customSliderBar="['搜','火']" :list="list" height="100%" cellHeight="72">
+	<view class="flex-1">
+		<x-indexbar :customSliderBar="['#','搜','火']" :list="list" height="100%" cellHeight="72">
 			<template v-slot:top>
-				<x-search color="transparent" input-bg-color="#ffffff"></x-search>
+				<!--
+					top 插槽：索引条上的自定义项（# 搜 火 热 新）没有对应的列表分组，
+					点它们都会定位到这个插槽，所以这些项对应的内容要写在这里。
+				-->
+				<view >
+					<x-search round="0" darkColor="transparent" color="transparent" input-bg-color="#ffffff"></x-search>
+
+					<view class="pa-16">
+						<!-- # 对应的内容：点右侧 # 回到顶部搜索框这里 -->
+						<view class="flex flex-row flex-row-center-between mt-16">
+							<view class="flex flex-row flex-row-center-start">
+								<text class="text-size-lg text-weight-b" :style="{color:textColor}">#</text>
+								<text class="text-size-s ml-8" :style="{color:textColor}">快捷入口</text>
+							</view>
+							<text class="text-size-xxs opacity-6" :style="{color:textColor}">点右侧 # 回到这里</text>
+						</view>
+						
+						<!-- 搜 / 火 / 热 / 新 对应的内容 -->
+						<view class="flex flex-row flex-wrap mt-12">
+							<view v-for="(item, index) in quickEntries" :key="index"
+								class="flex flex-row flex-row-center-start round-12 px-16 py-8 mr-12 mb-12"
+								:style="{backgroundColor:chipBgColor}">
+								<text class="text-size-xs text-weight-b" :style="{color:textColor}">{{item.tag}}</text>
+								<text class="text-size-xs ml-8 opacity-8" :style="{color:textColor}">{{item.title}}</text>
+							</view>
+						</view>
+					</view>
+				</view>
 			</template>
 			<template v-slot:default="{index,currentIndex,current}">
-				<view class="flex flex-row flex-row-center-start" style="border-bottom: 1px solid rgba(100, 100, 100, 0.1);height:72px;">
+				<view class="flex flex-row flex-row-center-start px-16 " style="border-bottom: 1px solid rgba(100, 100, 100, 0.1);height:72px;">
 					<image class="flex-shrink" :src="`https://picsum.photos/100/100?random=${index}`" style="width:50px;height:50px;border-radius: 50px;"></image>
 					<text :style="{color:isDark?'#ffffff':'#000000'}" class="ml-20">{{(current as Record<string, any>)["name"]}}</text>
 				</view>
@@ -97,7 +126,20 @@ App/Web/鸿蒙端内部为单个 list-view + sticky-section 原生吸顶：顶
 	// 示例参数数据,请vip用户到demo中下载查询数据样例.
 	import {dataslist} from "./indexdata"
 	import { xConfig } from "@/uni_modules/tmx-ui";
+
+	type QuickEntry = {
+		tag : string,
+		title : string
+	}
+
 	const isDark = computed(():boolean => xConfig.dark=='dark')
+	const textColor = computed(():string => isDark.value?'#ffffff':'#000000')
+	const chipBgColor = computed(():string => isDark.value?'rgba(255,255,255,0.10)':'rgba(0,0,0,0.05)')
+	// 索引条上的 搜/火/热/新 自定义项对应的内容样例
+	const quickEntries = ref<QuickEntry[]>([
+		{ tag: '搜', title: '雷克萨斯 ES 200' },
+		{ tag: '火', title: '保时捷 911' }
+	] as QuickEntry[])
 	const list = ref<Record<string, any>[]>(JSON.parse(dataslist) as Record<string, any>[])
 </script>
 

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/257/274/350/210/252/347/273/204/344/273/266//350/277/224/345/233/236/351/241/266/351/203/250 xBacktop.md"

@@ -71,7 +71,7 @@
 ```vue
 <template>
 
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

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/markdown xCmarkdown.md"

@@ -71,7 +71,7 @@ markdown组件,可以用来渲染标签的html文章或者纯Markdown或者markd
 ```vue
 <template>
 
-		<!-- #ifdef MP-WEIXIN -->
+		<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 		<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 			<navigation-bar :background-color="xThemeConfigNavBgColor"
 				:front-color="xThemeConfigNavFontColor"></navigation-bar>
@@ -218,7 +218,7 @@ border-color: transparent; margin: 0px 14px 14px; padding: 14px; box-shadow: non
 const hello = 'world';
 \`\`\`
 
-这是一个[链接](https://example.com)和一张![图片](https://xui.tmui.design/lp-18.jpg)。
+这是一个[链接](https://example.com)和一张![图片](https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png)。
 
 ---
 
@@ -318,7 +318,14 @@ const hello = 'world';
 
 ### 图片
 
-![引用图片](https://xui.tmui.design/lp-18.jpg)
+![DCloud Logo](https://web-assets.dcloud.net.cn/unidoc/zh/uni@2x.png)
+
+<img src="https://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png" alt="指定尺寸" width="200" height="80">
+
+### 视频
+
+<video src="https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4" width="100%" controls></video>
+
 
 ## 7. 表格测试
 

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/200/222/350/256/241/346/227/266 xCountdown.md"

@@ -73,7 +73,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

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/210/206/345/211/262/347/272/277 xDivider.md"

@@ -67,7 +67,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
 	</page-meta>

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/210/227/350/241/250 xCell.md"

@@ -94,7 +94,7 @@ card为true时，圆角可统一全局配置和动态全局配置，保持所有
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

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/212/250/346/200/201/345/205/250/345/261/217 xViewTofull.md"

@@ -65,7 +65,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

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/215/241/347/211/207 xCard.md"

@@ -81,7 +81,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

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"

@@ -73,7 +73,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
 	</page-meta>

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"

@@ -70,7 +70,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

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"

@@ -70,7 +70,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
 	</page-meta>

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"

@@ -75,7 +75,7 @@
 
 ```vue
 <template>
-	<!-- #ifdef MP-WEIXIN -->
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
 	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
 		<navigation-bar :background-color="xThemeConfigNavBgColor"
 			:front-color="xThemeConfigNavFontColor"></navigation-bar>

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/257/214/346/226/207/346/234/254 xHtml.md"

@@ -0,0 +1,186 @@
+# 富文本 xHtml
+
+## 介绍
+
+HTML 渲染组件（我同时也提供了一个原生渲染HTML的插件x-html-u，类似头条，如果你有更高需要需求，比如安全控制和定义渲染，渲染为页面图片请使用此原生插件，如果只是普通需要可以用本页面组件）。App 端基于官方 rich-text 原生渲染，Web / 小程序基于 htmlparser2 节点渲染。只支持 HTML，不解析 Markdown。
+App 端使用官方 rich-text 原生渲染，默认 mode="native"。
+Web / MP-WEIXIN 使用条件编译：htmlparser2 解析 HTML 为节点树，再由全局子组件 x-html-node 递归渲染，支持链接和图片点击等扩展能力。
+htmlparser2 只在 Web / 小程序分支引入，App 端不会编译 x-html-node 和解析库。
+支持的标签和样式以官方 rich-text 文档为准：br、p、ul、li、span、strong、i、big、small、a、u、del、h1-h6、img；Web/小程序节点渲染额外支持表格、pre、blockquote 等常见标签。
+官方文档：https://doc.dcloud.net.cn/uni-app-x/component/rich-text.html
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-html/x-html.uvue
+```
+
+## 使用
+
+```ts
+<x-html></x-html>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| value | `需要渲染的 HTML 字符串，只支持 HTML，不解析 Markdown`<br> | `string` | `""` |
+| mode | `渲染模式。仅 App 端生效：native 使用原生 rich-text，web 使用 webview；Web/小程序端固定走节点渲染`<br> | `union` | `'native'` |
+| space | `显示连续空格的方式：ensp / emsp / nbsp`<br> | `string` | `''` |
+| userSelect | `文本是否可选`<br> | `boolean` | `true` |
+| contentStyle | `App：rich-text 的全局样式，支持 font-size / font-family / line-height / color；Web/小程序：作为节点的基础文本样式，暗黑模式下未指定 color 时默认 #ffffff`<br> | `string` | `"line-height:1.6;"` |
+| selectionHandleColor | `选择区域高亮手柄颜色（仅 App native）`<br> | `string` | `"#4285F4FF"` |
+| selectionBackgroundColor | `选择区域高亮背景颜色（仅 App native）`<br> | `string` | `"#33B5E566"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| itemClick | `<br>` | 点击 a 或 img 时触发。 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/html
+```
+
+## 示例源码
+
+```vue
+<template>
+
+	<!-- #ifdef MP-WEIXIN || MP-ALIPAY -->
+	<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">富文本 HTML xHtml</x-text>
+		<x-text color="#999999">
+			App 端基于官方 rich-text，Web / 小程序走节点渲染；只支持 HTML，不解析 Markdown。
+			App 端使用官方 rich-text 原生渲染；Web/小程序通过条件编译使用 htmlparser2 解析节点，再由 x-html-node 递归渲染，支持链接和图片点击。
+			App 端支持的标签以官方 rich-text 为准，Web/小程序额外支持表格、pre、blockquote、ol 等。
+		</x-text>
+	</x-sheet>
+	<x-sheet>
+		<x-html :value="html" @itemClick="onItemClick"></x-html>
+		<x-button class="mt-20" @click="appendHtml" :block="true">追加一段 HTML</x-button>
+	</x-sheet>
+
+	<!-- #ifdef WEB || MP-WEIXIN || MP-ALIPAY -->
+	<x-sheet>
+		<x-text font-size="16" class="text-weight-b mb-8">Web / 小程序扩展标签</x-text>
+		<x-text color="#999999" class="mb-12">
+			App 端以官方 rich-text 支持范围为准；Web/小程序节点渲染额外支持表格、引用、代码块和有序列表。
+		</x-text>
+		<x-html :value="richHtml" @itemClick="onItemClick"></x-html>
+	</x-sheet>
+	<!-- #endif -->
+
+</template>
+
+<script setup lang="ts">
+	import { ref } from "vue"
+
+	const html = ref<string>(`<h1>富文本 HTML</h1>
+<p style="line-height:1.8;">
+	这是 <strong>加粗</strong>、<i>斜体</i>、<u>下划线</u>、<del>删除线</del> 和
+	<span style="color:#ff6600;">彩色文字</span> 的示例。
+	<br/>第二行还可以放 <big>大号文字</big> 和 <small>小号文字</small>。
+</p>
+<h2>列表</h2>
+<ul>
+	<li>第一项</li>
+	<li>第二项</li>
+	<li>第三项</li>
+</ul>
+<h2>链接和图片</h2>
+<p>
+	<a href="https://xui.tmui.design">点击打开 TMUI 官网</a>
+</p>
+<p>
+	<img src="https://xui.tmui.design/assets/logo-a483vlZl.png" style="width:120px;height:auto;" />
+</p>
+顶层行内混排（没有 p 包裹）：<strong>加粗</strong>、<a href="https://xui.tmui.design">链接</a>和普通文字应该保持在同一行。
+`)
+
+	// #ifdef WEB || MP-WEIXIN || MP-ALIPAY
+	const richHtml = ref<string>(`<h2>表格</h2>
+<table>
+	<caption>组件对照</caption>
+	<thead>
+		<tr><th>组件</th><th>说明</th></tr>
+	</thead>
+	<tbody>
+		<tr><td>x-html</td><td>HTML 渲染入口</td></tr>
+		<tr><td>x-html-node</td><td>内部递归节点渲染器，不单独使用</td></tr>
+	</tbody>
+</table>
+<h2>引用和代码</h2>
+<blockquote>Web / 小程序节点渲染支持 blockquote。</blockquote>
+<pre><code>const html = "&lt;strong&gt;hello&lt;/strong&gt;";
+console.log(html);</code></pre>
+<h2>有序列表</h2>
+<ol start="3">
+	<li>第三项</li>
+	<li>第四项</li>
+</ol>
+`)
+	// #endif
+
+	function onItemClick(detail : Record<string, any>) : void {
+		const href = detail['href'] as string
+		const src = detail['src'] as string
+		let text = ''
+		if (href != null && href != '') {
+			text = href
+		} else if (src != null && src != '') {
+			text = src
+		}
+		if (text == '') return
+		uni.showToast({
+			title: text,
+			icon: 'none'
+		})
+	}
+
+	function appendHtml() : void {
+		html.value = html.value + `<p style="line-height:1.8;">
+	追加的一段 HTML：<strong>动态更新</strong>、<span style="color:#007aff;">蓝色文字</span>。
+</p>`
+	}
+</script>
+
+<style>
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)