tmui-cli 2.0.5 → 5.3.1

package/data/uniappx/component/glass-effect-view.md

@@ -10,23 +10,23 @@
 如果使用本组件实现tabbar，自定义性会强于pages.json的tabbar，但无法实现iOS UITabBar左右滑动item的动效。
 
 ### 兼容性 
-| Web | 微信小程序 | Android | iOS 系统版本 | iOS(VDOM) | iOS(Vapor) | HarmonyOS |
-| :- | :- | :- | :- | :- | :- | :- |
-| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 15.0 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 5.25 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+| Web | 微信小程序 | 支付宝小程序 | Android | iOS 系统版本 | iOS(VDOM) | iOS(Vapor) | HarmonyOS |
+| :- | :- | :- | :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 15.0 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 5.25 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
 
 - iOS26以下：组件降级为系统毛玻璃效果，"regular" 映射为系统标准毛玻璃材质，"clear" 映射为更轻、更透明的毛玻璃材质，interactive、tint-color 属性将不生效。
-- 液态玻璃（Liquid Glass）是iOS26特有效果。它和毛玻璃在显示效果、触摸效果上并不一样。如需其他平台上使用毛玻璃效果，应使用css的[backdrop-filter](../css/backdrop-filter.md)
+- 液态玻璃（Liquid Glass）是iOS26特有效果。它和毛玻璃在显示效果、触摸效果上并不一样。但多端适配时，其他平台应该和iOS26以下一样，降级为毛玻璃效果。毛玻璃/背景高斯模糊使用css的[backdrop-filter](../css/backdrop-filter.md)实现。
 
 ### 属性 
 | 名称 | 类型 | 默认值 | 兼容性 | 描述 |
 | :- | :- | :- |  :-: | :- |
-| glass-style | string | "regular" | Web x / 微信小程序 x / Android x / iOS 系统版本 15.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 玻璃效果样式 |
+| glass-style | string | "regular" | Web x / 微信小程序 x / 支付宝小程序 x / Android x / iOS 系统版本 15.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 玻璃效果样式 |
 | 合法值 | 描述 |
 | :- | :- |
 | regular | 常规玻璃效果 |
 | clear | 更通透的玻璃效果 |
-| interactive | boolean | false | Web x / 微信小程序 x / Android x / iOS 系统版本 26.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 是否启用液态玻璃的交互行为，仅 iOS 26 及以上生效 |
-| tint-color | string(string.ColorString) |   | Web x / 微信小程序 x / Android x / iOS 系统版本 26.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 施加在液态玻璃效果上的着色，仅 iOS 26 及以上生效 |
+| interactive | boolean | false | Web x / 微信小程序 x / 支付宝小程序 x / Android x / iOS 系统版本 26.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 是否启用液态玻璃的交互行为，仅 iOS 26 及以上生效 |
+| tint-color | string(string.ColorString) |   | Web x / 微信小程序 x / 支付宝小程序 x / Android x / iOS 系统版本 26.0 / iOS(VDOM) x / iOS(Vapor) 5.25 / HarmonyOS x（部分支持，见上） | 施加在液态玻璃效果上的着色，仅 iOS 26 及以上生效 |
 
 ### 子组件 @children-tags
 支持所有组件
@@ -60,10 +60,12 @@
         <text class="stage-text stage-text-bottom">iOS</text>
         <glass-effect-view
           v-if="data.glassStyle == 'regular'"
+          id="clickable-glass-effect-view"
           class="glass-panel"
           glass-style="regular"
           :interactive="data.interactive"
-          :tint-color="data.tintColor">
+          :tint-color="data.tintColor"
+          @click="onGlassClick">
           <view class="glass-content">
             <text class="glass-title">regular</text>
             <text class="glass-detail">interactive: {{ data.interactive }}</text>
@@ -92,7 +94,7 @@
         @change="changeGlassStyle"></enum-data>
       <boolean-data
         title="interactive 启用交互行为"
