tmui-cli 2.0.6 → 5.3.2

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//345/270/270/347/224/250/347/273/204/344/273/266//345/223/215/345/272/224/345/274/217/345/270/203/345/261/200 xLayout.md"

@@ -0,0 +1,330 @@
+# 响应式布局 xLayout
+
+## 介绍
+
+断点容器，两种用法：
+split（默认）：窄屏只有主内容（整屏），宽屏多出一个 #side 区，「列表 + 详情」「侧栏 + 主区」不用跳页面、不用把内容写两份。
+screen：窄屏、宽屏各一套整屏内容（#narrow 窄屏专属、默认槽宽屏专属），宽屏一般再配 #side 做左/右栏。
+显示判断全交给官方 match-media（宽屏区 = min-width: wide），组件不读窗口尺寸决定显示；跨断点时触发 change 事件，业务拿它同步状态。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.9.9 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-layout/x-layout.uvue
+```
+
+## 使用
+
+```ts
+<x-layout></x-layout>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| mode | `布局模式。`<br>`- split（默认）：#side 区宽屏才出现，默认槽常驻（窄屏就是它的整屏），适合「列表 + 详情」这类加一栏。`<br>`- screen：窄屏 / 宽屏两套整屏内容二选一 —— #narrow 只在窄屏显示，默认槽只在宽屏显示，`<br>`  宽屏一般再配 #side 做左/右栏，适合「手机竖屏一套、宽屏换一套」。`<br> | `xLayoutMode` | `'split'` |
+| wide | `宽屏断点，单位固定 px。窗口宽度 >= 该值算宽屏，宽屏才显示 #side 区。`<br>`默认 640：手机横屏就跨过（最窄的常见横屏是 iPhone SE 的 667），平板竖屏 768 也算宽屏。`<br>`取 700 会踩坑——iPhone SE / 8 横屏只有 667，会一直停在窄屏。`<br> | `number` | `640` |
+| side | `#side 区排在主内容前面还是后面。end（默认）：主内容在左、侧栏/详情在右；`<br>`start：侧栏在左，适合「导航 + 内容」。`<br> | `xLayoutSide` | `'end'` |
+| sideWidth | `#side 区宽度：px/rpx/% 都行，也支持 "calc(100% - 320px)" 这类表达式。空值按内容宽。`<br> | `union` | `''` |
+| space | `#side 区和主内容之间的间距。写在 #side 区自己身上，窄屏 #side 区不显示时不会凭空多出一段空隙。`<br>`页面上没写 #side 插槽时不需要设置。`<br> | `union` | `0` |
+| direction | `主内容内部的排列方向，默认 column（业务内容基本都是纵向堆叠）。内容要横排就写 row。`<br> | `xLayoutDirection` | `'column'` |
+| fill | `是否撑满父级剩余高度，左右分栏时两栏都会拉满。`<br>`父级必须有确定高度（写死 `height` 或带最小高的页面根节点）；内容比父级高时 App 端会被`<br>``overflow: hidden` 裁掉（uvue 的 `min-height` 默认 `0px`，没有 Web 的 auto 下限），别拿它兜页面高度。`<br> | `boolean` | `false` |
+| padding | `内边距 [全部]，[左右,上下]，[左,上,右]，[左,上,右,下]，可传 string/number 自动转为数组`<br> | `union` | `''` |
+| round | `圆角 [全部]，[左，右],[左，上，右],[左，上，右，下]，可传 string/number 自动转为数组`<br> | `union` | `''` |
+| bgColor | `背景色。`<br> | `string` | `'transparent'` |
+| darkBgColor | `暗黑时的背景色，空值按亮色背景自动加深。`<br> | `string` | `''` |
+| customStyle | `追加到根节点的样式，写在最后，可覆盖 bgColor / round / padding / fill。`<br>`页面背景要铺到窗口底（渐变 + flex:1）、或给整块留边距时用它。`<br> | `string` | `''` |
+| customContentStyle | `追加到主内容区（默认槽那一侧）的样式。`<br> | `string` | `''` |
+| customSideStyle | `追加到 #side 区（宽屏那一栏）的样式，和 sideWidth / space 作用在同一层。`<br> | `string` | `''` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| change | `wide: boolean<br>` | 跨过断点时触发（窄屏 <-> 宽屏）。挂载后会先按当前断点触发一次，父组件用它拿初始状态；<br>之后只在真正跨断点时触发，同一断点内反复改窗口尺寸不会重复触发。 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| narrow | `窄屏内容（mode="screen"），只写一份，宽屏时不渲染` | - |
+| side | `宽屏专属区，窗口宽度 >= wide 才显示；默认排在主内容右侧，side="start" 则排在左侧` | - |
+| default | `主内容。split 模式下所有断点都显示；screen 模式下只在宽屏显示` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/chongyong/layout
+```
+
+## 示例源码
+
+```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">响应式布局 xLayout</x-text>
+		<x-text color="#999999">窄屏整屏，宽屏自动多出一栏（断点 {{ WIDE_BP }}px）。</x-text>
+		<x-text color="#999999">请使用横屏，屏幕旋转，模拟等方式变动本页面宽，展示响应式排版布局。</x-text>
+		<view class="bp-row">
+			<text class="bp-label">当前断点：</text>
+			<text class="bp-state" :style="_bpStyle">{{ _isWide ? '宽屏' : '窄屏' }}</text>
+			<text class="bp-label">（change 触发 {{ _changeCount }} 次）</text>
+		</view>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="18" class="text-weight-b mb-8">列表 + 详情</x-text>
+		<x-text color="#999999" class="mb-12">窄屏只有列表；宽屏右侧并排显示详情。</x-text>
+	</x-sheet>
+	<x-layout :wide="WIDE_BP" side-width="64%" :space="10" :padding="12" bgColor="white" round="14" class="mx-12"
+		@change="_onBreakpoint">
+		<template #side>
+			<view class="pane pane-detail" :style="{ backgroundColor: _paneDetailBg }">
+				<text class="pane-title">详情区</text>
+			</view>
+		</template>
+		<view class="pane pane-list" :style="{ backgroundColor: _paneBlueBg }">
+			<text class="pane-title">列表区</text>
+		</view>
+	</x-layout>
+
+	<x-sheet margin="12">
+		<x-text font-size="18" class="text-weight-b mb-8">侧栏 + 主区</x-text>
+		<x-text color="#999999" class="mb-12">侧栏在左，两栏都撑满父级高度。</x-text>
+	</x-sheet>
+	<view class="fill-host">
+		<x-layout :wide="WIDE_BP" side="start" side-width="20%" :space="10" :fill="true" :padding="12"
+			bgColor="white" round="14">
+			<template #side>
+				<view class="pane pane-nav" :style="{ backgroundColor: _paneGreenBg }">
+					<text class="pane-title">侧栏</text>
+				</view>
+			</template>
+			<view class="pane pane-body" :style="{ backgroundColor: _paneBlueBg }">
+				<text class="pane-title">主区</text>
+			</view>
+		</x-layout>
+	</view>
+
+	<x-sheet margin="12">
+		<x-text font-size="18" class="text-weight-b mb-8">窄屏一套、宽屏另换一套</x-text>
+		<x-text color="#999999" class="mb-12">mode="screen"：#narrow 只在窄屏渲染，默认槽只在宽屏渲染，
+			两套整屏内容各写各的；宽屏再配 #side 就是左栏 + 右栏。节点样式用 customStyle 追加。</x-text>
+	</x-sheet>
+	<x-layout mode="screen" :wide="WIDE_BP" side="start" side-width="30%" :space="10" :padding="12" bgColor="white"
+		round="14" class="mx-12" :custom-style="_screenGradientStyle">
+		<template #narrow>
+			<view class="pane pane-narrow" :style="{ backgroundColor: _paneNarrowBg }">
+				<text class="pane-title">窄屏整屏</text>
+				<text class="pane-tip">窗口宽到 {{ WIDE_BP }}px 以上就换成下面那套</text>
+			</view>
+		</template>
+		<template #side>
+			<view class="pane pane-nav" :style="{ backgroundColor: _paneGreenBg }">
+				<text class="pane-title pa-n5">侧栏</text>
+			</view>
+		</template>
+		<view class="pane pane-body" :style="{ backgroundColor: _paneBlueBg }">
+			<text class="pane-title pa-n5">宽屏主区</text>
+		</view>
+	</x-layout>
+
+	<x-sheet  margin="12">
+		<x-text font-size="18" class="text-weight-b mb-8">嵌套：主区里再来一套</x-text>
+		<x-text color="#999999" class="mb-12">每层各判各的断点（外层 {{ WIDE_BP }}px、内层 {{ NEST_BP }}px），互不干扰；
+			内层现在：{{ _nestWide ? '宽屏，右边多出详情栏' : '窄屏，只有列表' }}。</x-text>
+	</x-sheet>
+	<x-layout :wide="WIDE_BP" side="start" side-width="26%" :space="10" :padding="12" bgColor="white" round="14"
+		class="mx-12">
+		<template #side>
+			<view class="pane pane-nav" :style="{ backgroundColor: _paneGreenBg }">
+				<text class="pane-title">外层侧栏</text>
+			</view>
+		</template>
+		<!-- 主区里再嵌一套，内层断点比外层靠后：窗口要再宽一档才多出内层的详情栏 -->
+		<x-layout :wide="NEST_BP" side-width="40%" :space="8" :padding="10" round="10" bgColor="#f4f7ff"
+			darkBgColor="#1e222b" @change="_onNestChange">
+			<template #side>
+				<view class="pane pane-detail" :style="{ backgroundColor: _paneDetailBg }">
+					<text class="pane-title">内层详情</text>
+				</view>
+			</template>
+			<view class="pane pane-list" :style="{ backgroundColor: _paneBlueBg }">
+				<text class="pane-title">内层列表</text>
+				<text class="pane-tip">宽到 {{ NEST_BP }}px 右边多出详情</text>
+			</view>
+		</x-layout>
+	</x-layout>
+
+	<view style="height:40px"></view>
+</template>
+
+<script lang="ts" setup>
+	import { computed, ref } from "vue"
+	import { xConfig } from "@/uni_modules/tmx-ui"
+
+	/** 宽屏断点：手机竖屏（375~430）够不着，横过来就跨过（最窄的常见横屏是 iPhone SE 的 667） */
+	const WIDE_BP = 640
+
+	/** 嵌套演示里内层的断点，故意比外层靠后，用来看每层各判各的 */
+	const NEST_BP = 900
+
+	/** change 事件给的状态。显示不靠它，只用来读当前断点和数触发次数 */
+	const _isWide = ref<boolean>(false)
+	const _changeCount = ref<number>(0)
+
+	/** 内层 layout 自己的断点状态：外层宽了它不一定宽，各判各的 */
+	const _nestWide = ref<boolean>(false)
+
+	/** 暗黑下文字是浅色，分区块的浅底要换成深底，否则白字压在亮底上读不清 */
+	const _isDark = computed((): boolean => xConfig.dark == 'dark')
+
+	/** 蓝底区块（列表区 / 主区） */
+	const _paneBlueBg = computed((): string => _isDark.value ? '#172741' : '#e8f3ff')
+
+	/** 橙底区块（详情区） */
+	const _paneDetailBg = computed((): string => _isDark.value ? '#3a2b1a' : '#fff5e6')
+
+	/** 绿底区块（侧栏） */
+	const _paneGreenBg = computed((): string => _isDark.value ? '#1b2f21' : '#eafaea')
+
+	/** 窄屏整屏区块 */
+	const _paneNarrowBg = computed((): string => _isDark.value ? '#1b2438' : '#eef3ff')
+
+	/** 窄屏/宽屏两套演示的整块渐变底，暗黑用深色渐变 */
+	const _screenGradientStyle = computed((): string => {
+		if (_isDark.value) return 'background-image: linear-gradient(to bottom,#1a2438,#1c1c1E)'
+		return 'background-image: linear-gradient(to bottom,#eaf1ff,#ffffff)'
+	})
+
+	/** 断点颜色：宽屏绿、窄屏橙。暗黑下换成亮一档的颜色，深底上才看得清 */
+	const _bpStyle = computed((): Map<string, any> => {
+		const map = new Map<string, any>()
+		if (_isDark.value) {
+			map.set("color", _isWide.value ? "#4ade80" : "#fbbf24")
+		} else {
+			map.set("color", _isWide.value ? "#1a7f37" : "#8a4b00")
+		}
+		return map
+	})
+
+	function _onBreakpoint(wide : boolean) : void {
+		_isWide.value = wide
+		_changeCount.value = _changeCount.value + 1
+	}
+
+	/** 内层 layout 的断点回调，和外层那个互不影响 */
+	function _onNestChange(wide : boolean) : void {
+		_nestWide.value = wide
+	}
+</script>
+
+<style scoped>
+	.bp-row {
+		flex-direction: row;
+		align-items: center;
+		margin-top: 10px;
+	}
+
+	.bp-label {
+		font-size: 12px;
+		color: #999999;
+	}
+
+	.bp-state {
+		font-size: 12px;
+		font-weight: bold;
+	}
+
+	.pane-title {
+		font-size: 15px;
+		font-weight: bold;
+	}
+
+	/* 空容器演示：列表区，窄屏整屏、宽屏占剩下的 60% */
+	.pane-list {
+		height: 120px;
+		border-radius: 10px;
+		background-color: #e8f3ff;
+		align-items: center;
+		justify-content: center;
+	}
+
+	/* 空容器演示：详情区，宽屏才出现，和列表等高 */
+	.pane-detail {
+		flex: 1;
+		height: 120px;
+		border-radius: 10px;
+		background-color: #fff5e6;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.pane-nav {
+		flex: 1;
+		border-radius: 10px;
+		background-color: #eafaea;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.pane-body {
+		flex: 1;
+		border-radius: 10px;
+		background-color: #e8f3ff;
+		align-items: center;
+		justify-content: center;
+	}
+
+	/* 窄屏整屏：只在窄屏出现，横过来就换成侧栏 + 主区 */
+	.pane-narrow {
+		height: 120px;
+		border-radius: 10px;
+		background-color: #eef3ff;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.pane-tip {
+		font-size: 12px;
+		color: #999999;
+		margin-top: 6px;
+	}
+
+	/* fill 需要一个有确定高度的父级，否则 flex:1 无从吃起 */
+	.fill-host {
+		height: 180px;
+		margin-left: 12px;
+		margin-right: 12px;
+	}
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//345/233/276/347/211/207/344/270/212/344/274/240 xUploadMedia.md"

