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//350/241/250/346/240/274/345/210/227 xTableCol.md"

@@ -0,0 +1,384 @@
+# 表格列 xTableCol
+
+## 介绍
+
+x-table 的列定义。通过 provide/inject 向父表登记列元数据，不渲染单元格。
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-table-col/x-table-col.uvue
+```
+
+## 使用
+
+```ts
+<x-table-col></x-table-col>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| field | `对应行数据字段`<br> | `string` | `""` |
+| title | `表头标题`<br> | `string` | `""` |
+| width | `列宽 px / rpx / %；空则均分剩余`<br> | `string` | `""` |
+| sorter | `是否可排序`<br> | `boolean` | `false` |
+| fixed | `left / right / 空`<br> | `string` | `""` |
+| align | `left / center / right`<br> | `string` | `"center"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/table
+```
+
+## 示例源码
+
+```vue
+<template>
+	<!-- #ifdef APP -->
+	<scroll-view style="flex:1">
+	<!-- #endif -->
+	<!-- #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">表格 xTable</x-text>
+		<x-text color="#999999">列用 columns 或 x-table-col。表头与 pin 行钉在滚动区外；左右冻结三栏同步；单元格只走 #cell。</x-text>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">勾选 + 排序</x-text>
+		<x-text color="#999999" class="mb-12">表格定高 280px，表头钉住，底部「合计」pin:bottom 钉在表底不进滚动。点「年龄」「分数」排序。已选 {{ checkValue.length }} 行。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listCheck" :columns="columnsCheck" row-key="key" :show-check="true"
+			v-model:check-value="checkValue" height="280px" @check-change="onCheckChange"></x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">左右冻结 + 横滑</x-text>
+		<x-text color="#999999" class="mb-12">姓名左冻、操作右冻，中间列横滑。冻结列请写死 px / rpx。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listFreeze" :columns="columnsFreeze" row-key="key" max-height="260px"></x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">分组表头</x-text>
+		<x-text color="#999999" class="mb-12">columns 写 children。分组标题不要跨冻结边界。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listGroup" :columns="columnsGroup" row-key="key" max-height="240px"></x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">钉住行 + 合并列</x-text>
+		<x-text color="#999999" class="mb-12">row.pin 为 top 钉在表头下，bottom 钉在表底；row.merge[字段].colspan 只在同一冻结区内向右合并。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listPin" :columns="columnsPin" row-key="key" max-height="280px"></x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">x-table-col + #cell</x-text>
+		<x-text color="#999999" class="mb-12">20 行 + 左右冻结，定高 280px。竖滑表体、横滑中间列，用来测上下左右一起滚；#cell 按 column.key 分支。</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listCell" row-key="key" height="280px" @cell-click="onCellClick">
+			<x-table-col field="name" title="姓名" width="100px" fixed="left"></x-table-col>
+			<x-table-col field="age" title="年龄" width="80px" :sorter="true"></x-table-col>
+			<x-table-col field="city" title="城市" width="100px"></x-table-col>
+			<x-table-col field="address" title="地址" width="180px"></x-table-col>
+			<x-table-col field="extra" title="备注" width="120px"></x-table-col>
+			<x-table-col field="score" title="分数" width="72px"></x-table-col>
+			<x-table-col field="action" title="操作" width="88px" fixed="right"></x-table-col>
+			<template #cell="{ row, column }">
+				<x-button v-if="column.key == 'action'" size="small" @click="onEdit(row)">编辑</x-button>
+				<x-text v-else-if="column.key == 'age'" color="primary">{{ row.age }}</x-text>
+				<x-text v-else>{{ cellValue(row, column.key) }}</x-text>
+			</template>
+		</x-table>
+	</x-sheet>
+
+	<x-sheet>
+		<x-text font-size="16" class=" text-weight-b mb-8">触底加载</x-text>
+	</x-sheet>
+	<x-sheet :padding="['0']">
+		<x-table :list="listMore" :columns="columnsMore" row-key="key" max-height="220px" :refresh="loadMore"></x-table>
+	</x-sheet>
+
+	<x-modal v-model:show="showEdit">
+		<x-input v-model="editName"></x-input>
+		<x-text class="mt-12" color="#999999">演示用，确认后不写回列表。</x-text>
+	</x-modal>
+
+	<view class="py-32"></view>
+	<!-- #ifdef APP -->
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script lang="ts" setup>
+	import { ref } from "vue"
+	import { xTableColumns } from "@/uni_modules/tmx-ui/interface.uts"
+
+	type DemoMergeCell = {
+		colspan : number
+	}
+	type DemoMerge = {
+		address : DemoMergeCell
+	}
+	type DemoStyleCell = {
+		background : string
+		color : string
+		align : string
+	}
+	type DemoStyles = {
+		age : DemoStyleCell
+	}
+	type DemoRow = {
+		key : string
+		name : string
+		age : string
+		address : string
+		city : string
+		extra : string
+		score : string
+		action : string
+		pin : string
+		checkable : boolean
+		merge : DemoMerge | null
+		styles : DemoStyles | null
+	}
+
+	function rowOf(
+		key : string,
+		name : string,
+		age : string,
+		address : string,
+		city : string,
+		extra : string,
+		score : string
+	) : DemoRow {
+		return {
+			key: key,
+			name: name,
+			age: age,
+			address: address,
+			city: city,
+			extra: extra,
+			score: score,
+			action: "编辑",
+			pin: "",
+			checkable: true,
+			merge: null,
+			styles: null
+		}
+	}
+
+	const checkValue = ref<string[]>([])
+	const showEdit = ref<boolean>(false)
+	const editName = ref<string>("")
+
+	const listCheck : DemoRow[] = [
+		rowOf("1", "胡彦斌", "32", "西湖区湖底公园", "杭州", "A", "88"),
+		rowOf("2", "胡彦祖", "42", "西湖区湖底公园", "杭州", "B", "76"),
+		rowOf("3", "李雷", "28", "滨江区网商路", "杭州", "C", "91"),
+		rowOf("4", "韩梅梅", "25", "余杭区文一西路", "杭州", "D", "85"),
+		rowOf("5", "王芳", "36", "上城区延安路", "杭州", "E", "70"),
+		rowOf("6", "赵强", "19", "拱墅区大关路", "杭州", "F", "95"),
+		rowOf("7", "周杰", "31", "西湖区杨公堤", "杭州", "G", "82"),
+		rowOf("8", "吴娜", "27", "滨江区长河路", "杭州", "H", "93"),
+		rowOf("9", "郑凯", "45", "余杭区仓前", "杭州", "I", "68"),
+		rowOf("10", "冯敏", "22", "上城区清河坊", "杭州", "J", "90"),
+		rowOf("11", "陈峰", "38", "拱墅区湖墅南路", "杭州", "K", "74"),
+		rowOf("12", "蒋雪", "29", "西湖区文三路", "杭州", "L", "86"),
+		rowOf("13", "沈涛", "33", "滨江区江南大道", "杭州", "M", "79"),
+		rowOf("14", "曹丽", "24", "余杭区未来科技城", "杭州", "N", "97"),
+		rowOf("15", "许洋", "41", "上城区解放路", "杭州", "O", "71"),
+		rowOf("16", "袁洁", "26", "拱墅区运河边", "杭州", "P", "84"),
+		rowOf("sum", "合计", "-", "共16行", "", "", "1329")
+	]
+	listCheck[2].checkable = false
+	listCheck[16].pin = "bottom"
+	listCheck[16].checkable = false
+
+	const columnsCheck : xTableColumns[] = [
+		{ title: "姓名", key: "name", width: "28%", sorter: false, align: "left" },
+		{ title: "年龄", key: "age", width: "22%", sorter: true },
+		{ title: "城市", key: "city", width: "22%" },
+		{ title: "分数", key: "score", width: "28%", sorter: true }
+	]
+
+	const listFreeze : DemoRow[] = [
+		rowOf("1", "胡彦斌", "32", "西湖区湖底公园1号", "杭州", "备注甲", "88"),
+		rowOf("2", "胡彦祖", "42", "西湖区湖底公园2号", "杭州", "备注乙", "76"),
+		rowOf("3", "李雷", "28", "滨江区网商路88号", "杭州", "备注丙", "91"),
+		rowOf("4", "韩梅梅", "25", "余杭区文一西路", "杭州", "备注丁", "85"),
+		rowOf("5", "王芳", "36", "上城区延安路", "杭州", "备注戊", "70")
+	]
+
+	const columnsFreeze : xTableColumns[] = [
+		{ title: "姓名", key: "name", width: "96px", fixed: "left", align: "left" },
+		{ title: "年龄", key: "age", width: "72px" },
+		{ title: "城市", key: "city", width: "88px" },
+		{ title: "地址", key: "address", width: "180px", align: "left" },
+		{ title: "备注", key: "extra", width: "120px" },
+		{ title: "分数", key: "score", width: "72px", sorter: true },
+		{ title: "操作", key: "action", width: "80px", fixed: "right" }
+	]
+
+	const listGroup : DemoRow[] = [
+		rowOf("1", "胡彦斌", "32", "西湖区湖底公园", "杭州", "A组", "88"),
+		rowOf("2", "胡彦祖", "42", "滨江区网商路", "杭州", "B组", "76"),
+		rowOf("3", "李雷", "28", "余杭区文一西路", "杭州", "C组", "91")
+	]
+
+	const columnsGroup : xTableColumns[] = [
+		{
+			title: "基本信息",
+			key: "base",
+			children: [
+				{ title: "姓名", key: "name", width: "100px", align: "left" },
+				{ title: "年龄", key: "age", width: "80px", sorter: true }
+			]
+		},
+		{
+			title: "联系",
+			key: "contact",
+			children: [
+				{ title: "城市", key: "city", width: "90px" },
+				{ title: "地址", key: "address", width: "160px", align: "left" }
+			]
+		},
+		{ title: "分数", key: "score", width: "80px", sorter: true }
+	]
+
+	const listPin : DemoRow[] = [
+		rowOf("0", "合计", "-", "3 人在杭", "-", "-", "259"),
+		rowOf("1", "胡彦斌", "32", "西湖区湖底公园1号", "杭州", "A", "88"),
+		rowOf("2", "胡彦祖", "42", "西湖区湖底公园2号", "杭州", "B", "76"),
+		rowOf("3", "李雷", "28", "滨江区网商路", "杭州", "C", "91"),
+		rowOf("4", "韩梅梅", "25", "余杭区文一西路", "杭州", "D", "85")
+	]
+	listPin[0].pin = "top"
+	listPin[0].merge = { address: { colspan: 2 } }
+	listPin[0].styles = { age: { background: "#7e6539", color: "#ffffff", align: "center" } }
+	listPin[3].styles = { age: { background: "#e8f4ff", color: "#0091FF", align: "center" } }
+
+	const columnsPin : xTableColumns[] = [
+		{ title: "姓名", key: "name", width: "22%", align: "left" },
+		{ title: "年龄", key: "age", width: "18%", sorter: true },
+		{ title: "地址", key: "address", width: "38%", align: "left" },
+		{ title: "城市", key: "city", width: "22%" }
+	]
+
+	function makeScrollRows(prefix : string, n : number) : DemoRow[] {
+		const names : string[] = ["胡彦斌", "胡彦祖", "李雷", "韩梅梅", "王芳", "赵强", "周杰", "吴娜", "郑凯", "冯敏"]
+		const cities : string[] = ["杭州", "上海", "北京", "深圳"]
+		const addrs : string[] = ["西湖区湖底公园", "滨江区网商路", "余杭区文一西路", "上城区延安路", "拱墅区大关路"]
+		const out : DemoRow[] = []
+		for (let i = 0; i < n; i++) {
+			const no = (i + 1).toString()
+			out.push(rowOf(
+				prefix + no,
+				names[i % names.length],
+				(20 + (i % 26)).toString(),
+				addrs[i % addrs.length] + no + "号",
+				cities[i % cities.length],
+				"备注" + no,
+				(60 + (i % 40)).toString()
+			))
+		}
+		return out
+	}
+
+	const listCell : DemoRow[] = makeScrollRows("c", 20)
+
+	const listMore = ref<DemoRow[]>([
+		rowOf("1", "行 1", "21", "触底继续加载", "杭州", "", "60"),
+		rowOf("2", "行 2", "22", "触底继续加载", "杭州", "", "61"),
+		rowOf("3", "行 3", "23", "触底继续加载", "杭州", "", "62"),
+		rowOf("4", "行 4", "24", "触底继续加载", "杭州", "", "63"),
+		rowOf("5", "行 5", "25", "触底继续加载", "杭州", "", "64")
+	])
+
+	const columnsMore : xTableColumns[] = [
+		{ title: "姓名", key: "name", width: "30%" },
+		{ title: "年龄", key: "age", width: "20%", sorter: true },
+		{ title: "地址", key: "address", width: "50%", align: "left" }
+	]
+
+	function onCheckChange(ids : string[]) : void {
+		console.log("check", ids)
+	}
+
+	function cellValue(row : DemoRow, key : string) : string {
+		if (key == "name") return row.name
+		if (key == "age") return row.age
+		if (key == "address") return row.address
+		if (key == "city") return row.city
+		if (key == "extra") return row.extra
+		if (key == "score") return row.score
+		if (key == "action") return row.action
+		return ""
+	}
+
+	function onEdit(row : DemoRow) : void {
+		editName.value = row.name
+		showEdit.value = true
+	}
+
+	function onCellClick(row : DemoRow, key : string) : void {
+		if (key == "action") return
+		console.log("cell", row.key, key)
+	}
+
+	async function loadMore() : Promise<void> {
+		await new Promise<void>((resolve) => {
+			setTimeout(() => {
+				const n = listMore.value.length + 1
+				listMore.value.push(rowOf(n.toString(), "行 " + n.toString(), (20 + n).toString(), "新加载地址", "杭州", "", (50 + n).toString()))
+				resolve()
+			}, 500)
+		})
+	}
+</script>
+```
+
+---
+
+## 版权
+
+@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//350/247/222/346/240/207 xBadge.md"