-        :defaultValue="false"
+        :value="false"
         @change="changeInteractive"></boolean-data>
       <enum-data
         title="tint-color 玻璃效果着色"

package/data/uniappx/component/grid-builder.md

@@ -2,27 +2,27 @@
 ## grid-builder
 
 ### 兼容性 
-| Web | 微信小程序 | Android | iOS | HarmonyOS |
-| :- | :- | :- | :- | :- |
-| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+| Web | 微信小程序 | 支付宝小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
 
 ### 属性 
 | 名称 | 类型 | 兼容性 | 描述 |
 | :- | :- |  :-: | :- |
-| padding | Array | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
-| list | Array | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>需要用于渲染的列表 |
-| child-count | Array | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>完整列表的长度，如果不传则取 list 的长度作为其值 |
-| type | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>布局方式 |
+| padding | Array | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
+| list | Array | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>需要用于渲染的列表 |
+| child-count | Array | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>完整列表的长度，如果不传则取 list 的长度作为其值 |
+| type | string | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>布局方式 |
 | 合法值 | 兼容性 | 描述 |
 | :- |  :-: | :- |
-| aligned | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 每行高度由同一行中最大高度子节点决定 |
-| masonry | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 瀑布流，根据子元素高度自动布局 |
-| cross-axis-count | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素数量 |
-| max-cross-axis-extent | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素最大范围 |
-| main-axis-gap | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>主轴方向间隔 |
-| cross-axis-gap | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴方向间隔 |
-| @itembuild | eventhandle | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号 |
-| @itemdispose | eventhandle | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号 |
+| aligned | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 每行高度由同一行中最大高度子节点决定 |
+| masonry | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 瀑布流，根据子元素高度自动布局 |
+| cross-axis-count | number | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素数量 |
+| max-cross-axis-extent | number | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素最大范围 |
+| main-axis-gap | number | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>主轴方向间隔 |
+| cross-axis-gap | number | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴方向间隔 |
+| @itembuild | eventhandle | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>列表项创建时触发，event.detail = {index}，index 即被创建的列表项序号 |
+| @itemdispose | eventhandle | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandle)*<br/>列表项回收时触发，event.detail = {index}，index 即被回收的列表项序号 |
 
 ### 参见
 - [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.grid-builder)

package/data/uniappx/component/grid-view.md

@@ -2,23 +2,23 @@
 ## grid-view
 
 ### 兼容性 
-| Web | 微信小程序 | Android | iOS | HarmonyOS |
-| :- | :- | :- | :- | :- |
-| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+| Web | 微信小程序 | 支付宝小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
 
 ### 属性 
 | 名称 | 类型 | 兼容性 | 描述 |
 | :- | :- |  :-: | :- |
-| type | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>布局方式 |
+| type | string | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>布局方式 |
 | 合法值 | 兼容性 | 描述 |
 | :- |  :-: | :- |
-| aligned | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 每行高度由同一行中最大高度子节点决定 |
-| masonry | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 瀑布流，根据子元素高度自动布局 |
-| cross-axis-count | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素数量 |
-| max-cross-axis-extent | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素最大范围 |
-| main-axis-gap | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>主轴方向间隔 |
-| cross-axis-gap | number | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴方向间隔 |
-| padding | Array | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
+| aligned | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 每行高度由同一行中最大高度子节点决定 |
+| masonry | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 瀑布流，根据子元素高度自动布局 |
+| cross-axis-count | number | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素数量 |
+| max-cross-axis-extent | number | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴元素最大范围 |
+| main-axis-gap | number | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>主轴方向间隔 |
+| cross-axis-gap | number | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(number)*<br/>交叉轴方向间隔 |
+| padding | Array | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array)*<br/>长度为 4 的数组，按 top、right、bottom、left 顺序指定内边距 |
 
 ### 参见
 - [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.grid-view)

package/data/uniappx/component/horizontal-drag-gesture-handler.md