@@ -28,14 +28,17 @@
 | 名称 | 说明 | 类型 | 默认值 |
 | ------ | ---- | ---- | ---- |
 | mode | `上传的类型,video,photo,默认是上传图片`<br> | `string` | `'photo'` |
-| videoOps | `当mode=video时,选择视频上传的参数,`<br>`些参数为utsjson,所有字段为可选,具体字段为uni.chooseVideo(options)中的部分有效字段`<br>`pageOrientation,albumMode,compressed,compressed,maxDuration,camera`<br> | `UTSJSONObject` | `() : UTSJSONObject => {     return {         pageOrientation: 'auto',         albumMode: 'system',         sourceType: ['album', 'camera'] as string[],         compressed: true,         maxDuration: 60,         camera: 'back'     } as UTSJSONObject }` |
+| videoOps | `当mode=video时,选择视频上传的参数,`<br>`些参数为utsjson,所有字段为可选,具体字段为uni.chooseVideo(options)中的部分有效字段`<br>`pageOrientation,albumMode,compressed,compressed,maxDuration,camera`<br> | `Record` | `() : Record<string, any> => {     return {         pageOrientation: 'auto',         albumMode: 'system',         sourceType: ['album', 'camera'] as string[],         compressed: true,         maxDuration: 60,         camera: 'back'     } as Record<string, any> }` |
 | maxCount | `最大的可上传数量`<br> | `number` | `9` |
 | url | `上传地址`<br> | `string` | `"https://mockapi.eolink.com/LRViGGZ8e6c1e8b4a636cd82bca1eb15d2635ed8c74e774/admin/upload_pic/"` |
 | name | `上传到服务器的名称字段`<br> | `string` | `"file"` |