@@ -0,0 +1,173 @@
+# 角标 xBadge
+
+## 介绍
+
+角标
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-badge/x-badge.uvue
+```
+
+## 使用
+
+```ts
+<x-badge></x-badge>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| fontSize | `文字大小，可数字或者带单位`<br> | `union` | `"9"` |
+| bgColor | `背景颜色，合法和颜色值及主题名称`<br> | `string` | `"error"` |
+| fontColor | `文字颜色，合法和颜色值及主题名称`<br> | `string` | `"white"` |
+| dot | `是否显示为点，优先级小于count,label`<br> | `boolean` | `true` |
+| count | `是否显示为文本数字，优先级小于label`<br> | `number` | `0` |
+| maxCount | `为数字时大于此值显示+号`<br> | `number` | `99` |
+| label | `是否显示为文本，优先级最大`<br> | `string` | `""` |
+| position | `位置`<br> | `positionType` | `"right"` |
+| offset | `偏移`<br> | `Array` | `():number[] => [0, 0] as number[]` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| - | - | - |
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| default | `默认内容区域,你的正常内容放置在标签内` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/badge
+```
+
+## 示例源码
+
+```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">角标 Badge</x-text>
+			<x-text color="#999999" >
+				另外：安卓布局需要你使用flex布局，并且内容层需要有宽度值防止让角标的内容断行
+			</x-text>
+		</x-sheet>
+		<x-sheet  class="flex flex-row flex-row-center-center flex-wrap ">
+
+			<view class="flex-1 flex flex-row flex-row-center-center ">
+				<x-badge >
+					<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+				</x-badge>
+			</view>
+			<view class="flex-1 flex flex-row flex-row-center-center">
+				<x-badge bg-color="danger" :count="1" >
+					<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+				</x-badge>
+			</view>
+			
+			<view class="flex-1 flex flex-row flex-row-center-center">
+				<x-badge bg-color="success" label="HOT" >
+					<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+				</x-badge>
+			</view>
+			<view  class="flex-1 flex flex-row flex-row-center-center">
+				<x-badge bg-color="primary" :count="150" >
+					<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+				</x-badge>
+				
+			</view>
+		</x-sheet>
+
+		<x-sheet>
+			<x-text font-size="18" class=" text-weight-b mb-8">左上，右上，左下，右下，上中，下中</x-text>
+			<x-text color="#999999" >
+				另外：安卓布局需要你使用flex布局，并且内容层需要有宽度值防止让角标的内容断行
+			</x-text>
+		</x-sheet>
+
+		<x-sheet class="flex flex-row flex-row-center-center flex-wrap ">
+
+			<x-badge position="left" >
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</x-badge>
+			<x-badge position="right" bg-color="danger" :count="36" >
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</x-badge>
+			<x-badge position="bottomLeft" bg-color="success" label="HOT" >
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</x-badge>
+			<x-badge position="bottomRight" bg-color="primary" :count="150" >
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</x-badge>
+			<x-badge position="top" bg-color="success" label="HOT" >
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</x-badge>
+			<x-badge position="bottom" bg-color="error" :count="150" >
+				<view style="width: 100rpx;height:100rpx;background: #f3f3f3;"></view>
+			</x-badge>
+		</x-sheet>
+
+		<x-sheet >
+			<x-text font-size="18" class=" text-weight-b ">应用在其它组件上</x-text>
+		</x-sheet>
+		<x-sheet class="flex flex-row flex-row-center-center">
+
+			<x-badge label="50%SALE" >
+				<x-button size="normal">按钮</x-button>
+			</x-badge>
+			<x-badge label="HOT" >
+				<view style="width:64rpx">
+					<x-icon name="movie-2-fill"></x-icon>
+				</view>
+			</x-badge>
+			<x-badge>
+				<view style="width:42rpx">
+					<x-icon name="settings-5-fill"></x-icon>
+				</view>
+			</x-badge>
+
+		</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//350/255/246/345/221/212 xAlert.md"