@@ -2,28 +2,28 @@
 ## horizontal-drag-gesture-handler
 
 ### 兼容性 
-| Web | 微信小程序 | Android | iOS | HarmonyOS |
-| :- | :- | :- | :- | :- |
-| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+| Web | 微信小程序 | 支付宝小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- | :- |
+| <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
 
 ### 属性 
 | 名称 | 类型 | 兼容性 | 描述 |
 | :- | :- |  :-: | :- |
-| tag | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>声明手势协商时的组件标识 |
-| worklet:ongesture | eventhandler | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>手势识别成功的回调 |
+| tag | string | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>声明手势协商时的组件标识 |
+| worklet:ongesture | eventhandler | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(eventhandler)*<br/>手势识别成功的回调 |
 | 合法值 | 兼容性 | 描述 |
 | :- |  :-: | :- |
-| state | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手势状态 |
-| absoluteX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对于全局的 X 坐标 |
-| absoluteY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对于全局的 Y 坐标 |
-| deltaX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对上一次，X 轴方向移动的坐标 |
-| deltaY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对上一次，Y 轴方向移动的坐标 |
-| velocityX | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手指离开屏幕时的横向速度（pixel per second) |
-| velocityY | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手指离开屏幕时的纵向速度（pixel per second) |
-| worklet:should-response-on-move | callback | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(callback)*<br/>手指移动过程中手势是否响应 |
-| worklet:should-accept-gesture | callback | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(callback)*<br/>手势是否应该被识别 |
-| simultaneous-handlers | Array.&lt;string&gt; | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array.&lt;string&gt;)*<br/>声明可同时触发的手势节点 |
-| native-view | string | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>代理的原生节点类型 |
+| state | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手势状态 |
+| absoluteX | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对于全局的 X 坐标 |
+| absoluteY | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对于全局的 Y 坐标 |
+| deltaX | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对上一次，X 轴方向移动的坐标 |
+| deltaY | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 相对上一次，Y 轴方向移动的坐标 |
+| velocityX | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手指离开屏幕时的横向速度（pixel per second) |
+| velocityY | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 手指离开屏幕时的纵向速度（pixel per second) |
+| worklet:should-response-on-move | callback | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(callback)*<br/>手指移动过程中手势是否响应 |
+| worklet:should-accept-gesture | callback | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(callback)*<br/>手势是否应该被识别 |
+| simultaneous-handlers | Array.&lt;string&gt; | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(Array.&lt;string&gt;)*<br/>声明可同时触发的手势节点 |
+| native-view | string | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | *(string)*<br/>代理的原生节点类型 |
 
 ### 参见
 - [相关 Bug](https://issues.dcloud.net.cn/?mid=component.wx.skyline.horizontal-drag-gesture-handler)

package/data/uniappx/component/icon.md

@@ -4,14 +4,14 @@
 图标
 
 ### 兼容性 
-| Web | 微信小程序 | Android | iOS | HarmonyOS |
-| :- | :- | :- | :- | :- |
-| 4.0 | 4.41 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
+| Web | 微信小程序 | 支付宝小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 5.31 | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> | <a style="color:unset;" href="https://vote.dcloud.net.cn/#/?name=uni-app%20x">x</a> |
 
 ### 属性 
 | 名称 | 类型 | 兼容性 | 描述 |
 | :- | :- |  :-: | :- |
-| type | string | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
+| type | string | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
 | 合法值 |
 | :- |
 | success |
@@ -22,8 +22,8 @@
 | download |
 | search |
 | clear |
-| size | number | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的大小，单位px |
-| color | string(string.ColorString) | Web 4.0 / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的颜色，同css的color |
+| size | number | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的大小，单位px |
+| color | string(string.ColorString) | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android x / iOS x / HarmonyOS x（部分支持，见上） | icon的颜色，同css的color |
 
 ### 参见
 - [相关 Bug](https://issues.dcloud.net.cn/?mid=component.basic-content.icon)

package/data/uniappx/component/image.md

@@ -6,39 +6,39 @@
  图片
 
 ### 兼容性 
-| Web | 微信小程序 | Android | iOS | HarmonyOS |
-| :- | :- | :- | :- | :- |
-| 4.0 | 4.41 | 3.9 | 4.11 | 4.61 |
+| Web | 微信小程序 | 支付宝小程序 | Android | iOS | HarmonyOS |
+| :- | :- | :- | :- | :- | :- |
+| 4.0 | 4.41 | 5.31 | 3.9 | 4.11 | 4.61 |
 
 ### 属性 
 | 名称 | 类型 | 默认值 | 兼容性 | 描述 |
 | :- | :- | :- |  :-: | :- |
-| src | string(string.ImageURIString) |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片资源地址 |
-| mode | string | "scaleToFill" | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片裁剪、缩放的模式 |
+| src | string(string.ImageURIString) |   | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片资源地址 |
+| mode | string | "scaleToFill" | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片裁剪、缩放的模式 |
 | 合法值 | 兼容性 | 描述 |
 | :- |  :-: | :- |
-| scaleToFill | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
-| aspectFit | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
-| aspectFill | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |
-| widthFix | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 宽度不变，高度自动变化，保持原图宽高比不变 |
-| heightFix | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 高度不变，宽度自动变化，保持原图宽高比不变 |
-| top | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的顶部区域 |
-| bottom | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的底部区域 |
-| center | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的中间区域 |
-| left | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左边区域 |
-| right | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右边区域 |
-| top left | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左上边区域 |
-| top right | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右上边区域 |
-| bottom left | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左下边区域 |
-| bottom right | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右下边区域 |
-| lazy-load | boolean | false | Web x / 微信小程序 4.41 / Android x / iOS 4.11 / HarmonyOS(VDOM) - / HarmonyOS(Vapor) x（部分支持，见上） | 图片懒加载。只针对page与scroll-view下的image有效。 安卓默认懒加载不支持修改 |
-| fade-show | boolean | false | Web x / 微信小程序 x / Android 3.9 / iOS x / HarmonyOS x（部分支持，见上） | 图片显示动画效果 |
-| webp | boolean | true | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS(VDOM) - / HarmonyOS(Vapor) x（部分支持，见上） | 是否支持 WebP 格式，web、app平台默认支持 WebP 格式，不支持本属性，无法关闭对 WebP 格式的解析。 |
-| show-menu-by-longpress | boolean | false | Web x / 微信小程序 4.41 / Android x / iOS x / HarmonyOS x（部分支持，见上） | 开启长按图片显示识别小程序码菜单 |
-| draggable | boolean | false | Web 4.0 / 微信小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 鼠标长按是否能拖动图片(仅H5平台) |
-| flatten | boolean | false | Web x / 微信小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 是否拍平组件 |
-| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片加载错误时触发，event.detail = { errMsg } |
-| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void |   | Web 4.0 / 微信小程序 4.41 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片加载完成时触发，event.detail = { width: '图片宽度px', height: '图片高度px' } |
+| scaleToFill | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
+| aspectFit | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
+| aspectFill | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取 |
+| widthFix | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 宽度不变，高度自动变化，保持原图宽高比不变 |
+| heightFix | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 高度不变，宽度自动变化，保持原图宽高比不变 |
+| top | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的顶部区域 |
+| bottom | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的底部区域 |
+| center | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的中间区域 |
+| left | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左边区域 |
+| right | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右边区域 |
+| top left | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左上边区域 |
+| top right | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右上边区域 |
+| bottom left | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的左下边区域 |
+| bottom right | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 不缩放图片，只显示图片的右下边区域 |
+| lazy-load | boolean | false | Web x / 微信小程序 4.41 / 支付宝小程序 5.31 / Android x / iOS 4.11 / HarmonyOS(VDOM) - / HarmonyOS(Vapor) x（部分支持，见上） | 图片懒加载。只针对page与scroll-view下的image有效。 安卓默认懒加载不支持修改 |
+| fade-show | boolean | false | Web x / 微信小程序 x / 支付宝小程序 x / Android 3.9 / iOS x / HarmonyOS x（部分支持，见上） | 图片显示动画效果 |
+| webp | boolean | true | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS(VDOM) - / HarmonyOS(Vapor) x（部分支持，见上） | 是否支持 WebP 格式，web、app平台默认支持 WebP 格式，不支持本属性，无法关闭对 WebP 格式的解析。 |
+| show-menu-by-longpress | boolean | false | Web x / 微信小程序 4.41 / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 开启长按图片显示识别小程序码菜单 |
+| draggable | boolean | false | Web 4.0 / 微信小程序 x / 支付宝小程序 x / Android x / iOS x / HarmonyOS x（部分支持，见上） | 鼠标长按是否能拖动图片(仅H5平台) |
+| flatten | boolean | false | Web x / 微信小程序 x / 支付宝小程序 x / Android(VDOM) x / Android(Vapor) 5.21 / iOS(VDOM) x / iOS(Vapor) 5.11 / HarmonyOS(VDOM) x / HarmonyOS(Vapor) 5.0（部分支持，见上） | 是否拍平组件 |
+| @error | (event: [UniImageErrorEvent](#uniimageerrorevent)) => void |   | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片加载错误时触发，event.detail = { errMsg } |
+| @load | (event: [UniImageLoadEvent](#uniimageloadevent)) => void |   | Web 4.0 / 微信小程序 4.41 / 支付宝小程序 5.31 / Android 3.9 / iOS 4.11 / HarmonyOS 4.61 | 图片加载完成时触发，event.detail = { width: '图片宽度px', height: '图片高度px' } |
 
 ### 事件
 #### UniImageErrorEvent
@@ -83,20 +83,20 @@ UniImageLoadEvent -- Extends --> UniEvent
 - 小程序平台支持的图片格式与浏览器类似。但由于不同小程序平台的webview版本不一样，需要具体查阅小程序平台的图片组件介绍。\
 	注意：webp在不同小程序平台策略不同，有的需要打开 webp 属性，有的仅支持来自服务器的webp。
 - App平台支持的图片格式如下：
-
-| 图片格式| Android							| iOS												| HarmonyOS	| 备注																					|
-| ---			| ---									| ---												| ---				| ---																					|
-| BMP			| √										| √													| √					|																							|
-| GIF			| √										| √													| √					|																							|
-| ICO			| √										| √													| √					|																							|
-| JPG			| √										| √													| √					|																							|
-| PNG			| √										| √													| √					|																							|
-| WebP		| √										| √													| √					|iOS 14+ 为硬解码，低版本为软解码（软解性能较低）	|
-| HEIC		| √ (Android10+)			| √													| √					|																							|
-| AVIF		| √ (HBuilderX5.08+)	| √ (iOS16+)								| x					|系统支持硬解才有优势，使用三方软解还不如换用其他格式	|
-| TIF			| x										| √													| x					|																							|
-| SVG			| √ (HBuilderX4.81+)	| √ (iOS13+ HBuilderX4.81+)	| ️√				|	不支持svg动画。某些场景会解成位图渲染，[详见](#svg-support)		|
-
+
+| 图片格式| Android							| iOS												| HarmonyOS	| 备注																					|
+| ---			| ---									| ---												| ---				| ---																					|
+| BMP			| √										| √													| √					|																							|
+| GIF			| √										| √													| √					|																							|
+| ICO			| √										| √													| √					|																							|
+| JPG			| √										| √													| √					|																							|
+| PNG			| √										| √													| √					|																							|
+| WebP		| √										| √													| √					|iOS 14+ 为硬解码，低版本为软解码（软解性能较低）	|
+| HEIC		| √ (Android10+)			| √													| √					|																							|
+| AVIF		| √ (HBuilder5.08+)	| √ (iOS16+)								| x					|系统支持硬解才有优势，使用三方软解还不如换用其他格式	|
+| TIF			| x										| √													| x					|																							|
+| SVG			| √ (HBuilder4.81+)	| √ (iOS13+ HBuilder4.81+)	| ️√				|	不支持svg动画。某些场景会解成位图渲染，[详见](#svg-support)		|
+
 
 如需其他图片格式，可自行开发uts组件插件或搜索插件市场，如
 - [apng插件](https://ext.dcloud.net.cn/search?q=apng&orderBy=Relevance&cat1=8&cat2=82)
@@ -121,14 +121,22 @@ UniImageLoadEvent -- Extends --> UniEvent
 	* 鸿蒙平台 VDOM 模式 image 组件使用 arkUI 的 image 组件，缓存策略[另见](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-basic-components-image?ha_source=Dcloud&ha_sourceId=89000448)
 	* 鸿蒙平台蒸汽模式image组件使用[imageknifepro](https://gitcode.com/openharmony-sig/imageknifepro)库(1.0.12)，自带缓存策略，内存缓存256张128MB，磁盘缓存512张128MB，超限采用LRU淘汰。
 
-### 关于svg格式的矢量能力@svg-support
+### svg注意事项@svg-support
+
+1. web平台以外的平台，均不支持svg动画。动画推荐改用基于lottie的[animation-view](./animation-view.md)，全平台均支持。
 
-svg 是矢量图片，可以无极缩放而不失真。但在以下情况，会把svg转成位图渲染，此时将丢失矢量能力。
+2. svg图标换色注意事项：
 
-- 鸿蒙平台蒸汽模式
-	* 如果启用了 `flatten` 拍平，则会转为位图。
-	* 设置部分 `mode` 属性进行图像裁剪，会转为位图进行裁剪。`mode` 设置为 `scaleToFill/aspectFit/aspectFill` 可以保持矢量能力，设置为其它值会转位图裁剪。
-	* 如果 `src` 设置了 `data:image/svg+xml;base64,...` 这种形式的 url，则会转为位图。
+非web平台，不管小程序还是App，均不支持内联svg标签，无法像web那样通过内联标签实现svg图标换色。
+- 替代方案1：改用字体图标（推荐）。
+- 替代方案2：准备多个svg，动态设置src。可以用独立文件，也可以使用 Data URL。但此方案无法通过css变量设置，暗黑适配时需要写脚本动态修改src。
+- 替代方案3：小程序平台，可以利用 filter: drop-shadow 配合 overflow: hidden，可以将原图标的形状“投影”出新的颜色，并把原图标隐藏。App平台不支持此用法。
+
+3. 鸿蒙平台部分情况会按位图渲染，失去矢量能力
+svg 是矢量图片，可以无极缩放而不失真。但鸿蒙平台以下情况，会把svg转成位图渲染，此时将丢失矢量能力。
+* 如果启用了 `flatten` 拍平，则会转为位图。
+* 设置部分 `mode` 属性进行图像裁剪，会转为位图进行裁剪。`mode` 设置为 `scaleToFill/aspectFit/aspectFill` 可以保持矢量能力，设置为其它值会转位图裁剪。
+* 如果 `src` 设置了 `data:image/svg+xml;base64,...` 这种形式的 url，则会转为位图。
 
 ### 子组件 @children-tags
 不可以嵌套组件
@@ -142,9 +150,9 @@ svg 是矢量图片，可以无极缩放而不失真。但在以下情况，会
 >示例
 ```vue
 <template>
-  <view class="image-page uni-theme-root">
+  <view class="image-page">
     <page-head :title="data.title"></page-head>
-    <scroll-view class="uni-theme-root" style="flex: 1">
+    <scroll-view style="flex: 1">
       <view class="uni-padding-wrap">
         
         <text class="uni-title-text">image样式大合集</text>
@@ -163,30 +171,28 @@ svg 是矢量图片，可以无极缩放而不失真。但在以下情况，会
         
         <text class="uni-title-text uni-common-mt">基础（右边为拍平）</text>
         <view class="uni-center image-bg">
-            
-            <image class="image"  :fade-show="true" mode="widthFix" :src="data.imageSrc" @error="error" @load="load"></image>
-            <image class="image"  :fade-show="true" mode="widthFix" :src="data.imageSrc" @error="error" @load="load" flatten></image>
-            
-            
-            <image class="image"  mode="widthFix" :src="data.imageSrc" @error="error" @load="load"></image>
-            <image class="image"  mode="widthFix" :src="data.imageSrc" @error="error" @load="load" flatten></image>
-            
+          <image class="image" mode="widthFix" :src="data.imageSrc" @error="error" @load="load"></image>
+          <image class="image" mode="widthFix" :src="data.imageSrc" @error="error" @load="load" flatten></image>
         </view>
 
         <button class="uni-btn" @tap="imageFormat">图片格式示例</button>
         <button class="uni-btn" @tap="imageMode">图片缩放模式示例</button>
         <button class="uni-btn" @tap="imagePath">图片路径示例</button>
+
         <button class="uni-btn" @tap="imageLarge">大图示例</button>
         <button class="uni-btn" @tap="imageLong">长图示例</button>
         <button class="uni-btn" @tap="imageOrientation">图片方向修正示例</button>
 
-        
-        <navigator url="/pages/template/2000-image/2000-image">
-          <button class="uni-btn">组件性能测试</button>
-        </navigator>
+        
+        <navigator url="/pages/template/2000-image/2000-image">
+          <button class="uni-btn">组件性能测试</button>
+        </navigator>
         <navigator url="/pages/template/2000-image/2000-image-svg">
           <button class="uni-btn">组件性能测试(SVG)</button>
-        </navigator>
+        </navigator>
+        
+        <button class="uni-btn" @tap="imageFadeShow">fade-show 属性示例</button>
+        
         
       </view>
     </scroll-view>
@@ -198,14 +204,14 @@ svg 是矢量图片，可以无极缩放而不失真。但在以下情况，会
   </view>
 </template>
 
-<style>
-  .image-page {
-    flex: 1;
-  }
-
-  .styled-image-row {
-    flex-direction: row;
-    background-color: var(--list-background-color, #ffffff);
+<style>
+  .image-page {
+    flex: 1;
+  }
+
+  .styled-image-row {
+    flex-direction: row;
+    background-color: var(--list-background-color, #ffffff);
     justify-content: space-around;
     height: 120px;
     align-items: center;
@@ -233,10 +239,10 @@ svg 是矢量图片，可以无极缩放而不失真。但在以下情况，会
     width: 100px;
   }
 
-  .image-bg {
-    background-color: var(--list-background-color, #ffffff);
+  .image-bg {
+    background-color: var(--list-background-color, #ffffff);
   }
-</style>
+</style>
 
 ```
 
@@ -261,4 +267,5 @@ svg 是矢量图片，可以无极缩放而不失真。但在以下情况，会
 - 图片文件需在static目录（项目下或uni_modules下都支持static目录）下，或者import导入文件，否则文件不会被copy到最终的包中，导致无法访问
 - app-android平台由于默认启用了图片缩放（即根据组件实际宽高加载图片，以节省内存），所以可能导致load事件返回的图片尺寸并非图片原始尺寸
 - app-android平台不支持CMYK色彩的图片，[详见](https://github.com/facebook/fresco/issues/1404)
-- app-ios平台 VDOM模式的image组件不支持padding style（padding-top、padding-left、padding-right、padding-bottom）
+- app-ios平台 VDOM模式的image组件不支持padding style（padding-top、padding-left、padding-right、padding-bottom）
+- 支付宝小程序中，给 `image` 设置 `padding` 时图片仍可能占满组件区域，不能依赖 `padding` 改变图片的实际显示区域。