-| header | `上传到服务器的头文件`<br> | `UTSJSONObject` | `() : UTSJSONObject => { return {} as UTSJSONObject }` |
-| formData | `额外的表单数据。`<br> | `UTSJSONObject` | `() : UTSJSONObject => { return {} as UTSJSONObject }` |
-| imgHeight | `图片高,此处不可使用%单位`<br> | `string` | `"80"` |
+| header | `上传到服务器的头文件`<br> | `Record` | `() : Record<string, any> => { return {} as Record<string, any> }` |
+| formData | `额外的表单数据。`<br> | `Record` | `() : Record<string, any> => { return {} as Record<string, any> }` |
+| imgHeight | ``<br> | `string` | `"80"` |
+| cellRatio | `格子宽高比 = 宽 / 高，1 为正方形（默认）`<br> | `number` | `1` |
+| maxCellSize | `格子最大边长(px)，0 表示随容器铺满；平板/Web 想保持固定密度时可设 96~120`<br> | `number` | `0` |
 | column | `一行显示几列`<br> | `number` | `5` |
+| autoColumn | `宽屏时按容器宽自动增加列数，column 作为最少列数；默认 false`<br> | `boolean` | `false` |
 | okFileIsDelete | `上传成功的文件是否允许删除`<br> | `boolean` | `true` |
 | uploadingFileIsDelete | `上传中的文件是否允许删除`<br> | `boolean` | `true` |
 | modelValue | `等同v-model`<br> | `Array` | `() : XUPLOADFILE_FILE_VALUE[] => [] as XUPLOADFILE_FILE_VALUE[]` |
