tmui-cli 2.0.1 → 2.0.2

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"

@@ -0,0 +1,115 @@
+# 分割线 xDivider
+
+## 介绍
+
+横和竖向，内容左，中，右。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-divider/x-divider.uvue
+```
+
+## 使用
+
+```ts
+<x-divider></x-divider>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| align | `对齐方式`<br> | `alignType` | `"center"` |
+| label | `文本`<br> | `string` | `""` |
+| color | `线的颜色`<br> | `string` | `"#e5e5e5"` |
+| darkColor | `线的暗黑颜色，如果不提供取全局的borderDarkColor`<br> | `string` | `""` |
+| lineWidth | `线粗细度。`<br> | `string` | `"1"` |
+| height | `竖向时的高度`<br> | `string` | `"10"` |
+| labelColor | `文本颜色`<br> | `string` | `"#a2a2a2"` |
+| model | `线条样式`<br> | `modelType` | `"solid"` |
+| fontSize | `字体大小`<br> | `string` | `"11"` |
+| vertical | `是否是竖向`<br> | `boolean` | `false` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认文本插槽。建议通过属性label填写，如果你有特殊要求可以` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/divider
+```
+
+## 示例源码
+
+```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 ">分割线 Divider</x-text>
+		</x-sheet>
+		<x-sheet>
+			<x-divider></x-divider>
+			<x-divider class="mt-16" darkColor='error' color="error"></x-divider>
+			<x-divider class="mt-16" darkColor='success' color="success"></x-divider>
+		</x-sheet>
+		<x-sheet>
+			<x-divider label="标题测试"></x-divider>
+		</x-sheet>
+		<x-sheet>
+			<x-divider align="right" label="标题测试"></x-divider>
+		</x-sheet>
+		<x-sheet>
+			<x-divider align="left" label="左侧"></x-divider>
+		</x-sheet>
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b ">竖向</x-text>
+		</x-sheet>
+		<x-sheet class="flex flex-row ">
+			<x-divider :vertical="true" height="50px"></x-divider>
+			<x-divider :vertical="true" darkColor='success' color="success" height="50px" class="ml-16"></x-divider>
+		</x-sheet>
+
+</template>
+
+<script 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/261/225/347/244/272/347/273/204/344/273/266//345/210/227/350/241/250 xCell.md"

@@ -0,0 +1,154 @@
+# 列表 xCell
+
+## 介绍
+
+card为true时，圆角可统一全局配置和动态全局配置，保持所有页面列表样式统一，免于一个一个配置。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-cell/x-cell.uvue
+```
+
+## 使用
+
+```ts
+<x-cell></x-cell>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| icon | `左图标`<br> | `string` | `""` |
+| avatarRound | `左侧图标、头像圆角。默认为8`<br> | `string` | `"8"` |
+| color | `背景的主题色`<br> | `string` | `'white'` |
+| darkColor | `暗黑背景的主题色，空值时取sheetDarkColor`<br> | `string` | `''` |
+| iconColor | `图标色,空值时取全局主题值。`<br> | `string` | `""` |
+| title | `标题`<br> | `string` | `"标题"` |
+| titleColor | `标题颜色`<br> | `string` | `"black"` |
+| darkTitleColor | `暗黑标题颜色，如果不填写取白`<br> | `string` | `"white"` |
+| titleSize | `标题大小`<br> | `string` | `"16"` |
+| iconSize | `图标大小`<br> | `string` | `"24"` |
+| label | `右边文本`<br> | `string` | `""` |
+| labelColor | `右边文本颜色`<br> | `string` | `"#bfbfbf"` |
+| darklabelColor | ``<br> | `string` | `""` |
+| labelSize | `右侧label文字大小`<br> | `string` | `"13"` |
+| desc | `标题正文的简介文本`<br> | `string` | `""` |
+| showBottomBorder | `是否显示下边线`<br> | `boolean` | `true` |
+| bottomBorderInsert | `是否让下边线显示居右，不贯穿到左边。`<br> | `boolean` | `false` |
+| bottomBorderColor | `下边线的颜色。如果你设定了的话。`<br>`暗黑的边颜色失效，采用你自定的颜色。`<br> | `string` | `""` |
+| link | `是否显示链接状态，有点按效果。包括出现右边跳转指示。`<br>`关闭的话，事件反应和跳转会更快。`<br>`如果true右侧箭头图标会显示`<br> | `boolean` | `true` |
+| linkColor | `右指示图标的颜色`<br> | `string` | `'#bfbfbf'` |
+| linkDarkColor | `右指示图标的暗黑颜色`<br> | `string` | `'#bfbfbf'` |
+| linkIconSize | `右指示图标的大小。`<br> | `union` | `"20"` |
+| url | `需要跳转的页面地址。`<br>`如果填写了右侧箭头图标会显示`<br>`跳转时如果失败会回退到switchTab跳转。`<br> | `string` | `""` |
+| card | `是否是卡片模式`<br> | `boolean` | `true` |
+| round | `卡片模式圆角,不填写采用全局的cardRadius属性值.`<br> | `string` | `""` |
+| leftSize | `左边图标区域宽和高的大小。`<br> | `string` | `'32'` |
+| minHeight | `最小高度，主要是用来统一风格高度不至于让点击范围过小`<br>`如果你需要紧凑型可以设置为auto`<br> | `string` | `"55"` |
+| disabled | `是否禁用url跳转，当link为true或者url需要跳转时`<br>`如果禁用，点击时不会触发跳转。`<br> | `boolean` | `false` |
+| padding | `内间隙[x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下`<br>`空数组时取全局值`<br> | `Array` | `() : string[] => ['12', '0'] as string[]` |
+| margin | `margin 同sheet原理`<br>`[x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下`<br>`空数组时取全局值cellMargin`<br> | `Array` | `() : string[] => [] as string[]` |
+| rightWidth | `右侧label宽，插槽时，这个属性不会生效`<br>`以你自己布局宽为准。`<br> | `string` | `"100"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 项目点击 |
+| update:show | `-` | 等同v-model:show |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| avatar | `头像图标` | icon: string<br> |
+| default | `默认标题插槽` | - |
+| desc | `简介` | desc: string<br> |
+| label | `右边文字` | label: string<br> |
+| right | `右插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/cell
+```
+
+## 示例源码
+
+```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">列表组 Cell</x-text>
+		<x-text color="#999999">
+			插槽丰富方便自定义自己的样式
+		</x-text>
+	</x-sheet>
+
+	<x-cell :link="false" url="/pages/index/button" icon="apps-line" title="常见组件库"></x-cell>
+	<x-cell title="应用设置" url="/pages/index/icon" icon="price-tag-3-line" label="+￥32非卡片模式非卡片模式非卡片模式非卡片模式"
+		label-color="red" icon-color="red"></x-cell>
+	<x-cell title="聊天介绍" url="/pages/index/tag" icon="message-3-line" label="tmx测试" icon-color="green"></x-cell>
+
+	<x-sheet :margin="['16']">
+		<x-text font-size="18" class=" text-weight-b ">非卡片模式 Cell</x-text>
+		<x-text color="#999999">
+			底边线可以左对齐或者右内对齐。
+		</x-text>
+	</x-sheet>
+
+	<x-sheet :padding="['0']">
+		<x-cell :bottomBorderInsert="true" :card="false" url="/pages/index/button" icon="color-filter-line"
+			desc="UTS版本tmui组件库,高质量库" title="常见组件库"></x-cell>
+		<x-cell title="价格设置" :bottomBorderInsert="true" :card="false" url="/pages/index/icon" icon="server-line"
+			label="+￥32" label-color="red" icon-color="red"></x-cell>
+		<x-cell title="书签读书" :bottomBorderInsert="true" :card="false" icon="book-marked-line" url="/pages/index/tag"
+			label="tmx测试" icon-color="orange"></x-cell>
+		<x-cell title="标签页面" :bottomBorderInsert="true" :card="false" :show-bottom-border="false" icon="gift-line"
+			url="/pages/index/tag" label="tmx测试" icon-color="success"></x-cell>
+	</x-sheet>
+
+
+
+
+	<view class="py-32"></view>
+
+</template>
+
+<script setup lang="ts">
+
+</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/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"

@@ -0,0 +1,164 @@
+# 动态全屏 xViewTofull
+
+## 介绍
+
+动态全屏，点击某一区域时，让该内容自动全屏展开，关闭时，回落到原位置，场景比如：视频播放，详情等不想开新页面的时候非常有用。
+如果想完全全屏，可以自定义导航栏和自定义关闭按钮实现。web端使用时注意：不能套在父组件设置了css transform属性里面，否则错乱。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-view-tofull/x-view-tofull.uvue
+```
+
+## 使用
+
+```ts
+<x-view-tofull></x-view-tofull>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| bgColor | `全屏弹出来时的背景色。`<br> | `string` | `'#ffffff'` |
+| darkBgColor | `全屏弹出来时的暗黑背景色。`<br>`默认为空，取全局的暗黑背景`<br> | `string` | `''` |
+| duration | `展开时的动画时长，单位ms`<br> | `number` | `300` |
+| showClose | `是否显示关闭按钮`<br>`你可以关闭，通过ref来关闭。`<br>`如果要全屏可以自定义导航栏。`<br> | `boolean` | `true` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| close | `关闭按钮插槽` | opened: boolean<br> |
+| default | `默认内容插槽` | opened: boolean<br> |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| open | - | `-` | - |
+| close | - | `-` | - |
+
+
+## 示例文件路径
+
+```json
+/pages/fankui/view-tofull
+```
+
+## 示例源码
+
+```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">动态全屏 xViewTofull</x-text>
+		<x-text>点击某一区域时，让该内容自动全屏展开，关闭时，回落到原位置，场景比如：视频播放，详情等不想开新页面的时候非常有用。</x-text>
+	</x-sheet>
+
+	<view class="mx-16 flex flex-row flex-wrap">
+		<x-view-tofull style="height:120px;overflow: hidden;background-color: #0579FF;width: 50%;" bg-color="#0579FF"
+			dark-bg-color="#333">
+			<template v-slot:default="{opened}">
+				<view style="min-height:120px; padding: 16px; height: 100%;">
+					<x-text color="white" font-size="20" dark-color="white" :lines="1">如果美国继续针对中国，中国将</x-text>
+					<view v-if="opened">
+						<x-text color="white"
+							dark-color="white">2020年10月，习近平总书记来到潮州市考察，沿牌坊街了解潮州市修复保护历史文化街区等情况。总书记指出，潮州有很多宝，潮绣、木雕、潮剧、工夫茶、潮州菜等，都很有特色，弥足珍贵，实属难得。我们爱这个城市，就要呵护好她、建设好她。</x-text>
+						<x-image :preview="false" src="https://store.tmui.design/api/randomImg?random=183"></x-image>
+						<x-text color="white"
+							dark-color="white">2020年10月，习近平总书记来到潮州市考察，沿牌坊街了解潮州市修复保护历史文化街区等情况。总书记指出，潮州有很多宝，潮绣、木雕、潮剧、工夫茶、潮州菜等，都很有特色，弥足珍贵，实属难得。我们爱这个城市，就要呵护好她、建设好她。</x-text>
+					</view>
+				</view>
+			</template>
+		</x-view-tofull>
+
+		<view style="width: 50%;">
+			<x-view-tofull style="height:120px;overflow: hidden;">
+				<template v-slot:default="{opened}">
+					<view style="min-height:120px; background-color: #f8b563;padding: 16px; height: 100%;">
+						<x-text color="white" font-size="20" dark-color="white">话题标题演示</x-text>
+						<x-text class="mb-16" color="white" dark-color="white">点击该区域展示效果哦点击该区域展示效果哦</x-text>
+
+						<x-sheet v-if="opened" :padding="['0']" :margin="['0']">
+							<x-cell style="border-radius: 6px 6px 0px 0px;" :card="false" url="/pages/index/button"
+								icon="apps-line" desc="UTS版本tmui组件库,高质量库" title="常见组件库"></x-cell>
+							<x-cell :card="false" url="/pages/index/icon" icon="price-tag-3-line" label="+￥32"
+								label-color="red" icon-color="red"></x-cell>
+							<x-cell :card="false" icon="chat-smile-2-line" url="/pages/index/tag" label="tmx测试"
+								icon-color="orange"></x-cell>
+							<x-cell style="border-radius:0px 0px  6px 6px ;" :card="false" :show-bottom-border="false"
+								icon="chat-smile-2-line" url="/pages/index/tag" label="tmx测试"
+								icon-color="orange"></x-cell>
+						</x-sheet>
+					</view>
+				</template>
+			</x-view-tofull>
+		</view>
+		<view style="background-color: #00aa7f;width: 50%;">
+			<x-view-tofull style="height:120px;overflow: hidden;" bg-color="success" dark-bg-color="#333">
+				<template v-slot:default="{opened}">
+					<view style="min-height:120px; padding: 16px; height: 100%;">
+						<x-text color="white" font-size="20" dark-color="white" :lines="1">社评：嫦娥六号彰显了“国际范儿”</x-text>
+						<x-text color="white"
+							dark-color="white">2020年10月，习近平总书记来到潮州市考察，沿牌坊街了解潮州市修复保护历史文化街区等情况。总书记指出，潮州有很多宝，潮绣、木雕、潮剧、工夫茶、潮州菜等，都很有特色，弥足珍贵，实属难得。我们爱这个城市，就要呵护好她、建设好她。</x-text>
+						<x-image :preview="false" src="https://store.tmui.design/api/randomImg?random=183"></x-image>
+						<x-text color="white"
+							dark-color="white">2020年10月，习近平总书记来到潮州市考察，沿牌坊街了解潮州市修复保护历史文化街区等情况。总书记指出，潮州有很多宝，潮绣、木雕、潮剧、工夫茶、潮州菜等，都很有特色，弥足珍贵，实属难得。我们爱这个城市，就要呵护好她、建设好她。</x-text>
+					</view>
+				</template>
+			</x-view-tofull>
+		</view>
+		<view style="background-color: #7b33e6;width: 50%;">
+			<x-view-tofull style="height:120px;overflow: hidden;" bg-color="success" dark-bg-color="#333">
+				<template v-slot:default="{opened}">
+					<view style="min-height:120px; padding: 16px; height: 100%;">
+						<x-text color="white" font-size="20" dark-color="white"
+							:lines="1">张海鹏、冯琳：试图动摇2758号决议，是美国的梦呓</x-text>
+						<x-text color="white"
+							dark-color="white">2020年10月，习近平总书记来到潮州市考察，沿牌坊街了解潮州市修复保护历史文化街区等情况。总书记指出，潮州有很多宝，潮绣、木雕、潮剧、工夫茶、潮州菜等，都很有特色，弥足珍贵，实属难得。我们爱这个城市，就要呵护好她、建设好她。</x-text>
+						<x-image :preview="false" src="https://store.tmui.design/api/randomImg?random=183"></x-image>
+						<x-text color="white"
+							dark-color="white">2020年10月，习近平总书记来到潮州市考察，沿牌坊街了解潮州市修复保护历史文化街区等情况。总书记指出，潮州有很多宝，潮绣、木雕、潮剧、工夫茶、潮州菜等，都很有特色，弥足珍贵，实属难得。我们爱这个城市，就要呵护好她、建设好她。</x-text>
+					</view>
+				</template>
+			</x-view-tofull>
+		</view>
+	</view>
+
+</template>
+
+<script setup lang="ts">
+
+</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/261/225/347/244/272/347/273/204/344/273/266//345/215/241/347/211/207 xCard.md"

@@ -0,0 +1,123 @@
+# 卡片 xCard
+
+## 介绍
+
+圆角，主题可统一全局配置风格。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-card/x-card.uvue
+```
+
+## 使用
+
+```ts
+<x-card></x-card>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| padding | `内容的内边距。`<br> | `string` | `"16"` |
+| titleSize | `标题文字大小`<br> | `string` | `"18"` |
+| btnColor | `按钮颜色`<br> | `string` | `""` |
+| color | `标题颜色`<br> | `string` | `"#333333"` |
+| bgColor | `背景颜色`<br> | `string` | `"#ffffff"` |
+| darkBgColor | `暗黑背景颜色，如果为空，取sheetDarkColor`<br> | `string` | `""` |
+| btns | `底部按钮数组。如果不满意风格布局请使用插槽footer来布局`<br> | `Array` | `() : string[] => [] as string[]` |
+| subtitle | `副标题`<br> | `string` | `""` |
+| title | `标题`<br> | `string` | `""` |
+| statusIcon | `右边的小图标，如果你是想显示状态，日期请使用对应插槽`<br> | `string` | `"more-fill"` |
+| content | `中间内容。如果有大量内容请直接在默认插槽(标签内)内布局`<br> | `string` | `""` |
+| image | `头部图片地址。`<br> | `string` | `""` |
+| imageHeight | `头图片高度`<br> | `string` | `"150"` |
+| round | `圆角请不要动态更改此会，默认为空，取全局设置的风格值。`<br> | `string` | `""` |
+| shadow | `请不要动态更改些投影值，截止4.75+鸿蒙无法使用投影`<br> | `string` | `"0 3px 10px rgba(0, 0, 0, 0.05)"` |
+| btnSize | `按钮尺寸`<br> | `BtnSizeType` | `"small" as BtnSizeType` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| click | `-` | 卡片被点击 |
+| status | `-` | 右边状态小图标被点击 |
+| action | `-` | 底部按钮被点击 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| image | `图片插槽` | - |
+| title | `标题插槽` | - |
+| statusIcon | `状态右边小图标插槽` | - |
+| subtitle | `副标题插槽` | - |
+| default | `默认内容插槽` | - |
+| footer | `底部插槽` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/card
+```
+
+## 示例源码
+
+```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-card class="mx-16 my-8" image="https://store.tmui.design/api/randomImg?random=183" title="我就是无法将你移除脑海"
+		subtitle="Girl it's more than I dare to think about" :btns="['付款','详细']"
+		content="女孩 我奢望的远不止于此 There's a dark secret in me 我还有个不为人知的秘密 Don't leave me locked in your heart 不要将我锁入你的心里">
+	</x-card>
+	<x-card class="mx-16 mb-8" dark-bg-color="#333" title="我就是无法将你移除脑海" subtitle="自定义暗黑背景" :btns="['操作']">
+	</x-card>
+	<x-card class="mx-16 mb-8" title="我就是无法将你移除脑海" subtitle="Girl it's more than I dare to think about" :btns="['操作']">
+		<x-image src="https://store.tmui.design/api/randomImg?random=18366"></x-image>
+		<x-text>
+			Girl it's more than I dare to think about
+			女孩 我奢望的远不止于此
+		</x-text>
+	</x-card>
+	<x-card class="mx-16 mb-8" status-icon="" title="Tmui4.0x" subtitle="Girl it's more than I dare to think about"
+		:btns="['操作']">
+	</x-card>
+	<view class="pa-16"></view>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)