@@ -0,0 +1,131 @@
+# 警告 xAlert
+
+## 介绍
+
+样式丰富常用警告提醒
+
+## 平台兼容
+
+| Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
+| --- | --- | --- | --- | --- | --- | --- | --- |
+| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
+
+## 文件路径
+
+```ts
+@/uni_modules/tmx-ui/components/x-alert/x-alert.uvue
+```
+
+## 使用
+
+```ts
+<x-alert></x-alert>
+```
+
+## Props 属性
+
+| 名称 | 说明 | 类型 | 默认值 |
+| ------ | ---- | ---- | ---- |
+| status | `类型`<br>`warn:警告`<br>`success:成功`<br>`error:错误`<br>`info:信息`<br>`primary:正常主题`<br> | `xAlertStatusType` | `"primary"` |
+| icon | `警告图标,不填写取status默认图标`<br>`填写以填写为准`<br> | `string` | `""` |
+| iconSize | `警告图标大小`<br> | `string` | `"20"` |
+| closeIcon | `关闭图标`<br> | `string` | `"close-line"` |
+| showClose | `显示还是隐藏关闭按钮`<br> | `boolean` | `true` |
+| fontSize | `文字大小`<br> | `string` | `"15"` |
+| color | `主题色，如果不填写以status为准`<br> | `string` | `""` |
+| fontColor | `文字颜色，如果不填写以status为准`<br> | `string` | `""` |
+| darkColor | `暗黑主题颜色，如果不填写自动计算`<br> | `string` | `""` |
+| fontDarkColor | `暗黑文字颜色，如果不填写自动计算`<br> | `string` | `""` |
+| skin | `它是建立在你没有提供color时才有效。`<br>`如果提供了color是以你color为背景最终色。`<br>`thin浅色模式，`<br>`normal标准背景色`<br> | `string` | `"thin"` |
+| round | `圆角`<br>`数组数字时`<br>`[全部]`<br>`[顶左，顶右，底右，底左]`<br>`[顶左，底右]`<br>`[顶左，顶右，底右]`<br>`空数组时取全局值`<br> | `Array` | `():string[] => [] as string[]` |
+| border | `边线`<br>`数组数字时`<br>`数组数字时`<br>`[全部]`<br>`[左，上，右，下]`<br>`[左右，上下]`<br>`[左，上，右]`<br>`空数组时取全局值`<br> | `Array` | `():string[] => [] as string[]` |
+| borderColor | `边框颜色`<br>`格式同border边线。`<br>`空数组时取全局值`<br> | `Array` | `():string[] => [] as string[]` |
+| darkBorderColor | `如果不填写，自动计算`<br> | `Array` | `():string[] => [] as string[]` |
+| borderStyle | `边线类型，默认solid,可以为none`<br> | `string` | `'solid'` |
+| margin | `间隙[x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下`<br>`空数组时取全局值`<br> | `Array` | `():string[] => ['16', '0', '16', '16'] as string[]` |
+| padding | `内间隙[x]全部,[x,x]左右，上下,[x,x,x]左上右,[x,x,x,x]左上右下`<br>`空数组时取全局值`<br> | `Array` | `():string[] => ['16', '12'] as string[]` |
+| height | `自定义高度，可以是数字，单位或者百分比,auto`<br> | `string` | `"auto"` |
+| width | `宽，单位合法即可数字，字符串带单位，百分比,auto`<br> | `string` | `"auto"` |
+
+
+## Events 事件
+
+| 名称 | 参数 | 说明 |
+| ------ | ---- | ---- |
+| close | `-` | 关闭时触发 |
+| click | `-` | 组件被点击时触发 |
+
+
+## Slots 插槽
+
+| 名称 | 说明 | 数据 |
+| ------ | ---- | ---- |
+| left | `左边图标插槽` | - |
+| default | `默认插槽内容` | - |
+
+
+## Ref 方法
+
+| 名称 | 参数 | 返回值 | 说明 |
+| ------ | ---- | ---- | ---- |
+| - | - | - | - |
+
+## 示例文件路径
+
+```json
+/pages/zhanshi/alert
+```
+
+## 示例源码
+
+```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">警告 xAlert</x-text>
+		<x-text color="#999999">
+			样式丰富，用于警告信息的提醒。
+		</x-text>
+	</x-sheet>
+	<x-alert>默认为thin浅色样式，可以自适应暗黑</x-alert>
+	<x-alert skin='normal'>也可以把skin改成normal变成纯背景</x-alert>
+	<x-alert icon="building-fill" skin='normal' color="#000000">也可以把skin改成normal变成纯背景</x-alert>
+	<x-alert icon="building-fill" skin='normal' color="#dee3e7">也可以把skin改成normal变成纯背景</x-alert>
+
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b ">可以使用默认的状态来管理颜色</x-text>
+	</x-sheet>
+	<x-alert icon="file-word-2-fill" status="success" skin='normal'>自定义图标</x-alert>
+	<x-alert status="error" skin='normal'>错误提醒</x-alert>
+	<x-alert status="warn" closeIcon="arrow-right-line" skin='normal'>警告提醒</x-alert>
+	<x-alert icon="money-cny-circle-fill" color="#728398" skin='normal'>自定义背景色</x-alert>
+	<x-sheet>
+		<x-text font-size="18" class=" text-weight-b ">比如改些圆角，边线啥的,样式丰富请自行设计</x-text>
+	</x-sheet>
+	<x-alert status="warn" skin='normal' :round="['6']">警告提醒</x-alert>
+	<x-alert status="error" skin='normal' :round="['12','0']">改下圆角</x-alert>
+	<x-alert :border="['2']">加个小边框</x-alert>
+	<x-alert :border="['2']" :showClose="false" :borderColor="['#89c0ff']"
+		:darkBorderColor="['#3b5066']">加个小边框,隐藏关闭</x-alert>
+
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style>
+
+</style>
+```
+
+---
+
+## 版权
+
+@2026 tmui4x [https://xui.tmui.design](https://xui.tmui.design)