@@ -48,8 +51,8 @@
 | compressedHeight | `压缩后的缩放高，0表示不压缩高`<br> | `number` | `0` |
 | compressedWidth | `压缩后的缩放高，0表示不压缩宽`<br> | `number` | `0` |
 | quality | `压缩质量`<br> | `number` | `80` |
-| addPos | `添加图片的位置 'before'出现在前面 'after'出现在后面`<br> | `string` | `"after"` |
-| align | `子项对齐方式，left左对齐默认，right:右对齐`<br> | `string` | `"left"` |
+| addPos | `上传占位(+)的位置:'before'放在最前,'after'放在最后(默认)`<br> | `string` | `"after"` |
+| align | `子项对齐方式:'left'左对齐(默认),'right'右对齐,未填满的行整体靠右(表单右对齐时用)`<br> | `string` | `"left"` |
 
 
 ## Events 事件
@@ -102,7 +105,22 @@
 
 	<x-sheet>
 		<x-upload-media :beforeUpload="beforeUpload" :header="headerestotken" :before-del="beforeRemove"
-			v-model="list" :column="4"></x-upload-media>
+			v-model="list" :column="4" auto-column></x-upload-media>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">自适应尺寸（默认 1:1）</x-text>
+		<x-text color="#999999" class="text-size-b">
+			格子高度由容器宽度自动计算：窄屏等比缩小、宽屏按目标尺寸自动增加列数，图片 cover 裁切不拉伸。
+			下面把最大边长限制为 80px，宽屏时格子不会超过 80px。
+		</x-text>
+		<x-upload-media class="mt-12" :column="4" :max-cell-size="80" auto-column v-model="list2"></x-upload-media>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">自定义格子比例 cell-ratio</x-text>
+		<x-text color="#999999" class="text-size-b">
+			默认 1:1。示例为 4:3，高度 = 宽度 ÷ (4/3)，图片仍然 cover 裁切。
+		</x-text>
+		<x-upload-media class="mt-12" :column="3" :cell-ratio="4 / 3" v-model="ratioList"></x-upload-media>
 	</x-sheet>
 	<x-sheet>
 		<x-text font-size="18" class=" text-weight-b mb-8">上传视频</x-text>
@@ -114,6 +132,23 @@
 		<x-upload-media :before-complete="beforeComputed" :header="headerestotken"
 			v-model="list3" :column="4"></x-upload-media>
 	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">占位前后、对齐左右切换</x-text>
+		<x-text color="#999999" class="text-size-b">
+			两个都属于布局属性，默认是占位在后(add-pos="after")、左对齐(align="left")，右边开关可随时切换。
+		</x-text>
+		<view class="flex flex-row flex-row-center-between mt-12" style="height: 50px;">
+			<x-text>上传占位放在最前面</x-text>
+			<x-switch v-model="addPosBefore" color="primary"></x-switch>
+		</view>
+		<view class="flex flex-row flex-row-center-between" style="height: 50px;">
+			<x-text>未填满的行整体右对齐</x-text>
+			<x-switch v-model="alignRight" color="primary"></x-switch>
+		</view>
+		<x-upload-media class="mt-12" :column="4" v-model="layoutList"
+			:add-pos="addPosBefore ? 'before' : 'after'"
+			:align="alignRight ? 'right' : 'left'"></x-upload-media>
+	</x-sheet>
 	<x-sheet>
 		<x-text font-size="18" class=" text-weight-b mb-8">演示循环数组绑定并改变顺序</x-text>
 		<!-- 要注意,如果我循环变动key一定要唯一不能相同或者为Index数字vue3会有diff导致不刷新数据. -->
@@ -162,7 +197,15 @@
 		} as FORMLIST
 	] as FORMLIST[]
 
-	const headerestotken = ref<UTSJSONObject>({ accessToken: "99999" })
+	const headerestotken = ref<Record<string, any>>({ accessToken: "99999" })
+	// 布局演示用：占位是否放最前、是否右对齐
+	const addPosBefore = ref<boolean>(false)
+	const alignRight = ref<boolean>(false)
+	// 布局演示用初始数据：两张图，便于看出“占位前后”和“行整体靠右”的区别
+	const layoutList = ref<XUPLOADFILE_FILE_VALUE[]>([
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/15/04/20/geralt-classroom-10174576_150.jpg' },
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/15/09/57/neelam279-wild-cherry-10174886_150.jpg' },
+	])
 	const testlist = ref<FORMLIST[]>(formlist)
 	const list = ref<XUPLOADFILE_FILE_VALUE[]>([
 		{ url: 'https://cdn.pixabay.com/photo/2026/03/13/03/42/tifanitopan-ayam-goreng-10170975_150.jpg' },
@@ -178,6 +221,10 @@
 		{ url: 'https://cdn.pixabay.com/photo/2026/03/15/14/15/14-15-36-350_150.jpg' },
 	])
 	const list3 = ref<XUPLOADFILE_FILE_VALUE[]>([])
+	const ratioList = ref<XUPLOADFILE_FILE_VALUE[]>([
+		{ url: 'https://cdn.pixabay.com/photo/2026/03/15/19/19/matthiasboeckel-tulip-10175462_150.jpg' },
+		{ url: 'https://tmui.design/images/logoGreat.png' },
+	])
 
 	// 模板引用
 	const uploader = ref<XUploadMediaComponentPublicInstance | null>(null)
@@ -231,10 +278,10 @@
 
 	//上传后，通过回调自行设置是成功还是失败
 	const beforeComputed = (item : XUPLOADFILE_FILE_INFO) : XUPLOADFILE_FILE_INFO => {
-		let json = {} as UTSJSONObject;
+		let json = {} as Record<string, any>;
 		if (item.response != '') {
 			try {
-				json = JSON.parseObject(item.response)!
+				json = JSON.parse(item.response)!
 			} catch (e) {
 				//TODO handle the exception
 			}

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//345/237/216/345/270/202/351/200/211/346/213/251/345/231/250 xPickerCity.md"

@@ -107,12 +107,12 @@
 
 <script setup lang="ts">
 	import { ref } from 'vue'
-	import cityscode from "./level.min.uts"
+	import cityscode from "./level.min"
 	import type { X_PICKER_X_ITEM } from "@/uni_modules/tmx-ui"
 	
 	const modelValueIds = ref<string[]>([])
 	const modelStr = ref("")
-	const list = ref(JSON.parseArray<X_PICKER_X_ITEM>(cityscode))
+	const list = ref<X_PICKER_X_ITEM[]>(JSON.parse(cityscode) as X_PICKER_X_ITEM[])
 	
 	const fuzhi = () => {
 		modelValueIds.value = ['350000', '350600', '350626']

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//345/244/232/351/200/211/346/227/245/345/216/206 xCalendarMultiple.md"

@@ -103,7 +103,7 @@
 			<x-text color="#999999">支持多选，范围,如果需要单天选择请前往xCalendarView组件{{currentDate}}</x-text>
 		</x-sheet>
 		<x-sheet :padding="['0']">
-			<x-calendar-multiple :dateStatus="dateStatus" style="border-radius: 12px;" @change="onchange" v-model:currentDate="currentDate" :disabledDays="['2024-5-31']" :date-style="dateStyle" headBgColor='rgb(5, 121, 255)' headFontColor='white' v-if="show" v-model="dates"></x-calendar-multiple>
+			<x-calendar-multiple :dateStatus="dateStatus" style="border-radius: 12px;" @change="onchange" v-model:currentDate="currentDate" :disabledDays="['2024-5-31']" :date-style="dateStyle" headBgColor='rgb(5, 121, 255)' headFontColor='white' v-model="dates"></x-calendar-multiple>
 			<view class="px-12 pb-12">
 				<x-button @click="setdate" skin='thin' :block="true" >赋值</x-button>
 			</view>
@@ -113,7 +113,7 @@
 			<x-text color="#999999">下面的范围选择限制了只能最多选择20天,如果要不限制设置multipleMax为0即可</x-text>
 		</x-sheet>
 		<x-sheet :padding="['0']">
-			<x-calendar-multiple @change="onchange" v-if="show" :multipleMax="20" model='range' v-model="dates2"></x-calendar-multiple>
+			<x-calendar-multiple @change="onchange" :multipleMax="20" model='range' v-model="dates2"></x-calendar-multiple>
 			<view class="px-12 pb-12">
 				<x-button @click="fuzhi" skin='thin' :block="true" >赋值</x-button>
 			</view>
@@ -129,7 +129,6 @@
 	const dates2 = ref<string[]>([])
 	const dateStyle = ref<xCalendarDateStyle_type[]>([])
 	const currentDate = ref<string>('2024-2-1')
-	const show = ref<boolean>(false)
 	const dateStatus = ref<xCalendarDateStyleStatusType[]>([{
 		between: {
 			start: "2024-2-1",
@@ -169,10 +168,6 @@
 		})
 	}
 	
-	onReady(()=>{
-		show.value = true;
-	})
-	
 </script>
 
 <style>

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//345/257/206/347/240/201/351/224/256/347/233/230 xKeyboard.md"

@@ -132,7 +132,7 @@
 
 </template>
 
-<script setup>
+<script setup lang="ts">
 	const price = ref("")
 	const password = ref("")
 	

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//345/257/214/346/226/207/346/234/254/347/274/226/350/276/221/345/231/250 xEditor.md"

@@ -3,14 +3,14 @@
 ## 介绍
 
 传递正常markdown或者html内容即可,传递markdown时会自动转换为html,如果直接传递html不会转换直接赋值.
-值得注意的是:在微信小程序端它是没有样式高亮显示的.其它平台有样式指示,这是因为受限于微信官方本身就不支持.
-另外我测试发现HBX4.53 sdk ios端的输入框焦点有问题，导致无法设置样式，待官方修复。
+全端使用官方 editor 组件，Markdown 用 marked 转成 html 后 setContents。样式状态由 statuschange 回写。从2.0.02开始使用官方自带的了，但style样式设置不了字体颜色，导致无法匹配暗黑
+因此要注意下这个区别，如果着急等官方修复，建议使用我写的x-markdown-u代替，更先进支持表格和图片。
 
 ## 平台兼容
 
 | Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
 | --- | --- | --- | --- | --- | --- | --- | --- |
-| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 5.08+ | 1.1.18 |
 
 ## 文件路径
 
@@ -43,7 +43,7 @@
 
 | 名称 | 参数 | 说明 |
 | ------ | ---- | ---- |
-| tagClick | `<br>` | 特定的a,img标签被点击触发,小程序不支持,其它平台支持. |
+| tagClick | `<br>` | 保留兼容。官方 editor 不提供 a/img 点击，此事件不再触发。 |
 | init | `-` | 是否初始化成功 |
 | getValue | `-` | 需要通过ref函数调用getHtml才会触发此函数 |
 

package/data/tmui4x/30./347/273/204/344/273/266/345/272/223//350/241/250/345/215/225/347/273/204/344/273/266//345/265/214/345/205/245/345/274/217/346/227/245/346/234/237/351/200/211/346/213/251/345/231/250 xDateView.md"

@@ -57,7 +57,9 @@
 
 | 名称 | 参数 | 返回值 | 说明 |
 | ------ | ---- | ---- | ---- |
-| - | - | - | - |
+| resync | - | `-` | - |
+| confirm | - | `-` | - |
+
 
 ## 示例文件路径
 
@@ -102,6 +104,28 @@
 		<x-text font-size="18" class=" text-weight-b mb-8">内嵌日期选择器 xDateView</x-text>
 		<x-date-view v-model="modelValue2" start="2020-3-12" end="2025-10-5"></x-date-view>
 	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">formatSyncValue，不滚动直接确认</x-text>
+		<x-text color="#999999" class="mb-8">打开后不滑动，直接点确认。modelValue 应变成 format 后的值。</x-text>
+		<x-picker-date v-model="syncValue" :formatSyncValue="true" start="2020-1-1" end="2026-12-31"
+			v-model:model-str="syncStr" type="minute" format="YYYY-MM-DD hh:mm">
+			<template v-slot:default="{label}">
+				<x-button :block="true">不滚动直接确认</x-button>
+			</template>
+		</x-picker-date>
+		<x-sheet :margin="['0','24','0','0']" color="#f5f5f5" dark-color="#333">
+			<x-text color="#999999">modelValue：{{syncValue}}</x-text>
+			<x-text color="#999999">modelStr：{{syncStr}}</x-text>
+		</x-sheet>
+	</x-sheet>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b mb-8">xDateView formatSyncValue</x-text>
+		<x-text color="#999999" class="mb-8">同一逻辑。不滚动时 modelValue 也应是 format 后的值。</x-text>
+		<x-date-view v-model="syncValue2" v-model:model-str="syncStr2" :formatSyncValue="true"
+			format="YYYY-MM-DD hh:mm" type="minute" start="2020-1-1" end="2026-12-31"></x-date-view>
+		<x-text color="#999999">modelValue：{{syncValue2}}</x-text>
+		<x-text color="#999999">modelStr：{{syncStr2}}</x-text>
+	</x-sheet>
 
 	<x-sheet>
 		<x-text font-size="18" class=" text-weight-b">精确到秒</x-text>
@@ -121,6 +145,10 @@
 	const modelValue = ref("2024-10-06 10:10:10")
 	const modelValue2 = ref("2025-4-22 10:10:10")
 	const modelValue3 = ref("2024-10-06 10:10:10")
+	const syncValue = ref("2024-10-06 10:10:10")
+	const syncStr = ref("")
+	const syncValue2 = ref("2024-10-06 10:10:10")
+	const syncStr2 = ref("")
 </script>
 
 <style lang="scss">