diff --git a/src/App.vue b/src/App.vue
index 90ed22f..ba2a868 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,7 +14,14 @@
 			getLocation()
 		},
 		onShow: function (options) {
-
+			if (uni.getStorageSync('logintime') && uni.getStorageSync('logintime') + 1800000 <= Date.now()) {  //登录半小时自动注销 需重新登陆 
+				console.log('token超时',uni.getStorageSync('logintime'));
+				uni.removeStorageSync('logintime')
+				uni.navigateTo({
+					url: '/pages/login/login'
+				})
+				return
+			}
 			// 首次进入页面时路由拦截
 			setTimeout(() => {
 				const currentPage = options.path
diff --git a/src/api/pages/file/index.ts b/src/api/pages/file/index.ts
new file mode 100644
index 0000000..8774a94
--- /dev/null
+++ b/src/api/pages/file/index.ts
@@ -0,0 +1,41 @@
+import { http } from '@/utils/http';
+
+export function queryDocumentApi(config) { // 公文列表
+	return http({
+		url: '/cxcoagwfb/cxcOaGwfb/bpmlist',
+		method: 'GET',
+		data: config
+	})
+}
+
+export function queryNoticeApi(config) { // 公告
+	return http({
+		url: '/cxctz/cxcTz/list',
+		method: 'GET',
+		data: config
+	})
+}
+
+export function querySuperiorSystemApi(config) { // 上级制度
+	return http({
+		url: '/cxcjyglsjzdgl/cxcJyglSjzdgl/zslist',
+		method: 'GET',
+		data: config
+	})
+}
+
+export function queryFactorySystemApi(config) { // 厂级制度
+	return http({
+		url: '/cxczd/cxcZdgl/list',
+		method: 'GET',
+		data: config
+	})
+}
+
+export function queryRegulationsApi(config) { // 法律法规
+	return http({
+		url: '/cxcoaflgf/cxcOaFlgf/zslist',
+		method: 'GET',
+		data: config
+	})
+}
\ No newline at end of file
diff --git a/src/pages-user/location/location.vue b/src/pages-user/location/location.vue
deleted file mode 100644
index bb5df7f..0000000
--- a/src/pages-user/location/location.vue
+++ /dev/null
@@ -1,89 +0,0 @@
-<route lang="json5" type="page">
-{
-  layout: 'default',
-  style: {
-    navigationBarTitleText: '',
-    navigationStyle: 'custom',
-  },
-}
-</route>
-
-<template>
-  <PageLayout navTitle="定位" backRouteName="people" routeMethod="pushTab">
-    <map
-      style="width: 100%; height: 100%"
-      :latitude="latitude"
-      :longitude="longitude"
-      :markers="marker"
-      :scale="scale"
-    ></map>
-  </PageLayout>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue'
-import { onShow, onHide, onLoad, onReady } from '@dcloudio/uni-app' 
-
-const latitude = ref(40.009704)
-const longitude = ref(116.374999)
-const marker = reactive([
-  {
-    id: 0,
-    latitude: latitude.value, //纬度
-    longitude: longitude.value, //经度
-    iconPath: '/static/location.png', //显示的图标
-    rotate: 0, // 旋转度数
-    width: 20, //宽
-    height: 20, //高
-    title: '你在哪了', //标注点名
-    alpha: 0.5, //透明度
-    /* label:{//为标记点旁边增加标签   //因背景颜色H5不支持
-				  　　 content:'北京国炬公司',//文本
-				　　　 color:'red',//文本颜色
-					　 fontSize:24,//文字大小
-					   x:5,//label的坐标，原点是 marker 对应的经纬度
-					   y:1,//label的坐标，原点是 marker 对应的经纬度 
-					   borderWidth:12,//边框宽度
-					   borderColor:'pink',//边框颜色    
-					　 borderRadius:20,//边框圆角                        
-					　 bgColor:'black',//背景色
-					　 padding:5,//文本边缘留白
-					   textAlign:'right'//文本对齐方式。
-			   }, */
-    callout: {
-      //自定义标记点上方的气泡窗口 点击有效
-      content: '北京国炬公司', //文本
-      color: '#ffffff', //文字颜色
-      fontSize: 14, //文本大小
-      borderRadius: 2, //边框圆角
-      bgColor: '#00c16f', //背景颜色
-      display: 'ALWAYS', //常显
-    },
-    // anchor:{//经纬度在标注图标的锚点，默认底边中点
-    //     x:0,    原点为给出的经纬度
-    //     y:0,
-    // }
-  },
-])
-const scale = 16
-
-const getLocation = () => {
-  uni.getLocation({
-    type: 'gcj02',
-    success: function (res) {
-      console.log('当前位置的经度：' + res.longitude)
-      console.log('当前位置的纬度：' + res.latitude)
-    },
-    fail: function (res) {
-      console.log('当前位置的经度')
-    },
-  })
-}
-onLoad(() => {
-  getLocation()
-})
-</script>
-
-<style lang="scss" scoped>
-//
-</style>
diff --git a/src/pages.json b/src/pages.json
index 70a1002..563c15d 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -172,6 +172,15 @@
         "navigationBarTitleText": "工作台",
         "navigationStyle": "custom"
       }
+    },
+    {
+      "path": "pages/operate/file/index",
+      "type": "page",
+      "layout": "default",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "公文/通知公告/法律法规/上级制度/厂级制度"
+      }
     }
   ],
   "subPackages": [
@@ -233,15 +242,6 @@
     {
       "root": "pages-user",
       "pages": [
-        {
-          "path": "location/location",
-          "type": "page",
-          "layout": "default",
-          "style": {
-            "navigationBarTitleText": "",
-            "navigationStyle": "custom"
-          }
-        },
         {
           "path": "userEdit/userEdit",
           "type": "page",
diff --git a/src/pages/index/index.vue b/src/pages/index/index.vue
index fd29d2a..84474c7 100644
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -8,7 +8,7 @@
 	}
 </route>
 <template>
-	<PageLayout :navbarShow="false">
+	<PageLayout :navbarShow="false" :class="{ 'gray': appStore.isGray == 1 }">
 		<view class="nav">
 			<view class="nav_box">
 				<view class="weather_calender">
@@ -30,15 +30,16 @@
 				</view>
 			</view>
 		</view>
+
+		<!-- 滚动内容区 -->
 		<scroll-view class="scrollView" :scroll-y="true" scroll-with-animation>
-			<!--轮播图-->
 			<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="5000"
 				:duration="500">
 				<swiper-item v-for="(item, index) in carouselList" :key="index">
 					<image :src="getFileAccessHttpUrl(item)" mode="aspectFill"></image>
 				</swiper-item>
 			</swiper>
-			<!--流程服务-->
+
 			<wd-row>
 				<wd-col :span="12" v-for="(item, index) in middleApps" :key="index">
 					<wd-img :width="50" :height="50" :src="getFileAccessHttpUrl(item.icon)"></wd-img>
@@ -48,7 +49,7 @@
 					</view>
 				</wd-col>
 			</wd-row>
-			<!--常用服务-->
+
 			<view class="serveBox">
 				<view class="title">
 					<view class="dot"></view>
@@ -56,7 +57,7 @@
 				</view>
 				<Grid :column="4" v-model="usList" @itemClik="goPage"></Grid>
 			</view>
-			<!--其他服务-->
+
 			<view class="serveBox">
 				<view class="title">
 					<view class="dot"></view>
@@ -100,40 +101,10 @@
 	const res = wx.getSystemInfoSync();
 	const statusHeight = res.statusBarHeight; //状态栏高度
 	const cusnavbarheight = (statusHeight + 30) + "px";
-	const goPage = (item) => {
-		// let page = item.routeIndex
-		// console.log('-----------page------------', page)
-		// if (!page) {
-		// 	toast.info('该功能暂未实现')
-		// } else {
-		// 	if (['other', 'common'].includes(page)) {
-		// 		goPageMore(page)
-		// 		return
-		// 	}
-		// 	if (page === 'annotationList') {
-		// 		msgCount.value = 0
-		// 	}
-		// 	dot.value[page] = false
-		// 	if (page.indexOf('/app/online') == 0) {
-		// 		let code = page.substring(page.lastIndexOf('/') + 1)
-		// 		let real = { desformCode: code, desformName: item.title }
-		// 		uni.navigateTo({
-		// 			url: '/pages/check/onlineForm/add?item=' + encodeURIComponent(JSON.stringify(real)),
-		// 		})
-		// 	} else if (page.indexOf('/app/desform') == 0) {
-		// 		let code = page.substring(page.lastIndexOf('/') + 1)
-		// 		let real = { desformCode: code, desformName: item.title }
-		// 		uni.navigateTo({
-		// 			url: '/pages/check/designForm/designForm?item=' + encodeURIComponent(JSON.stringify(real)),
-		// 		})
-		// 	} else {
-		// 		if (!hasRoute({ name: page })) {
-		// 			router.replace({ name: 'demo', params: { backRouteName: 'index' } })
-		// 		} else {
-		// 			router.replace({ name: page, params: { backRouteName: 'index' } })
-		// 		}
-		// 	}
-		// }
+	const goPage = (item : any) => {
+		uni.navigateTo({
+			url: `${item.path}?title=${item.text}`
+		})
 	}
 
 	const goPageMore = (page) => {
@@ -272,7 +243,7 @@
 			justify-content: flex-end;
 		}
 	}
-	
+
 	.scrollView {
 		display: flex;
 		flex-direction: column;
@@ -330,18 +301,17 @@
 			}
 		}
 	}
-	
+
 	.swiper {
 		height: 575upx;
 		flex: none;
-	
+
 		image {
 			width: 100%;
 			display: block;
 			height: 100%;
 			margin: 0;
 		}
-	
+
 	}
-	
 </style>
\ No newline at end of file
diff --git a/src/pages/login/login.vue b/src/pages/login/login.vue
index 3048157..ca81da0 100644
--- a/src/pages/login/login.vue
+++ b/src/pages/login/login.vue
@@ -124,6 +124,7 @@
 						localStorageTime: +new Date(),
 					})
 					savePwd()  //记住账号密码
+					uni.setStorageSync('logintime', Date.now()) //缓存登录时间
 					router.pushTab({ path: HOME_PAGE })
 				} else {
 					toast.warning(res.message)
diff --git a/src/pages/operate/file/index.vue b/src/pages/operate/file/index.vue
new file mode 100644
index 0000000..41989f9
--- /dev/null
+++ b/src/pages/operate/file/index.vue
@@ -0,0 +1,273 @@
+<route lang="json5" type="page">
+	{
+	layout: 'default',
+	style: {
+	navigationStyle: 'custom',
+	navigationBarTitleText: '公文/通知公告/法律法规/上级制度/厂级制度',
+	},
+	}
+</route>
+
+<template>
+	<view :class="['fixed-header', { 'gray': appStore.isGray == 1 }]">
+		<wd-navbar left-text="返回" left-arrow
+			custom-style="padding-top: var(--status-bar-height, 0); background-image: linear-gradient(to right, #1890ff, #096dd9); color: #fff;"
+			@click-left="handleClickLeft">
+			<template #title>
+				<view class="search-box">
+					<wd-search v-model="keyword" hide-cancel placeholder-left placeholder="搜索" shape="round"
+						@change="onChange"></wd-search>
+				</view>
+			</template>
+		</wd-navbar>
+	</view>
+	<view class="container">
+		<!-- 加载提示 -->
+		<wd-loading v-if="loading && pageNo === 1" class="loading-tip">加载中...</wd-loading>
+		<!-- 列表内容 -->
+		<view v-for="(item, i) in list" :key="i">
+			<wd-card :title="item.title" title-bold border-radius="8" use-footer-slot>
+				<view class="card-content">
+					<view class="meta-info">
+						<wd-icon name="time" size="14px" color="#999"></wd-icon>
+						<text class="meta-text">{{item.time}}</text>
+						<wd-icon name="usergroup" size="14px" color="#999" style="margin-left: auto;"></wd-icon>
+						<text class="meta-text">{{item.depart}}</text>
+					</view>
+				</view>
+			</wd-card>
+		</view>
+		<view class="load-more" v-if="loading && pageNo > 1">
+			<wd-loading size="16px">正在加载...</wd-loading>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import {
+		onLoad,
+		onReachBottom,
+		onPullDownRefresh
+	} from '@dcloudio/uni-app'
+	import {
+		queryDocumentApi,
+		queryNoticeApi,
+		querySuperiorSystemApi,
+		queryFactorySystemApi,
+		queryRegulationsApi
+	} from '@/api/pages/file'
+	import {
+		useAppStore
+	} from '@/store'
+	const appStore = useAppStore()
+	let pageNo = 1
+	let pageSize = 10
+	let loading = false
+	const list = ref([]) //文件列表
+	const keyword = ref('') //查询绑定值
+	const type = ref('') //绑定查询文件种类
+
+
+	const handleClickLeft = () => {
+		uni.navigateBack()
+	}
+
+	const getList = () => {
+		loading = true
+		if (type.value == '公文') getDocumentList()
+		if (type.value == '通知公告') getNoticeList()
+		if (type.value == '上级制度') getSuperiorSystemList()
+		if (type.value == '厂级制度') getFactorySystemList()
+		if (type.value == '法律法规') getRegulationsList()
+	}
+
+	/*公文*/
+	const getDocumentList = () => {
+		queryDocumentApi({
+			pageNo,
+			pageSize,
+			fwbt: formatSearchkey()
+		}).then((res) => {
+			if (res.success) {
+				list.value = [...list.value, ...formatObj(res.result.records, 'fwbt', 'fwtime', 'wjlb')]
+			}
+			loading = false
+		}).catch((err) => {
+			loading = false
+		})
+	}
+
+	/*通知公告*/
+	const getNoticeList = () => {
+		queryNoticeApi({
+			pageNo,
+			pageSize,
+			neirong: formatSearchkey()
+		}).then((res) => {
+			if (res.success) {
+				list.value = [...list.value, ...formatObj(res.result.records, 'neirong', 'createTime', 'fbdw')]
+			}
+			loading = false
+		}).catch((err) => {
+			loading = false
+		})
+	}
+
+	/*上级制度*/
+	const getSuperiorSystemList = () => {
+		querySuperiorSystemApi({
+			pageNo,
+			pageSize,
+			zdmc: formatSearchkey()
+		}).then((res) => {
+			if (res.success) {
+				list.value = [...list.value, ...formatObj(res.result.records, 'zdmc', 'updateTime2', 'zbbm')]
+			}
+			loading = false
+		}).catch((err) => {
+			loading = false
+		})
+	}
+
+	/*厂级制度*/
+	const getFactorySystemList = () => {
+		queryFactorySystemApi({
+			pageNo,
+			pageSize,
+			zdmc: formatSearchkey()
+		}).then((res) => {
+			if (res.success) {
+				list.value = [...list.value, ...formatObj(res.result.records, 'zdmc', 'fatime',
+					'zbbm_dictText')]
+			}
+			loading = false
+		}).catch((err) => {
+			loading = false
+		})
+	}
+
+	/*法律法规*/
+	const getRegulationsList = () => {
+		queryRegulationsApi({
+			pageNo,
+			pageSize,
+			flfgmc: formatSearchkey()
+		}).then((res) => {
+			if (res.success) {
+				list.value = [...list.value, ...formatObj(res.result.records, 'flfgmc', 'updateTime2',
+					'fabubumen')]
+			}
+			loading = false
+		}).catch((err) => {
+			console.log('err', err);
+		})
+	}
+
+	const formatObj = (arr, title, time, depart) => {
+		return arr.map((item) => ({
+			...item,
+			title: item[title],
+			time: item[time],
+			depart: item[depart]
+		}))
+	}
+
+	const formatSearchkey = () => {
+		if (keyword.value.trim()) {
+			return '*' + keyword.value + '*'
+		}
+	}
+
+	const onChange = () => {
+		pageNo = 1
+		list.value = []
+		getList()
+	}
+
+	onReachBottom(() => {
+		if (loading) return
+		pageNo++
+		getList()
+	})
+
+	onPullDownRefresh(() => {
+		pageNo = 1
+		list.value = []
+		getList()
+		uni.stopPullDownRefresh()
+	})
+
+	onLoad((options) => {
+		type.value = options.title
+		getList()
+	});
+</script>
+
+<style lang="scss">
+	/* 固定顶部区域 */
+	.fixed-header {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 1000;
+	}
+
+	.container {
+		 padding: calc(60px + var(--status-bar-height, 0)) 5px 0 5px; /* 确保顶部 padding 包含状态栏高度 */
+		/* 顶部padding要大于固定头高度 */
+		min-height: 100vh;
+		background-color: #f7f7f7;
+	}
+
+	.search-box {
+		display: flex;
+		height: 100%;
+		align-items: center;
+		width: 100%;
+		padding: 0 10px;
+
+		:deep() {
+			.wd-search {
+				background: rgba(255, 255, 255, 0.2);
+				border-radius: 18px;
+				width: 100%;
+
+				.wd-search__input {
+					color: #fff;
+				}
+
+				.wd-search__placeholder {
+					color: rgba(255, 255, 255, 0.7);
+				}
+			}
+		}
+	}
+
+	.card-content {
+		padding: 8px 0;
+
+		.meta-info {
+			display: flex;
+			align-items: center;
+			font-size: 12px;
+			color: #666;
+
+			.meta-text {
+				margin-left: 4px;
+			}
+		}
+	}
+
+	.loading-tip {
+		padding: 20px 0;
+		text-align: center;
+	}
+
+	.load-more {
+		padding: 16px 0;
+		text-align: center;
+		font-size: 14px;
+		color: #999;
+	}
+</style>
\ No newline at end of file
diff --git a/src/pages/user/people.vue b/src/pages/user/people.vue
index ff8e109..5fd0242 100644
--- a/src/pages/user/people.vue
+++ b/src/pages/user/people.vue
@@ -10,7 +10,7 @@
 
 <template>
 	<PageLayout :navbarShow="false">
-		<view :class="{ 'gray': appStore.isGray == 1 }">
+		<view :class="{'gray': appStore.isGray == 1 }">
 			<view class="avatar-area">
 				<wd-img width="100" height="100" :round="true" :radius="50"
 					:src="getFileAccessHttpUrl(userStore.userInfo.avatar)" @click="ChooseImage"></wd-img>
@@ -168,6 +168,7 @@
 			})
 			.then(() => {
 				userStore.clearUserInfo()
+				uni.removeStorageSync('logintime') //清除登录时间
 				router.replaceAll({ name: 'login' })
 			})
 	}
diff --git a/src/types/uni-pages.d.ts b/src/types/uni-pages.d.ts
index a14a780..993cd08 100644
--- a/src/types/uni-pages.d.ts
+++ b/src/types/uni-pages.d.ts
@@ -18,12 +18,12 @@ interface NavigateToOptions {
        "/pages/more/more" |
        "/pages/user/people" |
        "/pages/workHome/index" |
+       "/pages/operate/file/index" |
        "/pages-home/home/home" |
        "/pages-message/chat/chat" |
        "/pages-message/contacts/contacts" |
        "/pages-message/personPage/personPage" |
        "/pages-message/tenant/tenant" |
-       "/pages-user/location/location" |
        "/pages-user/userEdit/userEdit" |
        "/pages-work/dragPage/index" |
        "/pages-work/onlinePage/onlineAdd" |
diff --git a/src/uni_modules/wot-design-uni/changelog.md b/src/uni_modules/wot-design-uni/changelog.md
new file mode 100644
index 0000000..6439cf4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/changelog.md
@@ -0,0 +1,2081 @@
+## 1.9.1（2025-05-08）
+### [1.9.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.9.0...v1.9.1) (2025-05-08)
+
+
+###  Documentation | 文档
+
+*   处理小程序超包 ([08e9ee1](https://github.com/Moonofweisheng/wot-design-uni/commit/08e9ee1cb366e4c5ec87d989795d58399cb1df32))
+*   修复部分组件二维码显示异常的问题 ([eea9bf7](https://github.com/Moonofweisheng/wot-design-uni/commit/eea9bf7aac36cfd9b7b476392c35e3db097e4891))
+
+
+###  Bug Fixes | Bug 修复
+
+*  修复 Upload 开启 multiple 后只能成功上传最后一个文件的问题 ([#1044](https://github.com/Moonofweisheng/wot-design-uni/issues/1044)) ([f2ae0d3](https://github.com/Moonofweisheng/wot-design-uni/commit/f2ae0d3aacab3b95b48f623623c5bf1f9acecf18)), closes [#1043](https://github.com/Moonofweisheng/wot-design-uni/issues/1043)
+
+# 更新日志 
+
+
+### [1.9.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.9.0...v1.9.1) (2025-05-08)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  处理小程序超包 ([08e9ee1](https://github.com/Moonofweisheng/wot-design-uni/commit/08e9ee1cb366e4c5ec87d989795d58399cb1df32))
+* ✏️  修复部分组件二维码显示异常的问题 ([eea9bf7](https://github.com/Moonofweisheng/wot-design-uni/commit/eea9bf7aac36cfd9b7b476392c35e3db097e4891))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Upload 开启 multiple 后只能成功上传最后一个文件的问题 ([#1044](https://github.com/Moonofweisheng/wot-design-uni/issues/1044)) ([f2ae0d3](https://github.com/Moonofweisheng/wot-design-uni/commit/f2ae0d3aacab3b95b48f623623c5bf1f9acecf18)), closes [#1043](https://github.com/Moonofweisheng/wot-design-uni/issues/1043)
+
+## [1.9.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.8.0...v1.9.0) (2025-05-07)
+
+
+### ⚡ Performance Improvements | 性能优化
+
+* ⚡ 增强 wd-drop-menu 组件，优化遮罩层闪烁 ([#974](https://github.com/Moonofweisheng/wot-design-uni/issues/974)) ([f9605b7](https://github.com/Moonofweisheng/wot-design-uni/commit/f9605b71b667cfaad56b7b028d53ccff5112ddf8))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Curtain 幕帘组件 close 事件触发2次的问题 ([460a838](https://github.com/Moonofweisheng/wot-design-uni/commit/460a83802bad5b38d6e7063e481e510ed69dffb9)), closes [#894](https://github.com/Moonofweisheng/wot-design-uni/issues/894)
+* 🐛 修复 message-box 配合 layouts 使用全局 message-box 时，切换页面可能会显示上一次的 message-box 内容的问题 ([f137a63](https://github.com/Moonofweisheng/wot-design-uni/commit/f137a6313e45e65dd23a03ae88b304e07b1a377e))
+* 🐛 修复 Textarea 设置为 null 时，显示字数限制显示错误问题 ([#1004](https://github.com/Moonofweisheng/wot-design-uni/issues/1004)) ([60f2fe6](https://github.com/Moonofweisheng/wot-design-uni/commit/60f2fe61ae77e170e2c05e1b20d256ab107ee4db)), closes [#1003](https://github.com/Moonofweisheng/wot-design-uni/issues/1003)
+* 🐛 修复部分国际化文本不正确的问题 ([#970](https://github.com/Moonofweisheng/wot-design-uni/issues/970)) ([4319fa9](https://github.com/Moonofweisheng/wot-design-uni/commit/4319fa9badf3e3dd08218e8e90604c91c49b49c7))
+* 🐛 修复多个 ImgCropper 存在时生成图片异常的问题 ([1876fc3](https://github.com/Moonofweisheng/wot-design-uni/commit/1876fc3d0c21c2d9d9c45fe3096690a0bde46493))
+
+
+### ✨ Features | 新功能
+
+* ✨ 将 Tabbar 和 Badge 设置为标准盒子模型 ([#1036](https://github.com/Moonofweisheng/wot-design-uni/issues/1036)) ([7f2ccb2](https://github.com/Moonofweisheng/wot-design-uni/commit/7f2ccb2d372c412670bfe4ac833f8dc957d994e9))
+* ✨ 提供 useUpload hooks 用于便捷上传 ([#969](https://github.com/Moonofweisheng/wot-design-uni/issues/969)) ([49fe25a](https://github.com/Moonofweisheng/wot-design-uni/commit/49fe25a99bb0c60b3a81a11ef7eb06e762fb1d25))
+* ✨ 添加组合式API文档并提供相关API ([#972](https://github.com/Moonofweisheng/wot-design-uni/issues/972)) ([b852376](https://github.com/Moonofweisheng/wot-design-uni/commit/b85237643ce217c14a304e8477487acce327ed49))
+* ✨ 添加input props.type可选类型 ([#983](https://github.com/Moonofweisheng/wot-design-uni/issues/983)) ([91776bf](https://github.com/Moonofweisheng/wot-design-uni/commit/91776bf3de9bdd6c6954ecab8024dddbdcee7e48)), closes [#981](https://github.com/Moonofweisheng/wot-design-uni/issues/981)
+* ✨ 文档示例项目支持国际化切换 ([#992](https://github.com/Moonofweisheng/wot-design-uni/issues/992)) ([4ae9587](https://github.com/Moonofweisheng/wot-design-uni/commit/4ae9587d635c1ba80b8855d3b3d5a38939b1825c))
+* ✨ 移除 keyboard 虚拟键盘车牌号模式下不可用的 I、O 键 ([#1037](https://github.com/Moonofweisheng/wot-design-uni/issues/1037)) ([90c53d7](https://github.com/Moonofweisheng/wot-design-uni/commit/90c53d7e2c3208827433093023711c93610df7da)), closes [#1005](https://github.com/Moonofweisheng/wot-design-uni/issues/1005)
+* ✨ 引入 vitepress-plugin-llms 优化 AI 理解 ([#1034](https://github.com/Moonofweisheng/wot-design-uni/issues/1034)) ([901c754](https://github.com/Moonofweisheng/wot-design-uni/commit/901c7548fca2bc42c597bb5780769f05e63ede96))
+* ✨ 引入vitest做组件测试 ([7e84c5c](https://github.com/Moonofweisheng/wot-design-uni/commit/7e84c5c91f3c351922e976255dc97281c1fe371b))
+* ✨ grid-item添加hover-class ([#994](https://github.com/Moonofweisheng/wot-design-uni/issues/994)) ([dfaff53](https://github.com/Moonofweisheng/wot-design-uni/commit/dfaff531cb0a78ec1201f323c5d3326ca967c1e7))
+* ✨ ImgCropper 图片剪裁支持设置裁剪框宽高比 ([#973](https://github.com/Moonofweisheng/wot-design-uni/issues/973)) ([5a3f85d](https://github.com/Moonofweisheng/wot-design-uni/commit/5a3f85df6f1e3e54954754b832b0427b67559d58)), closes [#920](https://github.com/Moonofweisheng/wot-design-uni/issues/920)
+* ✨ Upload 上传组件支持根据扩展名过滤文件 ([#980](https://github.com/Moonofweisheng/wot-design-uni/issues/980)) ([51adb6b](https://github.com/Moonofweisheng/wot-design-uni/commit/51adb6b8a9911e8d64ef376b19a4aef900b52789)), closes [#796](https://github.com/Moonofweisheng/wot-design-uni/issues/796) [#581](https://github.com/Moonofweisheng/wot-design-uni/issues/581)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档中添加测试覆盖率徽标 ([4ae514c](https://github.com/Moonofweisheng/wot-design-uni/commit/4ae514c716f1c3b0cb2b05443b995eec4fb82b21))
+* ✏️  修复全局 closeOutside 影响 DropDown 异步开关的问题 ([49e5d63](https://github.com/Moonofweisheng/wot-design-uni/commit/49e5d63dd17b48c00648bcab05cb93e743ca43ab))
+* ✏️  移除 petercatai 聊天助手 ([5c77483](https://github.com/Moonofweisheng/wot-design-uni/commit/5c77483974189e8b22587407ff9baf484a5779da))
+* ✏️  优化 `WdConfigProvider` 文档，解决组件命名风格问题导致失效问题 ([#989](https://github.com/Moonofweisheng/wot-design-uni/issues/989)) ([0f693f9](https://github.com/Moonofweisheng/wot-design-uni/commit/0f693f9784224ee0949d4a7efc66985224bf0d5b))
+* ✏️  update cases ([a200337](https://github.com/Moonofweisheng/wot-design-uni/commit/a2003378636a25c253a8596f5afbbbcf6ad3e419))
+
+## [1.8.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.7.1...v1.8.0) (2025-03-23)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 DateTimePicker 区域选择时边界值处理错误的问题 ([230e09f](https://github.com/Moonofweisheng/wot-design-uni/commit/230e09ff2ac25550b0efc2628827b70162041aad))
+* 🐛 修复 drop-menu-item 有选项值为空字符串时导致新值错误并触发组件内部警告的问题 ([f63de5b](https://github.com/Moonofweisheng/wot-design-uni/commit/f63de5bd1d3453e844c058a9f185c0a5e56bcf67))
+* 🐛 修复在template中使用readonly无法通过vue-ts校验的问题 ([ee5b25f](https://github.com/Moonofweisheng/wot-design-uni/commit/ee5b25fbc36a24cab02576757226f26fb9e27777))
+* 🐛 修复input、textarea组件placeholder样式在微信小程序无效的问题 ([#944](https://github.com/Moonofweisheng/wot-design-uni/issues/944)) ([1ac115f](https://github.com/Moonofweisheng/wot-design-uni/commit/1ac115fdac310760e630e8745b438f96c6b88386)), closes [#943](https://github.com/Moonofweisheng/wot-design-uni/issues/943)
+* 🐛 修复textarea统计多码元字符长度错误的问题 ([#940](https://github.com/Moonofweisheng/wot-design-uni/issues/940)) ([f9d8523](https://github.com/Moonofweisheng/wot-design-uni/commit/f9d85232c4142f0c957fa3c829dd3321c7ad56e5)), closes [#933](https://github.com/Moonofweisheng/wot-design-uni/issues/933)
+* **picker:** clear selected value and options when columns is emptied ([496cb73](https://github.com/Moonofweisheng/wot-design-uni/commit/496cb732b1ab0e69517d629e147b673692631f98)), closes [#935](https://github.com/Moonofweisheng/wot-design-uni/issues/935)
+
+
+### ✨ Features | 新功能
+
+* ✨  Img 组件添加预览图片属性  ([#945](https://github.com/Moonofweisheng/wot-design-uni/issues/945)) ([34a4878](https://github.com/Moonofweisheng/wot-design-uni/commit/34a48783f37a56fb6ed7a77dd29ee5a406bf989a))
+* ✨ 废弃 DateTimePicker 开启插槽开关use-label-slot和use-default-slot ([8d9e5c6](https://github.com/Moonofweisheng/wot-design-uni/commit/8d9e5c66589f1b6eed5faa093f2c28cf2640f5b5))
+* ✨ 新增 InputNumber 组件支持长按加减功能 ([#910](https://github.com/Moonofweisheng/wot-design-uni/issues/910)) ([9437087](https://github.com/Moonofweisheng/wot-design-uni/commit/94370876e4ce91faec6e10db5e413dfa27d0f4c2))
+* ✨ 重构 Signature 签字板历史记录模式并添加压感模式和横屏示例 ([#967](https://github.com/Moonofweisheng/wot-design-uni/issues/967)) ([aad3e83](https://github.com/Moonofweisheng/wot-design-uni/commit/aad3e8332b4cb6a1f9c0a3c81e9fb7d5068f09b3))
+* ✨ Signature 添加历史记录和历史记录步长(包含文档添加、i18n、代码示例) ([#889](https://github.com/Moonofweisheng/wot-design-uni/issues/889)) ([10ec731](https://github.com/Moonofweisheng/wot-design-uni/commit/10ec731b8986f7bf5903a923fe7f1f7d78623ecf))
+* extend wd-fab component with 4 new positions and update docs ([6f12aa4](https://github.com/Moonofweisheng/wot-design-uni/commit/6f12aa4b04477a2b1f8535e272699333ceb0b9f6))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  接入 petercatai 聊天助手 ([34f0299](https://github.com/Moonofweisheng/wot-design-uni/commit/34f02997dd79f88de89da79791d5a6c056367e8a))
+* ✏️  添加优秀案例页面 ([ef7c98b](https://github.com/Moonofweisheng/wot-design-uni/commit/ef7c98bffb843129d872c8ebc6a1bbaf7d8437bf))
+* ✏️  新增优秀案例——随享小栈 ([2040230](https://github.com/Moonofweisheng/wot-design-uni/commit/2040230064989bf4816932870920f52ae0797bf2))
+* ✏️  修复 Navbar 文档部分标题显示 Tabbar 的问题 ([b4b4d59](https://github.com/Moonofweisheng/wot-design-uni/commit/b4b4d594fc29fe1f947b6ea7e8b5b90cc3f58013))
+* ✏️  修复部分文档拼写错误 ([#911](https://github.com/Moonofweisheng/wot-design-uni/issues/911)) ([15613b3](https://github.com/Moonofweisheng/wot-design-uni/commit/15613b393aaf750a85e03512c41ffed473471228))
+* fix drop-menu demo code type error ([#905](https://github.com/Moonofweisheng/wot-design-uni/issues/905)) ([0c32c29](https://github.com/Moonofweisheng/wot-design-uni/commit/0c32c29969a8fcb748409a17a06cf277202a18a7))
+
+### [1.7.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.7.0...v1.7.1) (2025-02-19)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 InputNumber 微信小程序设置了precision后无法输入小数点的问题 ([#902](https://github.com/Moonofweisheng/wot-design-uni/issues/902)) ([e3a03b1](https://github.com/Moonofweisheng/wot-design-uni/commit/e3a03b1dbb6640b76a3034daeebd88d42252508c)), closes [#878](https://github.com/Moonofweisheng/wot-design-uni/issues/878)
+* 🐛 修复 Upload 文档自定义唤起上传样式的示例错误的问题 ([3dfa69c](https://github.com/Moonofweisheng/wot-design-uni/commit/3dfa69c282514bd786d3822963f3f1dd18089eb9))
+* 🐛 修复分页组件为0时不更新页数问题 ([#903](https://github.com/Moonofweisheng/wot-design-uni/issues/903)) ([604faeb](https://github.com/Moonofweisheng/wot-design-uni/commit/604faebf4bb19eca96ba84ee48424be12ee72ba3)), closes [#897](https://github.com/Moonofweisheng/wot-design-uni/issues/897)
+* 🐛 修复web-types可选值/默认值类型识别错误 ([#899](https://github.com/Moonofweisheng/wot-design-uni/issues/899)) ([8b4d2ed](https://github.com/Moonofweisheng/wot-design-uni/commit/8b4d2ed14b6340003c63d10e31c02f058bed3ef0))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  优化demo项目的展示方便支付宝平台提审 ([c48a67b](https://github.com/Moonofweisheng/wot-design-uni/commit/c48a67b027b9b3f66f0b051ee34bde163feda6cf))
+
+## [1.7.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.6.1...v1.7.0) (2025-02-16)
+
+
+### ✨ Features | 新功能
+
+* ✨ 添加 web-type.json 支持 webstorm 代码提示 ([#871](https://github.com/Moonofweisheng/wot-design-uni/issues/871)) ([4575099](https://github.com/Moonofweisheng/wot-design-uni/commit/4575099b9ba580fee2c03e8f8660bbfd9aa70aa3)), closes [#819](https://github.com/Moonofweisheng/wot-design-uni/issues/819)
+* ✨ 重构 Curtain 优化控制展示隐藏的实现逻辑 ([#895](https://github.com/Moonofweisheng/wot-design-uni/issues/895)) ([0e31950](https://github.com/Moonofweisheng/wot-design-uni/commit/0e3195059e0843045533b7ff89b9a3613c5449a8))
+* ✨ ActionSheet 支持 close-on-click-action 控制点击选项后是否关闭菜单功能 ([#891](https://github.com/Moonofweisheng/wot-design-uni/issues/891)) ([a1b035a](https://github.com/Moonofweisheng/wot-design-uni/commit/a1b035a6fe3a9ae3a023032b6c33403853424559)), closes [#698](https://github.com/Moonofweisheng/wot-design-uni/issues/698)
+* ✨ NavbarCapsule 导航胶囊组件支持外部传入样式 ([fb980e7](https://github.com/Moonofweisheng/wot-design-uni/commit/fb980e7d9bd90c76570d2069a9d41a6c1187ef30))
+* ✨ Rate 评分新增支持半选和触摸滑动选中 ([#896](https://github.com/Moonofweisheng/wot-design-uni/issues/896)) ([9d34f2e](https://github.com/Moonofweisheng/wot-design-uni/commit/9d34f2e5d90cca1820d69100bca7c546ce16fb0e)), closes [#669](https://github.com/Moonofweisheng/wot-design-uni/issues/669)
+* ✨ Toast 支持设置布局方向 ([ed60852](https://github.com/Moonofweisheng/wot-design-uni/commit/ed60852432999d295e4af2efe9f1ee86e235e1ee)), closes [#780](https://github.com/Moonofweisheng/wot-design-uni/issues/780)
+* ✨ Toast 支持通过props设置组件属性并新增局中显示的配置 ([#888](https://github.com/Moonofweisheng/wot-design-uni/issues/888)) ([ebbe7e4](https://github.com/Moonofweisheng/wot-design-uni/commit/ebbe7e407904df428564dcf53e5141c14d9e7daa))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  标注 Form 组件支持不校验隐藏子组件的版本 ([e5a24c4](https://github.com/Moonofweisheng/wot-design-uni/commit/e5a24c4873baa9db62ad1ab6f3adb078dac89dc2))
+* ✏️  新增关于页面展示主要团队成员信息 ([031107d](https://github.com/Moonofweisheng/wot-design-uni/commit/031107d5888c2887ea40d47810239cd398f042ef))
+* ✏️  修复 SwipeAction 文档示例拼写错误的问题 ([1dc48cf](https://github.com/Moonofweisheng/wot-design-uni/commit/1dc48cfce9773a0ec60dd2b6cb8fd6c60bb63281))
+* ✏️  修复文档拼写的错误 ([8f8cb10](https://github.com/Moonofweisheng/wot-design-uni/commit/8f8cb1077aa318e9fb067dfeebdd04dfbdb12412))
+* ✏️ fix create-uni command error ([#874](https://github.com/Moonofweisheng/wot-design-uni/issues/874)) ([a0da88c](https://github.com/Moonofweisheng/wot-design-uni/commit/a0da88c5db21b7127de9342aabcf6961b611e22d))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 InputNumber 设置了precision后无法输入小数点的问题 ([#886](https://github.com/Moonofweisheng/wot-design-uni/issues/886)) ([dd1a005](https://github.com/Moonofweisheng/wot-design-uni/commit/dd1a00596472023c9b6e545dbf2a9a8238e67baf)), closes [#878](https://github.com/Moonofweisheng/wot-design-uni/issues/878)
+* 🐛 修复 Swiper 在微信小程序平台轮播视频时在iOS平台全屏展示异常的问题 ([#898](https://github.com/Moonofweisheng/wot-design-uni/issues/898)) ([34a15ac](https://github.com/Moonofweisheng/wot-design-uni/commit/34a15ac0786d003825491cc9fa2a8961b307c0d2)), closes [#885](https://github.com/Moonofweisheng/wot-design-uni/issues/885)
+* 🐛 修复 Tabs 组件导航地图标题不生效的问题 ([#869](https://github.com/Moonofweisheng/wot-design-uni/issues/869)) ([ccf976a](https://github.com/Moonofweisheng/wot-design-uni/commit/ccf976ad631b4ad0272d4897a6245cdd8f13fa4b))
+* 🐛 修复 Upload 组件自定义上传方法不支持asyncfunction的问题 ([#890](https://github.com/Moonofweisheng/wot-design-uni/issues/890)) ([25649db](https://github.com/Moonofweisheng/wot-design-uni/commit/25649dbca55059cb425ba7d7b4e0af7884366dce)), closes [#859](https://github.com/Moonofweisheng/wot-design-uni/issues/859)
+
+### [1.6.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.6.0...v1.6.1) (2025-01-20)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  更新文档小程序二维码 ([a5f862b](https://github.com/Moonofweisheng/wot-design-uni/commit/a5f862bdbea6a84df7ad2e3bef4456baae040ae8))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Search placeholder 样式丢失的问题 ([#857](https://github.com/Moonofweisheng/wot-design-uni/issues/857)) ([40565d1](https://github.com/Moonofweisheng/wot-design-uni/commit/40565d19688f6776cdb4ea4b9fc3f6cbaeb4dc66)), closes [#856](https://github.com/Moonofweisheng/wot-design-uni/issues/856)
+
+## [1.6.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.5.1...v1.6.0) (2025-01-18)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  常见问题添加Vue 3.3+使用defineOptions设置styleIsolation规则的介绍 ([f3bee13](https://github.com/Moonofweisheng/wot-design-uni/commit/f3bee13b46ccbb8856b9051a99ed2b5356dc0d8e)), closes [#784](https://github.com/Moonofweisheng/wot-design-uni/issues/784)
+* ✏️  更新组件库互助群二维码 ([9b50d6c](https://github.com/Moonofweisheng/wot-design-uni/commit/9b50d6c6922e34c964621cff926565cb9fb723ab))
+* ✏️  添加互助交流QQ群3群二维码 ([1d0b11b](https://github.com/Moonofweisheng/wot-design-uni/commit/1d0b11b25621b7b585fe1e047093d07861c88a30))
+* ✏️  微信小程序演示demo提供激励视频广告页面 ([#783](https://github.com/Moonofweisheng/wot-design-uni/issues/783)) ([7ed7dd3](https://github.com/Moonofweisheng/wot-design-uni/commit/7ed7dd3495c84f91ed5e77870da7e5845fc28a94))
+* ✏️  修复 Tooltip 文档显示异常的问题 ([c89eb92](https://github.com/Moonofweisheng/wot-design-uni/commit/c89eb927a21e0f4e10d317346c31ab45d322720d))
+* ✏️  演示demo小程序支持分享 ([583acc2](https://github.com/Moonofweisheng/wot-design-uni/commit/583acc2fa942422469abcab5f805a54c72614d69))
+* ✏️  优化演示demo支持在顶部显示对应页面微信小程序的二维码 ([b1f42af](https://github.com/Moonofweisheng/wot-design-uni/commit/b1f42af640a32d8c9119331a19fe0495a908b16c))
+* ✏️修改自定义样式描述 [#772](https://github.com/Moonofweisheng/wot-design-uni/issues/772) ([1ac352d](https://github.com/Moonofweisheng/wot-design-uni/commit/1ac352da9539e60ac79bd1ec10768e08e4d49ff3))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Calendar 为周选择时跨年周的单元格值显示错误的问题 ([#854](https://github.com/Moonofweisheng/wot-design-uni/issues/854)) ([c0d48b2](https://github.com/Moonofweisheng/wot-design-uni/commit/c0d48b25c11af87629e7feedc6cd0cc3a70b37e4))
+* 🐛 修复 Divider 分割线组件 CustomClass 未生效的问题 ([#790](https://github.com/Moonofweisheng/wot-design-uni/issues/790)) ([44df081](https://github.com/Moonofweisheng/wot-design-uni/commit/44df081dbd80771a9df122be4e3953034194308f)), closes [#789](https://github.com/Moonofweisheng/wot-design-uni/issues/789)
+* 🐛 修复 Form 表单 validator 校验不通过且未指定错误信息时无法显示校验信息的问题 ([#791](https://github.com/Moonofweisheng/wot-design-uni/issues/791)) ([bdb5653](https://github.com/Moonofweisheng/wot-design-uni/commit/bdb56537db7fbec59224ebf5aecd3e7a6354424c))
+* 🐛 修复Button初始化margin的问题 ([#831](https://github.com/Moonofweisheng/wot-design-uni/issues/831)) ([3836309](https://github.com/Moonofweisheng/wot-design-uni/commit/38363097a5fbf4c0c7116abd536f90936d2fa86d))
+* 🐛 修复Card footer或者header没写的时候，不会自动隐藏占位 ([8d528cb](https://github.com/Moonofweisheng/wot-design-uni/commit/8d528cb9c06c48456016e0a4cce1cf0699b7311b))
+* 🐛 修复Form组件rules属性，没有按照顺序执行问题 ([#808](https://github.com/Moonofweisheng/wot-design-uni/issues/808)) ([834cd8e](https://github.com/Moonofweisheng/wot-design-uni/commit/834cd8e3f08919800189c1d2710267d4aa99a8d5)), closes [#799](https://github.com/Moonofweisheng/wot-design-uni/issues/799) [#799](https://github.com/Moonofweisheng/wot-design-uni/issues/799) [#799](https://github.com/Moonofweisheng/wot-design-uni/issues/799)
+* 🐛 修复Input初始化修改失败的问题 ([#814](https://github.com/Moonofweisheng/wot-design-uni/issues/814)) ([04e9a50](https://github.com/Moonofweisheng/wot-design-uni/commit/04e9a50ede30337c35e9f28b7f7985f3e717a91f))
+* 🐛 修复Picker文档初始选项code错误的问题 ([67f675d](https://github.com/Moonofweisheng/wot-design-uni/commit/67f675d1cc4764e25d357b91c17ad276612340a1))
+* 🐛 修复popover tooltip组件visibleArrow=false时弹出框距离元素间距过远的问题 ([#792](https://github.com/Moonofweisheng/wot-design-uni/issues/792)) ([3b6d10d](https://github.com/Moonofweisheng/wot-design-uni/commit/3b6d10dbb93188adb3aea3fc9f7d1b763b4d5ec9)), closes [#788](https://github.com/Moonofweisheng/wot-design-uni/issues/788)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增Signature签名组件 ([0ad8fcc](https://github.com/Moonofweisheng/wot-design-uni/commit/0ad8fcce28f5692572aeae79f0cc7315aa6e5b54)), closes [#505](https://github.com/Moonofweisheng/wot-design-uni/issues/505)
+* ✨ 修复 InputNumber 在设置为 allow-null 时被赋值为空时未触发更新的问题并支持异步更新 ([#812](https://github.com/Moonofweisheng/wot-design-uni/issues/812)) ([0fc90dd](https://github.com/Moonofweisheng/wot-design-uni/commit/0fc90ddcc9b5d478fe3e5bf84e2e780c48a8a341))
+* ✨ 修复Img组件在错误状态下可以预览的问题 ([dbd2c85](https://github.com/Moonofweisheng/wot-design-uni/commit/dbd2c85b83b0992e791c0b828a12f182d4923b81))
+* ✨ Calendar 确认事件 confirm 增加 `type` 参数 ([e0fca91](https://github.com/Moonofweisheng/wot-design-uni/commit/e0fca9161e8282871b2126ecc82999bc9530eb6b))
+* ✨ Form 表单 validate 方法支持传入数组 ([#829](https://github.com/Moonofweisheng/wot-design-uni/issues/829)) ([8e6096a](https://github.com/Moonofweisheng/wot-design-uni/commit/8e6096ab7459b9164ef1ec9b366becf9acc7ab83)), closes [#797](https://github.com/Moonofweisheng/wot-design-uni/issues/797)
+* ✨ Search新增customInputClass，placeholderClass等属性 ([#845](https://github.com/Moonofweisheng/wot-design-uni/issues/845)) ([03623f4](https://github.com/Moonofweisheng/wot-design-uni/commit/03623f4989b6bfbf53588058c632eb2f2e830bfd)), closes [#299](https://github.com/Moonofweisheng/wot-design-uni/issues/299)
+* ✨ Swiper 轮播视频支持控制静音播放和循环播放 ([#855](https://github.com/Moonofweisheng/wot-design-uni/issues/855)) ([7a0d5ce](https://github.com/Moonofweisheng/wot-design-uni/commit/7a0d5ce9720020e3f0fb148f7b65db129ceb82af)), closes [#846](https://github.com/Moonofweisheng/wot-design-uni/issues/846)
+* ✨ Swiper 轮播项type字段的处理逻辑限制在可选值范围内 ([#785](https://github.com/Moonofweisheng/wot-design-uni/issues/785)) ([1fd0a27](https://github.com/Moonofweisheng/wot-design-uni/commit/1fd0a27788db2b467bc53e83a6a4953e5d134c53))
+
+### [1.5.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.5.0...v1.5.1) (2024-12-10)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 调整 Upload 的覆盖上传参数 reupload 默认值为 false ([d9ce000](https://github.com/Moonofweisheng/wot-design-uni/commit/d9ce00010a15ae8e168e082a2c4f3a50cf61fa13))
+
+## [1.5.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.4.0...v1.5.0) (2024-12-09)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Button 按钮设置为 block 无效的问题 ([#762](https://github.com/Moonofweisheng/wot-design-uni/issues/762)) ([ea8bc66](https://github.com/Moonofweisheng/wot-design-uni/commit/ea8bc6671012a811f49027062e6e7f8f1359a175))
+* 🐛 修复 Cell 设置 label 过长时影响页面结构的问题 ([70058f2](https://github.com/Moonofweisheng/wot-design-uni/commit/70058f2270788fb9d7edd56eff35bd2cbebcd99e))
+* 🐛 修复 Collapse v-model绑定数据变化时未更新折叠面板状态的问题 ([#744](https://github.com/Moonofweisheng/wot-design-uni/issues/744)) ([09f7f9c](https://github.com/Moonofweisheng/wot-design-uni/commit/09f7f9caf5e381ef44fb9a31965f8d2d70d4e271)), closes [#741](https://github.com/Moonofweisheng/wot-design-uni/issues/741)
+* 🐛 修复 GridItem 徽标属性类型标注错误的问题 ([c018560](https://github.com/Moonofweisheng/wot-design-uni/commit/c018560b7d3087b89b759b3c83aff91c74354021)), closes [#766](https://github.com/Moonofweisheng/wot-design-uni/issues/766)
+* 🐛 修复 Progress 无法设置进度为 0 的问题 ([#748](https://github.com/Moonofweisheng/wot-design-uni/issues/748)) ([c136f54](https://github.com/Moonofweisheng/wot-design-uni/commit/c136f54cda6164ab3653d47342d7c88c5f515efc)), closes [#747](https://github.com/Moonofweisheng/wot-design-uni/issues/747)
+* 🐛 修复 Swiper 在支付宝小程序平台点击事件无效的问题 ([f63bf10](https://github.com/Moonofweisheng/wot-design-uni/commit/f63bf101338d7f9d2f72c5941d3405950544a1d7))
+* 🐛 修复 Tab 未渲染项高度会影响整体高度的问题 ([5e06378](https://github.com/Moonofweisheng/wot-design-uni/commit/5e063781a3b58f94f107816473600ce95f3761e9))
+* 🐛 修复 vue-tsc 校验不通过的问题 ([#753](https://github.com/Moonofweisheng/wot-design-uni/issues/753)) ([a90f4ad](https://github.com/Moonofweisheng/wot-design-uni/commit/a90f4ad2f2b68bb79f30a2e6973a4e149b7ba66e)), closes [#752](https://github.com/Moonofweisheng/wot-design-uni/issues/752)
+* 🐛 修复微信小程序在iOS设备上处于后台一段时间后抖动的问题 ([6091566](https://github.com/Moonofweisheng/wot-design-uni/commit/6091566380c7c129fca284eb4e5a2ba6e447a7ab)), closes [#694](https://github.com/Moonofweisheng/wot-design-uni/issues/694)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整文档结构增加文档内容可用宽度，支持收起演示demo ([#765](https://github.com/Moonofweisheng/wot-design-uni/issues/765)) ([402f73f](https://github.com/Moonofweisheng/wot-design-uni/commit/402f73f6ee8aa7d022b640333e6bfef4311fdc6f))
+* ✏️  添加 MessageBox 自定义按钮样式的文档 ([46b1c39](https://github.com/Moonofweisheng/wot-design-uni/commit/46b1c394a024c293fb07c7788691e2ac572a2fa1))
+* ✏️  添加关于Sass的介绍 ([995a65f](https://github.com/Moonofweisheng/wot-design-uni/commit/995a65f8451801062ae83f0f71470d0c428dba7f))
+* ✏️  优化 Cell 关于 clickable 和 is-link 的介绍 ([6f58e72](https://github.com/Moonofweisheng/wot-design-uni/commit/6f58e72b1d5436326052a79da19e21d071ab9b3c))
+* ✏️  增加 ConfigProvider 组件设定全局共享示例 ([#758](https://github.com/Moonofweisheng/wot-design-uni/issues/758)) ([356cb4a](https://github.com/Moonofweisheng/wot-design-uni/commit/356cb4ad11791366138002233754b2d2e79d5d18))
+* ✏️  Table 表格组件提供结合分页器使用的demo ([#738](https://github.com/Moonofweisheng/wot-design-uni/issues/738)) ([fb7580d](https://github.com/Moonofweisheng/wot-design-uni/commit/fb7580df7eee7d81d3826c399e565975cef81625))
+
+
+### ✨ Features | 新功能
+
+* ✨ 优化 Divider 分割线功能支持虚线、垂直等功能 ([#737](https://github.com/Moonofweisheng/wot-design-uni/issues/737)) ([1b9d7e6](https://github.com/Moonofweisheng/wot-design-uni/commit/1b9d7e625256b365a381b30e902bb54692d636cf))
+* ✨ Calendar 优化选中样式和滚动位置处理并支持屏蔽内置cell ([#768](https://github.com/Moonofweisheng/wot-design-uni/issues/768)) ([97c4004](https://github.com/Moonofweisheng/wot-design-uni/commit/97c40047e8ed46af31d4c1647056d90c2edf4842))
+* ✨ Curtain 幕帘新增 close 插槽和自定义关闭插槽样式类 ([#746](https://github.com/Moonofweisheng/wot-design-uni/issues/746)) ([7bc3592](https://github.com/Moonofweisheng/wot-design-uni/commit/7bc359205deb99899baf01c733af9690b12703fa)), closes [#648](https://github.com/Moonofweisheng/wot-design-uni/issues/648)
+* ✨ DropMenuItem 增加自定 Popup 样式参数 ([28ad03b](https://github.com/Moonofweisheng/wot-design-uni/commit/28ad03b7afdd38a86f168d15a7c0f3564d122101))
+* ✨ Input、Textarea在APP-VUE和H5端支持inputmode ([#771](https://github.com/Moonofweisheng/wot-design-uni/issues/771)) ([9ceb2e8](https://github.com/Moonofweisheng/wot-design-uni/commit/9ceb2e807e33edd3937db5f57a4306f1ce719cff)), closes [#743](https://github.com/Moonofweisheng/wot-design-uni/issues/743)
+* ✨ MessageBox 新增确认、取消按钮的 ButtonProps 属性 ([#761](https://github.com/Moonofweisheng/wot-design-uni/issues/761)) ([80682ba](https://github.com/Moonofweisheng/wot-design-uni/commit/80682ba933427fac7bfefc6c692cd058a14163c5)), closes [#740](https://github.com/Moonofweisheng/wot-design-uni/issues/740)
+* ✨ Radio添加icon-placement属性用于控制图标方向 ([#763](https://github.com/Moonofweisheng/wot-design-uni/issues/763)) ([b06a7a7](https://github.com/Moonofweisheng/wot-design-uni/commit/b06a7a751b3115c8e3909af4cbe595684ed9d00f)), closes [#371](https://github.com/Moonofweisheng/wot-design-uni/issues/371)
+* ✨ Segmented 提供 updateActiveStyle 方法设置激活样式 ([529e57f](https://github.com/Moonofweisheng/wot-design-uni/commit/529e57fc83b00482f101e84cf0437627e140a59f))
+* ✨ Table 支持设置不固定表头 ([#769](https://github.com/Moonofweisheng/wot-design-uni/issues/769)) ([b0a2461](https://github.com/Moonofweisheng/wot-design-uni/commit/b0a2461a1a6f9691502a1f4a1a06ec4103fabd4b))
+* ✨ Upload 支持文件重传 ([3cd5137](https://github.com/Moonofweisheng/wot-design-uni/commit/3cd5137129ae13f90744a5d0038686cef5602d8c))
+
+## [1.4.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.14...v1.4.0) (2024-11-24)
+
+
+### ✨ Features | 新功能
+
+* ✨ Curtain 幕帘组件支持设置 z-index ([a1e20af](https://github.com/Moonofweisheng/wot-design-uni/commit/a1e20afef34704e518a96d4b4cb248cab3b7a8b6))
+* ✨ Siderbar 侧边栏添加before-change属性支持异步更新 ([#721](https://github.com/Moonofweisheng/wot-design-uni/issues/721)) ([1f5801d](https://github.com/Moonofweisheng/wot-design-uni/commit/1f5801d3f4c2cfc1b3990d74077e18ea88e8d7f8)), closes [#711](https://github.com/Moonofweisheng/wot-design-uni/issues/711)
+* ✨ Swiper 支持指定轮播项的文件类型 ([#720](https://github.com/Moonofweisheng/wot-design-uni/issues/720)) ([1e039cb](https://github.com/Moonofweisheng/wot-design-uni/commit/1e039cb7073d57bd19f59d4ffbb95c74b5cdc42f)), closes [#712](https://github.com/Moonofweisheng/wot-design-uni/issues/712)
+* ✨ Tab 添加 lazy 属性支持配置是否开启懒加载 ([bb5b193](https://github.com/Moonofweisheng/wot-design-uni/commit/bb5b19325fc2a0f4d13d353ee9bc8cfbf8605daa)), closes [#641](https://github.com/Moonofweisheng/wot-design-uni/issues/641)
+* ✨ Tabs 新增 `autoLineWidth` 设置底部条宽度自动同步文本内容' ([#679](https://github.com/Moonofweisheng/wot-design-uni/issues/679)) ([cb7cbf3](https://github.com/Moonofweisheng/wot-design-uni/commit/cb7cbf33250e3711d631271b1bbcb5f6829e75fa))
+* ✨ Tabs 新增map-title属性支持修改导航地图标题 ([0b7605f](https://github.com/Moonofweisheng/wot-design-uni/commit/0b7605f3ef2ca11cedc2cc61a3eb93e0757e6b86)), closes [#670](https://github.com/Moonofweisheng/wot-design-uni/issues/670)
+* ✨ Tabs 支持设置徽标 ([#724](https://github.com/Moonofweisheng/wot-design-uni/issues/724)) ([cd20581](https://github.com/Moonofweisheng/wot-design-uni/commit/cd20581ca6f75a67995a0cf562f524d82e357bbc)), closes [#689](https://github.com/Moonofweisheng/wot-design-uni/issues/689) [#672](https://github.com/Moonofweisheng/wot-design-uni/issues/672)
+* ✨ tabs支持左对齐 ([#718](https://github.com/Moonofweisheng/wot-design-uni/issues/718)) ([314c2e8](https://github.com/Moonofweisheng/wot-design-uni/commit/314c2e8c9d08e806dd0ec78fd4b2aa5e536af8f8)), closes [#380](https://github.com/Moonofweisheng/wot-design-uni/issues/380)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Collapse 使用 toggleAall 方法时不会触发 before-expand 钩子的问题 ([#727](https://github.com/Moonofweisheng/wot-design-uni/issues/727)) ([02aa5ce](https://github.com/Moonofweisheng/wot-design-uni/commit/02aa5ceb78713f210d97ecc29f18618084b93096))
+* 🐛 修复 CollapseItem 在微信小程序平台使用 title 插槽时宽度无法撑满的问题 ([4f1d945](https://github.com/Moonofweisheng/wot-design-uni/commit/4f1d9452ecd5054a636fb51871369ee1f183e1f1))
+* 🐛 修复 DateTimePicker 设置为 time 类型时绑定值无法设置为空数组的问题 ([443ac92](https://github.com/Moonofweisheng/wot-design-uni/commit/443ac929820327339062a608ef94db43bdaafb27)), closes [#706](https://github.com/Moonofweisheng/wot-design-uni/issues/706)
+* 🐛 修复 FloadingPanel 设置 height 不生效的问题 ([#725](https://github.com/Moonofweisheng/wot-design-uni/issues/725)) ([3cc1805](https://github.com/Moonofweisheng/wot-design-uni/commit/3cc18058aee83ed0abbf804595e38d7934490f4a)), closes [#703](https://github.com/Moonofweisheng/wot-design-uni/issues/703)
+* 🐛 修复 Slider 滑块处于极值时会遮挡max和min的问题 ([aa8834d](https://github.com/Moonofweisheng/wot-design-uni/commit/aa8834df630286882425778263ea9ff68811c928)), closes [#714](https://github.com/Moonofweisheng/wot-design-uni/issues/714)
+* 🐛 修复 wd-select-picker 组件单选搜索高亮 class 错误 ([7d461a5](https://github.com/Moonofweisheng/wot-design-uni/commit/7d461a54d09b14273fd18ff37310ecf754cf5138))
+* 🐛 修复Collapse折叠面板组件内容溢出问题 ([#710](https://github.com/Moonofweisheng/wot-design-uni/issues/710)) ([4bf8d1e](https://github.com/Moonofweisheng/wot-design-uni/commit/4bf8d1e300c28f405402582dd32fde4245d9ed47))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整文档中gitee镜像仓库的地址 ([a40dd9f](https://github.com/Moonofweisheng/wot-design-uni/commit/a40dd9f63e52cf178be2fd9a93904cdf26e23f14))
+* ✏️  调整join-group页面加群的问题 ([9a70d89](https://github.com/Moonofweisheng/wot-design-uni/commit/9a70d89be1e369dc2ea2a4babd3b3fdb326fcecc))
+* ✏️  添加 Cell 单元格 border 属性的文档 ([fad777d](https://github.com/Moonofweisheng/wot-design-uni/commit/fad777dfa8cf8dcf26288a9f975927dc3de2e80d)), closes [#653](https://github.com/Moonofweisheng/wot-design-uni/issues/653)
+* ✏️  添加关于 Button 自定义样式设置阴影的文档 ([c38321f](https://github.com/Moonofweisheng/wot-design-uni/commit/c38321f69c8f4fcb572cb40c8eef38cf4fa20eae)), closes [#731](https://github.com/Moonofweisheng/wot-design-uni/issues/731)
+* ✏️  文档新增演示页面源码和组件源码链接 ([330e8c7](https://github.com/Moonofweisheng/wot-design-uni/commit/330e8c7bbfc792f4a29cdaa08dec8b35c75b2a30))
+* ✏️  优化 NoticeBar 垂直滚动示例 ([ff1d377](https://github.com/Moonofweisheng/wot-design-uni/commit/ff1d37723b38169fc1a1f75676a8464343b42bec))
+* ✏️  增加 Input 字数限制的示例 ([5aa1c00](https://github.com/Moonofweisheng/wot-design-uni/commit/5aa1c00acd72f17cea108ffccecc427711e2cbdb))
+* ✏️  增加关于Tabs属性autoLineWidth的介绍和最低版本要求 ([08e7d77](https://github.com/Moonofweisheng/wot-design-uni/commit/08e7d774c6b6886fe3f79431b4728176e267144f))
+
+### [1.3.14](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.13...v1.3.14) (2024-11-09)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Curtain 幕帘组件在某些情况下关闭按钮不显示的问题 ([8c0e978](https://github.com/Moonofweisheng/wot-design-uni/commit/8c0e97831445183662ce0af79210117eb77e63e9)), closes [#690](https://github.com/Moonofweisheng/wot-design-uni/issues/690)
+* 🐛 修复Picker和SelectPicker清空按钮颜色与Input不统一的问题 ([#700](https://github.com/Moonofweisheng/wot-design-uni/issues/700)) ([8fdbfa3](https://github.com/Moonofweisheng/wot-design-uni/commit/8fdbfa319a5c0c5895a3162b56cd3225c54a24d2))
+* 🐛 修复upload组件header默认值错误的问题 ([4cfd1e5](https://github.com/Moonofweisheng/wot-design-uni/commit/4cfd1e568d55eed9efe9cc1dadcc30dd571d3b36)), closes [#691](https://github.com/Moonofweisheng/wot-design-uni/issues/691)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档添加生活小工具 ([6f44a63](https://github.com/Moonofweisheng/wot-design-uni/commit/6f44a631ac067a7321ff0cb6ea8ebaabbc64bd9b))
+* ✏️  文档中添加wot-demo的介绍 ([66fff60](https://github.com/Moonofweisheng/wot-design-uni/commit/66fff6009b261a62be96d4c279d83833c70a8a0f))
+* ✏️  增加create-uni创建快速上手项目的介绍 ([92aa1ef](https://github.com/Moonofweisheng/wot-design-uni/commit/92aa1efe68f4a9bd52942122b2f063384eb885fc))
+
+
+### ✨ Features | 新功能
+
+* ✨ 使用Transition重构Popup为center类型的Popup添加zoom-in动画 ([#699](https://github.com/Moonofweisheng/wot-design-uni/issues/699)) ([0dd34d0](https://github.com/Moonofweisheng/wot-design-uni/commit/0dd34d06492f9d071ce6c11aa82789fbcc5cd442)), closes [#687](https://github.com/Moonofweisheng/wot-design-uni/issues/687)
+* ✨ 移除Switch默认的size支持在不指定size的情况下使用css变量设置组件尺寸 ([5e55da4](https://github.com/Moonofweisheng/wot-design-uni/commit/5e55da4839677c63534148d4664dbde1c9f950b2)), closes [#516](https://github.com/Moonofweisheng/wot-design-uni/issues/516)
+* ✨ 优化Toast、Message和Notify组件的函数式调用方案 ([#696](https://github.com/Moonofweisheng/wot-design-uni/issues/696)) ([9f318bd](https://github.com/Moonofweisheng/wot-design-uni/commit/9f318bdeb37bea643276d3e7f8be51bfc1b19d27))
+* ✨ 支持Button在支付宝小程序平台opentype设为getAuthorize用于获取手机号和用户信息 ([deeb45d](https://github.com/Moonofweisheng/wot-design-uni/commit/deeb45d8cb47284c1a557b50c3fcd95f80f93c22))
+* ✨ Form 校验规则validator支持传入Error作为校验提示 ([db32ef9](https://github.com/Moonofweisheng/wot-design-uni/commit/db32ef962140333a13e2a04ba4642e7423bc4bef)), closes [#667](https://github.com/Moonofweisheng/wot-design-uni/issues/667)
+* ✨ Loadmore提供loadingProps属性用于自定义loading样式 ([178e056](https://github.com/Moonofweisheng/wot-design-uni/commit/178e056035511de4123d2bd9ce575948154874b4))
+* ✨ Table 行高支持Number和String类型 ([#682](https://github.com/Moonofweisheng/wot-design-uni/issues/682)) ([21f0b17](https://github.com/Moonofweisheng/wot-design-uni/commit/21f0b178b6e3221a69609dd1603960fc866cb534))
+
+### [1.3.13](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.12...v1.3.13) (2024-10-25)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  快速上手增加vue和uni-app的快速上手链接 ([20148a7](https://github.com/Moonofweisheng/wot-design-uni/commit/20148a7800d12376adedadb32bf29239f02baef3))
+* ✏️  添加关于深度选择的介绍 ([63428f2](https://github.com/Moonofweisheng/wot-design-uni/commit/63428f244ae84574027ea89e19598c3600716f7b))
+* ✏️  文档新增展示优秀案例 ([47c1764](https://github.com/Moonofweisheng/wot-design-uni/commit/47c176490dabda1937abea8342d02cc6cbbcfc02))
+* ✏️  优化文档快速上手章节 ([4e9a9da](https://github.com/Moonofweisheng/wot-design-uni/commit/4e9a9da914a372f1b0f31cfcc7fbc2f96650ef58))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Notice在Tabbar页面时跳转至其他页面导致播放异常的问题并提供reset方法 ([#680](https://github.com/Moonofweisheng/wot-design-uni/issues/680)) ([7584ac2](https://github.com/Moonofweisheng/wot-design-uni/commit/7584ac2a1249b6bee79669ae57c80da08a17d912)), closes [#358](https://github.com/Moonofweisheng/wot-design-uni/issues/358) [#650](https://github.com/Moonofweisheng/wot-design-uni/issues/650)
+
+
+### ✨ Features | 新功能
+
+* ✨ 为Picker和SelectPicker补充clear事件 ([8fffaa6](https://github.com/Moonofweisheng/wot-design-uni/commit/8fffaa646aad195b33c56719ffb28b2529f3f627))
+* ✨ 移除 Navbar 点击热区的激活态样式 ([60b07e5](https://github.com/Moonofweisheng/wot-design-uni/commit/60b07e514b836c55305536e2ba29ec5239b62de3)), closes [#511](https://github.com/Moonofweisheng/wot-design-uni/issues/511)
+* ✨ cell组件border属性以props为最高优先级 ([#656](https://github.com/Moonofweisheng/wot-design-uni/issues/656)) ([31353ce](https://github.com/Moonofweisheng/wot-design-uni/commit/31353ceafa3bcae01202c40918e579d141957c0a))
+* ✨ picker和selectPicker添加clearable属性 ([b0d60a0](https://github.com/Moonofweisheng/wot-design-uni/commit/b0d60a0b750e8ed2cbae0b55309145c6963e498a))
+* ✨ Swiper 轮播组件支持展示视频和设置轮播项标题 ([#663](https://github.com/Moonofweisheng/wot-design-uni/issues/663)) ([a50c0be](https://github.com/Moonofweisheng/wot-design-uni/commit/a50c0be38465342e5b688b8e10b377d69ba998a6))
+
+### [1.3.12](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.11...v1.3.12) (2024-10-08)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Upload文件小程序找不到文件,显示的问题 ([c13e605](https://github.com/Moonofweisheng/wot-design-uni/commit/c13e6058a2c665c174806aebd353294113c4007e))
+* 🐛 Radio修复在cell里面高度的问题 ([f9deacf](https://github.com/Moonofweisheng/wot-design-uni/commit/f9deacf40eed17a37558ca96319880822ca897d5))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  优化捐赠榜单中捐赠人链接的展示效果 ([898f079](https://github.com/Moonofweisheng/wot-design-uni/commit/898f07985e602ad18a84c06b5bd6183dd61142cd))
+* ✏️  Upload添加preview-cover最低版本 ([52f9bf6](https://github.com/Moonofweisheng/wot-design-uni/commit/52f9bf654b26a09c20b7118efb331f7e6228ea79))
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 FloatingPanel 浮动面板组件 ([#616](https://github.com/Moonofweisheng/wot-design-uni/issues/616)) ([e2966fd](https://github.com/Moonofweisheng/wot-design-uni/commit/e2966fdd01d6c91ab9499fbc95e4f7160a83deb5)), closes [#509](https://github.com/Moonofweisheng/wot-design-uni/issues/509)
+* ✨ 新增支持法语、日语等9 种语言 ([#637](https://github.com/Moonofweisheng/wot-design-uni/issues/637)) ([691a7b5](https://github.com/Moonofweisheng/wot-design-uni/commit/691a7b57727af45f3c2f99437740be72e8be0f86))
+* ✨ StatusTip缺省提示组件提供图片内容插槽([#538](https://github.com/Moonofweisheng/wot-design-uni/issues/538)) ([#615](https://github.com/Moonofweisheng/wot-design-uni/issues/615)) ([c6b2cf8](https://github.com/Moonofweisheng/wot-design-uni/commit/c6b2cf84db1cb5536516606999c1fa3d6bd1dbe3))
+* ✨ ToolTip 组件 offset 属性支持数组和对象写法 ([#625](https://github.com/Moonofweisheng/wot-design-uni/issues/625)) ([5092c5a](https://github.com/Moonofweisheng/wot-design-uni/commit/5092c5a6548fe7222e0d6e2614020f15ce95c5df)), closes [#560](https://github.com/Moonofweisheng/wot-design-uni/issues/560)
+* ✨ Upload新增preview-cover插槽 ([ef6433d](https://github.com/Moonofweisheng/wot-design-uni/commit/ef6433d81c576db8b55715a14a574a6d392478df))
+* ✨Calendar日历添加open事件 ([#627](https://github.com/Moonofweisheng/wot-design-uni/issues/627)) ([43a5da6](https://github.com/Moonofweisheng/wot-design-uni/commit/43a5da631d4402319d4e3f0739f2ab7e960e497f)), closes [#624](https://github.com/Moonofweisheng/wot-design-uni/issues/624)
+
+### [1.3.11](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.10...v1.3.11) (2024-09-23)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  移除文档中CountTo不支持的type ([cae2e56](https://github.com/Moonofweisheng/wot-design-uni/commit/cae2e56aba98427b1b6c7a2c3f6a2f9ed8acf96f))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复[#598](https://github.com/Moonofweisheng/wot-design-uni/issues/598)产生的使用未定义变量的问题 ([ce64daf](https://github.com/Moonofweisheng/wot-design-uni/commit/ce64daf77d119df509873226c9209cae406e0330))
+* 🐛 修复与@uni-helper/uni-typed搭配使用时tsc报类型错误的问题并更新依赖 ([f9ca2e4](https://github.com/Moonofweisheng/wot-design-uni/commit/f9ca2e4d4ed2ef88a073f7f80ce64df811144b3a)), closes [#586](https://github.com/Moonofweisheng/wot-design-uni/issues/586)
+* 🐛 修复Button设置为hairline时圆角显示异常的问题 ([10ebf5c](https://github.com/Moonofweisheng/wot-design-uni/commit/10ebf5c3959099389f1f1349e32ad755740ce0d5)), closes [#486](https://github.com/Moonofweisheng/wot-design-uni/issues/486)
+* 🐛 修复Input、Textarea未设置labelWidth时通过CSS变量设置label宽度无效的问题 ([#591](https://github.com/Moonofweisheng/wot-design-uni/issues/591)) ([2f12ac6](https://github.com/Moonofweisheng/wot-design-uni/commit/2f12ac6d2b598c7fa545009a82acd1c07bf21779)), closes [#573](https://github.com/Moonofweisheng/wot-design-uni/issues/573)
+* 🐛 修复loadmore组件属性errorText存在默认值导致国际化失效的问题 ([#594](https://github.com/Moonofweisheng/wot-design-uni/issues/594)) ([0bcc3c4](https://github.com/Moonofweisheng/wot-design-uni/commit/0bcc3c498ed9206bea45522f58889ec3f3a5f673))
+* 🐛 修复Radio点击失效的问题 ([5cce125](https://github.com/Moonofweisheng/wot-design-uni/commit/5cce125c737989e1e447394223129e2e585b91f4)), closes [#596](https://github.com/Moonofweisheng/wot-design-uni/issues/596)
+* 🐛确保inputNumber输入值在设定的最小值和最大值之间 ([#610](https://github.com/Moonofweisheng/wot-design-uni/issues/610)) ([344b1ac](https://github.com/Moonofweisheng/wot-design-uni/commit/344b1ac9168701bc408f82268f68ef8453527ef9)), closes [#602](https://github.com/Moonofweisheng/wot-design-uni/issues/602)
+
+
+### ✨ Features | 新功能
+
+* ✨ 迁移StatusTip组件的图片资源 ([f54ff30](https://github.com/Moonofweisheng/wot-design-uni/commit/f54ff306e7dafcfaead671120d100c4d9482daf9))
+* ✨ count-to组件添加type属性 ([#556](https://github.com/Moonofweisheng/wot-design-uni/issues/556)) ([60c92f2](https://github.com/Moonofweisheng/wot-design-uni/commit/60c92f2f38b563968f88f94267b8d805c28109d1))
+* ✨ Fab 悬浮按钮组件支持自定义触发器和控制能否展开 ([#612](https://github.com/Moonofweisheng/wot-design-uni/issues/612)) ([8e68ef3](https://github.com/Moonofweisheng/wot-design-uni/commit/8e68ef3bf807b5ec3c935daa6ce68f58962a188d)), closes [#512](https://github.com/Moonofweisheng/wot-design-uni/issues/512)
+* ✨ Img组件新增属性 show-menu-by-longpress 支持微信小程序长按弹出菜单栏 ([#613](https://github.com/Moonofweisheng/wot-design-uni/issues/613)) ([a7fc229](https://github.com/Moonofweisheng/wot-design-uni/commit/a7fc22964823af1ee1e513a268fb783bbea77ee4)), closes [#611](https://github.com/Moonofweisheng/wot-design-uni/issues/611)
+* ✨ Input、Textarea增加ignoreCompositionEvent属性 ([#592](https://github.com/Moonofweisheng/wot-design-uni/issues/592)) ([efcd4bb](https://github.com/Moonofweisheng/wot-design-uni/commit/efcd4bbb38b5bf53a26f0a8834f0cbd9fa26f5e5)), closes [#574](https://github.com/Moonofweisheng/wot-design-uni/issues/574)
+* ✨ InputNumber 步进器新增支持adjustPosition属性 ([f8a5240](https://github.com/Moonofweisheng/wot-design-uni/commit/f8a524010a2945941fbefa745756f2e6efbeb88b)), closes [#599](https://github.com/Moonofweisheng/wot-design-uni/issues/599)
+
+### [1.3.10](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.9...v1.3.10) (2024-09-08)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增Keyboard虚拟键盘支持车牌号输入 ([#567](https://github.com/Moonofweisheng/wot-design-uni/issues/567)) ([59df1b7](https://github.com/Moonofweisheng/wot-design-uni/commit/59df1b7ce56e9253ad046a7898651a866b8c99d7)), closes [#351](https://github.com/Moonofweisheng/wot-design-uni/issues/351)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 col-picker 点击遮罩关闭执行两次问题 ([#584](https://github.com/Moonofweisheng/wot-design-uni/issues/584)) ([8fc5380](https://github.com/Moonofweisheng/wot-design-uni/commit/8fc5380ad1f9a34998aedf1de2a9b05011bd8267))
+* 🐛 修复wd-upload 关闭按钮受项目行高影响的问题 ([#576](https://github.com/Moonofweisheng/wot-design-uni/issues/576)) ([feb64ea](https://github.com/Moonofweisheng/wot-design-uni/commit/feb64ea7be1eada01782bb1fa0d5b848acb4fa64))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档中添加KeyBoard的版本要求 ([715c054](https://github.com/Moonofweisheng/wot-design-uni/commit/715c054f4c723de73e2d57b940390cc7bcc89273))
+* ✏️  优化多列选择器组件文档 ([#572](https://github.com/Moonofweisheng/wot-design-uni/issues/572)) ([93e0736](https://github.com/Moonofweisheng/wot-design-uni/commit/93e0736a24aa77d60376b5dd4d073180b88a6411))
+
+### [1.3.9](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.8...v1.3.9) (2024-09-01)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复某些场景下wd-textarea属性maxlength无效的问题 ([#558](https://github.com/Moonofweisheng/wot-design-uni/issues/558)) ([4b1b237](https://github.com/Moonofweisheng/wot-design-uni/commit/4b1b2370db4a34716ceedfde3a49d2ae7e20f919))
+* 🐛 修复IndexBar组件更新数据时显示异常的问题 ([f4c751d](https://github.com/Moonofweisheng/wot-design-uni/commit/f4c751dfae3724118c2d842489a5c7d1003996f1)), closes [#545](https://github.com/Moonofweisheng/wot-design-uni/issues/545)
+* 🐛 修复Input和Textarea设置为readonly时在部分iOS手机可以点击聚焦的问题 ([ff59403](https://github.com/Moonofweisheng/wot-design-uni/commit/ff594031546a25f4b2831749312171d260a76044)), closes [#533](https://github.com/Moonofweisheng/wot-design-uni/issues/533)
+* 🐛 修复Picker多级联动未应用picker选择值时取消后打开展示列数据错误的问题 ([90e86de](https://github.com/Moonofweisheng/wot-design-uni/commit/90e86def95ae458208f8aa50427b845db61d05b4)), closes [#562](https://github.com/Moonofweisheng/wot-design-uni/issues/562)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整数字滚动组件文档路径 ([636a2c5](https://github.com/Moonofweisheng/wot-design-uni/commit/636a2c5e8a8906166947312f085e5fabba5c47df))
+* ✏️  更正form demo 方法名不一致 ([#534](https://github.com/Moonofweisheng/wot-design-uni/issues/534)) ([59fb1ea](https://github.com/Moonofweisheng/wot-design-uni/commit/59fb1eaabd7fea5428dc860af5ad734c9eebb496))
+* ✏️  优化MessageBox示例demo ([a827b79](https://github.com/Moonofweisheng/wot-design-uni/commit/a827b79498a48272eb71fd9c0e70a9dae889375b))
+* ✏️  增加安卓演示demo下载二维码 ([8680e77](https://github.com/Moonofweisheng/wot-design-uni/commit/8680e776e229d96b995de402e12ab423930a27ba))
+* ✏️ 更正text组件doc的type属性默认值 ([#557](https://github.com/Moonofweisheng/wot-design-uni/issues/557)) ([3e51f76](https://github.com/Moonofweisheng/wot-design-uni/commit/3e51f763cf394cd5214bc5c0c3e6e23c9ee974b7))
+
+
+### ✨ Features | 新功能
+
+* ✨ config-provider 支持customClass 与 customeStyle ([#535](https://github.com/Moonofweisheng/wot-design-uni/issues/535)) ([febe730](https://github.com/Moonofweisheng/wot-design-uni/commit/febe73079eceeb2cf0eec9fc5712321fa3434bd2))
+* ✨ Form设置提示模式为toast时优先显示顺序靠前的表单项的错误提示 ([f25409f](https://github.com/Moonofweisheng/wot-design-uni/commit/f25409f5a83df50ecbbf0a21bb2d5199021b9cc1)), closes [#548](https://github.com/Moonofweisheng/wot-design-uni/issues/548)
+* ✨ img 图片组件click事件增加mouseEvent参数 ([#539](https://github.com/Moonofweisheng/wot-design-uni/issues/539)) ([4983f48](https://github.com/Moonofweisheng/wot-design-uni/commit/4983f4832a194d399aeb919b8d2c02564789d9ab))
+* ✨ Text支持传入number类型的text ([e1f9ff6](https://github.com/Moonofweisheng/wot-design-uni/commit/e1f9ff60e35c7b6bbb4b5e7b84b2d570471056f6)), closes [#553](https://github.com/Moonofweisheng/wot-design-uni/issues/553)
+
+### [1.3.8](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.7...v1.3.8) (2024-08-18)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  补充Form设置error-type的示例 ([0e6ea3e](https://github.com/Moonofweisheng/wot-design-uni/commit/0e6ea3ead02c7b51fac7c5776c92044abeaa4dc3))
+* ✏️  修复常见问题中useToast入参错误的问题 ([3cd0905](https://github.com/Moonofweisheng/wot-design-uni/commit/3cd0905bab2b0dfc3d05257e01aa16afe61c0002))
+* ✏️  修复textarea组件的maxlength属性类型标注错误 ([#502](https://github.com/Moonofweisheng/wot-design-uni/issues/502)) ([3698e30](https://github.com/Moonofweisheng/wot-design-uni/commit/3698e30301c6c482135671b0a3f150388421ffae))
+* ✏️  优化MessageBox和Toast文档中selector的介绍 ([f092838](https://github.com/Moonofweisheng/wot-design-uni/commit/f092838756144677c97155dfb700b1ae2cf56f47))
+* ✏️ Toast 文档增加唯一标识selector的介绍 ([#494](https://github.com/Moonofweisheng/wot-design-uni/issues/494)) ([3f99e1b](https://github.com/Moonofweisheng/wot-design-uni/commit/3f99e1bfc7e78c0359e593a2862d1d885c914858))
+
+
+### ✨ Features | 新功能
+
+* ✨ 调整Statistic为CountTo组件并使用useCountDown重构 ([a01baaf](https://github.com/Moonofweisheng/wot-design-uni/commit/a01baafe327e4feeba0de9735901dfc32e014f6a))
+* ✨ 新增statistic 数值显示 ([#489](https://github.com/Moonofweisheng/wot-design-uni/issues/489)) ([592c37b](https://github.com/Moonofweisheng/wot-design-uni/commit/592c37b15e54049faefd14cb480451895bb34d90))
+* ✨ Collapse 折叠面板组件支持嵌套使用 ([#521](https://github.com/Moonofweisheng/wot-design-uni/issues/521)) ([a5ce5dd](https://github.com/Moonofweisheng/wot-design-uni/commit/a5ce5dd8825e520f8e676a9f400efda1eb27546a)), closes [#503](https://github.com/Moonofweisheng/wot-design-uni/issues/503)
+* ✨ datetime-picker 增加自定义 Cell 样式属性 ([#491](https://github.com/Moonofweisheng/wot-design-uni/issues/491)) ([2cc7d7f](https://github.com/Moonofweisheng/wot-design-uni/commit/2cc7d7fb106ec0a13104bf8bea964ba375bd7ad5))
+* ✨ form表单新增errorType错误提示类型 ([#487](https://github.com/Moonofweisheng/wot-design-uni/issues/487)) ([5915922](https://github.com/Moonofweisheng/wot-design-uni/commit/5915922b0b4970424e2dc97ef7f922a918fedfce))
+* ✨Upload 组件支持手动上传并增加自定义上传函数 ([3def17e](https://github.com/Moonofweisheng/wot-design-uni/commit/3def17eb16b1355ee0a9a950788ef6299b0179a3)), closes [#481](https://github.com/Moonofweisheng/wot-design-uni/issues/481)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复checkbox-group的shape无法作用到子组件的问题 ([cd96d25](https://github.com/Moonofweisheng/wot-design-uni/commit/cd96d258f618d4a93584307b4100eee448a58884)), closes [#519](https://github.com/Moonofweisheng/wot-design-uni/issues/519)
+* 🐛 修复DropDown传入正确direction出现错误警告的问题 ([#499](https://github.com/Moonofweisheng/wot-design-uni/issues/499)) ([35507a1](https://github.com/Moonofweisheng/wot-design-uni/commit/35507a1b24dbdee27eefb960ffa637e842b04f9c))
+* 🐛 修复picker-view动态设置columns时获取选中值异常的问题 ([#518](https://github.com/Moonofweisheng/wot-design-uni/issues/518)) ([8530440](https://github.com/Moonofweisheng/wot-design-uni/commit/8530440e81cb8244d7e6288a2c7a8fda41bc7a11)), closes [#492](https://github.com/Moonofweisheng/wot-design-uni/issues/492)
+* 🐛 修复Textarea组件暗黑模式下清空按钮样式不正确的问题 ([8e83a11](https://github.com/Moonofweisheng/wot-design-uni/commit/8e83a117f2acf8b17b021ec833b43d9b2b940d9a))
+
+### [1.3.7](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.6...v1.3.7) (2024-08-06)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  更新爱发电地址和示例demo二维码 ([0ecc4c1](https://github.com/Moonofweisheng/wot-design-uni/commit/0ecc4c194d753a11dfa461d74df1a00d75be0e4e))
+* ✏️  更新README ([0c33dd4](https://github.com/Moonofweisheng/wot-design-uni/commit/0c33dd48ad8528b4b080125272375bae9fedf352))
+* ✏️  允许文档组件列表折叠收起 ([#468](https://github.com/Moonofweisheng/wot-design-uni/issues/468)) ([b0e4d23](https://github.com/Moonofweisheng/wot-design-uni/commit/b0e4d235b27a729024951a7b31950e83bd43d3de))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复addUnit工具方法为string类型的参数时未添加单位导致swiper高度丢失的问题 ([3d7775c](https://github.com/Moonofweisheng/wot-design-uni/commit/3d7775c5a93668cb7ac6b50563869d13bbd39bfa))
+* 🐛 修复Input设置为number类型时绑定值重设为0时显示异常的问题 ([df6a6a0](https://github.com/Moonofweisheng/wot-design-uni/commit/df6a6a0ab1f911296002e39299a93bbee5546715)), closes [#470](https://github.com/Moonofweisheng/wot-design-uni/issues/470)
+* 🐛 修复LockScroll后切换页面无法滚动 ([#478](https://github.com/Moonofweisheng/wot-design-uni/issues/478)) ([197d61a](https://github.com/Moonofweisheng/wot-design-uni/commit/197d61a678738bda608588d660263e0d5657f940)), closes [#473](https://github.com/Moonofweisheng/wot-design-uni/issues/473)
+* 🐛 修复Textarea的placeholder无法设置空字符串问题 ([#472](https://github.com/Moonofweisheng/wot-design-uni/issues/472)) ([bb3d329](https://github.com/Moonofweisheng/wot-design-uni/commit/bb3d3292af56016ad21d7bf49024a0338d93ec3d)), closes [#471](https://github.com/Moonofweisheng/wot-design-uni/issues/471)
+* **type:** 🐛 修复vue>=2.7版本的GlobalComponents类型声明问题 ([#464](https://github.com/Moonofweisheng/wot-design-uni/issues/464)) ([a175f05](https://github.com/Moonofweisheng/wot-design-uni/commit/a175f05e01eff86678dd08bd226bd401192b0c0b))
+
+
+### ✨ Features | 新功能
+
+* ✨ 修复Text组件设置color属性后lines失效的问题 ([84826f8](https://github.com/Moonofweisheng/wot-design-uni/commit/84826f8057ba29f65b26ee8f292073edb2f441f0)), closes [#477](https://github.com/Moonofweisheng/wot-design-uni/issues/477)
+* ✨ Input 组件新增clear-triger属性 ([#476](https://github.com/Moonofweisheng/wot-design-uni/issues/476)) ([364cfbf](https://github.com/Moonofweisheng/wot-design-uni/commit/364cfbf1af7a9109be9af59b543b4ccef9c32916)), closes [#462](https://github.com/Moonofweisheng/wot-design-uni/issues/462)
+* ✨ Swiper 轮播组件增加value-key用于自定义目标字段属性名 ([#485](https://github.com/Moonofweisheng/wot-design-uni/issues/485)) ([f207876](https://github.com/Moonofweisheng/wot-design-uni/commit/f20787690368e341850c2fd51cf725b26b192ec9)), closes [#410](https://github.com/Moonofweisheng/wot-design-uni/issues/410)
+* ✨ Textarea 组件新增clear-triger属性 ([1c13f2e](https://github.com/Moonofweisheng/wot-design-uni/commit/1c13f2e629fc259e282d7d859097f8905ef1053e)), closes [#462](https://github.com/Moonofweisheng/wot-design-uni/issues/462)
+* 组件text新增金额类型，前后插槽，下划线等功能 ([#452](https://github.com/Moonofweisheng/wot-design-uni/issues/452)) ([95735be](https://github.com/Moonofweisheng/wot-design-uni/commit/95735be75e276b8679a5a76c9cbe49ea29a9b18d))
+* **drop-menu:** 支持自定义图标以及before-toggle ([#479](https://github.com/Moonofweisheng/wot-design-uni/issues/479)) ([108e1b3](https://github.com/Moonofweisheng/wot-design-uni/commit/108e1b36c69cdb28b59f8742d82bb78540a0e043))
+
+### [1.3.6](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.5...v1.3.6) (2024-07-26)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Button为disabled状态时仍能触发open-type指定事件的问题 ([a64a570](https://github.com/Moonofweisheng/wot-design-uni/commit/a64a5707d2573c042cd9bb16d6f7fecba9a38291)), closes [#458](https://github.com/Moonofweisheng/wot-design-uni/issues/458)
+* 🐛 修复MessageBox设置为prompt时输入框绑定值异常的问题 ([140d960](https://github.com/Moonofweisheng/wot-design-uni/commit/140d96019d91a51f2af2efbd91a279d203a8408b))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档地址更新并增加QQ2群二维码 ([ef1ad01](https://github.com/Moonofweisheng/wot-design-uni/commit/ef1ad011f205612d6d2a8f5fc8cbf7d05dfffc7d))
+* ✏️  修复Toast组件文档中关于提示方法描述的错误 ([8ed19a2](https://github.com/Moonofweisheng/wot-design-uni/commit/8ed19a2949064ec93cc281aadae4710d4d24a25f))
+* ✏️  修正DateTimePicker文档中关于minDate和maxDate类型标注错误的问题 ([b322264](https://github.com/Moonofweisheng/wot-design-uni/commit/b322264c9a84d9acb82276ecacf5f12f1fd25f6e))
+
+### [1.3.5](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.4...v1.3.5) (2024-07-20)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Text组件使用日期工具方法路径错误的问题 ([c4071c3](https://github.com/Moonofweisheng/wot-design-uni/commit/c4071c3759d8328f5dd6a6a374bb91dda5af1029)), closes [#453](https://github.com/Moonofweisheng/wot-design-uni/issues/453)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档中全局引入ElTag用于显示组件上线版本 ([1d05654](https://github.com/Moonofweisheng/wot-design-uni/commit/1d056547c89f4b6f39e9f2b503d55790abc02b52))
+* ✏️  修复RadioBox文档中关于表单模式表述错误的问题 ([1da6c34](https://github.com/Moonofweisheng/wot-design-uni/commit/1da6c34565d20c7fdb0970cfc93dada208b1f82e))
+* ✏️  优化Segmented分段器关于绑定激活项的文档 ([5caf3b9](https://github.com/Moonofweisheng/wot-design-uni/commit/5caf3b95073c9bf28f280cbe88431a40f937e994))
+
+### [1.3.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.3...v1.3.4) (2024-07-19)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复双向滑块响应式丢失 ([#436](https://github.com/Moonofweisheng/wot-design-uni/issues/436)) ([825ea9b](https://github.com/Moonofweisheng/wot-design-uni/commit/825ea9b5b81981ae2a8cb497b412bf950caf6aaf))
+* 🐛 修复Input组件[@input](https://github.com/input)事件参数错误的问题 ([82357f9](https://github.com/Moonofweisheng/wot-design-uni/commit/82357f916def6283003aef64ef522a5bb155c307))
+* 🐛 修复Table组件异步填充数据源无效的问题 ([c795c00](https://github.com/Moonofweisheng/wot-design-uni/commit/c795c00560a267de41d8ef3f976fe16c6ad8ba00)), closes [#445](https://github.com/Moonofweisheng/wot-design-uni/issues/445)
+* 🐛 修复Upload组件accept为media时图片预览顺序混乱的问题 ([f8c1053](https://github.com/Moonofweisheng/wot-design-uni/commit/f8c1053abd2b0ce3f3bee89fbd0e9adcdf1961d2)), closes [#442](https://github.com/Moonofweisheng/wot-design-uni/issues/442)
+* 🐛 Button按钮click事件直接透传event ([017aeda](https://github.com/Moonofweisheng/wot-design-uni/commit/017aeda89d7950024baddc40a4a1e83a36010be3)), closes [#443](https://github.com/Moonofweisheng/wot-design-uni/issues/443)
+* 修复 textarea 组件同时使用 auto-height 和 no-border 属性时，no-border 属性不生效 ([#448](https://github.com/Moonofweisheng/wot-design-uni/issues/448)) ([a2f4b32](https://github.com/Moonofweisheng/wot-design-uni/commit/a2f4b322f5b9bd01a36a46b904684d531d5e6730))
+
+
+### ✨ Features | 新功能
+
+* ✨ Button按钮组件支持使用自定义组件 ([517b583](https://github.com/Moonofweisheng/wot-design-uni/commit/517b583f262e374154111d635644dfb225a473c9)), closes [#310](https://github.com/Moonofweisheng/wot-design-uni/issues/310)
+* ✨ Toast 轻提示组件支持使用组件库内置和自定义图标 ([723c51b](https://github.com/Moonofweisheng/wot-design-uni/commit/723c51bac98bb751af44f13737fba12deb298dd4)), closes [#444](https://github.com/Moonofweisheng/wot-design-uni/issues/444)
+* ✨ Upload上传组件新增支持successStatus属性 ([99eab74](https://github.com/Moonofweisheng/wot-design-uni/commit/99eab74260e1e3c43f9f4b147edb4a5a3147d086))
+* 新增Text 文本组件 ([#403](https://github.com/Moonofweisheng/wot-design-uni/issues/403)) ([14f5f44](https://github.com/Moonofweisheng/wot-design-uni/commit/14f5f4430a7cd599149adf16f7bc704dc42f4d90))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整QQ群与提问相关文档 ([cb11e98](https://github.com/Moonofweisheng/wot-design-uni/commit/cb11e9822ff714d3c1e03ad5f2b01b0a07e8fcec))
+* ✏️  移除示例demo中手机号等字样方便过审 ([7488a7f](https://github.com/Moonofweisheng/wot-design-uni/commit/7488a7f708035b5f59c60078190c880cc8d11800))
+
+### [1.3.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.2...v1.3.3) (2024-07-14)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复IndexBar索引值显示错误的问题 ([#433](https://github.com/Moonofweisheng/wot-design-uni/issues/433)) ([19dc35b](https://github.com/Moonofweisheng/wot-design-uni/commit/19dc35bf40eecc263ed19e9f54d05c004b1d3425)), closes [#408](https://github.com/Moonofweisheng/wot-design-uni/issues/408)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整演示demo中图片到npmmirror上 ([93ff5f9](https://github.com/Moonofweisheng/wot-design-uni/commit/93ff5f938fdb1ced622080bce9168bfe0e7ed771))
+* ✏️  新增关于messageBox弹出多个的常见问题解答 ([a362928](https://github.com/Moonofweisheng/wot-design-uni/commit/a3629283aa3838803df900512afc990f920b3e0b))
+* ✏️  修复SelectPicker文档中存在的拼写错误 ([9e28b57](https://github.com/Moonofweisheng/wot-design-uni/commit/9e28b5771a30fa0bf8aad60e8e494e0bc976d9a1)), closes [#426](https://github.com/Moonofweisheng/wot-design-uni/issues/426)
+* ✏️  Upload文档增加微信隐私协议的介绍 ([c7f3a4a](https://github.com/Moonofweisheng/wot-design-uni/commit/c7f3a4adc2907bab30f5e075417f34541cba7a5e))
+
+### [1.3.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.1...v1.3.2) (2024-07-08)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复ActionSheet样式调整导致微信编译错误的问题 ([a9189d2](https://github.com/Moonofweisheng/wot-design-uni/commit/a9189d2c263459a33cdbb68bec3dd0dd0213b5c0))
+
+### [1.3.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.3.0...v1.3.1) (2024-07-08)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复暗黑模式下Grid和ActionSheet组件部分样式异常的问题 ([a28938c](https://github.com/Moonofweisheng/wot-design-uni/commit/a28938c91d4b437e6b583793e32f8373cec102ae)), closes [#409](https://github.com/Moonofweisheng/wot-design-uni/issues/409)
+
+## [1.3.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.28...v1.3.0) (2024-07-07)
+
+
+### ✨ Features | 新功能
+
+* ✨ Upload上传组件新增支持上传视频和文件 ([#412](https://github.com/Moonofweisheng/wot-design-uni/issues/412)) ([e07dbdd](https://github.com/Moonofweisheng/wot-design-uni/commit/e07dbdd5305c112fe3648ce988a45b2cc36ae143)), closes [#186](https://github.com/Moonofweisheng/wot-design-uni/issues/186) [#336](https://github.com/Moonofweisheng/wot-design-uni/issues/336)
+* ✨select-picker组件增加open、close事件 ([#395](https://github.com/Moonofweisheng/wot-design-uni/issues/395)) ([9237a04](https://github.com/Moonofweisheng/wot-design-uni/commit/9237a04bcbde9960864b9a7b09a64fc2b6c27595))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整ColPicker多列选择器文档中省市区数据源及演示demo ([d09bd03](https://github.com/Moonofweisheng/wot-design-uni/commit/d09bd037e735b02264074c2a251c59c01b8ff571))
+* ✏️  DropDownItem文档增加closed和opened介绍 ([401bd28](https://github.com/Moonofweisheng/wot-design-uni/commit/401bd284ceaafe957a0f4184d0a009bed70e9377))
+* ✏️ PasswordInput 修复示例代码错误的问题 ([#391](https://github.com/Moonofweisheng/wot-design-uni/issues/391)) ([519d172](https://github.com/Moonofweisheng/wot-design-uni/commit/519d17235b7c61acf2048104a495690bff0b9804))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Calendar等组件暗黑模式部分样式异常的问题 ([281e20f](https://github.com/Moonofweisheng/wot-design-uni/commit/281e20f2a922d98c00321d1316efc96b985c620d)), closes [#388](https://github.com/Moonofweisheng/wot-design-uni/issues/388)
+* 🐛 修复IndexBar点击索引序号时未显示预期索引值的问题 ([c33991e](https://github.com/Moonofweisheng/wot-design-uni/commit/c33991ee14b8108bcd084b5d7b59f35cb79b2b35)), closes [#408](https://github.com/Moonofweisheng/wot-design-uni/issues/408)
+* 🐛 修复Swiper在微信端长时间处于后台出现抖动的问题 ([#413](https://github.com/Moonofweisheng/wot-design-uni/issues/413)) ([4741439](https://github.com/Moonofweisheng/wot-design-uni/commit/4741439277f1a2668634a4e5e3649236ed95a627)), closes [#411](https://github.com/Moonofweisheng/wot-design-uni/issues/411)
+
+### [1.2.28](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.27...v1.2.28) (2024-06-24)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复omitBy工具方法实现错误导致Tabbar等组件徽标显示异常的问题 ([1491fe4](https://github.com/Moonofweisheng/wot-design-uni/commit/1491fe44616a0db1c165e2bed29637f8c46fbc7e))
+
+### [1.2.27](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.26...v1.2.27) (2024-06-21)
+
+
+### ✨ Features | 新功能
+
+* ✨ add title slot for wd-collapse-item ([#372](https://github.com/Moonofweisheng/wot-design-uni/issues/372)) ([0252bd9](https://github.com/Moonofweisheng/wot-design-uni/commit/0252bd98254f8e108e545651127a744640b39692)), closes [#356](https://github.com/Moonofweisheng/wot-design-uni/issues/356)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整文档中关于类型声明文件的配置 ([0c38e98](https://github.com/Moonofweisheng/wot-design-uni/commit/0c38e986f0151b8aa2e17ab1770d1f39b178d354))
+* ✏️  Input 密码输入框示例移除disabled属性 ([3026c78](https://github.com/Moonofweisheng/wot-design-uni/commit/3026c78d237217b08e2fa3cdf64260c294a61b2b))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复ActionSheet禁用和加载状态时仍有点击效果的问题 ([c6baf45](https://github.com/Moonofweisheng/wot-design-uni/commit/c6baf452f0b626dea378148131d624589bb0c47e)), closes [#379](https://github.com/Moonofweisheng/wot-design-uni/issues/379)
+* 🐛 修复Sidebar等组件css变量前缀错误的问题 ([0c31e16](https://github.com/Moonofweisheng/wot-design-uni/commit/0c31e16699e0b70b91384da0a5c0537b791e6bcf))
+
+### [1.2.26](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.25...v1.2.26) (2024-06-14)
+
+
+### ✨ Features | 新功能
+
+* ✨ fab组件添加gap属性 ([#366](https://github.com/Moonofweisheng/wot-design-uni/issues/366)) ([7b44765](https://github.com/Moonofweisheng/wot-design-uni/commit/7b44765adc08fd16e055fbd326698a8f6b708426))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Fab初始化时存在初始位置闪现的问题 ([74c90be](https://github.com/Moonofweisheng/wot-design-uni/commit/74c90beb402e519fee1057870b0631673945cb73))
+* 🐛 修复Transition被打断时出现显示异常的问题 ([#368](https://github.com/Moonofweisheng/wot-design-uni/issues/368)) ([9c21b95](https://github.com/Moonofweisheng/wot-design-uni/commit/9c21b9512076cc95098a36ee7a7283f70386c94b))
+
+### [1.2.25](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.24...v1.2.25) (2024-06-09)
+
+
+### ✨ Features | 新功能
+
+* ✨ Pickerview选择器新增immediate-change属性，目前微信和支付宝小程序支持。 ([3428ae1](https://github.com/Moonofweisheng/wot-design-uni/commit/3428ae17889a36552010e3f7cc4a9bebb7a94461))
+* ✨ Slider暴露initSlider方法用于外部初始化slider宽度信息 ([fc3e4ef](https://github.com/Moonofweisheng/wot-design-uni/commit/fc3e4ef3bb108e6bb6a660ffead40f4658c119e7)), closes [#344](https://github.com/Moonofweisheng/wot-design-uni/issues/344)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  常见问题中增加关于交流群的内容 ([9ddaeec](https://github.com/Moonofweisheng/wot-design-uni/commit/9ddaeec32299463406ae2f60406cf39daff575cf))
+* ✏️  更新文档中组件数量 ([10d2ba9](https://github.com/Moonofweisheng/wot-design-uni/commit/10d2ba9035970c5627fc731219ec529e634d2578))
+* ✏️  增加关于微信小程序v-if和slot执行顺序异常问题的介绍 ([6a14879](https://github.com/Moonofweisheng/wot-design-uni/commit/6a1487900b214d071fdbda52034f220b8b046eec))
+* ✏️ 修正upload组件文档中change事件的dmeo错误 ([#360](https://github.com/Moonofweisheng/wot-design-uni/issues/360)) ([61004d3](https://github.com/Moonofweisheng/wot-design-uni/commit/61004d30ed3e79b439ef8a3c5d2e78723d7fa017))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复时间选择器设置minDate之后选择器显示值和实际选择值不一致的问题 ([3c0284f](https://github.com/Moonofweisheng/wot-design-uni/commit/3c0284f1f27b743ea3bdb7eeac5c489939057e13)), closes [#339](https://github.com/Moonofweisheng/wot-design-uni/issues/339)
+* 🐛 修复ImgCropper未暴露resetImg和setRoate方法的问题 ([e58f111](https://github.com/Moonofweisheng/wot-design-uni/commit/e58f1111f2ae8e2da23e60c0ed60130373117970)), closes [#354](https://github.com/Moonofweisheng/wot-design-uni/issues/354)
+* 🐛 修复Tag在钉钉小程序平台close方法不执行的问题 ([242d2f2](https://github.com/Moonofweisheng/wot-design-uni/commit/242d2f25c6ac829b5d20d63d520b1f8c8ae921a8)), closes [#359](https://github.com/Moonofweisheng/wot-design-uni/issues/359)
+
+### [1.2.24](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.23...v1.2.24) (2024-06-03)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Input支付宝小程序number/digit类型使用maxlength=-1时v-model失效的问题 ([7aa21b0](https://github.com/Moonofweisheng/wot-design-uni/commit/7aa21b0baadeccf4f0eb179f74332013acec6a10))
+
+### [1.2.23](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.22...v1.2.23) (2024-06-02)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  更新LICENSE文件地址 ([dae3ffc](https://github.com/Moonofweisheng/wot-design-uni/commit/dae3ffcc7b488dd6d87bc1c5e8ae16a78b794f85))
+* ✏️  修复loading组件示例代码中文标点符号、img-cropper组件示例代码标签缺失的问题 ([#347](https://github.com/Moonofweisheng/wot-design-uni/issues/347)) ([d171255](https://github.com/Moonofweisheng/wot-design-uni/commit/d171255899d232f141c84aa1251c03cc1d0a0b75))
+* update select-picker doc ([#346](https://github.com/Moonofweisheng/wot-design-uni/issues/346)) ([7454452](https://github.com/Moonofweisheng/wot-design-uni/commit/7454452ad44331f329408cead9b483cf774cce5f))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Cell的value为0时无法渲染的问题 ([dc64c09](https://github.com/Moonofweisheng/wot-design-uni/commit/dc64c09e6c6f991fe6f8f9fcfa309392e233ce21))
+* 🐛 修复Sticky在h5和App端缓慢拖动时存在几率始终固定在顶部的问题 ([#350](https://github.com/Moonofweisheng/wot-design-uni/issues/350)) ([c5b3c5f](https://github.com/Moonofweisheng/wot-design-uni/commit/c5b3c5f68e1bb376249ed5f2c30b1898cc375abe))
+
+
+### ✨ Features | 新功能
+
+* ✨ 调整Circle环形进度条在微信小程序端使用canvas2d支持同层渲染 ([#351](https://github.com/Moonofweisheng/wot-design-uni/issues/351)) ([4489517](https://github.com/Moonofweisheng/wot-design-uni/commit/44895179e4688ceb995ea1968d23df4f0bf9cdc2))
+
+### [1.2.22](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.21...v1.2.22) (2024-05-23)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  组件库介绍组件数量调整至70+ ([efd55ca](https://github.com/Moonofweisheng/wot-design-uni/commit/efd55ca8afc07368b8d9f348d73c9a25cf186c47))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Form指定prop为`a.b`时校验失败的问题 ([#329](https://github.com/Moonofweisheng/wot-design-uni/issues/329)) ([ab600b9](https://github.com/Moonofweisheng/wot-design-uni/commit/ab600b915a647ff089d5cfbb0ac955e3baa581c3))
+
+### [1.2.21](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.20...v1.2.21) (2024-05-20)
+
+
+### ✨ Features | 新功能
+
+* ✨ 添加索引栏组件 ([#321](https://github.com/Moonofweisheng/wot-design-uni/issues/321)) ([f84e9af](https://github.com/Moonofweisheng/wot-design-uni/commit/f84e9affb1a044a37661c5d1dc118d834b49239c))
+* ✨ img组件添加loading、error插槽 ([#323](https://github.com/Moonofweisheng/wot-design-uni/issues/323)) ([00ffa9f](https://github.com/Moonofweisheng/wot-design-uni/commit/00ffa9f3e54f3ba9eec967887e195c0266ef0a41))
+* ✨ skeleton添加默认内容插槽 ([#322](https://github.com/Moonofweisheng/wot-design-uni/issues/322)) ([9a68c47](https://github.com/Moonofweisheng/wot-design-uni/commit/9a68c477dbf5e0f30f74882df92251eac707fdde))
+* add backtop ([#314](https://github.com/Moonofweisheng/wot-design-uni/issues/314)) ([bf9e55a](https://github.com/Moonofweisheng/wot-design-uni/commit/bf9e55a24e676a764b1e035ca86bd6fe26b87420))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Cell组件单独使用时设置border无效的问题 ([19b9f19](https://github.com/Moonofweisheng/wot-design-uni/commit/19b9f196466b88456e8b3e7221afd710da3df99b))
+* 🐛 修复Picker选择器多列选择模式绑定值为空数组时将列第一项作为显示值的问题 ([c3b96ce](https://github.com/Moonofweisheng/wot-design-uni/commit/c3b96ce912bfc13d30c09393dd57cbcbf2d0b80a))
+* 🐛 修复Sticky吸顶组件在微信小程序中放置在页面顶部时吸顶失效的问题 ([4ca3ebe](https://github.com/Moonofweisheng/wot-design-uni/commit/4ca3ebe7202f118a1bf6a462b27dc76ab6c720f9)), closes [#325](https://github.com/Moonofweisheng/wot-design-uni/issues/325)
+* 修复wd-button在自定义样式时激活态样式问题 ([#312](https://github.com/Moonofweisheng/wot-design-uni/issues/312)) ([7544d69](https://github.com/Moonofweisheng/wot-design-uni/commit/7544d690f176b44a8e016688723af70d2a77388a))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  常见问题增加关于useToast等hooks的答疑以及自定义编译平台的内容 ([65597c7](https://github.com/Moonofweisheng/wot-design-uni/commit/65597c76b812e5e61be17879de320989d0873df4))
+* ✏️  文档中增加解释导入方式的faq ([83fa0b0](https://github.com/Moonofweisheng/wot-design-uni/commit/83fa0b06927fddabd1021ee02c3c7f8377704786))
+
+### [1.2.20](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.19...v1.2.20) (2024-05-12)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整捐赠榜单和友情链接的数据到cloudflare上 ([1314373](https://github.com/Moonofweisheng/wot-design-uni/commit/1314373af1dff95aee4cd3cddefebcb3a6a5c5d2))
+* ✏️  推荐文档地址调整至cloudflare ([9119f30](https://github.com/Moonofweisheng/wot-design-uni/commit/9119f30b23676ad1b9a3869e362a3840ba288dc3))
+* ✏️  Curtain组件width属性标记为number类型 ([d172ce7](https://github.com/Moonofweisheng/wot-design-uni/commit/d172ce7ffcfebf29b184b57a7f74a25acad1f967)), closes [#303](https://github.com/Moonofweisheng/wot-design-uni/issues/303)
+
+
+### ✨ Features | 新功能
+
+* Segmented组件添加click事件 ([#301](https://github.com/Moonofweisheng/wot-design-uni/issues/301)) ([225ce22](https://github.com/Moonofweisheng/wot-design-uni/commit/225ce225ac7faedffd4686b908076c47ba111695))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复MessageBox中使用TextArea字数统计样式错误的问题 ([b186ac0](https://github.com/Moonofweisheng/wot-design-uni/commit/b186ac09294a4fede16c514cd96ff94f661fcbc9)), closes [#290](https://github.com/Moonofweisheng/wot-design-uni/issues/290)
+* 🐛 修复PickerView可以滚动到禁用选项的问题 ([edd44ed](https://github.com/Moonofweisheng/wot-design-uni/commit/edd44eda3fc9879dc980b02d1885d77530a3d2e8)), closes [#302](https://github.com/Moonofweisheng/wot-design-uni/issues/302)
+* 🐛 修复Popover指定placement后箭头显示异常的问题([#306](https://github.com/Moonofweisheng/wot-design-uni/issues/306)) ([a9b108d](https://github.com/Moonofweisheng/wot-design-uni/commit/a9b108d231a8e537aab4ba49781590bcafb9354d))
+* 🐛 修复release脚本处理最低版本号问题 ([c8077c9](https://github.com/Moonofweisheng/wot-design-uni/commit/c8077c9f3790e7844c902528d43596c4bc4025af))
+* 🐛 修复Sticky组件获取节点错误的问题 ([5483ea6](https://github.com/Moonofweisheng/wot-design-uni/commit/5483ea6c447f85229af66b950e34c1dc690fadb1))
+* 修复wd-calendar未抛出事件 ([c1203c9](https://github.com/Moonofweisheng/wot-design-uni/commit/c1203c91841c3d5bcd407923a577711e462207a3))
+
+### [1.2.19](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.18...v1.2.19) (2024-05-01)
+
+
+### ✨ Features | 新功能
+
+* ✨ `Slider`组件`min`值允许负数 ([9e7c8d3](https://github.com/Moonofweisheng/wot-design-uni/commit/9e7c8d33eb2c0fccc44f465ed3b28d2cd81efa2d)), closes [#266](https://github.com/Moonofweisheng/wot-design-uni/issues/266)
+* ✨ fab添加draggable属性 ([#259](https://github.com/Moonofweisheng/wot-design-uni/issues/259)) ([5e0cd6c](https://github.com/Moonofweisheng/wot-design-uni/commit/5e0cd6caa2296a44a3dc1b3d33033d4cc91d01b9))
+* ✨ table组件添加index参数 ([2161705](https://github.com/Moonofweisheng/wot-design-uni/commit/2161705a2f868f874b89ee28b6029677854a7741))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复`slider`组件`step`属性无效问题 ([50133b9](https://github.com/Moonofweisheng/wot-design-uni/commit/50133b9e5e2a18aace8cbf9eb7570579cc563f1d)), closes [#269](https://github.com/Moonofweisheng/wot-design-uni/issues/269)
+* 🐛 修复Cell组件title文字对齐方式受外部影响的问题 ([caf66b6](https://github.com/Moonofweisheng/wot-design-uni/commit/caf66b6beeb236a9295cf0d8ec250557dc19e54e)), closes [#282](https://github.com/Moonofweisheng/wot-design-uni/issues/282)
+* 🐛 修复SelectPicker无默认值时仍会查找选择项节点的问题 ([130c438](https://github.com/Moonofweisheng/wot-design-uni/commit/130c4383dc862e190b96bc3670a852a4cce3e629)), closes [#281](https://github.com/Moonofweisheng/wot-design-uni/issues/281)
+* 🐛 修复Slider组件max和min变化时滑块和进度条未更新的问题 ([#276](https://github.com/Moonofweisheng/wot-design-uni/issues/276)) ([69303b5](https://github.com/Moonofweisheng/wot-design-uni/commit/69303b52077bd268e3563fa9096e91530bb978c5))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  补充Table组件关于Events的介绍 ([6760317](https://github.com/Moonofweisheng/wot-design-uni/commit/676031781b189a3a89dba9e57cb989c06999091a)), closes [#260](https://github.com/Moonofweisheng/wot-design-uni/issues/260)
+
+### [1.2.18](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.17...v1.2.18) (2024-04-23)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复InputNumber步进器组件在初始化时未发生变化仍触发change的问题 ([6ac20fd](https://github.com/Moonofweisheng/wot-design-uni/commit/6ac20fd60728e9056282466571c64ff747af4c9f))
+* 🐛 修复InputNumber的change事件无法取到当前绑定值的更新的问题 ([45980c5](https://github.com/Moonofweisheng/wot-design-uni/commit/45980c526a0b47fb1cb2c95ad50ab9f226464d7c))
+
+### [1.2.17](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.16...v1.2.17) (2024-04-18)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复debounce调整后导致tabs无法切换的问题 ([bd594a7](https://github.com/Moonofweisheng/wot-design-uni/commit/bd594a7202d3cd4e641f23a0b98d468227370d6f))
+
+### [1.2.16](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.15...v1.2.16) (2024-04-17)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Gap组件文档中safeAreaBottom属性名错误的问题 ([b03e39f](https://github.com/Moonofweisheng/wot-design-uni/commit/b03e39f601a68ff5f7e72aa3605279683e5e5b74))
+* 🐛 修复PickerView在绑定值为0时无法生效的问题 ([742b4d6](https://github.com/Moonofweisheng/wot-design-uni/commit/742b4d65255926a0e8c3899ae3ee2eb9d7b7e5e5))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  补充Img图片支持图片预览的最低支持版本 ([82d8e49](https://github.com/Moonofweisheng/wot-design-uni/commit/82d8e493c0723da9e3ba88981a45ea31ae8ef9d5)), closes [#244](https://github.com/Moonofweisheng/wot-design-uni/issues/244)
+
+
+### ✨ Features | 新功能
+
+* ✨ 阻止tag的关闭和新增事件冒泡 ([4c22cf5](https://github.com/Moonofweisheng/wot-design-uni/commit/4c22cf515e2e121b3bbe7d9fd64c5777ce72df32))
+* ✨ Checkbox 新增toggle方法 ([6ec0397](https://github.com/Moonofweisheng/wot-design-uni/commit/6ec0397bc9a5e80780b22245c29c6f05f1b25313)), closes [#239](https://github.com/Moonofweisheng/wot-design-uni/issues/239)
+* ✨ date-time-picker-view 添加年选择 ([#241](https://github.com/Moonofweisheng/wot-design-uni/issues/241)) ([0073b32](https://github.com/Moonofweisheng/wot-design-uni/commit/0073b323967fe859ed15284607f4117243614d5e))
+* ✨ Noticebar 通知栏新增支持click点击事件 ([6fc786d](https://github.com/Moonofweisheng/wot-design-uni/commit/6fc786d9be63c2f021c10e0c48c466e0114f5c24))
+* ✨ TableColumn组件value插槽新增index参数 ([b8b03c3](https://github.com/Moonofweisheng/wot-design-uni/commit/b8b03c352b62e31a584faa41ced65d72bc427d89))
+
+### [1.2.15](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.14...v1.2.15) (2024-04-11)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️ 优化文档及演示demo访问速度 ([#232](https://github.com/Moonofweisheng/wot-design-uni/issues/232)) ([8d3f617](https://github.com/Moonofweisheng/wot-design-uni/commit/8d3f617e403fdbf53a29ca0d48624dc5da74fc94))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Button不同尺寸显示固定尺寸icon样式不协调的问题 ([2a73992](https://github.com/Moonofweisheng/wot-design-uni/commit/2a73992d9c551c51f4f3672167b972d0d0cca881)), closes [#235](https://github.com/Moonofweisheng/wot-design-uni/issues/235)
+* 🐛 修复Upload自定义上传样式时未应用limit数量限制和customEvokeClass的问题 ([50baac8](https://github.com/Moonofweisheng/wot-design-uni/commit/50baac876279029214062a23072bb7c309110c0c))
+
+
+### ✨ Features | 新功能
+
+* ✨ MessageBox支持确认前置处理钩子beforeConfirm ([78bed6a](https://github.com/Moonofweisheng/wot-design-uni/commit/78bed6a212a12639cd8831e3a1ad4542d6fbf518)), closes [#229](https://github.com/Moonofweisheng/wot-design-uni/issues/229)
+* ✨ Toast轻提示增加opened、closed两个钩子 ([ead218b](https://github.com/Moonofweisheng/wot-design-uni/commit/ead218b87b6b0bd53c8c541c38561fdb45396c72))
+
+### [1.2.14](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.13...v1.2.14) (2024-04-09)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复NoticeBar通知栏在小程序端垂直滚动无效的问题 ([eaeb935](https://github.com/Moonofweisheng/wot-design-uni/commit/eaeb935a299dee3c5e54dee6b926d625a7ef66a8))
+
+### [1.2.13](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.12...v1.2.13) (2024-04-08)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  demo首页使用Cell组件重构显示样式 ([9ae8a20](https://github.com/Moonofweisheng/wot-design-uni/commit/9ae8a207f3ee8c765e6269b7ef5cb42ff1cd10fd))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复升级vue到3.4.2.之后defineEmits位置不规范导致访问'emit'报错的问题 ([ef574cf](https://github.com/Moonofweisheng/wot-design-uni/commit/ef574cfcb8f805ec308d8364cb887b65394e6108)), closes [#226](https://github.com/Moonofweisheng/wot-design-uni/issues/226)
+* 🐛 修复NumberKeyboard暗黑模式无效的问题 ([b0cc958](https://github.com/Moonofweisheng/wot-design-uni/commit/b0cc958e0fd762915fe427275288a87d0c58ed38))
+* 🐛 修复Upload组件sourceType属性丢失默认值导致在iOS系统微信小程序报错的问题 ([b70991a](https://github.com/Moonofweisheng/wot-design-uni/commit/b70991a1133be77439fc139df9019527ded9b71d)), closes [#227](https://github.com/Moonofweisheng/wot-design-uni/issues/227)
+
+### [1.2.12](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.11...v1.2.12) (2024-04-07)
+
+
+### ✨ Features | 新功能
+
+* ✨ 增强`notice-bar`组件`vertical`模式下插槽的功能 ([e3daed5](https://github.com/Moonofweisheng/wot-design-uni/commit/e3daed516c958dbb5bff0d4a51d7d16cf9971da1))
+* ✨ NumberKeyboard数字键盘增加名为title的插槽 ([7edc746](https://github.com/Moonofweisheng/wot-design-uni/commit/7edc7462aa43ea800536ac0a464bb6e6c131a20c)), closes [#213](https://github.com/Moonofweisheng/wot-design-uni/issues/213)
+* ✨ StatusTip缺省提示组件新增支持图片mode和自定义图片宽高 ([171c2bb](https://github.com/Moonofweisheng/wot-design-uni/commit/171c2bbdaf9e5ec62fa13fad1079b86daca85d54))
+* ✨ Swiper轮播为image-mode增加ts类型标注 ([9a4ceb2](https://github.com/Moonofweisheng/wot-design-uni/commit/9a4ceb21160dab06a08b39c35e50f69c7c49d023))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 修复 step 的 description 插槽不显示的bug ([f979ccc](https://github.com/Moonofweisheng/wot-design-uni/commit/f979cccc05b9956fe0df121fc2e8cbbb24544766))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整演示demo iframe加载完成后再同步当前是否暗黑模式 ([9ab370e](https://github.com/Moonofweisheng/wot-design-uni/commit/9ab370e19395aaef013da8a386dd310c7deec59e)), closes [#210](https://github.com/Moonofweisheng/wot-design-uni/issues/210)
+* ✏️  Steps步骤条增加控制进度的示例 ([8025174](https://github.com/Moonofweisheng/wot-design-uni/commit/80251742f6f5d560d546bd7cd812c35433158a91))
+
+### [1.2.11](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.10...v1.2.11) (2024-04-06)
+
+
+### ⚡ Performance Improvements | 性能优化
+
+* ⚡ 优化Calendar日历选择器打开关闭时的动画效果 ([5fb9542](https://github.com/Moonofweisheng/wot-design-uni/commit/5fb9542087c62b8cf6974d2e5f4b5f455b456495))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  `notice-bar`组件补充`event`事件 ([8f11c8a](https://github.com/Moonofweisheng/wot-design-uni/commit/8f11c8a0fe02f3bb0a2e7a67e105f2e33d658477))
+* ✏️  优化文档与演示demo同步暗黑模式的逻辑 ([d057607](https://github.com/Moonofweisheng/wot-design-uni/commit/d0576071ebaeb69828b8c5e789471c3324dabb1f)), closes [#210](https://github.com/Moonofweisheng/wot-design-uni/issues/210)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复ActionSheet丢失props默认值的问题 ([e50cccc](https://github.com/Moonofweisheng/wot-design-uni/commit/e50cccceeccebeb99ca69712b9f64e8a9e5fd23f))
+* 🐛 修复Calendar部分文字运行时切换国际化未应用国际化文字的问题 ([857c922](https://github.com/Moonofweisheng/wot-design-uni/commit/857c922d4f3542cb543b8b99600bf9c48ffa24b9))
+* 🐛 修复Calendar的type为datetime且无默认值时无法在首次选择日期后选择时间的问题 ([3746ba3](https://github.com/Moonofweisheng/wot-design-uni/commit/3746ba304021c56e14414dfaed225c465869a473)), closes [#214](https://github.com/Moonofweisheng/wot-design-uni/issues/214)
+* 🐛 修复search组件suffix插槽无法使用的问题 ([6a4af41](https://github.com/Moonofweisheng/wot-design-uni/commit/6a4af41b93e8edd92e297eaea7c1bc566bfb4d6d))
+
+
+### ✨ Features | 新功能
+
+* ✨ `notice-bar`增加垂直滚动功能 ([93d048b](https://github.com/Moonofweisheng/wot-design-uni/commit/93d048b219d66718880609d6ec9086ce058121fa)), closes [#122](https://github.com/Moonofweisheng/wot-design-uni/issues/122)
+* ✨ `notice-bar`增加多文本轮播功能 ([c2e5e9b](https://github.com/Moonofweisheng/wot-design-uni/commit/c2e5e9bbd86093a5795d93aa23c2bd03d8416767))
+* ✨ `upload`组件增加`mode`属性传递给预览`image` ([acf3f99](https://github.com/Moonofweisheng/wot-design-uni/commit/acf3f999033df7b2925040ff83ad1088d0e59a44)), closes [#203](https://github.com/Moonofweisheng/wot-design-uni/issues/203)
+* ✨ img组件的mode属性增加类型`ImageMode` ([1398982](https://github.com/Moonofweisheng/wot-design-uni/commit/139898209fea4559a69cbaffed2e7b45b91aa107))
+* ✨ img组件增加enable-preview属性来支持点击预览功能 ([e6a3b73](https://github.com/Moonofweisheng/wot-design-uni/commit/e6a3b73142e37547e60b8f1dd1845fc3e9d5d17e)), closes [#193](https://github.com/Moonofweisheng/wot-design-uni/issues/193)
+* ✨ swiper组件增加current属性控制轮播项功能 ([443fd8a](https://github.com/Moonofweisheng/wot-design-uni/commit/443fd8a19e3b73ee61ae6a1692c5409e3d0c0b84)), closes [#211](https://github.com/Moonofweisheng/wot-design-uni/issues/211)
+
+### [1.2.10](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.9...v1.2.10) (2024-04-02)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Step组件description插槽无法使用的问题 ([e431294](https://github.com/Moonofweisheng/wot-design-uni/commit/e431294ea2b97858f93513c112f1a7574654a87d))
+* 🐛 修复Toast、MessageBox二次打开时部分参数未重置的问题 ([e2e7d37](https://github.com/Moonofweisheng/wot-design-uni/commit/e2e7d378e577d3d1f5582464bdd9e6c4e6d82e3d))
+
+
+### ✨ Features | 新功能
+
+* ✨ 为所有组件补充customStyle属性 ([964240e](https://github.com/Moonofweisheng/wot-design-uni/commit/964240e2e7f640586a18bec1c11b0359afcf99e2)), closes [#212](https://github.com/Moonofweisheng/wot-design-uni/issues/212)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  更新vitepress至1.0.1 ([da7684f](https://github.com/Moonofweisheng/wot-design-uni/commit/da7684f33ada867a9ba2f22bb1489c804a7d840e))
+* ✏️  修复更新vitepress至1.0.1后友情链接丢失logo的问题 ([1e36c39](https://github.com/Moonofweisheng/wot-design-uni/commit/1e36c39ff7ab814741792ee91a2ee7d9085862f9))
+* ✏️  Steps文档标题调整为步骤条 ([1ea7996](https://github.com/Moonofweisheng/wot-design-uni/commit/1ea79960fd9facef7aa5ef17f0f9bde03daa0d7c))
+
+### [1.2.9](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.8...v1.2.9) (2024-04-01)
+
+
+### ✨ Features | 新功能
+
+* ✨ Segmented分段器change事件参数类型扩充为SegmentedOption ([5592bc4](https://github.com/Moonofweisheng/wot-design-uni/commit/5592bc49b9439ef34306741f16c4b5c702d562b2)), closes [#204](https://github.com/Moonofweisheng/wot-design-uni/issues/204)
+
+### [1.2.8](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.7...v1.2.8) (2024-03-30)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 修复useLocale 不传 message 会丢失原有语言配置的问题 ([#209](https://github.com/Moonofweisheng/wot-design-uni/issues/209)) ([e854d0e](https://github.com/Moonofweisheng/wot-design-uni/commit/e854d0e758e44cba9213992794974b7ae5985abf))
+
+
+### ✨ Features | 新功能
+
+* ✨ SelectPicker单选模式支持自动完成 ([#207](https://github.com/Moonofweisheng/wot-design-uni/issues/207)) ([11aa887](https://github.com/Moonofweisheng/wot-design-uni/commit/11aa887ae36153c0a6a0cd9053fc94c70acbcb0d)), closes [#206](https://github.com/Moonofweisheng/wot-design-uni/issues/206)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档中增加@uni-helper/vite-plugin-uni-components的使用提示 ([37d9d46](https://github.com/Moonofweisheng/wot-design-uni/commit/37d9d4631e434792b1e97dccac8a52a6d253d616))
+
+### [1.2.7](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.6...v1.2.7) (2024-03-29)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复DatePicker占位符展示缺失的问题 ([8fbca94](https://github.com/Moonofweisheng/wot-design-uni/commit/8fbca94e3690e8b86ce59fbe668805839c50192b))
+* 🐛 修复DateTimePicker区域选择极值计算错误的问题 ([a1e9530](https://github.com/Moonofweisheng/wot-design-uni/commit/a1e9530a917981ca4cf96dde1aa268eaf3da059f))
+* 🐛 修复picker-view初始化报错的问题 ([2102f38](https://github.com/Moonofweisheng/wot-design-uni/commit/2102f38a107a7cc8a316cb7fdc5a9738a5bb7499)), closes [#205](https://github.com/Moonofweisheng/wot-design-uni/issues/205)
+* 🐛 修复picker选择器在APP端包装二维数组逻辑错误导致无法实现多列选择器的问题 ([ed5d7ac](https://github.com/Moonofweisheng/wot-design-uni/commit/ed5d7ace2050f5ae7541c8fd2ec395de56fa73cc))
+* 🐛 移除文件移动时volar变更文件路径错误导致.vue文件中多出的无用路径字符串 ([1f8f8ae](https://github.com/Moonofweisheng/wot-design-uni/commit/1f8f8ae2bfb2b13a6b6fcd6435a2d75f47d0e775))
+
+### [1.2.6](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.5...v1.2.6) (2024-03-27)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Picker 未选择时显示第一列值的问题 ([21839e0](https://github.com/Moonofweisheng/wot-design-uni/commit/21839e0caf170248f454d80645bc3aa2f3ae2cdb))
+* 🐛 修复DatetimePicker区间模式未选值时显示占位符错误的问题 ([37350ee](https://github.com/Moonofweisheng/wot-design-uni/commit/37350ee5234a0f30debd22d33fb168415ec4e72d))
+
+### [1.2.5](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.4...v1.2.5) (2024-03-24)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复textarea在支付宝小程序上清除按钮点击热区失效的问题 ([84662f2](https://github.com/Moonofweisheng/wot-design-uni/commit/84662f254b85d3b554113c9ba4f73ca695596fe9))
+
+### [1.2.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.3...v1.2.4) (2024-03-23)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复textarea、input的label存在icon时高度异常的问题 ([e487ced](https://github.com/Moonofweisheng/wot-design-uni/commit/e487ced1624ce9ba35b29537481302e07050612c))
+* 🐛 修复textarea无法换行的问题 ([25bd564](https://github.com/Moonofweisheng/wot-design-uni/commit/25bd56485508ae8b3dfffd13d47c306fbf42d65e))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整组件库基于vite配置自动引入组件的介绍 ([2d23607](https://github.com/Moonofweisheng/wot-design-uni/commit/2d2360706fbe2a5d4024ceebd82720014c6b1ea2))
+* ✏️  文档推荐用户从wot-design-uni.cn迁移至wot-design-uni.gitee.io ([72a567c](https://github.com/Moonofweisheng/wot-design-uni/commit/72a567c44867f049c1526f5d682e46155047516a))
+* ✏️  增加steps设置激活项的介绍 ([7c0d36c](https://github.com/Moonofweisheng/wot-design-uni/commit/7c0d36c36214517d959aa27e284aacf59d2b074b))
+
+### [1.2.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.2...v1.2.3) (2024-03-20)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复部分外部链接不可用的问题 ([e2fb515](https://github.com/Moonofweisheng/wot-design-uni/commit/e2fb5155c40e58e44920329cdfb4f2391bb81970))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 修复 checkbox 单独使用时无法切换选中状态的问题 ([#198](https://github.com/Moonofweisheng/wot-design-uni/issues/198)) ([4a20219](https://github.com/Moonofweisheng/wot-design-uni/commit/4a2021908f0d63ca398660950609bd5f4a7ca9b9))
+
+### [1.2.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.1...v1.2.2) (2024-03-19)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复picker选择器绑定值value值为0时无法生效的问题 ([d4de4ba](https://github.com/Moonofweisheng/wot-design-uni/commit/d4de4ba93824905840adc49e2d85d7168c9fd48e)), closes [#195](https://github.com/Moonofweisheng/wot-design-uni/issues/195)
+
+### [1.2.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.2.0...v1.2.1) (2024-03-19)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复部分可为null的props丢失null类型的问题 ([604e9f3](https://github.com/Moonofweisheng/wot-design-uni/commit/604e9f3810f38637ee1a7640e642790719cd9d3f))
+
+## [1.2.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.10...v1.2.0) (2024-03-19)
+
+
+### ✨ Features | 新功能
+
+* ✨ typescript类型支持增强 ([#192](https://github.com/Moonofweisheng/wot-design-uni/issues/192)) ([201e7a1](https://github.com/Moonofweisheng/wot-design-uni/commit/201e7a12b9c4023e35ff9540f5da09794ea3c6f7))
+
+### [1.1.10](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.9...v1.1.10) (2024-03-15)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复tabbar默认shape固定底部安全区无遮挡的问题 ([03048bb](https://github.com/Moonofweisheng/wot-design-uni/commit/03048bba17966e13e864c4a3d29047986778d586))
+
+### [1.1.9](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.8...v1.1.9) (2024-03-11)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  推荐使用托管在gitee上的文档地址 ([24ae6ca](https://github.com/Moonofweisheng/wot-design-uni/commit/24ae6cac05b150ff8da3ab47cc4bb3eeac48a369))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复textarea在微信小程序平台下部分安卓手机maxlength不生效的问题 ([512e63b](https://github.com/Moonofweisheng/wot-design-uni/commit/512e63b0ad30ff7acb14fffbb124dba59e34d450))
+
+### [1.1.8](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.7...v1.1.8) (2024-03-10)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复transitiont打开后立即关闭时无法关闭的问题 ([c1cebf6](https://github.com/Moonofweisheng/wot-design-uni/commit/c1cebf6de0b1c6a2f8a32aa4815adc8c0466eeca))
+
+### [1.1.7](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.6...v1.1.7) (2024-03-09)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复badge组件多出一个script标签的问题 ([e1819b4](https://github.com/Moonofweisheng/wot-design-uni/commit/e1819b4dbcb3dc1244bbe5641cdb538d0ad9c5e7)), closes [#188](https://github.com/Moonofweisheng/wot-design-uni/issues/188)
+
+### [1.1.6](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.5...v1.1.6) (2024-03-06)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Tabar为round类型时开启safeAreaInsetBottom是样式异常的问题 ([aa9ae88](https://github.com/Moonofweisheng/wot-design-uni/commit/aa9ae88f35236dec15635bd8e4fd0c7023e5fb70))
+
+### [1.1.5](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.4...v1.1.5) (2024-03-05)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Search、Input等组件clear事件在value变更前触发的问题 ([8d113a2](https://github.com/Moonofweisheng/wot-design-uni/commit/8d113a285dbffa705e44a31ad05e48f36978c46c)), closes [#185](https://github.com/Moonofweisheng/wot-design-uni/issues/185)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  首页增加常见问题的入口 ([fd7a7dd](https://github.com/Moonofweisheng/wot-design-uni/commit/fd7a7dd287226f670cf02db9cf2856c9ebe52498))
+
+### [1.1.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.3...v1.1.4) (2024-03-04)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Navbar显示下边框时fixed不生效的问题 ([18c09d8](https://github.com/Moonofweisheng/wot-design-uni/commit/18c09d87384699c044a9f84838b17f74eaff77b3))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  增加支付宝小程序styleIsolation配置的文档 ([68d1262](https://github.com/Moonofweisheng/wot-design-uni/commit/68d1262ed5ac6ccf8c078ba089e045739c2275e8))
+
+### [1.1.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.2...v1.1.3) (2024-03-03)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档中增加提问的智慧和toast、message组件的常见问题 ([2fdd4b1](https://github.com/Moonofweisheng/wot-design-uni/commit/2fdd4b1c050ed8805637ec0b082ca4d20c3c17b6))
+
+### [1.1.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.1...v1.1.2) (2024-03-01)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Button会存在一个默认border的问题 ([#182](https://github.com/Moonofweisheng/wot-design-uni/issues/182)) ([3714ffb](https://github.com/Moonofweisheng/wot-design-uni/commit/3714ffb0f1de55f3eae5a36b9235bdbc518b0738))
+
+### [1.1.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.1.0...v1.1.1) (2024-02-29)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 ImgCropper 在钉钉小程序平台无法展示所选图片的问题 ([db8d029](https://github.com/Moonofweisheng/wot-design-uni/commit/db8d029db3a227cd062c6e9d7c14eb9d0f3dae87))
+* 🐛 修复微信小程序css使用标签选择器抛出警告的问题（wd-img） ([#181](https://github.com/Moonofweisheng/wot-design-uni/issues/181)) ([ee3da01](https://github.com/Moonofweisheng/wot-design-uni/commit/ee3da016439d68f1d9d061bb1b1cbd10f2863aa4))
+
+## [1.1.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v1.0.0...v1.1.0) (2024-02-27)
+
+
+### ✨ Features | 新功能
+
+* ✨ Button 支持微信小程序chooseavatar和agreeprivacyauthorization事件 ([177c726](https://github.com/Moonofweisheng/wot-design-uni/commit/177c726e0d0f9bc435f815af2e4fc8e917ef144d))
+* ✨ DropDown组件支持钉钉小程序 ([924c65b](https://github.com/Moonofweisheng/wot-design-uni/commit/924c65b4f66e7d1ff75aa2bcb5c6cbe4e045fb92))
+* ✨ Slider 支持钉钉小程序 ([bea7a49](https://github.com/Moonofweisheng/wot-design-uni/commit/bea7a499edc3e0681ec11dd26333d8a969dd9b0e))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  新增支持钉钉小程序平台 ([9525f23](https://github.com/Moonofweisheng/wot-design-uni/commit/9525f23f207af47c10c37614279b8318500e3ede))
+* ✏️  修复Segment演示demo在钉钉小程序平台展示异常的问题 ([4fbe556](https://github.com/Moonofweisheng/wot-design-uni/commit/4fbe5569b3cb1761c2ef7847a4abc1721d3ed220))
+* ✏️  支持平台的介绍中新增支付宝小程序 ([320e4dd](https://github.com/Moonofweisheng/wot-design-uni/commit/320e4dd2e102146b8a466d378c8356286faeb28c))
+
+## [1.0.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.3.1...v1.0.0) (2024-02-26)
+
+
+### ✨ Features | 新功能
+
+* ✨ 支持支付宝小程序并提供ConfigProvider的便利性优化 ([e1baca3](https://github.com/Moonofweisheng/wot-design-uni/commit/e1baca3ce5201c38e6b0aee5e6cb7099ecba9772))
+* ✨ sticky组件支持支付宝平台 ([3805882](https://github.com/Moonofweisheng/wot-design-uni/commit/3805882b8b1f8ad165d8cda528fa0b5cf3f96c27))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  演示demo增加组件库版本号的显示 ([19a00e3](https://github.com/Moonofweisheng/wot-design-uni/commit/19a00e34652bf672f7fdfd28899625dac977a1b6))
+
+### [0.3.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.3.0...v0.3.1) (2024-02-26)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复大尺寸checkbox选中样式异常的问题 ([413cf3b](https://github.com/Moonofweisheng/wot-design-uni/commit/413cf3b6a04358bca5284704d750cfd224c1d277))
+
+## [0.3.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.23...v0.3.0) (2024-02-21)
+
+
+### ✨ Features | 新功能
+
+* ✨ 调整Button 按钮样式受主色控制并优化幽灵按钮显示效果 ([5f0d1f5](https://github.com/Moonofweisheng/wot-design-uni/commit/5f0d1f5f8bac81435d248348ec5823e82d35f7a4))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复select-picker组件绑定值描述错误的问题 ([b287111](https://github.com/Moonofweisheng/wot-design-uni/commit/b2871114311656580ade25c25f0775d9246f32b7)), closes [#178](https://github.com/Moonofweisheng/wot-design-uni/issues/178)
+* ✏️  增加Button细边框幽灵按钮的使用说明 ([366c34b](https://github.com/Moonofweisheng/wot-design-uni/commit/366c34b69faedee4874221c604d1a6d5c8c1a8e0))
+
+### [0.2.23](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.22...v0.2.23) (2024-02-07)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档支持显示友情链接 ([adac43f](https://github.com/Moonofweisheng/wot-design-uni/commit/adac43f2a1b300d4169249e108389b3a24ac9ffa))
+* ✏️  友情链接支持来自线上配置 ([50896bb](https://github.com/Moonofweisheng/wot-design-uni/commit/50896bb475c5e1c5be42bdc22a56a47db9a51481))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 MessageBox 国际化不生效的问题 ([48404a1](https://github.com/Moonofweisheng/wot-design-uni/commit/48404a1ccccf9081cf3e9f9918e20cb58a6bb12f)), closes [#177](https://github.com/Moonofweisheng/wot-design-uni/issues/177)
+
+### [0.2.22](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.21...v0.2.22) (2024-01-30)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修正 Popover 组件文档中menuclick示例错误的问题 ([9df96e7](https://github.com/Moonofweisheng/wot-design-uni/commit/9df96e7629296bfba2b7f951b83508cc9e4a3935))
+
+### [0.2.21](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.19...v0.2.21) (2024-01-28)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Dropdown 组件点击已展开项时无法关闭的问题 ([3846590](https://github.com/Moonofweisheng/wot-design-uni/commit/38465905e76b929a4d4af93dfe4ad9f31503b2ad))
+
+
+### ✨ Features | 新功能
+
+* ✨ 支持国际化 ([#168](https://github.com/Moonofweisheng/wot-design-uni/issues/168)) ([ce9f192](https://github.com/Moonofweisheng/wot-design-uni/commit/ce9f19244e4d376c5104be2b89d57426bf722aee))
+
+### [0.2.19](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.18...v0.2.19) (2024-01-25)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Input 绑定值无法为null的问题 ([f745e14](https://github.com/Moonofweisheng/wot-design-uni/commit/f745e14d10d64b643aa2f9c0170f72db3a99bb3e))
+* 🐛 修复多列、单复选选择器列更新时显示值未更新的问题 ([5ba45b9](https://github.com/Moonofweisheng/wot-design-uni/commit/5ba45b94b711e1129873fa29b243a616087ddc2a)), closes [#167](https://github.com/Moonofweisheng/wot-design-uni/issues/167)
+
+### [0.2.18](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.17...v0.2.18) (2024-01-24)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 CheckBox 组件的选中色无法应用到css变量的问题 ([febfb61](https://github.com/Moonofweisheng/wot-design-uni/commit/febfb61cab3b55a9f78920ed4715f05a232fb9f6))
+* 🐛 修复 Radio 组件的选中色无法应用到css变量的问题 ([b7e8631](https://github.com/Moonofweisheng/wot-design-uni/commit/b7e86314139cc6291e851c350219fce837f0f26e))
+
+### [0.2.17](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.16...v0.2.17) (2024-01-23)
+
+
+### ✨ Features | 新功能
+
+* ✨ Form 表单组件提供开关控制是否model变化时重置提示信息 ([b9f46ba](https://github.com/Moonofweisheng/wot-design-uni/commit/b9f46ba0da85acd7312753a34dd0ad3f2f7379a2)), closes [#166](https://github.com/Moonofweisheng/wot-design-uni/issues/166)
+
+### [0.2.16](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.15...v0.2.16) (2024-01-21)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复文档中关于日期选择器最大日期描述错误的问题 ([bb76ce3](https://github.com/Moonofweisheng/wot-design-uni/commit/bb76ce332c6977cbae981790aa356bc27c0d9efa))
+
+### [0.2.15](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.14...v0.2.15) (2024-01-15)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Tab class类名属性错误的问题 ([dc87df7](https://github.com/Moonofweisheng/wot-design-uni/commit/dc87df70c7920d7cfabc571ace8beb2ce0dc2a7c))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复 Upload 文档中before-upload钩子参数描述错误的问题 ([3ec7299](https://github.com/Moonofweisheng/wot-design-uni/commit/3ec7299ce724fce771b782f6110ba6ec29376291))
+
+### [0.2.14](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.13...v0.2.14) (2024-01-14)
+
+
+### ✨ Features | 新功能
+
+* ✨ InputNumber步进器支持禁用输入框 ([933bce3](https://github.com/Moonofweisheng/wot-design-uni/commit/933bce314618956ff922daacef5b3594f36baf9b))
+
+### [0.2.13](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.12...v0.2.13) (2024-01-12)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复演示文档刷新后指向localhost的问题 ([4cd8b16](https://github.com/Moonofweisheng/wot-design-uni/commit/4cd8b16bdf5ea8e93cff85396025844e9ebd031c))
+
+### [0.2.12](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.11...v0.2.12) (2024-01-11)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Tabbar 错误地抛出提示信息的问题 ([1c89ed0](https://github.com/Moonofweisheng/wot-design-uni/commit/1c89ed0a7158e79556e83c6aeb89bd1e93e4ea0d))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  增加 Circle 组件使用插槽的示例 ([6341594](https://github.com/Moonofweisheng/wot-design-uni/commit/6341594295732dac951c465d95537f36addbbf9c))
+* ✏️  增加展示gitee的star徽标 ([1abf962](https://github.com/Moonofweisheng/wot-design-uni/commit/1abf962e37e27c1c1688bed2026c66022e63ce9b))
+
+### [0.2.11](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.10...v0.2.11) (2024-01-09)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Overlay 类型声明错误的问题 ([930e59a](https://github.com/Moonofweisheng/wot-design-uni/commit/930e59a9b09aee535ec4c316e44ed3c0e31be628))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  提供托管在Giteee上的文档网站 ([6d62e9e](https://github.com/Moonofweisheng/wot-design-uni/commit/6d62e9e7ddda0bd9f51f2ad9e2893f1ed3709c63))
+
+### [0.2.10](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.9...v0.2.10) (2024-01-08)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 col-picker 暗黑模式下标题文字颜色不清楚的问题 ([217ffb7](https://github.com/Moonofweisheng/wot-design-uni/commit/217ffb7dacb66b2017145c6e43fc8c873a6e9dd2))
+* 🐛 修复 steps 组件自定义图标显示异常的问题 ([0300f63](https://github.com/Moonofweisheng/wot-design-uni/commit/0300f63f35a5afcd278aba3b4ab721f498716d94))
+* 🐛 修复支付宝小程序暗黑模式下 Input、Textarea 组件显示异常的问题 ([8a9c344](https://github.com/Moonofweisheng/wot-design-uni/commit/8a9c344872bfcd81a73f71520f51b6b849f516d5))
+
+### [0.2.9](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.8...v0.2.9) (2024-01-07)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 col-picker 组件首次打开指示线位置异常的问题 ([323fb00](https://github.com/Moonofweisheng/wot-design-uni/commit/323fb00942b7032b678d92ab03360dc7bb8faae8))
+
+### [0.2.8](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.7...v0.2.8) (2024-01-06)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  展示netlify支持 ([410b180](https://github.com/Moonofweisheng/wot-design-uni/commit/410b180ec9c660ab9c49d6eb203d53c35919c512))
+
+### [0.2.7](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.5...v0.2.7) (2024-01-06)
+
+
+### ✨ Features | 新功能
+
+* ✨ 优化provide/inject的使用方式 ([892f467](https://github.com/Moonofweisheng/wot-design-uni/commit/892f4675a848ee3d4c965c36d5c4034aa5806b6d))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档网站增加自定义footer ([dd8bc00](https://github.com/Moonofweisheng/wot-design-uni/commit/dd8bc003eedcdc43cdd60bb896c897d108dd4a51))
+* ✏️  修复vitepress自定义footer展示错误的问题 ([c0701d5](https://github.com/Moonofweisheng/wot-design-uni/commit/c0701d584e5d9b84e6d913dd23666b80d803407b))
+
+### [0.2.6](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.5...v0.2.6) (2024-01-06)
+
+
+### ✨ Features | 新功能
+
+* ✨ 优化provide/inject的使用方式 ([892f467](https://github.com/Moonofweisheng/wot-design-uni/commit/892f4675a848ee3d4c965c36d5c4034aa5806b6d))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档网站增加自定义footer ([dd8bc00](https://github.com/Moonofweisheng/wot-design-uni/commit/dd8bc003eedcdc43cdd60bb896c897d108dd4a51))
+
+### [0.2.5](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.4...v0.2.5) (2023-12-28)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Form 导入FormRules、ErrorMessage时未指定为type的问题 ([c88c84e](https://github.com/Moonofweisheng/wot-design-uni/commit/c88c84e8b71fc2404643a623c28f4953ffe36e71))
+* 🐛 修复 SwipeAction 组件在H5端导致页面无法上下滚动的问题 ([1f68ce1](https://github.com/Moonofweisheng/wot-design-uni/commit/1f68ce13c8109dd92ca4bf055f66aa8dff24c83d)), closes [#149](https://github.com/Moonofweisheng/wot-design-uni/issues/149)
+
+### [0.2.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.3...v0.2.4) (2023-12-27)
+
+### [0.2.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.2...v0.2.3) (2023-12-27)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复动态表单演示页面标题错误的问题 ([7c65359](https://github.com/Moonofweisheng/wot-design-uni/commit/7c65359c88614ae53c4800d0946d8e09ef547a26))
+
+### [0.2.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.1...v0.2.2) (2023-12-26)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 移除 Swiper 的list中不必填的属性 ([672f680](https://github.com/Moonofweisheng/wot-design-uni/commit/672f680051009edd23a67d4e32722839f519d9ba))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复 Textarea 文档示例错误的问题 ([7da3a4c](https://github.com/Moonofweisheng/wot-design-uni/commit/7da3a4cdfe35f87193f57139de0819130424d6ea))
+* ✏️  优化 Form 相关组件的文档介绍 ([6a0a7a7](https://github.com/Moonofweisheng/wot-design-uni/commit/6a0a7a730fcd8904609f8a48339e1079baf3e9be))
+
+### [0.2.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.2.0...v0.2.1) (2023-12-25)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  PassowrdInput 密码输入框组件增加文档标题 ([cccc4cc](https://github.com/Moonofweisheng/wot-design-uni/commit/cccc4cc0d4952f594e5387bad32a7248009ebd9e))
+
+## [0.2.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.70...v0.2.0) (2023-12-24)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Form 表单组件 ([c8086d6](https://github.com/Moonofweisheng/wot-design-uni/commit/c8086d624c01bfbae3b9dfc324d33d6bfe46e041))
+* ✨ 新增 PasswordInput 密码输入框 ([b8c68f9](https://github.com/Moonofweisheng/wot-design-uni/commit/b8c68f92f7ddbf3ae2a58bf36593a0cd0340f225))
+* ✨ 新增 textarea 文本域组件 ([ed56bcd](https://github.com/Moonofweisheng/wot-design-uni/commit/ed56bcdb0337c198e8834182d47d1cd83513091d))
+* ✨ 增加父子组件 Provide/Inject 的hooks ([eb971d4](https://github.com/Moonofweisheng/wot-design-uni/commit/eb971d4e86733b0337de0c63f26b373424a842f0))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Input 组件在支付宝平台存在一个默认padding的问题 ([921c906](https://github.com/Moonofweisheng/wot-design-uni/commit/921c90606e05ea1b29cdee39cde7858907b2cd4d))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整主题定制相关文档 ([2d5b1af](https://github.com/Moonofweisheng/wot-design-uni/commit/2d5b1af2787d33ec24eb6e6ab9db6ff941d80c2b))
+* ✏️  增加 textarea 文本域组件功能的迁移说明 ([61ebc7d](https://github.com/Moonofweisheng/wot-design-uni/commit/61ebc7db1e1db3e8634a87c24fae0869f4b6f17b))
+* ✏️  PasswordInput 密码输入框文档增加版本介绍 ([56ccf60](https://github.com/Moonofweisheng/wot-design-uni/commit/56ccf6005e502237e1ff45b5b52e852b402a10c9))
+
+### [0.1.70](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.69...v0.1.70) (2023-12-23)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 picker 的列value为0时回显异常的问题 ([2ba93c3](https://github.com/Moonofweisheng/wot-design-uni/commit/2ba93c328c54c41b6e1e9ead946e9c46e278ebb9)), closes [#155](https://github.com/Moonofweisheng/wot-design-uni/issues/155)
+
+### [0.1.69](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.68...v0.1.69) (2023-12-13)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Notify 使用文档错误的问题 ([3fe6423](https://github.com/Moonofweisheng/wot-design-uni/commit/3fe6423c9c6727eaa3655029bf862b9be182b70b)), closes [#148](https://github.com/Moonofweisheng/wot-design-uni/issues/148)
+
+### [0.1.68](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.67...v0.1.68) (2023-12-07)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  增加 Gap 组件的文档 ([9e3a8c1](https://github.com/Moonofweisheng/wot-design-uni/commit/9e3a8c1506f9ef93f9f0155ac948c8bc4d215ea8))
+
+### [0.1.67](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.66...v0.1.67) (2023-12-06)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Gap 间隔槽组件 ([#147](https://github.com/Moonofweisheng/wot-design-uni/issues/147)) ([fa7cd16](https://github.com/Moonofweisheng/wot-design-uni/commit/fa7cd163810cbcd63fc2a99a6a92ccd8a803b2f1))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Picker组件v-model数据不更新的问题 ([e60f475](https://github.com/Moonofweisheng/wot-design-uni/commit/e60f47538130625a8c8f93e3a6795b7e71588002)), closes [#146](https://github.com/Moonofweisheng/wot-design-uni/issues/146)
+
+### [0.1.66](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.65...v0.1.66) (2023-12-01)
+
+
+### ✨ Features | 新功能
+
+* ✨ Tag 组件type增加属性值default ([#143](https://github.com/Moonofweisheng/wot-design-uni/issues/143)) ([48f0e4b](https://github.com/Moonofweisheng/wot-design-uni/commit/48f0e4b3c484755a0da4eb11fa814c6b52be74b1))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 ActionSheet 组件设置custom-class无效的问题 ([1e5bcf7](https://github.com/Moonofweisheng/wot-design-uni/commit/1e5bcf7d0a8be66b80de81a0359d3fb429fdf52d))
+
+### [0.1.65](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.64...v0.1.65) (2023-11-29)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 NumberKeyboard 数字键盘组件 ([#139](https://github.com/Moonofweisheng/wot-design-uni/issues/139)) ([7bb4455](https://github.com/Moonofweisheng/wot-design-uni/commit/7bb4455c6d9eca179ba174b8ad0da6ae8a09defc))
+* Tag新增类型标签添加slot ([7977dbb](https://github.com/Moonofweisheng/wot-design-uni/commit/7977dbbe3565eb06b700f2c55a31803647760fa9))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  新增关于 Tag 组件的add插槽的介绍 ([537fa5e](https://github.com/Moonofweisheng/wot-design-uni/commit/537fa5ebf8dcdc14ee12fc1f1e5a5f829653a14a))
+
+### [0.1.64](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.63...v0.1.64) (2023-11-25)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复DateTimePicker标题展示和模式为区间时before-confirm参数错误的问题 ([7bcd12b](https://github.com/Moonofweisheng/wot-design-uni/commit/7bcd12ba633224dd42b160f0b43fadc99ac76707))
+
+### [0.1.63](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.62...v0.1.63) (2023-11-23)
+
+
+### ✨ Features | 新功能
+
+* ✨ CountDown 倒计时组件支持custom-class和custom-style ([dd60d6d](https://github.com/Moonofweisheng/wot-design-uni/commit/dd60d6df855cc49eba36beb7bcfb9eeb96ed0c82))
+* ✨ Search 搜索组件支持自动聚焦和清空后自动聚焦 ([2e3ab63](https://github.com/Moonofweisheng/wot-design-uni/commit/2e3ab63d3dad582c44d9d9f8d2b57e21ee22f380))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复文档中config-provider等页面的错误 ([f71e641](https://github.com/Moonofweisheng/wot-design-uni/commit/f71e6412e770f2043e4cb9a35950a68aacf0e542))
+
+### [0.1.62](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.61...v0.1.62) (2023-11-22)
+
+
+### ✨ Features | 新功能
+
+* ✨ Badge 徽标组件支持控制是否显示0值 ([65cfb2c](https://github.com/Moonofweisheng/wot-design-uni/commit/65cfb2ca15c29783f6de48de0bda4ddc3d43664a))
+* ✨ Upload 上传组件支持h5端获取文件后缀名 ([59fe70c](https://github.com/Moonofweisheng/wot-design-uni/commit/59fe70c0d0c55c7ecca26902b41599be94e34fe3))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  优化 Upload 文档中关于云存储内容的样式 ([607ce05](https://github.com/Moonofweisheng/wot-design-uni/commit/607ce05100ffef9c5c98b503e580a718551f5552))
+
+### [0.1.61](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.60...v0.1.61) (2023-11-20)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复 Tag 标签组件文档错乱的问题 ([502203b](https://github.com/Moonofweisheng/wot-design-uni/commit/502203bebf08d7e6851b8dd2f94768f6c620da26))
+* ✏️  ImgCropper 组件演示页面增加微信小程序隐私协议弹框 ([3af9246](https://github.com/Moonofweisheng/wot-design-uni/commit/3af9246d1f1876ba3c83f6829a9716ad37ae5829))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Calendar 日历组件存在未定义属性导致警告的问题 ([d0d3152](https://github.com/Moonofweisheng/wot-design-uni/commit/d0d3152a5ca1a3e06135b12f4565211258619d1f))
+* 🐛 修复 CountDown 倒计时组件文档手动控制示例错误的问题 ([3c373fb](https://github.com/Moonofweisheng/wot-design-uni/commit/3c373fbf3af02c8a73ddd3a4063f9408ec4f33ff))
+* 🐛 修复 SelectPicker 组件loading状态仍可以滚动的问题 ([c5a1bff](https://github.com/Moonofweisheng/wot-design-uni/commit/c5a1bfff576aad8a6f03288a6a12a8ed24f776f2))
+
+
+### ✨ Features | 新功能
+
+* ✨ Upload 上传组件支持上传至云存储 ([523a6be](https://github.com/Moonofweisheng/wot-design-uni/commit/523a6be40b065c4cc28cfe81fdcb200142d9a455))
+
+### [0.1.60](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.59...v0.1.60) (2023-11-20)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复 CountDown 倒计时组件默认slot用法的介绍错误的问题 ([2fbb88f](https://github.com/Moonofweisheng/wot-design-uni/commit/2fbb88fcd9fe21de09637d48149278d9aef5e1d9))
+
+### [0.1.59](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.58...v0.1.59) (2023-11-19)
+
+### [0.1.58](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.57...v0.1.58) (2023-11-19)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 CountDown 倒计时组件 ([a805d04](https://github.com/Moonofweisheng/wot-design-uni/commit/a805d04827600525c08fbc1848cb3a524b48e81a))
+* ✨ CountDown 倒计时组件支持小程序 ([22f249a](https://github.com/Moonofweisheng/wot-design-uni/commit/22f249ae5bdedea1ecebfe31350c7b5a1e394f2e))
+
+### [0.1.57](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.56...v0.1.57) (2023-11-17)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Fab 悬浮动作按钮组件 ([3c526fe](https://github.com/Moonofweisheng/wot-design-uni/commit/3c526feb102ccf17da0678a6e1c004bb82d57f0f))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复 Cell 组件点击反馈的介绍错误的问题 ([9096d81](https://github.com/Moonofweisheng/wot-design-uni/commit/9096d81f514348d6103f33590387d0406b217198))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Table 表格组件数字英文换行失效的问题 ([47ac339](https://github.com/Moonofweisheng/wot-design-uni/commit/47ac3390cb58d250129a9db6ade8d90f980855a1))
+
+### [0.1.56](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.55...v0.1.56) (2023-11-12)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Tabbar 标签栏组件 bordered 属性无效的问题 ([69c2656](https://github.com/Moonofweisheng/wot-design-uni/commit/69c265638c6fc36a1479a37c052a572da333006f))
+
+### [0.1.55](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.54...v0.1.55) (2023-11-12)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 修正README.md 中[贡献指南]链接错误，跳转失败的问题。 ([071de88](https://github.com/Moonofweisheng/wot-design-uni/commit/071de88f98fa90492032193606941fbcdfe9283d))
+
+
+### ✨ Features | 新功能
+
+* ✨ Swiper 轮播图组件增加imageMode属性支持自定义图片裁剪缩放模式 ([4205c01](https://github.com/Moonofweisheng/wot-design-uni/commit/4205c0149d3224e318ef21563e96f0a843ad13bc))
+
+### [0.1.54](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.53...v0.1.54) (2023-11-10)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 修正ColPicker多列选择器v-model类型提示使用Record<string, any>[]实际上的数据是单维数组的问题 ([c490ac6](https://github.com/Moonofweisheng/wot-design-uni/commit/c490ac607e6f9eb7207b90943b83ce1696a30fd4))
+
+### [0.1.53](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.52...v0.1.53) (2023-11-09)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Input 输入框组件包含无用显示内容的问题 ([13a3106](https://github.com/Moonofweisheng/wot-design-uni/commit/13a3106055d66083d640912bfff67f2e08781f03))
+
+### [0.1.52](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.51...v0.1.52) (2023-11-09)
+
+
+### ✨ Features | 新功能
+
+* ✨ Input绑定值为null时的警告从error改为warn ([70f1407](https://github.com/Moonofweisheng/wot-design-uni/commit/70f1407eec057668da0117c9861b523ab667da70))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Badge 徽标组件暗黑模式下边框颜色未兼容的问题 ([c0a0b5a](https://github.com/Moonofweisheng/wot-design-uni/commit/c0a0b5aaea238f144978a3a9b2ab6db202dfdc21)), closes [#115](https://github.com/Moonofweisheng/wot-design-uni/issues/115)
+
+### [0.1.51](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.50...v0.1.51) (2023-11-06)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复引入错误依赖的问题 ([15bc876](https://github.com/Moonofweisheng/wot-design-uni/commit/15bc876a3026319c88ce4b757593243f9869ce39))
+
+### [0.1.50](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.49...v0.1.50) (2023-11-06)
+
+
+### ✨ Features | 新功能
+
+* ✨ SidebarItem、TabbarItem、GridItem组件增加徽标自定义属性badge-props ([7143098](https://github.com/Moonofweisheng/wot-design-uni/commit/71430989bff81a137fc5199eeeefe0a4da3ce31d))
+
+### [0.1.49](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.48...v0.1.49) (2023-11-05)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Sidebar 侧边栏组件 ([#113](https://github.com/Moonofweisheng/wot-design-uni/issues/113)) ([d189378](https://github.com/Moonofweisheng/wot-design-uni/commit/d189378a02aeb36c275218358849a187e88ce687))
+
+### [0.1.48](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.47...v0.1.48) (2023-11-04)
+
+
+### ✨ Features | 新功能
+
+* ✨ Input 输入框增加支持微信小程序原生属性always-embed ([57d00ec](https://github.com/Moonofweisheng/wot-design-uni/commit/57d00ececd9849a2d21f59fc863b6ad8933419d8))
+
+### [0.1.47](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.46...v0.1.47) (2023-11-02)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复 Image 图片组件演示demo样式不友好的问题 ([cbdab19](https://github.com/Moonofweisheng/wot-design-uni/commit/cbdab1959efff642a60a351ffd6454dcd173b9a4))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Input 组件为textarea类型时show-confirm-bar不生效的问题 ([eebec8a](https://github.com/Moonofweisheng/wot-design-uni/commit/eebec8a74fa9399bfd305cadb1a9b6a526e88568))
+* 🐛 img 预览demo布局错位 ([0397809](https://github.com/Moonofweisheng/wot-design-uni/commit/0397809d81010e109c238eefea56c82bd06a50cb))
+
+
+### ✨ Features | 新功能
+
+* ✨ 图片添加圆角大小设置 ([98edaed](https://github.com/Moonofweisheng/wot-design-uni/commit/98edaed6cb1c81b9ed6e05561814aaa51b31b2b3))
+* ✨ Badge 徽标组件增加customStyle自定义样式 ([d194106](https://github.com/Moonofweisheng/wot-design-uni/commit/d194106f07fb46f6a979967ba327dee1b41ca70e))
+
+### [0.1.46](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.45...v0.1.46) (2023-11-02)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Tabs 组件在微信小程序端有概率不绘制下划线的问题 ([d70ec65](https://github.com/Moonofweisheng/wot-design-uni/commit/d70ec65998d1ca1fbdbd3b4ef1af4a292a597f55))
+
+### [0.1.45](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.44...v0.1.45) (2023-11-01)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Switch 开关组件自定义大小无效的问题 ([15ffa1f](https://github.com/Moonofweisheng/wot-design-uni/commit/15ffa1f9172d3c11722c71ca370c1016e25f2b41))
+
+### [0.1.44](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.43...v0.1.44) (2023-11-01)
+
+
+### ✨ Features | 新功能
+
+* ✨ 使用 useQueue hook替换clickOut实现关闭多个气泡等组件的功能 ([3a24999](https://github.com/Moonofweisheng/wot-design-uni/commit/3a24999c1e28414b12806cad3c3bc6f7a445593f))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  优化演示项目首页样式 ([e98f30e](https://github.com/Moonofweisheng/wot-design-uni/commit/e98f30e0125e287d2bc5cdbcfff69a35cb7436d8))
+
+### [0.1.43](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.42...v0.1.43) (2023-10-31)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Tooltip 文字提示组件微信端关闭按钮样式错误的问题 ([ec1b949](https://github.com/Moonofweisheng/wot-design-uni/commit/ec1b9490b9517d0e4ebe4a5130a418a684b1a589))
+
+### [0.1.42](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.41...v0.1.42) (2023-10-31)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Popover、Tooltip 组件展开过程中无法遮盖图片的问题 ([db009c1](https://github.com/Moonofweisheng/wot-design-uni/commit/db009c1229413f7ecc446e3e3a1db4d7678268b3))
+
+### [0.1.41](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.40...v0.1.41) (2023-10-31)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Popover、Tooltip 组件展开切换动画不流畅的问题 ([c765b08](https://github.com/Moonofweisheng/wot-design-uni/commit/c765b085a6018433bb95fd7647c091393e2e6e7c)), closes [#101](https://github.com/Moonofweisheng/wot-design-uni/issues/101)
+
+### [0.1.40](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.39...v0.1.40) (2023-10-30)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  移除文档中 Search 组件未支持的插槽 ([325e140](https://github.com/Moonofweisheng/wot-design-uni/commit/325e14046de38eb7c4e792a64a290c9997af5cba))
+
+### [0.1.39](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.38...v0.1.39) (2023-10-29)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 DateTimePicker 日期选择器组件双向绑定错误的问题 ([1b13873](https://github.com/Moonofweisheng/wot-design-uni/commit/1b13873cef4b7c760698abce7dca500cd548c660))
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Table 表格组件 ([#98](https://github.com/Moonofweisheng/wot-design-uni/issues/98)) ([c8395f8](https://github.com/Moonofweisheng/wot-design-uni/commit/c8395f8a7e1ad041b003672081b715a7c755adc1))
+* ✨ Collapse 折叠面板组件增加分割线 ([adc6633](https://github.com/Moonofweisheng/wot-design-uni/commit/adc6633ad80b74e801a48a50917c9a2d378de9e0)), closes [#97](https://github.com/Moonofweisheng/wot-design-uni/issues/97)
+
+### [0.1.38](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.37...v0.1.38) (2023-10-25)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Upload 组件showLimitNum属性名拼写错误的问题 ([301cbff](https://github.com/Moonofweisheng/wot-design-uni/commit/301cbff20facf60b5645108972f22c8c14235f87))
+
+### [0.1.37](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.36...v0.1.37) (2023-10-25)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复Tabbar组件类型警告的问题并优化文档相关链接 ([28c3cef](https://github.com/Moonofweisheng/wot-design-uni/commit/28c3cefdfc24f3f6f2669de5f93456a0db281f72))
+* ✏️  issues 模板更新 ([e34c5cd](https://github.com/Moonofweisheng/wot-design-uni/commit/e34c5cded1c850d22165c544a3c6a351701479ec))
+
+### [0.1.36](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.35...v0.1.36) (2023-10-21)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Tabs 指定name时双向绑定值仍为index的问题 ([756cad8](https://github.com/Moonofweisheng/wot-design-uni/commit/756cad8d6fcaefb0bf73f1cd2b9f4a24f5827b37)), closes [#91](https://github.com/Moonofweisheng/wot-design-uni/issues/91)
+
+### [0.1.35](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.34...v0.1.35) (2023-10-21)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Tabs 组件通过name匹配时抛出异常的问题 ([b36fb1f](https://github.com/Moonofweisheng/wot-design-uni/commit/b36fb1f9def0aa99c521ffc20c6cae8074b56838)), closes [#91](https://github.com/Moonofweisheng/wot-design-uni/issues/91)
+
+### [0.1.34](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.33...v0.1.34) (2023-10-18)
+
+
+### ✨ Features | 新功能
+
+* ✨ SelectPicker 单复选选择器增加 scroll-into-view 属性支持定位到选中值 ([00b27c1](https://github.com/Moonofweisheng/wot-design-uni/commit/00b27c187438426471dab2ea15bc39d627773ab2)), closes [#68](https://github.com/Moonofweisheng/wot-design-uni/issues/68)
+
+### [0.1.33](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.32...v0.1.33) (2023-10-17)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Navbar 导航栏组件 ([#86](https://github.com/Moonofweisheng/wot-design-uni/issues/86)) ([5f66f71](https://github.com/Moonofweisheng/wot-design-uni/commit/5f66f713fae9e693fda4a472bc3e0767a1a6d3e8))
+
+### [0.1.32](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.31...v0.1.32) (2023-10-16)
+
+
+### ✨ Features | 新功能
+
+* ✨ Tabs 组件调整为受控组件 ([b2a70bc](https://github.com/Moonofweisheng/wot-design-uni/commit/b2a70bc8f32800119924b29283db760af8a3ddb1)), closes [#82](https://github.com/Moonofweisheng/wot-design-uni/issues/82)
+
+### [0.1.31](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.30...v0.1.31) (2023-10-16)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复wd-popup组件的click-modal方法错误调用的问题 ([224e3e5](https://github.com/Moonofweisheng/wot-design-uni/commit/224e3e53f912a236e8e24f8afef64fa09f6a89aa))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  更新文档中关于组件数量的介绍 ([4fa7355](https://github.com/Moonofweisheng/wot-design-uni/commit/4fa7355e69a8bb32d1c9924cfc717caaf3345ee5))
+* ✏️  增加 Overlay 遮罩层组件的文档 ([3bca4b6](https://github.com/Moonofweisheng/wot-design-uni/commit/3bca4b65c2bc7cd7f90e8b9513c619799f9a438b))
+
+### [0.1.30](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.29...v0.1.30) (2023-10-14)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Overlay 遮罩层组件 ([41b2c4f](https://github.com/Moonofweisheng/wot-design-uni/commit/41b2c4f3677dcce9c3e18875b7a1ec32d02b3d6a))
+* ✨ Popup 弹出层组件增加 lock-scroll 属性 ([a6987e6](https://github.com/Moonofweisheng/wot-design-uni/commit/a6987e65da2f121d4e95c1b5cb271ed8f9a06e58))
+
+### [0.1.29](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.28...v0.1.29) (2023-10-13)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Tabbar 标签栏组件固定底部时不设置placeholder情况下仍占据相应空间的问题 ([b58f9df](https://github.com/Moonofweisheng/wot-design-uni/commit/b58f9dfc8230e9427f2af658c8315c5b022b232c))
+
+### [0.1.28](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.27...v0.1.28) (2023-10-12)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  文档样式优化 ([f21ecb9](https://github.com/Moonofweisheng/wot-design-uni/commit/f21ecb9dfbfbf0afe49a760d24ebdc08e4799717))
+
+### [0.1.27](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.26...v0.1.27) (2023-10-12)
+
+
+### ⚡ Performance Improvements | 性能优化
+
+* ⚡ Segmented 分段器组件兼容支付宝小程序 ([3fd57a6](https://github.com/Moonofweisheng/wot-design-uni/commit/3fd57a600b537b945a8224bb97344baa9b0929e0))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  调整文档中图片的CDN地址 ([f704568](https://github.com/Moonofweisheng/wot-design-uni/commit/f704568f0299acbd3cc2d88934bfa1641b6cc792))
+* ✏️  修复文档中根节点错写为根结点的问题 ([6da4145](https://github.com/Moonofweisheng/wot-design-uni/commit/6da414503ceb8b6de680b10332af45dbbbe7229d))
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Tabbar 标签栏组件 ([aa0bf19](https://github.com/Moonofweisheng/wot-design-uni/commit/aa0bf194865e381af41f7afa18e46105e0c812a9))
+* ✨ Icon 组件新增图标并支持第三方iconfont ([bc241ac](https://github.com/Moonofweisheng/wot-design-uni/commit/bc241acfc103309f196f4c04e08288526a056073))
+
+### [0.1.26](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.25...v0.1.26) (2023-10-10)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Slider 滑块组件双向滑动时右边滑块百分比计算错误的问题 ([92db0f2](https://github.com/Moonofweisheng/wot-design-uni/commit/92db0f2c7fb60b04e1562c55f6296b1b2b456144))
+
+### [0.1.25](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.24...v0.1.25) (2023-10-10)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Silder 滑块组件双向滑动时自定义最大值小于100无法滚动到最大值的问题 ([a70afa4](https://github.com/Moonofweisheng/wot-design-uni/commit/a70afa43239bc233ee0250e26227dbacd5c7021b)), closes [#69](https://github.com/Moonofweisheng/wot-design-uni/issues/69)
+
+### [0.1.24](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.23...v0.1.24) (2023-10-10)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 优化 Badge 徽标组件超出max的显示并修复分段器组件错误依赖的问题 ([a48adc8](https://github.com/Moonofweisheng/wot-design-uni/commit/a48adc8395ab167bb88a7a647420b467d7e4c46d))
+
+### [0.1.23](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.22...v0.1.23) (2023-09-28)
+
+
+### ✨ Features | 新功能
+
+* ✨ 增加 segmented 分段器组件 ([00f52c8](https://github.com/Moonofweisheng/wot-design-uni/commit/00f52c89e0aebc86f70aa8a7391ce1f17412333d))
+
+### [0.1.22](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.21...v0.1.22) (2023-09-25)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Swiper 轮播图组件 ([cf9fe98](https://github.com/Moonofweisheng/wot-design-uni/commit/cf9fe9807efe863e786bc56eedf506647ac143d2))
+
+### [0.1.21](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.20...v0.1.21) (2023-09-22)
+
+### [0.1.20](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.19...v0.1.20) (2023-09-20)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  恢复展示 Circle 组件的演示Demo ([c2cba05](https://github.com/Moonofweisheng/wot-design-uni/commit/c2cba056578593172998f03592652ab63ed23aef))
+* ✏️  文档演示项目 Circle 页面文件调整为大写 ([fff8de8](https://github.com/Moonofweisheng/wot-design-uni/commit/fff8de8f8d5f829c5b054d863905a7bb116f45f4))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Circle 组件重复创建canvas导致警告的问题 ([6917201](https://github.com/Moonofweisheng/wot-design-uni/commit/69172016ba840458dd40755050929a8231fd4cd5))
+* 🐛 修复 Skeleton 骨架屏组件编译到APP端异常的问题([#52](https://github.com/Moonofweisheng/wot-design-uni/issues/52)) ([7a9a31b](https://github.com/Moonofweisheng/wot-design-uni/commit/7a9a31bd5db76419408a114fbed02c108b972049))
+* 🐛 修复 Tag 组件编译到微信小程序平台样式错误的问题([#53](https://github.com/Moonofweisheng/wot-design-uni/issues/53)) ([6aec241](https://github.com/Moonofweisheng/wot-design-uni/commit/6aec2414a384c68e7b4b09f57d028173be942f7b))
+
+### [0.1.19](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.18...v0.1.19) (2023-09-20)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Cell、Grid 组件跳转方法在编译到H5端失效的问题([#49](https://github.com/Moonofweisheng/wot-design-uni/issues/49)) ([51425b1](https://github.com/Moonofweisheng/wot-design-uni/commit/51425b107a8b262bf9c1f0c7ee41bb8d56a12837))
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 Circle 环形进度条组件，支持进度渐变动画 ([7c38a6f](https://github.com/Moonofweisheng/wot-design-uni/commit/7c38a6f03e76d91d82a80d2a4cdd875acfb7290b))
+
+### [0.1.18](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.17...v0.1.18) (2023-09-19)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  README中增加展示 star-history ([e7cd794](https://github.com/Moonofweisheng/wot-design-uni/commit/e7cd794201435ae8109b562daf70def74ab4ac98))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 PickerView 组件选中框被遮盖的问题([#46](https://github.com/Moonofweisheng/wot-design-uni/issues/46)) ([a60440b](https://github.com/Moonofweisheng/wot-design-uni/commit/a60440b8c52723e4c194b103e9b1b236a7cb29fe))
+
+### [0.1.17](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.16...v0.1.17) (2023-09-19)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复 Slider 滑块组件最大值和最小值不生效的问题([#43](https://github.com/Moonofweisheng/wot-design-uni/issues/43)) ([0fa7f46](https://github.com/Moonofweisheng/wot-design-uni/commit/0fa7f46718e918007491a3d9494292a003924243))
+
+### [0.1.16](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.15...v0.1.16) (2023-09-18)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增 WaterMark 水印组件 ([70d8c25](https://github.com/Moonofweisheng/wot-design-uni/commit/70d8c2546135fce1709edb0e1ba0c3b66c1e9e2e))
+
+### [0.1.15](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.14...v0.1.15) (2023-09-18)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  优化DateTimePicker组件关于time类型选择器绑定值格式的介绍 ([9e958c7](https://github.com/Moonofweisheng/wot-design-uni/commit/9e958c73f1d09ee0e02097e3ca8eeabfcc1bc59b))
+
+### [0.1.14](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.13...v0.1.14) (2023-09-14)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  增加QQ群沟通渠道 ([80efad9](https://github.com/Moonofweisheng/wot-design-uni/commit/80efad950613d65e7e65d305ad6efe7cd0e201d8))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复SelectPicker 单复选选择器单选可搜索状态搜索报错的问题([#38](https://github.com/Moonofweisheng/wot-design-uni/issues/38)) ([01cf01d](https://github.com/Moonofweisheng/wot-design-uni/commit/01cf01d46fbc4ac35f0c09e3db6f6d18b2d3455e))
+
+### [0.1.13](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.12...v0.1.13) (2023-09-12)
+
+
+### ✨ Features | 新功能
+
+* ✨ Tabs组件增加animated属性支持切换动画 ([2572ea4](https://github.com/Moonofweisheng/wot-design-uni/commit/2572ea4c31f834bb9c8776322c24148ca2bda4e2))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Popover组件content属性必填警告的问题 ([4d8f8e6](https://github.com/Moonofweisheng/wot-design-uni/commit/4d8f8e640742b0588b91b0a5b82a062b976f8306))
+
+### [0.1.12](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.11...v0.1.12) (2023-09-12)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  修复文档中定制主题和反馈组件404的问题 ([c0302ad](https://github.com/Moonofweisheng/wot-design-uni/commit/c0302ada89ea15039ef516f4a425b5e18512c2d5))
+* ✏️  修复Button组件文档中loading属性重复的问题 ([b26da5a](https://github.com/Moonofweisheng/wot-design-uni/commit/b26da5aba7d698adc75c3e1d143660a698ce5de8))
+
+### [0.1.11](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.10...v0.1.11) (2023-09-08)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复文档中部分页面存在死链问题 ([b3e5cbe](https://github.com/Moonofweisheng/wot-design-uni/commit/b3e5cbef1116d9a356f7c9c18dffc1caec20ea22))
+
+### [0.1.10](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.9...v0.1.10) (2023-09-08)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  将驼峰命名的文档文件改为短横线命名便于爬虫爬取及搜索 ([497e991](https://github.com/Moonofweisheng/wot-design-uni/commit/497e991903559c9d62dcb1b00842ee377d70b445))
+* ✏️  优化icon组件文档的体验，支持点击图标复制使用示例 ([ce0526b](https://github.com/Moonofweisheng/wot-design-uni/commit/ce0526b99dcd203d3f1081a8fd6a0551da88b9b8))
+
+### [0.1.9](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.8...v0.1.9) (2023-09-08)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复npm包未配置主入口导致在使用Hbx创建的项目中通过npm安装编译警告的问题 ([fa95a0d](https://github.com/Moonofweisheng/wot-design-uni/commit/fa95a0d19b6e13157154405ddaa2525545bd9f7e))
+
+### [0.1.8](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.7...v0.1.8) (2023-09-07)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复ActionSheet等组件在H5端隐藏导航栏或在tabbar页面高度计算错误的问题 ([39201cb](https://github.com/Moonofweisheng/wot-design-uni/commit/39201cbeddde1c7ea883ad331c0607bced755475))
+* 🐛 修复pmpm安装时ts导入类型信息在H5平台报错的问题 ([237c03c](https://github.com/Moonofweisheng/wot-design-uni/commit/237c03c6ae8d041c565ca6bb984765be4418f9e1))
+
+### [0.1.7](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.6...v0.1.7) (2023-09-06)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复tabs组件change事件执行两次的问题 ([819059a](https://github.com/Moonofweisheng/wot-design-uni/commit/819059abe19fcf8f9646703fcc7a472b6ae62d4e))
+
+### [0.1.6](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.5...v0.1.6) (2023-09-06)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Input组件内置变量showClear和showWordCount定义为props的问题 ([8021a35](https://github.com/Moonofweisheng/wot-design-uni/commit/8021a35ac9d05d549909531ff4f1c7325127833e))
+* 🐛 修复pnpm安装时运行到h5平台Ref导入报错的问题 ([39c68bf](https://github.com/Moonofweisheng/wot-design-uni/commit/39c68bf57720c1a12b99412c96e46b341cf536b5))
+
+### [0.1.5](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.4...v0.1.5) (2023-09-05)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  增加Stickty和Tabs组件关于H5端自定义导航栏的offset-top的处理方案 ([8a03c4d](https://github.com/Moonofweisheng/wot-design-uni/commit/8a03c4da64296e88a7b3aff5efed4ac04cd039b6))
+
+### [0.1.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.3...v0.1.4) (2023-09-05)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复CollapseItem组件在微信小程序中展开/收起时指向图标未跟随转动的问题 ([7d0eeae](https://github.com/Moonofweisheng/wot-design-uni/commit/7d0eeae92f2f7b7664a23f7d548187ed8075d5b0))
+
+### [0.1.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.2...v0.1.3) (2023-09-03)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复通过npm安装时配置自动导入Notify、Toast、Message组件无法打开的问题 ([f45b739](https://github.com/Moonofweisheng/wot-design-uni/commit/f45b73907227c25d9c2fd7b7f0018cc2ab5c47d1))
+
+### [0.1.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.1...v0.1.2) (2023-09-03)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复部分js引入路径问题 ([67cdfae](https://github.com/Moonofweisheng/wot-design-uni/commit/67cdfaebf9478e286758b2ef851e1a44dc8565a6))
+
+### [0.1.1](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.1.0...v0.1.1) (2023-09-02)
+
+## [0.1.0](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.14...v0.1.0) (2023-09-02)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  ConfigProvider组件演示页面增加手动切换暗黑模式 ([e5f55c7](https://github.com/Moonofweisheng/wot-design-uni/commit/e5f55c72fc1ed6e603f22e501d6cff9d8212a976))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Grid组件不展示border的问题 ([819bbbc](https://github.com/Moonofweisheng/wot-design-uni/commit/819bbbca6ab1c999096936da5e9d2dd664e480ce))
+* 🐛 修复MessageBox组件取消按钮不展示的问题 ([d8563d8](https://github.com/Moonofweisheng/wot-design-uni/commit/d8563d833d75b27d0c497c6c945fae8c00ef8dc7))
+
+### [0.0.14](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.13...v0.0.14) (2023-09-02)
+
+
+### ✨ Features | 新功能
+
+* ✨ 优化缺省状态组件StautsTip，增加支持自定义url和图片大小 ([f463d32](https://github.com/Moonofweisheng/wot-design-uni/commit/f463d3258a954e64352df36004d34b0f12be9a8f))
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复util中addUnit无法处理有单位的字符串的问题 ([8967540](https://github.com/Moonofweisheng/wot-design-uni/commit/8967540ad0f3f0ad7426ee79571cfc4dee6c4d0c))
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  完善和修复文档中不详细不正确的内容 ([d1b118e](https://github.com/Moonofweisheng/wot-design-uni/commit/d1b118ea78a797499f465269d3a838c0770d993a))
+
+### [0.0.13](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.12...v0.0.13) (2023-09-01)
+
+
+### ✏️ Documentation | 文档
+
+* ✏️  官网地址迁移至阿里云oss ([a98868a](https://github.com/Moonofweisheng/wot-design-uni/commit/a98868ae6213c7d7002e5a88893aabe1d0f5d11b))
+
+### [0.0.12](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.11...v0.0.12) (2023-08-30)
+
+### [0.0.11](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.10...v0.0.11) (2023-08-30)
+
+
+### ✨ Features | 新功能
+
+* ✨ util工具类提供更好的类型提示 ([4fed439](https://github.com/Moonofweisheng/wot-design-uni/commit/4fed43926f49be6a86ebab54bb36a1a086df4ac6))
+
+### [0.0.10](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.9...v0.0.10) (2023-08-27)
+
+
+### ✨ Features | 新功能
+
+* ✨ 新增Notify组件、演示demo、文档 ([#9](https://github.com/Moonofweisheng/wot-design-uni/issues/9)) ([996fc39](https://github.com/Moonofweisheng/wot-design-uni/commit/996fc39d708699214faf2e54224b8d38a8a706f7))
+* ✨ 新增Skeleton组件、演示demo、文档 ([#12](https://github.com/Moonofweisheng/wot-design-uni/issues/12)) ([a49e22c](https://github.com/Moonofweisheng/wot-design-uni/commit/a49e22c370163ec3c93bbeb360cc89b3b3c0abc0))
+
+### [0.0.9](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.8...v0.0.9) (2023-08-25)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复Cell 单格组件 is-link 不触发 click ([ece5568](https://github.com/Moonofweisheng/wot-design-uni/commit/ece5568ecc03fd8470c2c02120b94c1ee27d55e7))
+
+### [0.0.8](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.7...v0.0.8) (2023-08-24)
+
+
+### ✨ Features | 新功能
+
+* ✨ 演示项目新增用户隐私保护指引的处理 ([4dd7efe](https://github.com/Moonofweisheng/wot-design-uni/commit/4dd7efe4049c4c815ea1bc57a7fd1819055f10bc))
+* ✨ ActionSheet组件调整为使用v-model设置显示与隐藏 ([aa92332](https://github.com/Moonofweisheng/wot-design-uni/commit/aa92332f3913be000d1aef36a8aed7f34b736ad6))
+
+### [0.0.7](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.6...v0.0.7) (2023-08-23)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复部分组件某些属性必填警告的问题 ([1b866c0](https://github.com/Moonofweisheng/wot-design-uni/commit/1b866c062eb7a4ab894d5b2ecd7b7b3fd50ef864))
+
+### [0.0.6](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.5...v0.0.6) (2023-08-22)
+
+### [0.0.5](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.4...v0.0.5) (2023-08-22)
+
+### [0.0.4](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.3...v0.0.4) (2023-08-21)
+
+
+### ✨ Features | 新功能
+
+* ✨ Picker组件优化性能 ([24dd43f](https://github.com/Moonofweisheng/wot-design-uni/commit/24dd43f3a05b7b4ce6bb897219a215f8198e64ac))
+
+### [0.0.3](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.2...v0.0.3) (2023-08-18)
+
+### [0.0.2](https://github.com/Moonofweisheng/wot-design-uni/compare/v0.0.1...v0.0.2) (2023-08-18)
+
+
+### 🐛 Bug Fixes | Bug 修复
+
+* 🐛 修复CheckBoxGroup组件的disabled属性作用在子组件上失效的问题 ([1bab820](https://github.com/Moonofweisheng/wot-design-uni/commit/1bab820c0335c89e099c597caa47af16bb998d83))
+
+### 0.0.1 (2023-08-16)
+
+
+### ✨ Features | 新功能
+
+* ✨ 适配暗黑模式 ([f5946a4](https://github.com/Moonofweisheng/wot-design-uni/commit/f5946a4b7134fed161bc123d66485e7bc91cdc68))
+* ✨ 新增 50+ 组件
diff --git a/src/uni_modules/wot-design-uni/components/common/AbortablePromise.ts b/src/uni_modules/wot-design-uni/components/common/AbortablePromise.ts
new file mode 100644
index 0000000..efe5167
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/AbortablePromise.ts
@@ -0,0 +1,28 @@
+export class AbortablePromise<T> {
+  promise: Promise<T>
+  private _reject: ((res?: any) => void) | null = null
+
+  constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
+    this.promise = new Promise<T>((resolve, reject) => {
+      executor(resolve, reject)
+      this._reject = reject // 保存reject方法的引用，以便在abort时调用
+    })
+  }
+  // 提供abort方法来中止Promise
+  abort(error?: any) {
+    if (this._reject) {
+      this._reject(error) // 调用reject方法来中止Promise
+    }
+  }
+
+  then<TResult1 = T, TResult2 = never>(
+    onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
+    onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null
+  ): Promise<TResult1 | TResult2> {
+    return this.promise.then(onfulfilled, onrejected)
+  }
+
+  catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null): Promise<T | TResult> {
+    return this.promise.catch(onrejected)
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/_config.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/_config.scss
new file mode 100644
index 0000000..fe65cb4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/_config.scss
@@ -0,0 +1,7 @@
+/**
+ * SCSS 配置项：命名空间以及BEM
+ */
+$namespace: 'wd';
+$elementSeparator: '__';
+$modifierSeparator: '--';
+$state-prefix: 'is-';
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/_function.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/_function.scss
new file mode 100644
index 0000000..24c0ca0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/_function.scss
@@ -0,0 +1,89 @@
+/**
+ * 辅助函数
+ */
+@import 'config';
+$default-theme: #4d80f0 !default; // 正常色
+
+/* 转换成字符串 */
+@function selectorToString($selector) {
+  $selector: inspect($selector);
+  $selector: str-slice($selector, 2, -2);
+
+  @return $selector;
+}
+
+/* 判断是否存在 Modifier */
+@function containsModifier($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, $modifierSeparator) {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+/* 判断是否存在伪类 */
+@function containsPseudo($selector) {
+  $selector: selectorToString($selector);
+
+  @if str-index($selector, ':') {
+    @return true;
+  }
+
+  @else {
+    @return false;
+  }
+}
+
+
+/**
+ * 主题色切换
+ * @params $theme-color 主题色
+ * @params $type 变暗’dark‘ 变亮 'light'
+ * @params $mix-color 自己设置的混色
+ */
+@function themeColor($theme-color, $type: "", $mix-color: "") {
+  @if $default-theme !=#4d80f0 {
+    @if $type=="dark" {
+      @return darken($theme-color, 10%);
+    }
+
+    @else if $type=="light" {
+      @return lighten($theme-color, 10%);
+    }
+
+    @else {
+      @return $theme-color;
+    }
+  }
+
+  @else {
+    @return $mix-color;
+  }
+}
+
+/**
+ * 颜色结果切换， 如果开启线性渐变色 使用渐变色，如果没有开启，那么使用主题色
+ * @params $open-linear 是否开启线性渐变色
+ * @params $deg 渐变色角度
+ * @params $theme-color 当前配色
+ * @params [Array] $set 主题色明暗设置，与 $color-list 数量对应
+ * @params [Array] $color-list 渐变色顺序， $color-list 和 $per-list 数量相同
+ * @params [Array] $per-list 渐变色比例
+ */
+@function resultColor($deg, $theme-color, $set, $color-list, $per-list) {
+  // 开启渐变
+
+  $len: length($color-list);
+  $arg: $deg;
+
+  @for $i from 1 through $len {
+    $arg: $arg + ","+ themeColor($theme-color, nth($set, $i), nth($color-list, $i)) + " "+ nth($per-list, $i);
+  }
+
+  @return linear-gradient(unquote($arg));
+
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss
new file mode 100644
index 0000000..3d1cd94
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/_mixin.scss
@@ -0,0 +1,385 @@
+/**
+ * 混合宏
+ */
+@import "config";
+@import "function";
+
+/**
+  * BEM，定义块（b)
+  */
+@mixin b($block) {
+  $B: $namespace + "-"+ $block !global;
+
+  .#{$B} {
+    @content;
+  }
+}
+
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin e($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+
+
+/* 此方法用于生成穿透样式 */
+
+/* 定义元素（e），对于伪类，会自动将 e 嵌套在 伪类 底下 */
+@mixin edeep($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if containsPseudo($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        :deep() {
+          #{$selectors} {
+            @content;
+          }
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      :deep() {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+}
+
+
+/* 定义状态（m） */
+@mixin m($modifier...) {
+  $selectors: "";
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + $modifierSeparator + $item + ","};
+  }
+
+  @at-root {
+    #{$selectors} {
+      @content;
+    }
+  }
+}
+
+/* 定义状态（m） */
+@mixin mdeep($modifier...) {
+  $selectors: "";
+
+  @each $item in $modifier {
+    $selectors: #{$selectors + & + $modifierSeparator + $item + ","};
+  }
+
+  @at-root {
+    :deep() {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+/* 对于需要需要嵌套在 m 底下的 e，调用这个混合宏，一般在切换整个组件的状态，如切换颜色的时候 */
+@mixin me($element...) {
+  $selector: &;
+  $selectors: "";
+
+  @if containsModifier($selector) {
+    @each $item in $element {
+      $selectors: #{$selectors + "." + $B + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selector} {
+        #{$selectors} {
+          @content;
+        }
+      }
+    }
+  }
+
+  @else {
+    @each $item in $element {
+      $selectors: #{$selectors + $selector + $elementSeparator + $item + ","};
+    }
+
+    @at-root {
+      #{$selectors} {
+        @content;
+      }
+    }
+  }
+}
+
+/* 状态，生成 is-$state 类名 */
+@mixin when($states...) {
+  @at-root {
+    @each $state in $states {
+      &.#{$state-prefix + $state} {
+        @content;
+      }
+    }
+  }
+}
+
+/**
+  * 常用混合宏
+  */
+
+/* 单行超出隐藏 */
+@mixin lineEllipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* 多行超出隐藏 */
+@mixin multiEllipsis($lineNumber: 3) {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: $lineNumber;
+  overflow: hidden;
+}
+
+/* 清除浮动 */
+@mixin clearFloat {
+  &::after {
+    display: block;
+    content: "";
+    height: 0;
+    clear: both;
+    overflow: hidden;
+    visibility: hidden;
+  }
+}
+
+/* 0.5px 边框 指定方向*/
+@mixin halfPixelBorder($direction: "bottom", $left: 0, $color: $-color-border-light) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    display: block;
+    content: "";
+
+    @if ($left==0) {
+      width: 100%;
+    }
+
+    @else {
+      width: calc(100% - #{$left});
+    }
+
+    height: 1px;
+    left: $left;
+
+    @if ($direction=="bottom") {
+      bottom: 0;
+    }
+
+    @else {
+      top: 0;
+    }
+
+    transform: scaleY(0.5);
+    background: $color;
+  }
+}
+
+
+/* 0.5px 边框 环绕 */
+@mixin halfPixelBorderSurround($color: $-color-border-light) {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    display: block;
+    content: ' ';
+    pointer-events: none;
+    width: 200%;
+    height: 200%;
+    left: 0;
+    top: 0;
+    border: 1px solid $color;
+    transform: scale(0.5);
+    box-sizing: border-box;
+    transform-origin: left top;
+  }
+}
+
+@mixin buttonClear {
+  outline: none;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: transparent;
+  background: transparent;
+}
+
+/**
+  * 三角形实现尖角样式，适用于背景透明情况
+  * @param $size 三角形高，底边为 $size * 2
+  * @param $bg 三角形背景颜色
+  */
+@mixin triangleArrow($size, $bg) {
+  @include e(arrow) {
+    position: absolute;
+    width: 0;
+    height: 0;
+  }
+
+  @include e(arrow-down) {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-top: $size solid $bg;
+    transform: translateX(-50%);
+    bottom: calc(-1 * $size)
+  }
+
+  @include e(arrow-up) {
+    border-left: $size solid transparent;
+    border-right: $size solid transparent;
+    border-bottom: $size solid $bg;
+    transform: translateX(-50%);
+    top: calc(-1 * $size)
+  }
+
+  @include e(arrow-left) {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-right: $size solid $bg;
+    transform: translateY(-50%);
+    left: calc(-1 * $size)
+  }
+
+  @include e(arrow-right) {
+    border-top: $size solid transparent;
+    border-bottom: $size solid transparent;
+    border-left: $size solid $bg;
+    transform: translateY(-50%);
+    right: calc(-1 * $size)
+  }
+}
+
+/**
+  * 正方形实现尖角样式，适用于背景不透明情况
+  * @param $size 正方形边长
+  * @param $bg 正方形背景颜色
+  * @param $z-index z-index属性值，不得大于外部包裹器
+  * @param $box-shadow 阴影
+*/
+@mixin squareArrow($size, $bg, $z-index, $box-shadow) {
+  @include e(arrow) {
+    position: absolute;
+    width: $size;
+    height: $size;
+    z-index: $z-index;
+  }
+
+  @include e(arrow-down) {
+    transform: translateX(-50%);
+    bottom: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      bottom: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-up) {
+    transform: translateX(-50%);
+    top: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: 0;
+      top: calc(-1 * $size / 2);
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-left) {
+    transform: translateY(-50%);
+    left: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      left: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+
+  @include e(arrow-right) {
+    transform: translateY(-50%);
+    right: 0;
+
+    &:after {
+      content: "";
+      width: $size;
+      height: $size;
+      background-color: $bg;
+      position: absolute;
+      right: calc(-1 * $size / 2);
+      top: 0;
+      transform: rotateZ(45deg);
+      box-shadow: $box-shadow;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
new file mode 100644
index 0000000..2e98cd4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/abstracts/variable.scss
@@ -0,0 +1,968 @@
+@import './function';
+
+/**
+ * UI规范基础变量
+ */
+/*----------------------------------------- Theme color. start ----------------------------------------*/
+/* 主题颜色 */
+$-color-theme: var(--wot-color-theme, $default-theme) !default; // 主题色
+$-color-white: var(--wot-color-white, rgb(255, 255, 255)) !default; // 用于mix的白色
+$-color-black: var(--wot-color-black, rgb(0, 0, 0)) !default; // 用于mix的黑色
+
+/* 辅助色 */
+$-color-success: var(--wot-color-success, #34d19d) !default; // 成功色
+$-color-warning: var(--wot-color-warning, #f0883a) !default; // 警告色
+$-color-danger: var(--wot-color-danger, #fa4350) !default; // 危险出错色
+$-color-purple: var(--wot-color-purple, #8268de) !default; // 紫色
+$-color-yellow: var(--wot-color-yellow, #f0cd1d) !default; // 黄色
+$-color-blue: var(--wot-color-blue, #2bb3ed) !default; // 蓝色
+$-color-info: var(--wot-color-info, #909399) !default;
+
+$-color-gray-1: var(--wot-color-gray-1, #f7f8fa) !default;
+$-color-gray-2: var(--wot-color-gray-2, #f2f3f5) !default;
+$-color-gray-3: var(--wot-color-gray-3, #ebedf0) !default;
+$-color-gray-4: var(--wot-color-gray-4, #dcdee0) !default;
+$-color-gray-5: var(--wot-color-gray-5, #c8c9cc) !default;
+$-color-gray-6: var(--wot-color-gray-6, #969799) !default;
+$-color-gray-7: var(--wot-color-gray-7, #646566) !default;
+$-color-gray-8: var(--wot-color-gray-8, #323233) !default;
+
+$-font-gray-1: var(--wot-font-gray-1, rgba(0, 0, 0, 0.9));
+$-font-gray-2: var(--wot-font-gray-2, rgba(0, 0, 0, 0.6));
+$-font-gray-3: var(--wot-font-gray-3, rgba(0, 0, 0, 0.4));
+$-font-gray-4: var(--wot-font-gray-4, rgba(0, 0, 0, 0.26));
+
+$-font-white-1: var(--wot-font-white-1, rgba(255, 255, 255, 1));
+$-font-white-2: var(--wot-font-white-2, rgba(255, 255, 255, 0.55));
+$-font-white-3: var(--wot-font-white-3, rgba(255, 255, 255, 0.35));
+$-font-white-4: var(--wot-font-white-4, rgba(255, 255, 255, 0.22));
+
+/* 文字颜色（默认浅色背景下 */
+$-color-title: var(--wot-color-title, $-color-black) !default; // 模块标题/重要正文 000
+$-color-content: var(--wot-color-content, #262626) !default; // 普通正文 262626
+$-color-secondary: var(--wot-color-secondary, #595959) !default; // 次要信息，注释/补充/正文 595959
+$-color-aid: var(--wot-color-aid, #8c8c8c) !default; // 辅助文字字号，弱化信息，引导性/不可点文字 8c8c8c
+$-color-tip: var(--wot-color-tip, #bfbfbf) !default; // 失效、默认提示文字 bfbfbf
+$-color-border: var(--wot-color-border, #d9d9d9) !default; // 控件边框线 d9d9d9
+$-color-border-light: var(--wot-color-border-light, #e8e8e8) !default; // 分割线颜色 e8e8e8
+$-color-bg: var(--wot-color-bg, #f5f5f5) !default; // 背景色、禁用填充色 f5f5f5
+
+/* 暗黑模式 */
+$-dark-background: var(--wot-dark-background, #131313) !default;
+$-dark-background2: var(--wot-dark-background2, #1b1b1b) !default;
+$-dark-background3: var(--wot-dark-background3, #141414) !default;
+$-dark-background4: var(--wot-dark-background4, #323233) !default;
+$-dark-background5: var(--wot-dark-background5, #646566) !default;
+$-dark-background6: var(--wot-dark-background6, #380e08) !default;
+$-dark-background7: var(--wot-dark-background7, #707070) !default;
+$-dark-color: var(--wot-dark-color, $-color-white) !default;
+$-dark-color2: var(--wot-dark-color2, #f2270c) !default;
+$-dark-color3: var(--wot-dark-color3, rgba(232, 230, 227, 0.8)) !default;
+$-dark-color-gray: var(--wot-dark-color-gray, $-color-secondary) !default;
+$-dark-border-color: var(--wot-dark-border-color, #3a3a3c) !default;
+
+/* 图形颜色 */
+$-color-icon: var(--wot-color-icon, #d9d9d9) !default; // icon颜色
+$-color-icon-active: var(--wot-color-icon-active, #eee) !default; // icon颜色hover
+$-color-icon-disabled: var(--wot-color-icon-disabled, #a7a7a7) !default; // icon颜色disabled
+
+/*----------------------------------------- Theme color. end -------------------------------------------*/
+
+/*-------------------------------- Theme color application size.  start --------------------------------*/
+
+/* 文字字号 */
+$-fs-big: var(--wot-fs-big, 24px) !default; // 大型标题
+$-fs-important: var(--wot-fs-important, 19px) !default; // 重要数据
+$-fs-title: var(--wot-fs-title, 16px) !default; // 标题字号/重要正文字号
+$-fs-content: var(--wot-fs-content, 14px) !default; // 普通正文
+$-fs-secondary: var(--wot-fs-secondary, 12px) !default; // 次要信息，注释/补充/正文
+$-fs-aid: var(--wot-fs-aid, 10px) !default; // 辅助文字字号，弱化信息，引导性/不可点文字
+
+/* 文字字重 */
+$-fw-medium: var(--wot-fw-medium, 500) !default; // PingFangSC-Medium
+$-fw-semibold: var(--wot-fw-semibold, 600) !default; // PingFangSC-Semibold
+
+/* 尺寸 */
+$-size-side-padding: var(--wot-size-side-padding, 15px) !default; // 屏幕两边留白
+
+/*-------------------------------- Theme color application size.  end --------------------------------*/
+
+/* component var */
+
+/* action-sheet */
+$-action-sheet-weight: var(--wot-action-sheet-weight, 500) !default; // 面板字重
+$-action-sheet-radius: var(--wot-action-sheet-radius, 16px) !default; // 面板圆角大小
+$-action-sheet-loading-size: var(--wot-action-sheet-loading-size, 20px) !default; // loading动画尺寸
+$-action-sheet-action-height: var(--wot-action-sheet-action-height, 48px) !default; // 单条菜单高度
+$-action-sheet-color: var(--wot-action-sheet-color, rgba(0, 0, 0, 0.85)) !default; // 选项名称颜色
+$-action-sheet-fs: var(--wot-action-sheet-fs, $-fs-title) !default; // 选项名称字号
+$-action-sheet-active-color: var(--wot-action-sheet-active-color, $-color-bg) !default; // 点击高亮颜色
+$-action-sheet-subname-fs: var(--wot-action-sheet-subname-fs, $-fs-secondary) !default; // 描述信息字号
+$-action-sheet-subname-color: var(--wot-action-sheet-subname-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息颜色
+$-action-sheet-disabled-color: var(--wot-action-sheet-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色
+$-action-sheet-bg: var(--wot-action-sheet-bg, $-color-white) !default; // 菜单容器颜色（取消按钮上方的颜色）
+$-action-sheet-title-height: var(--wot-action-sheet-title-height, 64px) !default; // 标题高度
+$-action-sheet-title-fs: var(--wot-action-sheet-title-fs, $-fs-title) !default; // 标题字号
+$-action-sheet-close-fs: var(--wot-action-sheet-close-fs, $-fs-title) !default; // 关闭按钮大小
+$-action-sheet-close-color: var(--wot-action-sheet-close-color, rgba(0, 0, 0, 0.65)) !default; // 关闭按钮颜色
+$-action-sheet-close-top: var(--wot-action-sheet-close-top, 25px) !default; // 关闭按钮距离标题顶部距离
+$-action-sheet-close-right: var(--wot-action-sheet-close-right, 15px) !default; // 关闭按钮距离标题右侧距离
+$-action-sheet-cancel-color: var(--wot-action-sheet-cancel-color, #131415) !default; // 取消按钮颜色
+$-action-sheet-cancel-height: var(--wot-action-sheet-cancel-height, 44px) !default; // 取消按钮高度
+$-action-sheet-cancel-bg: var(--wot-action-sheet-cancel-bg, rgba(240, 240, 240, 1)) !default; // 取消按钮背景色
+$-action-sheet-cancel-radius: var(--wot-action-sheet-cancel-radius, 22px) !default; // 取消按钮圆角大小
+$-action-sheet-panel-padding: var(--wot-action-sheet-panel-padding, 12px 0 11px) !default; // 自定义面板内边距大小
+$-action-sheet-panel-img-fs: var(--wot-action-sheet-panel-img-fs, 40px) !default; // 自定义面板图片大小
+$-action-sheet-panel-img-radius: var(--wot-action-sheet-panel-img-radius, 4px) !default; // 自定义面板图片圆角大小
+
+/* badge */
+$-badge-bg: var(--wot-badge-bg, $-color-danger) !default; // 背景填充颜色
+$-badge-color: var(--wot-badge-color, #fff) !default; // 文字颜色
+$-badge-fs: var(--wot-badge-fs, 12px) !default; // 文字字号
+$-badge-padding: var(--wot-badge-padding, 0 5px) !default; // padding
+$-badge-height: var(--wot-badge-height, 16px) !default; // 高度
+$-badge-primary: var(--wot-badge-primary, $-color-theme) !default;
+$-badge-success: var(--wot-badge-success, $-color-success) !default;
+$-badge-warning: var(--wot-badge-warning, $-color-warning) !default;
+$-badge-danger: var(--wot-badge-danger, $-color-danger) !default;
+$-badge-info: var(--wot-badge-info, $-color-info) !default;
+$-badge-dot-size: var(--wot-badge-dot-size, 6px) !default; // dot 类型大小
+$-badge-border: var(--wot-badge-border, 2px solid $-badge-color) !default; // 边框样式
+
+/* button */
+$-button-disabled-opacity: var(--wot-button-disabled-opacity, 0.6) !default; // button禁用透明度
+$-button-small-height: var(--wot-button-small-height, 28px) !default; // 小型按钮高度
+$-button-small-padding: var(--wot-button-small-padding, 0 12px) !default; // 小型按钮padding
+$-button-small-fs: var(--wot-button-small-fs, $-fs-secondary) !default; // 小型按钮字号
+$-button-small-radius: var(--wot-button-small-radius, 2px) !default; // 小型按钮圆角大小
+$-button-small-loading: var(--wot-button-small-loading, 14px) !default; // 小型按钮loading图标大小
+$-button-medium-height: var(--wot-button-medium-height, 36px) !default; // 中型按钮高度
+$-button-medium-padding: var(--wot-button-medium-padding, 0 16px) !default; // 中型按钮padding
+$-button-medium-fs: var(--wot-button-medium-fs, $-fs-content) !default; // 中型按钮字号
+$-button-medium-radius: var(--wot-button-medium-radius, 4px) !default; // 中型按钮圆角大小
+$-button-medium-loading: var(--wot-button-medium-loading, 18px) !default; // 中型按钮loading图标大小
+$-button-medium-box-shadow-size: var(--wot-button-medium-box-shadow-size, 0px 2px 4px 0px) !default; // 中尺寸阴影尺寸
+$-button-large-height: var(--wot-button-large-height, 44px) !default; // 大型按钮高度
+$-button-large-padding: var(--wot-button-large-padding, 0 36px) !default; // 大型按钮padding
+$-button-large-fs: var(--wot-button-large-fs, $-fs-title) !default; // 大型按钮字号
+$-button-large-radius: var(--wot-button-large-radius, 8px) !default; // 大型按钮圆角大小
+$-button-large-loading: var(--wot-button-large-loading, 24px) !default; // 大小按钮loading图标大小
+$-button-large-box-shadow-size: var(--wot-button-large-box-shadow-size, 0px 4px 8px 0px) !default; // 大尺寸阴影尺寸
+$-button-icon-fs: var(--wot-button-icon-fs, 1.18em) !default; // 带图标的按钮的图标大小
+$-button-icon-size: var(--wot-button-icon-size, 40px) !default; // icon 类型按钮尺寸
+$-button-icon-color: var(--wot-button-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon 类型按钮颜色
+$-button-icon-disabled-color: var(--wot-button-icon-disabled-color, $-color-icon-disabled) !default; // icon 类型按钮禁用颜色
+$-button-normal-color: var(--wot-button-normal-color, $-color-title) !default; // 文字颜色
+$-button-normal-disabled-color: var(--wot-button-normal-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 默认按钮禁用文字色
+$-button-plain-bg-color: var(--wot-button-plain-bg-color, $-color-white) !default; // 幽灵按钮背景色
+$-button-primary-color: var(--wot-button-primary-color, $-color-white) !default; // 主要按钮颜色
+$-button-primary-bg-color: var(--wot-button-primary-bg-color, $-color-theme) !default; // 主要按钮背景颜色
+$-button-success-color: var(--wot-button-success-color, $-color-white) !default; // 成功按钮文字颜色
+$-button-success-bg-color: var(--wot-button-success-bg-color, $-color-success) !default; // 成功按钮颜色
+$-button-info-color: var(--wot-button-info-color, $-color-title) !default; // 信息按钮颜色
+$-button-info-bg-color: var(--wot-button-info-bg-color, #f0f0f0) !default; // 信息按钮背景颜色
+$-button-info-plain-border-color: var(--wot-button-info-plain-border-color, rgba(0, 0, 0, 0.45)) !default; // 信息按钮禁用颜色
+$-button-info-plain-normal-color: var(--wot-button-info-plain-normal-color, rgba(0, 0, 0, 0.85)) !default; // 信息幽灵按钮默认颜色
+$-button-warning-color: var(--wot-button-warning-color, $-color-white) !default; // 警告按钮字体颜色
+$-button-warning-bg-color: var(--wot-button-warning-bg-color, $-color-warning) !default; // 警告按钮背景颜色
+$-button-error-color: var(--wot-button-error-color, $-color-white) !default; // 错误按钮颜色
+$-button-error-bg-color: var(--wot-button-error-bg-color, $-color-danger) !default; // 错误按钮背景颜色
+$-button-text-hover-opacity: var(--wot-button-text-hover-opacity, 0.7) !default; // 文字button激活时透明度
+
+/* cell */
+$-cell-padding: var(--wot-cell-padding, $-size-side-padding) !default; // cell 左右padding距离
+$-cell-line-height: var(--wot-cell-line-height, 24px) !default; // 行高
+
+$-cell-group-title-fs: var(--wot-cell-group-title-fs, $-fs-title) !default; // 组标题字号
+$-cell-group-padding: var(--wot-cell-group-padding, 13px $-cell-padding) !default; // 组padding
+$-cell-group-title-color: var(--wot-cell-group-title-color, rgba(0, 0, 0, 0.85)) !default; // 组标题文字颜色
+$-cell-group-value-fs: var(--wot-cell-group-value-fs, $-fs-content) !default; // 组值字号
+$-cell-group-value-color: var(--wot-cell-group-value-color, $-color-content) !default; // 组值文字颜色
+
+$-cell-wrapper-padding: var(--wot-cell-wrapper-padding, 10px) !default; // cell 容器padding
+$-cell-wrapper-padding-large: var(--wot-cell-wrapper-padding-large, 12px) !default; // large类型cell容器padding
+
+$-cell-wrapper-padding-with-label: var(--wot-cell-wrapper-padding-with-label, 16px) !default; // cell 容器上下padding（有label情况下）
+$-cell-icon-right: var(--wot-cell-icon-right, 4px) !default; // 图标距离右边缘
+$-cell-icon-size: var(--wot-cell-icon-size, 16px) !default; // 图标大小
+$-cell-title-fs: var(--wot-cell-title-fs, 14px) !default; // 标题字号
+$-cell-title-color: var(--wot-cell-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
+$-cell-label-fs: var(--wot-cell-label-fs, 12px) !default; // 描述信息字号
+$-cell-label-color: var(--wot-cell-label-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息文字颜色
+$-cell-value-fs: var(--wot-cell-value-fs, 14px) !default; // 右侧内容字号
+$-cell-value-color: var(--wot-cell-value-color, rgba(0, 0, 0, 0.85)) !default; // 右侧内容文字颜色
+$-cell-arrow-size: var(--wot-cell-arrow-size, 18px) !default; // 右箭头大小
+$-cell-arrow-color: var(--wot-cell-arrow-color, rgba(0, 0, 0, 0.25)) !default; // 右箭头颜色
+$-cell-clear-color: var(--wot-cell-clear-color, #585858) !default; // 清空按钮颜色
+$-cell-tap-bg: var(--wot-cell-tap-bg, rgba(0, 0, 0, 0.06)) !default; // 点击态背景色
+
+$-cell-title-fs-large: var(--wot-cell-title-fs-large, 16px) !default; // 大尺寸标题字号
+$-cell-label-fs-large: var(--wot-cell-label-fs-large, 14px) !default; // 描述信息字号
+$-cell-icon-size-large: var(--wot-cell-icon-size-large, 18px) !default; // 图标大小
+
+$-cell-required-color: var(--wot-cell-required-color, $-color-danger) !default; // 要求必填*颜色
+$-cell-required-size: var(--wot-cell-required-size, 18px) !default; // 必填*字号
+$-cell-vertical-top: var(--wot-cell-vertical-top, 16px) !default; // 表单类型-上下结构的间距
+
+/* calendar */
+$-calendar-fs: var(--wot-calendar-fs, 16px) !default;
+$-calendar-panel-padding: var(--wot-calendar-panel-padding, 0 12px) !default;
+$-calendar-panel-title-fs: var(--wot-calendar-panel-title-fs, 14px) !default;
+$-calendar-panel-title-color: var(--wot-calendar-panel-title-color, rgba(0, 0, 0, 0.85)) !default;
+$-calendar-week-color: var(--wot-calendar-week-color, rgba(0, 0, 0, 0.85)) !default;
+$-calendar-week-height: var(--wot-calendar-week-height, 36px) !default;
+$-calendar-week-fs: var(--wot-calendar-week-fs, 12px) !default;
+$-calendar-day-fs: var(--wot-calendar-day-fs, 16px) !default;
+$-calendar-day-color: var(--wot-calendar-day-color, rgba(0, 0, 0, 0.85)) !default;
+$-calendar-day-fw: var(--wot-calendar-day-fw, 500) !default;
+$-calendar-day-height: var(--wot-calendar-day-height, 64px) !default;
+$-calendar-month-width: var(--wot-calendar-month-width, 50px) !default;
+$-calendar-active-color: var(--wot-calendar-active-color, $-color-theme) !default;
+$-calendar-selected-color: var(--wot-calendar-selected-color, $-color-white) !default;
+$-calendar-disabled-color: var(--wot-calendar-disabled-color, rgba(0, 0, 0, 0.25)) !default;
+$-calendar-range-color: var(--wot-calendar-range-color, rgba(#4d80f0, 0.09)) !default;
+$-calendar-active-border: var(--wot-calendar-active-border, 8px) !default;
+$-calendar-info-fs: var(--wot-calendar-info-fs, 10px) !default;
+$-calendar-item-margin-bottom: var(--wot-calendar-item-margin-bottom, 4px) !default;
+ 
+
+/* checkbox */
+$-checkbox-margin: var(--wot-checkbox-margin, 10px) !default; // 多个复选框距离
+$-checkbox-bg: var(--wot-checkbox-bg, $-color-white) !default; // 多个复选框距离
+$-checkbox-label-margin: var(--wot-checkbox-label-margin, 9px) !default; // 右侧文字与左侧图标距离
+$-checkbox-size: var(--wot-checkbox-size, 16px) !default; // 左侧图标尺寸
+$-checkbox-icon-size: var(--wot-checkbox-icon-size, 14px) !default; // 左侧图标尺寸
+$-checkbox-border-color: var(--wot-checkbox-border-color, #dcdcdc) !default; // 左侧图标边框颜色
+$-checkbox-check-color: var(--wot-checkbox-check-color, $-color-white) !default; // 左侧图标边框颜色
+$-checkbox-label-fs: var(--wot-checkbox-label-fs, 14px) !default; // 右侧文字字号
+$-checkbox-label-color: var(--wot-checkbox-label-color, rgba(0, 0, 0, 0.85)) !default; // 右侧文字颜色
+$-checkbox-checked-color: var(--wot-checkbox-checked-color, $-color-theme) !default; // 选中颜色
+
+$-checkbox-disabled-color: var(--wot-checkbox-disabled-color, rgba(0, 0, 0, 0.04)) !default; // 禁用背景颜色
+$-checkbox-disabled-label-color: var(--wot-checkbox-disabled-label-color, rgba(0, 0, 0, 0.25)) !default; // 禁用文字颜色
+$-checkbox-disabled-check-color: var(--wot-checkbox-disabled-check-color, rgba(0, 0, 0, 0.15)) !default; // 禁用图标颜色
+$-checkbox-disabled-check-bg: var(--wot-checkbox-disabled-check-bg, rgba(0, 0, 0, 0.15)) !default; // 禁用边框背景颜色
+$-checkbox-square-radius: var(--wot-checkbox-square-radius, 4px) !default; // 方型圆角大小
+
+$-checkbox-large-size: var(--wot-checkbox-large-size, 18px) !default; // 左侧图标尺寸
+$-checkbox-large-label-fs: var(--wot-checkbox-large-label-fs, 16px) !default; // 右侧文字字号
+
+$-checkbox-button-height: var(--wot-checkbox-button-height, 32px) !default; // 按钮模式复选框高
+$-checkbox-button-min-width: var(--wot-checkbox-button-min-width, 78px) !default; // 按钮模式最小宽
+$-checkbox-button-radius: var(--wot-checkbox-button-radius, 16px) !default; // 按钮圆角大小
+$-checkbox-button-bg: var(--wot-checkbox-button-bg, rgba(0, 0, 0, 0.04)) !default; // 按钮模式背景颜色
+$-checkbox-button-font-size: var(--wot-checkbox-button-font-size, 14px) !default; // 按钮模式字号
+$-checkbox-button-border: var(--wot-checkbox-button-border, #f5f5f5) !default; // 按钮边框颜色
+$-checkbox-button-disabled-border: var(--wot-checkbox-button-disabled-border, rgba(0, 0, 0, 0.15)) !default; // 按钮禁用边框颜色
+
+/* collapse */
+$-collapse-side-padding: var(--wot-collapse-side-padding, $-size-side-padding) !default; // 左右间距
+$-collapse-body-padding: var(--wot-collapse-body-padding, 14px $-size-side-padding) !default; // body padding
+$-collapse-header-padding: var(--wot-collapse-header-padding, 13px $-size-side-padding) !default; // 头部padding
+$-collapse-title-color: var(--wot-collapse-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
+$-collapse-title-fs: var(--wot-collapse-title-fs, 16px) !default; // 标题字号
+$-collapse-arrow-size: var(--wot-collapse-arrow-size, 18px) !default; // 箭头大小
+$-collapse-arrow-color: var(--wot-collapse-arrow-color, #d8d8d8) !default; // 箭头颜色
+$-collapse-body-fs: var(--wot-collapse-body-fs, 14px) !default; // 内容字号
+$-collapse-body-color: var(--wot-collapse-body-color, rgba(0, 0, 0, 0.65)) !default; // 内容颜色
+$-collapse-disabled-color: var(--wot-collapse-disabled-color, rgba(0, 0, 0, 0.15)) !default; // 禁用颜色
+$-collapse-retract-fs: var(--wot-collapse-retract-fs, 14px) !default; // 更多 字号
+$-collapse-more-color: var(--wot-collapse-more-color, $-color-theme) !default; // 更多 颜色
+
+/* divider */
+$-divider-padding: var(--wot-divider-padding, 0 $-size-side-padding) !default; // 两边间距
+$-divider-margin: var(--wot-divider-margin, 16px 0) !default; // 上下间距
+$-divider-color: var(--wot-divider-color, rgba(0, 0, 0, 0.45)) !default; // 字体颜色
+$-divider-line-color: var(--wot-divider-line-color, currentColor) !default; // 线条颜色
+$-divider-line-height: var(--wot-divider-line-height, 1px) !default; // 线条高度
+$-divider-fs: var(--wot-divider-fs, 14px) !default; // 字体大小
+$-divider-content-left-width: var(--wot-divider-content-left-width, 10%) !default; // 左侧内容宽度
+$-divider-content-left-margin: var(--wot-divider-content-left-margin, 12px) !default; // 左侧内容距离线距离
+$-divider-content-right-margin: var(--wot-divider-content-right-margin, 12px) !default; // 右侧内容距离线距离
+$-divider-content-right-width: var(--wot-divider-content-right-width, 10%) !default; // 右侧内容宽度
+$-divider-vertical-height: var(--wot-divider-vertical-height, 16px) !default; // 垂直分割线高度
+$-divider-vertical-content-margin: var(--wot-divider-vertical-content-margin, 0 8px) !default; // 垂直分割线内容间距
+$-divider-vertical-line-width: var(--wot-divider-vertical-line-width, 1px) !default; // 线条高度
+
+
+
+
+/* drop-menu */
+$-drop-menu-height: var(--wot-drop-menu-height, 48px) !default; // 展示选中项的高度
+$-drop-menu-color: var(--wot-drop-menu-color, $-color-content) !default; // 展示选中项的颜色
+$-drop-menu-fs: var(--wot-drop-menu-fs, $-fs-content) !default; // 展示选中项的字号
+$-drop-menu-arrow-fs: var(--wot-drop-menu-arrow-fs, $-fs-content) !default; // 箭头图标大小
+
+$-drop-menu-side-padding: var(--wot-drop-menu-side-padding, $-size-side-padding) !default; // 两边留白间距
+$-drop-menu-disabled-color: var(--wot-drop-menu-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色
+$-drop-menu-item-height: var(--wot-drop-menu-item-height, 48px) !default; // 选项高度
+$-drop-menu-item-color: var(--wot-drop-menu-item-color, $-color-content) !default; // 选项颜色
+$-drop-menu-item-fs: var(--wot-drop-menu-item-fs, $-fs-content) !default; // 选项字号
+$-drop-menu-item-color-active: var(--wot-drop-menu-item-color-active, $-color-theme) !default; // 选中颜色
+$-drop-menu-item-color-tip: var(--wot-drop-menu-item-color-tip, rgba(0, 0, 0, 0.45)) !default; // 提示文字颜色
+$-drop-menu-item-fs-tip: var(--wot-drop-menu-item-fs-tip, $-fs-secondary) !default; // 提示文字字号
+$-drop-menu-option-check-size: var(--wot-drop-menu-option-check-size, 20px) !default; // check 图标大小
+$-drop-menu-line-color: var(--wot-drop-menu-line-color, $-color-theme) !default; // 下划线颜色
+$-drop-menu-line-height: var(--wot-drop-menu-line-height, 3px) !default; // 下划线高度
+
+/* input-number */
+$-input-number-color: var(--wot-input-number-color, #262626) !default; // 文字颜色
+$-input-number-border-color: var(--wot-input-number-border-color, #e8e8e8) !default; // 边框颜色
+$-input-number-disabled-color: var(--wot-input-number-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用颜色
+$-input-number-height: var(--wot-input-number-height, 24px) !default; // 加减号按钮高度
+$-input-number-btn-width: var(--wot-input-number-btn-width, 26px) !default; // 加减号按钮宽度
+$-input-number-input-width: var(--wot-input-number-input-width, 36px) !default; // 输入框宽度
+$-input-number-radius: var(--wot-input-number-radius, 4px) !default; // 加减号按钮圆角大小
+$-input-number-fs: var(--wot-input-number-fs, 12px) !default; // 输入框字号
+$-input-number-icon-size: var(--wot-input-number-icon-size, 14px) !default; // 加减号图标大小
+$-input-number-icon-color: var(--wot-input-number-icon-color, rgba(0, 0, 0, 0.65)) !default; // icon颜色
+
+/* input */
+$-input-padding: var(--wot-input-padding, $-size-side-padding) !default; // input 左右padding距离
+$-input-border-color: var(--wot-input-border-color, #dadada) !default; // 无label边框颜色
+$-input-not-empty-border-color: var(--wot-input-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色
+$-input-fs: var(--wot-input-fs, $-cell-title-fs) !default; // 字号
+$-input-fs-large: var(--wot-input-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号
+$-input-icon-margin: var(--wot-input-icon-margin, 8px) !default; // 图标距离
+$-input-color: var(--wot-input-color, #262626) !default; // 文字颜色
+$-input-placeholder-color: var(--wot-input-placeholder-color, #bfbfbf) !default; // 占位符颜色
+$-input-disabled-color: var(--wot-input-disabled-color, #d9d9d9) !default; // 输入框禁用颜色
+$-input-error-color: var(--wot-input-error-color, $-color-danger) !default; // 输入框错误颜色
+$-input-icon-color: var(--wot-input-icon-color, #bfbfbf) !default; // 图标颜色
+$-input-clear-color: var(--wot-input-clear-color, #585858) !default; // 关闭按钮颜色
+$-input-count-color: var(--wot-input-count-color, #bfbfbf) !default; // 计数文字颜色
+$-input-count-current-color: var(--wot-input-count-current-color, #262626) !default; // 当前长度颜色
+$-input-bg: var(--wot-input-bg, $-color-white) !default; // 默认背景颜色
+
+$-input-cell-bg: var(--wot-input-cell-bg, $-color-white) !default; // cell 类型背景色
+$-input-cell-border-color: var(--wot-input-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
+$-input-cell-padding: var(--wot-input-cell-padding, 10px) !default; // cell 容器padding
+$-input-cell-padding-large: var(--wot-input-cell-padding-large, 12px) !default; // large类型cell容器padding
+$-input-cell-height: var(--wot-input-cell-height, 24px) !default; // cell 高度
+$-input-cell-label-width: var(--wot-input-cell-label-width, 33%) !default; // cell 下 label 的宽度
+$-input-inner-height: var(--wot-input-inner-height, 34px) !default; // 非cell和textarea下的高度
+$-input-inner-height-no-border: var(--wot-input-inner-height-no-border, 24px) !default; // 无边框下的高度
+$-input-count-fs: var(--wot-input-count-fs, 14px) !default; // 计数字号
+$-input-count-fs-large: var(--wot-input-count-fs-large, 14px) !default; // 大尺寸计数字号
+$-input-icon-size: var(--wot-input-icon-size, 16px) !default; // 图标大小
+$-input-icon-size-large: var(--wot-input-icon-size-large, 18px) !default; // 大尺寸图标大小
+
+/* textarea */
+$-textarea-padding: var(--wot-textarea-padding, $-size-side-padding) !default; // textarea 左右padding距离
+$-textarea-border-color: var(--wot-textarea-border-color, #dadada) !default; // 无label边框颜色
+$-textarea-not-empty-border-color: var(--wot-textarea-not-empty-border-color, #262626) !default; // 输入框有值时 无label边框颜色
+$-textarea-fs: var(--wot-textarea-fs, $-cell-title-fs) !default; // 字号
+$-textarea-fs-large: var(--wot-textarea-fs-large, $-cell-title-fs-large) !default; // 大尺寸字号
+$-textarea-icon-margin: var(--wot-textarea-icon-margin, 8px) !default; // 图标距离
+$-textarea-color: var(--wot-textarea-color, #262626) !default; // 文字颜色
+$-textarea-icon-color: var(--wot-textarea-icon-color, #bfbfbf) !default; // 图标颜色
+$-textarea-clear-color: var(--wot-textarea-clear-color, #585858) !default; // 关闭按钮颜色
+$-textarea-count-color: var(--wot-textarea-count-color, #bfbfbf) !default; // 计数文字颜色
+$-textarea-count-current-color: var(--wot-textarea-count-current-color, #262626) !default; // 当前长度颜色
+$-textarea-bg: var(--wot-textarea-bg, $-color-white) !default; // 默认背景颜色
+$-textarea-cell-border-color: var(--wot-textarea-cell-border-color, $-color-border-light) !default; // cell 类型边框颜色
+$-textarea-cell-padding: var(--wot-textarea-cell-padding, 10px) !default; // cell 容器padding
+$-textarea-cell-padding-large: var(--wot-textarea-cell-padding-large, 12px) !default; // large类型cell容器padding
+$-textarea-cell-height: var(--wot-textarea-cell-height, 24px) !default; // cell 高度
+$-textarea-count-fs: var(--wot-textarea-count-fs, 14px) !default; // 计数字号
+$-textarea-count-fs-large: var(--wot-textarea-count-fs-large, 14px) !default; // 大尺寸计数字号
+$-textarea-icon-size: var(--wot-textarea-icon-size, 16px) !default; // 图标大小
+$-textarea-icon-size-large: var(--wot-textarea-icon-size-large, 18px) !default; // 大尺寸图标大小
+
+/* loadmore */
+$-loadmore-height: var(--wot-loadmore-height, 48px) !default; // 高度
+$-loadmore-color: var(--wot-loadmore-color, rgba(0, 0, 0, 0.45)) !default; // 颜色
+$-loadmore-fs: var(--wot-loadmore-fs, 14px) !default; // 字号
+$-loadmore-error-color: var(--wot-loadmore-error-color, $-color-theme) !default; // 点击重试颜色
+$-loadmore-refresh-fs: var(--wot-loadmore-refresh-fs, $-fs-title) !default; // refresh图标字号
+$-loadmore-loading-size: var(--wot-loadmore-loading-size, $-fs-title) !default; // loading尺寸
+
+/* message-box */
+$-message-box-width: var(--wot-message-box-width, 300px) !default; // 宽度
+$-message-box-bg: var(--wot-message-box-bg, $-color-white) !default; // 默认背景颜色
+$-message-box-radius: var(--wot-message-box-radius, 16px) !default; // 圆角大小
+$-message-box-padding: var(--wot-message-box-padding, 25px 24px 0) !default; // 主体内容padding
+$-message-box-title-fs: var(--wot-message-box-title-fs, 16px) !default; // 标题字号
+$-message-box-title-color: var(--wot-message-box-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
+$-message-box-content-fs: var(--wot-message-box-content-fs, 14px) !default; // 内容字号
+$-message-box-content-color: var(--wot-message-box-content-color, #666666) !default; // 内容颜色
+$-message-box-content-max-height: var(--wot-message-box-content-max-height, 264px) !default; // 内容最大高度
+$-message-box-content-scrollbar-width: var(--wot-message-box-content-scrollbar-width, 4px) !default; // 内容滚动条宽度
+$-message-box-content-scrollbar-color: var(--wot-message-box-content-scrollbar-color, rgba(0, 0, 0, 0.1)) !default; // 内容滚动条颜色
+$-message-box-input-error-color: var(--wot-message-box-input-error-color, $-input-error-color) !default; // 输入框错误颜色
+
+/* notice-bar */
+$-notice-bar-fs: var(--wot-notice-bar-fs, 12px) !default; // 字号
+$-notice-bar-line-height: var(--wot-notice-bar-line-height, 18px) !default; // 行高
+$-notice-bar-border-radius: var(--wot-notice-bar-border-radius, 8px) !default; // 圆角
+$-notice-bar-padding: var(--wot-notice-bar-padding, 9px 20px 9px 15px) !default; // 非换行下的padding
+$-notice-bar-warning-bg: var(--wot-notice-bar-warning-bg, #fff6c8) !default; // 背景色
+$-notice-bar-info-bg: var(--wot-notice-bar-info-bg, #f4f9ff) !default; // 背景色
+$-notice-bar-danger-bg: var(--wot-notice-bar-danger-bg, #feeced) !default; // 背景色
+$-notice-bar-warning-color: var(--wot-notice-bar-warning-color, $-color-warning) !default; // 文字和图标颜色
+$-notice-bar-info-color: var(--wot-notice-bar-info-color, $-color-theme) !default; // 文字和图标颜色
+$-notice-bar-danger-color: var(--wot-notice-bar-danger-color, $-color-danger) !default; // 文字和图标颜色
+$-notice-bar-prefix-size: var(--wot-notice-bar-prefix-size, 18px) !default; // 图标大小
+$-notice-bar-close-bg: var(--wot-notice-bar-close-bg, rgba(0, 0, 0, 0.15)) !default; // 右侧关闭按钮背景颜色
+$-notice-bar-close-size: var(--wot-notice-bar-close-size, 18px) !default; // 右侧关闭按钮背景颜色
+$-notice-bar-close-color: var(--wot-notice-bar-close-color, $-color-white) !default; // 右侧关闭按钮颜色
+$-notice-bar-wrap-padding: var(--wot-notice-bar-wrap-padding, 14px $-size-side-padding) !default; // 换行下的padding
+
+/* pagination */
+$-pagination-content-padding: var(--wot-pagination-content-padding, 10px 15px) !default;
+$-pagination-message-padding: var(--wot-pagination-message-padding, 1px 0 16px 0) !default;
+$-pagination-message-fs: var(--wot-pagination-message-fs, 12px) !default;
+$-pagination-message-color: var(--wot-pagination-message-color, rgba(0, 0, 0, 0.69)) !default;
+$-pagination-nav-border: var(--wot-pagination-nav-border, 1px solid rgba(0, 0, 0, 0.45)) !default;
+$-pagination-nav-border-radius: var(--wot-pagination-nav-border-radius, 16px) !default;
+$-pagination-nav-fs: var(--wot-pagination-nav-fs, 12px) !default;
+$-pagination-nav-width: var(--wot-pagination-nav-width, 60px) !default;
+$-pagination-nav-color: var(--wot-pagination-nav-color, rgba(0, 0, 0, 0.85)) !default;
+$-pagination-nav-content-fs: var(--wot-pagination-nav-content-fs, 12px) !default;
+$-pagination-nav-sepatator-padding: var(--wot-pagination-nav-sepatator-padding, 0 4px) !default;
+$-pagination-nav-current-color: var(--wot-pagination-nav-current-color, $-color-theme) !default;
+$-pagination-icon-size: var(--wot-pagination-icon-size, $-fs-content) !default;
+
+/* picker */
+$-picker-toolbar-height: var(--wot-picker-toolbar-height, 54px) !default; // toolbar 操作条的高度
+$-picker-action-height: var(--wot-picker-action-height, 16px) !default; // toolbar 操作条的高度
+$-picker-toolbar-finish-color: var(--wot-picker-toolbar-finish-color, $-color-theme) !default; // toolbar 操作条完成按钮的颜色
+$-picker-toolbar-cancel-color: var(--wot-picker-toolbar-cancel-color, #666666) !default; // toolbar 操作条的边框颜色
+$-picker-toolbar-fs: var(--wot-picker-toolbar-fs, $-fs-title) !default; // toolbar 操作条的字号
+$-picker-toolbar-title-color: var(--wot-picker-toolbar-title-color, rgba(0, 0, 0, 0.85)) !default; // toolbar 操作台的标题颜色
+$-picker-column-fs: var(--wot-picker-column-fs, 16px) !default; // 选择器选项的字号
+$-picker-bg: var(--wot-picker-bg, $-color-white) !default; // 选择器选项的字号
+$-picker-column-active-fs: var(--wot-picker-column-active-fs, 18px) !default; // 选择器选项被选中的字号
+$-picker-column-color: var(--wot-picker-column-color, rgba(0, 0, 0, 0.85)) !default; // 选择器选项的颜色
+$-picker-column-height: var(--wot-picker-column-height, 210px) !default; // 列高 滚筒外部的高度
+$-picker-column-item-height: var(--wot-picker-column-item-height, 35px) !default; // 列高 滚筒外部的高度
+$-picker-column-select-bg: var(--wot-picker-column-select-bg, #f5f5f5) !default;
+$-picker-loading-button-color: var(--wot-picker-loading-button-color, rgba(0, 0, 0, 0.25)) !default; // loading 背景颜色
+$-picker-column-padding: var(--wot-picker-column-padding, 0 $-size-side-padding) !default; // 选项内间距
+
+$-picker-column-disabled-color: var(--wot-picker-column-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 选择器选项禁用的颜色
+$-picker-mask: var(--wot-picker-mask, linear-gradient(180deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)))
+  linear-gradient(0deg, hsla(0, 0%, 100%, 0.9), hsla(0, 0%, 100%, 0.25)) !default; // 上下阴影
+$-picker-loading-bg: var(--wot-picker-loading-bg, rgba($-color-white, 0.8)) !default; // loading 背景颜色
+$-picker-region-separator-color: var(--wot-picker-region-separator-color, rgba(0, 0, 0, 0.65)) !default; // 区域选择文字颜色
+$-picker-cell-arrow-size-large: var(--wot-picker-cell-arrow-size-large, $-cell-icon-size) !default; // cell 类型的大尺寸 右侧icon尺寸
+
+$-picker-region-color: var(--wot-picker-region-color, rgba(0, 0, 0, 0.45)) !default; // 区域选择文字颜色
+$-picker-region-bg-active-color: var(--wot-picker-region-bg-active-color, $-color-theme) !default; // 区域选择激活选中背景颜色
+
+$-picker-region-fs: var(--wot-picker-region-fs, 14px) !default; // 区域选择文字字号
+
+/* col-picker */
+$-col-picker-selected-height: var(--wot-col-picker-selected-height, 44px) !default; // 弹框顶部值高度
+$-col-picker-selected-padding: var(--wot-col-picker-selected-padding, 0 16px) !default; // 弹框顶部值左右间距
+$-col-picker-selected-fs: var(--wot-col-picker-selected-fs, 14px) !default; // 弹框顶部值字号
+$-col-picker-selected-color: var(--wot-col-picker-selected-color, rgba(0, 0, 0, 0.85)) !default; // 弹框顶部值文字颜色
+$-col-picker-selected-fw: var(--wot-col-picker-selected-fw, 700) !default; // 弹框顶部值高亮字重
+$-col-picker-line-width: var(--wot-col-picker-line-width, 16px) !default; // 弹框顶部值高亮线条宽度
+$-col-picker-line-height: var(--wot-col-picker-line-height, 3px) !default; // 弹框顶部值高亮线条高度
+$-col-picker-line-color: var(
+  --wot-col-picker-line-color,
+  linear-gradient(315deg, rgba(81, 124, 240, 1), rgba(118, 158, 245, 1))
+) !default; // 弹框顶部值高亮线条颜色
+$-col-picker-line-box-shadow: var(--wot-col-picker-line-box-shadow, 0px 1px 2px 0px rgba(1, 87, 255, 0.2)) !default; // 弹框顶部值高亮线条阴影
+$-col-picker-list-height: var(--wot-col-picker-list-height, 53vh) !default; // 弹框列表高度
+$-col-picker-list-padding-bottom: var(--wot-col-picker-list-padding-bottom, 30px) !default; // 弹框列表底部间距
+$-col-picker-list-color: var(--wot-col-picker-list-color, rgba(0, 0, 0, 0.85)) !default; // 弹框列表文字颜色
+$-col-picker-list-color-disabled: var(--wot-col-picker-list-color-disabled, rgba(0, 0, 0, 0.15)) !default; // 弹框列表文字禁用颜色
+$-col-picker-list-color-tip: var(--wot-col-picker-list-color-tip, rgba(0, 0, 0, 0.45)) !default; // 弹框列表提示文字颜色
+$-col-picker-list-fs: var(--wot-col-picker-list-fs, 14px) !default; // 弹框列表文字字号
+$-col-picker-list-fs-tip: var(--wot-col-picker-list-fs-tip, 12px) !default; // 弹框列表提示文字字号
+$-col-picker-list-item-padding: var(--wot-col-picker-list-item-padding, 12px 15px) !default; // 弹框列表选项间距
+$-col-picker-list-checked-icon-size: var(--wot-col-picker-list-checked-icon-size, 18px) !default; // 弹框列表选中箭头大小
+$-col-picker-list-color-checked: var(--wot-col-picker-list-color-checked, $-color-theme) !default; // 弹框列表选中选项颜色
+
+/* overlay */
+$-overlay-bg: var(--wot-overlay-bg, rgba(0, 0, 0, 0.65)) !default;
+$-overlay-bg-dark: var(--wot-overlay-bg-dark, rgba(0, 0, 0, 0.75)) !default;
+
+/* popup */
+$-popup-close-size: var(--wot-popup-close-size, 24px) !default; // 关闭按钮尺寸
+$-popup-close-color: var(--wot-popup-close-color, #666) !default; // 关闭按钮颜色
+
+/* progress */
+$-progress-padding: var(--wot-progress-padding, 9px 0 8px) !default; // 进度条内边距
+$-progress-bg: var(--wot-progress-bg, rgba(229, 229, 229, 1)) !default; // 进度条底色
+$-progress-danger-color: var(--wot-progress-danger-color, $-color-danger) !default; // 进度条danger颜色
+$-progress-success-color: var(--wot-progress-success-color, $-color-success) !default; // 进度条success进度条颜色
+$-progress-warning-color: var(--wot-progress-warning-color, $-color-warning) !default; // 进度条warning进度条颜色
+
+$-progress-color: var(--wot-progress-color, $-color-theme) !default; // 进度条颜色
+$-progress-height: var(--wot-progress-height, 3px) !default; // 进度条高度
+$-progress-label-color: var(--wot-progress-label-color, #333) !default; // 文字颜色
+$-progress-label-fs: var(--wot-progress-label-fs, 14px) !default; // 文字字号
+$-progress-icon-fs: var(--wot-progress-icon-fs, 18px) !default; // 图标字号
+
+/* radio */
+$-radio-margin: var(--wot-radio-margin, $-checkbox-margin) !default; // 多个单选框距离
+$-radio-label-margin: var(--wot-radio-label-margin, $-checkbox-label-margin) !default; // 右侧文字与左侧图标距离
+$-radio-size: var(--wot-radio-size, 16px) !default; // 左侧图标尺寸
+$-radio-bg: var(--wot-radio-bg, $-color-white) !default; // 左侧图标尺寸
+$-radio-label-fs: var(--wot-radio-label-fs, $-checkbox-label-fs) !default; // 右侧文字字号
+$-radio-label-color: var(--wot-radio-label-color, $-checkbox-label-color) !default; // 右侧文字颜色
+$-radio-checked-color: var(--wot-radio-checked-color, $-checkbox-checked-color) !default; // 选中颜色
+$-radio-disabled-color: var(--wot-radio-disabled-color, $-checkbox-disabled-color) !default; // 禁用颜色
+$-radio-disabled-label-color: var(--wot-radio-disabled-label-color, $-checkbox-disabled-label-color) !default; // 禁用文字颜色
+
+$-radio-large-size: var(--wot-radio-large-size, $-checkbox-large-size) !default; // 左侧图标尺寸
+$-radio-large-label-fs: var(--wot-radio-large-label-fs, $-checkbox-large-label-fs) !default; // 右侧文字字号
+
+$-radio-button-height: var(--wot-radio-button-height, $-checkbox-button-height) !default; // 按钮模式复选框高
+$-radio-button-min-width: var(--wot-radio-button-min-width, 60px) !default; // 按钮模式最小宽
+$-radio-button-max-width: var(--wot-radio-button-max-width, 144px) !default; // 按钮模式最大宽
+$-radio-button-radius: var(--wot-radio-button-radius, $-checkbox-button-radius) !default; // 按钮圆角大小
+$-radio-button-bg: var(--wot-radio-button-bg, $-checkbox-button-bg) !default; // 按钮模式背景颜色
+$-radio-button-fs: var(--wot-radio-button-fs, $-checkbox-button-font-size) !default; // 按钮模式字号
+$-radio-button-border: var(--wot-radio-button-border, $-checkbox-button-border) !default; // 按钮边框颜色
+$-radio-button-disabled-border: var(--wot-radio-button-disabled-border, $-checkbox-button-disabled-border) !default; // 按钮禁用边框颜色
+
+$-radio-dot-size: var(--wot-radio-dot-size, 8px) !default; // 单选dot模式圆点尺寸
+$-radio-dot-large-size: var(--wot-radio-dot-large-size, 10px) !default; // 单选dot模式大尺寸圆点尺寸
+$-radio-dot-checked-bg: var(--wot-radio-dot-checked-bg, $-color-theme) !default; // 单选dot模式选中背景色
+$-radio-dot-checked-border-color: var(--wot-radio-dot-checked-border-color, $-color-theme) !default; // 单选dot模式选中边框色
+$-radio-dot-border-color: var(--wot-radio-dot-border-color, #dcdcdc) !default; // 单选dot模式边框色
+$-radio-dot-disabled-border: var(--wot-radio-dot-disabled-border, #d9d9d9) !default; // 单选dot模式禁用边框颜色
+$-radio-dot-disabled-bg: var(--wot-radio-dot-disabled-bg, #d9d9d9) !default; // 单选dot模式禁用背景颜色
+
+/* search */
+$-search-side-padding: var(--wot-search-side-padding, $-size-side-padding) !default; // 左右间距
+$-search-padding: var(--wot-search-padding, 10px 0 10px $-search-side-padding) !default; // 不包含取消按钮的间距
+$-search-input-radius: var(--wot-search-input-radius, 15px) !default; // 输入框圆角大小
+$-search-input-bg: var(--wot-search-input-bg, $-color-bg) !default; // 输入框背景色
+$-search-input-height: var(--wot-search-input-height, 30px) !default; // 输入框高度
+$-search-input-padding: var(--wot-search-input-padding, 0 32px 0 42px) !default; // 输入框间距
+$-search-input-fs: var(--wot-search-input-fs, $-fs-content) !default; // 输入框字号
+$-search-input-color: var(--wot-search-input-color, #262626) !default; // 输入框文字颜色
+$-search-icon-color: var(--wot-search-icon-color, $-color-icon) !default; // 图标颜色
+$-search-icon-size: var(--wot-search-icon-size, 18px) !default; // 图标大小
+$-search-clear-icon-size: var(--wot-search-clear-icon-size, $-fs-title) !default; // 清除图标大小
+$-search-placeholder-color: var(--wot-search-placeholder-color, #bfbfbf) !default; // placeholder 颜色
+$-search-cancel-padding: var(--wot-search-cancel-padding, 0 $-search-side-padding 0 10px) !default; // 取消按钮间距
+$-search-cancel-fs: var(--wot-search-cancel-fs, $-fs-title) !default; // 取消按钮字号
+$-search-cancel-color: var(--wot-search-cancel-color, rgba(0, 0, 0, 0.65)) !default; // 取消按钮颜色
+$-search-light-bg: var(--wot-search-light-bg, $-color-bg) !default; // light 类型的容器背景色
+
+/* slider */
+$-slider-fs: var(--wot-slider-fs, $-fs-content) !default; // 字体大小
+$-slider-handle-radius: var(--wot-slider-handle-radius, 12px) !default; // 滑块半径
+$-slider-handle-bg: var(--wot-slider-handle-bg, resultColor(139deg, $-color-theme, 'dark' 'light', #ffffff #f7f7f7, 0% 100%)) !default; // 滑块背景
+$-slider-axie-height: var(--wot-slider-axie-height, 3px) !default; // 滑轴高度
+$-slider-color: var(--wot-slider-color, #333) !default; // 字体颜色
+$-slider-axie-bg: var(--wot-slider-axie-bg, #e5e5e5) !default; // 滑轴的默认背景色
+$-slider-line-color: var(
+  --wot-slider-line-color,
+  resultColor(315deg, $-color-theme, 'dark' 'light', #517cf0 #769ef5, 0% 100%)
+) !default; // 进度条颜色
+$-slider-disabled-color: var(--wot-slider-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 禁用状态下字体颜色
+
+/* sort-button */
+$-sort-button-fs: var(--wot-sort-button-fs, $-fs-content) !default; // 字号
+$-sort-button-color: var(--wot-sort-button-color, $-color-content) !default; // 颜色
+$-sort-button-height: var(--wot-sort-button-height, 48px) !default; // 高度
+$-sort-button-line-height: var(--wot-sort-button-line-height, 3px) !default; // 下划线高度
+$-sort-button-line-color: var(--wot-sort-button-line-color, $-color-theme) !default; // 下划线颜色
+
+/* steps */
+$-steps-icon-size: var(--wot-steps-icon-size, 22px) !default; // 图标尺寸
+$-steps-inactive-color: var(--wot-steps-inactive-color, rgba(0, 0, 0, 0.25)) !default; // 等待状态文字颜色
+$-steps-finished-color: var(--wot-steps-finished-color, $-color-theme) !default; // 完成文字颜色
+$-steps-icon-text-fs: var(--wot-steps-icon-text-fs, $-fs-content) !default; // 数字图标文字字号
+$-steps-error-color: var(--wot-steps-error-color, $-color-danger) !default; // 异常颜色
+$-steps-title-fs: var(--wot-steps-title-fs, $-fs-content) !default; // 标题字号
+$-steps-title-fw: var(--wot-steps-title-fw, $-fw-medium) !default; // 标题字重
+$-steps-label-fs: var(--wot-steps-label-fs, $-fs-secondary) !default; // 描述信息字号
+$-steps-description-color: var(--wot-steps-description-color, rgba(0, 0, 0, 0.45)) !default; // 描述信息颜色
+$-steps-is-icon-width: var(--wot-steps-is-icon-width, 30px) !default; // 自定义图标的宽度，给左右留白
+$-steps-line-color: var(--wot-steps-line-color, rgba(0, 0, 0, 0.15)) !default; // 线条颜色
+$-steps-dot-size: var(--wot-steps-dot-size, 7px) !default; // 点状大小
+$-steps-dot-active-size: var(--wot-steps-dot-active-size, 9px) !default; // 点状高亮大小
+
+/* switch */
+$-switch-size: var(--wot-switch-size, 28px) !default; // switch大小
+$-switch-width: var(--wot-switch-width, calc(1.8em + 4px)) !default; // 宽度
+$-switch-height: var(--wot-switch-height, calc(1em + 4px)) !default; // 高度
+$-switch-circle-size: var(--wot-switch-circle-size, 1em) !default; // 圆点大小
+$-switch-border-color: var(--wot-switch-border-color, #e5e5e5) !default; // 边框颜色选中状态背景颜色
+$-switch-active-color: var(--wot-switch-active-color, $-color-theme) !default; // 选中状态背景
+$-switch-active-shadow-color: var(--wot-switch-active-shadow-color, rgba(0, 83, 162, 0.5)) !default; // 选中状态shadow颜色
+$-switch-inactive-color: var(--wot-switch-inactive-color, #eaeaea) !default; // 非选中背景颜色
+$-switch-inactive-shadow-color: var(--wot-switch-inactive-shadow-color, rgba(155, 155, 155, 0.5)) !default; // 非选中状态shadow颜色
+
+/* tabs */
+$-tabs-nav-arrow-fs: var(--wot-tabs-nav-arrow-fs, 18px) !default; // 全部Icon字号
+$-tabs-nav-arrow-open-fs: var(--wot-tabs-nav-arrow-open-fs, 14px) !default; // 展开Icon字号
+$-tabs-nav-width: var(--wot-tabs-nav-width, 100vw) !default; // tabs 头部切换宽度
+$-tabs-nav-height: var(--wot-tabs-nav-height, 42px) !default; // 头部切换高度
+$-tabs-nav-fs: var(--wot-tabs-nav-fs, $-fs-content) !default; // 头部切换文字大小
+$-tabs-nav-color: var(--wot-tabs-nav-color, rgba(0, 0, 0, 0.85)) !default; // 头部切换文字颜色
+$-tabs-nav-bg: var(--wot-tabs-nav-bg, $-color-white) !default; // 背景颜色
+$-tabs-nav-active-color: var(--wot-tabs-nav-active-color, $-color-theme) !default; // 头部高亮颜色
+$-tabs-nav-disabled-color: var(--wot-tabs-nav-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 头部禁用颜色
+$-tabs-nav-line-height: var(--wot-tabs-nav-line-height, 3px) !default; // 高亮边框高度
+$-tabs-nav-line-width: var(--wot-tabs-nav-line-width, 19px) !default; // 高亮边框宽度
+$-tabs-nav-line-bg-color: var(--wot-tabs-nav-line-bg-color, $-color-theme) !default; // 底部条颜色
+$-tabs-nav-map-fs: var(--wot-tabs-nav-map-fs, $-fs-content) !default; // map 类型按钮字号
+$-tabs-nav-map-color: var(--wot-tabs-nav-map-color, rgba(0, 0, 0, 0.85)) !default; // map 类型按钮文字颜色
+$-tabs-nav-map-arrow-color: var(--wot-tabs-nav-map-arrow-color, rgba(0, 0, 0, 0.65)) !default; // map 类型箭头颜色
+$-tabs-nav-map-btn-before-bg: var(
+  --wot-tabs-nav-map-btn-before-bg,
+  linear-gradient(270deg, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0) 100%)
+) !default; // 左侧map遮罩阴影
+$-tabs-nav-map-button-back-color: var(--wot-tabs-nav-map-button-back-color, rgba(0, 0, 0, 0.04)) !default; // map 类型按钮边框颜色
+$-tabs-nav-map-button-radius: var(--wot-tabs-nav-map-button-radius, 16px) !default; // map 类型按钮圆角大小
+$-tabs-nav-map-modal-bg: var(--wot-tabs-nav-map-modal-bg, $-overlay-bg) !default; // map 类型蒙层背景色
+
+/* tag */
+$-tag-fs: var(--wot-tag-fs, $-fs-secondary) !default; // 字号
+$-tag-color: var(--wot-tag-color, $-color-white) !default; // 字体颜色
+$-tag-small-fs: var(--wot-tag-small-fs, $-fs-aid) !default; // 小尺寸字号
+$-tag-info-color: var(--wot-tag-info-color, #585858) !default; // info 颜色
+$-tag-primary-color: var(--wot-tag-primary-color, $-color-theme) !default; // 主颜色
+$-tag-danger-color: var(--wot-tag-danger-color, $-color-danger) !default; // danger 颜色
+$-tag-warning-color: var(--wot-tag-warning-color, $-color-warning) !default; // warning 颜色
+$-tag-success-color: var(--wot-tag-success-color, $-color-success) !default; // success 颜色
+$-tag-info-bg: var(--wot-tag-info-bg, resultColor(49deg, $-color-black, 'dark' 'light', #808080 #999999, 0% 100%)) !default; // info 背景颜色
+$-tag-primary-bg: var(--wot-tag-primary-bg, $-color-theme) !default; // 主背景颜色
+$-tag-danger-bg: var(--wot-tag-danger-bg, $-color-danger) !default; // danger 背景颜色
+$-tag-warning-bg: var(--wot-tag-warning-bg, $-color-warning) !default; // warning 背景颜色
+$-tag-success-bg: var(--wot-tag-success-bg, $-color-success) !default; // success 背景颜色
+$-tag-round-color: var(--wot-tag-round-color, rgba(102, 102, 102, 1)) !default; // round 字体颜色
+$-tag-round-border-color: var(--wot-tag-round-border-color, rgba(225, 225, 225, 1)) !default; // round 边框颜色
+$-tag-round-radius: var(--wot-tag-round-radius, 12px) !default; // round 圆角大小
+$-tag-mark-radius: var(--wot-tag-mark-radius, 6px 2px 6px 2px) !default; // mark 圆角大小
+$-tag-close-size: var(--wot-tag-close-size, 14px) !default; // 关闭按钮字号
+$-tag-close-color: var(--wot-tag-close-color, $-tag-info-color) !default; // 关闭按钮颜色
+$-tag-close-active-color: var(--wot-tag-close-active-color, rgba(0, 0, 0, 0.45)) !default; // 关闭按钮 active 颜色
+
+/* toast */
+$-toast-padding: var(--wot-toast-padding, 16px 24px) !default; // padding
+$-toast-max-width: var(--wot-toast-max-width, 300px) !default; // 最大宽度
+$-toast-radius: var(--wot-toast-radius, 8px) !default; // 圆角大小
+$-toast-bg: var(--wot-toast-bg, $-overlay-bg) !default; // 背景色
+$-toast-fs: var(--wot-toast-fs, $-fs-content) !default; // 字号
+$-toast-with-icon-min-width: var(--wot-toast-with-icon-min-width, 150px) !default; // 有图标的情况下最小宽度
+$-toast-icon-size: var(--wot-toast-icon-size, 32px) !default; // 图标大小
+$-toast-icon-margin-right: var(--wot-toast-icon-margin-right, 12px) !default; // 图标右边距
+$-toast-icon-margin-bottom: var(--wot-toast-icon-margin-bottom, 12px) !default; // 图标下边距
+$-toast-loading-padding: var(--wot-toast-loading-padding, 10px) !default; // loading 下的padding
+$-toast-box-shadow: var(--wot-toast-box-shadow, 0px 6px 16px 0px rgba(0, 0, 0, 0.08)) !default; // 外部阴影
+
+/* loading */
+$-loading-size: var(--wot-loading-size, 32px) !default; // loading 大小
+
+/* tooltip */
+$-tooltip-bg: var(--wot-tooltip-bg, rgba(38, 39, 40, 0.8)) !default; // 背景色
+$-tooltip-color: var(--wot-tooltip-color, $-color-white) !default; // 文字颜色
+$-tooltip-radius: var(--wot-tooltip-radius, 8px) !default; // 圆角大小
+$-tooltip-arrow-size: var(--wot-tooltip-arrow-size, 5px) !default; // 箭头大小
+$-tooltip-fs: var(--wot-tooltip-fs, $-fs-content) !default; // 字号
+$-tooltip-blur: var(--wot-tooltip-blur, 10px) !default; // 背景高斯模糊效果
+$-tooltip-padding: var(--wot-tooltip-padding, 9px 20px) !default; // 间距
+$-tooltip-close-size: var(--wot-tooltip-close-size, 6px) !default; // 背景高斯模糊效果
+$-tooltip-z-index: var(--wot-tooltip-z-index, 500) !default;
+$-tooltip-line-height: var(--wot-tooltip-line-height, 18px) !default; // 行高
+
+/* popover */
+$-popover-bg: var(--wot-popover-bg, $-color-white) !default; // 背景色
+$-popover-color: var(--wot-popover-color, rgba(0, 0, 0, 0.85)) !default; // 文字颜色
+$-popover-box-shadow: var(--wot-popover-box-shadow, 0px 2px 10px 0px rgba(0, 0, 0, 0.1)) !default; // 阴影颜色
+$-popover-arrow-box-shadow: var(--wot-popover-arrow-box-shadow, 0px 2px 10px 0px rgba(0, 0, 0, 0.2)) !default; // 阴影颜色
+$-popover-border-color: var(--wot-popover-border-color, rgba(0, 0, 0, 0.09)) !default; // 阴影颜色
+$-popover-radius: var(--wot-popover-radius, 4px) !default; // 圆角大小
+$-popover-arrow-size: var(--wot-popover-arrow-size, 6px) !default; // 箭头大小
+$-popover-fs: var(--wot-popover-fs, $-fs-content) !default; // 字号
+$-popover-padding: var(--wot-popover-padding, 15px) !default; // 间距
+$-popover-line-height: var(--wot-popover-line-height, 18px) !default; // 行高
+$-popover-z-index: var(--wot-popover-z-index, $-tooltip-z-index) !default;
+
+/* grid-item */
+$-grid-item-fs: var(--wot-grid-item-fs, 12px) !default; // 字号
+$-grid-item-bg: var(--wot-grid-item-bg, $-color-white) !default; // 字号
+$-grid-item-padding: var(--wot-grid-item-padding, 14px 0px) !default; // 内容的 padding
+$-grid-item-border-color: var(--wot-grid-item-border-color, $-color-border-light) !default; // 边框颜色
+$-grid-item-hover-bg: var(--wot-grid-item-hover-bg, $-color-gray-3) !default; // hover背景色
+$-grid-item-hover-bg-dark: var(--wot-grid-item-hover-bg-dark, $-color-gray-7) !default; // 暗黑模式hover背景色
+
+/* statustip */
+$-statustip-fs: var(--wot-statustip-fs, $-fs-content) !default; // 字号
+$-statustip-color: var(--wot-statustip-color, rgba(0, 0, 0, 0.45)) !default; // 文字颜色
+$-statustip-line-height: var(--wot-statustip-line-height, 16px) !default; // 文字行高
+$-statustip-padding: var(--wot-statustip-padding, 5px 10px) !default; // 间距
+
+/* card */
+$-card-bg: var(--wot-card-bg, $-color-white) !default; // 背景色
+$-card-fs: var(--wot-card-fs, $-fs-content) !default; // 卡片字号
+$-card-padding: var(--wot-card-padding, 0 $-size-side-padding) !default; // 内边距
+$-card-footer-padding: var(--wot-card-footer-padding, 12px 0 16px) !default; // 底部内边距
+$-card-shadow-color: var(--wot-card-shadow-color, 0px 4px 8px 0px rgba(0, 0, 0, 0.02)) !default; // 阴影
+$-card-radius: var(--wot-card-radius, 8px) !default; // 圆角大小
+$-card-line-height: var(--wot-card-line-height, 1.1) !default; // 行高
+$-card-margin: var(--wot-card-margin, 0 $-size-side-padding) !default; // 外边距
+$-card-title-color: var(--wot-card-title-color, rgba(0, 0, 0, 0.85)) !default; // 标题颜色
+$-card-title-fs: var(--wot-card-title-fs, $-fs-title) !default; //  矩形卡片标题字号
+$-card-content-border-color: var(--wot-card-content-border-color, rgba(0, 0, 0, 0.09)) !default; // 内容边框
+$-card-rectangle-title-padding: var(--wot-card-rectangle-title-padding, 15px 15px 12px) !default; // 矩形卡片头部内边距
+$-card-rectangle-content-padding: var(--wot-card-rectangle-content-padding, 16px 0) !default; // 矩形卡片内容内边距
+$-card-rectangle-footer-padding: var(--wot-card-rectangle-footer-padding, 12px 0) !default; // 矩形卡片底部内边距
+$-card-content-color: var(--wot-card-content-color, rgba(0, 0, 0, 0.45)) !default; // 文本内容颜色
+$-card-content-line-height: var(--wot-card-content-line-height, 1.428) !default; // 文本内容行高
+$-card-content-margin: var(--wot-card-content-margin, 13px 0 12px) !default; // 内容外边距
+$-card-content-rectangle-margin: var(--wot-card-content-rectangle-margin, 14px 0 12px) !default; // 矩形卡片内容外边距
+
+/* upload */
+$-upload-size: var(--wot-upload-size, 80px) !default; // upload的外边框默认尺寸
+$-upload-evoke-icon-size: var(--wot-upload-evoke-icon-size, 32px) !default; // 唤起项的图标大小
+$-upload-evoke-bg: var(--wot-upload-evoke-bg, rgba(0, 0, 0, 0.04)) !default; // 唤起项的背景色
+$-upload-evoke-color: var(--wot-upload-evoke-color, rgba(0, 0, 0, 0.25)) !default; // 唤起项的图标颜色
+$-upload-evoke-disabled-color: var(--wot-upload-evoke-disabled-color, rgba(0, 0, 0, 0.09)) !default; // 唤起项禁用颜色
+$-upload-close-icon-size: var(--wot-upload-close-icon-size, 16px) !default; // 移除按钮尺寸
+$-upload-close-icon-color: var(--wot-upload-close-icon-color, rgba(0, 0, 0, 0.65)) !default; // 移除按钮颜色
+$-upload-progress-fs: var(--wot-upload-progress-fs, 14px) !default; // 进度文字字号
+$-upload-file-fs: var(--wot-upload-file-fs, 12px) !default; // 文件名字号
+$-upload-file-color: var(--wot-upload-file-color, $-color-secondary) !default; // 文件名字颜色
+$-upload-preview-name-fs: var(--wot-upload-preview-name-fs, 12px) !default; // 预览图片名字号
+$-upload-preview-icon-size: var(--wot-upload-preview-icon-size, 24px) !default; // 预览内部图标尺寸
+$-upload-preview-name-bg: var(--wot-upload-preview-name-bg, rgba(0, 0, 0, 0.6)) !default; // 预览文件名背景色
+$-upload-preview-name-height: var(--wot-upload-preview-name-height, 22px) !default; // 预览文件名背景高度
+$-upload-cover-icon-size: var(--wot-upload-cover-icon-size, 22px) !default; // 视频/文件图标尺寸
+
+/* curtain */
+$-curtain-content-radius: var(--wot-curtain-content-radius, 24px) !default; // 内容圆角
+$-curtain-content-close-color: var(--wot-curtain-content-close-color, $-color-white) !default; // 关闭按钮颜色
+$-curtain-content-close-fs: var(--wot-curtain-content-close-fs, $-fs-big) !default; // 关闭按钮大小
+
+/* notify */
+$-notify-text-color: var(--wot-notify-text-color, $-color-white) !default;
+$-notify-padding: var(--wot-notify-padding, 8px 16px) !default;
+$-notify-font-size: var(--wot-notify-font-size, $-fs-content) !default;
+$-notify-line-height: var(--wot-notify-line-height, 20px) !default;
+$-notify-primary-background: var(--wot-notify-primary-background, $-color-theme) !default;
+$-notify-success-background: var(--wot-notify-success-background, $-color-success) !default;
+$-notify-danger-background: var(--wot-notify-danger-background, $-color-danger) !default;
+$-notify-warning-background: var(--wot-notify-warning-background, $-color-warning) !default;
+
+/* skeleton */
+$-skeleton-background-color: var(--wot-skeleton-background-color, #eee) !default;
+$-skeleton-animation-gradient: var(--wot-skeleton-animation-gradient, rgba(0, 0, 0, 0.04)) !default;
+$-skeleton-animation-flashed: var(--wot-skeleton-animation-flashed, rgba(230, 230, 230, 0.3)) !default;
+$-skeleton-text-height-default: var(--wot-skeleton-text-height-default, 16px) !default;
+$-skeleton-rect-height-default: var(--wot-skeleton-rect-height-default, 16px) !default;
+$-skeleton-circle-height-default: var(--wot-skeleton-circle-height-default, 48px) !default;
+$-skeleton-row-margin-bottom: var(--wot-skeleton-row-margin-bottom, 16px) !default;
+$-skeleton-border-radius-text: var(--wot-skeleton-border-radius-text, 2px) !default;
+$-skeleton-border-radius-rect: var(--wot-skeleton-border-radius-rect, 4px) !default;
+$-skeleton-border-radius-circle: var(--wot-skeleton-border-radius-circle, 50%) !default;
+
+/* circle */
+$-circle-text-color: var(--wot-circle-text-color, $-color-content) !default; // circle文字颜色
+
+/* swiper */
+$-swiper-radius: var(--wot-swiper-radius, 8px);
+$-swiper-item-padding: var(--wot-swiper-item-padding, 0);
+$-swiper-item-text-color: var(--wot-swiper-item-text-color, #ffffff);
+$-swiper-item-text-fs: var(--wot-swiper-item-text-fs, $-fs-title);
+
+
+/* swiper-nav */
+// dot & dots-bar
+$-swiper-nav-dot-color: var(--wot-swiper-nav-dot-color, $-font-white-2) !default;
+$-swiper-nav-dot-active-color: var(--wot-swiper-nav-dot-active-color, $-font-white-1) !default;
+$-swiper-nav-dot-size: var(--wot-swiper-nav-dot-size, 12rpx) !default;
+$-swiper-nav-dots-bar-active-width: var(--wot-swiper-nav-dots-bar-active-width, 40rpx) !default;
+// fraction
+$-swiper-nav-fraction-color: var(--wot-swiper-nav-fraction-color, $-font-white-1) !default;
+$-swiper-nav-fraction-bg-color: var(--wot-swiper-nav-fraction-bg-color, $-font-gray-3) !default;
+$-swiper-nav-fraction-height: var(--wot-swiper-nav-fraction-height, 48rpx) !default;
+$-swiper-nav-fraction-font-size: var(--wot-swiper-nav-fraction-font-size, 24rpx) !default;
+// button
+$-swiper-nav-btn-color: var(--wot-swiper-nav-btn-color, $-font-white-1) !default;
+$-swiper-nav-btn-bg-color: var(--wot-swiper-nav-btn-bg-color, $-font-gray-3) !default;
+$-swiper-nav-btn-size: var(--wot-swiper-nav-btn-size, 48rpx) !default;
+
+/* segmented */
+$-segmented-padding: var(--wot-segmented-padding, 4px) !default; // 分段器padding
+$-segmented-item-bg-color: var(--wot-segmented-item-bg-color, #eeeeee) !default;
+$-segmented-item-color: var(--wot-segmented-item-color, rgba(0, 0, 0, 0.85)) !default; // 标题文字颜色
+$-segmented-item-acitve-bg: var(--wot-segmented-item-acitve-bg, #ffffff) !default; // 标题文字颜色
+$-segmented-item-disabled-color: var(--wot-segmented-item-disabled-color, rgba(0, 0, 0, 0.25)) !default; // 标题文字禁用颜色
+
+/* tabbar */
+$-tabbar-height: var(--wot-tabbar-height, 50px) !default;
+$-tabbar-box-shadow: var(
+  --wot-tabbar-box-shadow,
+  0 6px 30px 5px rgba(0, 0, 0, 0.05),
+  0 16px 24px 2px rgba(0, 0, 0, 0.04),
+  0 8px 10px -5px rgba(0, 0, 0, 0.08)
+) !default; // round类型tabbar阴影
+
+/* tabbar-item */
+$-tabbar-item-title-font-size: var(--wot-tabbar-item-title-font-size, 10px) !default; // tabbar选项文字大小
+$-tabbar-item-title-line-height: var(--wot-tabbar-item-title-line-height, initial) !default; // tabbar选项标题文字行高
+$-tabbar-inactive-color: var(--wot-tabbar-inactive-color, $-color-title) !default; // 标题文字和图标颜色
+$-tabbar-active-color: var(--wot-tabbar-active-color, $-color-theme) !default; // 选中文字和图标颜色
+$-tabbar-item-icon-size: var(--wot-tabbar-item-icon-size, 20px) !default; // tabbar选项图标大小
+
+/* navbar */
+$-navbar-height: var(--wot-navbar-height, 44px) !default; // navbar高度
+$-navbar-color: var(--wot-navbar-color, $-font-gray-1) !default; // navbar字体颜色
+$-navbar-background: var(--wot-navbar-background, $-color-white) !default; // navbar背景颜色
+$-navbar-arrow-size: var(--wot-navbar-arrow-size, 24px) !default; // navbar左箭头图标大小
+$-navbar-desc-font-size: var(--wot-navbar-desc-font-size, 16px); // navbar 左箭头字体大小
+$-navbar-desc-font-color: var(--wot-navbar-desc-font-color, $-font-gray-1) !default; // navbar左右两侧字体颜色
+$-navbar-title-font-size: var(--wot-navbar-title-font-size, 18px); // navbar title字体大小
+$-navbar-title-font-weight: var(--wot-navbar-title-font-weight, 600); // navbar title字重
+$-navbar-disabled-opacity: var(--wot-navbar-disabled-opacity, 0.6) !default; // navbar左右两侧字体禁用
+$-navbar-hover-color: var(--wot-navbar-hover-color, #eee) !default; // navbar hover样式
+
+/* navbar-capsule */
+$-navbar-capsule-border-color: var(--wot-navbar-capsule-border-color, #e7e7e7) !default;
+$-navbar-capsule-border-radius: var(--wot-navbar-capsule-border-radius, 16px) !default;
+$-navbar-capsule-width: var(--wot-navbar-capsule-width, 88px) !default;
+$-navbar-capsule-height: var(--wot-navbar-capsule-height, 32px) !default;
+$-navbar-capsule-icon-size: var(--wot-navbar-capsule-icon-size, 20px) !default; // navbar capsule图标大小
+
+/* table */
+$-table-color: var(--wot-table-color, $-font-gray-1) !default; // 表格字体颜色
+$-table-bg: var(--wot-table-bg, #ffffff) !default; // 表格背景颜色
+$-table-stripe-bg: var(--wot-table-stripe-bg, #f3f3f3) !default; // 表格背景颜色
+$-table-border-color: var(--wot-table-border-color, #ececec) !default; // 表格边框颜色
+$-table-font-size: var(--wot-table-font-size, 13px) !default; // 表格字体大小
+
+/* sidebar */
+$-sidebar-bg: var(--wot-sidebar-bg, $-color-gray-1) !default; // 侧边栏背景色
+$-sidebar-width: var(--wot-sidebar-width, 104px) !default; // 侧边栏宽度
+$-sidebar-height: var(--wot-sidebar-height, 100%) !default; // 侧边栏高度
+
+/* sidebar-item */
+$-sidebar-color: var(--wot-sidebar-color, $-font-gray-1) !default;
+$-sidebar-item-height: var(--wot-sidebar-item-height, 56px) !default;
+$-sidebar-item-line-height: var(--wot-sidebar-item-line-height, 24px) !default;
+$-sidebar-disabled-color: var(--wot-side-bar-disabled-color, $-font-gray-4) !default;
+$-sidebar-active-color: var(--wot-sidebar-active-color, $-color-theme) !default; // 激活项字体颜色
+$-sidebar-active-bg: var(--wot-sidebar-active-bg, $-color-white) !default; // 激活项背景颜色
+$-sidebar-hover-bg: var(--wot-sidebar-hover-bg, $-color-gray-2) !default; // 激活项点击背景颜色
+$-sidebar-border-radius: var(--wot-sidebar-border-radius, 8px) !default;
+$-sidebar-font-size: var(--wot-sidebar-font-size, 16px) !default;
+$-sidebar-icon-size: var(--wot-sidebar-icon-size, 20px) !default;
+$-sidebar-active-border-width: var(--wot-sidebar-active-border-width, 4px) !default;
+$-sidebar-active-border-height: var(--wot-sidebar-active-border-height, 16px) !default;
+
+/* fab */
+$-fab-trigger-height: var(--wot-fab-trigger-height, 56px) !default;
+$-fab-trigger-width: var(--wot-fab-trigger-width, 56px) !default;
+$-fab-actions-padding: var(--wot-actions-padding, 12px) !default;
+$-fab-icon-fs: var(--wot-fab-icon-fs, 20px) !default;
+
+/* count-down */
+$-count-down-text-color: var(--wot-count-down-text-color, $-color-gray-8) !default;
+$-count-down-font-size: var(--wot-count-down-font-size, $-fs-content) !default;
+$-count-down-line-height: var(--wot-count-down-line-height, 20px) !default;
+
+/* keyboard */
+$-keyboard-key-height: var(--wot-keyboard-key-height, 48px) !default;
+$-keyboard-key-font-size: var(--wot-keyboard-key-font-size, 28px) !default;
+$-keyboard-key-background: var(--wot-keyboard-key-background, $-color-white) !default;
+$-keyboard-key-border-radius: var(--wot-keyboard-key-border-radius, 8px) !default;
+$-keyboard-delete-font-size: var(--wot-keyboard-delete-font-size, 16px) !default;
+$-keyboard-key-active-color: var(--wot-keyboard-key-active-color, $-color-gray-3) !default;
+$-keyboard-button-text-color: var(--wot-keyboard-button-text-color, $-color-white) !default;
+$-keyboard-button-background: var(--wot-keyboard--button-background, $-color-theme) !default;
+$-keyboard-button-active-opacity: var(--wot-keyboard-button-active-opacity, 0.6) !default;
+$-keyboard-background: var(--wot-keyboard-background, $-color-gray-2) !default;
+$-keyboard-title-height: var(--wot-keyboard-title-height, 34px) !default;
+$-keyboard-title-color: var(--wot-keyboard-title-color, $-color-gray-7) !default;
+$-keyboard-title-font-size: var(--wot-keyboard-title-font-size, 16px) !default;
+$-keyboard-close-padding: var(--wot-keyboard-title-font-size, 0 16px) !default;
+$-keyboard-close-color: var(--wot-keyboard-close-color, $-color-theme) !default;
+$-keyboard-close-font-size: var(--wot-keyboard-close-font-size, 14px) !default;
+$-keyboard-icon-size: var(--wot-keyboard-icon-size, 22px) !default;
+
+/* number-keyboard */
+$-number-keyboard-key-height: var(--wot-number-keyboard-key-height, 48px) !default;
+$-number-keyboard-key-font-size: var(--wot-number-keyboard-key-font-size, 28px) !default;
+$-number-keyboard-key-background: var(--wot-number-keyboard-key-background, $-color-white) !default;
+$-number-keyboard-key-border-radius: var(--wot-number-keyboard-key-border-radius, 8px) !default;
+$-number-keyboard-delete-font-size: var(--wot-number-keyboard-delete-font-size, 16px) !default;
+$-number-keyboard-key-active-color: var(--wot-number-keyboard-key-active-color, $-color-gray-3) !default;
+$-number-keyboard-button-text-color: var(--wot-number-keyboard-button-text-color, $-color-white) !default;
+$-number-keyboard-button-background: var(--wot-number-keyboard--button-background, $-color-theme) !default;
+$-number-keyboard-button-active-opacity: var(--wot-number-keyboard-button-active-opacity, 0.6) !default;
+$-number-keyboard-background: var(--wot-number-keyboard-background, $-color-gray-2) !default;
+$-number-keyboard-title-height: var(--wot-number-keyboard-title-height, 34px) !default;
+$-number-keyboard-title-color: var(--wot-number-keyboard-title-color, $-color-gray-7) !default;
+$-number-keyboard-title-font-size: var(--wot-number-keyboard-title-font-size, 16px) !default;
+$-number-keyboard-close-padding: var(--wot-number-keyboard-title-font-size, 0 16px) !default;
+$-number-keyboard-close-color: var(--wot-number-keyboard-close-color, $-color-theme) !default;
+$-number-keyboard-close-font-size: var(--wot-number-keyboard-close-font-size, 14px) !default;
+$-number-keyboard-icon-size: var(--wot-number-keyboard-icon-size, 22px) !default;
+
+/* passwod-input */
+$-password-input-height: var(--wot-password-input-height, 50px);
+$-password-input-margin: var(--wot-password-input-margin, 16px);
+$-password-input-font-size: var(--wot-password-input-margin, 20px);
+$-password-input-radius: var(--wot-password-input-radius, 6px);
+$-password-input-background: var(--wot-password-input-background, #fff);
+$-password-input-info-color: var(--wot-password-input-info-color, $-color-info);
+$-password-input-info-font-size: var(--wot-password-input-info-font-size, $-fs-content);
+$-password-input-border-color: var(--wot-password-border-color, #ebedf0);
+$-password-input-error-info-color: var(--wot-password-input-error-info-color, $-color-danger);
+$-password-input-dot-size: var(--wot-password-input-dot-size, 10px);
+$-password-input-dot-color: var(--wot-password-input-dot-color, $-color-gray-8);
+$-password-input-text-color: var(--wot-password-input-text-color, $-color-gray-8);
+$-password-input-cursor-color: var(--wot-password-input-cursor-color, $-color-gray-8);
+$-password-input-cursor-width: var(--wot-password-input-cursor-width, 1px);
+$-password-input-cursor-height: var(--wot-password-input-cursor-height, 40%);
+$-password-input-cursor-duration: var(--wot-password-input-cursor-duration, 1s);
+
+/* form-item */
+$-form-item-error-message-color: var(--wot-form-item-error-message-color, $-color-danger) !default;
+$-form-item-error-message-font-size: var(--wot-form-item-error-message-font-size, $-fs-secondary) !default;
+$-form-item-error-message-line-height: var(--wot-form-item-error-message-line-height, 24px) !default;
+
+/* backtop */
+$-backtop-bg: var(--wot-backtop-bg, #e1e1e1) !default;
+$-backtop-icon-size: var(--wot-backtop-icon-size, 20px) !default;
+
+/* index-bar */
+$-index-bar-index-font-size: var(--wot-index-bar-index-font-size, $-fs-aid) !default;
+
+/* text */
+$-text-info-color: var(--wot-text-info-color, $-color-info) !default;
+$-text-primary-color: var(--wot-text-primary-color, $-color-theme) !default;
+$-text-error-color: var(--wot-text-error-color, $-color-danger) !default;
+$-text-warning-color: var(--wot-text-warning-color, $-color-warning) !default;
+$-text-success-color: var(--wot-text-success-color, $-color-success) !default;
+
+/* video-preview */
+$-video-preview-bg: var(--wot-video-preview-bg, rgba(0, 0, 0, 0.8)) !default; // 背景色
+$-video-preview-close-color: var(--wot-video-preview-close-color, #fff) !default; // 图标颜色
+$-video-preview-close-font-size: var(--wot-video-preview-close-font-size, 20px) !default; // 图标大小
+
+/* img-cropper */
+$-img-cropper-icon-size: var(--wot-img-cropper-icon-size, $-fs-big) !default; // 图标大小
+$-img-cropper-icon-color: var(--wot-img-cropper-icon-color, #fff) !default; // 图标颜色
+
+/* floating-panel */
+$-floating-panel-bg: var(--wot-floating-panel-bg, $-color-white) !default; // 背景色
+$-floating-panel-radius: var(--wot-floating-panel-radius, 16px) !default; // 圆角
+$-floating-panel-z-index: var(--wot-floating-panel-z-index, 99) !default; // 层级
+$-floating-panel-header-height: var(--wot-floating-panel-header-height, 30px) !default; // 头部高度
+$-floating-panel-bar-width: var(--wot-floating-panel-bar-width, 20px) !default; // bar 宽度
+$-floating-panel-bar-height: var(--wot-floating-panel-bar-height, 3px) !default; // bar 高度
+$-floating-panel-bar-bg: var(--wot-floating-panel-bar-bg, $-color-gray-5) !default; // bar 背景色
+$-floating-panel-bar-radius: var(--wot-floating-panel-bar-radius, 4px) !default; // bar 圆角
+$-floating-panel-content-bg: var(--wot-floating-panel-content-bg, $-color-white) !default; // 内容背景色
+
+/* signature */
+$-signature-bg: var(--wot-signature-bg, $-color-white) !default; // 背景色
+$-signature-radius: var(--wot-signature-radius, 4px) !default; // 圆角
+$-signature-border: var(--wot-signature-border, 1px solid $-color-gray-5) !default; // 边框圆角
+$-signature-footer-margin-top: var(--wot-signature-footer-margin-top, 8px) !default; // 底部按钮上边距
+$-signature-button-margin-left: var(--wot-signature-button-margin-left, 8px) !default; // 底部按钮左边距
+
+
+
diff --git a/src/uni_modules/wot-design-uni/components/common/base64.ts b/src/uni_modules/wot-design-uni/components/common/base64.ts
new file mode 100644
index 0000000..65aa2e8
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/base64.ts
@@ -0,0 +1,29 @@
+const _b64chars: string[] = [...'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/']
+const _mkUriSafe = (src: string): string => src.replace(/[+/]/g, (m0: string) => (m0 === '+' ? '-' : '_')).replace(/=+\$/m, '')
+const fromUint8Array = (src: Uint8Array, rfc4648 = false): string => {
+  let b64 = ''
+  for (let i = 0, l = src.length; i < l; i += 3) {
+    const [a0, a1, a2] = [src[i], src[i + 1], src[i + 2]]
+    const ord = (a0 << 16) | (a1 << 8) | a2
+    b64 += _b64chars[ord >>> 18]
+    b64 += _b64chars[(ord >>> 12) & 63]
+    b64 += typeof a1 !== 'undefined' ? _b64chars[(ord >>> 6) & 63] : '='
+    b64 += typeof a2 !== 'undefined' ? _b64chars[ord & 63] : '='
+  }
+  return rfc4648 ? _mkUriSafe(b64) : b64
+}
+const _btoa: (s: string) => string =
+  typeof btoa === 'function'
+    ? (s: string) => btoa(s)
+    : (s: string) => {
+        if (s.charCodeAt(0) > 255) {
+          throw new RangeError('The string contains invalid characters.')
+        }
+        return fromUint8Array(Uint8Array.from(s, (c: string) => c.charCodeAt(0)))
+      }
+const utob = (src: string): string => unescape(encodeURIComponent(src))
+
+export default function encode(src: string, rfc4648 = false): string {
+  const b64 = _btoa(utob(src))
+  return rfc4648 ? _mkUriSafe(b64) : b64
+}
diff --git a/src/uni_modules/wot-design-uni/components/common/canvasHelper.ts b/src/uni_modules/wot-design-uni/components/common/canvasHelper.ts
new file mode 100644
index 0000000..ee17e14
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/canvasHelper.ts
@@ -0,0 +1,49 @@
+/**
+ * 适配 canvas 2d 上下文
+ * @param ctx canvas 2d 上下文
+ * @returns
+ */
+export function canvas2dAdapter(ctx: CanvasRenderingContext2D): UniApp.CanvasContext {
+  return Object.assign(ctx, {
+    setFillStyle(color: string | CanvasGradient) {
+      ctx.fillStyle = color
+    },
+    setStrokeStyle(color: string | CanvasGradient | CanvasPattern) {
+      ctx.strokeStyle = color
+    },
+    setLineWidth(lineWidth: number) {
+      ctx.lineWidth = lineWidth
+    },
+    setLineCap(lineCap: 'butt' | 'round' | 'square') {
+      ctx.lineCap = lineCap
+    },
+
+    setFontSize(font: string) {
+      ctx.font = font
+    },
+    setGlobalAlpha(alpha: number) {
+      ctx.globalAlpha = alpha
+    },
+    setLineJoin(lineJoin: 'bevel' | 'round' | 'miter') {
+      ctx.lineJoin = lineJoin
+    },
+    setTextAlign(align: 'left' | 'center' | 'right') {
+      ctx.textAlign = align
+    },
+    setMiterLimit(miterLimit: number) {
+      ctx.miterLimit = miterLimit
+    },
+    setShadow(offsetX: number, offsetY: number, blur: number, color: string) {
+      ctx.shadowOffsetX = offsetX
+      ctx.shadowOffsetY = offsetY
+      ctx.shadowBlur = blur
+      ctx.shadowColor = color
+    },
+    setTextBaseline(textBaseline: 'top' | 'bottom' | 'middle') {
+      ctx.textBaseline = textBaseline
+    },
+    createCircularGradient() {},
+    draw() {},
+    addColorStop() {}
+  }) as unknown as UniApp.CanvasContext
+}
diff --git a/src/uni_modules/wot-design-uni/components/common/clickoutside.ts b/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
new file mode 100644
index 0000000..0800afd
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
@@ -0,0 +1,34 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-07-02 22:51:06
+ * @LastEditTime: 2024-03-16 19:59:07
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/common/clickoutside.ts
+ * 记得注释
+ */
+let queue: any[] = []
+
+export function pushToQueue(comp: any) {
+  queue.push(comp)
+}
+
+export function removeFromQueue(comp: any) {
+  queue = queue.filter((item) => {
+    return item.$.uid !== comp.$.uid
+  })
+}
+
+export function closeOther(comp: any) {
+  queue.forEach((item) => {
+    if (item.$.uid !== comp.$.uid) {
+      item.$.exposed.close()
+    }
+  })
+}
+
+export function closeOutside() {
+  queue.forEach((item) => {
+    item.$.exposed.close()
+  })
+}
diff --git a/src/uni_modules/wot-design-uni/components/common/dayjs.ts b/src/uni_modules/wot-design-uni/components/common/dayjs.ts
new file mode 100644
index 0000000..bc3277a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/dayjs.ts
@@ -0,0 +1,148 @@
+import { isDate } from './util'
+
+/* eslint-disable */
+class Dayjs {
+  utc: boolean
+  date: Date
+  timeZone: number
+  timeZoneString: any
+  mYear: any
+  mMonth: any
+  mDay: any
+  mWeek: any
+  mHour: any
+  mMinute: any
+  mSecond: any
+  constructor(dateStr?: string | number | Date) {
+    this.utc = false
+    const parsedDate = this.parseConfig(dateStr)
+    this.date = new Date(parsedDate)
+    this.timeZone = this.date.getTimezoneOffset() / 60
+    this.timeZoneString = this.padNumber(String(-1 * this.timeZone).replace(/^(.)?(\d)/, '$10$200'), 5, '+')
+    this.mYear = this.date.getFullYear()
+    this.mMonth = this.date.getMonth()
+    this.mDay = this.date.getDate()
+    this.mWeek = this.date.getDay()
+    this.mHour = this.date.getHours()
+    this.mMinute = this.date.getMinutes()
+    this.mSecond = this.date.getSeconds()
+  }
+
+  parseConfig(dateStr?:string | number | Date) {
+    if (!dateStr) return new Date()
+    if (isDate(dateStr)) return dateStr
+    if (/^(\d){8}$/.test(dateStr as string)) {
+      this.utc = true
+      return `${(dateStr as string).substr(0, 4)}-${(dateStr as string).substr(4, 2)}-${(dateStr as string).substr(6, 2)}`
+    }
+    return dateStr
+  }
+
+  padNumber(num:string, length:number, padChar:string) {
+    return !num || num.length >= length ? num : `${Array(length + 1 - num.length).join(padChar)}${num}`
+  }
+
+  year() {
+    return this.mYear
+  }
+
+  month() {
+    return this.mMonth
+  }
+
+  unix() {
+    const timeZoneOffset = this.utc ? 60 * this.timeZone * 60 * 1000 : 0
+    return Math.floor((this.date.getTime() + timeZoneOffset) / 1000)
+  }
+
+  toString() {
+    return this.date.toUTCString()
+  }
+
+  startOf(unit:string) {
+    switch (unit) {
+      case 'year':
+        return new Dayjs(new Date(this.year(), 0, 1))
+      case 'month':
+        return new Dayjs(new Date(this.year(), this.month(), 1))
+      default:
+        return this
+    }
+  }
+
+  add(amount:number, unit:string) {
+    let interval
+    switch (unit) {
+      case 'm':
+      case 'minutes':
+        interval = 60
+        break
+      case 'h':
+      case 'hours':
+        interval = 60 * 60
+        break
+      case 'd':
+      case 'days':
+        interval = 24 * 60 * 60
+        break
+      case 'w':
+      case 'weeks':
+        interval = 7 * 24 * 60 * 60
+        break
+      default:
+        interval = 1
+    }
+    const newUnixTime = this.unix() + amount * interval
+    return new Dayjs(1000 * newUnixTime)
+  }
+
+  subtract(amount:number, unit:string) {
+    return this.add(-1 * amount, unit)
+  }
+
+  format(formatStr = 'YYYY-MM-DDTHH:mm:ssZ') {
+    const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+    return formatStr.replace(/Y{2,4}|M{1,2}|D{1,2}|d{1,4}|H{1,2}|m{1,2}|s{1,2}|Z{1,2}/g, (match) => {
+      switch (match) {
+        case 'YY':
+          return String(this.mYear).slice(-2)
+        case 'YYYY':
+          return String(this.mYear)
+        case 'M':
+          return String(this.mMonth + 1)
+        case 'MM':
+          return this.padNumber(String(this.mMonth + 1), 2, '0')
+        case 'D':
+          return String(this.mDay)
+        case 'DD':
+          return this.padNumber(String(this.mDay), 2, '0')
+        case 'd':
+          return String(this.mWeek)
+        case 'dddd':
+          return weekdays[this.mWeek]
+        case 'H':
+          return String(this.mHour)
+        case 'HH':
+          return this.padNumber(String(this.mHour), 2, '0')
+        case 'm':
+          return String(this.mMinute)
+        case 'mm':
+          return this.padNumber(String(this.mMinute), 2, '0')
+        case 's':
+          return String(this.mSecond)
+        case 'ss':
+          return this.padNumber(String(this.mSecond), 2, '0')
+        case 'Z':
+          return `${this.timeZoneString.slice(0, -2)}:00`
+        case 'ZZ':
+          return this.timeZoneString
+        default:
+          return match
+      }
+    })
+  }
+}
+
+export  function dayjs(dateStr?: string | number | Date) {
+ return new Dayjs(dateStr)
+}
diff --git a/src/uni_modules/wot-design-uni/components/common/event.ts b/src/uni_modules/wot-design-uni/components/common/event.ts
new file mode 100644
index 0000000..44a00e4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/event.ts
@@ -0,0 +1,8 @@
+export const UPDATE_MODEL_EVENT = 'update:modelValue'
+export const CHANGE_EVENT = 'change'
+export const INPUT_EVENT = 'input'
+export const CLICK_EVENT = 'click'
+export const CLOSE_EVENT = 'close'
+export const OPEN_EVENT = 'open'
+export const CONFIRM_EVENT = 'confirm'
+export const CANCEL_EVENT = 'cancel'
diff --git a/src/uni_modules/wot-design-uni/components/common/interceptor.ts b/src/uni_modules/wot-design-uni/components/common/interceptor.ts
new file mode 100644
index 0000000..d573491
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/interceptor.ts
@@ -0,0 +1,43 @@
+import { isPromise } from './util'
+
+function noop() {}
+
+export type Interceptor = (...args: any[]) => Promise<boolean> | boolean | undefined | void
+
+export function callInterceptor(
+  interceptor: Interceptor | undefined,
+  {
+    args = [],
+    done,
+    canceled,
+    error
+  }: {
+    args?: unknown[]
+    done: () => void
+    canceled?: () => void
+    error?: () => void
+  }
+) {
+  if (interceptor) {
+    // eslint-disable-next-line prefer-spread
+    const returnVal = interceptor.apply(null, args)
+
+    if (isPromise(returnVal)) {
+      returnVal
+        .then((value) => {
+          if (value) {
+            done()
+          } else if (canceled) {
+            canceled()
+          }
+        })
+        .catch(error || noop)
+    } else if (returnVal) {
+      done()
+    } else if (canceled) {
+      canceled()
+    }
+  } else {
+    done()
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/common/props.ts b/src/uni_modules/wot-design-uni/components/common/props.ts
new file mode 100644
index 0000000..ebb9dc0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/props.ts
@@ -0,0 +1,51 @@
+import type { PropType } from 'vue'
+
+export const unknownProp = null as unknown as PropType<unknown>
+
+export const numericProp = [Number, String]
+
+export const truthProp = {
+  type: Boolean,
+  default: true as const
+}
+
+export const makeRequiredProp = <T>(type: T) => ({
+  type,
+  required: true as const
+})
+
+export const makeArrayProp = <T>() => ({
+  type: Array as PropType<T[]>,
+  default: () => []
+})
+
+export const makeBooleanProp = <T>(defaultVal: T) => ({
+  type: Boolean,
+  default: defaultVal
+})
+
+export const makeNumberProp = <T>(defaultVal: T) => ({
+  type: Number,
+  default: defaultVal
+})
+
+export const makeNumericProp = <T>(defaultVal: T) => ({
+  type: numericProp,
+  default: defaultVal
+})
+
+export const makeStringProp = <T>(defaultVal: T) => ({
+  type: String as unknown as PropType<T>,
+  default: defaultVal
+})
+
+export const baseProps = {
+  /**
+   * 自定义根节点样式
+   */
+  customStyle: makeStringProp(''),
+  /**
+   * 自定义根节点样式类
+   */
+  customClass: makeStringProp('')
+}
diff --git a/src/uni_modules/wot-design-uni/components/common/util.ts b/src/uni_modules/wot-design-uni/components/common/util.ts
new file mode 100644
index 0000000..bd9deee
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/common/util.ts
@@ -0,0 +1,778 @@
+import { AbortablePromise } from './AbortablePromise'
+
+type NotUndefined<T> = T extends undefined ? never : T
+
+/**
+ * 生成uuid
+ * @returns string
+ */
+export function uuid() {
+  return s4() + s4() + s4() + s4() + s4() + s4() + s4() + s4()
+}
+
+function s4() {
+  return Math.floor((1 + Math.random()) * 0x10000)
+    .toString(16)
+    .substring(1)
+}
+
+/**
+ * @description 对num自动填充px
+ * @param {Number} num
+ * @return {string} num+px
+ */
+export function addUnit(num: number | string) {
+  return Number.isNaN(Number(num)) ? `${num}` : `${num}px`
+}
+
+/**
+ * @description 判断target是否对象
+ * @param value
+ * @return {boolean}
+ */
+export function isObj(value: any): value is object {
+  return Object.prototype.toString.call(value) === '[object Object]' || typeof value === 'object'
+}
+
+/**
+ * 获取目标原始类型
+ * @param target 任意类型
+ * @returns {string} type 数据类型
+ */
+export function getType(target: unknown): string {
+  // 得到原生类型
+  const typeStr = Object.prototype.toString.call(target)
+  // 拿到类型值
+  const match = typeStr.match(/\[object (\w+)\]/)
+  const type = match && match.length ? match[1].toLowerCase() : ''
+  // 类型值转小写并返回
+  return type
+}
+
+/**
+ * @description 默认的外部格式化函数 - picker 组件
+ * @param items - 要格式化的数据项数组或单个数据项
+ * @param kv - 配置对象，包含 labelKey 作为键值
+ * @returns 格式化后的字符串
+ */
+export const defaultDisplayFormat = function (items: any[] | Record<string, any>, kv?: { labelKey?: string }): string {
+  const labelKey: string = kv?.labelKey || 'value'
+
+  if (Array.isArray(items)) {
+    return items.map((item) => item[labelKey]).join(', ')
+  } else {
+    return items[labelKey]
+  }
+}
+
+/**
+ * @description 默认函数占位符 - pickerView组件
+ * @param value 值
+ * @return value
+ */
+export const defaultFunction = <T>(value: T): T => value
+
+/**
+ * @description 检查值是否不为空
+ * @param value 值
+ * @return {Boolean} 是否不为空
+ */
+export const isDef = <T>(value: T): value is NonNullable<T> => value !== undefined && value !== null
+
+/**
+ * @description 防止数字小于零
+ * @param {number} num
+ * @param {string} label 标签
+ */
+export const checkNumRange = (num: number, label: string = 'value'): void => {
+  if (num < 0) {
+    throw new Error(`${label} shouldn't be less than zero`)
+  }
+}
+
+/**
+ * @description 防止 pixel 无意义
+ * @param {number} num
+ * @param {string} label 标签
+ */
+export const checkPixelRange = (num: number, label: string = 'value'): void => {
+  if (num <= 0) {
+    throw new Error(`${label} should be greater than zero`)
+  }
+}
+
+/**
+ * 将 RGB 值转换为十六进制颜色代码。
+ * @param {number} r - 红色分量 (0-255)。
+ * @param {number} g - 绿色分量 (0-255)。
+ * @param {number} b - 蓝色分量 (0-255)。
+ * @returns {string} 十六进制颜色代码 (#RRGGBB)。
+ */
+export function rgbToHex(r: number, g: number, b: number): string {
+  // 将 RGB 分量组合成一个十六进制数。
+  const hex = ((r << 16) | (g << 8) | b).toString(16)
+
+  // 使用零填充十六进制数，确保它有 6 位数字（RGB 范围）。
+  const paddedHex = '#' + '0'.repeat(Math.max(0, 6 - hex.length)) + hex
+
+  return paddedHex
+}
+
+/**
+ * 将十六进制颜色代码转换为 RGB 颜色数组。
+ * @param hex 十六进制颜色代码（例如：'#RRGGBB'）
+ * @returns 包含红、绿、蓝三个颜色分量的数组
+ */
+export function hexToRgb(hex: string): number[] {
+  const rgb: number[] = []
+
+  // 从第一个字符开始，每两个字符代表一个颜色分量
+  for (let i = 1; i < 7; i += 2) {
+    // 将两个字符的十六进制转换为十进制，并添加到 rgb 数组中
+    rgb.push(parseInt('0x' + hex.slice(i, i + 2), 16))
+  }
+
+  return rgb
+}
+
+/**
+ * 计算渐变色的中间变量数组。
+ * @param {string} startColor 开始颜色
+ * @param {string} endColor 结束颜色
+ * @param {number} step 获取渲染位置，默认为中间位置
+ * @returns {string[]} 渐变色中间颜色变量数组
+ */
+export const gradient = (startColor: string, endColor: string, step: number = 2): string[] => {
+  // 将hex转换为rgb
+  const sColor: number[] = hexToRgb(startColor)
+  const eColor: number[] = hexToRgb(endColor)
+
+  // 计算R\G\B每一步的差值
+  const rStep: number = (eColor[0] - sColor[0]) / step
+  const gStep: number = (eColor[1] - sColor[1]) / step
+  const bStep: number = (eColor[2] - sColor[2]) / step
+
+  const gradientColorArr: string[] = []
+  for (let i = 0; i < step; i++) {
+    // 计算每一步的hex值
+    gradientColorArr.push(
+      rgbToHex(parseInt(String(rStep * i + sColor[0])), parseInt(String(gStep * i + sColor[1])), parseInt(String(bStep * i + sColor[2])))
+    )
+  }
+  return gradientColorArr
+}
+
+/**
+ * 确保数值不超出指定范围。
+ * @param {number} num 要限制范围的数值
+ * @param {number} min 最小范围
+ * @param {number} max 最大范围
+ * @returns {number} 在指定范围内的数值
+ */
+export const range = (num: number, min: number, max: number): number => {
+  // 使用 Math.min 和 Math.max 保证 num 不会超出指定范围
+  return Math.min(Math.max(num, min), max)
+}
+
+/**
+ * 比较两个值是否相等。
+ * @param {any} value1 第一个值
+ * @param {any} value2 第二个值
+ * @returns {boolean} 如果值相等则为 true，否则为 false
+ */
+export const isEqual = (value1: any, value2: any): boolean => {
+  // 使用严格相等运算符比较值是否相等
+  if (value1 === value2) {
+    return true
+  }
+
+  // 如果其中一个值不是数组，则认为值不相等
+  if (!Array.isArray(value1) || !Array.isArray(value2)) {
+    return false
+  }
+
+  // 如果数组长度不相等，则认为值不相等
+  if (value1.length !== value2.length) {
+    return false
+  }
+
+  // 逐个比较数组元素是否相等
+  for (let i = 0; i < value1.length; ++i) {
+    if (value1[i] !== value2[i]) {
+      return false
+    }
+  }
+
+  // 所有比较均通过，则认为值相等
+  return true
+}
+
+/**
+ * 在数字前补零，使其达到指定长度。
+ * @param {number | string} number 要补零的数字
+ * @param {number} length 目标长度，默认为 2
+ * @returns {string} 补零后的结果
+ */
+export const padZero = (number: number | string, length: number = 2): string => {
+  // 将输入转换为字符串
+  let numStr: string = number.toString()
+
+  // 在数字前补零，直到达到指定长度
+  while (numStr.length < length) {
+    numStr = '0' + numStr
+  }
+
+  return numStr
+}
+
+/** @description 全局变量id */
+export const context = {
+  id: 1000
+}
+
+export type RectResultType<T extends boolean> = T extends true ? UniApp.NodeInfo[] : UniApp.NodeInfo
+
+/**
+ * 获取节点信息
+ * @param selector 节点选择器 #id,.class
+ * @param all 是否返回所有 selector 对应的节点
+ * @param scope 作用域（支付宝小程序无效）
+ * @param useFields 是否使用 fields 方法获取节点信息
+ * @returns 节点信息或节点信息数组
+ */
+export function getRect<T extends boolean>(selector: string, all: T, scope?: any, useFields?: boolean): Promise<RectResultType<T>> {
+  return new Promise<RectResultType<T>>((resolve, reject) => {
+    let query: UniNamespace.SelectorQuery | null = null
+    if (scope) {
+      query = uni.createSelectorQuery().in(scope)
+    } else {
+      query = uni.createSelectorQuery()
+    }
+
+    const method = all ? 'selectAll' : 'select'
+
+    const callback = (rect: UniApp.NodeInfo | UniApp.NodeInfo[]) => {
+      if (all && isArray(rect) && rect.length > 0) {
+        resolve(rect as RectResultType<T>)
+      } else if (!all && rect) {
+        resolve(rect as RectResultType<T>)
+      } else {
+        reject(new Error('No nodes found'))
+      }
+    }
+
+    if (useFields) {
+      query[method](selector).fields({ size: true, node: true }, callback).exec()
+    } else {
+      query[method](selector).boundingClientRect(callback).exec()
+    }
+  })
+}
+
+/**
+ * 将驼峰命名转换为短横线命名。
+ * @param {string} word 待转换的词条
+ * @returns {string} 转换后的结果
+ */
+export function kebabCase(word: string): string {
+  // 使用正则表达式匹配所有大写字母，并在前面加上短横线，然后转换为小写
+  const newWord: string = word
+    .replace(/[A-Z]/g, function (match) {
+      return '-' + match
+    })
+    .toLowerCase()
+
+  return newWord
+}
+
+/**
+ * 将短横线链接转换为驼峰命名
+ * @param word 需要转换的短横线链接
+ * @returns 转换后的驼峰命名字符串
+ */
+export function camelCase(word: string): string {
+  return word.replace(/-(\w)/g, (_, c) => c.toUpperCase())
+}
+
+/**
+ * 检查给定值是否为数组。
+ * @param {any} value 要检查的值
+ * @returns {boolean} 如果是数组则返回 true，否则返回 false
+ */
+export function isArray(value: any): value is Array<any> {
+  // 如果 Array.isArray 函数可用，直接使用该函数检查
+  if (typeof Array.isArray === 'function') {
+    return Array.isArray(value)
+  }
+  // 否则，使用对象原型的 toString 方法进行检查
+  return Object.prototype.toString.call(value) === '[object Array]'
+}
+
+/**
+ * 检查给定值是否为函数。
+ * @param {any} value 要检查的值
+ * @returns {boolean} 如果是函数则返回 true，否则返回 false
+ */
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function isFunction<T extends Function>(value: any): value is T {
+  return getType(value) === 'function' || getType(value) === 'asyncfunction'
+}
+
+/**
+ * 检查给定值是否为字符串。
+ * @param {unknown} value 要检查的值
+ * @returns {value is string} 如果是字符串则返回 true，否则返回 false
+ */
+export function isString(value: unknown): value is string {
+  return getType(value) === 'string'
+}
+
+/**
+ * 否是数值
+ * @param {*} value
+ */
+export function isNumber(value: any): value is number {
+  return getType(value) === 'number'
+}
+
+/**
+ * 检查给定值是否为 Promise 对象。
+ * @param {unknown} value 要检查的值
+ * @returns {value is Promise<any>} 如果是 Promise 对象则返回 true，否则返回 false
+ */
+export function isPromise(value: unknown): value is Promise<any> {
+  // 先将 value 断言为 object 类型
+  if (isObj(value) && isDef(value)) {
+    // 然后进一步检查 value 是否具有 then 和 catch 方法，并且它们是函数类型
+    return isFunction((value as Promise<any>).then) && isFunction((value as Promise<any>).catch)
+  }
+  return false // 如果 value 不是对象类型，则肯定不是 Promise
+}
+
+/**
+ * 检查给定的值是否为布尔类型
+ * @param value 要检查的值
+ * @returns 如果值为布尔类型，则返回true，否则返回false
+ */
+export function isBoolean(value: any): value is boolean {
+  return typeof value === 'boolean'
+}
+
+export function isUndefined(value: any): value is undefined {
+  return typeof value === 'undefined'
+}
+
+export function isNotUndefined<T>(value: T): value is NotUndefined<T> {
+  return !isUndefined(value)
+}
+
+/**
+ * 检查给定的值是否为奇数
+ * @param value 要检查的值
+ * @returns
+ */
+export function isOdd(value: number): boolean {
+  if (typeof value !== 'number') {
+    throw new Error('输入必须为数字')
+  }
+
+  // 使用取模运算符来判断是否为奇数
+  // 如果 number 除以 2 的余数为 1，就是奇数
+  // 否则是偶数
+  return value % 2 === 1
+}
+
+/**
+ * 是否为base64图片
+ * @param {string} url
+ * @return
+ */
+export function isBase64Image(url: string) {
+  // 使用正则表达式检查URL是否以"data:image"开头，这是Base64图片的常见前缀
+  return /^data:image\/(png|jpg|jpeg|gif|bmp);base64,/.test(url)
+}
+
+/**
+ * 将外部传入的样式格式化为可读的 CSS 样式。
+ * @param {object | object[]} styles 外部传入的样式对象或数组
+ * @returns {string} 格式化后的 CSS 样式字符串
+ */
+export function objToStyle(styles: Record<string, any> | Record<string, any>[]): string {
+  // 如果 styles 是数组类型
+  if (isArray(styles)) {
+    // 使用过滤函数去除空值和 null 值的元素
+    // 对每个非空元素递归调用 objToStyle，然后通过分号连接
+    const result = styles
+      .filter(function (item) {
+        return item != null && item !== ''
+      })
+      .map(function (item) {
+        return objToStyle(item)
+      })
+      .join(';')
+
+    // 如果结果不为空，确保末尾有分号
+    return result ? (result.endsWith(';') ? result : result + ';') : ''
+  }
+
+  if (isString(styles)) {
+    // 如果是字符串且不为空，确保末尾有分号
+    return styles ? (styles.endsWith(';') ? styles : styles + ';') : ''
+  }
+
+  // 如果 styles 是对象类型
+  if (isObj(styles)) {
+    // 使用 Object.keys 获取所有属性名
+    // 使用过滤函数去除值为 null 或空字符串的属性
+    // 对每个属性名和属性值进行格式化，通过分号连接
+    const result = Object.keys(styles)
+      .filter(function (key) {
+        return styles[key] != null && styles[key] !== ''
+      })
+      .map(function (key) {
+        // 使用 kebabCase 函数将属性名转换为 kebab-case 格式
+        // 将属性名和属性值格式化为 CSS 样式的键值对
+        return [kebabCase(key), styles[key]].join(':')
+      })
+      .join(';')
+
+    // 如果结果不为空，确保末尾有分号
+    return result ? (result.endsWith(';') ? result : result + ';') : ''
+  }
+  // 如果 styles 不是对象也不是数组，则直接返回
+  return ''
+}
+
+/**
+ * 判断一个对象是否包含任何字段
+ * @param obj 要检查的对象
+ * @returns {boolean} 如果对象为空（不包含任何字段）则返回 true，否则返回 false
+ */
+export function hasFields(obj: unknown): boolean {
+  // 如果不是对象类型或为 null，则认为没有字段
+  if (!isObj(obj) || obj === null) {
+    return false
+  }
+
+  // 使用 Object.keys 检查对象是否有属性
+  return Object.keys(obj).length > 0
+}
+
+/**
+ * 判断一个对象是否为空对象（不包含任何字段）
+ * @param obj 要检查的对象
+ * @returns {boolean} 如果对象为空（不包含任何字段）则返回 true，否则返回 false
+ */
+export function isEmptyObj(obj: unknown): boolean {
+  return !hasFields(obj)
+}
+
+export const requestAnimationFrame = (cb = () => {}) => {
+  return new AbortablePromise((resolve) => {
+    const timer = setInterval(() => {
+      clearInterval(timer)
+      resolve(true)
+      cb()
+    }, 1000 / 30)
+  })
+}
+
+/**
+ * 暂停指定时间函数
+ * @param ms 延迟时间
+ * @returns
+ */
+export const pause = (ms: number = 1000 / 30) => {
+  return new AbortablePromise((resolve) => {
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      resolve(true)
+    }, ms)
+  })
+}
+
+/**
+ * 深拷贝函数，用于将对象进行完整复制。
+ * @param obj 要深拷贝的对象
+ * @param cache 用于缓存已复制的对象，防止循环引用
+ * @returns 深拷贝后的对象副本
+ */
+export function deepClone<T>(obj: T, cache: Map<any, any> = new Map()): T {
+  // 如果对象为 null 或或者不是对象类型，则直接返回该对象
+  if (obj === null || typeof obj !== 'object') {
+    return obj
+  }
+
+  // 处理特殊对象类型：日期、正则表达式、错误对象
+  if (isDate(obj)) {
+    return new Date(obj.getTime()) as any
+  }
+  if (obj instanceof RegExp) {
+    return new RegExp(obj.source, obj.flags) as any
+  }
+  if (obj instanceof Error) {
+    const errorCopy = new Error(obj.message) as any
+    errorCopy.stack = obj.stack
+    return errorCopy
+  }
+
+  // 检查缓存中是否已存在该对象的复制
+  if (cache.has(obj)) {
+    return cache.get(obj)
+  }
+
+  // 根据原始对象的类型创建对应的空对象或数组
+  const copy: any = Array.isArray(obj) ? [] : {}
+
+  // 将当前对象添加到缓存中
+  cache.set(obj, copy)
+
+  // 递归地深拷贝对象的每个属性
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key)) {
+      copy[key] = deepClone(obj[key], cache)
+    }
+  }
+
+  return copy as T
+}
+
+/**
+ * 深度合并两个对象。
+ * @param target 目标对象，将合并的结果存放在此对象中
+ * @param source 源对象，要合并到目标对象的对象
+ * @returns 合并后的目标对象
+ */
+export function deepMerge<T extends Record<string, any>>(target: T, source: Record<string, any>): T {
+  // 深拷贝目标对象，避免修改原始对象
+  target = deepClone(target)
+
+  // 检查目标和源是否都是对象类型
+  if (typeof target !== 'object' || typeof source !== 'object') {
+    throw new Error('Both target and source must be objects.')
+  }
+
+  // 遍历源对象的属性
+  for (const prop in source) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!source.hasOwnProperty(prop))
+      continue
+      // 使用类型断言，告诉 TypeScript 这是有效的属性
+    ;(target as Record<string, any>)[prop] = source[prop]
+  }
+
+  return target
+}
+
+/**
+ * 深度合并两个对象。
+ * @param target
+ * @param source
+ * @returns
+ */
+export function deepAssign(target: Record<string, any>, source: Record<string, any>): Record<string, any> {
+  Object.keys(source).forEach((key) => {
+    const targetValue = target[key]
+    const newObjValue = source[key]
+    if (isObj(targetValue) && isObj(newObjValue)) {
+      deepAssign(targetValue, newObjValue)
+    } else {
+      target[key] = newObjValue
+    }
+  })
+  return target
+}
+
+/**
+ * 构建带参数的URL
+ * @param baseUrl 基础URL
+ * @param params 参数对象，键值对表示要添加到URL的参数
+ * @returns 返回带有参数的URL
+ */
+export function buildUrlWithParams(baseUrl: string, params: Record<string, string>) {
+  // 将参数对象转换为查询字符串
+  const queryString = Object.entries(params)
+    .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+    .join('&')
+
+  // 检查基础URL是否已包含查询字符串，并选择适当的分隔符
+  const separator = baseUrl.includes('?') ? '&' : '?'
+
+  // 返回带有参数的URL
+  return `${baseUrl}${separator}${queryString}`
+}
+
+type DebounceOptions = {
+  leading?: boolean // 是否在延迟时间开始时调用函数
+  trailing?: boolean // 是否在延迟时间结束时调用函数
+}
+
+export function debounce<T extends (...args: any[]) => any>(func: T, wait: number, options: DebounceOptions = {}): T {
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+  let lastArgs: any[] | undefined
+  let lastThis: any
+  let result: ReturnType<T> | undefined
+  const leading = isDef(options.leading) ? options.leading : false
+  const trailing = isDef(options.trailing) ? options.trailing : true
+
+  function invokeFunc() {
+    if (lastArgs !== undefined) {
+      result = func.apply(lastThis, lastArgs)
+      lastArgs = undefined
+    }
+  }
+
+  function startTimer() {
+    timeoutId = setTimeout(() => {
+      timeoutId = null
+      if (trailing) {
+        invokeFunc()
+      }
+    }, wait)
+  }
+
+  function cancelTimer() {
+    if (timeoutId !== null) {
+      clearTimeout(timeoutId)
+      timeoutId = null
+    }
+  }
+
+  function debounced(this: any, ...args: Parameters<T>): ReturnType<T> | undefined {
+    lastArgs = args
+    lastThis = this
+
+    if (timeoutId === null) {
+      if (leading) {
+        invokeFunc()
+      }
+      startTimer()
+    } else if (trailing) {
+      cancelTimer()
+      startTimer()
+    }
+
+    return result
+  }
+
+  return debounced as T
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+export function throttle(func: Function, wait: number): Function {
+  let timeout: ReturnType<typeof setTimeout> | null = null
+  let previous: number = 0
+
+  const throttled = function (this: any, ...args: any[]) {
+    const now = Date.now()
+    const remaining = wait - (now - previous)
+
+    if (remaining <= 0) {
+      if (timeout) {
+        clearTimeout(timeout)
+        timeout = null
+      }
+      previous = now
+      func.apply(this, args)
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        previous = Date.now()
+        timeout = null
+        func.apply(this, args)
+      }, remaining)
+    }
+  }
+
+  return throttled
+}
+
+/**
+ * 根据属性路径获取对象中的属性值
+ * @param obj 目标对象
+ * @param path 属性路径，可以是字符串或字符串数组
+ * @returns 属性值，如果属性不存在或中间的属性为 null 或 undefined，则返回 undefined
+ */
+export const getPropByPath = (obj: any, path: string): any => {
+  const keys: string[] = path.split('.')
+
+  try {
+    return keys.reduce((acc: any, key: string) => (acc !== undefined && acc !== null ? acc[key] : undefined), obj)
+  } catch (error) {
+    return undefined
+  }
+}
+
+/**
+ * 检查一个值是否为Date类型
+ * @param val 要检查的值
+ * @returns 如果值是Date类型，则返回true，否则返回false
+ */
+export const isDate = (val: unknown): val is Date => Object.prototype.toString.call(val) === '[object Date]' && !Number.isNaN((val as Date).getTime())
+
+/**
+ * 检查提供的URL是否为视频链接。
+ * @param url 需要检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是视频链接则为true，否则为false。
+ */
+export function isVideoUrl(url: string): boolean {
+  // 使用正则表达式匹配视频文件类型的URL
+  const videoRegex = /\.(mp4|mpg|mpeg|dat|asf|avi|rm|rmvb|mov|wmv|flv|mkv|video)/i
+  return videoRegex.test(url)
+}
+
+/**
+ * 检查提供的URL是否为图片URL。
+ * @param url 待检查的URL字符串。
+ * @returns 返回一个布尔值，如果URL是图片格式，则为true；否则为false。
+ */
+export function isImageUrl(url: string): boolean {
+  // 使用正则表达式匹配图片URL
+  const imageRegex = /\.(jpeg|jpg|gif|png|svg|webp|jfif|bmp|dpg|image)/i
+  return imageRegex.test(url)
+}
+
+/**
+ * 判断环境是否是H5
+ */
+export const isH5 = (() => {
+  let isH5 = false
+  // #ifdef H5
+  isH5 = true
+  // #endif
+  return isH5
+})()
+
+/**
+ * 剔除对象中的某些属性
+ * @param obj
+ * @param predicate
+ * @returns
+ */
+export function omitBy<O extends Record<string, any>>(obj: O, predicate: (value: any, key: keyof O) => boolean): Partial<O> {
+  const newObj = deepClone(obj)
+  Object.keys(newObj).forEach((key) => predicate(newObj[key], key) && delete newObj[key]) // 遍历对象的键，删除值为不满足predicate的字段
+  return newObj
+}
+
+/**
+ * 缓动函数，用于在动画或过渡效果中根据时间参数计算当前值
+ * @param t 当前时间，通常是从动画开始经过的时间
+ * @param b 初始值，动画属性的初始值
+ * @param c 变化量，动画属性的目标值与初始值的差值
+ * @param d 持续时间，动画持续的总时间长度
+ * @returns 计算出的当前值
+ */
+export function easingFn(t: number = 0, b: number = 0, c: number = 0, d: number = 0): number {
+  return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b
+}
+
+/**
+ * 从数组中寻找最接近目标值的元素
+ *
+ * @param arr 数组
+ * @param target 目标值
+ * @returns 最接近目标值的元素
+ */
+export function closest(arr: number[], target: number) {
+  return arr.reduce((prev, curr) => (Math.abs(curr - target) < Math.abs(prev - target) ? curr : prev))
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useCell.ts b/src/uni_modules/wot-design-uni/components/composables/useCell.ts
new file mode 100644
index 0000000..d245312
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useCell.ts
@@ -0,0 +1,13 @@
+import { computed } from 'vue'
+import { useParent } from './useParent'
+import { CELL_GROUP_KEY } from '../wd-cell-group/types'
+
+export function useCell() {
+  const { parent: cellGroup, index } = useParent(CELL_GROUP_KEY)
+
+  const border = computed(() => {
+    return cellGroup && cellGroup.props.border && index.value
+  })
+
+  return { border }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useChildren.ts b/src/uni_modules/wot-design-uni/components/composables/useChildren.ts
new file mode 100644
index 0000000..b52ac9b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useChildren.ts
@@ -0,0 +1,113 @@
+import {
+  provide,
+  reactive,
+  getCurrentInstance,
+  type VNode,
+  type InjectionKey,
+  type VNodeNormalizedChildren,
+  type ComponentPublicInstance,
+  type ComponentInternalInstance
+} from 'vue'
+
+// 小程序端不支持从vue导出的isVNode方法，参考uni-mp-vue的实现
+function isVNode(value: any): value is VNode {
+  return value ? value.__v_isVNode === true : false
+}
+
+export function flattenVNodes(children: VNodeNormalizedChildren) {
+  const result: VNode[] = []
+
+  const traverse = (children: VNodeNormalizedChildren) => {
+    if (Array.isArray(children)) {
+      children.forEach((child) => {
+        if (isVNode(child)) {
+          result.push(child)
+
+          if (child.component?.subTree) {
+            result.push(child.component.subTree)
+            traverse(child.component.subTree.children)
+          }
+
+          if (child.children) {
+            traverse(child.children)
+          }
+        }
+      })
+    }
+  }
+
+  traverse(children)
+
+  return result
+}
+
+const findVNodeIndex = (vnodes: VNode[], vnode: VNode) => {
+  const index = vnodes.indexOf(vnode)
+  if (index === -1) {
+    return vnodes.findIndex((item) => vnode.key !== undefined && vnode.key !== null && item.type === vnode.type && item.key === vnode.key)
+  }
+  return index
+}
+
+// sort children instances by vnodes order
+export function sortChildren(
+  parent: ComponentInternalInstance,
+  publicChildren: ComponentPublicInstance[],
+  internalChildren: ComponentInternalInstance[]
+) {
+  const vnodes = parent && parent.subTree && parent.subTree.children ? flattenVNodes(parent.subTree.children) : []
+
+  internalChildren.sort((a, b) => findVNodeIndex(vnodes, a.vnode) - findVNodeIndex(vnodes, b.vnode))
+
+  const orderedPublicChildren = internalChildren.map((item) => item.proxy!)
+
+  publicChildren.sort((a, b) => {
+    const indexA = orderedPublicChildren.indexOf(a)
+    const indexB = orderedPublicChildren.indexOf(b)
+    return indexA - indexB
+  })
+}
+
+export function useChildren<
+  // eslint-disable-next-line
+  Child extends ComponentPublicInstance = ComponentPublicInstance<{}, any>,
+  ProvideValue = never
+>(key: InjectionKey<ProvideValue>) {
+  const publicChildren: Child[] = reactive([])
+  const internalChildren: ComponentInternalInstance[] = reactive([])
+  const parent = getCurrentInstance()!
+
+  const linkChildren = (value?: ProvideValue) => {
+    const link = (child: ComponentInternalInstance) => {
+      if (child.proxy) {
+        internalChildren.push(child)
+        publicChildren.push(child.proxy as Child)
+        sortChildren(parent, publicChildren, internalChildren)
+      }
+    }
+
+    const unlink = (child: ComponentInternalInstance) => {
+      const index = internalChildren.indexOf(child)
+      publicChildren.splice(index, 1)
+      internalChildren.splice(index, 1)
+    }
+
+    provide(
+      key,
+      Object.assign(
+        {
+          link,
+          unlink,
+          children: publicChildren,
+          internalChildren
+        },
+        value
+      )
+    )
+  }
+
+  return {
+    children: publicChildren,
+    linkChildren
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useCountDown.ts b/src/uni_modules/wot-design-uni/components/composables/useCountDown.ts
new file mode 100644
index 0000000..50746e4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useCountDown.ts
@@ -0,0 +1,138 @@
+import { ref, computed, onBeforeUnmount } from 'vue'
+import { isDef } from '../common/util'
+import { useRaf } from './useRaf'
+
+// 定义倒计时时间的数据结构
+export type CurrentTime = {
+  days: number
+  hours: number
+  total: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
+// 定义倒计时的配置项
+export type UseCountDownOptions = {
+  time: number // 倒计时总时间，单位为毫秒
+  millisecond?: boolean // 是否开启毫秒级倒计时，默认为 false
+  onChange?: (current: CurrentTime) => void // 倒计时每次变化时的回调函数
+  onFinish?: () => void // 倒计时结束时的回调函数
+}
+
+// 定义常量
+const SECOND = 1000
+const MINUTE = 60 * SECOND
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+
+// 将时间转换为倒计时数据结构
+function parseTime(time: number): CurrentTime {
+  const days = Math.floor(time / DAY)
+  const hours = Math.floor((time % DAY) / HOUR)
+  const minutes = Math.floor((time % HOUR) / MINUTE)
+  const seconds = Math.floor((time % MINUTE) / SECOND)
+  const milliseconds = Math.floor(time % SECOND)
+
+  return {
+    total: time,
+    days,
+    hours,
+    minutes,
+    seconds,
+    milliseconds
+  }
+}
+
+// 判断两个时间是否在同一秒内
+function isSameSecond(time1: number, time2: number): boolean {
+  return Math.floor(time1 / 1000) === Math.floor(time2 / 1000)
+}
+
+// 定义 useCountDown 函数
+export function useCountDown(options: UseCountDownOptions) {
+  let endTime: number // 结束时间
+  let counting: boolean // 是否计时中
+
+  const { start: startRaf, cancel: cancelRaf } = useRaf(tick)
+
+  const remain = ref(options.time) // 剩余时间
+  const current = computed(() => parseTime(remain.value)) // 当前倒计时数据
+
+  // 暂停倒计时
+  const pause = () => {
+    counting = false
+    cancelRaf()
+  }
+
+  // 获取当前剩余时间
+  const getCurrentRemain = () => Math.max(endTime - Date.now(), 0)
+
+  // 设置剩余时间
+  const setRemain = (value: number) => {
+    remain.value = value
+    isDef(options.onChange) && options.onChange(current.value)
+    if (value === 0) {
+      pause()
+      isDef(options.onFinish) && options.onFinish()
+    }
+  }
+
+  // 每毫秒更新一次倒计时
+  const microTick = () => {
+    if (counting) {
+      setRemain(getCurrentRemain())
+      if (remain.value > 0) {
+        startRaf()
+      }
+    }
+  }
+
+  // 每秒更新一次倒计时
+  const macroTick = () => {
+    if (counting) {
+      const remainRemain = getCurrentRemain()
+      if (!isSameSecond(remainRemain, remain.value) || remainRemain === 0) {
+        setRemain(remainRemain)
+      }
+
+      if (remain.value > 0) {
+        startRaf()
+      }
+    }
+  }
+
+  // 根据配置项选择更新方式
+  function tick() {
+    if (options.millisecond) {
+      microTick()
+    } else {
+      macroTick()
+    }
+  }
+
+  // 开始倒计时
+  const start = () => {
+    if (!counting) {
+      endTime = Date.now() + remain.value
+      counting = true
+      startRaf()
+    }
+  }
+
+  // 重置倒计时
+  const reset = (totalTime: number = options.time) => {
+    pause()
+    remain.value = totalTime
+  }
+
+  // 在组件卸载前暂停倒计时
+  onBeforeUnmount(pause)
+
+  return {
+    start,
+    pause,
+    reset,
+    current
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts b/src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts
new file mode 100644
index 0000000..4f45468
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useLockScroll.ts
@@ -0,0 +1,39 @@
+import { onBeforeUnmount, onDeactivated, ref, watch } from 'vue'
+
+function useLockScroll(shouldLock: () => boolean) {
+  const scrollLockCount = ref(0)
+
+  const lock = () => {
+    if (scrollLockCount.value === 0) {
+      document.getElementsByTagName('body')[0].style.overflow = 'hidden'
+    }
+    scrollLockCount.value++
+  }
+
+  const unlock = () => {
+    if (scrollLockCount.value > 0) {
+      scrollLockCount.value--
+      if (scrollLockCount.value === 0) {
+        document.getElementsByTagName('body')[0].style.overflow = ''
+      }
+    }
+  }
+
+  const destroy = () => {
+    shouldLock() && unlock()
+  }
+
+  watch(shouldLock, (value) => {
+    value ? lock() : unlock()
+  })
+
+  onDeactivated(destroy)
+  onBeforeUnmount(destroy)
+
+  return {
+    lock,
+    unlock
+  }
+}
+
+export default useLockScroll
diff --git a/src/uni_modules/wot-design-uni/components/composables/useParent.ts b/src/uni_modules/wot-design-uni/components/composables/useParent.ts
new file mode 100644
index 0000000..f48fea9
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useParent.ts
@@ -0,0 +1,41 @@
+import {
+  ref,
+  inject,
+  computed,
+  onUnmounted,
+  type InjectionKey,
+  getCurrentInstance,
+  type ComponentPublicInstance,
+  type ComponentInternalInstance
+} from 'vue'
+
+type ParentProvide<T> = T & {
+  link(child: ComponentInternalInstance): void
+  unlink(child: ComponentInternalInstance): void
+  children: ComponentPublicInstance[]
+  internalChildren: ComponentInternalInstance[]
+}
+
+export function useParent<T>(key: InjectionKey<ParentProvide<T>>) {
+  const parent = inject(key, null)
+
+  if (parent) {
+    const instance = getCurrentInstance()!
+    const { link, unlink, internalChildren } = parent
+
+    link(instance)
+    onUnmounted(() => unlink(instance))
+
+    const index = computed(() => internalChildren.indexOf(instance))
+
+    return {
+      parent,
+      index
+    }
+  }
+
+  return {
+    parent: null,
+    index: ref(-1)
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/usePopover.ts b/src/uni_modules/wot-design-uni/components/composables/usePopover.ts
new file mode 100644
index 0000000..1c61641
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/usePopover.ts
@@ -0,0 +1,176 @@
+import { getCurrentInstance, ref } from 'vue'
+import { getRect, isObj } from '../common/util'
+
+export function usePopover(visibleArrow = true) {
+  const { proxy } = getCurrentInstance() as any
+  const popStyle = ref<string>('')
+  const arrowStyle = ref<string>('')
+  const showStyle = ref<string>('')
+  const arrowClass = ref<string>('')
+  const popWidth = ref<number>(0)
+  const popHeight = ref<number>(0)
+  const left = ref<number>(0)
+  const bottom = ref<number>(0)
+  const width = ref<number>(0)
+  const height = ref<number>(0)
+  const top = ref<number>(0)
+
+  function noop() {}
+
+  function init(
+    placement:
+      | 'top'
+      | 'top-start'
+      | 'top-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left'
+      | 'left-start'
+      | 'left-end'
+      | 'right'
+      | 'right-start'
+      | 'right-end',
+    visibleArrow: boolean,
+    selector: string
+  ) {
+    // 初始化 class
+    if (visibleArrow) {
+      const arrowClassArr = [
+        `wd-${selector}__arrow`,
+        placement === 'bottom' || placement === 'bottom-start' || placement === 'bottom-end' ? `wd-${selector}__arrow-up` : '',
+        placement === 'left' || placement === 'left-start' || placement === 'left-end' ? `wd-${selector}__arrow-right` : '',
+        placement === 'right' || placement === 'right-start' || placement === 'right-end' ? `wd-${selector}__arrow-left` : '',
+        placement === 'top' || placement === 'top-start' || placement === 'top-end' ? `wd-${selector}__arrow-down` : ''
+      ]
+      arrowClass.value = arrowClassArr.join(' ')
+    }
+
+    // 初始化数据获取
+    getRect('#target', false, proxy).then((rect) => {
+      if (!rect) return
+      left.value = rect.left as number
+      bottom.value = rect.bottom as number
+      width.value = rect.width as number
+      height.value = rect.height as number
+      top.value = rect.top as number
+    })
+    // 用透明度可在初始化时获取到pop尺寸
+    getRect('#pos', false, proxy).then((rect) => {
+      if (!rect) return
+      popWidth.value = rect.width as number
+      popHeight.value = rect.height as number
+    })
+  }
+
+  function control(
+    placement:
+      | 'top'
+      | 'top-start'
+      | 'top-end'
+      | 'bottom'
+      | 'bottom-start'
+      | 'bottom-end'
+      | 'left'
+      | 'left-start'
+      | 'left-end'
+      | 'right'
+      | 'right-start'
+      | 'right-end',
+    offset: number | number[] | Record<'x' | 'y', number>
+  ) {
+    // arrow size
+    const arrowSize = visibleArrow ? 9 : 0
+    // 上下位（纵轴）对应的距离左边的距离
+    const verticalX = width.value / 2
+    // 上下位（纵轴）对应的距离底部的距离
+    const verticalY = arrowSize + height.value + 5
+    // 左右位（横轴）对应的距离左边的距离
+    const horizontalX = width.value + arrowSize + 5
+    // 左右位（横轴）对应的距离底部的距离
+    const horizontalY = height.value / 2
+
+    let offsetX = 0
+    let offsetY = 0
+    if (Array.isArray(offset)) {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset[0]
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + (offset[1] ? offset[1] : offset[0])
+    } else if (isObj(offset)) {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset.x
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset.y
+    } else {
+      offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
+      offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
+    }
+    // const offsetX = (verticalX - 17 > 0 ? 0 : verticalX - 25) + offset
+    // const offsetY = (horizontalY - 17 > 0 ? 0 : horizontalY - 25) + offset
+
+    const placements = new Map([
+      // 上
+      ['top', [`left: ${verticalX}px; bottom: ${verticalY}px; transform: translateX(-50%);`, 'left: 50%;']],
+      [
+        'top-start',
+        [
+          `left: ${offsetX}px; bottom: ${verticalY}px;`,
+          `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`
+        ]
+      ],
+      [
+        'top-end',
+        [
+          `right: ${offsetX}px; bottom: ${verticalY}px;`,
+          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`
+        ]
+      ],
+      // 下
+      ['bottom', [`left: ${verticalX}px; top: ${verticalY}px; transform: translateX(-50%);`, 'left: 50%;']],
+      [
+        'bottom-start',
+        [`left: ${offsetX}px; top: ${verticalY}px;`, `left: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px;`]
+      ],
+      [
+        'bottom-end',
+        [
+          `right: ${offsetX}px; top: ${verticalY}px;`,
+          `right: ${(popWidth.value >= width.value ? width.value / 2 : popWidth.value - 25) - offsetX}px; transform: translateX(50%);`
+        ]
+      ],
+      // 左
+      ['left', [`right: ${horizontalX}px; top: ${horizontalY}px; transform: translateY(-50%);`, 'top: 50%']],
+      [
+        'left-start',
+        [
+          `right: ${horizontalX}px; top: ${offsetY}px;`,
+          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`
+        ]
+      ],
+      [
+        'left-end',
+        [
+          `right: ${horizontalX}px; bottom: ${offsetY}px;`,
+          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`
+        ]
+      ],
+      // 右
+      ['right', [`left: ${horizontalX}px; top: ${horizontalY}px; transform: translateY(-50%);`, 'top: 50%']],
+      [
+        'right-start',
+        [
+          `left: ${horizontalX}px; top: ${offsetY}px;`,
+          `top: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px;`
+        ]
+      ],
+      [
+        'right-end',
+        [
+          `left: ${horizontalX}px; bottom: ${offsetY}px;`,
+          `bottom: ${(popHeight.value >= height.value ? height.value / 2 : popHeight.value - 20) - offsetY}px; transform: translateY(50%);`
+        ]
+      ]
+    ])
+    popStyle.value = placements.get(placement)![0]
+    arrowStyle.value = placements.get(placement)![1]
+  }
+
+  return { popStyle, arrowStyle, showStyle, arrowClass, init, control, noop }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useQueue.ts b/src/uni_modules/wot-design-uni/components/composables/useQueue.ts
new file mode 100644
index 0000000..80021b3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useQueue.ts
@@ -0,0 +1,52 @@
+import { type Ref, provide, ref } from 'vue'
+
+export const queueKey = '__QUEUE_KEY__'
+
+export interface Queue {
+  queue: Ref<any[]>
+  pushToQueue: (comp: any) => void
+  removeFromQueue: (comp: any) => void
+  closeOther: (comp: any) => void
+  closeOutside: () => void
+}
+
+export function useQueue() {
+  const queue = ref<any[]>([])
+
+  function pushToQueue(comp: any) {
+    queue.value.push(comp)
+  }
+
+  function removeFromQueue(comp: any) {
+    queue.value = queue.value.filter((item) => {
+      return item.$.uid !== comp.$.uid
+    })
+  }
+
+  function closeOther(comp: any) {
+    queue.value.forEach((item) => {
+      if (item.$.uid !== comp.$.uid) {
+        item.$.exposed.close()
+      }
+    })
+  }
+
+  function closeOutside() {
+    queue.value.forEach((item) => {
+      item.$.exposed.close()
+    })
+  }
+
+  provide(queueKey, {
+    queue,
+    pushToQueue,
+    removeFromQueue,
+    closeOther,
+    closeOutside
+  })
+
+  return {
+    closeOther,
+    closeOutside
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useRaf.ts b/src/uni_modules/wot-design-uni/components/composables/useRaf.ts
new file mode 100644
index 0000000..b52c4d8
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useRaf.ts
@@ -0,0 +1,37 @@
+import { ref, onUnmounted } from 'vue'
+import { isDef, isH5, isNumber } from '../common/util'
+
+// 定义回调函数类型
+type RafCallback = (time: number) => void
+
+export function useRaf(callback: RafCallback) {
+  const requestRef = ref<number | null | ReturnType<typeof setTimeout>>(null)
+
+  // 启动动画帧
+  const start = () => {
+    const handle = (time: number) => {
+      callback(time)
+    }
+
+    if (isH5) {
+      requestRef.value = requestAnimationFrame(handle)
+    } else {
+      requestRef.value = setTimeout(() => handle(Date.now()), 1000 / 30)
+    }
+  }
+
+  // 取消动画帧
+  const cancel = () => {
+    if (isH5 && isNumber(requestRef.value)) {
+      cancelAnimationFrame(requestRef.value!)
+    } else if (isDef(requestRef.value)) {
+      clearTimeout(requestRef.value)
+    }
+  }
+
+  onUnmounted(() => {
+    cancel()
+  })
+
+  return { start, cancel }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useTouch.ts b/src/uni_modules/wot-design-uni/components/composables/useTouch.ts
new file mode 100644
index 0000000..c3e9b37
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useTouch.ts
@@ -0,0 +1,43 @@
+import { ref } from 'vue'
+
+export function useTouch() {
+  const direction = ref<string>('')
+  const deltaX = ref<number>(0)
+  const deltaY = ref<number>(0)
+  const offsetX = ref<number>(0)
+  const offsetY = ref<number>(0)
+  const startX = ref<number>(0)
+  const startY = ref<number>(0)
+
+  function touchStart(event: any) {
+    const touch = event.touches[0]
+    direction.value = ''
+    deltaX.value = 0
+    deltaY.value = 0
+    offsetX.value = 0
+    offsetY.value = 0
+    startX.value = touch.clientX
+    startY.value = touch.clientY
+  }
+
+  function touchMove(event: any) {
+    const touch = event.touches[0]
+    deltaX.value = touch.clientX - startX.value
+    deltaY.value = touch.clientY - startY.value
+    offsetX.value = Math.abs(deltaX.value)
+    offsetY.value = Math.abs(deltaY.value)
+    direction.value = offsetX.value > offsetY.value ? 'horizontal' : offsetX.value < offsetY.value ? 'vertical' : ''
+  }
+
+  return {
+    touchStart,
+    touchMove,
+    direction,
+    deltaX,
+    deltaY,
+    offsetX,
+    offsetY,
+    startX,
+    startY
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts b/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
new file mode 100644
index 0000000..79aa795
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useTranslate.ts
@@ -0,0 +1,12 @@
+import { camelCase, getPropByPath, isDef, isFunction } from '../common/util'
+import Locale from '../../locale'
+
+export const useTranslate = (name?: string) => {
+  const prefix = name ? camelCase(name) + '.' : ''
+  const translate = (key: string, ...args: unknown[]) => {
+    const currentMessages = Locale.messages()
+    const message = getPropByPath(currentMessages, prefix + key)
+    return isFunction(message) ? message(...args) : isDef(message) ? message : `${prefix}${key}`
+  }
+  return { translate }
+}
diff --git a/src/uni_modules/wot-design-uni/components/composables/useUpload.ts b/src/uni_modules/wot-design-uni/components/composables/useUpload.ts
new file mode 100644
index 0000000..283e029
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/composables/useUpload.ts
@@ -0,0 +1,326 @@
+import { isArray, isDef, isFunction } from '../common/util'
+import type { ChooseFile, ChooseFileOption, UploadFileItem, UploadMethod, UploadStatusType } from '../wd-upload/types'
+
+export const UPLOAD_STATUS: Record<string, UploadStatusType> = {
+  PENDING: 'pending',
+  LOADING: 'loading',
+  SUCCESS: 'success',
+  FAIL: 'fail'
+}
+
+export interface UseUploadReturn {
+  // 开始上传文件
+  startUpload: (file: UploadFileItem, options: UseUploadOptions) => UniApp.UploadTask | void | Promise<void>
+  // 中断上传
+  abort: (task?: UniApp.UploadTask) => void
+  // 上传状态常量
+  UPLOAD_STATUS: Record<string, UploadStatusType>
+  // 选择文件
+  chooseFile: (options: ChooseFileOption) => Promise<ChooseFile[]>
+}
+
+export interface UseUploadOptions {
+  // 上传地址
+  action: string
+  // 请求头
+  header?: Record<string, any>
+  // 文件对应的 key
+  name?: string
+  // 其它表单数据
+  formData?: Record<string, any>
+  // 文件类型 仅支付宝支持且在支付宝平台必填
+  fileType?: 'image' | 'video' | 'audio'
+  // 成功状态码
+  statusCode?: number
+  // 文件状态的key
+  statusKey?: string
+  // 自定义上传方法
+  uploadMethod?: UploadMethod
+  // 上传成功回调
+  onSuccess?: (res: UniApp.UploadFileSuccessCallbackResult, file: UploadFileItem, formData: Record<string, any>) => void
+  // 上传失败回调
+  onError?: (res: UniApp.GeneralCallbackResult, file: UploadFileItem, formData: Record<string, any>) => void
+  // 上传进度回调
+  onProgress?: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => void
+  // 是否自动中断之前的上传任务
+  abortPrevious?: boolean
+  // 根据文件拓展名过滤(H5支持全部类型过滤,微信小程序支持all和file时过滤,其余平台不支持)
+  extension?: string[]
+}
+
+export function useUpload(): UseUploadReturn {
+  let currentTask: UniApp.UploadTask | null = null
+
+  // 中断上传
+  const abort = (task?: UniApp.UploadTask) => {
+    if (task) {
+      task.abort()
+    } else if (currentTask) {
+      currentTask.abort()
+      currentTask = null
+    }
+  }
+
+  /**
+   * 默认上传方法
+   */
+  const defaultUpload: UploadMethod = (file, formData, options) => {
+    // 如果配置了自动中断,则中断之前的上传任务
+    if (options.abortPrevious) {
+      abort()
+    }
+
+    const uploadTask = uni.uploadFile({
+      url: options.action,
+      header: options.header,
+      name: options.name,
+      fileName: options.name,
+      fileType: options.fileType,
+      formData,
+      filePath: file.url,
+      success(res) {
+        if (res.statusCode === options.statusCode) {
+          // 上传成功
+          options.onSuccess(res, file, formData)
+        } else {
+          // 上传失败
+          options.onError({ ...res, errMsg: res.errMsg || '' }, file, formData)
+        }
+      },
+      fail(err) {
+        // 上传失败
+        options.onError(err, file, formData)
+      }
+    })
+
+    currentTask = uploadTask
+
+    // 获取当前文件加载的百分比
+    uploadTask.onProgressUpdate((res) => {
+      options.onProgress(res, file)
+    })
+
+    // 返回上传任务实例,让外部可以控制上传过程
+    return uploadTask
+  }
+
+  /**
+   * 开始上传文件
+   */
+  const startUpload = (file: UploadFileItem, options: UseUploadOptions) => {
+    const {
+      uploadMethod,
+      formData = {},
+      action,
+      name = 'file',
+      header = {},
+      fileType = 'image',
+      statusCode = 200,
+      statusKey = 'status',
+      abortPrevious = false
+    } = options
+
+    // 设置上传中状态
+    file[statusKey] = UPLOAD_STATUS.LOADING
+
+    const uploadOptions = {
+      action,
+      header,
+      name,
+      fileName: name,
+      fileType,
+      statusCode,
+      abortPrevious,
+      onSuccess: (res: UniApp.UploadFileSuccessCallbackResult, file: UploadFileItem, formData: Record<string, any>) => {
+        // 更新文件状态
+        file[statusKey] = UPLOAD_STATUS.SUCCESS
+        currentTask = null
+        options.onSuccess?.(res, file, formData)
+      },
+      onError: (error: UniApp.GeneralCallbackResult, file: UploadFileItem, formData: Record<string, any>) => {
+        // 更新文件状态和错误信息
+        file[statusKey] = UPLOAD_STATUS.FAIL
+        file.error = error.errMsg
+        currentTask = null
+        options.onError?.(error, file, formData)
+      },
+      onProgress: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => {
+        // 更新上传进度
+        file.percent = res.progress
+        options.onProgress?.(res, file)
+      }
+    }
+
+    // 返回上传任务实例,支持外部获取uploadTask进行操作
+    if (isFunction(uploadMethod)) {
+      return uploadMethod(file, formData, uploadOptions)
+    } else {
+      return defaultUpload(file, formData, uploadOptions)
+    }
+  }
+
+  /**
+   * 格式化图片信息
+   */
+  function formatImage(res: UniApp.ChooseImageSuccessCallbackResult): ChooseFile[] {
+    // #ifdef MP-DINGTALK
+    // 钉钉文件在files中
+    res.tempFiles = isDef((res as any).files) ? (res as any).files : res.tempFiles
+    // #endif
+    if (isArray(res.tempFiles)) {
+      return res.tempFiles.map((item: any) => ({
+        path: item.path || '',
+        name: item.name || '',
+        size: item.size,
+        type: 'image',
+        thumb: item.path || ''
+      }))
+    }
+    return [
+      {
+        path: (res.tempFiles as any).path || '',
+        name: (res.tempFiles as any).name || '',
+        size: (res.tempFiles as any).size,
+        type: 'image',
+        thumb: (res.tempFiles as any).path || ''
+      }
+    ]
+  }
+
+  /**
+   * 格式化视频信息
+   */
+  function formatVideo(res: UniApp.ChooseVideoSuccess): ChooseFile[] {
+    return [
+      {
+        path: res.tempFilePath || (res as any).filePath || '',
+        name: res.name || '',
+        size: res.size,
+        type: 'video',
+        thumb: (res as any).thumbTempFilePath || '',
+        duration: res.duration
+      }
+    ]
+  }
+
+  /**
+   * 格式化媒体信息
+   */
+  function formatMedia(res: UniApp.ChooseMediaSuccessCallbackResult): ChooseFile[] {
+    return res.tempFiles.map((item) => ({
+      type: item.fileType,
+      path: item.tempFilePath,
+      thumb: item.fileType === 'video' ? item.thumbTempFilePath : item.tempFilePath,
+      size: item.size,
+      duration: item.duration
+    }))
+  }
+
+  /**
+   * 选择文件
+   */
+  function chooseFile({
+    multiple,
+    sizeType,
+    sourceType,
+    maxCount,
+    accept,
+    compressed,
+    maxDuration,
+    camera,
+    extension
+  }: ChooseFileOption): Promise<ChooseFile[]> {
+    return new Promise((resolve, reject) => {
+      switch (accept) {
+        case 'image':
+          uni.chooseImage({
+            count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
+            sizeType,
+            sourceType,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatImage(res)),
+            fail: reject
+          })
+          break
+        case 'video':
+          uni.chooseVideo({
+            sourceType,
+            compressed,
+            maxDuration,
+            camera,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatVideo(res)),
+            fail: reject
+          })
+          break
+        // #ifdef MP-WEIXIN
+        case 'media':
+          uni.chooseMedia({
+            count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
+            sourceType,
+            sizeType,
+            camera,
+            maxDuration,
+            success: (res) => resolve(formatMedia(res)),
+            fail: reject
+          })
+          break
+        case 'file':
+          uni.chooseMessageFile({
+            count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles),
+            fail: reject
+          })
+          break
+        // #endif
+        case 'all':
+          // #ifdef H5
+          uni.chooseFile({
+            count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles as ChooseFile[]),
+            fail: reject
+          })
+          // #endif
+          // #ifdef MP-WEIXIN
+          uni.chooseMessageFile({
+            count: multiple ? Math.min(maxCount || 100, 100) : 1, // 默认100,最大100
+            type: accept,
+            extension,
+            success: (res) => resolve(res.tempFiles),
+            fail: reject
+          })
+          // #endif
+
+          break
+        default:
+          // 默认选择图片
+          uni.chooseImage({
+            count: multiple ? Math.min(maxCount || 9, 9) : 1, // 默认9,最大9
+            sizeType,
+            sourceType,
+            // #ifdef H5
+            extension,
+            // #endif
+            success: (res) => resolve(formatImage(res)),
+            fail: reject
+          })
+          break
+      }
+    })
+  }
+
+  return {
+    startUpload,
+    abort,
+    UPLOAD_STATUS,
+    chooseFile
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss b/src/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss
new file mode 100644
index 0000000..8831de3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-action-sheet/index.scss
@@ -0,0 +1,204 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(action-sheet) {
+    background-color: $-dark-background2;
+    color: $-dark-color;
+
+    @include e(action) {
+      color: $-dark-color;
+      background: $-dark-background2;
+
+      &:not(.wd-action-sheet__action--disabled):not(.wd-action-sheet__action--loading):active {
+        background: $-dark-background4;
+      }
+
+      @include m(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(subname) {
+      color: $-dark-color3;
+    }
+
+    @include e(cancel) {
+      color: $-dark-color;
+      background: $-dark-background4;
+
+      &:active {
+        background: $-dark-background5;
+      }
+    }
+
+    :deep(.wd-action-sheet__close) {
+      color: $-dark-color3;
+    }
+
+    @include e(panel-title) {
+      color: $-dark-color;
+    }
+
+    @include e(header) {
+      color: $-dark-color;
+    }
+  }
+}
+
+:deep(.wd-action-sheet__popup) {
+  border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+}
+
+@include b(action-sheet) {
+  background-color: $-color-white;
+  padding-bottom: 1px;
+
+  @include edeep(popup) {
+    border-radius: $-action-sheet-radius $-action-sheet-radius 0 0;
+  }
+
+  @include e(actions) {
+    padding: 8px 0;
+    max-height: 50vh;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(action) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: $-action-sheet-action-height;
+    line-height: $-action-sheet-action-height;
+    color: $-action-sheet-color;
+    font-size: $-action-sheet-fs;
+    text-align: center;
+    border: none;
+    background: $-action-sheet-bg;
+    outline: none;
+
+    &:after {
+      display: none;
+    }
+
+    &:not(&--disabled):not(&--loading):active {
+      background: $-action-sheet-active-color;
+    }
+
+    @include m(disabled) {
+      color: $-action-sheet-disabled-color;
+      cursor: not-allowed;
+    }
+
+    @include m(loading) {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      line-height: initial;
+    }
+  }
+  
+  @include edeep(action-loading){
+    width: $-action-sheet-loading-size;
+    height: $-action-sheet-loading-size;
+  }
+
+  @include e(name) {
+    display: inline-block;
+  }
+
+  @include e(subname) {
+    display: inline-block;
+    margin-left: 4px;
+    font-size: $-action-sheet-subname-fs;
+    color: $-action-sheet-subname-color;
+  }
+
+  @include e(cancel) {
+    display: block;
+    width: calc(100% - 48px);
+    line-height: $-action-sheet-cancel-height;
+    padding: 0;
+    color: $-action-sheet-cancel-color;
+    font-size: $-action-sheet-fs;
+    text-align: center;
+    border-radius: $-action-sheet-cancel-radius;
+    border: none;
+    background: $-action-sheet-cancel-bg;
+    outline: none;
+    margin: 0 auto 24px;
+    font-weight: $-action-sheet-weight;
+
+    &:active {
+      background: $-action-sheet-active-color;
+    }
+
+    &:after {
+      display: none;
+    }
+  }
+
+  @include e(header) {
+    color: $-action-sheet-color;
+    position: relative;
+    height: $-action-sheet-title-height;
+    line-height: $-action-sheet-title-height;
+    text-align: center;
+    font-size: $-action-sheet-title-fs;
+    font-weight: $-action-sheet-weight;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: $-action-sheet-close-top;
+    right: $-action-sheet-close-right;
+    color: $-action-sheet-close-color;
+    font-size: $-action-sheet-close-fs;
+    transform: rotate(-45deg);
+    line-height: 1.1;
+  }
+
+  @include e(panels) {
+    height: 84px;
+    overflow-y: hidden;
+
+    &:first-of-type {
+      margin-top: 20px;
+    }
+
+    &:last-of-type {
+      margin-bottom: 12px;
+    }
+  }
+
+  @include e(panels-content) {
+    display: flex;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  @include e(panel) {
+    width: 88px;
+    flex: 0 0 auto;
+    display: inline-block;
+    padding: $-action-sheet-panel-padding;
+  }
+
+  @include e(panel-img) {
+    display: block;
+    width: $-action-sheet-panel-img-fs;
+    height: $-action-sheet-panel-img-fs;
+    margin: 0 auto;
+    margin-bottom: 7px;
+    border-radius: $-action-sheet-panel-img-radius;
+  }
+
+  @include e(panel-title) {
+    font-size: $-action-sheet-subname-fs;
+    line-height: 1.2;
+    text-align: center;
+    color: $-action-sheet-color;
+    @include lineEllipsis;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts b/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
new file mode 100644
index 0000000..c13a9e1
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
@@ -0,0 +1,121 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-18 11:22:03
+ * @LastEditTime: 2024-04-04 22:35:25
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-action-sheet/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type Action = {
+  /**
+   * 选项名称
+   */
+  name: string
+  /**
+   * 描述信息
+   */
+  subname?: string
+  /**
+   * 颜色
+   */
+  color?: string
+  /**
+   * 禁用
+   */
+  disabled?: boolean
+  /**
+   * 加载中状态
+   */
+  loading?: boolean
+}
+
+export type Panel = {
+  /**
+   * 图片地址
+   */
+  iconUrl: string
+  /**
+   * 标题内容
+   */
+  title: string
+}
+
+export const actionSheetProps = {
+  ...baseProps,
+  /**
+   * header 头部样式
+   * @default ''
+   * @type {string}
+   */
+  customHeaderClass: makeStringProp(''),
+  /**
+   * 设置菜单显示隐藏
+   * @default false
+   * @type {boolean}
+   */
+  modelValue: { ...makeBooleanProp(false), ...makeRequiredProp(Boolean) },
+  /**
+   * 菜单选项
+   * @default []
+   * @type {Action[]}
+   */
+  actions: makeArrayProp<Action>(),
+  /**
+   * 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示
+   * @default []
+   * @type {Array<Panel | Panel[]>}
+   */
+  panels: makeArrayProp<Panel | Panel[]>(),
+  /**
+   * 标题
+   * @type {string}
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   * @type {string}
+   */
+  cancelText: String,
+  /**
+   * 点击选项后是否关闭菜单
+   * @default true
+   * @type {boolean}
+   */
+  closeOnClickAction: makeBooleanProp(true),
+  /**
+   * 点击遮罩是否关闭
+   * @default true
+   * @type {boolean}
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹框动画持续时间
+   * @default 200
+   * @type {number}
+   */
+  duration: makeNumberProp(200),
+  /**
+   * 菜单层级
+   * @default 10
+   * @type {number}
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   * @default true
+   * @type {boolean}
+   */
+  lazyRender: makeBooleanProp(true),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * @default true
+   * @type {boolean}
+   */
+  safeAreaInsetBottom: makeBooleanProp(true)
+}
+
+export type ActionSheetProps = ExtractPropTypes<typeof actionSheetProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue b/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
new file mode 100644
index 0000000..3711d62
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
@@ -0,0 +1,154 @@
+<template>
+  <view>
+    <wd-popup
+      custom-class="wd-action-sheet__popup"
+      :custom-style="`${(actions && actions.length) || (panels && panels.length) ? 'background: transparent;' : ''}`"
+      v-model="showPopup"
+      :duration="duration"
+      position="bottom"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :lazy-render="lazyRender"
+      @enter="handleOpen"
+      @close="close"
+      @after-enter="handleOpened"
+      @after-leave="handleClosed"
+      @click-modal="handleClickModal"
+      :z-index="zIndex"
+    >
+      <view
+        :class="`wd-action-sheet ${customClass}`"
+        :style="`${
+          (actions && actions.length) || (panels && panels.length)
+            ? 'margin: 0 10px calc(var(--window-bottom) + 10px) 10px; border-radius: 16px;'
+            : 'margin-bottom: var(--window-bottom);'
+        } ${customStyle}`"
+      >
+        <view v-if="title" :class="`wd-action-sheet__header ${customHeaderClass}`">
+          {{ title }}
+          <wd-icon custom-class="wd-action-sheet__close" name="add" @click="close" />
+        </view>
+        <view class="wd-action-sheet__actions" v-if="actions && actions.length">
+          <button
+            v-for="(action, rowIndex) in actions"
+            :key="rowIndex"
+            :class="`wd-action-sheet__action ${action.disabled ? 'wd-action-sheet__action--disabled' : ''}  ${
+              action.loading ? 'wd-action-sheet__action--loading' : ''
+            }`"
+            :style="`color: ${action.color}`"
+            @click="select(rowIndex, 'action')"
+          >
+            <wd-loading custom-class="`wd-action-sheet__action-loading" v-if="action.loading" />
+            <view v-else class="wd-action-sheet__name">{{ action.name }}</view>
+            <view v-if="!action.loading && action.subname" class="wd-action-sheet__subname">{{ action.subname }}</view>
+          </button>
+        </view>
+        <view v-if="formatPanels && formatPanels.length">
+          <view v-for="(panel, rowIndex) in formatPanels" :key="rowIndex" class="wd-action-sheet__panels">
+            <view class="wd-action-sheet__panels-content">
+              <view v-for="(col, colIndex) in panel" :key="colIndex" class="wd-action-sheet__panel" @click="select(rowIndex, 'panels', colIndex)">
+                <image class="wd-action-sheet__panel-img" :src="(col as any).iconUrl" />
+                <view class="wd-action-sheet__panel-title">{{ (col as any).title }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <slot />
+        <button v-if="cancelText" class="wd-action-sheet__cancel" @click="handleCancel">{{ cancelText }}</button>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-action-sheet',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import { watch, ref } from 'vue'
+import { actionSheetProps, type Panel } from './types'
+import { isArray } from '../common/util'
+
+const props = defineProps(actionSheetProps)
+const emit = defineEmits(['select', 'click-modal', 'cancel', 'closed', 'close', 'open', 'opened', 'update:modelValue'])
+
+const formatPanels = ref<Array<Panel> | Array<Panel[]>>([])
+
+const showPopup = ref<boolean>(false)
+
+watch(() => props.panels, computedValue, { deep: true, immediate: true })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopup.value = newValue
+  },
+  { deep: true, immediate: true }
+)
+
+function isPanelArray() {
+  return props.panels.length && !isArray(props.panels[0])
+}
+function computedValue() {
+  formatPanels.value = isPanelArray() ? [props.panels as Panel[]] : (props.panels as Panel[][])
+}
+
+function select(rowIndex: number, type: 'action' | 'panels', colIndex?: number) {
+  if (type === 'action') {
+    if (props.actions[rowIndex].disabled || props.actions[rowIndex].loading) {
+      return
+    }
+    emit('select', {
+      item: props.actions[rowIndex],
+      index: rowIndex
+    })
+  } else if (isPanelArray()) {
+    emit('select', {
+      item: props.panels[Number(colIndex)],
+      index: colIndex
+    })
+  } else {
+    emit('select', {
+      item: (props.panels as Panel[][])[rowIndex][Number(colIndex)],
+      rowIndex,
+      colIndex
+    })
+  }
+  if (props.closeOnClickAction) {
+    close()
+  }
+}
+function handleClickModal() {
+  emit('click-modal')
+}
+function handleCancel() {
+  emit('cancel')
+  close()
+}
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+function handleOpen() {
+  emit('open')
+}
+function handleOpened() {
+  emit('opened')
+}
+function handleClosed() {
+  emit('closed')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-backtop/index.scss b/src/uni_modules/wot-design-uni/components/wd-backtop/index.scss
new file mode 100644
index 0000000..a9dc001
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-backtop/index.scss
@@ -0,0 +1,25 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(backtop) {
+  position: fixed;
+  background-color: $-backtop-bg;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  color: $-color-gray-8;
+
+  @include edeep(backicon) {
+    font-size: $-backtop-icon-size;
+  }
+
+  @include when(circle) {
+    border-radius: 50%;
+  }
+
+  @include when(square) {
+    border-radius: 4px;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-backtop/types.ts b/src/uni_modules/wot-design-uni/components/wd-backtop/types.ts
new file mode 100644
index 0000000..209c67a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-backtop/types.ts
@@ -0,0 +1,37 @@
+import { baseProps, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export const backtopProps = {
+  ...baseProps,
+  /**
+   * 页面滚动距离
+   */
+  scrollTop: makeRequiredProp(Number),
+  /**
+   * 距离顶部多少距离时显示
+   */
+  top: makeNumberProp(300),
+  /**
+   * 返回顶部滚动时间
+   */
+  duration: makeNumberProp(100),
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * icon样式
+   */
+  iconStyle: makeStringProp(''),
+  /**
+   * 形状
+   */
+  shape: makeStringProp('circle'),
+  /**
+   * 距离屏幕底部距离
+   */
+  bottom: makeNumberProp(100),
+  /**
+   * 距离屏幕右边距离
+   */
+  right: makeNumberProp(20)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-backtop/wd-backtop.vue b/src/uni_modules/wot-design-uni/components/wd-backtop/wd-backtop.vue
new file mode 100644
index 0000000..12df252
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-backtop/wd-backtop.vue
@@ -0,0 +1,45 @@
+<template>
+  <wd-transition :show="show" name="fade">
+    <view
+      :class="`wd-backtop ${customClass} is-${shape}`"
+      :style="`z-index: ${zIndex}; bottom: ${bottom}px; right: ${right}px; ${customStyle}`"
+      @click="handleBacktop"
+    >
+      <slot v-if="$slots.default"></slot>
+      <wd-icon v-else custom-class="wd-backtop__backicon" name="backtop" :custom-style="iconStyle" />
+    </view>
+  </wd-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-backtop',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdTransition from '../wd-transition/wd-transition.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed } from 'vue'
+import { backtopProps } from './types'
+
+const props = defineProps(backtopProps)
+
+const show = computed(() => props.scrollTop > props.top)
+
+function handleBacktop() {
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration: props.duration
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-badge/index.scss b/src/uni_modules/wot-design-uni/components/wd-badge/index.scss
new file mode 100644
index 0000000..d75390a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-badge/index.scss
@@ -0,0 +1,63 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(badge) {
+    @include e(content) {
+      border-color: $-dark-background2;
+    }
+  }
+}
+
+
+@include b(badge) {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+
+  @include e(content) {
+    display: inline-block;
+    box-sizing: content-box;
+    height: $-badge-height;
+    line-height: $-badge-height;
+    padding: $-badge-padding;
+    background-color: $-badge-bg;
+    border-radius: calc($-badge-height / 2 + 2px);
+    color: $-badge-color;
+    font-size: $-badge-fs;
+    text-align: center;
+    white-space: nowrap;
+    border: $-badge-border;
+    font-weight: 500;
+
+    @include when(fixed) {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      transform: translateY(-50%) translateX(50%);
+    }
+
+    @include when(dot) {
+      height: $-badge-dot-size;
+      width: $-badge-dot-size;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type == primary {
+          background-color: $-badge-primary;
+        } @else if $type == success {
+          background-color: $-badge-success;
+        } @else if $type == warning {
+          background-color: $-badge-warning;
+        } @else if $type == info {
+          background-color: $-badge-info;
+        } @else {
+          background-color: $-badge-danger;
+        }
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-badge/types.ts b/src/uni_modules/wot-design-uni/components/wd-badge/types.ts
new file mode 100644
index 0000000..49cffa5
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-badge/types.ts
@@ -0,0 +1,50 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-11-20 20:29:03
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-badge/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../common/props'
+
+export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+export const badgeProps = {
+  ...baseProps,
+  /**
+   * 显示值
+   */
+  modelValue: numericProp,
+  /** 当数值为 0 时，是否展示徽标 */
+  showZero: makeBooleanProp(false),
+  bgColor: String,
+  /**
+   * 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
+   */
+  max: Number,
+  /**
+   * 是否为红色点状标注
+   */
+  isDot: Boolean,
+  /**
+   * 是否隐藏 badge
+   */
+  hidden: Boolean,
+  /**
+   * badge类型，可选值primary / success / warning / danger / info
+   */
+  type: makeStringProp<BadgeType | undefined>(undefined),
+  /**
+   * 为正时，角标向下偏移对应的像素
+   */
+  top: numericProp,
+  /**
+   * 为正时，角标向左偏移对应的像素
+   */
+  right: numericProp
+}
+
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue b/src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
new file mode 100644
index 0000000..a47b1ac
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-badge/wd-badge.vue
@@ -0,0 +1,61 @@
+<template>
+  <view :class="['wd-badge', customClass]" :style="customStyle">
+    <slot></slot>
+    <view
+      v-if="shouldShowBadge"
+      :class="['wd-badge__content', 'is-fixed', type ? 'wd-badge__content--' + type : '', isDot ? 'is-dot' : '']"
+      :style="contentStyle"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-badge',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { badgeProps } from './types'
+import { addUnit, isDef, isNumber, objToStyle } from '../common/util'
+
+const props = defineProps(badgeProps)
+const content = computed(() => {
+  const { modelValue, max, isDot } = props
+  if (isDot) return ''
+  let value = modelValue
+  if (value && max && isNumber(value) && !Number.isNaN(value) && !Number.isNaN(max)) {
+    value = max < value ? `${max}+` : value
+  }
+  return value
+})
+
+const contentStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.bgColor)) {
+    style.backgroundColor = props.bgColor
+  }
+
+  if (isDef(props.top)) {
+    style.top = addUnit(props.top)
+  }
+
+  if (isDef(props.right)) {
+    style.right = addUnit(props.right)
+  }
+  return objToStyle(style)
+})
+
+// 是否展示徽标数字
+const shouldShowBadge = computed(() => !props.hidden && (content.value || (content.value === 0 && props.showZero) || props.isDot))
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-button/index.scss b/src/uni_modules/wot-design-uni/components/wd-button/index.scss
new file mode 100644
index 0000000..d8ebba2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-button/index.scss
@@ -0,0 +1,336 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+
+.wot-theme-dark {
+  @include b(button) {
+    @include when(info) {
+      background: $-dark-background4;
+      color: $-dark-color3;
+    }
+
+    @include when(plain) {
+      background: transparent;
+
+      @include when(info) {
+        color: $-dark-color;
+
+        &::after {
+          border-color: $-dark-background5;
+        }
+      }
+    }
+
+    @include when(text) {
+      @include when(disabled) {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+    }
+
+    @include when(icon) {
+      color: $-dark-color;
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+
+    }
+  }
+}
+
+@include b(button) {
+  margin-left: initial;
+  margin-right: initial;
+  position: relative;
+  display: inline-block;
+  outline: none;
+  -webkit-appearance: none;
+  outline: none;
+  background: transparent;
+  box-sizing: border-box;
+  border: none;
+  border-radius: 0;
+  color: $-button-normal-color;
+  transition: opacity 0.2s;
+  user-select: none;
+  font-weight: normal;
+
+
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    background: $-color-black;
+    border: inherit;
+    border-color: $-color-black;
+    border-radius: inherit;
+    transform: translate(-50%, -50%);
+    opacity: 0;
+    content: ' ';
+  }
+
+
+  &::after {
+    border: none;
+    border-radius: 0;
+  }
+
+  @include e(content) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+  }
+
+  @include m(active) {
+    &:active::before {
+      opacity: 0.15;
+    }
+  }
+
+  @include when(disabled) {
+    opacity: $-button-disabled-opacity;
+  }
+
+  @include e(loading) {
+    margin-right: 5px;
+    animation: wd-rotate 0.8s linear infinite;
+    animation-duration: 2s;
+  }
+
+  @include e(loading-svg) {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+
+  @include when(loading) {}
+
+  @include when(primary) {
+    background: $-button-primary-bg-color;
+    color: $-button-primary-color;
+  }
+
+  @include when(success) {
+    background: $-button-success-bg-color;
+    color: $-button-success-color;
+  }
+
+  @include when(info) {
+    background: $-button-info-bg-color;
+    color: $-button-info-color;
+  }
+
+  @include when(warning) {
+    background: $-button-warning-bg-color;
+    color: $-button-warning-color;
+  }
+
+  @include when(error) {
+    background: $-button-error-bg-color;
+    color: $-button-error-color;
+  }
+
+  @include when(small) {
+    height: $-button-small-height;
+    padding: $-button-small-padding;
+    border-radius: $-button-small-radius;
+    font-size: $-button-small-fs;
+    font-weight: normal;
+
+    .wd-button__loading {
+      width: $-button-small-loading;
+      height: $-button-small-loading;
+    }
+  }
+
+  @include when(medium) {
+    height: $-button-medium-height;
+    padding: $-button-medium-padding;
+    border-radius: $-button-medium-radius;
+    font-size: $-button-medium-fs;
+    min-width: 120px;
+
+
+    @include when(round) {
+
+      @include when(icon) {
+        min-width: 0;
+        border-radius: 50%;
+      }
+
+      @include when(text) {
+        border-radius: 0;
+        min-width: 0;
+      }
+    }
+
+    .wd-button__loading {
+      width: $-button-medium-loading;
+      height: $-button-medium-loading;
+    }
+  }
+
+  @include when(large) {
+    height: $-button-large-height;
+    padding: $-button-large-padding;
+    border-radius: $-button-large-radius;
+    font-size: $-button-large-fs;
+
+    &::after {
+      border-radius: $-button-large-radius;
+    }
+
+    .wd-button__loading {
+      width: $-button-large-loading;
+      height: $-button-large-loading;
+    }
+  }
+
+
+  @include when(round) {
+    border-radius: 999px;
+  }
+
+  @include when(text) {
+    color: $-button-primary-bg-color;
+    min-width: 0;
+    padding: 4px 0;
+
+    &::after {
+      display: none;
+    }
+
+    &.wd-button--active {
+      opacity: $-button-text-hover-opacity;
+
+      &:active::before {
+        display: none;
+      }
+
+    }
+
+    @include when(disabled) {
+      color: $-button-normal-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include when(plain) {
+    background: $-button-plain-bg-color;
+    border: 1px solid currentColor;
+
+    @include when(primary) {
+      color: $-button-primary-bg-color;
+    }
+
+    @include when(success) {
+      color: $-button-success-bg-color;
+    }
+
+    @include when(info) {
+      color: $-button-info-plain-normal-color;
+      border-color: $-button-info-plain-border-color;
+    }
+
+    @include when(warning) {
+      color: $-button-warning-bg-color;
+    }
+
+    @include when(error) {
+      color: $-button-error-bg-color;
+    }
+  }
+
+  @include when(hairline) {
+    border-width: 0;
+
+    &.is-plain {
+      @include halfPixelBorderSurround();
+
+      &::before {
+        border-radius: inherit;
+      }
+
+      &::after {
+        border-color: inherit;
+      }
+
+      &.is-round {
+        &::after {
+          border-radius: inherit !important;
+        }
+      }
+
+      &.is-large {
+        &::after {
+          border-radius: calc(2 * $-button-large-radius);
+        }
+      }
+
+      &.is-medium {
+        &::after {
+          border-radius: calc(2 * $-button-medium-radius);
+        }
+      }
+
+      &.is-small {
+        &::after {
+          border-radius: calc(2 * $-button-small-radius);
+        }
+      }
+    }
+  }
+
+  @include when(block) {
+    display: block;
+  }
+
+  @include when(icon) {
+    width: $-button-icon-size;
+    height: $-button-icon-size;
+    padding: 0;
+    border-radius: 50%;
+    color: $-button-icon-color;
+
+    &::after {
+      display: none;
+    }
+
+    :deep(.wd-button__icon) {
+      margin-right: 0;
+    }
+
+    @include when(disabled) {
+      color: $-button-icon-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include edeep(icon) {
+    display: block;
+    margin-right: 6px;
+    font-size: $-button-icon-fs;
+    vertical-align: middle;
+  }
+
+  @include e(text) {
+    user-select: none;
+    white-space: nowrap;
+  }
+}
+
+@keyframes wd-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-button/types.ts b/src/uni_modules/wot-design-uni/components/wd-button/types.ts
new file mode 100644
index 0000000..c117bf4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-button/types.ts
@@ -0,0 +1,141 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-11-04 21:33:52
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-button\types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type ButtonType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default' | 'text' | 'icon'
+export type ButtonSize = 'small' | 'medium' | 'large'
+export type ButtonLang = 'zh_CN' | 'zh_TW' | 'en'
+
+export type ButtonOpenType =
+  | 'feedback'
+  | 'share'
+  | 'getUserInfo'
+  | 'contact'
+  | 'getPhoneNumber'
+  | 'launchApp'
+  | 'openSetting'
+  | 'chooseAvatar'
+  | 'getAuthorize'
+  | 'lifestyle'
+  | 'contactShare'
+  | 'openGroupProfile'
+  | 'openGuildProfile'
+  | 'openPublicProfile'
+  | 'shareMessageToFriend'
+  | 'addFriend'
+  | 'addColorSign'
+  | 'addGroupApp'
+  | 'addToFavorites'
+  | 'chooseAddress'
+  | 'chooseInvoiceTitle'
+  | 'login'
+  | 'subscribe'
+  | 'favorite'
+  | 'watchLater'
+  | 'openProfile'
+  | 'agreePrivacyAuthorization'
+
+export type ButtonScope = 'phoneNumber' | 'userInfo'
+
+export const buttonProps = {
+  ...baseProps,
+  /**
+   * 幽灵按钮
+   */
+  plain: makeBooleanProp(false),
+  /**
+   * 圆角按钮
+   */
+  round: makeBooleanProp(true),
+  /**
+   * 禁用按钮
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否细边框
+   */
+  hairline: makeBooleanProp(false),
+  /**
+   * 块状按钮
+   */
+  block: makeBooleanProp(false),
+  /**
+   * 按钮类型，可选值：primary / success / info / warning / error / text / icon
+   */
+  type: makeStringProp<ButtonType>('primary'),
+  /**
+   * 按钮尺寸，可选值：small / medium / large
+   */
+  size: makeStringProp<ButtonSize>('medium'),
+  /**
+   * 图标类名
+   */
+  icon: String,
+  /**
+   * 类名前缀，用于使用自定义图标，用法参考Icon组件
+   */
+  classPrefix: makeStringProp('wd-icon'),
+  /**
+   * 加载中按钮
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载图标颜色
+   */
+  loadingColor: String,
+  /**
+   * 开放能力
+   */
+  openType: String as PropType<ButtonOpenType>,
+  /**
+   * 指定是否阻止本节点的祖先节点出现点击态
+   */
+  hoverStopPropagation: Boolean,
+  /**
+   * 指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
+   */
+  lang: String as PropType<ButtonLang>,
+  /**
+   * 会话来源，open-type="contact"时有效
+   */
+  sessionFrom: String,
+  /**
+   * 会话内消息卡片标题，open-type="contact"时有效
+   */
+  sendMessageTitle: String,
+  /**
+   * 会话内消息卡片点击跳转小程序路径，open-type="contact"时有效
+   */
+  sendMessagePath: String,
+  /**
+   * 会话内消息卡片图片，open-type="contact"时有效
+   */
+  sendMessageImg: String,
+  /**
+   * 打开 APP 时，向 APP 传递的参数，open-type=launchApp时有效
+   */
+  appParameter: String,
+  /**
+   * 是否显示会话内消息卡片，设置此参数为 true，用户进入客服会话会在右下角显示"可能要发送的小程序"提示，用户点击后可以快速发送小程序消息，open-type="contact"时有效
+   */
+  showMessageCard: Boolean,
+  /**
+   * 按钮的唯一标识，可用于设置隐私同意授权按钮的id
+   */
+  buttonId: String,
+  /**
+   * 支付宝小程序，当 open-type 为 getAuthorize 时有效。
+   * 可选值：'phoneNumber' | 'userInfo'
+   */
+  scope: String as PropType<ButtonScope>
+}
+
+export type ButtonProps = ExtractPropTypes<typeof buttonProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue b/src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue
new file mode 100644
index 0000000..27317a6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-button/wd-button.vue
@@ -0,0 +1,189 @@
+<template>
+  <button
+    :id="buttonId"
+    :hover-class="`${disabled || loading ? '' : 'wd-button--active'}`"
+    :style="customStyle"
+    :class="[
+      'wd-button',
+      'is-' + type,
+      'is-' + size,
+      round ? 'is-round' : '',
+      hairline ? 'is-hairline' : '',
+      plain ? 'is-plain' : '',
+      disabled ? 'is-disabled' : '',
+      block ? 'is-block' : '',
+      loading ? 'is-loading' : '',
+      customClass
+    ]"
+    :hover-start-time="hoverStartTime"
+    :hover-stay-time="hoverStayTime"
+    :open-type="disabled || loading ? undefined : openType"
+    :send-message-title="sendMessageTitle"
+    :send-message-path="sendMessagePath"
+    :send-message-img="sendMessageImg"
+    :app-parameter="appParameter"
+    :show-message-card="showMessageCard"
+    :session-from="sessionFrom"
+    :lang="lang"
+    :hover-stop-propagation="hoverStopPropagation"
+    :scope="scope"
+    @click="handleClick"
+    @getAuthorize="handleGetAuthorize"
+    @getuserinfo="handleGetuserinfo"
+    @contact="handleConcat"
+    @getphonenumber="handleGetphonenumber"
+    @error="handleError"
+    @launchapp="handleLaunchapp"
+    @opensetting="handleOpensetting"
+    @chooseavatar="handleChooseavatar"
+    @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
+  >
+    <view class="wd-button__content">
+      <view v-if="loading" class="wd-button__loading">
+        <view class="wd-button__loading-svg" :style="loadingStyle"></view>
+      </view>
+      <wd-icon v-else-if="icon" custom-class="wd-button__icon" :name="icon" :classPrefix="classPrefix"></wd-icon>
+      <view class="wd-button__text"><slot /></view>
+    </view>
+  </button>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-button',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, watch } from 'vue'
+import { ref } from 'vue'
+import base64 from '../common/base64'
+import { buttonProps } from './types'
+
+const loadingIcon = (color = '#4D80F0', reverse = true) => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="a"><stop stop-color="${
+    reverse ? color : '#fff'
+  }" offset="0%" stop-opacity="0"/><stop stop-color="${
+    reverse ? color : '#fff'
+  }" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21 1c11.046 0 20 8.954 20 20s-8.954 20-20 20S1 32.046 1 21 9.954 1 21 1zm0 7C13.82 8 8 13.82 8 21s5.82 13 13 13 13-5.82 13-13S28.18 8 21 8z" fill="${
+    reverse ? '#fff' : color
+  }"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#a)" stroke-width="3.5" stroke-linecap="round"/></g></svg>`
+}
+const props = defineProps(buttonProps)
+const emit = defineEmits([
+  'click',
+  'getuserinfo',
+  'contact',
+  'getphonenumber',
+  'error',
+  'launchapp',
+  'opensetting',
+  'chooseavatar',
+  'agreeprivacyauthorization'
+])
+
+const hoverStartTime = ref<number>(20)
+const hoverStayTime = ref<number>(70)
+const loadingIconSvg = ref<string>('')
+
+const loadingStyle = computed(() => {
+  return `background-image: url(${loadingIconSvg.value});`
+})
+
+watch(
+  () => props.loading,
+  () => {
+    buildLoadingSvg()
+  },
+  { deep: true, immediate: true }
+)
+
+function handleClick(event: any) {
+  if (!props.disabled && !props.loading) {
+    emit('click', event)
+  }
+}
+
+/**
+ * 支付宝小程序授权
+ * @param event
+ */
+function handleGetAuthorize(event: any) {
+  if (props.scope === 'phoneNumber') {
+    handleGetphonenumber(event)
+  } else if (props.scope === 'userInfo') {
+    handleGetuserinfo(event)
+  }
+}
+
+function handleGetuserinfo(event: any) {
+  emit('getuserinfo', event.detail)
+}
+
+function handleConcat(event: any) {
+  emit('contact', event.detail)
+}
+
+function handleGetphonenumber(event: any) {
+  emit('getphonenumber', event.detail)
+}
+
+function handleError(event: any) {
+  emit('error', event.detail)
+}
+
+function handleLaunchapp(event: any) {
+  emit('launchapp', event.detail)
+}
+
+function handleOpensetting(event: any) {
+  emit('opensetting', event.detail)
+}
+
+function handleChooseavatar(event: any) {
+  emit('chooseavatar', event.detail)
+}
+
+function handleAgreePrivacyAuthorization(event: any) {
+  emit('agreeprivacyauthorization', event.detail)
+}
+function buildLoadingSvg() {
+  const { loadingColor, type, plain } = props
+  let color = loadingColor
+  if (!color) {
+    switch (type) {
+      case 'primary':
+        color = '#4D80F0'
+        break
+      case 'success':
+        color = '#34d19d'
+        break
+      case 'info':
+        color = '#333'
+        break
+      case 'warning':
+        color = '#f0883a'
+        break
+      case 'error':
+        color = '#fa4350'
+        break
+      case 'default':
+        color = '#333'
+        break
+    }
+  }
+
+  const svg = loadingIcon(color, !plain)
+  loadingIconSvg.value = `"data:image/svg+xml;base64,${base64(svg)}"`
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/index.scss b/src/uni_modules/wot-design-uni/components/wd-calendar-view/index.scss
new file mode 100644
index 0000000..abec32d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/index.scss
@@ -0,0 +1,9 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-06-12 10:04:19
+ * @LastEditTime: 2023-07-15 16:16:34
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-calendar-view\index.scss
+ * 记得注释
+ */
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss
new file mode 100644
index 0000000..a60250a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/index.scss
@@ -0,0 +1,162 @@
+@import '../../common/abstracts/variable';
+@import '../../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(month) {
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(days) {
+      color: $-dark-color;
+    }
+
+    @include e(day) {
+      @include when(disabled) {
+        .wd-month__day-text {
+          color: $-dark-color-gray;
+        }
+      }
+    }
+  }
+}
+
+@include b(month) {
+  @include e(title) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    font-size: $-calendar-panel-title-fs;
+    color: $-calendar-panel-title-color;
+  }
+
+  @include e(days) {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: $-calendar-day-fs;
+    color: $-calendar-day-color;
+  }
+
+  @include e(day) {
+    position: relative;
+    width: 14.285%;
+    height: $-calendar-day-height;
+    line-height: $-calendar-day-height;
+    text-align: center;
+    margin-bottom: $-calendar-item-margin-bottom;
+
+    @include when(disabled) {
+      .wd-month__day-text {
+        color: $-calendar-disabled-color;
+      }
+    }
+
+    @include when(current) {
+      color: $-calendar-active-color;
+    }
+
+    @include when(selected, multiple-selected) {
+      .wd-month__day-container {
+        border-radius: $-calendar-active-border;
+        background: $-calendar-active-color;
+        color: $-calendar-selected-color;
+      }
+    }
+
+    @include when(middle) {
+      .wd-month__day-container {
+        background: $-calendar-range-color;
+      }
+    }
+    @include when(multiple-middle) {
+      .wd-month__day-container {
+        background: $-calendar-active-color;
+        color: $-calendar-selected-color;
+      }
+    }
+
+    @include when(start) {
+      &::after {
+        position: absolute;
+        content: '';
+        height: $-calendar-day-height;
+        top: 0;
+        right: 0;
+        left: 50%;
+        background: $-calendar-range-color;
+        z-index: 1;
+      }
+
+      &.is-without-end::after {
+        display: none;
+      }
+
+      .wd-month__day-container {
+        background: $-calendar-active-color;
+        color: $-calendar-selected-color;
+        border-radius: $-calendar-active-border 0 0 $-calendar-active-border;
+      }
+    }
+
+    @include when(end) {
+      &::after {
+        position: absolute;
+        content: '';
+        height: $-calendar-day-height;
+        top: 0;
+        left: 0;
+        right: 50%;
+        background: $-calendar-range-color;
+        z-index: 1;
+      }
+
+      .wd-month__day-container {
+        background: $-calendar-active-color;
+        color: $-calendar-selected-color;
+        border-radius: 0 $-calendar-active-border $-calendar-active-border 0;
+      }
+    }
+
+    @include when(same) {
+      .wd-month__day-container {
+        background: $-calendar-active-color;
+        color: $-calendar-selected-color;
+        border-radius: $-calendar-active-border;
+      }
+    }
+
+    @include when(last-row){
+      margin-bottom: 0;
+    }
+  }
+
+  @include e(day-container) {
+    position: relative;
+    z-index: 2;
+  }
+
+  @include e(day-text) {
+    font-weight: $-calendar-day-fw;
+  }
+
+  @include e(day-top) {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    right: 0;
+    line-height: 1.1;
+    font-size: $-calendar-info-fs;
+    text-align: center;
+  }
+
+  @include e(day-bottom) {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    right: 0;
+    line-height: 1.1;
+    font-size: $-calendar-info-fs;
+    text-align: center;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue
new file mode 100644
index 0000000..64442eb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/month.vue
@@ -0,0 +1,389 @@
+<template>
+  <view>
+    <wd-toast selector="wd-month" />
+    <view class="month">
+      <view class="wd-month">
+        <view class="wd-month__title" v-if="showTitle">{{ monthTitle(date) }}</view>
+        <view class="wd-month__days">
+          <view
+            v-for="(item, index) in days"
+            :key="index"
+            :class="`wd-month__day ${item.disabled ? 'is-disabled' : ''} ${item.isLastRow ? 'is-last-row' : ''} ${
+              item.type ? dayTypeClass(item.type) : ''
+            }`"
+            :style="index === 0 ? firstDayStyle : ''"
+            @click="handleDateClick(index)"
+          >
+            <view class="wd-month__day-container">
+              <view class="wd-month__day-top">{{ item.topInfo }}</view>
+              <view class="wd-month__day-text">
+                {{ item.text }}
+              </view>
+              <view class="wd-month__day-bottom">{{ item.bottomInfo }}</view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdToast from '../../wd-toast/wd-toast.vue'
+import { computed, ref, watch, type CSSProperties } from 'vue'
+import {
+  compareDate,
+  formatMonthTitle,
+  getDateByDefaultTime,
+  getDayByOffset,
+  getDayOffset,
+  getItemClass,
+  getMonthEndDay,
+  getNextDay,
+  getPrevDay,
+  getWeekRange
+} from '../utils'
+import { useToast } from '../../wd-toast'
+import { deepClone, isArray, isFunction, objToStyle } from '../../common/util'
+import { useTranslate } from '../../composables/useTranslate'
+import type { CalendarDayItem, CalendarDayType } from '../types'
+import { monthProps } from './types'
+
+const props = defineProps(monthProps)
+const emit = defineEmits(['change'])
+
+const { translate } = useTranslate('calendar-view')
+
+const days = ref<Array<CalendarDayItem>>([])
+
+const toast = useToast('wd-month')
+
+const offset = computed(() => {
+  const firstDayOfWeek = props.firstDayOfWeek >= 7 ? props.firstDayOfWeek % 7 : props.firstDayOfWeek
+  const offset = (7 + new Date(props.date).getDay() - firstDayOfWeek) % 7
+  return offset
+})
+
+const dayTypeClass = computed(() => {
+  return (monthType: CalendarDayType) => {
+    return getItemClass(monthType, props.value, props.type)
+  }
+})
+
+const monthTitle = computed(() => {
+  return (date: number) => {
+    return formatMonthTitle(date)
+  }
+})
+
+const firstDayStyle = computed(() => {
+  const dayStyle: CSSProperties = {}
+  dayStyle.marginLeft = `${(100 / 7) * offset.value}%`
+  return objToStyle(dayStyle)
+})
+
+const isLastRow = (date: number) => {
+  const currentDate = new Date(date)
+  const currentDay = currentDate.getDate()
+  const daysInMonth = getMonthEndDay(currentDate.getFullYear(), currentDate.getMonth() + 1)
+  const totalDaysShown = offset.value + daysInMonth
+  const totalRows = Math.ceil(totalDaysShown / 7)
+  return Math.ceil((offset.value + currentDay) / 7) === totalRows
+}
+watch(
+  [() => props.type, () => props.date, () => props.value, () => props.minDate, () => props.maxDate, () => props.formatter],
+  () => {
+    setDays()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+function setDays() {
+  const dayList: Array<CalendarDayItem> = []
+  const date = new Date(props.date)
+  const year = date.getFullYear()
+  const month = date.getMonth()
+  const totalDay = getMonthEndDay(year, month + 1)
+  let value = props.value
+  if ((props.type === 'week' || props.type === 'weekrange') && value) {
+    value = getWeekValue()
+  }
+
+  for (let day = 1; day <= totalDay; day++) {
+    const date = new Date(year, month, day).getTime()
+    let type: CalendarDayType = getDayType(date, value as number | number[] | null)
+    if (!type && compareDate(date, Date.now()) === 0) {
+      type = 'current'
+    }
+    const dayObj = getFormatterDate(date, day, type)
+    dayList.push(dayObj)
+  }
+  days.value = dayList
+}
+function getDayType(date: number, value: number | number[] | null): CalendarDayType {
+  switch (props.type) {
+    case 'date':
+    case 'datetime':
+      return getDateType(date)
+    case 'dates':
+      return getDatesType(date)
+    case 'daterange':
+    case 'datetimerange':
+      return getDatetimeType(date, value)
+    case 'week':
+      return getWeektimeType(date, value)
+    case 'weekrange':
+      return getWeektimeType(date, value)
+    default:
+      return getDateType(date)
+  }
+}
+function getDateType(date: number): CalendarDayType {
+  if (props.value && compareDate(date, props.value as number) === 0) {
+    return 'selected'
+  }
+  return ''
+}
+
+function getDatesType(date: number): CalendarDayType {
+  const { value } = props
+  let type: CalendarDayType = ''
+
+  if (!isArray(value)) return type
+  const isSelected = (day: number) => {
+    return value.some((item) => compareDate(day, item) === 0)
+  }
+
+  if (isSelected(date)) {
+    const prevDay = getPrevDay(date)
+    const nextDay = getNextDay(date)
+    const prevSelected = isSelected(prevDay)
+    const nextSelected = isSelected(nextDay)
+    if (prevSelected && nextSelected) {
+      type = 'multiple-middle'
+    } else if (prevSelected) {
+      type = 'end'
+    } else if (nextSelected) {
+      type = 'start'
+    } else {
+      type = 'multiple-selected'
+    }
+  }
+
+  return type
+}
+function getDatetimeType(date: number, value: number | number[] | null) {
+  const [startDate, endDate] = isArray(value) ? value : []
+
+  if (startDate && compareDate(date, startDate) === 0) {
+    if (props.allowSameDay && endDate && compareDate(startDate, endDate) === 0) {
+      return 'same'
+    }
+    return 'start'
+  } else if (endDate && compareDate(date, endDate) === 0) {
+    return 'end'
+  } else if (startDate && endDate && compareDate(date, startDate) === 1 && compareDate(date, endDate) === -1) {
+    return 'middle'
+  } else {
+    return ''
+  }
+}
+function getWeektimeType(date: number, value: number | number[] | null) {
+  const [startDate, endDate] = isArray(value) ? value : []
+
+  if (startDate && compareDate(date, startDate) === 0) {
+    return 'start'
+  } else if (endDate && compareDate(date, endDate) === 0) {
+    return 'end'
+  } else if (startDate && endDate && compareDate(date, startDate) === 1 && compareDate(date, endDate) === -1) {
+    return 'middle'
+  } else {
+    return ''
+  }
+}
+function getWeekValue() {
+  if (props.type === 'week') {
+    return getWeekRange(props.value as number, props.firstDayOfWeek)
+  } else {
+    const [startDate, endDate] = (props.value as any) || []
+
+    if (startDate) {
+      const firstWeekRange = getWeekRange(startDate, props.firstDayOfWeek)
+
+      if (endDate) {
+        const endWeekRange = getWeekRange(endDate, props.firstDayOfWeek)
+
+        return [firstWeekRange[0], endWeekRange[1]]
+      } else {
+        return firstWeekRange
+      }
+    }
+
+    return []
+  }
+}
+function handleDateClick(index: number) {
+  const date = days.value[index]
+  switch (props.type) {
+    case 'date':
+    case 'datetime':
+      handleDateChange(date)
+      break
+    case 'dates':
+      handleDatesChange(date)
+      break
+    case 'daterange':
+    case 'datetimerange':
+      handleDateRangeChange(date)
+      break
+    case 'week':
+      handleWeekChange(date)
+      break
+    case 'weekrange':
+      handleWeekRangeChange(date)
+      break
+    default:
+      handleDateChange(date)
+  }
+}
+function getDate(date: number, isEnd: boolean = false) {
+  date = props.defaultTime && props.defaultTime.length > 0 ? getDateByDefaultTime(date, isEnd ? props.defaultTime[1] : props.defaultTime[0]) : date
+
+  if (date < props.minDate) return props.minDate
+
+  if (date > props.maxDate) return props.maxDate
+
+  return date
+}
+
+function handleDateChange(date: CalendarDayItem) {
+  if (date.disabled) return
+
+  if (date.type !== 'selected') {
+    emit('change', {
+      value: getDate(date.date),
+      type: 'start'
+    })
+  }
+}
+function handleDatesChange(date: CalendarDayItem) {
+  if (date.disabled) return
+  const currentValue = deepClone(isArray(props.value) ? props.value : [])
+  const dateIndex = currentValue.findIndex((item) => item && compareDate(item, date.date) === 0)
+  const value = dateIndex === -1 ? [...currentValue, getDate(date.date)] : currentValue.filter((_, index) => index !== dateIndex)
+  emit('change', { value })
+}
+
+function handleDateRangeChange(date: CalendarDayItem) {
+  if (date.disabled) return
+
+  let value: (number | null)[] = []
+  let type: CalendarDayType = ''
+  const [startDate, endDate] = deepClone(isArray(props.value) ? props.value : [])
+  const compare = compareDate(date.date, startDate)
+
+  // 禁止选择同个日期
+  if (!props.allowSameDay && compare === 0 && (props.type === 'daterange' || props.type === 'datetimerange') && !endDate) {
+    return
+  }
+
+  if (startDate && !endDate && compare > -1) {
+    // 不能选择超过最大范围的日期
+    if (props.maxRange && getDayOffset(date.date, startDate) > props.maxRange) {
+      const maxEndDate = getDayByOffset(startDate, props.maxRange - 1)
+      value = [startDate, getDate(maxEndDate, true)]
+      toast.show({
+        msg: props.rangePrompt || translate('rangePrompt', props.maxRange)
+      })
+    } else {
+      value = [startDate, getDate(date.date, true)]
+    }
+  } else if (props.type === 'datetimerange' && startDate && endDate) {
+    // 时间范围类型，且有开始时间和结束时间，需要支持重新点击开始日期和结束日期可以重新修改时间
+    if (compare === 0) {
+      type = 'start'
+      value = props.value as number[]
+    } else if (compareDate(date.date, endDate) === 0) {
+      type = 'end'
+      value = props.value as number[]
+    } else {
+      value = [getDate(date.date), null]
+    }
+  } else {
+    value = [getDate(date.date), null]
+  }
+
+  emit('change', {
+    value,
+    type: type || (value[1] ? 'end' : 'start')
+  })
+}
+function handleWeekChange(date: CalendarDayItem) {
+  const [weekStart] = getWeekRange(date.date, props.firstDayOfWeek)
+
+  // 周的第一天如果是禁用状态，则不可选中
+  if (getFormatterDate(weekStart, new Date(weekStart).getDate()).disabled) return
+
+  emit('change', {
+    value: getDate(weekStart) + 24 * 60 * 60 * 1000
+  })
+}
+function handleWeekRangeChange(date: CalendarDayItem) {
+  const [weekStartDate] = getWeekRange(date.date, props.firstDayOfWeek)
+
+  // 周的第一天如果是禁用状态，则不可选中
+  if (getFormatterDate(weekStartDate, new Date(weekStartDate).getDate()).disabled) return
+
+  let value: (number | null)[] = []
+  const [startDate, endDate] = deepClone(isArray(props.value) ? props.value : [])
+  const [startWeekStartDate] = startDate ? getWeekRange(startDate, props.firstDayOfWeek) : []
+  const compare = compareDate(weekStartDate, startWeekStartDate)
+
+  if (startDate && !endDate && compare > -1) {
+    if (!props.allowSameDay && compare === 0) return
+
+    value = [getDate(startWeekStartDate) + 24 * 60 * 60 * 1000, getDate(weekStartDate) + 24 * 60 * 60 * 1000]
+  } else {
+    value = [getDate(weekStartDate) + 24 * 60 * 60 * 1000, null]
+  }
+
+  emit('change', {
+    value
+  })
+}
+function getFormatterDate(date: number, day: string | number, type?: CalendarDayType) {
+  let dayObj: CalendarDayItem = {
+    date: date,
+    text: day,
+    topInfo: '',
+    bottomInfo: '',
+    type,
+    disabled: compareDate(date, props.minDate) === -1 || compareDate(date, props.maxDate) === 1,
+    isLastRow: isLastRow(date)
+  }
+  if (props.formatter) {
+    if (isFunction(props.formatter)) {
+      dayObj = props.formatter(dayObj)
+    } else {
+      console.error('[wot-design] error(wd-calendar-view): the formatter prop of wd-calendar-view should be a function')
+    }
+  }
+  return dayObj
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/types.ts
new file mode 100644
index 0000000..f25263c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/month/types.ts
@@ -0,0 +1,20 @@
+import type { PropType } from 'vue'
+import { makeBooleanProp, makeRequiredProp } from '../../common/props'
+import type { CalendarFormatter, CalendarType } from '../types'
+
+export const monthProps = {
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  date: makeRequiredProp(Number),
+  value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
+  minDate: makeRequiredProp(Number),
+  maxDate: makeRequiredProp(Number),
+  firstDayOfWeek: makeRequiredProp(Number),
+  formatter: Function as PropType<CalendarFormatter>,
+  maxRange: Number,
+  rangePrompt: String,
+  allowSameDay: makeBooleanProp(false),
+  defaultTime: {
+    type: [Array] as PropType<Array<number[]>>
+  },
+  showTitle: makeBooleanProp(true)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/index.scss b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/index.scss
new file mode 100644
index 0000000..f8b9fe5
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/index.scss
@@ -0,0 +1,89 @@
+@import '../../common/abstracts/variable';
+@import '../../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(month-panel) {
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(weeks) {
+      box-shadow: 0px 4px 8px 0 rgba(255, 255, 255, 0.02);
+      color: $-dark-color;
+    }
+
+    @include e(time-label) {
+      color: $-dark-color;
+      &::after{
+        background: $-dark-background4;
+      }
+    }
+  }
+}
+
+@include b(month-panel) {
+  font-size: $-calendar-fs;
+
+  @include e(title) {
+    padding: 5px 0;
+    text-align: center;
+    font-size: $-calendar-panel-title-fs;
+    color: $-calendar-panel-title-color;
+    padding: $-calendar-panel-padding;
+  }
+
+  @include e(weeks) {
+    display: flex;
+    height: $-calendar-week-height;
+    line-height: $-calendar-week-height;
+    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+    color: $-calendar-week-color;
+    font-size: $-calendar-week-fs;
+    padding: $-calendar-panel-padding;
+  }
+
+  @include e(week) {
+    flex: 1;
+    text-align: center;
+  }
+
+  @include e(container) {
+    padding: $-calendar-panel-padding;
+    box-sizing: border-box;
+  }
+
+  @include e(time) {
+    display: flex;
+    box-shadow: 0px -4px 8px 0px rgba(0, 0, 0, 0.02);
+  }
+
+  @include e(time-label) {
+    position: relative;
+    flex: 1;
+    font-size: $-picker-column-fs;
+    text-align: center;
+    line-height: 125px;
+    color: $-picker-column-color;
+
+    &::after {
+      position: absolute;
+      content: '';
+      height: 35px;
+      top: 50%;
+      left: 0;
+      right: 0;
+      transform: translateY(-50%);
+      background: $-picker-column-select-bg;
+      z-index: 0;
+    }
+  }
+
+  @include e(time-text) {
+    position: relative;
+    z-index: 1;
+  }
+
+  @include e(time-picker) {
+    flex: 3;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
new file mode 100644
index 0000000..86725c8
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
@@ -0,0 +1,374 @@
+<template>
+  <view class="wd-month-panel">
+    <view v-if="showPanelTitle" class="wd-month-panel__title">
+      {{ title }}
+    </view>
+    <view class="wd-month-panel__weeks">
+      <view v-for="item in 7" :key="item" class="wd-month-panel__week">{{ weekLabel(item + firstDayOfWeek) }}</view>
+    </view>
+    <scroll-view
+      :class="`wd-month-panel__container ${!!timeType ? 'wd-month-panel__container--time' : ''}`"
+      :style="`height: ${scrollHeight}px`"
+      scroll-y
+      @scroll="monthScroll"
+      :scroll-top="scrollTop"
+    >
+      <view v-for="(item, index) in months" :key="index" :id="`month${index}`">
+        <month
+          :type="type"
+          :date="item.date"
+          :value="value"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :first-day-of-week="firstDayOfWeek"
+          :formatter="formatter"
+          :max-range="maxRange"
+          :range-prompt="rangePrompt"
+          :allow-same-day="allowSameDay"
+          :default-time="defaultTime"
+          :showTitle="index !== 0"
+          @change="handleDateChange"
+        />
+      </view>
+    </scroll-view>
+    <view v-if="timeType" class="wd-month-panel__time">
+      <view v-if="type === 'datetimerange'" class="wd-month-panel__time-label">
+        <view class="wd-month-panel__time-text">{{ timeType === 'start' ? translate('startTime') : translate('endTime') }}</view>
+      </view>
+      <view class="wd-month-panel__time-picker">
+        <wd-picker-view
+          v-if="timeData.length"
+          v-model="timeValue"
+          :columns="timeData"
+          :columns-height="125"
+          :immediate-change="immediateChange"
+          @change="handleTimeChange"
+          @pickstart="handlePickStart"
+          @pickend="handlePickEnd"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPickerView from '../../wd-picker-view/wd-picker-view.vue'
+import { computed, ref, watch, onMounted } from 'vue'
+import { debounce, isArray, isEqual, isNumber, pause } from '../../common/util'
+import { compareMonth, formatMonthTitle, getMonthEndDay, getMonths, getTimeData, getWeekLabel } from '../utils'
+import Month from '../month/month.vue'
+import { monthPanelProps, type MonthInfo, type MonthPanelTimeType, type MonthPanelExpose } from './types'
+import { useTranslate } from '../../composables/useTranslate'
+import type { CalendarItem } from '../types'
+
+const props = defineProps(monthPanelProps)
+const emit = defineEmits(['change', 'pickstart', 'pickend'])
+
+const { translate } = useTranslate('calendar-view')
+
+const scrollTop = ref<number>(0) // 滚动位置
+const scrollIndex = ref<number>(0) // 当前显示的月份索引
+const timeValue = ref<number[]>([]) // 当前选中的时分秒
+
+const timeType = ref<MonthPanelTimeType>('') // 当前时间类型，是开始还是结束
+const innerValue = ref<string | number | (number | null)[]>('') // 内部保存一个值，用于判断新老值，避免监听器触发
+
+const handleChange = debounce((value) => {
+  emit('change', {
+    value
+  })
+}, 50)
+
+// 时间picker的列数据
+const timeData = computed<Array<CalendarItem[]>>(() => {
+  let timeColumns: Array<CalendarItem[]> = []
+  if (props.type === 'datetime' && isNumber(props.value)) {
+    const date = new Date(props.value)
+    date.setHours(timeValue.value[0])
+    date.setMinutes(timeValue.value[1])
+    date.setSeconds(props.hideSecond ? 0 : timeValue.value[2])
+    const dateTime = date.getTime()
+    timeColumns = getTime(dateTime) || []
+  } else if (isArray(props.value) && props.type === 'datetimerange') {
+    const [start, end] = props.value!
+    const dataValue = timeType.value === 'start' ? start : end
+    const date = new Date(dataValue || '')
+    date.setHours(timeValue.value[0])
+    date.setMinutes(timeValue.value[1])
+    date.setSeconds(props.hideSecond ? 0 : timeValue.value[2])
+    const dateTime = date.getTime()
+    const finalValue = [start, end]
+    if (timeType.value === 'start') {
+      finalValue[0] = dateTime
+    } else {
+      finalValue[1] = dateTime
+    }
+    timeColumns = getTime(finalValue, timeType.value) || []
+  }
+  return timeColumns
+})
+
+// 标题
+const title = computed(() => {
+  return formatMonthTitle(months.value[scrollIndex.value].date)
+})
+
+// 周标题
+const weekLabel = computed(() => {
+  return (index: number) => {
+    return getWeekLabel(index - 1)
+  }
+})
+
+// 滚动区域的高度
+const scrollHeight = computed(() => {
+  const scrollHeight: number = timeType.value ? props.panelHeight - 125 : props.panelHeight
+  return scrollHeight
+})
+
+// 月份日期和月份高度
+const months = computed<MonthInfo[]>(() => {
+  return getMonths(props.minDate, props.maxDate).map((month, index) => {
+    const offset = (7 + new Date(month).getDay() - props.firstDayOfWeek) % 7
+    const totalDay = getMonthEndDay(new Date(month).getFullYear(), new Date(month).getMonth() + 1)
+    const rows = Math.ceil((offset + totalDay) / 7)
+    return {
+      height: rows * 64 + (rows - 1) * 4 + (index === 0 ? 0 : 45), // 每行64px高度,除最后一行外每行加4px margin,加上标题45px
+      date: month
+    }
+  })
+})
+
+watch(
+  () => props.type,
+  (val) => {
+    if (
+      (val === 'datetime' && props.value) ||
+      (val === 'datetimerange' && isArray(props.value) && props.value && props.value.length > 0 && props.value[0])
+    ) {
+      setTime(props.value, 'start')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.value,
+  (val) => {
+    if (isEqual(val, innerValue.value)) return
+
+    if ((props.type === 'datetime' && val) || (props.type === 'datetimerange' && val && isArray(val) && val.length > 0 && val[0])) {
+      setTime(val, 'start')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  scrollIntoView()
+})
+
+/**
+ * 使当前日期或者选中日期滚动到可视区域
+ */
+async function scrollIntoView() {
+  // 等待渲染完毕
+  await pause()
+  let activeDate: number | null = 0
+  if (isArray(props.value)) {
+    // 对数组按时间排序,取第一个值
+    const sortedValue = [...props.value].sort((a, b) => (a || 0) - (b || 0))
+    activeDate = sortedValue[0]
+  } else if (isNumber(props.value)) {
+    activeDate = props.value
+  }
+
+  if (!activeDate) {
+    activeDate = Date.now()
+  }
+
+  let top: number = 0
+  let activeMonthIndex = -1
+  for (let index = 0; index < months.value.length; index++) {
+    if (compareMonth(months.value[index].date, activeDate) === 0) {
+      activeMonthIndex = index
+      // 找到选中月份后,计算选中日期在月份中的位置
+      const date = new Date(activeDate)
+      const day = date.getDate()
+      const firstDay = new Date(date.getFullYear(), date.getMonth(), 1)
+      const offset = (7 + firstDay.getDay() - props.firstDayOfWeek) % 7
+      const row = Math.floor((offset + day - 1) / 7)
+      // 每行高度64px,每行加4px margin
+      top += row * 64 + row * 4
+      break
+    }
+    top += months.value[index] ? Number(months.value[index].height) : 0
+  }
+  scrollTop.value = 0
+  if (top > 0) {
+    await pause()
+    // 如果不是第一个月才加45
+    scrollTop.value = top + (activeMonthIndex > 0 ? 45 : 0)
+  }
+}
+/**
+ * 获取时间 picker 的数据
+ * @param {timestamp|array} value 当前时间
+ * @param {string} type 类型，是开始还是结束
+ */
+function getTime(value: number | (number | null)[], type?: string) {
+  if (props.type === 'datetime') {
+    return getTimeData({
+      date: value as number,
+      minDate: props.minDate,
+      maxDate: props.maxDate,
+      filter: props.timeFilter,
+      isHideSecond: props.hideSecond
+    })
+  } else {
+    if (type === 'start' && isArray(props.value)) {
+      return getTimeData({
+        date: (value as Array<number>)[0],
+        minDate: props.minDate,
+        maxDate: props.value[1] ? props.value[1] : props.maxDate,
+        filter: props.timeFilter,
+        isHideSecond: props.hideSecond
+      })
+    } else {
+      return getTimeData({
+        date: (value as Array<number>)[1],
+        minDate: (value as Array<number>)[0],
+        maxDate: props.maxDate,
+        filter: props.timeFilter,
+        isHideSecond: props.hideSecond
+      })
+    }
+  }
+}
+/**
+ * 获取 date 的时分秒
+ * @param {timestamp} date 时间
+ * @param {string} type 类型，是开始还是结束
+ */
+function getTimeValue(date: number | (number | null)[], type: MonthPanelTimeType) {
+  let dateValue: Date = new Date()
+  if (props.type === 'datetime') {
+    dateValue = new Date(date as number)
+  } else if (isArray(date)) {
+    if (type === 'start') {
+      dateValue = new Date(date[0] || '')
+    } else {
+      dateValue = new Date(date[1] || '')
+    }
+  }
+
+  const hour = dateValue.getHours()
+  const minute = dateValue.getMinutes()
+  const second = dateValue.getSeconds()
+  return props.hideSecond ? [hour, minute] : [hour, minute, second]
+}
+
+function setTime(value: number | (number | null)[], type?: MonthPanelTimeType) {
+  if (isArray(value) && value[0] && value[1] && type === 'start' && timeType.value === 'start') {
+    type = 'end'
+  }
+  timeType.value = type || ''
+  timeValue.value = getTimeValue(value, type || '')
+}
+function handleDateChange({ value, type }: { value: number | (number | null)[]; type?: MonthPanelTimeType }) {
+  if (!isEqual(value, props.value)) {
+    // 内部保存一个值，用于判断新老值，避免监听器触发
+    innerValue.value = value
+    handleChange(value)
+  }
+  // datetime 和 datetimerange 类型，需要计算 timeData 并做展示
+  if (props.type.indexOf('time') > -1) {
+    setTime(value, type)
+  }
+}
+function handleTimeChange({ value }: { value: any[] }) {
+  if (!props.value) {
+    return
+  }
+  if (props.type === 'datetime' && isNumber(props.value)) {
+    const date = new Date(props.value)
+    date.setHours(value[0])
+    date.setMinutes(value[1])
+    date.setSeconds(props.hideSecond ? 0 : value[2])
+    const dateTime = date.getTime()
+    handleChange(dateTime)
+  } else if (isArray(props.value) && props.type === 'datetimerange') {
+    const [start, end] = props.value!
+    const dataValue = timeType.value === 'start' ? start : end
+    const date = new Date(dataValue || '')
+    date.setHours(value[0])
+    date.setMinutes(value[1])
+    date.setSeconds(props.hideSecond ? 0 : value[2])
+    const dateTime = date.getTime()
+
+    if (dateTime === dataValue) return
+
+    const finalValue = [start, end]
+    if (timeType.value === 'start') {
+      finalValue[0] = dateTime
+    } else {
+      finalValue[1] = dateTime
+    }
+    innerValue.value = finalValue // 内部保存一个值，用于判断新老值，避免监听器触发
+    handleChange(finalValue)
+  }
+}
+function handlePickStart() {
+  emit('pickstart')
+}
+function handlePickEnd() {
+  emit('pickend')
+}
+
+const monthScroll = (event: { detail: { scrollTop: number } }) => {
+  if (months.value.length <= 1) {
+    return
+  }
+  const scrollTop = Math.max(0, event.detail.scrollTop)
+  doSetSubtitle(scrollTop)
+}
+
+/**
+ * 设置小标题
+ * scrollTop 滚动条位置
+ */
+function doSetSubtitle(scrollTop: number) {
+  let height: number = 0 // 月份高度和
+  for (let index = 0; index < months.value.length; index++) {
+    height = height + months.value[index].height
+    if (scrollTop < height) {
+      scrollIndex.value = index
+      return
+    }
+  }
+}
+
+defineExpose<MonthPanelExpose>({
+  scrollIntoView
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts
new file mode 100644
index 0000000..bd27a85
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/types.ts
@@ -0,0 +1,48 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { makeBooleanProp, makeRequiredProp } from '../../common/props'
+import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../types'
+
+/**
+ * 月份信息
+ */
+export interface MonthInfo {
+  date: number
+  height: number
+}
+
+export const monthPanelProps = {
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  value: makeRequiredProp([Number, Array, null] as PropType<number | (number | null)[] | null>),
+  minDate: makeRequiredProp(Number),
+  maxDate: makeRequiredProp(Number),
+  firstDayOfWeek: makeRequiredProp(Number),
+  formatter: Function as PropType<CalendarFormatter>,
+  maxRange: Number,
+  rangePrompt: String,
+  allowSameDay: makeBooleanProp(false),
+  showPanelTitle: makeBooleanProp(false),
+  defaultTime: {
+    type: [Array] as PropType<Array<number[]>>
+  },
+  panelHeight: makeRequiredProp(Number),
+  // type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+  timeFilter: Function as PropType<CalendarTimeFilter>,
+  hideSecond: makeBooleanProp(false),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false)
+}
+
+export type MonthPanelProps = ExtractPropTypes<typeof monthPanelProps>
+
+export type MonthPanelTimeType = 'start' | 'end' | ''
+
+export type MonthPanelExpose = {
+  /**
+   * 使当前日期或者选中日期滚动到可视区域
+   */
+  scrollIntoView: () => void
+}
+
+export type MonthPanelInstance = ComponentPublicInstance<MonthPanelProps, MonthPanelExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts
new file mode 100644
index 0000000..cadbf1b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/types.ts
@@ -0,0 +1,109 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type CalendarType = 'date' | 'dates' | 'datetime' | 'week' | 'month' | 'daterange' | 'datetimerange' | 'weekrange' | 'monthrange'
+
+export const calendarViewProps = {
+  ...baseProps,
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   */
+  modelValue: makeRequiredProp([Number, Array, null] as PropType<number | number[] | null>),
+  /**
+   * 日期类型
+   */
+  type: makeStringProp<CalendarType>('date'),
+  /**
+   * 最小日期，为 13 位时间戳
+   */
+  minDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime()),
+  /**
+   * 最大日期，为 13 位时间戳
+   */
+  maxDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime()),
+  /**
+   * 周起始天
+   */
+  firstDayOfWeek: makeNumberProp(0),
+  /**
+   * 日期格式化函数
+   */
+  formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * type 为范围选择时有效，最大日期范围
+   */
+  maxRange: Number,
+  /**
+   * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
+   */
+  rangePrompt: String,
+  /**
+   * type 为范围选择时有效，是否允许选择同一天
+   */
+  allowSameDay: makeBooleanProp(false),
+  // 是否展示面板标题，自动计算当前滚动的日期月份
+  showPanelTitle: makeBooleanProp(true),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   */
+  defaultTime: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: '00:00:00'
+  },
+  /**
+   * 可滚动面板的高度
+   */
+  panelHeight: makeNumberProp(378),
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+   */
+  timeFilter: Function as PropType<CalendarTimeFilter>,
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
+   */
+  hideSecond: makeBooleanProp(false),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false)
+}
+
+export type CalendarViewProps = ExtractPropTypes<typeof calendarViewProps>
+
+export type CalendarDayType = '' | 'start' | 'middle' | 'end' | 'selected' | 'same' | 'current' | 'multiple-middle' | 'multiple-selected'
+
+export type CalendarDayItem = {
+  date: number
+  text?: number | string
+  topInfo?: string
+  bottomInfo?: string
+  type?: CalendarDayType
+  disabled?: boolean
+  isLastRow?: boolean
+}
+
+export type CalendarFormatter = (day: CalendarDayItem) => CalendarDayItem
+
+export type CalendarTimeFilterOptionType = 'hour' | 'minute' | 'second'
+
+export type CalendarTimeFilterOption = {
+  type: CalendarTimeFilterOptionType
+  values: CalendarItem[]
+}
+
+export type CalendarTimeFilter = (option: CalendarTimeFilterOption) => CalendarItem[]
+
+export type CalendarItem = {
+  label: string
+  value: number
+  disabled: boolean
+}
+
+export type CalendarViewExpose = {
+  /**
+   * 使当前日期或者选中日期滚动到可视区域
+   */
+  scrollIntoView: () => void
+}
+
+export type CalendarViewInstance = ComponentPublicInstance<CalendarViewExpose, CalendarViewProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts
new file mode 100644
index 0000000..0491b9d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/utils.ts
@@ -0,0 +1,429 @@
+import { computed } from 'vue'
+import { dayjs } from '../common/dayjs'
+import { isArray, isFunction, padZero } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import type { CalendarDayType, CalendarItem, CalendarTimeFilter, CalendarType } from './types'
+const { translate } = useTranslate('calendar-view')
+
+const weeks = computed(() => {
+  return [
+    translate('weeks.sun'),
+    translate('weeks.mon'),
+    translate('weeks.tue'),
+    translate('weeks.wed'),
+    translate('weeks.thu'),
+    translate('weeks.fri'),
+    translate('weeks.sat')
+  ]
+})
+
+/**
+ * 比较两个时间的日期是否相等
+ * @param {timestamp} date1
+ * @param {timestamp} date2
+ */
+export function compareDate(date1: number, date2: number | null) {
+  const dateValue1 = new Date(date1)
+  const dateValue2 = new Date(date2 || '')
+
+  const year1 = dateValue1.getFullYear()
+  const year2 = dateValue2.getFullYear()
+  const month1 = dateValue1.getMonth()
+  const month2 = dateValue2.getMonth()
+  const day1 = dateValue1.getDate()
+  const day2 = dateValue2.getDate()
+
+  if (year1 === year2) {
+    if (month1 === month2) {
+      return day1 === day2 ? 0 : day1 > day2 ? 1 : -1
+    }
+    return month1 === month2 ? 0 : month1 > month2 ? 1 : -1
+  }
+
+  return year1 > year2 ? 1 : -1
+}
+
+/**
+ * 判断是否是范围选择
+ * @param {string} type
+ */
+export function isRange(type: CalendarType) {
+  return type.indexOf('range') > -1
+}
+
+/**
+ * 比较两个日期的月份是否相等
+ * @param {timestamp} date1
+ * @param {timestamp} date2
+ */
+export function compareMonth(date1: number, date2: number) {
+  const dateValue1 = new Date(date1)
+  const dateValue2 = new Date(date2)
+
+  const year1 = dateValue1.getFullYear()
+  const year2 = dateValue2.getFullYear()
+  const month1 = dateValue1.getMonth()
+  const month2 = dateValue2.getMonth()
+
+  if (year1 === year2) {
+    return month1 === month2 ? 0 : month1 > month2 ? 1 : -1
+  }
+
+  return year1 > year2 ? 1 : -1
+}
+
+/**
+ * 比较两个日期的年份是否一致
+ * @param {timestamp} date1
+ * @param {timestamp} date2
+ */
+export function compareYear(date1: number, date2: number) {
+  const dateValue1 = new Date(date1)
+  const dateValue2 = new Date(date2)
+
+  const year1 = dateValue1.getFullYear()
+  const year2 = dateValue2.getFullYear()
+
+  return year1 === year2 ? 0 : year1 > year2 ? 1 : -1
+}
+
+/**
+ * 获取一个月的最后一天
+ * @param {number} year
+ * @param {number} month
+ */
+export function getMonthEndDay(year: number, month: number) {
+  return 32 - new Date(year, month - 1, 32).getDate()
+}
+
+/**
+ * 格式化年月
+ * @param {timestamp} date
+ */
+export function formatMonthTitle(date: number) {
+  return dayjs(date).format(translate('monthTitle'))
+}
+
+/**
+ * 根据下标获取星期
+ * @param {number} index
+ */
+export function getWeekLabel(index: number) {
+  if (index >= 7) {
+    index = index % 7
+  }
+
+  return weeks.value[index]
+}
+
+/**
+ * 格式化年份
+ * @param {timestamp} date
+ */
+export function formatYearTitle(date: number) {
+  return dayjs(date).format(translate('yearTitle'))
+}
+
+/**
+ * 根据最小日期和最大日期获取这之间总共有几个月份
+ * @param {timestamp} minDate
+ * @param {timestamp} maxDate
+ */
+export function getMonths(minDate: number, maxDate: number) {
+  const months: number[] = []
+  const month = new Date(minDate)
+  month.setDate(1)
+
+  while (compareMonth(month.getTime(), maxDate) < 1) {
+    months.push(month.getTime())
+    month.setMonth(month.getMonth() + 1)
+  }
+
+  return months
+}
+
+/**
+ * 根据最小日期和最大日期获取这之间总共有几年
+ * @param {timestamp} minDate
+ * @param {timestamp} maxDate
+ */
+export function getYears(minDate: number, maxDate: number) {
+  const years: number[] = []
+  const year = new Date(minDate)
+  year.setMonth(0)
+  year.setDate(1)
+
+  while (compareYear(year.getTime(), maxDate) < 1) {
+    years.push(year.getTime())
+    year.setFullYear(year.getFullYear() + 1)
+  }
+
+  return years
+}
+
+/**
+ * 获取一个日期所在周的第一天和最后一天
+ * @param {timestamp} date
+ */
+export function getWeekRange(date: number, firstDayOfWeek: number) {
+  if (firstDayOfWeek >= 7) {
+    firstDayOfWeek = firstDayOfWeek % 7
+  }
+
+  const dateValue = new Date(date)
+  dateValue.setHours(0, 0, 0, 0)
+  const year = dateValue.getFullYear()
+  const month = dateValue.getMonth()
+  const day = dateValue.getDate()
+  const week = dateValue.getDay()
+
+  const weekStart = new Date(year, month, day - ((7 + week - firstDayOfWeek) % 7))
+  const weekEnd = new Date(year, month, day + 6 - ((7 + week - firstDayOfWeek) % 7))
+
+  return [weekStart.getTime(), weekEnd.getTime()]
+}
+
+/**
+ * 获取日期偏移量
+ * @param {timestamp} date1
+ * @param {timestamp} date2
+ */
+export function getDayOffset(date1: number, date2: number) {
+  return (date1 - date2) / (24 * 60 * 60 * 1000) + 1
+}
+
+/**
+ * 获取偏移日期
+ * @param {timestamp} date
+ * @param {number} offset
+ */
+export function getDayByOffset(date: number, offset: number) {
+  const dateValue = new Date(date)
+  dateValue.setDate(dateValue.getDate() + offset)
+
+  return dateValue.getTime()
+}
+
+export const getPrevDay = (date: number) => getDayByOffset(date, -1)
+export const getNextDay = (date: number) => getDayByOffset(date, 1)
+
+/**
+ * 获取月份偏移量
+ * @param {timestamp} date1
+ * @param {timestamp} date2
+ */
+export function getMonthOffset(date1: number, date2: number) {
+  const dateValue1 = new Date(date1)
+  const dateValue2 = new Date(date2)
+
+  const year1 = dateValue1.getFullYear()
+  const year2 = dateValue2.getFullYear()
+  let month1 = dateValue1.getMonth()
+  const month2 = dateValue2.getMonth()
+
+  month1 = (year1 - year2) * 12 + month1
+
+  return month1 - month2 + 1
+}
+
+/**
+ * 获取偏移月份
+ * @param {timestamp} date
+ * @param {number} offset
+ */
+export function getMonthByOffset(date: number, offset: number) {
+  const dateValue = new Date(date)
+  dateValue.setMonth(dateValue.getMonth() + offset)
+
+  return dateValue.getTime()
+}
+
+/**
+ * 获取默认时间，格式化为数组
+ * @param {array|string|null} defaultTime
+ */
+export function getDefaultTime(defaultTime: string[] | string | null) {
+  if (isArray(defaultTime)) {
+    const startTime = (defaultTime[0] || '00:00:00').split(':').map((item: string) => {
+      return parseInt(item)
+    })
+    const endTime = (defaultTime[1] || '00:00:00').split(':').map((item) => {
+      return parseInt(item)
+    })
+    return [startTime, endTime]
+  } else {
+    const time = (defaultTime || '00:00:00').split(':').map((item) => {
+      return parseInt(item)
+    })
+
+    return [time, time]
+  }
+}
+
+/**
+ * 根据默认时间获取日期
+ * @param {timestamp} date
+ * @param {array} defaultTime
+ */
+export function getDateByDefaultTime(date: number, defaultTime: number[]) {
+  const dateValue = new Date(date)
+  dateValue.setHours(defaultTime[0])
+  dateValue.setMinutes(defaultTime[1])
+  dateValue.setSeconds(defaultTime[2])
+
+  return dateValue.getTime()
+}
+
+/**
+ * 获取经过 iteratee 格式化后的长度为 n 的数组
+ * @param {number} n
+ * @param {function} iteratee
+ */
+const times = (n: number, iteratee: (index: number) => CalendarItem) => {
+  let index: number = -1
+  const result: CalendarItem[] = Array(n < 0 ? 0 : n)
+  while (++index < n) {
+    result[index] = iteratee(index)
+  }
+  return result
+}
+
+/**
+ * 获取时分秒
+ * @param {timestamp}} date
+ */
+const getTime = (date: number) => {
+  const dateValue = new Date(date)
+  return [dateValue.getHours(), dateValue.getMinutes(), dateValue.getSeconds()]
+}
+
+/**
+ * 根据最小最大日期获取时间数据，用于填入picker
+ * @param {*} param0
+ */
+export function getTimeData({
+  date,
+  minDate,
+  maxDate,
+  isHideSecond,
+  filter
+}: {
+  date: number
+  minDate: number
+  maxDate: number
+  isHideSecond: boolean
+  filter?: CalendarTimeFilter
+}) {
+  const compareMin = compareDate(date, minDate)
+  const compareMax = compareDate(date, maxDate)
+
+  let minHour = 0
+  let maxHour = 23
+  let minMinute = 0
+  let maxMinute = 59
+  let minSecond = 0
+  let maxSecond = 59
+
+  if (compareMin === 0) {
+    const minTime = getTime(minDate)
+    const currentTime = getTime(date)
+
+    minHour = minTime[0]
+    if (minTime[0] === currentTime[0]) {
+      minMinute = minTime[1]
+
+      if (minTime[1] === currentTime[1]) {
+        minSecond = minTime[2]
+      }
+    }
+  }
+
+  if (compareMax === 0) {
+    const maxTime = getTime(maxDate)
+    const currentTime = getTime(date)
+
+    maxHour = maxTime[0]
+    if (maxTime[0] === currentTime[0]) {
+      maxMinute = maxTime[1]
+
+      if (maxTime[1] === currentTime[1]) {
+        maxSecond = maxTime[2]
+      }
+    }
+  }
+
+  let columns: CalendarItem[][] = []
+  let hours = times(24, (index) => {
+    return {
+      label: translate('hour', padZero(index)),
+      value: index,
+      disabled: index < minHour || index > maxHour
+    }
+  })
+  let minutes = times(60, (index) => {
+    return {
+      label: translate('minute', padZero(index)),
+      value: index,
+      disabled: index < minMinute || index > maxMinute
+    }
+  })
+  let seconds: CalendarItem[] = []
+  if (filter && isFunction(filter)) {
+    hours = filter({
+      type: 'hour',
+      values: hours
+    })
+    minutes = filter({
+      type: 'minute',
+      values: minutes
+    })
+  }
+
+  if (!isHideSecond) {
+    seconds = times(60, (index) => {
+      return {
+        label: translate('second', padZero(index)),
+        value: index,
+        disabled: index < minSecond || index > maxSecond
+      }
+    })
+    if (filter && isFunction(filter)) {
+      seconds = filter({
+        type: 'second',
+        values: seconds
+      })
+    }
+  }
+
+  columns = isHideSecond ? [hours, minutes] : [hours, minutes, seconds]
+
+  return columns
+}
+
+/**
+ * 获取当前是第几周
+ * @param {timestamp} date
+ */
+export function getWeekNumber(date: number | Date) {
+  date = new Date(date)
+  date.setHours(0, 0, 0, 0)
+  // Thursday in current week decides the year.
+  date.setDate(date.getDate() + 3 - ((date.getDay() + 6) % 7))
+  // January 4 is always in week 1.
+  const week = new Date(date.getFullYear(), 0, 4)
+  // Adjust to Thursday in week 1 and count number of weeks from date to week 1.
+  // Rounding should be fine for Daylight Saving Time. Its shift should never be more than 12 hours.
+  return 1 + Math.round(((date.getTime() - week.getTime()) / 86400000 - 3 + ((week.getDay() + 6) % 7)) / 7)
+}
+
+export function getItemClass(monthType: CalendarDayType, value: number | null | (number | null)[], type: CalendarType) {
+  const classList = ['is-' + monthType]
+
+  if (type.indexOf('range') > -1 && isArray(value)) {
+    if (!value || !value[1]) {
+      classList.push('is-without-end')
+    }
+  }
+
+  return classList.join(' ')
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue
new file mode 100644
index 0000000..42512d2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/wd-calendar-view.vue
@@ -0,0 +1,111 @@
+<template>
+  <view :class="`wd-calendar-view ${customClass}`">
+    <year-panel
+      v-if="type === 'month' || type === 'monthrange'"
+      ref="yearPanelRef"
+      :type="type"
+      :value="modelValue"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :formatter="formatter"
+      :max-range="maxRange"
+      :range-prompt="rangePrompt"
+      :allow-same-day="allowSameDay"
+      :show-panel-title="showPanelTitle"
+      :default-time="formatDefauleTime"
+      :panel-height="panelHeight"
+      @change="handleChange"
+    />
+    <month-panel
+      v-else
+      ref="monthPanelRef"
+      :type="type"
+      :value="modelValue"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :first-day-of-week="firstDayOfWeek"
+      :formatter="formatter"
+      :max-range="maxRange"
+      :range-prompt="rangePrompt"
+      :allow-same-day="allowSameDay"
+      :show-panel-title="showPanelTitle"
+      :default-time="formatDefauleTime"
+      :panel-height="panelHeight"
+      :immediate-change="immediateChange"
+      :time-filter="timeFilter"
+      :hide-second="hideSecond"
+      @change="handleChange"
+      @pickstart="handlePickStart"
+      @pickend="handlePickEnd"
+    />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-calendar-view',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue'
+import { getDefaultTime } from './utils'
+import yearPanel from './yearPanel/year-panel.vue'
+import MonthPanel from './monthPanel/month-panel.vue'
+import { calendarViewProps, type CalendarViewExpose } from './types'
+
+const props = defineProps(calendarViewProps)
+const emit = defineEmits(['change', 'update:modelValue', 'pickstart', 'pickend'])
+const formatDefauleTime = ref<number[][]>([])
+
+const yearPanelRef = ref()
+const monthPanelRef = ref()
+
+watch(
+  () => props.defaultTime,
+  (newValue) => {
+    formatDefauleTime.value = getDefaultTime(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * 使当前日期或者选中日期滚动到可视区域
+ */
+function scrollIntoView() {
+  const panel = getPanel()
+  panel.scrollIntoView && panel.scrollIntoView()
+}
+
+function getPanel() {
+  return props.type.indexOf('month') > -1 ? yearPanelRef.value : monthPanelRef.value
+}
+
+function handleChange({ value }: { value: number | number[] | null }) {
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+function handlePickStart() {
+  emit('pickstart')
+}
+function handlePickEnd() {
+  emit('pickend')
+}
+
+defineExpose<CalendarViewExpose>({
+  scrollIntoView
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss b/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss
new file mode 100644
index 0000000..efb9874
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/index.scss
@@ -0,0 +1,153 @@
+@import '../../common/abstracts/variable';
+@import '../../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(year) {
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(months) {
+      color: $-dark-color;
+    }
+
+    @include e(month) {
+
+      @include when(disabled) {
+        .wd-year__month-text {
+          color: $-dark-color-gray;
+        }
+      }
+    }
+  }
+}
+
+@include b(year) {
+  @include e(title) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 45px;
+    font-size: $-calendar-panel-title-fs;
+    color: $-calendar-panel-title-color;
+  }
+
+  @include e(months) {
+    display: flex;
+    flex-wrap: wrap;
+    font-size: $-calendar-day-fs;
+    color: $-calendar-day-color;
+  }
+
+  @include e(month) {
+    position: relative;
+    width: 25%;
+    height: $-calendar-day-height;
+    line-height: $-calendar-day-height;
+    text-align: center;
+    margin-bottom: $-calendar-item-margin-bottom;
+
+    @include when(disabled) {
+      .wd-year__month-text {
+        color: $-calendar-disabled-color;
+      }
+    }
+
+    @include when(current) {
+      color: $-calendar-active-color;
+    }
+
+    @include when(selected) {
+      color: #fff;
+
+      .wd-year__month-text {
+        border-radius: $-calendar-active-border;
+        background: $-calendar-active-color;
+      }
+    }
+
+    @include when(middle) {
+      background: $-calendar-range-color;
+    }
+
+    @include when(start) {
+      color: $-calendar-selected-color;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        right: 0;
+        left: 50%;
+        bottom: 0;
+        content: '';
+        background: $-calendar-range-color;
+      }
+
+      .wd-year__month-text {
+        background: $-calendar-active-color;
+        border-radius: $-calendar-active-border 0 0 $-calendar-active-border;
+      }
+
+      &.is-without-end::after {
+        display: none;
+      }
+    }
+
+    @include when(end) {
+      color: $-calendar-selected-color;
+
+      &::after {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 50%;
+        bottom: 0;
+        content: '';
+        background: $-calendar-range-color;
+      }
+
+      .wd-year__month-text {
+        background: $-calendar-active-color;
+        border-radius: 0 $-calendar-active-border $-calendar-active-border 0;
+      }
+    }
+
+    @include when(same) {
+      color: $-calendar-selected-color;
+
+      .wd-year__month-text {
+        background: $-calendar-active-color;
+        border-radius: $-calendar-active-border;
+      }
+    }
+    @include when(last-row){
+      margin-bottom: 0;
+    }
+  }
+
+  @include e(month-text) {
+    width: $-calendar-month-width;
+    margin: 0 auto;
+    text-align: center;
+  }
+
+  @include e(month-top) {
+    position: absolute;
+    top: 10px;
+    left: 0;
+    right: 0;
+    line-height: 1.1;
+    font-size: $-calendar-info-fs;
+    text-align: center;
+  }
+
+  @include e(month-bottom) {
+    position: absolute;
+    bottom: 10px;
+    left: 0;
+    right: 0;
+    line-height: 1.1;
+    font-size: $-calendar-info-fs;
+    text-align: center;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/types.ts
new file mode 100644
index 0000000..0df05ac
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/types.ts
@@ -0,0 +1,20 @@
+import type { PropType } from 'vue'
+import { makeBooleanProp, makeRequiredProp } from '../../common/props'
+import type { CalendarFormatter, CalendarType } from '../types'
+
+export const yearProps = {
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  date: makeRequiredProp(Number),
+  value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
+  minDate: makeRequiredProp(Number),
+  maxDate: makeRequiredProp(Number),
+  // 日期格式化函数
+  formatter: Function as PropType<CalendarFormatter>,
+  maxRange: Number,
+  rangePrompt: String,
+  allowSameDay: makeBooleanProp(false),
+  defaultTime: {
+    type: [Array] as PropType<Array<number[]>>
+  },
+  showTitle: makeBooleanProp(true)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
new file mode 100644
index 0000000..5657dce
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
@@ -0,0 +1,202 @@
+<template>
+  <wd-toast selector="wd-year" />
+
+  <view class="wd-year year">
+    <view class="wd-year__title" v-if="showTitle">{{ yearTitle(date) }}</view>
+    <view class="wd-year__months">
+      <view
+        v-for="(item, index) in months"
+        :key="index"
+        :class="`wd-year__month ${item.disabled ? 'is-disabled' : ''} ${item.isLastRow ? 'is-last-row' : ''} ${
+          item.type ? monthTypeClass(item.type) : ''
+        }`"
+        @click="handleDateClick(index)"
+      >
+        <view class="wd-year__month-top">{{ item.topInfo }}</view>
+        <view class="wd-year__month-text">{{ getMonthLabel(item.date) }}</view>
+        <view class="wd-year__month-bottom">{{ item.bottomInfo }}</view>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdToast from '../../wd-toast/wd-toast.vue'
+import { computed, ref, watch } from 'vue'
+import { deepClone, isArray, isFunction } from '../../common/util'
+import { compareMonth, formatYearTitle, getDateByDefaultTime, getItemClass, getMonthByOffset, getMonthOffset } from '../utils'
+import { useToast } from '../../wd-toast'
+import { useTranslate } from '../../composables/useTranslate'
+import { dayjs } from '../../common/dayjs'
+import { yearProps } from './types'
+import type { CalendarDayItem, CalendarDayType } from '../types'
+
+const props = defineProps(yearProps)
+const emit = defineEmits(['change'])
+
+const toast = useToast('wd-year')
+const { translate } = useTranslate('calendar-view')
+
+const months = ref<CalendarDayItem[]>([])
+
+const monthTypeClass = computed(() => {
+  return (monthType: CalendarDayType) => {
+    return getItemClass(monthType, props.value, props.type)
+  }
+})
+
+const yearTitle = computed(() => {
+  return (date: number) => {
+    return formatYearTitle(date)
+  }
+})
+
+watch(
+  [() => props.type, () => props.date, () => props.value, () => props.minDate, () => props.maxDate, () => props.formatter],
+  () => {
+    setMonths()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+function getMonthLabel(date: number) {
+  return dayjs(date).format(translate('month', date))
+}
+
+function setMonths() {
+  const monthList: CalendarDayItem[] = []
+  const date = new Date(props.date)
+  const year = date.getFullYear()
+  const value = props.value
+
+  if (props.type.indexOf('range') > -1 && value && !isArray(value)) {
+    console.error('[wot-design] value should be array when type is range')
+    return
+  }
+
+  for (let month = 0; month < 12; month++) {
+    const date = new Date(year, month, 1).getTime()
+    let type: CalendarDayType = getMonthType(date)
+    if (!type && compareMonth(date, Date.now()) === 0) {
+      type = 'current'
+    }
+    const monthObj = getFormatterDate(date, month, type)
+    monthList.push(monthObj)
+  }
+
+  months.value = deepClone(monthList)
+}
+function getMonthType(date: number) {
+  if (props.type === 'monthrange' && isArray(props.value)) {
+    const [startDate, endDate] = props.value || []
+
+    if (startDate && compareMonth(date, startDate) === 0) {
+      if (endDate && compareMonth(startDate, endDate) === 0) {
+        return 'same'
+      }
+      return 'start'
+    } else if (endDate && compareMonth(date, endDate) === 0) {
+      return 'end'
+    } else if (startDate && endDate && compareMonth(date, startDate) === 1 && compareMonth(date, endDate) === -1) {
+      return 'middle'
+    } else {
+      return ''
+    }
+  } else {
+    if (props.value && compareMonth(date, props.value as number) === 0) {
+      return 'selected'
+    } else {
+      return ''
+    }
+  }
+}
+function handleDateClick(index: number) {
+  const date = months.value[index]
+
+  if (date.disabled) return
+
+  switch (props.type) {
+    case 'month':
+      handleMonthChange(date)
+      break
+    case 'monthrange':
+      handleMonthRangeChange(date)
+      break
+    default:
+      handleMonthChange(date)
+  }
+}
+function getDate(date: number) {
+  return props.defaultTime && props.defaultTime.length > 0 ? getDateByDefaultTime(date, props.defaultTime[0]) : date
+}
+function handleMonthChange(date: CalendarDayItem) {
+  if (date.type !== 'selected') {
+    emit('change', {
+      value: getDate(date.date)
+    })
+  }
+}
+function handleMonthRangeChange(date: CalendarDayItem) {
+  let value: (number | null)[] = []
+  const [startDate, endDate] = isArray(props.value) ? props.value || [] : []
+  const compare = compareMonth(date.date, startDate!)
+
+  // 禁止选择同个日期
+  if (!props.allowSameDay && !endDate && compare === 0) return
+
+  if (startDate && !endDate && compare > -1) {
+    if (props.maxRange && getMonthOffset(date.date, startDate) > props.maxRange) {
+      const maxEndDate = getMonthByOffset(startDate, props.maxRange - 1)
+      value = [startDate, getDate(maxEndDate)]
+      toast.show({
+        msg: props.rangePrompt || translate('rangePromptMonth', props.maxRange)
+      })
+    } else {
+      value = [startDate, getDate(date.date)]
+    }
+  } else {
+    value = [getDate(date.date), null]
+  }
+  emit('change', {
+    value
+  })
+}
+
+function getFormatterDate(date: number, month: number, type?: CalendarDayType) {
+  let monthObj: CalendarDayItem = {
+    date: date,
+    text: month + 1,
+    topInfo: '',
+    bottomInfo: '',
+    type,
+    disabled: compareMonth(date, props.minDate) === -1 || compareMonth(date, props.maxDate) === 1,
+    isLastRow: month >= 8
+  }
+
+  if (props.formatter) {
+    if (isFunction(props.formatter)) {
+      monthObj = props.formatter(monthObj)
+    } else {
+      console.error('[wot-design] error(wd-calendar-view): the formatter prop of wd-calendar-view should be a function')
+    }
+  }
+
+  return monthObj
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/index.scss b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/index.scss
new file mode 100644
index 0000000..920778a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/index.scss
@@ -0,0 +1,24 @@
+@import '../../common/abstracts/variable';
+@import '../../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(year-panel) {
+    @include e(title) {
+      color: $-dark-color;
+      box-shadow: 0px 4px 8px 0 rgba(255, 255,255, 0.02);
+    }
+  }
+}
+
+@include b(year-panel) {
+  font-size: $-calendar-fs;
+  padding: $-calendar-panel-padding;
+
+  @include e(title) {
+    padding: 5px 0;
+    text-align: center;
+    font-size: $-calendar-panel-title-fs;
+    color: $-calendar-panel-title-color;
+    box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/types.ts
new file mode 100644
index 0000000..6e60b01
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/types.ts
@@ -0,0 +1,38 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { makeBooleanProp, makeRequiredProp } from '../../common/props'
+import type { CalendarFormatter, CalendarType } from '../types'
+
+/**
+ * 月份信息
+ */
+export interface YearInfo {
+  date: number
+  height: number
+}
+
+export const yearPanelProps = {
+  type: makeRequiredProp(String as PropType<CalendarType>),
+  value: makeRequiredProp([Number, Array] as PropType<number | (number | null)[] | null>),
+  minDate: makeRequiredProp(Number),
+  maxDate: makeRequiredProp(Number),
+  formatter: Function as PropType<CalendarFormatter>,
+  maxRange: Number,
+  rangePrompt: String,
+  allowSameDay: makeBooleanProp(false),
+  showPanelTitle: makeBooleanProp(false),
+  defaultTime: {
+    type: [Array] as PropType<Array<number[]>>
+  },
+  panelHeight: makeRequiredProp(Number)
+}
+
+export type YearPanelProps = ExtractPropTypes<typeof yearPanelProps>
+
+export type YearPanelExpose = {
+  /**
+   * 使当前日期或者选中日期滚动到可视区域
+   */
+  scrollIntoView: () => void
+}
+
+export type YearPanelInstance = ComponentPublicInstance<YearPanelProps, YearPanelExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
new file mode 100644
index 0000000..8c48c89
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
@@ -0,0 +1,135 @@
+<template>
+  <view class="wd-year-panel">
+    <view v-if="showPanelTitle" class="wd-year-panel__title">{{ title }}</view>
+    <scroll-view class="wd-year-panel__container" :style="`height: ${scrollHeight}px`" scroll-y @scroll="yearScroll" :scroll-top="scrollTop">
+      <view v-for="(item, index) in years" :key="index" :id="`year${index}`">
+        <year
+          :type="type"
+          :date="item.date"
+          :value="value"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :max-range="maxRange"
+          :formatter="formatter"
+          :range-prompt="rangePrompt"
+          :allow-same-day="allowSameDay"
+          :default-time="defaultTime"
+          :showTitle="index !== 0"
+          @change="handleDateChange"
+        />
+      </view>
+    </scroll-view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, onMounted } from 'vue'
+import { compareYear, formatYearTitle, getYears } from '../utils'
+import { isArray, isNumber, pause } from '../../common/util'
+import Year from '../year/year.vue'
+import { yearPanelProps, type YearInfo, type YearPanelExpose } from './types'
+
+const props = defineProps(yearPanelProps)
+const emit = defineEmits(['change'])
+
+const scrollTop = ref<number>(0) // 滚动位置
+const scrollIndex = ref<number>(0) // 当前显示的年份索引
+
+// 滚动区域的高度
+const scrollHeight = computed(() => {
+  const scrollHeight: number = props.panelHeight + (props.showPanelTitle ? 26 : 16)
+  return scrollHeight
+})
+
+// 年份信息
+const years = computed<YearInfo[]>(() => {
+  return getYears(props.minDate, props.maxDate).map((year, index) => {
+    return {
+      date: year,
+      height: index === 0 ? 200 : 245
+    }
+  })
+})
+
+// 标题
+const title = computed(() => {
+  return formatYearTitle(years.value[scrollIndex.value].date)
+})
+
+onMounted(() => {
+  scrollIntoView()
+})
+
+async function scrollIntoView() {
+  await pause()
+  let activeDate: number | null = null
+  if (isArray(props.value)) {
+    activeDate = props.value![0]
+  } else if (isNumber(props.value)) {
+    activeDate = props.value
+  }
+
+  if (!activeDate) {
+    activeDate = Date.now()
+  }
+
+  let top: number = 0
+  for (let index = 0; index < years.value.length; index++) {
+    if (compareYear(years.value[index].date, activeDate) === 0) {
+      break
+    }
+    top += years.value[index] ? Number(years.value[index].height) : 0
+  }
+  scrollTop.value = 0
+  if (top > 0) {
+    await pause()
+    scrollTop.value = top + 45
+  }
+}
+
+const yearScroll = (event: { detail: { scrollTop: number } }) => {
+  if (years.value.length <= 1) {
+    return
+  }
+  const scrollTop = Math.max(0, event.detail.scrollTop)
+  doSetSubtitle(scrollTop)
+}
+
+/**
+ * 设置小标题
+ * scrollTop 滚动条位置
+ */
+function doSetSubtitle(scrollTop: number) {
+  let height: number = 0 // 月份高度和
+  for (let index = 0; index < years.value.length; index++) {
+    height = height + years.value[index].height
+    if (scrollTop < height) {
+      scrollIndex.value = index
+      return
+    }
+  }
+}
+
+function handleDateChange({ value }: { value: number[] }) {
+  emit('change', {
+    value
+  })
+}
+
+defineExpose<YearPanelExpose>({
+  scrollIntoView
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/index.scss b/src/uni_modules/wot-design-uni/components/wd-calendar/index.scss
new file mode 100644
index 0000000..f6476bc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/index.scss
@@ -0,0 +1,245 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(calendar) {
+    @include e(cell) {
+      background-color: $-dark-background2;
+      color: $-dark-color;
+    }
+    
+    @include e(label) {
+      color: $-dark-color;
+    }
+
+    @include e(value) {
+      color: $-dark-color;
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    :deep(.wd-calendar__arrow),
+    :deep(.wd-calendar__close) {
+      color: $-dark-color;
+    }
+
+
+    @include when(border) {
+      .wd-calendar__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include e(range-label-item) {
+      color: $-dark-color;
+
+      @include when(placeholder) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(range-sperator) {
+      color: $-dark-color-gray;
+    }
+  }
+}
+
+@include b(calendar) {
+  @include when(border) {
+    .wd-calendar__cell {
+      @include halfPixelBorder('top', $-cell-padding);
+    }
+  }
+
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    align-items: flex-start;
+    background-color: $-color-white;
+    text-decoration: none;
+    color: $-cell-title-color;
+    font-size: $-cell-title-fs;
+    overflow: hidden;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(cell) {
+    @include when(disabled) {
+      .wd-calendar__value {
+        color: $-input-disabled-color;
+      }
+    }
+
+    @include when(align-right) {
+      .wd-calendar__value {
+        text-align: right;
+      }
+    }
+
+    @include when(error) {
+      .wd-calendar__value {
+        color: $-input-error-color;
+      }
+
+      :deep(.wd-calendar__arrow) {
+        color: $-input-error-color;
+      }
+    }
+
+    @include when(large) {
+      font-size: $-cell-title-fs-large;
+
+      :deep(.wd-calendar__arrow) {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+
+    @include when(center) {
+      align-items: center;
+
+      :deep(.wd-calendar__arrow) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include e(label) {
+    position: relative;
+    width: $-input-cell-label-width;
+    margin-right: $-cell-padding;
+    color: $-cell-title-color;
+    box-sizing: border-box;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: '*';
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+      }
+    }
+  }
+
+  @include e(value-wraper) {
+    display: flex;
+  }
+
+  @include e(value) {
+    flex: 1;
+    margin-right: 10px;
+    color: $-cell-value-color;
+
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+
+    @include m(placeholder) {
+      color: $-input-placeholder-color;
+    }
+  }
+
+  @include e(body) {
+    flex: 1;
+  }
+
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(header) {
+    position: relative;
+    overflow: hidden;
+  }
+
+  @include e(title) {
+    color: $-action-sheet-color;
+    height: $-action-sheet-title-height;
+    line-height: $-action-sheet-title-height;
+    text-align: center;
+    font-size: $-action-sheet-title-fs;
+    font-weight: $-action-sheet-weight;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    top: $-action-sheet-close-top;
+    right: $-action-sheet-close-right;
+    color: $-action-sheet-close-color;
+    font-size: $-action-sheet-close-fs;
+    transform: rotate(-45deg);
+    line-height: 1.1;
+  }
+
+  @include e(tabs) {
+    width: 222px;
+    margin: 10px auto 12px;
+  }
+
+  @include e(shortcuts) {
+    padding: 20px 0;
+    text-align: center;
+  }
+
+  @include edeep(tag) {
+    margin-right: 8px;
+  }
+
+  @include e(view) {
+    @include when(show-confirm) {
+      height: 394px;
+
+      @include when(range) {
+        height: 384px;
+      }
+    }
+  }
+
+  @include e(range-label) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 14px;
+
+    @include when(monthrange) {
+      padding-bottom: 10px;
+      box-shadow: 0px 4px 8px 0 rgba(0, 0, 0, 0.02);
+    }
+  }
+
+  @include e(range-label-item) {
+    flex: 1;
+    color: rgba(0, 0, 0, 0.85);
+
+    @include when(placeholder) {
+      color: rgba(0, 0, 0, 0.25);
+    }
+  }
+
+  @include e(range-sperator) {
+    margin: 0 24px;
+    color: rgba(0, 0, 0, 0.25);
+  }
+
+  @include e(confirm) {
+    padding: 12px 25px 14px;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
new file mode 100644
index 0000000..4ff17ad
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
@@ -0,0 +1,214 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-12-08 19:13:33
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-calendar/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { CalendarFormatter, CalendarTimeFilter, CalendarType } from '../wd-calendar-view/types'
+import type { FormItemRule } from '../wd-form/types'
+
+export const calendarProps = {
+  ...baseProps,
+  /**
+   * 选中值，为 13 位时间戳或时间戳数组
+   */
+  modelValue: makeRequiredProp([Number, Array, null] as PropType<number | number[] | null>),
+  /**
+   * 日期类型，可选值：date / dates / datetime / week / month / daterange / datetimerange / weekrange / monthrange
+   */
+  type: makeStringProp<CalendarType>('date'),
+  /**
+   * 最小日期，为 13 位时间戳
+   */
+  minDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() - 6, new Date().getDate()).getTime()),
+  /**
+   * 最大日期，为 13 位时间戳
+   */
+  maxDate: makeNumberProp(new Date(new Date().getFullYear(), new Date().getMonth() + 6, new Date().getDate(), 23, 59, 59).getTime()),
+  /**
+   * 周起始天
+   */
+  firstDayOfWeek: makeNumberProp(0),
+  /**
+   * 日期格式化函数
+   */
+  formatter: Function as PropType<CalendarFormatter>,
+  /**
+   * type 为范围选择时有效，最大日期范围
+   */
+  maxRange: Number,
+  /**
+   * type 为范围选择时有效，选择超出最大日期范围时的错误提示文案
+   */
+  rangePrompt: String,
+  /**
+   * type 为范围选择时有效，是否允许选择同一天
+   */
+  allowSameDay: makeBooleanProp(false),
+  /**
+   * 选中日期所使用的当日内具体时刻
+   */
+  defaultTime: {
+    type: [String, Array] as PropType<string | string[]>
+  },
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，用于过滤时间选择器的数据
+   */
+  timeFilter: Function as PropType<CalendarTimeFilter>,
+  /**
+   * type 为 'datetime' 或 'datetimerange' 时有效，是否不展示秒修改
+   */
+  hideSecond: makeBooleanProp(false),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: String,
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 选择器的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 是否为错误状态，错误状态时右侧内容为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 设置选择器大小，可选值：large
+   */
+  size: String,
+  /**
+   * 是否垂直居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹框层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 是否显示确定按钮
+   */
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 确定按钮文字
+   */
+  confirmText: String,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<CalendarDisplayFormat>,
+  /**
+   * 自定义范围选择类型的面板内部回显，返回一个字符串
+   */
+  innerDisplayFormat: Function as PropType<CalendarInnerDisplayFormat>,
+  /**
+   * 是否超出隐藏
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 是否显示类型切换功能
+   */
+  showTypeSwitch: makeBooleanProp(false),
+  /**
+   * 快捷选项，为对象数组，其中对象的 text 必传
+   */
+  shortcuts: makeArrayProp<Record<string, any>>(),
+  /**
+   * 快捷操作点击回调
+   */
+  onShortcutsClick: Function as PropType<CalendarOnShortcutsClick>,
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 确定前校验函数，接收 { value, resolve } 参数，通过 resolve 继续执行，resolve 接收 1 个 boolean 参数
+   */
+  beforeConfirm: Function as PropType<CalendarBeforeConfirm>,
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  customViewClass: makeStringProp(''),
+  /**
+   * label 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 是否使用内置单元格
+   * 默认为 true，使用内置单元格
+   */
+  withCell: makeBooleanProp(true)
+}
+
+export type CalendarDisplayFormat = (value: number | number[], type: CalendarType) => string
+
+export type CalendarInnerDisplayFormat = (value: number, rangeType: 'start' | 'end', type: CalendarType) => string
+
+export type CalendarBeforeConfirmOption = {
+  value: number | number[] | null
+  resolve: (isPass: boolean) => void
+}
+
+export type CalendarBeforeConfirm = (option: CalendarBeforeConfirmOption) => void
+
+export type CalendarOnShortcutsClickOption = {
+  item: Record<string, any>
+  index: number
+}
+
+export type CalendarOnShortcutsClick = (option: CalendarOnShortcutsClickOption) => number | number[]
+
+export type CalendarExpose = {
+  /** 关闭时间选择器弹窗 */
+  close: () => void
+  /** 打开时间选择器弹窗 */
+  open: () => void
+}
+
+export type CalendarProps = ExtractPropTypes<typeof calendarProps>
+
+export type CalendarInstance = ComponentPublicInstance<CalendarExpose, CalendarProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
new file mode 100644
index 0000000..25cc0b0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
@@ -0,0 +1,443 @@
+<template>
+  <view :class="`wd-calendar ${cell.border.value ? 'is-border' : ''} ${customClass}`">
+    <view class="wd-calendar__field" @click="open" v-if="withCell">
+      <slot v-if="$slots.default"></slot>
+      <view
+        v-else
+        :class="`wd-calendar__cell ${disabled ? 'is-disabled' : ''} ${props.readonly ? 'is-readonly' : ''} ${alignRight ? 'is-align-right' : ''} ${
+          error ? 'is-error' : ''
+        } ${size ? 'is-' + size : ''} ${center ? 'is-center' : ''}`"
+      >
+        <view
+          v-if="label || $slots.label"
+          :class="`wd-calendar__label ${isRequired ? 'is-required' : ''} ${customLabelClass}`"
+          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
+        >
+          <slot name="label">{{ label }}</slot>
+        </view>
+        <view class="wd-calendar__body">
+          <view class="wd-calendar__value-wraper">
+            <view
+              :class="`wd-calendar__value ${ellipsis ? 'is-ellipsis' : ''} ${customValueClass} ${showValue ? '' : 'wd-calendar__value--placeholder'}`"
+            >
+              {{ showValue || placeholder || translate('placeholder') }}
+            </view>
+            <wd-icon v-if="!disabled && !readonly" custom-class="wd-calendar__arrow" name="arrow-right" />
+          </view>
+          <view v-if="errorMessage" class="wd-calendar__error-message">{{ errorMessage }}</view>
+        </view>
+      </view>
+    </view>
+    <wd-action-sheet
+      v-model="pickerShow"
+      :duration="250"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :z-index="zIndex"
+      @close="close"
+    >
+      <view class="wd-calendar__header">
+        <view v-if="!showTypeSwitch && shortcuts.length === 0" class="wd-calendar__title">{{ title || translate('title') }}</view>
+        <view v-if="showTypeSwitch" class="wd-calendar__tabs">
+          <wd-tabs ref="calendarTabs" v-model="currentTab" @change="handleTypeChange">
+            <wd-tab :title="translate('day')" :name="translate('day')" />
+            <wd-tab :title="translate('week')" :name="translate('week')" />
+            <wd-tab :title="translate('month')" :name="translate('month')" />
+          </wd-tabs>
+        </view>
+        <view v-if="shortcuts.length > 0" class="wd-calendar__shortcuts">
+          <wd-tag
+            v-for="(item, index) in shortcuts"
+            :key="index"
+            custom-class="wd-calendar__tag"
+            type="primary"
+            plain
+            round
+            @click="handleShortcutClick(index)"
+          >
+            {{ item.text }}
+          </wd-tag>
+        </view>
+        <wd-icon custom-class="wd-calendar__close" name="add" @click="close" />
+      </view>
+      <view
+        v-if="inited"
+        :class="`wd-calendar__view  ${currentType.indexOf('range') > -1 ? 'is-range' : ''} ${showConfirm ? 'is-show-confirm' : ''}`"
+      >
+        <view v-if="range(type)" :class="`wd-calendar__range-label ${type === 'monthrange' ? 'is-monthrange' : ''}`">
+          <view
+            :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[0] ? 'is-placeholder' : ''}`"
+            style="text-align: right"
+          >
+            {{ rangeLabel[0] }}
+          </view>
+          <view class="wd-calendar__range-sperator">/</view>
+          <view :class="`wd-calendar__range-label-item ${!calendarValue || !isArray(calendarValue) || !calendarValue[1] ? 'is-placeholder' : ''}`">
+            {{ rangeLabel[1] }}
+          </view>
+        </view>
+        <wd-calendar-view
+          ref="calendarView"
+          v-model="calendarValue"
+          :type="currentType"
+          :min-date="minDate"
+          :max-date="maxDate"
+          :first-day-of-week="firstDayOfWeek"
+          :formatter="formatter"
+          :panel-height="panelHeight"
+          :max-range="maxRange"
+          :range-prompt="rangePrompt"
+          :allow-same-day="allowSameDay"
+          :default-time="defaultTime"
+          :time-filter="timeFilter"
+          :hide-second="hideSecond"
+          :show-panel-title="!range(type)"
+          :immediate-change="immediateChange"
+          @change="handleChange"
+        />
+      </view>
+      <view v-if="showConfirm" class="wd-calendar__confirm">
+        <wd-button block :disabled="confirmBtnDisabled" @click="handleConfirm">{{ confirmText || translate('confirm') }}</wd-button>
+      </view>
+    </wd-action-sheet>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-calendar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdCalendarView from '../wd-calendar-view/wd-calendar-view.vue'
+import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
+import wdButton from '../wd-button/wd-button.vue'
+import { ref, computed, watch } from 'vue'
+import { dayjs } from '../common/dayjs'
+import { deepClone, isArray, isEqual, padZero, pause } from '../common/util'
+import { getWeekNumber, isRange } from '../wd-calendar-view/utils'
+import { useCell } from '../composables/useCell'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { calendarProps, type CalendarExpose } from './types'
+import type { CalendarType } from '../wd-calendar-view/types'
+const { translate } = useTranslate('calendar')
+
+const defaultDisplayFormat = (value: number | number[], type: CalendarType): string => {
+  switch (type) {
+    case 'date':
+      return dayjs(value as number).format('YYYY-MM-DD')
+    case 'dates':
+      return (value as number[])
+        .map((item) => {
+          return dayjs(item).format('YYYY-MM-DD')
+        })
+        .join(', ')
+    case 'daterange':
+      return `${(value as number[])[0] ? dayjs((value as number[])[0]).format('YYYY-MM-DD') : translate('startTime')} ${translate('to')} ${
+        (value as number[])[1] ? dayjs((value as number[])[1]).format('YYYY-MM-DD') : translate('endTime')
+      }`
+    case 'datetime':
+      return dayjs(value as number).format('YYYY-MM-DD HH:mm:ss')
+    case 'datetimerange':
+      return `${(value as number[])[0] ? dayjs((value as number[])[0]).format(translate('timeFormat')) : translate('startTime')} ${translate(
+        'to'
+      )}\n${(value as number[])[1] ? dayjs((value as number[])[1]).format(translate('timeFormat')) : translate('endTime')}`
+    case 'week': {
+      const date = new Date(value as number)
+      const year = date.getFullYear()
+      const week = getWeekNumber(value as number)
+      const weekStart = new Date(date)
+      weekStart.setDate(date.getDate() - date.getDay() + 1)
+      const weekEnd = new Date(date)
+      weekEnd.setDate(date.getDate() + (7 - date.getDay()))
+      const adjustedYear = weekEnd.getFullYear() > year ? weekEnd.getFullYear() : year
+      return translate('weekFormat', adjustedYear, padZero(week))
+    }
+    case 'weekrange': {
+      const date1 = new Date((value as number[])[0])
+      const date2 = new Date((value as number[])[1])
+      const year1 = date1.getFullYear()
+      const year2 = date2.getFullYear()
+      const week1 = getWeekNumber((value as number[])[0])
+      const week2 = getWeekNumber((value as number[])[1])
+      const weekStart1 = new Date(date1)
+      weekStart1.setDate(date1.getDate() - date1.getDay() + 1)
+      const weekEnd1 = new Date(date1)
+      weekEnd1.setDate(date1.getDate() + (7 - date1.getDay()))
+      const weekStart2 = new Date(date2)
+      weekStart2.setDate(date2.getDate() - date2.getDay() + 1)
+      const weekEnd2 = new Date(date2)
+      weekEnd2.setDate(date2.getDate() + (7 - date2.getDay()))
+      const adjustedYear1 = weekEnd1.getFullYear() > year1 ? weekEnd1.getFullYear() : year1
+      const adjustedYear2 = weekEnd2.getFullYear() > year2 ? weekEnd2.getFullYear() : year2
+      return `${(value as number[])[0] ? translate('weekFormat', adjustedYear1, padZero(week1)) : translate('startWeek')} - ${
+        (value as number[])[1] ? translate('weekFormat', adjustedYear2, padZero(week2)) : translate('endWeek')
+      }`
+    }
+    case 'month':
+      return dayjs(value as number).format('YYYY / MM')
+    case 'monthrange':
+      return `${(value as number[])[0] ? dayjs((value as number[])[0]).format('YYYY / MM') : translate('startMonth')} ${translate('to')} ${
+        (value as number[])[1] ? dayjs((value as number[])[1]).format('YYYY / MM') : translate('endMonth')
+      }`
+  }
+}
+
+const formatRange = (value: number, rangeType: 'start' | 'end', type: CalendarType) => {
+  switch (type) {
+    case 'daterange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endTime') : translate('startTime')
+      }
+      return dayjs(value).format(translate('dateFormat'))
+    case 'datetimerange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endTime') : translate('startTime')
+      }
+      return dayjs(value).format(translate('timeFormat'))
+    case 'weekrange': {
+      if (!value) {
+        return rangeType === 'end' ? translate('endWeek') : translate('startWeek')
+      }
+      const date = new Date(value)
+      const year = date.getFullYear()
+      const week = getWeekNumber(value)
+      return translate('weekFormat', year, padZero(week))
+    }
+    case 'monthrange':
+      if (!value) {
+        return rangeType === 'end' ? translate('endMonth') : translate('startMonth')
+      }
+      return dayjs(value).format(translate('monthFormat'))
+  }
+}
+
+const props = defineProps(calendarProps)
+const emit = defineEmits(['cancel', 'change', 'update:modelValue', 'confirm', 'open'])
+
+const pickerShow = ref<boolean>(false)
+const calendarValue = ref<null | number | number[]>(null)
+const lastCalendarValue = ref<null | number | number[]>(null)
+const panelHeight = ref<number>(338)
+const confirmBtnDisabled = ref<boolean>(true)
+const currentTab = ref<number>(0)
+const lastTab = ref<number>(0)
+const currentType = ref<CalendarType>('date')
+const lastCurrentType = ref<CalendarType>()
+const inited = ref<boolean>(false)
+const cell = useCell()
+const calendarView = ref()
+const calendarTabs = ref()
+
+const rangeLabel = computed(() => {
+  const [start, end] = deepClone(isArray(calendarValue.value) ? calendarValue.value : [])
+  return [start, end].map((item, index) => {
+    return (props.innerDisplayFormat || formatRange)(item, index === 0 ? 'start' : 'end', currentType.value)
+  })
+})
+
+const showValue = computed(() => {
+  if ((!isArray(props.modelValue) && props.modelValue) || (isArray(props.modelValue) && props.modelValue.length)) {
+    return (props.displayFormat || defaultDisplayFormat)(props.modelValue, lastCurrentType.value || currentType.value)
+  } else {
+    return ''
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (val, oldVal) => {
+    if (isEqual(val, oldVal)) return
+    calendarValue.value = deepClone(val)
+    confirmBtnDisabled.value = getConfirmBtnStatus(val)
+  },
+  {
+    immediate: true
+  }
+)
+
+watch(
+  () => props.type,
+  (newValue, oldValue) => {
+    if (props.showTypeSwitch) {
+      const tabs = ['date', 'week', 'month']
+      const rangeTabs = ['daterange', 'weekrange', 'monthrange']
+
+      const index = newValue.indexOf('range') > -1 ? rangeTabs.indexOf(newValue) || 0 : tabs.indexOf(newValue)
+      currentTab.value = index
+    }
+    panelHeight.value = props.showConfirm ? 338 : 400
+    currentType.value = deepClone(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.showConfirm,
+  (val) => {
+    panelHeight.value = val ? 338 : 400
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+// 表单校验错误信息
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+const range = computed(() => {
+  return (type: CalendarType) => {
+    return isRange(type)
+  }
+})
+
+function scrollIntoView() {
+  calendarView.value && calendarView.value && calendarView.value.$.exposed.scrollIntoView()
+}
+// 对外暴露方法
+async function open() {
+  const { disabled, readonly } = props
+
+  if (disabled || readonly) return
+
+  inited.value = true
+  pickerShow.value = true
+  lastCalendarValue.value = deepClone(calendarValue.value)
+  lastTab.value = currentTab.value
+  lastCurrentType.value = currentType.value
+  // 等待渲染完毕
+  await pause()
+  scrollIntoView()
+  setTimeout(() => {
+    if (props.showTypeSwitch) {
+      calendarTabs.value.scrollIntoView()
+      calendarTabs.value.updateLineStyle(false)
+    }
+  }, 250)
+  emit('open')
+}
+// 对外暴露方法
+function close() {
+  pickerShow.value = false
+  setTimeout(() => {
+    calendarValue.value = deepClone(lastCalendarValue.value)
+    currentTab.value = lastTab.value
+    currentType.value = lastCurrentType.value || 'date'
+    confirmBtnDisabled.value = getConfirmBtnStatus(lastCalendarValue.value)
+  }, 250)
+  emit('cancel')
+}
+function handleTypeChange({ index }: { index: number }) {
+  const tabs = ['date', 'week', 'month']
+  const rangeTabs = ['daterange', 'weekrange', 'monthrange']
+  const type = props.type.indexOf('range') > -1 ? rangeTabs[index] : tabs[index]
+  currentTab.value = index
+  currentType.value = type as CalendarType
+}
+function getConfirmBtnStatus(value: number | number[] | null) {
+  let confirmBtnDisabled = false
+  // 范围选择未选择满，或者多日期选择未选择日期，按钮置灰不可点击
+  if (
+    (props.type.indexOf('range') > -1 && (!isArray(value) || !value[0] || !value[1] || !value)) ||
+    (props.type === 'dates' && (!isArray(value) || value.length === 0 || !value)) ||
+    !value
+  ) {
+    confirmBtnDisabled = true
+  }
+
+  return confirmBtnDisabled
+}
+function handleChange({ value }: { value: number | number[] | null }) {
+  calendarValue.value = deepClone(value)
+  confirmBtnDisabled.value = getConfirmBtnStatus(value)
+
+  emit('change', {
+    value
+  })
+
+  if (!props.showConfirm && !confirmBtnDisabled.value) {
+    handleConfirm()
+  }
+}
+function handleConfirm() {
+  if (props.beforeConfirm) {
+    props.beforeConfirm({
+      value: calendarValue.value,
+      resolve: (isPass: boolean) => {
+        isPass && onConfirm()
+      }
+    })
+  } else {
+    onConfirm()
+  }
+}
+function onConfirm() {
+  pickerShow.value = false
+  lastCurrentType.value = currentType.value
+  emit('update:modelValue', calendarValue.value)
+  emit('confirm', {
+    value: calendarValue.value,
+    type: currentType.value
+  })
+}
+
+function handleShortcutClick(index: number) {
+  if (props.onShortcutsClick && typeof props.onShortcutsClick === 'function') {
+    calendarValue.value = deepClone(
+      props.onShortcutsClick({
+        item: props.shortcuts[index],
+        index
+      })
+    )
+    confirmBtnDisabled.value = getConfirmBtnStatus(calendarValue.value)
+  }
+
+  if (!props.showConfirm) {
+    handleConfirm()
+  }
+}
+
+defineExpose<CalendarExpose>({
+  close,
+  open
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-card/index.scss b/src/uni_modules/wot-design-uni/components/wd-card/index.scss
new file mode 100644
index 0000000..ee6562c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-card/index.scss
@@ -0,0 +1,71 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+.wot-theme-dark {
+  @include b(card) {
+    background-color: $-dark-background2;
+
+    @include when(rectangle) {
+  
+      .wd-card__content {
+        @include halfPixelBorder('top', 0, $-dark-border-color);
+      }
+      .wd-card__footer {
+        @include halfPixelBorder('top', 0, $-dark-border-color);
+      }
+    }
+
+    @include e(title-content) {
+      color: $-dark-color;
+    }
+    @include e(content) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(card) {
+  padding: $-card-padding;
+  background-color: $-card-bg;
+  line-height: $-card-line-height;
+  margin: $-card-margin;
+  border-radius: $-card-radius;
+  box-shadow: $-card-shadow-color;
+  font-size: $-card-fs;
+  margin-bottom: 12px;
+
+  @include when(rectangle) {
+    margin-left: 0;
+    margin-right: 0;
+    border-radius: 0;
+    box-shadow: none;
+
+    .wd-card__title-content {
+      font-size: $-card-fs;
+    }
+    .wd-card__content {
+      position: relative;
+      padding: $-card-rectangle-content-padding;
+
+      @include halfPixelBorder('top', 0, $-card-content-border-color);
+    }
+    .wd-card__footer {
+      position: relative;
+      padding: $-card-rectangle-footer-padding;
+
+      @include halfPixelBorder('top', 0, $-card-content-border-color);
+    }
+  }
+  @include e(title-content) {
+    padding: 16px 0;
+    color: $-card-title-color;
+    font-size: $-card-title-fs;
+  }
+  @include e(content) {
+    color: $-card-content-color;
+    line-height: $-card-content-line-height;
+  }
+  @include e(footer) {
+    padding: $-card-footer-padding;
+    text-align: right;
+  }
+} 
diff --git a/src/uni_modules/wot-design-uni/components/wd-card/types.ts b/src/uni_modules/wot-design-uni/components/wd-card/types.ts
new file mode 100644
index 0000000..8ee91f2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-card/types.ts
@@ -0,0 +1,30 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+
+export type CardType = 'rectangle'
+
+export const cardProps = {
+  ...baseProps,
+  /**
+   * 卡片类型
+   */
+  type: String as PropType<CardType>,
+  /**
+   * 卡片标题
+   */
+  title: String,
+  /**
+   * 标题自定义样式
+   */
+  customTitleClass: makeStringProp(''),
+  /**
+   * 内容自定义样式
+   */
+  customContentClass: makeStringProp(''),
+  /**
+   * 底部自定义样式
+   */
+  customFooterClass: makeStringProp('')
+}
+
+export type CardProps = ExtractPropTypes<typeof cardProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue b/src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue
new file mode 100644
index 0000000..01ba71e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-card/wd-card.vue
@@ -0,0 +1,37 @@
+<template>
+  <view :class="['wd-card', type == 'rectangle' ? 'is-rectangle' : '', customClass]" :style="customStyle">
+    <view :class="['wd-card__title-content', customTitleClass]" v-if="title || $slots.title">
+      <view class="wd-card__title">
+        <text v-if="title">{{ title }}</text>
+        <slot v-else name="title"></slot>
+      </view>
+    </view>
+    <view :class="`wd-card__content ${customContentClass}`">
+      <slot></slot>
+    </view>
+    <view :class="`wd-card__footer ${customFooterClass}`" v-if="$slots.footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-card',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { cardProps } from './types'
+
+defineProps(cardProps)
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-cell-group/index.scss b/src/uni_modules/wot-design-uni/components/wd-cell-group/index.scss
new file mode 100644
index 0000000..983f8ff
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-cell-group/index.scss
@@ -0,0 +1,56 @@
+@import '../common/abstracts/variable.scss';
+@import '../common/abstracts/_mixin.scss';
+
+.wot-theme-dark {
+  @include b(cell-group) {
+    background-color: $-dark-background2;
+
+    @include when(border) {
+      .wd-cell-group__title {
+        @include halfPixelBorder('bottom', 0, $-dark-border-color);
+      }
+    }
+
+    @include e(title) {
+      background: $-dark-background2;
+      color: $-dark-color;
+    }
+
+    @include e(right) {
+      color: $-dark-color3;
+    }
+
+    @include e(body) {
+      background: $-dark-background2;
+    }
+
+  }
+}
+
+@include b(cell-group) {
+  background-color: $-color-white;
+
+  @include when(border) {
+    .wd-cell-group__title {
+      @include halfPixelBorder;
+    }
+  }
+  @include e(title) {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    padding: $-cell-group-padding;
+    background: $-color-white;
+    font-size: $-cell-group-title-fs;
+    color: $-cell-group-title-color;
+    font-weight: $-fw-medium;
+    line-height: 1.43;
+  }
+  @include e(right) {
+    color: $-cell-group-value-color;
+    font-size: $-cell-group-value-fs;
+  }
+  @include e(body) {
+    background: $-color-white;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-cell-group/types.ts b/src/uni_modules/wot-design-uni/components/wd-cell-group/types.ts
new file mode 100644
index 0000000..f24a773
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-cell-group/types.ts
@@ -0,0 +1,41 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-12-14 11:21:58
+ * @LastEditTime: 2024-03-18 13:57:14
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-cell-group\types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp } from '../common/props'
+
+export type CelllGroupProvide = {
+  props: {
+    border?: boolean
+  }
+}
+
+export const CELL_GROUP_KEY: InjectionKey<CelllGroupProvide> = Symbol('wd-cell-group')
+
+export const cellGroupProps = {
+  ...baseProps,
+  /**
+   * 分组标题
+   */
+  title: String,
+  /**
+   * 分组右侧内容
+   */
+  value: String,
+  /**
+   * 分组启用插槽
+   */
+  useSlot: makeBooleanProp(false),
+  /**
+   * 是否展示边框线
+   */
+  border: makeBooleanProp(false)
+}
+
+export type CellGroupProps = ExtractPropTypes<typeof cellGroupProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue b/src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue
new file mode 100644
index 0000000..d16a8fa
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-cell-group/wd-cell-group.vue
@@ -0,0 +1,45 @@
+<template>
+  <view :class="['wd-cell-group', border ? 'is-border' : '', customClass]" :style="customStyle">
+    <view v-if="title || value || useSlot" class="wd-cell-group__title">
+      <!--左侧标题-->
+      <view class="wd-cell-group__left">
+        <text v-if="!$slots.title">{{ title }}</text>
+        <slot v-else name="title"></slot>
+      </view>
+      <!--右侧标题-->
+      <view class="wd-cell-group__right">
+        <text v-if="!$slots.value">{{ value }}</text>
+        <slot v-else name="value"></slot>
+      </view>
+    </view>
+    <view class="wd-cell-group__body">
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-cell-group',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { useChildren } from '../composables/useChildren'
+import { CELL_GROUP_KEY, cellGroupProps } from './types'
+
+const props = defineProps(cellGroupProps)
+
+const { linkChildren } = useChildren(CELL_GROUP_KEY)
+
+linkChildren({ props })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-cell/index.scss b/src/uni_modules/wot-design-uni/components/wd-cell/index.scss
new file mode 100644
index 0000000..f8e7987
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-cell/index.scss
@@ -0,0 +1,188 @@
+@import '../common/abstracts/variable.scss';
+@import '../common/abstracts/_mixin.scss';
+
+.wot-theme-dark {
+  @include b(cell) {
+    background-color: $-dark-background2;
+    color: $-dark-color;
+
+    @include e(value) {
+      color: $-dark-color3;
+    }
+
+    @include e(label) {
+      color: $-dark-color3;
+    }
+
+    @include when(hover) {
+      background-color: $-dark-background4;
+    }
+
+    @include when(border) {
+      .wd-cell__wrapper {
+        @include halfPixelBorder('top', 0, $-dark-border-color);
+      }
+    }
+
+    :deep(.wd-cell__arrow-right) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(cell) {
+  position: relative;
+  padding-left: $-cell-padding;
+  background-color: $-color-white;
+  text-decoration: none;
+  color: $-cell-title-color;
+  line-height: $-cell-line-height;
+  -webkit-tap-highlight-color: transparent;
+
+  @include when(border) {
+    .wd-cell__wrapper {
+      @include halfPixelBorder('top');
+    }
+  }
+
+  @include e(wrapper) {
+    position: relative;
+    display: flex;
+    padding: $-cell-wrapper-padding $-cell-padding $-cell-wrapper-padding 0;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    @include when(vertical) {
+      display: block;
+
+      .wd-cell__right {
+        margin-top: $-cell-vertical-top;
+      }
+
+      .wd-cell__value {
+        text-align: left;
+      }
+
+      .wd-cell__left {
+        margin-right: 0;
+      }
+    }
+
+    @include when(label) {
+      padding: $-cell-wrapper-padding-with-label $-cell-padding $-cell-wrapper-padding-with-label 0;
+    }
+  }
+
+  @include e(left) {
+    position: relative;
+    flex: 1;
+    display: flex;
+    text-align: left;
+    font-size: $-cell-title-fs;
+    box-sizing: border-box;
+    margin-right: $-cell-padding;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        content: '*';
+        top: 0;
+        left: 0;
+        font-size: $-cell-required-size;
+        color: $-cell-required-color;
+      }
+    }
+  }
+
+  @include e(right) {
+    position: relative;
+    flex: 1;
+  }
+
+  @include e(title) {
+    flex: 1;
+    width: 100%;
+    font-size: $-cell-title-fs;
+  }
+
+  @include e(label) {
+    margin-top: 2px;
+    font-size: $-cell-label-fs;
+    color: $-cell-label-color;
+  }
+
+  @include edeep(icon) {
+    display: block;
+    position: relative;
+    margin-right: $-cell-icon-right;
+    font-size: $-cell-icon-size;
+    height: $-cell-line-height;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(body){
+    display: flex;
+  }
+
+  @include e(value) {
+    position: relative;
+    flex: 1;
+    font-size: $-cell-value-fs;
+    color: $-cell-value-color;
+    text-align: right;
+    vertical-align: middle;
+  }
+
+  @include edeep(arrow-right) {
+    display: block;
+    margin-left: 8px;
+    width: $-cell-arrow-size;
+    font-size: $-cell-arrow-size;
+    color: $-cell-arrow-color;
+    height: $-cell-line-height;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include when(link) {
+    -webkit-tap-highlight-color: $-cell-tap-bg;
+  }
+
+  @include when(hover) {
+    background-color: $-cell-tap-bg;
+  }
+
+  @include when(large) {
+    .wd-cell__title {
+      font-size: $-cell-title-fs-large;
+    }
+
+    .wd-cell__wrapper {
+      padding-top: $-cell-wrapper-padding-large;
+      padding-bottom: $-cell-wrapper-padding-large;
+    }
+
+    .wd-cell__label {
+      font-size: $-cell-label-fs-large;
+    }
+
+    :deep(.wd-cell__icon) {
+      font-size: $-cell-icon-size-large;
+    }
+  }
+
+  @include when(center) {
+    .wd-cell__wrapper {
+      align-items: center;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-cell/types.ts b/src/uni_modules/wot-design-uni/components/wd-cell/types.ts
new file mode 100644
index 0000000..7b9e6e0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-cell/types.ts
@@ -0,0 +1,90 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp, makeNumericProp } from '../common/props'
+
+import { type FormItemRule } from '../wd-form/types'
+
+export const cellProps = {
+  ...baseProps,
+  /**
+   * 标题
+   */
+  title: String,
+  /**
+   * 右侧内容
+   */
+  value: makeNumericProp(''),
+  /**
+   * 图标类名
+   */
+  icon: String,
+  /**
+   * 描述信息
+   */
+  label: String,
+  /**
+   * 是否为跳转链接
+   */
+  isLink: makeBooleanProp(false),
+  /**
+   * 跳转地址
+   */
+  to: String,
+  /**
+   * 跳转时是否替换栈顶页面
+   */
+  replace: makeBooleanProp(false),
+  /**
+   * 开启点击反馈，is-link 默认开启
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 设置单元格大小，可选值：large
+   */
+  size: String,
+  /**
+   * 是否展示边框线
+   */
+  border: makeBooleanProp(void 0),
+  /**
+   * 设置左侧标题宽度
+   */
+  titleWidth: String,
+  /**
+   * 是否垂直居中，默认顶部居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 表单属性，上下结构
+   */
+  vertical: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * icon 使用 slot 时的自定义样式
+   */
+  customIconClass: makeStringProp(''),
+  /**
+   * label 使用 slot 时的自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 使用 slot 时的自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * title 使用 slot 时的自定义样式
+   */
+  customTitleClass: makeStringProp('')
+}
+
+export type CellProps = ExtractPropTypes<typeof cellProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue b/src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue
new file mode 100644
index 0000000..5b59ce3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-cell/wd-cell.vue
@@ -0,0 +1,122 @@
+<template>
+  <view
+    :class="['wd-cell', isBorder ? 'is-border' : '', size ? 'is-' + size : '', center ? 'is-center' : '', customClass]"
+    :style="customStyle"
+    :hover-class="isLink || clickable ? 'is-hover' : 'none'"
+    :hover-stay-time="70"
+    @click="onClick"
+  >
+    <view :class="['wd-cell__wrapper', vertical ? 'is-vertical' : '']">
+      <view
+        :class="['wd-cell__left', isRequired ? 'is-required' : '']"
+        :style="titleWidth ? 'min-width:' + titleWidth + ';max-width:' + titleWidth + ';' : ''"
+      >
+        <!--左侧icon部位-->
+        <wd-icon v-if="icon" :name="icon" :custom-class="`wd-cell__icon  ${customIconClass}`"></wd-icon>
+        <slot v-else name="icon" />
+
+        <view class="wd-cell__title">
+          <!--title BEGIN-->
+          <view v-if="title" :class="customTitleClass">{{ title }}</view>
+          <slot v-else name="title"></slot>
+          <!--title END-->
+
+          <!--label BEGIN-->
+          <view v-if="label" :class="`wd-cell__label ${customLabelClass}`">{{ label }}</view>
+          <slot v-else name="label" />
+          <!--label END-->
+        </view>
+      </view>
+      <!--right content BEGIN-->
+      <view class="wd-cell__right">
+        <view class="wd-cell__body">
+          <!--文案内容-->
+          <view :class="`wd-cell__value ${customValueClass}`">
+            <slot>{{ value }}</slot>
+          </view>
+          <!--箭头-->
+          <wd-icon v-if="isLink" custom-class="wd-cell__arrow-right" name="arrow-right" />
+          <slot v-else name="right-icon" />
+        </view>
+        <view v-if="errorMessage" class="wd-cell__error-message">{{ errorMessage }}</view>
+      </view>
+      <!--right content END-->
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-cell',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed } from 'vue'
+import { useCell } from '../composables/useCell'
+import { useParent } from '../composables/useParent'
+import { FORM_KEY } from '../wd-form/types'
+import { cellProps } from './types'
+import { isDef } from '../common/util'
+
+const props = defineProps(cellProps)
+const emit = defineEmits(['click'])
+
+const cell = useCell()
+
+const isBorder = computed(() => {
+  return Boolean(isDef(props.border) ? props.border : cell.border.value)
+})
+
+const { parent: form } = useParent(FORM_KEY)
+
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+        formRequired = rules[key].some((rule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+/**
+ * @description 点击cell的handle
+ */
+function onClick() {
+  const url = props.to
+
+  if (props.clickable || props.isLink) {
+    emit('click')
+  }
+  if (url && props.isLink) {
+    if (props.replace) {
+      uni.redirectTo({ url })
+    } else {
+      uni.navigateTo({ url })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-checkbox-group/index.scss b/src/uni_modules/wot-design-uni/components/wd-checkbox-group/index.scss
new file mode 100644
index 0000000..09d22aa
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-checkbox-group/index.scss
@@ -0,0 +1,20 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(checkbox-group) {
+    background-color: $-dark-background2;
+  }
+}
+@include b(checkbox-group) {
+  background-color: $-checkbox-bg;
+
+  // 上下20px 左右15px 内部间隔12px
+  @include when(button) {
+    width: 100%;
+    padding: 8px 3px 20px 15px;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: auto;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-checkbox-group/types.ts b/src/uni_modules/wot-design-uni/components/wd-checkbox-group/types.ts
new file mode 100644
index 0000000..e1785df
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-checkbox-group/types.ts
@@ -0,0 +1,59 @@
+import { type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import type { CheckShape } from '../wd-checkbox/types'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type RequiredModelValue = {
+  modelValue: Array<string | number | boolean>
+}
+
+export type checkboxGroupProvide = {
+  props: Partial<Omit<CheckboxGroupProps, 'modelValue'>> & RequiredModelValue
+  changeSelectState: (value: string | number | boolean) => void
+}
+
+export const CHECKBOX_GROUP_KEY: InjectionKey<checkboxGroupProvide> = Symbol('wd-checkbox-group')
+
+export const checkboxGroupProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: Array as PropType<Array<string | number | boolean>>,
+    default: () => []
+  },
+  /**
+   * 表单模式
+   */
+  cell: makeBooleanProp(false),
+  /**
+   * 单选框形状，可选值：circle / square / button
+   */
+  shape: makeStringProp<CheckShape>('circle'),
+  /**
+   * 选中的颜色
+   */
+  checkedColor: String,
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 最小选中的数量
+   */
+  min: makeNumberProp(0),
+  /**
+   * 最大选中的数量，0 为无限数量，默认为 0
+   */
+  max: makeNumberProp(0),
+  /**
+   * 同行展示
+   */
+  inline: makeBooleanProp(false),
+  /**
+   * 设置大小，可选值：large
+   */
+  size: String
+}
+
+export type CheckboxGroupProps = ExtractPropTypes<typeof checkboxGroupProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue b/src/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue
new file mode 100644
index 0000000..c6fef2c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-checkbox-group/wd-checkbox-group.vue
@@ -0,0 +1,100 @@
+<template>
+  <view :class="`wd-checkbox-group ${shape === 'button' && cell ? 'is-button' : ''} ${customClass}`" :style="customStyle">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-checkbox-group',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { checkNumRange, deepClone } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { CHECKBOX_GROUP_KEY, checkboxGroupProps } from './types'
+
+const props = defineProps(checkboxGroupProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren } = useChildren(CHECKBOX_GROUP_KEY)
+
+linkChildren({ props, changeSelectState })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    // 传入的value数组中包括重复的元素，这种情况非法。
+    if (new Set(newValue).size !== newValue.length) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value includes same value")
+    }
+    if (newValue.length < props.min) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value's length can't be less than min")
+    }
+    if (props.max !== 0 && newValue.length > props.max) {
+      // eslint-disable-next-line quotes
+      console.error("checkboxGroup's bound value's length can't be large than max")
+    }
+    // 每次value变化都会触发重新匹配选中项
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    const type = ['circle', 'square', 'button']
+    if (type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.min,
+  (newValue) => {
+    checkNumRange(newValue, 'min')
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.max,
+  (newValue) => {
+    checkNumRange(newValue, 'max')
+  },
+  { deep: true, immediate: true }
+)
+
+/**
+ * @description 子节点通知父节点修改子节点选中状态
+ * @param {any} value 子组件的标识符
+ */
+function changeSelectState(value: string | number | boolean) {
+  const temp: (string | number | boolean)[] = deepClone(props.modelValue)
+  const index = temp.indexOf(value)
+  if (index > -1) {
+    // 已经选中，则从 value 列表中删除子节点的标识符。
+    temp.splice(index, 1)
+  } else {
+    // 之前未选中，则现在把加子节点的标识符加到 value 列表中。
+    temp.push(value)
+  }
+  emit('update:modelValue', temp)
+
+  emit('change', {
+    value: temp
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss b/src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss
new file mode 100644
index 0000000..e188d32
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-checkbox/index.scss
@@ -0,0 +1,285 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(checkbox) {
+    @include e(shape) {
+      background: transparent;
+      border-color: $-checkbox-border-color;
+      color: $-checkbox-check-color;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+
+    @include when(disabled) {
+      .wd-checkbox__shape {
+        border-color: $-dark-color-gray;
+        background: $-dark-background4;
+      }
+
+      .wd-checkbox__label {
+        color: $-dark-color-gray;
+      }
+
+      :deep(.wd-checkbox__check) {
+        color: $-dark-color-gray;
+      }
+
+      @include when(checked) {
+        .wd-checkbox__shape {
+          color: $-dark-color-gray;
+        }
+
+        .wd-checkbox__label {
+          color: $-dark-color-gray;
+        }
+      }
+
+      @include when(button) {
+
+        .wd-checkbox__label {
+          border-color: #c8c9cc;
+          background: #3a3a3c;
+          color: $-dark-color-gray;
+        }
+
+        @include when(checked) {
+          .wd-checkbox__label {
+            border-color: #c8c9cc;
+            background: #3a3a3c;
+            color: #c8c9cc;
+          }
+        }
+      }
+    }
+
+    @include when(button) {
+      .wd-checkbox__label {
+        background-color: $-dark-background;
+      }
+
+      @include when(checked) {
+        .wd-checkbox__label {
+          background-color: $-dark-background2;
+        }
+      }
+    }
+
+  }
+}
+
+@include b(checkbox) {
+  display: block;
+  margin-bottom: $-checkbox-margin;
+  font-size: 0;
+  -webkit-tap-highlight-color: transparent;
+  line-height: 1.2;
+
+  @include when(last-child) {
+    margin-bottom: 0;
+  }
+
+  @include e(shape) {
+    position: relative;
+    display: inline-block;
+    width: $-checkbox-size;
+    height: $-checkbox-size;
+    border: 2px solid $-checkbox-border-color;
+    border-radius: 50%;
+    color: $-checkbox-check-color;
+    background: $-checkbox-bg;
+    vertical-align: middle;
+    transition: background 0.2s;
+    box-sizing: border-box;
+
+    @include when(square) {
+      border-radius: $-checkbox-square-radius;
+    }
+  }
+
+  @include e(input) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+  }
+
+  @include edeep(btn-check) {
+    display: inline-block;
+    font-size: $-checkbox-icon-size;
+    margin-right: 4px;
+    vertical-align: middle;
+  }
+
+  @include e(txt) {
+    display: inline-block;
+    vertical-align: middle;
+    line-height: 20px;
+    @include lineEllipsis;
+  }
+
+  @include e(label) {
+    position: relative;
+    display: inline-block;
+    margin-left: $-checkbox-label-margin;
+    vertical-align: middle;
+    font-size: $-checkbox-label-fs;
+    color: $-checkbox-label-color;
+  }
+
+  @include edeep(check) {
+    color: $-checkbox-check-color;
+    font-size: $-checkbox-icon-size;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+
+  @include when(checked) {
+    .wd-checkbox__shape {
+      color: $-checkbox-checked-color;
+      background: currentColor;
+      border-color: currentColor;
+    }
+
+    :deep(.wd-checkbox__check) {
+      opacity: 1;
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  @include when(button) {
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: $-checkbox-margin;
+    vertical-align: top;
+    font-size: $-checkbox-button-font-size;
+
+    @include when(last-child) {
+      margin-right: 0;
+    }
+
+    .wd-checkbox__shape {
+      width: 0;
+      height: 0;
+      overflow: hidden;
+      opacity: 0;
+      border: none;
+    }
+
+    .wd-checkbox__label {
+      display: inline-flex;
+      flex-direction: row;
+      justify-content: center;
+      align-items: center;
+      min-width: $-checkbox-button-min-width;
+      height: $-checkbox-button-height;
+      font-size: $-checkbox-button-font-size;
+      margin-left: 0;
+      padding: 5px 15px;
+      border: 1px solid $-checkbox-button-border;
+      background-color: $-checkbox-button-bg;
+      border-radius: $-checkbox-button-radius;
+      transition: color 0.2s, border 0.2s;
+      box-sizing: border-box;
+    }
+
+    @include when(checked) {
+      .wd-checkbox__label {
+        color: $-checkbox-checked-color;
+        background-color: $-checkbox-bg;
+        border-color: $-checkbox-checked-color;
+        border-color: currentColor;
+      }
+    }
+  }
+
+  @include when(inline) {
+    display: inline-block;
+    margin-bottom: 0;
+    margin-right: $-checkbox-margin;
+
+    @include when(last-child) {
+      margin-right: 0;
+    }
+  }
+
+  @include when(disabled) {
+    .wd-checkbox__shape {
+      border-color: $-checkbox-border-color;
+      background: $-checkbox-disabled-check-bg;
+    }
+
+    .wd-checkbox__label {
+      color: $-checkbox-disabled-label-color;
+    }
+
+    @include when(checked) {
+      .wd-checkbox__shape {
+        color: $-checkbox-disabled-check-color;
+      }
+
+      .wd-checkbox__label {
+        color: $-checkbox-disabled-label-color;
+      }
+    }
+
+    @include when(button) {
+      .wd-checkbox__label {
+        background: $-checkbox-disabled-color;
+        border-color: $-checkbox-button-border;
+        color: $-checkbox-disabled-label-color;
+      }
+
+      @include when(checked) {
+        .wd-checkbox__label {
+          border-color: $-checkbox-button-disabled-border;
+        }
+      }
+    }
+  }
+
+  // 以下内容用于解决父子组件样式隔离的问题 —— START
+  @include when(cell-box) {
+    padding: 13px 15px;
+    margin: 0;
+
+    @include when(large) {
+      padding: 14px 15px;
+    }
+  }
+
+  @include when(button-box) {
+    display: inline-flex;
+    width: 33.3333%;
+    padding: 12px 12px 0 0;
+    box-sizing: border-box;
+
+    .wd-checkbox__label {
+      width: 100%;
+    }
+
+    &:last-child::after {
+      content: "";
+      display: table;
+      clear: both;
+    }
+  }
+
+  @include when(large) {
+    .wd-checkbox__shape {
+      width: $-checkbox-large-size;
+      height: $-checkbox-large-size;
+      font-size: $-checkbox-large-size;
+    }
+
+    .wd-checkbox__label {
+      font-size: $-checkbox-large-label-fs;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-checkbox/types.ts b/src/uni_modules/wot-design-uni/components/wd-checkbox/types.ts
new file mode 100644
index 0000000..86bafc7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-checkbox/types.ts
@@ -0,0 +1,68 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+
+export type CheckShape = 'circle' | 'square' | 'button'
+
+export const checkboxProps = {
+  ...baseProps,
+  customLabelClass: makeStringProp(''),
+  customShapeClass: makeStringProp(''),
+  /**
+   * 单选框选中时的值
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    required: true,
+    default: false
+  },
+  /**
+   * 单选框形状，可选值：circle / square / button
+   */
+  shape: {
+    type: String as PropType<CheckShape>
+  },
+  /**
+   * 选中的颜色
+   */
+  checkedColor: String,
+  /**
+   * 禁用
+   */
+  disabled: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /**
+   * 选中值，在 checkbox-group 中使用无效，需同 false-value 一块使用
+   */
+  trueValue: {
+    type: [String, Number, Boolean],
+    default: true
+  },
+  /**
+   * 非选中时的值，在 checkbox-group 中使用无效，需同 true-value 一块使用
+   */
+  falseValue: {
+    type: [String, Number, Boolean],
+    default: false
+  },
+  /**
+   * 设置大小，可选值：large
+   */
+  size: String,
+  /**
+   * 文字位置最大宽度
+   */
+  maxWidth: String
+}
+
+export type CheckboxProps = ExtractPropTypes<typeof checkboxProps>
+
+export type CheckboxExpose = {
+  /**
+   *  切换当前选中状态
+   */
+  toggle: () => void
+}
+
+export type CheckboxInstance = ComponentPublicInstance<CheckboxProps, CheckboxExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue b/src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue
new file mode 100644
index 0000000..d46c8fe
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-checkbox/wd-checkbox.vue
@@ -0,0 +1,177 @@
+<template>
+  <view
+    :class="`wd-checkbox ${innerCell ? 'is-cell-box' : ''} ${innerShape === 'button' ? 'is-button-box' : ''} ${isChecked ? 'is-checked' : ''} ${
+      isFirst ? 'is-first-child' : ''
+    } ${isLast ? 'is-last-child' : ''} ${innerInline ? 'is-inline' : ''} ${innerShape === 'button' ? 'is-button' : ''} ${
+      innerDisabled ? 'is-disabled' : ''
+    } ${innerSize ? 'is-' + innerSize : ''} ${customClass}`"
+    :style="customStyle"
+    @click="toggle"
+  >
+    <!--shape为button时，移除wd-checkbox__shape，只保留wd-checkbox__label-->
+    <view
+      v-if="innerShape !== 'button'"
+      :class="`wd-checkbox__shape ${innerShape === 'square' ? 'is-square' : ''} ${customShapeClass}`"
+      :style="isChecked && !innerDisabled && innerCheckedColor ? 'color :' + innerCheckedColor : ''"
+    >
+      <wd-icon custom-class="wd-checkbox__check" name="check-bold" />
+    </view>
+    <!--shape为button时只保留wd-checkbox__label-->
+    <view
+      :class="`wd-checkbox__label ${customLabelClass}`"
+      :style="isChecked && innerShape === 'button' && !innerDisabled && innerCheckedColor ? 'color:' + innerCheckedColor : ''"
+    >
+      <!--button选中时展示的icon-->
+      <wd-icon v-if="innerShape === 'button' && isChecked" custom-class="wd-checkbox__btn-check" name="check-bold" />
+      <!--文案-->
+      <view class="wd-checkbox__txt" :style="maxWidth ? 'max-width:' + maxWidth : ''">
+        <slot></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-checkbox',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, getCurrentInstance, onBeforeMount, watch } from 'vue'
+import { useParent } from '../composables/useParent'
+import { CHECKBOX_GROUP_KEY } from '../wd-checkbox-group/types'
+import { getPropByPath, isDef } from '../common/util'
+import { checkboxProps, type CheckboxExpose } from './types'
+
+const props = defineProps(checkboxProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+defineExpose<CheckboxExpose>({
+  toggle
+})
+
+const { parent: checkboxGroup, index } = useParent(CHECKBOX_GROUP_KEY)
+
+const isChecked = computed(() => {
+  if (checkboxGroup) {
+    return checkboxGroup.props.modelValue.indexOf(props.modelValue) > -1
+  } else {
+    return props.modelValue === props.trueValue
+  }
+}) // 是否被选中
+
+const isFirst = computed(() => {
+  return index.value === 0
+})
+
+const isLast = computed(() => {
+  const children = isDef(checkboxGroup) ? checkboxGroup.children : []
+  return index.value === children.length - 1
+})
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.modelValue,
+  () => {
+    // 组合使用走这个逻辑
+    if (checkboxGroup) {
+      checkName()
+    }
+  }
+)
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    const type = ['circle', 'square', 'button']
+    if (isDef(newValue) && type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  }
+)
+
+const innerShape = computed(() => {
+  return props.shape || getPropByPath(checkboxGroup, 'props.shape') || 'circle'
+})
+
+const innerCheckedColor = computed(() => {
+  return props.checkedColor || getPropByPath(checkboxGroup, 'props.checkedColor')
+})
+
+const innerDisabled = computed(() => {
+  if (!checkboxGroup) {
+    return props.disabled
+  }
+  const { max, min, modelValue, disabled } = checkboxGroup.props
+  if (
+    (max && modelValue.length >= max && !isChecked.value) ||
+    (min && modelValue.length <= min && isChecked.value) ||
+    props.disabled === true ||
+    (disabled && props.disabled === null)
+  ) {
+    return true
+  }
+
+  return props.disabled
+})
+
+const innerInline = computed(() => {
+  return getPropByPath(checkboxGroup, 'props.inline') || false
+})
+
+const innerCell = computed(() => {
+  return getPropByPath(checkboxGroup, 'props.cell') || false
+})
+
+const innerSize = computed(() => {
+  return props.size || getPropByPath(checkboxGroup, 'props.size')
+})
+
+onBeforeMount(() => {
+  // eslint-disable-next-line quotes
+  if (props.modelValue === null) console.error("checkbox's value must be set")
+})
+
+/**
+ * @description 检测checkbox绑定的value是否和其它checkbox的value冲突
+ * @param {Object} self 自身
+ * @param  myName 自己的标识符
+ */
+function checkName() {
+  checkboxGroup &&
+    checkboxGroup.children &&
+    checkboxGroup.children.forEach((child: any) => {
+      if (child.$.uid !== proxy.$.uid && child.modelValue === props.modelValue) {
+        console.error(`The checkbox's bound value: ${props.modelValue} has been used`)
+      }
+    })
+}
+/**
+ * @description 点击checkbox的Event handle
+ */
+function toggle() {
+  if (innerDisabled.value) return
+  // 复选框单独使用时点击反选，并且在checkbox上触发change事件
+  if (checkboxGroup) {
+    emit('change', {
+      value: !isChecked.value
+    })
+    checkboxGroup.changeSelectState(props.modelValue)
+  } else {
+    const newVal = props.modelValue === props.trueValue ? props.falseValue : props.trueValue
+    emit('update:modelValue', newVal)
+    emit('change', {
+      value: newVal
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-circle/index.scss b/src/uni_modules/wot-design-uni/components/wd-circle/index.scss
new file mode 100644
index 0000000..dc7d13e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-circle/index.scss
@@ -0,0 +1,18 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+@include b(circle) {
+  position: relative;
+  display: inline-block;
+  text-align: center;
+
+  @include e(text) {
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    transform: translateY(-50%);
+    color: $-circle-text-color;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-circle/types.ts b/src/uni_modules/wot-design-uni/components/wd-circle/types.ts
new file mode 100644
index 0000000..881ef73
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-circle/types.ts
@@ -0,0 +1,54 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+// 进度条端点的形状，可选值为 "butt" | "round" | "square"
+export type StrokeLinecapType = 'butt' | 'round' | 'square'
+
+export const circleProps = {
+  ...baseProps,
+  /**
+   * 当前进度
+   */
+  modelValue: makeNumberProp(0),
+  /**
+   * 圆环直径，默认单位为 px
+   */
+  size: makeNumberProp(100),
+  /**
+   * 进度条颜色，传入对象格式可以定义渐变色
+   */
+  color: {
+    type: [String, Object] as PropType<string | Record<string, string>>,
+    default: '#4d80f0'
+  },
+  /**
+   * 轨道颜色
+   */
+  layerColor: makeStringProp('#EBEEF5'),
+  /**
+   * 填充颜色
+   */
+  fill: String,
+  /**
+   * 动画速度（单位为 rate/s）
+   */
+  speed: makeNumberProp(50),
+  /**
+   * 文字
+   */
+  text: String,
+  /**
+   * 进度条宽度 单位px
+   */
+  strokeWidth: makeNumberProp(10),
+  /**
+   * 进度条端点的形状，可选值为 "butt" | "round" | "square"
+   */
+  strokeLinecap: makeStringProp<StrokeLinecapType>('round'),
+  /**
+   * 是否顺时针增加
+   */
+  clockwise: makeBooleanProp(true)
+}
+
+export type CircleProps = ExtractPropTypes<typeof circleProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue b/src/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue
new file mode 100644
index 0000000..1cb7040
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-circle/wd-circle.vue
@@ -0,0 +1,296 @@
+<template>
+  <view :class="`wd-circle ${customClass}`" :style="customStyle">
+    <!-- #ifdef MP-WEIXIN -->
+    <canvas :style="canvasStyle" :id="canvasId" :canvas-id="canvasId" type="2d"></canvas>
+    <!-- #endif -->
+    <!-- #ifndef MP-WEIXIN -->
+    <canvas :width="canvasSize" :height="canvasSize" :style="canvasStyle" :id="canvasId" :canvas-id="canvasId"></canvas>
+    <!-- #endif -->
+
+    <view v-if="!text" class="wd-circle__text">
+      <!-- 自定义提示内容 -->
+      <slot></slot>
+    </view>
+
+    <text v-else class="wd-circle__text">
+      {{ text }}
+    </text>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-circle',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onBeforeMount, onMounted, onUnmounted, ref, watch } from 'vue'
+import { addUnit, isObj, objToStyle, uuid } from '../common/util'
+import { circleProps } from './types'
+// #ifdef MP-WEIXIN
+import { canvas2dAdapter } from '../common/canvasHelper'
+// #endif
+
+// 大于等于0且小于等于100
+function format(rate: number) {
+  return Math.min(Math.max(rate, 0), 100)
+}
+// 结束角度
+const PERIMETER = 2 * Math.PI
+// 开始角度
+const BEGIN_ANGLE = -Math.PI / 2
+const STEP = 1
+
+const props = defineProps(circleProps)
+const { proxy } = getCurrentInstance() as any
+
+const progressColor = ref<string | CanvasGradient>('') // 进度条颜色
+
+const currentValue = ref<number>(0) // 当前值
+const interval = ref<any>(null) // 定时器
+const pixelRatio = ref<number>(1) // 像素比
+const canvasId = ref<string>(`wd-circle${uuid()}`) // canvasId
+let ctx: UniApp.CanvasContext | null = null
+
+// canvas渲染大小
+const canvasSize = computed(() => {
+  let size = props.size
+  // #ifdef MP-ALIPAY
+  size = size * pixelRatio.value
+  // #endif
+
+  return size
+})
+
+// 进度条宽度
+const sWidth = computed(() => {
+  let sWidth = props.strokeWidth
+  // #ifdef MP-ALIPAY
+  sWidth = sWidth * pixelRatio.value
+  // #endif
+  return sWidth
+})
+
+// Circle 样式
+const canvasStyle = computed(() => {
+  const style = {
+    width: addUnit(props.size),
+    height: addUnit(props.size)
+  }
+  return `${objToStyle(style)}`
+})
+
+// 监听目标数值变化
+watch(
+  () => props.modelValue,
+  () => {
+    reRender()
+  },
+  { immediate: true }
+)
+
+// 监听Circle大小变化
+watch(
+  () => props.size,
+  () => {
+    let timer = setTimeout(() => {
+      drawCircle(currentValue.value)
+      clearTimeout(timer)
+    }, 50)
+  },
+  { immediate: false }
+)
+
+// 监听进度条颜色变化
+watch(
+  () => props.color,
+  () => {
+    drawCircle(currentValue.value)
+  },
+  { immediate: false, deep: true }
+)
+
+onBeforeMount(() => {
+  pixelRatio.value = uni.getSystemInfoSync().pixelRatio
+})
+
+onMounted(() => {
+  currentValue.value = props.modelValue
+  drawCircle(currentValue.value)
+})
+
+onUnmounted(() => {
+  clearTimeInterval()
+})
+
+/**
+ * 获取canvas上下文
+ */
+function getContext() {
+  return new Promise<UniApp.CanvasContext>((resolve) => {
+    if (ctx) {
+      return resolve(ctx)
+    }
+    // #ifndef MP-WEIXIN
+    ctx = uni.createCanvasContext(canvasId.value, proxy)
+    resolve(ctx)
+    // #endif
+    // #ifdef MP-WEIXIN
+    uni
+      .createSelectorQuery()
+      .in(proxy)
+      .select(`#${canvasId.value}`)
+      .node((res) => {
+        if (res && res.node) {
+          const canvas = res.node
+          ctx = canvas2dAdapter(canvas.getContext('2d') as CanvasRenderingContext2D)
+          canvas.width = props.size * pixelRatio.value
+          canvas.height = props.size * pixelRatio.value
+          ctx.scale(pixelRatio.value, pixelRatio.value)
+          resolve(ctx)
+        }
+      })
+      .exec()
+    // #endif
+  })
+}
+
+/**
+ * 设置canvas
+ */
+function presetCanvas(context: any, strokeStyle: string | CanvasGradient, beginAngle: number, endAngle: number, fill?: string) {
+  let width = sWidth.value
+  const position = canvasSize.value / 2
+  if (!fill) {
+    width = width / 2
+  }
+  const radius = position - width / 2
+  context.strokeStyle = strokeStyle
+  context.setStrokeStyle(strokeStyle)
+  context.setLineWidth(width)
+  context.setLineCap(props.strokeLinecap)
+
+  context.beginPath()
+  context.arc(position, position, radius, beginAngle, endAngle, !props.clockwise)
+  context.stroke()
+  if (fill) {
+    context.setLineWidth(width)
+    context.setFillStyle(fill)
+    context.fill()
+  }
+}
+/**
+ * 渲染管道
+ */
+function renderLayerCircle(context: UniApp.CanvasContext) {
+  presetCanvas(context, props.layerColor, 0, PERIMETER, props.fill)
+}
+
+/**
+ * 渲染进度条
+ */
+function renderHoverCircle(context: UniApp.CanvasContext, formatValue: number) {
+  // 结束角度
+  const progress = PERIMETER * (formatValue / 100)
+  const endAngle = props.clockwise ? BEGIN_ANGLE + progress : 3 * Math.PI - (BEGIN_ANGLE + progress)
+
+  // 设置进度条颜色
+  if (isObj(props.color)) {
+    const LinearColor = context.createLinearGradient(canvasSize.value, 0, 0, 0)
+    Object.keys(props.color)
+      .sort((a, b) => parseFloat(a) - parseFloat(b))
+      .map((key) => LinearColor.addColorStop(parseFloat(key) / 100, (props.color as Record<string, any>)[key]))
+    progressColor.value = LinearColor
+  } else {
+    progressColor.value = props.color
+  }
+  presetCanvas(context, progressColor.value, BEGIN_ANGLE, endAngle)
+}
+
+/**
+ * 渲染圆点
+ * 进度值为0时渲染一个圆点
+ */
+function renderDot(context: UniApp.CanvasContext) {
+  const strokeWidth = sWidth.value // 管道宽度=小圆点直径
+  const position = canvasSize.value / 2 // 坐标
+  // 设置进度条颜色
+  if (isObj(props.color)) {
+    const LinearColor = context.createLinearGradient(canvasSize.value, 0, 0, 0)
+    Object.keys(props.color)
+      .sort((a, b) => parseFloat(a) - parseFloat(b))
+      .map((key) => LinearColor.addColorStop(parseFloat(key) / 100, (props.color as Record<string, any>)[key]))
+    progressColor.value = LinearColor
+  } else {
+    progressColor.value = props.color
+  }
+  context.beginPath()
+  context.arc(position, strokeWidth / 4, strokeWidth / 4, 0, PERIMETER)
+  context.setFillStyle(progressColor.value)
+  context.fill()
+}
+
+/**
+ * 画圆
+ */
+function drawCircle(currentValue: number) {
+  getContext().then((context) => {
+    context.clearRect(0, 0, canvasSize.value, canvasSize.value)
+    renderLayerCircle(context)
+
+    const formatValue = format(currentValue)
+    if (formatValue !== 0) {
+      renderHoverCircle(context, formatValue)
+    } else {
+      renderDot(context)
+    }
+    context.draw()
+  })
+}
+
+/**
+ * Circle组件渲染
+ * 当前进度值变化时重新渲染Circle组件
+ */
+function reRender() {
+  // 动画通过定时器渲染
+  if (props.speed <= 0 || props.speed > 1000) {
+    drawCircle(props.modelValue)
+    return
+  }
+  clearTimeInterval()
+  currentValue.value = currentValue.value || 0
+  const run = () => {
+    interval.value = setTimeout(() => {
+      if (currentValue.value !== props.modelValue) {
+        if (Math.abs(currentValue.value - props.modelValue) < STEP) {
+          currentValue.value = props.modelValue
+        } else if (currentValue.value < props.modelValue) {
+          currentValue.value += STEP
+        } else {
+          currentValue.value -= STEP
+        }
+        drawCircle(currentValue.value)
+        run()
+      } else {
+        clearTimeInterval()
+      }
+    }, 1000 / props.speed)
+  }
+  run()
+}
+/**
+ * 清除定时器
+ */
+function clearTimeInterval() {
+  interval.value && clearTimeout(interval.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-col-picker/index.scss b/src/uni_modules/wot-design-uni/components/wd-col-picker/index.scss
new file mode 100644
index 0000000..9c16527
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-col-picker/index.scss
@@ -0,0 +1,243 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(col-picker) {
+
+    @include when(border) {
+      .wd-col-picker__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+
+    @include e(cell) {
+      background-color: $-dark-background2;
+      color: $-dark-color;
+
+      @include when(disabled) {
+        .wd-col-picker__value {
+          color: $-dark-color3;
+        }
+      }
+    }
+
+    @include e(list-item) {
+  
+      @include when(disabled) {
+        color: $-dark-color3;
+      }
+    }
+
+    @include e(list-item-tip) {
+      color: $-dark-color-gray;
+    }
+
+    @include e(value) {
+      color: $-dark-color;
+  
+      @include m(placeholder) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    :deep(.wd-col-picker__arrow) {
+      color: $-dark-color;
+    }
+
+    @include e(list) {
+      color: $-dark-color;
+    }
+
+    @include e(selected) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(col-picker) {
+  @include when(border) {
+    .wd-col-picker__cell {
+      @include halfPixelBorder('top', $-cell-padding);
+    }
+  }
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    align-items: flex-start;
+    background-color: $-color-white;
+    text-decoration: none;
+    color: $-cell-title-color;
+    font-size: $-cell-title-fs;
+    overflow: hidden;
+    line-height: $-cell-line-height;
+  }
+  @include e(cell) {
+    @include when(disabled) {
+      .wd-col-picker__value {
+        color: $-input-disabled-color;
+      }
+    }
+    @include when(align-right) {
+      .wd-col-picker__value {
+        text-align: right;
+      }
+    }
+    @include when(error) {
+      .wd-col-picker__value {
+        color: $-input-error-color;
+      }
+      :deep(.wd-col-picker__arrow) {
+        color: $-input-error-color;
+      }
+    }
+    @include when(large) {
+      font-size: $-cell-title-fs-large;
+
+      :deep(.wd-col-picker__arrow) {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+  }
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+  @include e(label) {
+    position: relative;
+    width: $-input-cell-label-width;
+    margin-right: $-cell-padding;
+    color: $-cell-title-color;
+    box-sizing: border-box;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: '*';
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+      }
+    }
+  }
+  @include e(value-wraper) {
+    display: flex;
+  }
+  @include e(value) {
+    flex: 1;
+    margin-right: 10px;
+    color: $-cell-value-color;
+
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+    @include m(placeholder) {
+      color: $-input-placeholder-color;
+    }
+  }
+  @include e(body) {
+    flex: 1;
+  }
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+  @include e(selected) {
+    height: $-col-picker-selected-height;
+    font-size: $-col-picker-selected-fs;
+    color: $-col-picker-selected-color;
+    overflow: hidden;
+  }
+  @include e(selected-container){
+    position: relative;
+    display: flex;
+    user-select: none;
+  }
+  @include e(selected-item) {
+    flex: 0 0 auto;
+    height: $-col-picker-selected-height;
+    line-height: $-col-picker-selected-height;
+    padding: $-col-picker-selected-padding;
+
+    @include when(selected) {
+      font-weight: $-col-picker-selected-fw;
+    }
+  }
+  @include e(selected-line) {
+    position: absolute;
+    bottom: 5px;
+    width: $-col-picker-line-width;
+    left: 0;
+    height: $-col-picker-line-height;
+    background: $-col-picker-line-color;
+    z-index: 1;
+    border-radius: calc($-col-picker-line-height / 2);
+    box-shadow: $-col-picker-line-box-shadow;
+  }
+  @include e(list-container){
+    position: relative;
+  }
+  @include e(list) {
+    height: $-col-picker-list-height;
+    padding-bottom: $-col-picker-list-padding-bottom;
+    box-sizing: border-box;
+    overflow: auto;
+    color: $-col-picker-list-color;
+    font-size: $-col-picker-list-fs;
+    -webkit-overflow-scrolling: touch;
+  }
+  @include e(list-item) {
+    display: flex;
+    padding: $-col-picker-list-item-padding;
+    align-items: flex-start;
+
+    @include when(selected) {
+      color: $-col-picker-list-color-checked;
+
+      :deep(.wd-col-picker__checked) {
+        opacity: 1;
+      }
+    }
+    @include when(disabled) {
+      color: $-col-picker-list-color-disabled;
+    }
+  }
+  @include e(list-item-label) {
+    line-height: 1.285;
+  }
+  @include e(list-item-tip) {
+    margin-top: 2px;
+    font-size: $-col-picker-list-fs-tip;
+    color: $-col-picker-list-color-tip;
+  }
+  @include edeep(checked) {
+    display: block;
+    margin-left: 4px;
+    font-size: $-col-picker-list-checked-icon-size;
+    color: $-col-picker-list-color-checked;
+    opacity: 0;
+  }
+  @include e(loading) {
+    display: flex;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    align-items: center;
+    justify-content: center;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts
new file mode 100644
index 0000000..ceceda6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-col-picker/types.ts
@@ -0,0 +1,158 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+
+export const colPickerProps = {
+  ...baseProps,
+  /**
+   * 选中项
+   */
+  modelValue: makeRequiredProp(Array as PropType<Array<string | number>>),
+  /**
+   * 选择器数据，二维数组
+   */
+  columns: makeArrayProp<Record<string, any>[]>(),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp('33%'),
+  /**
+   * 使用 label 插槽时设置该选项
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 使用默认插槽时设置该选项
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 接收当前列的选中项 item、当前列下标、当前列选中项下标下一列数据处理函数 resolve、结束选择 finish
+   */
+  columnChange: Function as PropType<ColPickerColumnChange>,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<ColPickerDisplayFormat>,
+  /**
+   * 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数
+   */
+  beforeConfirm: Function as PropType<ColPickerBeforeConfirm>,
+  /**
+   * 选择器的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 是否为错误状态，错误状态时右侧内容为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 设置选择器大小，可选值：large
+   */
+  size: String,
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选项对象中，提示文案对应的 key
+   */
+  tipKey: makeStringProp('tip'),
+  /**
+   * loading 图标的颜色
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 自动触发 column-change 事件来补全数据，当 columns 为空数组或者 columns 数组长度小于 value 数组长度时，会自动触发 column-change
+   */
+  autoComplete: makeBooleanProp(false),
+  /**
+   * 弹窗层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 是否超出隐藏
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 底部条宽度，单位像素
+   */
+  lineWidth: numericProp,
+  /**
+   * 底部条高度，单位像素
+   */
+  lineHeight: numericProp,
+  /**
+   * label 外部自定义样式
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  customValueClass: makeStringProp('')
+}
+
+export type ColPickerProps = ExtractPropTypes<typeof colPickerProps>
+
+export type ColPickerColumnChangeOption = {
+  selectedItem: Record<string, any>
+  index: number
+  rowIndex: number
+  resolve: (nextColumn: Record<string, any>[]) => void
+  finish: (isOk?: boolean) => void
+}
+export type ColPickerColumnChange = (option: ColPickerColumnChangeOption) => void
+export type ColPickerDisplayFormat = (selectedItems: Record<string, any>[]) => string
+export type ColPickerBeforeConfirm = (value: (string | number)[], selectedItems: Record<string, any>[], resolve: (isPass: boolean) => void) => void
+
+export type ColPickerExpose = {
+  // 关闭picker弹框
+  close: () => void
+  // 打开picker弹框
+  open: () => void
+}
+
+export type ColPickerInstance = ComponentPublicInstance<ColPickerExpose, ColPickerProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue b/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
new file mode 100644
index 0000000..44f95ff
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
@@ -0,0 +1,511 @@
+<template>
+  <view :class="`wd-col-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`" :style="customStyle">
+    <view class="wd-col-picker__field" @click="showPicker">
+      <slot v-if="useDefaultSlot"></slot>
+      <view
+        v-else
+        :class="`wd-col-picker__cell ${disabled && 'is-disabled'} ${props.readonly && 'is-readonly'} ${alignRight && 'is-align-right'} ${
+          error && 'is-error'
+        }  ${size && 'is-' + size}`"
+      >
+        <view
+          v-if="label || useLabelSlot"
+          :class="`wd-col-picker__label ${isRequired && 'is-required'} ${customLabelClass}`"
+          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
+        >
+          <block v-if="label">{{ label }}</block>
+          <slot v-else name="label"></slot>
+        </view>
+        <view class="wd-col-picker__body">
+          <view class="wd-col-picker__value-wraper">
+            <view
+              :class="`wd-col-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${showValue ? '' : 'wd-col-picker__value--placeholder'}`"
+            >
+              {{ showValue || placeholder || translate('placeholder') }}
+            </view>
+            <wd-icon v-if="!disabled && !readonly" custom-class="wd-col-picker__arrow" name="arrow-right" />
+          </view>
+          <view v-if="errorMessage" class="wd-col-picker__error-message">{{ errorMessage }}</view>
+        </view>
+      </view>
+    </view>
+    <wd-action-sheet
+      v-model="pickerShow"
+      :duration="250"
+      :title="title || translate('title')"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      @open="handlePickerOpend"
+      @close="handlePickerClose"
+      @closed="handlePickerClosed"
+    >
+      <view class="wd-col-picker__selected">
+        <scroll-view :scroll-x="true" scroll-with-animation :scroll-left="scrollLeft">
+          <view class="wd-col-picker__selected-container">
+            <view
+              v-for="(_, colIndex) in selectList"
+              :key="colIndex"
+              :class="`wd-col-picker__selected-item  ${colIndex === currentCol && 'is-selected'}`"
+              @click="handleColClick(colIndex)"
+            >
+              {{ selectShowList[colIndex] || translate('select') }}
+            </view>
+            <view class="wd-col-picker__selected-line" :style="state.lineStyle"></view>
+          </view>
+        </scroll-view>
+      </view>
+      <view class="wd-col-picker__list-container">
+        <view
+          v-for="(col, colIndex) in selectList"
+          :key="colIndex"
+          class="wd-col-picker__list"
+          :style="colIndex === currentCol ? 'display: block;' : 'display: none;'"
+        >
+          <view
+            v-for="(item, index) in col"
+            :key="index"
+            :class="`wd-col-picker__list-item ${pickerColSelected[colIndex] && item[valueKey] === pickerColSelected[colIndex] && 'is-selected'} ${
+              item.disabled && 'is-disabled'
+            }`"
+            @click="chooseItem(colIndex, index)"
+          >
+            <view>
+              <view class="wd-col-picker__list-item-label">{{ item[labelKey] }}</view>
+              <view v-if="item[tipKey]" class="wd-col-picker__list-item-tip">{{ item[tipKey] }}</view>
+            </view>
+            <wd-icon custom-class="wd-col-picker__checked" name="check"></wd-icon>
+          </view>
+          <view v-if="loading" class="wd-col-picker__loading">
+            <wd-loading :color="loadingColor" />
+          </view>
+        </view>
+      </view>
+    </wd-action-sheet>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-col-picker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties, reactive, nextTick } from 'vue'
+import { addUnit, debounce, getRect, isArray, isBoolean, isDef, isFunction, objToStyle } from '../common/util'
+import { useCell } from '../composables/useCell'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { colPickerProps, type ColPickerExpose } from './types'
+
+const { translate } = useTranslate('col-picker')
+
+const $container = '.wd-col-picker__selected-container'
+const $item = '.wd-col-picker__selected-item'
+
+const props = defineProps(colPickerProps)
+const emit = defineEmits(['close', 'update:modelValue', 'confirm'])
+
+const pickerShow = ref<boolean>(false)
+const currentCol = ref<number>(0)
+const selectList = ref<Record<string, any>[][]>([])
+const pickerColSelected = ref<(string | number)[]>([])
+const selectShowList = ref<Record<string, any>[]>([])
+const loading = ref<boolean>(false)
+const isChange = ref<boolean>(false)
+const lastSelectList = ref<Record<string, any>[][]>([])
+const lastPickerColSelected = ref<(string | number)[]>([])
+const scrollLeft = ref<number>(0)
+const inited = ref<boolean>(false)
+const isCompleting = ref<boolean>(false)
+
+const state = reactive({
+  lineStyle: 'display:none;' // 激活项边框线样式
+})
+
+const { proxy } = getCurrentInstance() as any
+
+const cell = useCell()
+
+const updateLineAndScroll = debounce(function (animation = true) {
+  setLineStyle(animation)
+  lineScrollIntoView()
+}, 50)
+
+const showValue = computed(() => {
+  const selectedItems = (props.modelValue || []).map((item, colIndex) => {
+    return getSelectedItem(item, colIndex, selectList.value)
+  })
+
+  if (props.displayFormat) {
+    return props.displayFormat(selectedItems)
+  } else {
+    return selectedItems
+      .map((item) => {
+        return item[props.labelKey]
+      })
+      .join('')
+  }
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue === pickerColSelected.value) return
+    pickerColSelected.value = newValue
+    newValue.map((item, colIndex) => {
+      return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
+    })
+    handleAutoComplete()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columns,
+  (newValue, oldValue) => {
+    if (newValue.length && !isArray(newValue[0])) {
+      console.error('[wot design] error(wd-col-picker): the columns props of wd-col-picker should be a two-dimensional array')
+      return
+    }
+    if (newValue.length === 0 && !oldValue) return
+
+    const newSelectedList = newValue.slice(0)
+
+    selectList.value = newSelectedList
+
+    selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
+      return getSelectedItem(item, colIndex, newSelectedList)[props.labelKey]
+    })
+    lastSelectList.value = newSelectedList
+
+    if (newSelectedList.length > 0) {
+      currentCol.value = newSelectedList.length - 1
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columnChange,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of columnChange must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.displayFormat,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormat must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.beforeConfirm,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforeConfirm must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+// 表单校验错误信息
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+onMounted(() => {
+  inited.value = true
+})
+
+// 打开弹框
+function open() {
+  showPicker()
+}
+// 关闭弹框
+function close() {
+  handlePickerClose()
+}
+function handlePickerOpend() {
+  updateLineAndScroll(false)
+}
+
+function handlePickerClose() {
+  pickerShow.value = false
+  emit('close')
+}
+
+function handlePickerClosed() {
+  if (isChange.value) {
+    setTimeout(() => {
+      selectList.value = lastSelectList.value.slice(0)
+      pickerColSelected.value = lastPickerColSelected.value.slice(0)
+      selectShowList.value = lastPickerColSelected.value.map((item, colIndex) => {
+        return getSelectedItem(item, colIndex, lastSelectList.value)[props.labelKey]
+      })
+      currentCol.value = lastSelectList.value.length - 1
+      isChange.value = false
+    }, 250)
+  }
+}
+
+function showPicker() {
+  const { disabled, readonly } = props
+
+  if (disabled || readonly) return
+  pickerShow.value = true
+  lastPickerColSelected.value = pickerColSelected.value.slice(0)
+  lastSelectList.value = selectList.value.slice(0)
+}
+
+function getSelectedItem(value: string | number, colIndex: number, selectList: Record<string, any>[][]) {
+  const { valueKey, labelKey } = props
+  if (selectList[colIndex]) {
+    const selecteds = selectList[colIndex].filter((item) => {
+      return item[valueKey] === value
+    })
+
+    if (selecteds.length > 0) {
+      return selecteds[0]
+    }
+  }
+
+  return {
+    [valueKey]: value,
+    [labelKey]: ''
+  }
+}
+
+function chooseItem(colIndex: number, index: number) {
+  const item = selectList.value[colIndex][index]
+  if (item.disabled) return
+
+  const newPickerColSelected = pickerColSelected.value.slice(0, colIndex)
+  newPickerColSelected.push(item[props.valueKey])
+  isChange.value = true
+  pickerColSelected.value = newPickerColSelected
+  selectList.value = selectList.value.slice(0, colIndex + 1)
+  selectShowList.value = newPickerColSelected.map((item, colIndex) => {
+    return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
+  })
+
+  if (selectShowList.value[colIndex] && colIndex === currentCol.value) {
+    updateLineAndScroll(true)
+  }
+
+  handleColChange(colIndex, item, index)
+}
+
+function handleColChange(colIndex: number, item: Record<string, any>, index: number, callback?: () => void) {
+  loading.value = true
+  const { columnChange, beforeConfirm } = props
+  columnChange &&
+    columnChange({
+      selectedItem: item,
+      index: colIndex,
+      rowIndex: index,
+      resolve: (nextColumn: Record<string, any>[]) => {
+        if (!isArray(nextColumn)) {
+          console.error('[wot design] error(wd-col-picker): the data of each column of wd-col-picker should be an array')
+          return
+        }
+
+        const newSelectList = selectList.value.slice(0)
+        newSelectList[colIndex + 1] = nextColumn
+
+        selectList.value = newSelectList
+        loading.value = false
+        currentCol.value = colIndex + 1
+
+        updateLineAndScroll(true)
+        if (typeof callback === 'function') {
+          isCompleting.value = false
+          selectShowList.value = pickerColSelected.value.map((item, colIndex) => {
+            return getSelectedItem(item, colIndex, selectList.value)[props.labelKey]
+          })
+          callback()
+        }
+      },
+      finish: (isOk?: boolean) => {
+        // 每设置展示数据回显
+        if (typeof callback === 'function') {
+          loading.value = false
+          isCompleting.value = false
+          return
+        }
+        if (isBoolean(isOk) && !isOk) {
+          loading.value = false
+          return
+        }
+
+        if (beforeConfirm) {
+          beforeConfirm(
+            pickerColSelected.value,
+            pickerColSelected.value.map((item, colIndex) => {
+              return getSelectedItem(item, colIndex, selectList.value)
+            }),
+            (isPass: boolean) => {
+              if (isPass) {
+                onConfirm()
+              } else {
+                loading.value = false
+              }
+            }
+          )
+        } else {
+          onConfirm()
+        }
+      }
+    })
+}
+function onConfirm() {
+  isChange.value = false
+  loading.value = false
+  pickerShow.value = false
+
+  emit('update:modelValue', pickerColSelected.value)
+  emit('confirm', {
+    value: pickerColSelected.value,
+    selectedItems: pickerColSelected.value.map((item, colIndex) => {
+      return getSelectedItem(item, colIndex, selectList.value)
+    })
+  })
+}
+function handleColClick(index: number) {
+  isChange.value = true
+  currentCol.value = index
+  updateLineAndScroll(true)
+}
+/**
+ * @description 更新navBar underline的偏移量
+ * @param {Boolean} animation 是否伴随动画
+ */
+function setLineStyle(animation: boolean = true) {
+  if (!inited.value) return
+  const { lineWidth, lineHeight } = props
+  getRect($item, true, proxy)
+    .then((rects) => {
+      const lineStyle: CSSProperties = {}
+      if (isDef(lineWidth)) {
+        lineStyle.width = addUnit(lineWidth)
+      }
+      if (isDef(lineHeight)) {
+        lineStyle.height = addUnit(lineHeight)
+        lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+      }
+      const rect = rects[currentCol.value]
+      let left = rects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
+      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+
+      if (animation) {
+        lineStyle.transition = 'width 300ms ease, transform 300ms ease'
+      }
+
+      state.lineStyle = objToStyle(lineStyle)
+    })
+    .catch(() => {})
+}
+/**
+ * @description scroll-view滑动到active的tab_nav
+ */
+function lineScrollIntoView() {
+  if (!inited.value) return
+  Promise.all([getRect($item, true, proxy), getRect($container, false, proxy)])
+    .then(([navItemsRects, navRect]) => {
+      if (!isArray(navItemsRects) || navItemsRects.length === 0) return
+      // 选中元素
+      const selectItem = navItemsRects[currentCol.value]
+      // 选中元素之前的节点的宽度总和
+      const offsetLeft = navItemsRects.slice(0, currentCol.value).reduce((prev, curr) => prev + Number(curr.width), 0)
+      // scroll-view滑动到selectItem的偏移量
+      scrollLeft.value = offsetLeft - ((navRect as any).width - Number(selectItem.width)) / 2
+    })
+    .catch(() => {})
+}
+
+// 递归列数据补齐
+function diffColumns(colIndex: number) {
+  // colIndex 为 -1 时，item 为空对象，>=0 时则具有 value 属性
+  const item = colIndex === -1 ? {} : { [props.valueKey]: props.modelValue[colIndex] }
+  handleColChange(colIndex, item, -1, () => {
+    // 如果 columns 长度还小于 value 长度，colIndex + 1，继续递归补齐
+    if (selectList.value.length < props.modelValue.length) {
+      diffColumns(colIndex + 1)
+    }
+  })
+}
+function handleAutoComplete() {
+  if (props.autoComplete) {
+    // 如果 columns 数组长度为空，或者长度小于 value 的长度，自动触发 columnChange 来补齐数据
+    if (selectList.value.length < props.modelValue.length || selectList.value.length === 0) {
+      // isCompleting 是否在自动补全，锁操作
+      if (!isCompleting.value) {
+        // 如果 columns 长度为空，则传入的 colIndex 为 -1
+        const colIndex = selectList.value.length === 0 ? -1 : selectList.value.length - 1
+        diffColumns(colIndex)
+      }
+      isCompleting.value = true
+    }
+  }
+}
+
+defineExpose<ColPickerExpose>({
+  close,
+  open
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-col/index.scss b/src/uni_modules/wot-design-uni/components/wd-col/index.scss
new file mode 100644
index 0000000..160b919
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-col/index.scss
@@ -0,0 +1,19 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+$i: 1;
+
+@include b(col) {
+  float: left;
+  box-sizing: border-box;
+}
+
+@while $i <= 24 {
+  .wd-col__#{$i} {
+    width: calc(100% / 24 * $i);
+  }
+  .wd-col__offset-#{$i} {
+    margin-left: calc(100% / 24 * $i);
+  }
+  $i: $i + 1;
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-col/types.ts b/src/uni_modules/wot-design-uni/components/wd-col/types.ts
new file mode 100644
index 0000000..78c6a8a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-col/types.ts
@@ -0,0 +1,15 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumberProp } from '../common/props'
+
+export const colProps = {
+  ...baseProps,
+  /**
+   * 列元素宽度
+   */
+  span: makeNumberProp(24),
+  /**
+   * 列元素偏移距离
+   */
+  offset: makeNumberProp(0)
+}
+export type ColProps = ExtractPropTypes<typeof colProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue b/src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue
new file mode 100644
index 0000000..11aad88
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-col/wd-col.vue
@@ -0,0 +1,49 @@
+<template>
+  <view :class="['wd-col', span && 'wd-col__' + span, offset && 'wd-col__offset-' + offset, customClass]" :style="rootStyle">
+    <!-- 每一列 -->
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-col',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+import { useParent } from '../composables/useParent'
+import { ROW_KEY } from '../wd-row/types'
+import { colProps } from './types'
+import { isDef } from '../common/util'
+
+const props = defineProps(colProps)
+const { parent: row } = useParent(ROW_KEY)
+
+const rootStyle = computed(() => {
+  const gutter = isDef(row) ? row.props.gutter || 0 : 0
+  const padding = `${gutter / 2}px`
+  const style = gutter > 0 ? `padding-left: ${padding}; padding-right: ${padding};background-clip: content-box;` : ''
+  return `${style}${props.customStyle}`
+})
+
+watch([() => props.span, () => props.offset], () => {
+  check()
+})
+
+function check() {
+  const { span, offset } = props
+  if (span < 0 || offset < 0) {
+    console.error('[wot-design] warning(wd-col): attribute span/offset must be greater than or equal to 0')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss b/src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
new file mode 100644
index 0000000..97f4655
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-collapse-item/index.scss
@@ -0,0 +1,90 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(collapse-item) {
+    @include halfPixelBorder('top', 0, $-dark-border-color);
+
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(body) {
+      color: $-dark-color3;
+    }
+
+    @include when(disabled) {
+      .wd-collapse-item__title {
+        color: $-dark-color-gray;
+      }
+      .wd-collapse-item__arrow {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+
+@include b(collapse-item) {
+  position: relative;
+  @include halfPixelBorder('top');
+
+
+  @include e(header) {
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: $-collapse-header-padding;
+    overflow: hidden;
+    user-select: none;
+
+    @include when(expanded) {
+      @include halfPixelBorder('bottom');
+    }
+
+    @include when(custom) {
+      display: block;
+    }
+  }
+
+  @include e(title) {
+    color: $-collapse-title-color;
+    font-weight: $-fw-medium;
+    font-size: $-collapse-title-fs;
+  }
+
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-collapse-arrow-size;
+    color: $-collapse-arrow-color;
+    transition: transform 0.3s;
+
+    @include when(retract) {
+      transform: rotate(-180deg);
+    }
+  }
+
+  @include e(wrapper) {
+    position: relative;
+    overflow: hidden;
+    will-change: height;
+  }
+
+  @include e(body) {
+    color: $-collapse-body-color;
+    font-size: $-collapse-body-fs;
+    padding: $-collapse-body-padding;
+    line-height: 1.43;
+  }
+
+  @include when(disabled) {
+    .wd-collapse-item__title {
+      color: $-collapse-disabled-color;
+    }
+    .wd-collapse-item__arrow {
+      color: $-collapse-disabled-color;
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
new file mode 100644
index 0000000..07b28f6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-collapse-item/types.ts
@@ -0,0 +1,48 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type CollapseItemBeforeExpand = (name: string) => boolean | Promise<unknown>
+
+export const collapseItemProps = {
+  ...baseProps,
+  /**
+   * 自定义折叠栏内容容器样式类名
+   */
+  customBodyClass: makeStringProp(''),
+  /**
+   * 自定义折叠栏内容容器样式
+   */
+  customBodyStyle: makeStringProp(''),
+  /**
+   * 折叠栏的标题, 可通过 slot 传递自定义内容
+   */
+  title: makeStringProp(''),
+  /**
+   * 禁用折叠栏
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 折叠栏的标识符
+   */
+  name: makeRequiredProp(String),
+  /**
+   * 打开前的回调函数，返回 false 可以阻止打开，支持返回 Promise
+   */
+  beforeExpend: Function as PropType<CollapseItemBeforeExpand>
+}
+
+export type CollapseItemProps = ExtractPropTypes<typeof collapseItemProps>
+
+export type CollapseItemExpose = {
+  /**
+   * 获取展开状态
+   * @returns boolean
+   */
+  getExpanded: () => boolean
+  /**
+   * 更新展开状态
+   */
+  updateExpand: () => Promise<void>
+}
+
+export type CollapseItemInstance = ComponentPublicInstance<CollapseItemProps, CollapseItemExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue b/src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
new file mode 100644
index 0000000..2f1d123
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-collapse-item/wd-collapse-item.vue
@@ -0,0 +1,171 @@
+<template>
+  <view :class="`wd-collapse-item ${disabled ? 'is-disabled' : ''} is-border ${customClass}`" :style="customStyle">
+    <view
+      :class="`wd-collapse-item__header ${expanded ? 'is-expanded' : ''} ${isFirst ? 'wd-collapse-item__header-first' : ''} ${
+        $slots.title ? 'is-custom' : ''
+      }`"
+      @click="handleClick"
+    >
+      <slot name="title" :expanded="expanded" :disabled="disabled" :isFirst="isFirst">
+        <text class="wd-collapse-item__title">{{ title }}</text>
+        <wd-icon name="arrow-down" :custom-class="`wd-collapse-item__arrow ${expanded ? 'is-retract' : ''}`" />
+      </slot>
+    </view>
+    <view class="wd-collapse-item__wrapper" :style="contentStyle" @transitionend="handleTransitionEnd">
+      <view class="wd-collapse-item__body" :class="customBodyClass" :style="customBodyStyle" :id="collapseId">
+        <slot />
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-collapse-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, getCurrentInstance, onMounted, ref, watch, type CSSProperties } from 'vue'
+import { addUnit, getRect, isArray, isDef, isPromise, isString, objToStyle, pause, uuid } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { COLLAPSE_KEY } from '../wd-collapse/types'
+import { collapseItemProps, type CollapseItemExpose } from './types'
+
+const collapseId = ref<string>(`collapseId${uuid()}`)
+
+const props = defineProps(collapseItemProps)
+
+const { parent: collapse, index } = useParent(COLLAPSE_KEY)
+
+const height = ref<string | number>('')
+const inited = ref<boolean>(false)
+const expanded = ref<boolean>(false)
+const { proxy } = getCurrentInstance() as any
+
+/**
+ * 容器样式，(动画)
+ */
+const isFirst = computed(() => {
+  return index.value === 0
+})
+
+/**
+ * 容器样式，(动画)
+ */
+const contentStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (inited.value) {
+    style.transition = 'height 0.3s ease-in-out'
+  }
+  if (!expanded.value) {
+    style.height = '0px'
+  } else if (height.value) {
+    style.height = addUnit(height.value)
+  }
+  return objToStyle(style)
+})
+
+/**
+ * 是否选中
+ */
+const isSelected = computed(() => {
+  const modelValue = collapse ? collapse?.props.modelValue || [] : []
+  const { name } = props
+  return (isString(modelValue) && modelValue === name) || (isArray(modelValue) && modelValue.indexOf(name as string) >= 0)
+})
+
+watch(
+  () => isSelected.value,
+  (newVal) => {
+    updateExpand(newVal)
+  }
+)
+
+onMounted(() => {
+  updateExpand(isSelected.value)
+})
+
+async function updateExpand(useBeforeExpand: boolean = true) {
+  try {
+    if (useBeforeExpand) {
+      await handleBeforeExpand()
+    }
+    initRect()
+  } catch (error) {
+    /* empty */
+  }
+}
+
+function initRect() {
+  getRect(`#${collapseId.value}`, false, proxy).then(async (rect) => {
+    const { height: rectHeight } = rect
+    height.value = isDef(rectHeight) ? Number(rectHeight) : ''
+    await pause()
+    if (isSelected.value) {
+      expanded.value = true
+    } else {
+      expanded.value = false
+    }
+    if (!inited.value) {
+      inited.value = true
+    }
+  })
+}
+
+function handleTransitionEnd() {
+  if (expanded.value) {
+    height.value = ''
+  }
+}
+
+// 点击子项
+async function handleClick() {
+  if (props.disabled) return
+  try {
+    await updateExpand()
+    const { name } = props
+    collapse && collapse.toggle(name, !expanded.value)
+  } catch (error) {
+    /* empty */
+  }
+}
+
+/**
+ * 展开前钩子
+ */
+function handleBeforeExpand() {
+  return new Promise<void>((resolve, reject) => {
+    const { name } = props
+    const nextexpanded = !expanded.value
+    if (nextexpanded && props.beforeExpend) {
+      const response = props.beforeExpend(name)
+      if (!response) {
+        reject()
+      }
+      if (isPromise(response)) {
+        response.then(() => resolve()).catch(reject)
+      } else {
+        resolve()
+      }
+    } else {
+      resolve()
+    }
+  })
+}
+
+function getExpanded() {
+  return expanded.value
+}
+
+defineExpose<CollapseItemExpose>({ getExpanded, updateExpand })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-collapse/index.scss b/src/uni_modules/wot-design-uni/components/wd-collapse/index.scss
new file mode 100644
index 0000000..552dc97
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-collapse/index.scss
@@ -0,0 +1,55 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(collapse) {
+    background: $-dark-background2;
+
+    @include e(content) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(collapse) {
+  background: $-color-white;
+
+  @include when(viewmore) {
+    padding: $-collapse-side-padding;
+  }
+  @include e(content) {
+    font-size: $-collapse-body-fs;
+    color: $-collapse-body-color;
+
+    @include when(retract) {
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      font-size: $-collapse-retract-fs;
+    }
+  }
+  @include e(more) {
+    display: inline-block;
+    font-size: $-collapse-retract-fs;
+    margin-top: 8px;
+    color: $-collapse-more-color;
+    user-select: none;
+  }
+  @include e(more-txt) {
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: 4px;
+  }
+  @include e(arrow) {
+    display: inline-block;
+    vertical-align: middle;
+    transition: transform 0.1s;
+    font-size: $-collapse-arrow-size;
+    height: $-collapse-arrow-size;
+    line-height: $-collapse-arrow-size;
+
+    @include when(retract) {
+      transform: rotate(-180deg);
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-collapse/types.ts b/src/uni_modules/wot-design-uni/components/wd-collapse/types.ts
new file mode 100644
index 0000000..e2057f8
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-collapse/types.ts
@@ -0,0 +1,58 @@
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type CollapseToggleAllOptions =
+  | boolean
+  | {
+      expanded?: boolean
+      skipDisabled?: boolean
+    }
+
+export type CollapseProvide = {
+  props: Partial<CollapseProps>
+  toggle: (name: string, expanded: boolean) => void
+}
+
+export const COLLAPSE_KEY: InjectionKey<CollapseProvide> = Symbol('wd-collapse')
+
+export const collapseProps = {
+  ...baseProps,
+  /**
+   * 查看更多模式下的插槽外部自定义样式
+   */
+  customMoreSlotClass: makeStringProp(''),
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [String, Array, Boolean] as PropType<string | Array<string> | boolean>
+  },
+  /**
+   * 手风琴模式
+   */
+  accordion: makeBooleanProp(false),
+  /**
+   * 查看更多的折叠面板
+   */
+  viewmore: makeBooleanProp(false),
+  /**
+   * 查看更多的自定义插槽使用标志
+   */
+  useMoreSlot: makeBooleanProp(false),
+  /**
+   * 查看更多的折叠面板，收起时的显示行数
+   */
+  lineNum: makeNumberProp(2)
+}
+
+export type CollapseProps = ExtractPropTypes<typeof collapseProps>
+
+export type CollapseExpose = {
+  /**
+   * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
+   * @param options 面板状态
+   */
+  toggleAll: (options?: CollapseToggleAllOptions) => void
+}
+
+export type CollapseInstance = ComponentPublicInstance<CollapseProps, CollapseExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue b/src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
new file mode 100644
index 0000000..d39130d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-collapse/wd-collapse.vue
@@ -0,0 +1,151 @@
+<template>
+  <view :class="`wd-collapse ${viewmore ? 'is-viewmore' : ''} ${customClass}`" :style="customStyle">
+    <!-- 普通或手风琴 -->
+    <block v-if="!viewmore">
+      <slot></slot>
+    </block>
+    <!-- 查看更多模式 -->
+    <view v-else>
+      <view
+        :class="`wd-collapse__content ${!modelValue ? 'is-retract' : ''} `"
+        :style="`-webkit-line-clamp: ${contentLineNum}; -webkit-box-orient: vertical`"
+      >
+        <slot></slot>
+      </view>
+      <view class="wd-collapse__more" @click="handleMore">
+        <!-- 自定义展开按钮 -->
+        <view v-if="useMoreSlot" :class="customMoreSlotClass">
+          <slot name="more"></slot>
+        </view>
+        <!-- 显示展开或折叠按钮 -->
+        <block v-else>
+          <span class="wd-collapse__more-txt">{{ !modelValue ? translate('expand') : translate('retract') }}</span>
+          <view :class="`wd-collapse__arrow ${modelValue ? 'is-retract' : ''}`">
+            <wd-icon name="arrow-down"></wd-icon>
+          </view>
+        </block>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-collapse',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { onBeforeMount, ref, watch } from 'vue'
+import { COLLAPSE_KEY, collapseProps, type CollapseExpose, type CollapseToggleAllOptions } from './types'
+import { useChildren } from '../composables/useChildren'
+import { isArray, isBoolean, isDef } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+
+const props = defineProps(collapseProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { translate } = useTranslate('collapse')
+const contentLineNum = ref<number>(0) // 查看更多的折叠面板，收起时的显示行数
+
+const { linkChildren, children } = useChildren(COLLAPSE_KEY)
+
+linkChildren({ props, toggle })
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    const { viewmore, accordion } = props
+    // 手风琴状态下 value 类型只能为 string
+    if (accordion && typeof newVal !== 'string') {
+      console.error('accordion value must be string')
+    } else if (!accordion && !viewmore && !isArray(newVal)) {
+      console.error('value must be Array')
+    }
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.lineNum,
+  (newVal) => {
+    if (newVal <= 0) {
+      console.error('lineNum must greater than 0')
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+onBeforeMount(() => {
+  const { lineNum, viewmore, modelValue } = props
+  contentLineNum.value = viewmore && !modelValue ? lineNum : 0
+})
+
+function updateChange(activeNames: string | string[] | boolean) {
+  emit('update:modelValue', activeNames)
+  emit('change', {
+    value: activeNames
+  })
+}
+
+function toggle(name: string, expanded: boolean) {
+  const { accordion, modelValue } = props
+  if (accordion) {
+    updateChange(name === modelValue ? '' : name)
+  } else if (expanded) {
+    updateChange((modelValue as string[]).concat(name))
+  } else {
+    updateChange((modelValue as string[]).filter((activeName) => activeName !== name))
+  }
+}
+
+/**
+ * 切换所有面板展开状态，传 true 为全部展开，false 为全部收起，不传参为全部切换
+ * @param options 面板状态
+ */
+const toggleAll = (options: CollapseToggleAllOptions = {}) => {
+  if (props.accordion) {
+    return
+  }
+  if (isBoolean(options)) {
+    options = { expanded: options }
+  }
+
+  const { expanded, skipDisabled } = options
+  const names: string[] = []
+  children.forEach((item, index) => {
+    if (item.disabled && skipDisabled) {
+      if (item.$.exposed!.getExpanded()) {
+        names.push(item.name || index)
+      }
+    } else if (isDef(expanded) ? expanded : !item.$.exposed!.getExpanded()) {
+      names.push(item.name || index)
+    }
+  })
+  updateChange(names)
+}
+
+/**
+ * 查看更多点击
+ */
+function handleMore() {
+  emit('update:modelValue', !props.modelValue)
+  emit('change', {
+    value: !props.modelValue
+  })
+}
+
+defineExpose<CollapseExpose>({
+  toggleAll
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts b/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
new file mode 100644
index 0000000..2b07859
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-config-provider/types.ts
@@ -0,0 +1,1047 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { makeStringProp, baseProps } from '../common/props'
+
+export type ConfigProviderTheme = 'light' | 'dark'
+
+export const configProviderProps = {
+  ...baseProps,
+  /**
+   * 主题风格，设置为 dark 来开启深色模式，全局生效
+   */
+  theme: makeStringProp<ConfigProviderTheme>('light'),
+  /**
+   * 自定义主题变量
+   */
+  themeVars: {
+    type: Object as PropType<ConfigProviderThemeVars>,
+    default: () => ({})
+  }
+}
+
+export type ConfigProviderProps = ExtractPropTypes<typeof configProviderProps>
+
+export type baseThemeVars = {
+  colorTheme?: string // 主题色
+  colorWhite?: string // 用于mix的白色
+  colorBlack?: string // 用于mix的黑色
+  colorSuccess?: string // 成功色
+  colorWarning?: string // 警告色
+  colorDanger?: string // 危险出错色
+  colorPurple?: string // 紫色
+  colorYellow?: string // 黄色
+  colorBlue?: string // 蓝色
+  colorInfo?: string // 信息色
+  colorGray1?: string // 灰色1
+  colorGray2?: string // 灰色2
+  colorGray3?: string // 灰色3
+  colorGray4?: string // 灰色4
+  colorGray5?: string // 灰色5
+  colorGray6?: string // 灰色6
+  colorGray7?: string // 灰色7
+  colorGray8?: string // 灰色8
+  fontGray1?: string // 字体灰色1
+  fontGray2?: string // 字体灰色2
+  fontGray3?: string // 字体灰色3
+  fontGray4?: string // 字体灰色4
+  fontWhite1?: string // 字体白色1
+  fontWhite2?: string // 字体白色2
+  fontWhite3?: string // 字体白色3
+  fontWhite4?: string // 字体白色4
+  colorTitle?: string // 模块标题/重要正文
+  colorContent?: string // 普通正文
+  colorSecondary?: string // 次要信息，注释/补充/正文
+  colorAid?: string // 辅助文字字号，弱化信息，引导性/不可点文字
+  colorTip?: string // 失效、默认提示文字
+  colorBorder?: string // 控件边框线
+  colorBorderLight?: string // 分割线颜色
+  colorBg?: string // 背景色、禁用填充色
+  darkBackground?: string // 深色背景1
+  darkBackground2?: string // 深色背景2
+  darkBackground3?: string // 深色背景3
+  darkBackground4?: string // 深色背景4
+  darkBackground5?: string // 深色背景5
+  darkBackground6?: string // 深色背景6
+  darkBackground7?: string // 深色背景7
+  darkColor?: string // 深色字体1
+  darkColor2?: string // 深色字体2
+  darkColor3?: string // 深色字体3
+  darkColorGray?: string // 深色灰色
+  darkBorderColor?: string // 深色边框颜色
+  colorIcon?: string // icon颜色
+  colorIconActive?: string // icon颜色hover
+  colorIconDisabled?: string // icon颜色disabled
+  fsBig?: string // 大型标题字号
+  fsImportant?: string // 重要数据字号
+  fsTitle?: string // 标题字号/重要正文字号
+  fsContent?: string // 普通正文字号
+  fsSecondary?: string // 次要信息字号
+  fsAid?: string // 辅助文字字号
+  fwMedium?: string // 字重500
+  fwSemibold?: string // 字重600
+  sizeSidePadding?: string // 屏幕两边留白padding
+}
+
+export type actionSheetThemeVars = {
+  actionSheetWeight?: string
+  actionSheetRadius?: string
+  actionSheetLoadingSize?: string
+  actionSheetActionHeight?: string
+  actionSheetColor?: string
+  actionSheetFs?: string
+  actionSheetActiveColor?: string
+  actionSheetSubnameFs?: string
+  actionSheetSubnameColor?: string
+  actionSheetDisabledColor?: string
+  actionSheetBg?: string
+  actionSheetTitleHeight?: string
+  actionSheetTitleFs?: string
+  actionSheetCloseFs?: string
+  actionSheetCloseColor?: string
+  actionSheetCloseTop?: string
+  actionSheetCloseRight?: string
+  actionSheetCancelColor?: string
+  actionSheetCancelHeight?: string
+  actionSheetCancelBg?: string
+  actionSheetCancelRadius?: string
+  actionSheetPanelPadding?: string
+  actionSheetPanelImgFs?: string
+  actionSheetPanelImgRadius?: string
+}
+
+export type badgeThemeVars = {
+  badgeBg?: string
+  badgeColor?: string
+  badgeFs?: string
+  badgePadding?: string
+  badgeHeight?: string
+  badgePrimary?: string
+  badgeSuccess?: string
+  badgeWarning?: string
+  badgeDanger?: string
+  badgeInfo?: string
+  badgeDotSize?: string
+  badgeBorder?: string
+}
+
+export type buttonThemeVars = {
+  buttonDisabledOpacity?: string
+  buttonSmallHeight?: string
+  buttonSmallPadding?: string
+  buttonSmallFs?: string
+  buttonSmallRadius?: string
+  buttonSmallLoading?: string
+  buttonMediumHeight?: string
+  buttonMediumPadding?: string
+  buttonMediumFs?: string
+  buttonMediumRadius?: string
+  buttonMediumLoading?: string
+  buttonMediumBoxShadowSize?: string
+  buttonLargeHeight?: string
+  buttonLargePadding?: string
+  buttonLargeFs?: string
+  buttonLargeRadius?: string
+  buttonLargeLoading?: string
+  buttonLargeBoxShadowSize?: string
+  buttonIconFs?: string
+  buttonIconSize?: string
+  buttonIconColor?: string
+  buttonIconDisabledColor?: string
+  buttonNormalColor?: string
+  buttonNormalDisabledColor?: string
+  buttonPlainBgColor?: string
+  buttonPrimaryColor?: string
+  buttonPrimaryBgColor?: string
+  buttonSuccessColor?: string
+  buttonSuccessBgColor?: string
+  buttonInfoColor?: string
+  buttonInfoBgColor?: string
+  buttonInfoPlainBorderColor?: string
+  buttonInfoPlainNormalColor?: string
+  buttonWarningColor?: string
+  buttonWarningBgColor?: string
+  buttonErrorColor?: string
+  buttonErrorBgColor?: string
+  buttonTextHoverOpacity?: string
+}
+
+export type cellThemeVars = {
+  cellPadding?: string
+  cellLineHeight?: string
+  cellGroupTitleFs?: string
+  cellGroupPadding?: string
+  cellGroupTitleColor?: string
+  cellGroupValueFs?: string
+  cellGroupValueColor?: string
+  cellWrapperPadding?: string
+  cellWrapperPaddingLarge?: string
+  cellWrapperPaddingWithLabel?: string
+  cellIconRight?: string
+  cellIconSize?: string
+  cellTitleFs?: string
+  cellTitleColor?: string
+  cellLabelFs?: string
+  cellLabelColor?: string
+  cellValueFs?: string
+  cellValueColor?: string
+  cellArrowSize?: string
+  cellArrowColor?: string
+  cellClearColor?: string
+  cellTapBg?: string
+  cellTitleFsLarge?: string
+  cellLabelFsLarge?: string
+  cellIconSizeLarge?: string
+  cellRequiredColor?: string
+  cellRequiredSize?: string
+  cellVerticalTop?: string
+}
+
+export type calendarThemeVars = {
+  calendarFs?: string
+  calendarPanelPadding?: string
+  calendarPanelTitleFs?: string
+  calendarPanelTitleColor?: string
+  calendarWeekColor?: string
+  calendarWeekHeight?: string
+  calendarWeekFs?: string
+  calendarDayFs?: string
+  calendarDayColor?: string
+  calendarDayFw?: string
+  calendarDayHeight?: string
+  calendarMonthWidth?: string
+  calendarActiveColor?: string
+  calendarSelectedColor?: string
+  calendarDisabledColor?: string
+  calendarRangeColor?: string
+  calendarActiveBorder?: string
+  calendarInfoFs?: string
+  calendarItemMarginBottom?: string
+}
+
+export type checkboxThemeVars = {
+  checkboxMargin?: string
+  checkboxBg?: string
+  checkboxLabelMargin?: string
+  checkboxSize?: string
+  checkboxIconSize?: string
+  checkboxBorderColor?: string
+  checkboxCheckColor?: string
+  checkboxLabelFs?: string
+  checkboxLabelColor?: string
+  checkboxCheckedColor?: string
+  checkboxDisabledColor?: string
+  checkboxDisabledLabelColor?: string
+  checkboxDisabledCheckColor?: string
+  checkboxDisabledCheckBg?: string
+  checkboxSquareRadius?: string
+  checkboxLargeSize?: string
+  checkboxLargeLabelFs?: string
+  checkboxButtonHeight?: string
+  checkboxButtonMinWidth?: string
+  checkboxButtonRadius?: string
+  checkboxButtonBg?: string
+  checkboxButtonFontSize?: string
+  checkboxButtonBorder?: string
+  checkboxButtonDisabledBorder?: string
+}
+
+export type collapseThemeVars = {
+  collapseSidePadding?: string
+  collapseBodyPadding?: string
+  collapseHeaderPadding?: string
+  collapseTitleColor?: string
+  collapseTitleFs?: string
+  collapseArrowSize?: string
+  collapseArrowColor?: string
+  collapseBodyFs?: string
+  collapseBodyColor?: string
+  collapseDisabledColor?: string
+  collapseRetractFs?: string
+  collapseMoreColor?: string
+}
+
+export type dividerThemeVars = {
+  dividerPadding?: string
+  dividerMargin?: string
+  dividerColor?: string
+  dividerLineColor?: string
+  dividerLineHeight?: string
+  dividerFs?: string
+  dividerContentLeftWidth?: string
+  dividerContentLeftMargin?: string
+  dividerContentRightMargin?: string
+  dividerContentRightWidth?: string
+  dividerVerticalHeight?: string
+  dividerVerticalContentMargin?: string
+  dividerVerticalLineWidth?: string
+}
+
+export type dropMenuThemeVars = {
+  dropMenuHeight?: string
+  dropMenuColor?: string
+  dropMenuFs?: string
+  dropMenuArrowFs?: string
+  dropMenuSidePadding?: string
+  dropMenuDisabledColor?: string
+  dropMenuItemHeight?: string
+  dropMenuItemColor?: string
+  dropMenuItemFs?: string
+  dropMenuItemColorActive?: string
+  dropMenuItemColorTip?: string
+  dropMenuItemFsTip?: string
+  dropMenuOptionCheckSize?: string
+  dropMenuLineColor?: string
+  dropMenuLineHeight?: string
+}
+
+export type inputNumberThemeVars = {
+  inputNumberColor?: string
+  inputNumberBorderColor?: string
+  inputNumberDisabledColor?: string
+  inputNumberHeight?: string
+  inputNumberBtnWidth?: string
+  inputNumberInputWidth?: string
+  inputNumberRadius?: string
+  inputNumberFs?: string
+  inputNumberIconSize?: string
+  inputNumberIconColor?: string
+}
+
+export type inputThemeVars = {
+  inputPadding?: string
+  inputBorderColor?: string
+  inputNotEmptyBorderColor?: string
+  inputFs?: string
+  inputFsLarge?: string
+  inputIconMargin?: string
+  inputColor?: string
+  inputPlaceholderColor?: string
+  inputDisabledColor?: string
+  inputErrorColor?: string
+  inputIconColor?: string
+  inputClearColor?: string
+  inputCountColor?: string
+  inputCountCurrentColor?: string
+  inputBg?: string
+  inputCellBg?: string
+  inputCellBorderColor?: string
+  inputCellPadding?: string
+  inputCellPaddingLarge?: string
+  inputCellHeight?: string
+  inputCellLabelWidth?: string
+  inputInnerHeight?: string
+  inputInnerHeightNoBorder?: string
+  inputCountFs?: string
+  inputCountFsLarge?: string
+  inputIconSize?: string
+  inputIconSizeLarge?: string
+}
+
+export type textareaThemeVars = {
+  textareaPadding?: string
+  textareaBorderColor?: string
+  textareaNotEmptyBorderColor?: string
+  textareaFs?: string
+  textareaFsLarge?: string
+  textareaIconMargin?: string
+  textareaColor?: string
+  textareaIconColor?: string
+  textareaClearColor?: string
+  textareaCountColor?: string
+  textareaCountCurrentColor?: string
+  textareaBg?: string
+  textareaCellBorderColor?: string
+  textareaCellPadding?: string
+  textareaCellPaddingLarge?: string
+  textareaCellHeight?: string
+  textareaCountFs?: string
+  textareaCountFsLarge?: string
+  textareaIconSize?: string
+  textareaIconSizeLarge?: string
+}
+
+export type loadmoreThemeVars = {
+  loadmoreHeight?: string
+  loadmoreColor?: string
+  loadmoreFs?: string
+  loadmoreErrorColor?: string
+  loadmoreRefreshFs?: string
+  loadmoreLoadingSize?: string
+}
+
+export type messageBoxThemeVars = {
+  messageBoxWidth?: string
+  messageBoxBg?: string
+  messageBoxRadius?: string
+  messageBoxPadding?: string
+  messageBoxTitleFs?: string
+  messageBoxTitleColor?: string
+  messageBoxContentFs?: string
+  messageBoxContentColor?: string
+  messageBoxContentMaxHeight?: string
+  messageBoxContentScrollbarWidth?: string
+  messageBoxContentScrollbarColor?: string
+  messageBoxInputErrorColor?: string
+}
+
+export type noticeBarThemeVars = {
+  noticeBarFs?: string
+  noticeBarLineHeight?: string
+  noticeBarBorderRadius?: string
+  noticeBarPadding?: string
+  noticeBarWarningBg?: string
+  noticeBarInfoBg?: string
+  noticeBarDangerBg?: string
+  noticeBarWarningColor?: string
+  noticeBarInfoColor?: string
+  noticeBarDangerColor?: string
+  noticeBarPrefixSize?: string
+  noticeBarCloseBg?: string
+  noticeBarCloseSize?: string
+  noticeBarCloseColor?: string
+  noticeBarWrapPadding?: string
+}
+
+export type paginationThemeVars = {
+  paginationContentPadding?: string
+  paginationMessagePadding?: string
+  paginationMessageFs?: string
+  paginationMessageColor?: string
+  paginationNavBorder?: string
+  paginationNavBorderRadius?: string
+  paginationNavFs?: string
+  paginationNavWidth?: string
+  paginationNavColor?: string
+  paginationNavContentFs?: string
+  paginationNavSepatatorPadding?: string
+  paginationNavCurrentColor?: string
+  paginationIconSize?: string
+}
+
+export type pickerThemeVars = {
+  pickerToolbarHeight?: string
+  pickerActionHeight?: string
+  pickerToolbarFinishColor?: string
+  pickerToolbarCancelColor?: string
+  pickerToolbarFs?: string
+  pickerToolbarTitleColor?: string
+  pickerColumnFs?: string
+  pickerBg?: string
+  pickerColumnActiveFs?: string
+  pickerColumnColor?: string
+  pickerColumnHeight?: string
+  pickerColumnItemHeight?: string
+  pickerColumnSelectBg?: string
+  pickerLoadingButtonColor?: string
+  pickerColumnPadding?: string
+  pickerColumnDisabledColor?: string
+  pickerMask?: string
+  pickerLoadingBg?: string
+  pickerRegionSeparatorColor?: string
+  pickerCellArrowSizeLarge?: string
+  pickerRegionColor?: string
+  pickerRegionBgActiveColor?: string
+  pickerRegionFs?: string
+}
+
+export type colPickerThemeVars = {
+  colPickerSelectedHeight?: string
+  colPickerSelectedPadding?: string
+  colPickerSelectedFs?: string
+  colPickerSelectedColor?: string
+  colPickerSelectedFw?: string
+  colPickerLineWidth?: string
+  colPickerLineHeight?: string
+  colPickerLineColor?: string
+  colPickerLineBoxShadow?: string
+  colPickerListHeight?: string
+  colPickerListPaddingBottom?: string
+  colPickerListColor?: string
+  colPickerListColorDisabled?: string
+  colPickerListColorTip?: string
+  colPickerListFs?: string
+  colPickerListFsTip?: string
+  colPickerListItemPadding?: string
+  colPickerListCheckedIconSize?: string
+  colPickerListColorChecked?: string
+}
+
+export type overlayThemeVars = {
+  overlayBg?: string
+  overlayBgDark?: string
+}
+
+export type popupThemeVars = {
+  popupCloseSize?: string
+  popupCloseColor?: string
+}
+
+export type progressThemeVars = {
+  progressPadding?: string
+  progressBg?: string
+  progressDangerColor?: string
+  progressSuccessColor?: string
+  progressWarningColor?: string
+  progressColor?: string
+  progressHeight?: string
+  progressLabelColor?: string
+  progressLabelFs?: string
+  progressIconFs?: string
+}
+
+export type radioThemeVars = {
+  radioMargin?: string
+  radioLabelMargin?: string
+  radioSize?: string
+  radioBg?: string
+  radioLabelFs?: string
+  radioLabelColor?: string
+  radioCheckedColor?: string
+  radioDisabledColor?: string
+  radioDisabledLabelColor?: string
+  radioLargeSize?: string
+  radioLargeLabelFs?: string
+  radioButtonHeight?: string
+  radioButtonMinWidth?: string
+  radioButtonMaxWidth?: string
+  radioButtonRadius?: string
+  radioButtonBg?: string
+  radioButtonFs?: string
+  radioButtonBorder?: string
+  radioButtonDisabledBorder?: string
+  radioDotSize?: string
+  radioDotLargeSize?: string
+  radioDotCheckedBg?: string
+  radioDotCheckedBorderColor?: string
+  radioDotBorderColor?: string
+  radioDotDisabledBorder?: string
+  radioDotDisabledBg?: string
+}
+
+export type searchThemeVars = {
+  searchSidePadding?: string
+  searchPadding?: string
+  searchInputRadius?: string
+  searchInputBg?: string
+  searchInputHeight?: string
+  searchInputPadding?: string
+  searchInputFs?: string
+  searchInputColor?: string
+  searchIconColor?: string
+  searchIconSize?: string
+  searchClearIconSize?: string
+  searchPlaceholderColor?: string
+  searchCancelPadding?: string
+  searchCancelFs?: string
+  searchCancelColor?: string
+  searchLightBg?: string
+}
+
+export type sliderThemeVars = {
+  sliderFs?: string
+  sliderHandleRadius?: string
+  sliderHandleBg?: string
+  sliderAxieHeight?: string
+  sliderColor?: string
+  sliderAxieBg?: string
+  sliderLineColor?: string
+  sliderDisabledColor?: string
+}
+
+export type sortButtonThemeVars = {
+  sortButtonFs?: string
+  sortButtonColor?: string
+  sortButtonHeight?: string
+  sortButtonLineHeight?: string
+  sortButtonLineColor?: string
+}
+
+export type stepsThemeVars = {
+  stepsIconSize?: string
+  stepsInactiveColor?: string
+  stepsFinishedColor?: string
+  stepsIconTextFs?: string
+  stepsErrorColor?: string
+  stepsTitleFs?: string
+  stepsTitleFw?: string
+  stepsLabelFs?: string
+  stepsDescriptionColor?: string
+  stepsIsIconWidth?: string
+  stepsLineColor?: string
+  stepsDotSize?: string
+  stepsDotActiveSize?: string
+}
+
+export type switchThemeVars = {
+  switchSize?: string
+  switchWidth?: string
+  switchHeight?: string
+  switchCircleSize?: string
+  switchBorderColor?: string
+  switchActiveColor?: string
+  switchActiveShadowColor?: string
+  switchInactiveColor?: string
+  switchInactiveShadowColor?: string
+}
+
+export type tabsThemeVars = {
+  tabsNavArrowFs?: string
+  tabsNavArrowOpenFs?: string
+  tabsNavWidth?: string
+  tabsNavHeight?: string
+  tabsNavFs?: string
+  tabsNavColor?: string
+  tabsNavBg?: string
+  tabsNavActiveColor?: string
+  tabsNavDisabledColor?: string
+  tabsNavLineHeight?: string
+  tabsNavLineWidth?: string
+  tabsNavLineBgColor?: string
+  tabsNavMapFs?: string
+  tabsNavMapColor?: string
+  tabsNavMapArrowColor?: string
+  tabsNavMapBtnBeforeBg?: string
+  tabsNavMapButtonBackColor?: string
+  tabsNavMapButtonRadius?: string
+  tabsNavMapModalBg?: string
+}
+
+export type tagThemeVars = {
+  tagFs?: string
+  tagColor?: string
+  tagSmallFs?: string
+  tagInfoColor?: string
+  tagPrimaryColor?: string
+  tagDangerColor?: string
+  tagWarningColor?: string
+  tagSuccessColor?: string
+  tagInfoBg?: string
+  tagPrimaryBg?: string
+  tagDangerBg?: string
+  tagWarningBg?: string
+  tagSuccessBg?: string
+  tagRoundColor?: string
+  tagRoundBorderColor?: string
+  tagRoundRadius?: string
+  tagMarkRadius?: string
+  tagCloseSize?: string
+  tagCloseColor?: string
+  tagCloseActiveColor?: string
+}
+
+export type toastThemeVars = {
+  toastPadding?: string
+  toastMaxWidth?: string
+  toastRadius?: string
+  toastBg?: string
+  toastFs?: string
+  toastWithIconMinWidth?: string
+  toastIconSize?: string
+  toastIconMarginRight?: string
+  toastIconMarginBottom?: string
+  toastLoadingPadding?: string
+  toastBoxShadow?: string
+}
+
+export type loadingThemeVars = {
+  loadingSize?: string
+}
+
+export type tooltipThemeVars = {
+  tooltipBg?: string
+  tooltipColor?: string
+  tooltipRadius?: string
+  tooltipArrowSize?: string
+  tooltipFs?: string
+  tooltipBlur?: string
+  tooltipPadding?: string
+  tooltipCloseSize?: string
+  tooltipZIndex?: string
+  tooltipLineHeight?: string
+}
+
+export type popoverThemeVars = {
+  popoverBg?: string
+  popoverColor?: string
+  popoverBoxShadow?: string
+  popoverArrowBoxShadow?: string
+  popoverBorderColor?: string
+  popoverRadius?: string
+  popoverArrowSize?: string
+  popoverFs?: string
+  popoverPadding?: string
+  popoverLineHeight?: string
+  popoverZIndex?: string
+}
+
+export type gridItemThemeVars = {
+  gridItemFs?: string
+  gridItemBg?: string
+  gridItemPadding?: string
+  gridItemBorderColor?: string
+  gridItemHoverBg?: string
+  gridItemHoverBgDark?: string
+}
+
+export type statustipThemeVars = {
+  statustipFs?: string
+  statustipColor?: string
+  statustipLineHeight?: string
+  statustipPadding?: string
+}
+
+export type cardThemeVars = {
+  cardBg?: string
+  cardFs?: string
+  cardPadding?: string
+  cardFooterPadding?: string
+  cardShadowColor?: string
+  cardRadius?: string
+  cardLineHeight?: string
+  cardMargin?: string
+  cardTitleColor?: string
+  cardTitleFs?: string
+  cardContentBorderColor?: string
+  cardRectangleTitlePadding?: string
+  cardRectangleContentPadding?: string
+  cardRectangleFooterPadding?: string
+  cardContentColor?: string
+  cardContentLineHeight?: string
+  cardContentMargin?: string
+  cardContentRectangleMargin?: string
+}
+
+export type uploadThemeVars = {
+  uploadSize?: string
+  uploadEvokeIconSize?: string
+  uploadEvokeBg?: string
+  uploadEvokeColor?: string
+  uploadEvokeDisabledColor?: string
+  uploadCloseIconSize?: string
+  uploadCloseIconColor?: string
+  uploadProgressFs?: string
+  uploadFileFs?: string
+  uploadFileColor?: string
+  uploadPreviewNameFs?: string
+  uploadPreviewIconSize?: string
+  uploadPreviewNameBg?: string
+  uploadPreviewNameHeight?: string
+  uploadCoverIconSize?: string
+}
+
+export type curtainThemeVars = {
+  curtainContentRadius?: string
+  curtainContentCloseColor?: string
+  curtainContentCloseFs?: string
+}
+
+export type notifyThemeVars = {
+  notifyTextColor?: string
+  notifyPadding?: string
+  notifyFontSize?: string
+  notifyLineHeight?: string
+  notifyPrimaryBackground?: string
+  notifySuccessBackground?: string
+  notifyDangerBackground?: string
+  notifyWarningBackground?: string
+}
+
+export type skeletonThemeVars = {
+  skeletonBackgroundColor?: string
+  skeletonAnimationGradient?: string
+  skeletonAnimationFlashed?: string
+  skeletonTextHeightDefault?: string
+  skeletonRectHeightDefault?: string
+  skeletonCircleHeightDefault?: string
+  skeletonRowMarginBottom?: string
+  skeletonBorderRadiusText?: string
+  skeletonBorderRadiusRect?: string
+  skeletonBorderRadiusCircle?: string
+}
+
+export type circleThemeVars = {
+  circleTextColor?: string
+}
+
+export type swiperThemeVars = {
+  swiperRadius?: string
+  swiperItemPadding?: string
+  swiperItemTextColor?: string
+  swiperItemTextFs?: string
+}
+
+export type swiperNavThemeVars = {
+  swiperNavDotColor?: string
+  swiperNavDotActiveColor?: string
+  swiperNavDotSize?: string
+  swiperNavDotsBarActiveWidth?: string
+  swiperNavFractionColor?: string
+  swiperNavFractionBgColor?: string
+  swiperNavFractionHeight?: string
+  swiperNavFractionFontSize?: string
+  swiperNavBtnColor?: string
+  swiperNavBtnBgColor?: string
+  swiperNavBtnSize?: string
+}
+
+export type segmentedThemeVars = {
+  segmentedPadding?: string
+  segmentedItemBgColor?: string
+  segmentedItemColor?: string
+  segmentedItemAcitveBg?: string
+  segmentedItemDisabledColor?: string
+}
+
+export type tabbarThemeVars = {
+  tabbarHeight?: string
+  tabbarBoxShadow?: string
+}
+
+export type tabbarItemThemeVars = {
+  tabbarItemTitleFontSize?: string
+  tabbarItemTitleLineHeight?: string
+  tabbarInactiveColor?: string
+  tabbarActiveColor?: string
+  tabbarItemIconSize?: string
+}
+
+export type navbarThemeVars = {
+  navbarHeight?: string
+  navbarColor?: string
+  navbarBackground?: string
+  navbarArrowSize?: string
+  navbarDescFontSize?: string
+  navbarDescFontColor?: string
+  navbarTitleFontSize?: string
+  navbarTitleFontWeight?: string
+  navbarDisabledOpacity?: string
+  navbarHoverColor?: string
+}
+
+export type navbarCapsuleThemeVars = {
+  navbarCapsuleBorderColor?: string
+  navbarCapsuleBorderRadius?: string
+  navbarCapsuleWidth?: string
+  navbarCapsuleHeight?: string
+  navbarCapsuleIconSize?: string
+}
+
+export type tableThemeVars = {
+  tableColor?: string
+  tableBg?: string
+  tableStripeBg?: string
+  tableBorderColor?: string
+  tableFontSize?: string
+}
+
+export type sidebarThemeVars = {
+  sidebarBg?: string
+  sidebarWidth?: string
+  sidebarHeight?: string
+}
+
+export type sidebarItemThemeVars = {
+  sidebarColor?: string
+  sidebarItemHeight?: string
+  sidebarItemLineHeight?: string
+  sidebarDisabledColor?: string
+  sidebarActiveColor?: string
+  sidebarActiveBg?: string
+  sidebarHoverBg?: string
+  sidebarBorderRadius?: string
+  sidebarFontSize?: string
+  sidebarIconSize?: string
+  sidebarActiveBorderWidth?: string
+  sidebarActiveBorderHeight?: string
+}
+
+export type fabThemeVars = {
+  fabTriggerHeight?: string
+  fabTriggerWidth?: string
+  fabActionsPadding?: string
+  fabIconFs?: string
+}
+
+export type countDownThemeVars = {
+  countDownTextColor?: string
+  countDownFontSize?: string
+  countDownLineHeight?: string
+}
+
+export type keyboardThemeVars = {
+  keyboardKeyHeight?: string
+  keyboardKeyFontSize?: string
+  keyboardKeyBackground?: string
+  keyboardKeyBorderRadius?: string
+  keyboardDeleteFontSize?: string
+  keyboardKeyActiveColor?: string
+  keyboardButtonTextColor?: string
+  keyboardButtonBackground?: string
+  keyboardButtonActiveOpacity?: string
+  keyboardBackground?: string
+  keyboardTitleHeight?: string
+  keyboardTitleColor?: string
+  keyboardTitleFontSize?: string
+  keyboardClosePadding?: string
+  keyboardCloseColor?: string
+  keyboardCloseFontSize?: string
+  keyboardIconSize?: string
+}
+
+export type numberKeyboardThemeVars = {
+  numberKeyboardKeyHeight?: string
+  numberKeyboardKeyFontSize?: string
+  numberKeyboardKeyBackground?: string
+  numberKeyboardKeyBorderRadius?: string
+  numberKeyboardDeleteFontSize?: string
+  numberKeyboardKeyActiveColor?: string
+  numberKeyboardButtonTextColor?: string
+  numberKeyboardButtonBackground?: string
+  numberKeyboardButtonActiveOpacity?: string
+  numberKeyboardBackground?: string
+  numberKeyboardTitleHeight?: string
+  numberKeyboardTitleColor?: string
+  numberKeyboardTitleFontSize?: string
+  numberKeyboardClosePadding?: string
+  numberKeyboardCloseColor?: string
+  numberKeyboardCloseFontSize?: string
+  numberKeyboardIconSize?: string
+}
+
+export type passwodInputThemeVars = {
+  passwordInputHeight?: string
+  passwordInputMargin?: string
+  passwordInputFontSize?: string
+  passwordInputRadius?: string
+  passwordInputBackground?: string
+  passwordInputInfoColor?: string
+  passwordInputInfoFontSize?: string
+  passwordInputBorderColor?: string
+  passwordInputErrorInfoColor?: string
+  passwordInputDotSize?: string
+  passwordInputDotColor?: string
+  passwordInputTextColor?: string
+  passwordInputCursorColor?: string
+  passwordInputCursorWidth?: string
+  passwordInputCursorHeight?: string
+  passwordInputCursorDuration?: string
+}
+
+export type formItemThemeVars = {
+  formItemErrorMessageColor?: string
+  formItemErrorMessageFontSize?: string
+  formItemErrorMessageLineHeight?: string
+}
+
+export type backtopThemeVars = {
+  backtopBg?: string
+  backtopIconSize?: string
+}
+
+export type indexBarThemeVars = {
+  indexBarIndexFontSize?: string
+}
+
+export type textThemeVars = {
+  textInfoColor?: string
+  textPrimaryColor?: string
+  textErrorColor?: string
+  textWarningColor?: string
+  textSuccessColor?: string
+}
+
+export type videoPreviewThemeVars = {
+  videoPreviewBg?: string
+  videoPreviewCloseColor?: string
+  videoPreviewCloseFontSize?: string
+}
+
+export type imgCropperThemeVars = {
+  imgCropperIconSize?: string
+  imgCropperIconColor?: string
+}
+
+export type floatingPanelThemeVars = {
+  floatingPanelBg?: string
+  floatingPanelRadius?: string
+  floatingPanelZIndex?: string
+  floatingPanelHeaderHeight?: string
+  floatingPanelBarWidth?: string
+  floatingPanelBarHeight?: string
+  floatingPanelBarBg?: string
+  floatingPanelBarRadius?: string
+  floatingPanelContentBg?: string
+}
+
+export type signatureThemeVars = {
+  signatureBg?: string
+  signatureRadius?: string
+  signatureBorder?: string
+  signatureFooterMarginTop?: string
+  signatureButtonMarginLeft?: string
+}
+
+export type ConfigProviderThemeVars = baseThemeVars &
+  actionSheetThemeVars &
+  badgeThemeVars &
+  buttonThemeVars &
+  cellThemeVars &
+  calendarThemeVars &
+  checkboxThemeVars &
+  collapseThemeVars &
+  dividerThemeVars &
+  dropMenuThemeVars &
+  inputNumberThemeVars &
+  inputThemeVars &
+  textareaThemeVars &
+  loadmoreThemeVars &
+  messageBoxThemeVars &
+  noticeBarThemeVars &
+  paginationThemeVars &
+  pickerThemeVars &
+  colPickerThemeVars &
+  overlayThemeVars &
+  popupThemeVars &
+  progressThemeVars &
+  radioThemeVars &
+  searchThemeVars &
+  sliderThemeVars &
+  sortButtonThemeVars &
+  stepsThemeVars &
+  switchThemeVars &
+  tabsThemeVars &
+  tagThemeVars &
+  toastThemeVars &
+  loadingThemeVars &
+  tooltipThemeVars &
+  popoverThemeVars &
+  gridItemThemeVars &
+  statustipThemeVars &
+  cardThemeVars &
+  uploadThemeVars &
+  curtainThemeVars &
+  notifyThemeVars &
+  skeletonThemeVars &
+  circleThemeVars &
+  swiperThemeVars &
+  swiperNavThemeVars &
+  segmentedThemeVars &
+  tabbarThemeVars &
+  tabbarItemThemeVars &
+  navbarThemeVars &
+  navbarCapsuleThemeVars &
+  tableThemeVars &
+  sidebarThemeVars &
+  sidebarItemThemeVars &
+  fabThemeVars &
+  countDownThemeVars &
+  keyboardThemeVars &
+  numberKeyboardThemeVars &
+  passwodInputThemeVars &
+  formItemThemeVars &
+  backtopThemeVars &
+  indexBarThemeVars &
+  textThemeVars &
+  videoPreviewThemeVars &
+  imgCropperThemeVars &
+  floatingPanelThemeVars &
+  signatureThemeVars
diff --git a/src/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue b/src/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue
new file mode 100644
index 0000000..482980b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue
@@ -0,0 +1,82 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-06-13 11:34:35
+ * @LastEditTime: 2025-04-28 22:26:25
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-config-provider/wd-config-provider.vue
+ * 记得注释
+-->
+<template>
+  <view :class="themeClass" :style="themeStyle">
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-config-provider',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { configProviderProps } from './types'
+import { objToStyle } from '../common/util'
+
+const props = defineProps(configProviderProps)
+
+const themeClass = computed(() => {
+  return `wot-theme-${props.theme} ${props.customClass}`
+})
+
+const themeStyle = computed(() => {
+  const styleObj = mapThemeVarsToCSSVars(props.themeVars)
+  return styleObj ? `${objToStyle(styleObj)}${props.customStyle}` : props.customStyle
+})
+
+const kebabCase = (str: string): string => {
+  str = str.replace(str.charAt(0), str.charAt(0).toLocaleLowerCase())
+  return str.replace(/([a-z])([A-Z])/g, (_, p1, p2) => p1 + '-' + p2.toLowerCase())
+}
+const colorRgb = (str: string) => {
+  if (!str) return
+  var sColor = str.toLowerCase()
+  //十六进制颜色值的正则表达式
+  var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/
+  // 如果是16进制颜色
+  if (sColor && reg.test(sColor)) {
+    if (sColor.length === 4) {
+      var sColorNew = '#'
+      for (let i = 1; i < 4; i += 1) {
+        sColorNew += sColor.slice(i, i + 1).concat(sColor.slice(i, i + 1))
+      }
+      sColor = sColorNew
+    }
+    //处理六位的颜色值
+    var sColorChange: number[] = []
+    for (let i = 1; i < 7; i += 2) {
+      sColorChange.push(parseInt('0x' + sColor.slice(i, i + 2)))
+    }
+    return sColorChange.join(',')
+  }
+  return null
+}
+
+const mapThemeVarsToCSSVars = (themeVars: Record<string, string>) => {
+  if (!themeVars) return
+  const cssVars: Record<string, string> = {}
+  Object.keys(themeVars).forEach((key) => {
+    cssVars[`--wot-${kebabCase(key)}`] = themeVars[key]
+  })
+
+  return cssVars
+}
+</script>
+
+<style lang="scss" scoped></style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-count-down/index.scss b/src/uni_modules/wot-design-uni/components/wd-count-down/index.scss
new file mode 100644
index 0000000..c9b93f1
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-count-down/index.scss
@@ -0,0 +1,15 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(count-down) {
+    color: $-dark-color;
+  }
+}
+
+
+@include b(count-down) {
+  color: $-count-down-text-color;
+  font-size: $-count-down-font-size;
+  line-height: $-count-down-line-height;
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-count-down/types.ts b/src/uni_modules/wot-design-uni/components/wd-count-down/types.ts
new file mode 100644
index 0000000..7f1bdd7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-count-down/types.ts
@@ -0,0 +1,41 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export const countDownProps = {
+  ...baseProps,
+  /**
+   * 倒计时时长，单位毫秒
+   */
+  time: makeRequiredProp(Number),
+  /**
+   * 是否开启毫秒
+   */
+  millisecond: makeBooleanProp(false),
+  /**
+   * 格式化时间
+   */
+  format: makeStringProp('HH:mm:ss'),
+  /**
+   * 是否自动开始
+   */
+  autoStart: makeBooleanProp(true)
+}
+
+export type CountDownProps = ExtractPropTypes<typeof countDownProps>
+
+export type CountDownExpose = {
+  /**
+   * 开始倒计时
+   */
+  start: () => void
+  /**
+   * 暂停倒计时
+   */
+  pause: () => void
+  /**
+   * 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时
+   */
+  reset: () => void
+}
+
+export type CountDownInstance = ComponentPublicInstance<CountDownProps, CountDownExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-count-down/utils.ts b/src/uni_modules/wot-design-uni/components/wd-count-down/utils.ts
new file mode 100644
index 0000000..efa6200
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-count-down/utils.ts
@@ -0,0 +1,52 @@
+import { padZero } from '../common/util'
+
+export type TimeData = {
+  days: number
+  hours: number
+  minutes: number
+  seconds: number
+  milliseconds: number
+}
+
+export function parseFormat(format: string, timeData: TimeData): string {
+  const { days } = timeData
+  let { hours, minutes, seconds, milliseconds } = timeData
+
+  if (format.includes('DD')) {
+    format = format.replace('DD', padZero(days))
+  } else {
+    hours += days * 24
+  }
+
+  if (format.includes('HH')) {
+    format = format.replace('HH', padZero(hours))
+  } else {
+    minutes += hours * 60
+  }
+
+  if (format.includes('mm')) {
+    format = format.replace('mm', padZero(minutes))
+  } else {
+    seconds += minutes * 60
+  }
+
+  if (format.includes('ss')) {
+    format = format.replace('ss', padZero(seconds))
+  } else {
+    milliseconds += seconds * 1000
+  }
+
+  if (format.includes('S')) {
+    const ms = padZero(milliseconds, 3)
+
+    if (format.includes('SSS')) {
+      format = format.replace('SSS', ms)
+    } else if (format.includes('SS')) {
+      format = format.replace('SS', ms.slice(0, 2))
+    } else {
+      format = format.replace('S', ms.charAt(0))
+    }
+  }
+
+  return format
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-count-down/wd-count-down.vue b/src/uni_modules/wot-design-uni/components/wd-count-down/wd-count-down.vue
new file mode 100644
index 0000000..04c10f4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-count-down/wd-count-down.vue
@@ -0,0 +1,60 @@
+<template>
+  <view :class="`wd-count-down ${customClass}`" :style="customStyle">
+    <slot :current="current" v-if="$slots.default" />
+    <block v-else>{{ timeText }}</block>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-count-down',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { watch, computed, onMounted } from 'vue'
+import { parseFormat } from './utils'
+import { useCountDown } from '../composables/useCountDown'
+import { countDownProps, type CountDownExpose } from './types'
+
+const props = defineProps(countDownProps)
+
+const emit = defineEmits(['change', 'finish'])
+
+const { start, pause, reset, current } = useCountDown({
+  time: props.time,
+  millisecond: props.millisecond,
+  onChange: (current) => emit('change', current),
+  onFinish: () => emit('finish')
+})
+
+const timeText = computed(() => parseFormat(props.format, current.value))
+
+const resetTime = () => {
+  reset(props.time)
+  if (props.autoStart) {
+    start()
+  }
+}
+
+watch(() => props.time, resetTime, { immediate: false })
+
+onMounted(() => {
+  resetTime()
+})
+
+defineExpose<CountDownExpose>({
+  start,
+  pause,
+  reset: resetTime
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-count-to/index.scss b/src/uni_modules/wot-design-uni/components/wd-count-to/index.scss
new file mode 100644
index 0000000..0a96178
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-count-to/index.scss
@@ -0,0 +1,7 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+
+.wd-count-to{
+  vertical-align: bottom;
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-count-to/types.ts b/src/uni_modules/wot-design-uni/components/wd-count-to/types.ts
new file mode 100644
index 0000000..5cd17ee
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-count-to/types.ts
@@ -0,0 +1,117 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { TextType } from '../wd-text/types'
+
+export const countToProps = {
+  ...baseProps,
+
+  // 字体大小
+  fontSize: makeNumberProp(16),
+
+  // 文本颜色
+  color: makeStringProp(''),
+  /**
+   * 主题类型
+   * 类型：string
+   * 可选值：'default' /'primary' / 'error' / 'warning' / 'success'
+   * 默认值：'default'
+   */
+  type: makeStringProp<TextType>('default'),
+  /**
+   * 起始值
+   * 类型：number
+   * 默认值：0
+   */
+  startVal: makeNumberProp(0),
+
+  /**
+   * 最终值
+   * 类型：number
+   * 默认值：2021
+   */
+  endVal: makeNumberProp(2024),
+
+  /**
+   * 从起始值到结束值数字变动的时间，单位毫秒
+   * 类型：number
+   * 默认值：3000
+   */
+  duration: makeNumberProp(3000),
+  /**
+   * 是否自动开始
+   * 类型：boolean
+   * 默认值：true
+   */
+  autoStart: makeBooleanProp(true),
+  /**
+   * 保留的小数位数
+   * 类型：number
+   * 默认值：0
+   * 校验：大于等于0
+   */
+  decimals: {
+    type: Number,
+    required: false,
+    default: 0,
+    validator(value: number) {
+      return value >= 0
+    }
+  },
+
+  // 小数点
+  decimal: makeStringProp('.'),
+
+  // 三位三位的隔开效果
+  separator: makeStringProp(','),
+
+  /**
+   * 前缀
+   * 类型：string
+   * 默认值：''
+   * @example '¥' 人民币前缀
+   */
+  prefix: makeStringProp(''),
+
+  /**
+   * 后缀
+   * 类型：string
+   * 默认值：''
+   */
+  suffix: makeStringProp(''),
+
+  /**
+   * 是否具有连贯性
+   * 类型：boolean
+   * 默认值：true
+   */
+  useEasing: makeBooleanProp(true),
+
+  /**
+   * 自定义根节点样式
+   */
+  customStyle: makeStringProp(''),
+
+  /**
+   * 自定义根节点样式类
+   */
+  customClass: makeStringProp('')
+}
+
+export type CountDownProps = ExtractPropTypes<typeof countToProps>
+
+export type CountUpExpose = {
+  /**
+   * 开始倒计时
+   */
+  start: () => void
+  /**
+   * 暂停倒计时
+   */
+  pause: () => void
+  /**
+   * 重设倒计时，若 auto-start 为 true，重设后会自动开始倒计时
+   */
+  reset: () => void
+}
+
+export type CountToInstance = ComponentPublicInstance<CountDownProps, CountUpExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-count-to/wd-count-to.vue b/src/uni_modules/wot-design-uni/components/wd-count-to/wd-count-to.vue
new file mode 100644
index 0000000..b72f601
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-count-to/wd-count-to.vue
@@ -0,0 +1,125 @@
+<template>
+  <view :class="rootClass">
+    <!-- 前缀插槽 -->
+    <slot name="prefix">
+      <wd-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.prefix"></wd-text>
+    </slot>
+    <!-- 默认文本插槽 -->
+    <slot>
+      <wd-text :type="props.type" :color="props.color" :size="`${props.fontSize}px`" :text="timeText"></wd-text>
+    </slot>
+    <!-- 后缀插槽 -->
+    <slot name="suffix">
+      <wd-text :type="props.type" :color="props.color" :size="`${props.fontSize * 0.7}px`" :text="props.suffix"></wd-text>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-count-to',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdText from '../wd-text/wd-text.vue'
+import { computed, watch, onMounted } from 'vue'
+import { countToProps } from './types'
+import { easingFn, isNumber } from '../common/util'
+import { useCountDown } from '../composables/useCountDown'
+import type { CountDownExpose } from '../wd-count-down/types'
+
+const props = defineProps(countToProps)
+const emit = defineEmits(['mounted', 'finish'])
+
+const { start, pause, reset, current } = useCountDown({
+  time: props.duration,
+  millisecond: true,
+  onFinish: () => emit('finish')
+})
+
+// 计算根元素的类名
+const rootClass = computed(() => {
+  return `wd-count-to ${props.customClass}`
+})
+
+const timeText = computed(() => {
+  return parseFormat(current.value.total)
+})
+
+watch([() => props.startVal, () => props.endVal, () => props.duration], resetTime, { immediate: false })
+
+onMounted(() => {
+  resetTime()
+  emit('mounted')
+})
+
+// 重置动画
+function resetTime() {
+  reset(props.duration)
+  if (props.autoStart) {
+    start()
+  }
+}
+
+function parseFormat(remain: number) {
+  const { startVal, endVal, duration, useEasing } = props
+  const progress = duration - remain // 已经进行的时间
+  const isPositive = startVal > endVal // 判断startVal是否大于endVal
+  const progressRatio = progress / duration // 计算进度比例
+
+  let currentVal: number
+
+  if (useEasing) {
+    // 使用缓动函数计算currentVal
+    if (isPositive) {
+      currentVal = startVal - easingFn(progress, 0, startVal - endVal, duration) || 0
+    } else {
+      currentVal = easingFn(progress, startVal, endVal - startVal, duration)
+    }
+  } else {
+    // 不使用缓动函数时的计算方式
+    if (isPositive) {
+      currentVal = startVal - (startVal - endVal) * progressRatio
+    } else {
+      currentVal = startVal + (endVal - startVal) * progressRatio
+    }
+  }
+  // 确保currentVal在startVal和endVal之间
+  currentVal = isPositive ? Math.max(endVal, currentVal) : Math.min(endVal, currentVal)
+  return formatNumber(currentVal)
+}
+
+// 格式化数字
+function formatNumber(num: any): string {
+  if (typeof num !== 'number') {
+    num = parseFloat(num)
+    if (isNaN(num)) {
+      return '0'
+    }
+  }
+  num = num.toFixed(props.decimals)
+  const parts = num.split('.')
+  let integerPart = parts[0]
+  const decimalPart = parts.length > 1 ? props.decimal + parts[1] : ''
+  const rgx = /(\d+)(\d{3})/
+
+  if (props.separator && !isNumber(props.separator)) {
+    while (rgx.test(integerPart)) {
+      integerPart = integerPart.replace(rgx, '$1' + props.separator + '$2')
+    }
+  }
+  return integerPart + decimalPart
+}
+
+defineExpose<CountDownExpose>({ start, reset: resetTime, pause })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-curtain/index.scss b/src/uni_modules/wot-design-uni/components/wd-curtain/index.scss
new file mode 100644
index 0000000..4f7c10a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-curtain/index.scss
@@ -0,0 +1,85 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+@include b(curtain-wrapper){
+  :deep(.wd-curtain){
+    display: inline-block;
+    border-radius: $-curtain-content-radius;
+    overflow-y: visible !important;
+    background: transparent;
+    font-size: 0;
+  }
+}
+
+
+@include b(curtain) {
+
+  @include e(content) {
+    position: relative;
+    display: inline-block;
+    background: transparent;
+    border-radius: $-curtain-content-radius;
+  }
+  @include e(content-link) {
+    display: block;
+    border-radius: $-curtain-content-radius;
+  }
+  @include e(content-img) {
+    display: block;
+    width: auto;
+    height: auto;
+    border-radius: $-curtain-content-radius;
+  }
+  @include edeep(content-close) {
+    position: absolute;
+    margin: 0;
+    padding: 6px;
+    top: 10px;
+    right: 10px;
+    color: $-curtain-content-close-color;
+    font-size: $-curtain-content-close-fs;
+    -webkit-tap-highlight-color: transparent;
+    &.top {
+      margin: 0 0 0 -18px;
+      top: -62px;
+      right: unset;
+      left: 50%;
+      bottom: unset;
+    }
+    &.top-left {
+      margin: 0;
+      top: -62px;
+      right: unset;
+      left: -6px;
+      bottom: unset;
+    }
+    &.top-right {
+      margin: 0;
+      top: -62px;
+      right: -6px;
+      left: unset;
+      bottom: unset;
+    }
+    &.bottom {
+      margin: 0 0 0 -18px;
+      top: unset;
+      right: unset;
+      left: 50%;
+      bottom: -62px;
+    }
+    &.bottom-left {
+      margin: 0;
+      top: unset;
+      right: unset;
+      left: -6px;
+      bottom: -62px;
+    }
+    &.bottom-right {
+      margin: 0;
+      top: unset;
+      right: -6px;
+      left: unset;
+      bottom: -62px;
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-curtain/types.ts b/src/uni_modules/wot-design-uni/components/wd-curtain/types.ts
new file mode 100644
index 0000000..ef5ca09
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-curtain/types.ts
@@ -0,0 +1,70 @@
+/*
+ * @Author: weisheng
+ * @Date: 2025-01-25 23:46:29
+ * @LastEditTime: 2025-02-13 13:16:45
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-curtain/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type ClosePosition = 'inset' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+
+export const curtainProps = {
+  ...baseProps,
+  /**
+   * 绑定值，展示/关闭幕帘
+   * @deprecated 请使用 modelValue
+   */
+  value: makeBooleanProp(false),
+  /**
+   * 绑定值，展示/关闭幕帘
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 关闭按钮位置，可选值：inset / top / bottom / top-left / top-right / bottom-left / bottom-right
+   */
+  closePosition: makeStringProp<ClosePosition>('inset'),
+  /**
+   * 幕帘图片地址，必须使用网络地址
+   */
+  src: String,
+  /**
+   * 幕帘图片点击链接
+   */
+  to: String,
+  /**
+   * 幕帘图片宽度
+   */
+  width: Number,
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(false),
+  /**
+   * 是否当关闭时将弹出层隐藏（display: none)
+   */
+  hideWhenClose: makeBooleanProp(true),
+  /**
+   * 设置层级
+   * 类型：number
+   * 默认值：10
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 自定义关闭按钮的类名
+   * 类型：string
+   * 默认值：''
+   */
+  customCloseClass: makeStringProp(''),
+  /**
+   * 自定义关闭按钮的样式
+   * 类型：string
+   * 默认值：''
+   */
+  customCloseStyle: makeStringProp('')
+}
+
+export type CurtainProps = ExtractPropTypes<typeof curtainProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue b/src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue
new file mode 100644
index 0000000..52f0864
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue
@@ -0,0 +1,161 @@
+<template>
+  <view class="wd-curtain-wrapper">
+    <wd-popup
+      v-model="modelValue"
+      transition="zoom-in"
+      position="center"
+      :close-on-click-modal="closeOnClickModal"
+      :hide-when-close="hideWhenClose"
+      :z-index="zIndex"
+      @before-enter="beforeenter"
+      @enter="enter"
+      @after-enter="afterenter"
+      @before-leave="beforeleave"
+      @leave="leave"
+      @after-leave="afterleave"
+      @close="close"
+      @click-modal="clickModal"
+      :custom-class="`wd-curtain ${customClass}`"
+      :custom-style="customStyle"
+    >
+      <view class="wd-curtain__content">
+        <image :src="src" class="wd-curtain__content-img" :style="imgStyle" @click="clickImage" @error="imgErr" @load="imgLoad"></image>
+        <slot name="close">
+          <wd-icon
+            name="close-outline"
+            :custom-class="`wd-curtain__content-close ${closePosition} ${customCloseClass}`"
+            :custom-style="customCloseStyle"
+            @click="close"
+          />
+        </slot>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-curtain',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import { computed, ref, watch } from 'vue'
+import { curtainProps } from './types'
+
+const props = defineProps(curtainProps)
+const emit = defineEmits([
+  'beforeenter',
+  'enter',
+  'afterenter',
+  'beforeleave',
+  'leave',
+  'afterleave',
+  'close',
+  'closed',
+  'click-modal',
+  'load',
+  'error',
+  'click',
+  'update:modelValue'
+])
+
+const modelValue = ref(props.modelValue || props.value)
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    modelValue.value = newVal
+  }
+)
+
+watch(
+  () => props.value,
+  (newVal) => {
+    modelValue.value = newVal
+  }
+)
+
+watch(modelValue, (newVal) => {
+  emit('update:modelValue', newVal)
+  if (!newVal) {
+    emit('close')
+  }
+})
+
+const imgSucc = ref<boolean>(true)
+const imgScale = ref<number>(1)
+
+const imgStyle = computed(() => {
+  let style = ''
+  if (props.width) {
+    style += `width: ${props.width}px ;`
+    style += `height: ${props.width / imgScale.value}px`
+  }
+  return style
+})
+
+function beforeenter() {
+  emit('beforeenter')
+}
+
+function enter() {
+  emit('enter')
+}
+function afterenter() {
+  emit('afterenter')
+}
+
+function beforeleave() {
+  emit('beforeleave')
+}
+
+function leave() {
+  emit('leave')
+}
+
+function afterleave() {
+  emit('afterleave')
+  emit('closed')
+}
+
+function close() {
+  modelValue.value = false
+}
+
+function clickModal() {
+  emit('click-modal')
+}
+
+function imgLoad(event: any) {
+  const { height, width } = event.detail
+  imgScale.value = width / height
+  imgSucc.value = true
+  emit('load')
+}
+function imgErr() {
+  imgSucc.value = false
+  emit('error')
+}
+
+function clickImage() {
+  if (props.to) {
+    uni.navigateTo({
+      url: props.to
+    })
+  }
+  emit('click')
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/index.scss b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/index.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts
new file mode 100644
index 0000000..4cd324c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/types.ts
@@ -0,0 +1,123 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type DateTimeType = 'date' | 'year-month' | 'time' | 'datetime' | 'year'
+
+/**
+ * @description 根据传入的值和类型，获取当前的选项数组，便于传入 pickerView
+ * @param value
+ * @param type picker类型
+ * @return {Array} pickerValue
+ */
+export function getPickerValue(value: string | number, type: DateTimeType) {
+  const values: number[] = []
+  const date = new Date(value)
+  if (type === 'time') {
+    const pair = String(value).split(':')
+    values.push(parseInt(pair[0]), parseInt(pair[1]))
+  } else {
+    values.push(date.getFullYear(), date.getMonth() + 1)
+    if (type === 'date') {
+      values.push(date.getDate())
+    } else if (type === 'datetime') {
+      values.push(date.getDate(), date.getHours(), date.getMinutes())
+    }
+  }
+  return values
+}
+
+export const datetimePickerViewProps = {
+  ...baseProps,
+  /**
+   * 选中项，当 type 为 time 时，类型为字符串，否则为 时间戳
+   */
+  modelValue: makeRequiredProp([String, Number]),
+  /**
+   * 加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * picker内部滚筒高
+   */
+  columnsHeight: makeNumberProp(217),
+  valueKey: makeStringProp('value'),
+  labelKey: makeStringProp('label'),
+  /**
+   * 选择器类型，可选值：date / year-month / time
+   */
+  type: makeStringProp<DateTimeType>('datetime'),
+  /**
+   * 自定义过滤选项的函数，返回列的选项数组
+   */
+  filter: Function as PropType<DatetimePickerViewFilter>,
+  /**
+   * 自定义弹出层选项文案的格式化函数，返回一个字符串
+   */
+  formatter: Function as PropType<DatetimePickerViewFormatter>,
+  /**
+   * 自定义列的格式化函数
+   */
+  columnFormatter: Function as PropType<DatetimePickerViewColumnFormatter>,
+  /**
+   * 最小日期
+   */
+  minDate: makeNumberProp(new Date(new Date().getFullYear() - 10, 0, 1).getTime()),
+  /**
+   * 最大日期
+   */
+  maxDate: makeNumberProp(new Date(new Date().getFullYear() + 10, 11, 31).getTime()),
+  /**
+   * 最小小时，time类型时生效
+   */
+  minHour: makeNumberProp(0),
+  /**
+   * 最大小时，time类型时生效
+   */
+  maxHour: makeNumberProp(23),
+  /**
+   * 最小分钟，time类型时生效
+   */
+  minMinute: makeNumberProp(0),
+  /**
+   * 最大分钟，time类型时生效
+   */
+  maxMinute: makeNumberProp(59),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+  startSymbol: makeBooleanProp(false)
+}
+
+export type DatetimePickerViewColumnType = 'year' | 'month' | 'date' | 'hour' | 'minute'
+
+export type DatetimePickerViewOption = {
+  label: string
+  value: number
+}
+
+export type DatetimePickerViewFilter = (type: DatetimePickerViewColumnType, values: number[]) => number[]
+
+export type DatetimePickerViewFormatter = (type: string, value: string) => string
+
+export type DatetimePickerViewColumnFormatter = (picker: DatetimePickerViewInstance) => DatetimePickerViewOption[][]
+
+export type DatetimePickerViewProps = ExtractPropTypes<typeof datetimePickerViewProps>
+
+export type DatetimePickerViewExpose = {
+  updateColumns: () => DatetimePickerViewOption[][]
+  setColumns: (columnList: DatetimePickerViewOption[][]) => void
+  getSelects: () => Record<string, any> | Record<string, any>[] | undefined
+  correctValue: (value: string | number) => string | number
+  getPickerValue: (value: string | number, type: DateTimeType) => number[]
+  getOriginColumns: () => {
+    type: DatetimePickerViewColumnType
+    values: number[]
+  }[]
+}
+
+export type DatetimePickerViewInstance = ComponentPublicInstance<DatetimePickerViewProps, DatetimePickerViewExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue
new file mode 100644
index 0000000..a7d2772
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker-view/wd-datetime-picker-view.vue
@@ -0,0 +1,504 @@
+<template>
+  <view>
+    <wd-picker-view
+      ref="datePickerview"
+      :custom-class="customClass"
+      :custom-style="customStyle"
+      :immediate-change="immediateChange"
+      v-model="pickerValue"
+      :columns="columns"
+      :columns-height="columnsHeight"
+      :columnChange="columnChange"
+      :loading="loading"
+      :loading-color="loadingColor"
+      @change="onChange"
+      @pickstart="onPickStart"
+      @pickend="onPickEnd"
+    ></wd-picker-view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-datetime-picker-view',
+  virtualHost: true,
+  addGlobalClass: true,
+  styleIsolation: 'shared'
+}
+</script>
+
+<script lang="ts" setup>
+import wdPickerView from '../wd-picker-view/wd-picker-view.vue'
+import { getCurrentInstance, onBeforeMount, ref, watch } from 'vue'
+import { debounce, isFunction, isDef, padZero, range, isArray, isString } from '../common/util'
+import {
+  getPickerValue,
+  datetimePickerViewProps,
+  type DatetimePickerViewColumnType,
+  type DatetimePickerViewOption,
+  type DatetimePickerViewExpose
+} from './types'
+import type { PickerViewInstance } from '../wd-picker-view/types'
+
+// 本地时间戳
+/** @description 判断时间戳是否合法 */
+const isValidDate = (date: string | number | Date) => isDef(date) && !Number.isNaN(date)
+/**
+ * @description 生成n个元素，并使用iterator接口进行填充
+ * @param n
+ * @param iteratee
+ * @return {any[]}
+ */
+const times = (n: number, iteratee: (index: number) => number) => {
+  let index: number = -1
+  const length = n < 0 ? 0 : n
+  const result: number[] = Array(length)
+  while (++index < n) {
+    result[index] = iteratee(index)
+  }
+  return result
+}
+/**
+ * @description 获取某年某月有多少天
+ * @param {Number} year
+ * @param {Number} month
+ * @return {Number} day
+ */
+const getMonthEndDay = (year: number, month: number) => {
+  return 32 - new Date(year, month - 1, 32).getDate()
+}
+
+const props = defineProps(datetimePickerViewProps)
+const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
+
+// pickerview
+const datePickerview = ref<PickerViewInstance>()
+// 内部保持时间戳的
+const innerValue = ref<null | string | number>(null)
+// 传递给pickerView的columns的数据
+const columns = ref<DatetimePickerViewOption[][]>([])
+// 传递给pickerView的value的数据
+const pickerValue = ref<string | number | boolean | string[] | number[] | boolean[]>([])
+// 自定义组件是否已经调用created hook
+const created = ref<boolean>(false)
+
+const { proxy } = getCurrentInstance() as any
+
+defineExpose<DatetimePickerViewExpose>({
+  updateColumns,
+  setColumns,
+  getSelects,
+  correctValue,
+  getPickerValue,
+  getOriginColumns,
+  ...props
+})
+/**
+ * @description updateValue 防抖函数的占位符
+ */
+const updateValue = debounce(() => {
+  // 只有等created hook初始化数据之后，observer才能执行此操作
+  if (!created.value) return
+  const val = correctValue(props.modelValue)
+  const isEqual = val === innerValue.value
+  if (!isEqual) {
+    updateColumnValue(val)
+  } else {
+    columns.value = updateColumns()
+  }
+}, 50)
+
+watch(
+  () => props.modelValue,
+  (val, oldVal) => {
+    if (val === oldVal) return
+    // 外部传入值更改时 更新picker数据
+    const value = correctValue(val)
+    updateColumnValue(value)
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.type,
+  (target) => {
+    const type = ['date', 'year-month', 'time', 'datetime', 'year']
+    if (type.indexOf(target) === -1) {
+      console.error(`type must be one of ${type}`)
+    }
+    // 每次type更新时都需要刷新整个列表
+    updateValue()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.filter,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of filter must be Function')
+    }
+    updateValue()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.formatter,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of formatter must be Function')
+    }
+    updateValue()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.columnFormatter,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of columnFormatter must be Function')
+    }
+    updateValue()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  [
+    () => props.minDate,
+    () => props.maxDate,
+    () => props.minHour,
+    () => props.maxHour,
+    () => props.minMinute,
+    () => props.minMinute,
+    () => props.maxMinute
+  ],
+  () => {
+    updateValue()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  // 初始化完毕，打开observer触发render的开关
+  created.value = true
+  const innerValue = correctValue(props.modelValue)
+  updateColumnValue(innerValue)
+})
+
+/** pickerView触发change事件，同步修改pickerValue */
+function onChange({ value }: { value: string | string[] }) {
+  // 更新pickerView的value
+  pickerValue.value = value
+  // pickerValue => innerValue
+  const result = updateInnerValue()
+  emit('update:modelValue', result)
+  // 这个地方的value返回的是picker数组，实际上在此处我们应该返回 change 的是 value date类型的值
+  emit('change', {
+    value: result,
+    picker: proxy.$.exposed
+  })
+}
+
+/**
+ * @description 使用formatter格式化getOriginColumns的结果
+ * @return {Array<Array<Number>>} 用于传入picker的columns
+ */
+function updateColumns(): DatetimePickerViewOption[][] {
+  const { formatter, columnFormatter } = props
+  if (columnFormatter) {
+    return columnFormatter(proxy.$.exposed)
+  } else {
+    return getOriginColumns().map((column) => {
+      return column.values.map((value) => {
+        return {
+          label: formatter ? formatter(column.type, padZero(value)) : padZero(value),
+          value
+        }
+      })
+    })
+  }
+}
+
+/**
+ * 设置数据列
+ * @param columnList 数据列
+ */
+function setColumns(columnList: DatetimePickerViewOption[][]) {
+  columns.value = columnList
+}
+
+/**
+ * @description 根据getRanges得到的范围计算所有的列的数据
+ * @return {{values: any[], type: String}[]} 年
+ */
+function getOriginColumns() {
+  const { filter } = props
+  return getRanges().map(({ type, range }) => {
+    let values = times(range[1] - range[0] + 1, (index: number) => {
+      return range[0] + index
+    })
+
+    if (filter) {
+      values = filter(type, values)
+    }
+
+    return {
+      type,
+      values
+    }
+  })
+}
+
+/**
+ * @description 根据时间戳生成年月日时分的边界范围
+ * @return {Array<{type:String,range:Array<Number>}>}
+ */
+function getRanges(): Array<{ type: DatetimePickerViewColumnType; range: number[] }> {
+  if (props.type === 'time') {
+    return [
+      {
+        type: 'hour',
+        range: [props.minHour, props.maxHour]
+      },
+      {
+        type: 'minute',
+        range: [props.minMinute, props.maxMinute]
+      }
+    ]
+  }
+
+  const { maxYear, maxDate, maxMonth, maxHour, maxMinute } = getBoundary('max', innerValue.value as number)
+  const { minYear, minDate, minMonth, minHour, minMinute } = getBoundary('min', innerValue.value as number)
+
+  const result: Array<{ type: DatetimePickerViewColumnType; range: number[] }> = [
+    {
+      type: 'year',
+      range: [minYear, maxYear]
+    },
+    {
+      type: 'month',
+      range: [minMonth, maxMonth]
+    },
+    {
+      type: 'date',
+      range: [minDate, maxDate]
+    },
+    {
+      type: 'hour',
+      range: [minHour, maxHour]
+    },
+    {
+      type: 'minute',
+      range: [minMinute, maxMinute]
+    }
+  ]
+
+  if (props.type === 'date') result.splice(3, 2)
+  if (props.type === 'year-month') result.splice(2, 3)
+  if (props.type === 'year') result.splice(1, 4)
+  return result
+}
+
+/**
+ * @description 修正时间入参，判定是否为规范时间类型
+ * @param {String | Number} value
+ * @return {String | Number} innerValue
+ */
+function correctValue(value: string | number | Date): string | number {
+  const isDateType = props.type !== 'time'
+  if (isDateType && !isValidDate(value)) {
+    // 是Date类型，但入参不可用，使用最小时间戳代替
+    value = props.minDate
+  } else if (!isDateType && !value) {
+    // 非Date类型，无入参，使用最小小时代替
+    value = `${padZero(props.minHour)}:00`
+  }
+
+  // 当type为time时
+  if (!isDateType) {
+    // 非Date类型，直接走此逻辑
+    let [hour, minute] = (isString(value) ? value : value.toString()).split(':')
+    hour = padZero(range(Number(hour), props.minHour, props.maxHour))
+    minute = padZero(range(Number(minute), props.minMinute, props.maxMinute))
+    return `${hour}:${minute}`
+  }
+
+  // date type
+  value = Math.min(Math.max(Number(value), props.minDate), props.maxDate)
+
+  return value
+}
+
+/**
+ * @description 根据时间戳，计算所有选项的范围
+ * @param {'min'|'max'} type 类型
+ * @param {Number} innerValue 时间戳
+ */
+function getBoundary(type: 'min' | 'max', innerValue: number) {
+  const value = new Date(innerValue)
+  const boundary = new Date(props[`${type}Date`])
+  const year = boundary.getFullYear()
+  let month: number = 1
+  let date: number = 1
+  let hour: number = 0
+  let minute: number = 0
+
+  if (type === 'max') {
+    month = 12
+    date = getMonthEndDay(value.getFullYear(), value.getMonth() + 1)
+    hour = 23
+    minute = 59
+  }
+
+  if (value.getFullYear() === year) {
+    month = boundary.getMonth() + 1
+    if (value.getMonth() + 1 === month) {
+      date = boundary.getDate()
+      if (value.getDate() === date) {
+        hour = boundary.getHours()
+        if (value.getHours() === hour) {
+          minute = boundary.getMinutes()
+        }
+      }
+    }
+  }
+  return {
+    [`${type}Year`]: year,
+    [`${type}Month`]: month,
+    [`${type}Date`]: date,
+    [`${type}Hour`]: hour,
+    [`${type}Minute`]: minute
+  }
+}
+
+/**
+ * @description 根据传入的value以及type，初始化innerValue，期间会使用format格式化数据
+ * @param value
+ * @return {Array}
+ */
+function updateColumnValue(value: string | number) {
+  const values = getPickerValue(value, props.type)
+  // 更新pickerView的value,columns
+  if (props.modelValue !== value) {
+    emit('update:modelValue', value)
+    emit('change', {
+      value,
+      picker: proxy.$.exposed
+    })
+  }
+  innerValue.value = value
+  columns.value = updateColumns()
+  pickerValue.value = values
+}
+
+/**
+ * @description 根据当前的选中项 处理innerValue
+ * @return {date} innerValue
+ */
+function updateInnerValue() {
+  const { type } = props
+  let innerValue: string | number = ''
+  const pickerVal = datePickerview.value?.getValues() || []
+  const values = isArray(pickerVal) ? pickerVal : [pickerVal]
+
+  if (type === 'time') {
+    innerValue = `${padZero(values[0])}:${padZero(values[1])}`
+    return innerValue
+  }
+
+  // 处理年份 索引位0
+  const year = values[0] && parseInt(values[0])
+
+  // 处理月 索引位1
+  const month = type === 'year' ? 1 : values[1] && parseInt(values[1])
+
+  const maxDate = getMonthEndDay(Number(year), Number(month))
+
+  // 处理 date 日期 索引位2
+  let date: string | number = 1
+  if (type !== 'year-month' && type !== 'year') {
+    date = (Number(values[2]) && parseInt(String(values[2]))) > maxDate ? maxDate : values[2] && parseInt(String(values[2]))
+  }
+
+  // 处理 时分 索引位3，4
+  let hour = 0
+  let minute = 0
+
+  if (type === 'datetime') {
+    hour = Number(values[3]) && parseInt(values[3])
+    minute = Number(values[4]) && parseInt(values[4])
+  }
+  const value = new Date(Number(year), Number(month) - 1, Number(date), hour, minute).getTime()
+
+  innerValue = correctValue(value)
+  return innerValue
+}
+
+/**
+ * @description 选中项改变，多级联动
+ */
+function columnChange(picker: PickerViewInstance) {
+  // time year-mouth year 无需联动
+  if (props.type === 'time' || props.type === 'year-month' || props.type === 'year') {
+    return
+  }
+  /** 重新计算年月日时分秒，修正时间。 */
+  const values = picker.getValues() as string[]
+  const year = Number(values[0])
+  const month = Number(values[1])
+  const maxDate = getMonthEndDay(year, month)
+  let date = Number(values[2])
+  date = date > maxDate ? maxDate : date
+  let hour: number = 0
+  let minute: number = 0
+  if (props.type === 'datetime') {
+    hour = Number(values[3])
+    minute = Number(values[4])
+  }
+  const value = new Date(year, month - 1, date, hour, minute).getTime()
+  /** 根据计算选中项的时间戳，重新计算所有的选项列表 */
+  // 更新选中时间戳
+  innerValue.value = correctValue(value)
+  // 根据innerValue获取最新的时间表，重新生成对应的数据源
+
+  const newColumns = updateColumns()
+  // 深拷贝联动之前的选中项
+  const selectedIndex = picker.getSelectedIndex().slice(0)
+  /**
+   * 选中年会修改对应的年份的月数，和月份对应的日期。
+   * 选中月，会修改月份对应的日数
+   */
+  newColumns.forEach((_columns, index) => {
+    const nextColumnIndex = index + 1
+    const nextColumnData = newColumns[nextColumnIndex]
+    if (nextColumnIndex > newColumns.length - 1) return
+    picker.setColumnData(
+      nextColumnIndex,
+      nextColumnData,
+      selectedIndex[nextColumnIndex] <= nextColumnData.length - 1 ? selectedIndex[nextColumnIndex] : 0
+    )
+  })
+}
+function onPickStart() {
+  emit('pickstart')
+}
+function onPickEnd() {
+  emit('pickend')
+}
+
+function getSelects() {
+  const pickerVal = datePickerview.value?.getSelects()
+  if (pickerVal == null) return undefined
+  if (isArray(pickerVal)) return pickerVal
+  return [pickerVal]
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/index.scss b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/index.scss
new file mode 100644
index 0000000..1597a30
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/index.scss
@@ -0,0 +1,245 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(picker) {
+    @include e(cell) {
+      background-color: $-dark-background2;
+      color: $-dark-color;
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+    @include e(value) {
+      color: $-dark-color;
+    }
+
+    @include e(placeholder) {
+      color: $-dark-color-gray;
+    }
+  
+
+    @include when(border) {
+      .wd-picker__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    :deep(.wd-picker__arrow){
+      color: $-dark-color;
+    }
+
+    @include e(action) {
+      @include m(cancel) {
+        color: $-dark-color;
+      }
+    }
+
+    @include e(region) {
+      color: $-dark-color;
+  
+      @include when(active) {
+        background: $-picker-region-bg-active-color;
+        color: $-dark-color;
+      }
+    }
+
+  }
+}
+
+@include b(picker) {
+  @include edeep(popup) {
+    border-radius: 16px 16px 0px 0px;
+  }
+
+  @include e(wraper) {
+    padding-bottom: var(--window-bottom);
+  }
+
+  @include when(border) {
+    .wd-picker__cell {
+      @include halfPixelBorder("top", $-cell-padding);
+    }
+  }
+  @include when(large) {
+    .wd-picker__cell {
+      font-size: $-cell-title-fs-large;
+    }
+    :deep(.wd-picker__arrow) {
+      font-size: $-cell-icon-size-large;
+    }
+  }
+  @include when(error) {
+    .wd-picker__value,
+    .wd-picker__placeholder {
+      color: $-input-error-color;
+    }
+
+    :deep(.wd-picker__arrow){
+      color: $-input-error-color;
+    }
+  }
+  @include when(align-right) {
+    .wd-picker__value {
+      text-align: right;
+    }
+  }
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    align-items: flex-start;
+    background-color: $-color-white;
+    text-decoration: none;
+    color: $-cell-title-color;
+    font-size: $-cell-title-fs;
+    overflow: hidden;
+    line-height: $-cell-line-height;
+
+    @include when(disabled) {
+      .wd-picker__value {
+        color: $-input-disabled-color;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .wd-picker__value {
+      color: $-picker-column-disabled-color;
+    }
+  }
+
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include e(label) {
+    position: relative;
+    width: $-input-cell-label-width;
+    margin-right: $-cell-padding;
+    color: $-cell-title-color;
+    box-sizing: border-box;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: "*";
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+      }
+    }
+  }
+
+  @include e(value-wraper) {
+    display: flex;
+  }
+
+  @include e(value) {
+    flex: 1;
+    margin-right: 10px;
+    color: $-cell-value-color;
+    
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+  }
+
+  @include e(body) {
+    flex: 1;
+  }
+
+  @include e(placeholder) {
+    color: $-input-placeholder-color;
+  }
+
+  @include edeep(arrow) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(toolbar) {
+    position: relative;
+    display: flex;
+    font-size: $-picker-toolbar-fs;
+    height: $-picker-toolbar-height;
+    line-height: $-picker-action-height;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  @include e(action) {
+    display: block;
+    border: none;
+    outline: none;
+    font-size: $-picker-toolbar-fs;
+    color: $-picker-toolbar-finish-color;
+    background: transparent;
+    padding: 24px 15px 14px 15px;
+
+    @include m(cancel) {
+      color: $-picker-toolbar-cancel-color;
+    }
+
+    @include when(loading) {
+      color: $-picker-loading-button-color;
+    }
+  }
+  @include e(title) {
+    display: block;
+    float: 1;
+    color: $-picker-toolbar-title-color;
+  }
+
+  @include e(region-tabs) {
+    display: flex;
+  }
+
+  @include e(region) {
+    width: 50%;
+    display: inline-block;
+    color: $-picker-region-color;
+    text-align: center;
+    padding: 14px 0;
+    font-size: $-picker-region-fs;
+    line-height: 16px;
+    transition: all 0.15s ease-out;
+
+    @include when(active) {
+      background: $-picker-region-bg-active-color;
+      color: $-color-white;
+    }
+  }
+
+  @include e(region-time) {
+    font-size: 16px;
+    margin-top: 2px;
+  }
+
+  @include e(hidden) {
+    visibility: hidden;
+    overflow: hidden;
+    height: 0;
+  }
+
+  @include e(show) {
+    visibility: visible;
+    height: auto;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts
new file mode 100644
index 0000000..eab760d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/types.ts
@@ -0,0 +1,209 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { DateTimeType, DatetimePickerViewFilter, DatetimePickerViewFormatter } from '../wd-datetime-picker-view/types'
+import type { FormItemRule } from '../wd-form/types'
+
+export const datetimePickerProps = {
+  ...baseProps,
+  /**
+   * 选择器左侧文案，label可以不传
+   */
+  label: String,
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   */
+  confirmButtonText: String,
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 设置选择器大小，可选值：large
+   */
+  size: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp('33%'),
+  /**
+   * 使用默认插槽
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * label 使用插槽
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 是否为错误状态，错误状态时右侧内容为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 选择器的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 点击遮罩是否关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 是否超出隐藏
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * picker内部滚筒高
+   */
+  columnsHeight: makeNumberProp(217),
+  valueKey: makeStringProp('value'),
+  labelKey: makeStringProp('label'),
+  /**
+   * 选中项，当 type 为 time 时，类型为字符串；当 type 为 Array 时，类型为范围选择；否则为 时间戳
+   */
+  modelValue: makeRequiredProp([String, Number, Array] as PropType<string | number | Array<string | number>>),
+  /**
+   * 选择器类型，可选值为：date / year-month / time
+   */
+  type: makeStringProp<DateTimeType>('datetime'),
+  /**
+   * 最小日期
+   */
+  minDate: makeNumberProp(new Date(new Date().getFullYear() - 10, 0, 1).getTime()),
+  /**
+   * 最大日期
+   */
+  maxDate: makeNumberProp(new Date(new Date().getFullYear() + 10, 11, 31, 23, 59, 59).getTime()),
+  /**
+   * 最小小时，time类型时生效
+   */
+  minHour: makeNumberProp(0),
+  /**
+   * 最大小时，time类型时生效
+   */
+  maxHour: makeNumberProp(23),
+  /**
+   * 最小分钟，time类型时生效
+   */
+  minMinute: makeNumberProp(0),
+  /**
+   * 最大分钟，time类型时生效
+   */
+  maxMinute: makeNumberProp(59),
+  /**
+   * 自定义过滤选项的函数，返回列的选项数组
+   */
+  filter: Function as PropType<DatetimePickerViewFilter>,
+  /**
+   * 自定义弹出层选项文案的格式化函数，返回一个字符串
+   */
+  formatter: Function as PropType<DatetimePickerViewFormatter>,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<DatetimePickerDisplayFormat>,
+  /**
+   * 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数
+   */
+  beforeConfirm: Function as PropType<DatetimePickerBeforeConfirm>,
+  /**
+   * 在区域选择模式下，自定义展示tab标签文案的格式化函数，返回一个字符串
+   */
+  displayFormatTabLabel: Function as PropType<DatetimePickerDisplayFormatTabLabel>,
+  /**
+   * 默认日期，类型保持与 value 一致，打开面板时面板自动选到默认日期
+   */
+  defaultValue: [String, Number, Array] as PropType<string | number | Array<string | number>>,
+  /**
+   * 弹窗层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * picker cell 外部自定义样式
+   */
+  customCellClass: makeStringProp(''),
+  /**
+   * pickerView 外部自定义样式
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * label 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false)
+}
+
+export type DatetimePickerDisplayFormat = (items: Record<string, any>[]) => string
+
+export type DatetimePickerBeforeConfirm = (
+  value: number | string | (number | string)[],
+  resolve: (isPass: boolean) => void,
+  picker: DatetimePickerInstance
+) => void
+
+export type DatetimePickerDisplayFormatTabLabel = (items: Record<string, any>[]) => string
+
+export type DatetimePickerExpose = {
+  /**
+   * 打开picker弹框
+   */
+  open: () => void
+  /**
+   * 关闭picker弹框
+   */
+  close: () => void
+  /**
+   * 设置加载状态
+   * @param loading 加载状态
+   * @returns
+   */
+  setLoading: (loading: boolean) => void
+}
+
+export type DatetimePickerProps = ExtractPropTypes<typeof datetimePickerProps>
+
+export type DatetimePickerInstance = ComponentPublicInstance<DatetimePickerProps, DatetimePickerExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
new file mode 100644
index 0000000..26d950a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
@@ -0,0 +1,767 @@
+<template>
+  <view
+    :class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''}  ${cell.border.value ? 'is-border' : ''} ${
+      alignRight ? 'is-align-right' : ''
+    } ${error ? 'is-error' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <!--文案-->
+    <view class="wd-picker__field" @click="showPopup">
+      <slot v-if="$slots.default"></slot>
+      <view v-else :class="['wd-picker__cell', customCellClass]">
+        <view
+          v-if="label || $slots.label"
+          :class="`wd-picker__label ${customLabelClass} ${isRequired ? 'is-required' : ''}`"
+          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
+        >
+          <slot v-if="$slots.label" name="label"></slot>
+          <block v-else>{{ label }}</block>
+        </view>
+        <view class="wd-picker__body">
+          <view class="wd-picker__value-wraper">
+            <view :class="`wd-picker__value ${customValueClass}`">
+              <template v-if="region">
+                <view v-if="isArray(showValue)">
+                  <text :class="showValue[0] ? '' : 'wd-picker__placeholder'">
+                    {{ showValue[0] ? showValue[0] : placeholder || translate('placeholder') }}
+                  </text>
+                  {{ translate('to') }}
+                  <text :class="showValue[1] ? '' : 'wd-picker__placeholder'">
+                    {{ showValue[1] ? showValue[1] : placeholder || translate('placeholder') }}
+                  </text>
+                </view>
+                <view v-else class="wd-picker__placeholder">
+                  {{ placeholder || translate('placeholder') }}
+                </view>
+              </template>
+              <view v-else :class="showValue ? '' : 'wd-picker__placeholder'">
+                {{ showValue ? showValue : placeholder || translate('placeholder') }}
+              </view>
+            </view>
+            <wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" />
+          </view>
+          <view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
+        </view>
+      </view>
+    </view>
+    <!--弹出层，picker-view 在隐藏时修改值，会触发多次change事件，从而导致所有列选中第一项，因此picker在关闭时不隐藏 -->
+    <wd-popup
+      v-model="popupShow"
+      position="bottom"
+      :hide-when-close="false"
+      :close-on-click-modal="closeOnClickModal"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      :z-index="zIndex"
+      @close="onCancel"
+      custom-class="wd-picker__popup"
+    >
+      <view class="wd-picker__wraper">
+        <!--toolBar-->
+        <view class="wd-picker__toolbar" @touchmove="noop">
+          <!--取消按钮-->
+          <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
+            {{ cancelButtonText || translate('cancel') }}
+          </view>
+          <!--标题-->
+          <view v-if="title" class="wd-picker__title">{{ title }}</view>
+          <!--确定按钮-->
+          <view :class="`wd-picker__action ${loading || isLoading ? 'is-loading' : ''}`" @click="onConfirm">
+            {{ confirmButtonText || translate('confirm') }}
+          </view>
+        </view>
+        <!-- 区域选择tab展示 -->
+        <view v-if="region" class="wd-picker__region-tabs">
+          <view :class="`wd-picker__region ${showStart ? 'is-active' : ''} `" @click="tabChange">
+            <view>{{ translate('start') }}</view>
+            <view class="wd-picker__region-time">{{ showTabLabel[0] }}</view>
+          </view>
+          <view :class="`wd-picker__region ${showStart ? '' : 'is-active'}`" @click="tabChange">
+            <view>{{ translate('end') }}</view>
+            <view class="wd-picker__region-time">{{ showTabLabel[1] }}</view>
+          </view>
+        </view>
+        <!--datetimePickerView-->
+        <view :class="showStart ? 'wd-picker__show' : 'wd-picker__hidden'">
+          <wd-datetime-picker-view
+            :custom-class="customViewClass"
+            ref="datetimePickerView"
+            :type="type"
+            v-model="innerValue"
+            :loading="loading || isLoading"
+            :loading-color="loadingColor"
+            :columns-height="columnsHeight"
+            :value-key="valueKey"
+            :label-key="labelKey"
+            :formatter="formatter"
+            :filter="filter"
+            :column-formatter="isArray(modelValue) ? customColumnFormatter : undefined"
+            :max-hour="maxHour"
+            :min-hour="minHour"
+            :max-date="maxDate"
+            :min-date="minDate"
+            :max-minute="maxMinute"
+            :min-minute="minMinute"
+            :start-symbol="true"
+            :immediate-change="immediateChange"
+            @change="onChangeStart"
+            @pickstart="onPickStart"
+            @pickend="onPickEnd"
+          />
+        </view>
+        <view :class="showStart ? 'wd-picker__hidden' : 'wd-picker__show'">
+          <wd-datetime-picker-view
+            :custom-class="customViewClass"
+            ref="datetimePickerView1"
+            :type="type"
+            v-model="endInnerValue"
+            :loading="loading || isLoading"
+            :loading-color="loadingColor"
+            :columns-height="columnsHeight"
+            :value-key="valueKey"
+            :label-key="labelKey"
+            :formatter="formatter"
+            :filter="filter"
+            :column-formatter="isArray(modelValue) ? customColumnFormatter : undefined"
+            :max-hour="maxHour"
+            :min-hour="minHour"
+            :max-date="maxDate"
+            :min-date="minDate"
+            :max-minute="maxMinute"
+            :min-minute="minMinute"
+            :start-symbol="false"
+            :immediate-change="immediateChange"
+            @change="onChangeEnd"
+            @pickstart="onPickStart"
+            @pickend="onPickEnd"
+          />
+        </view>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-datetime-picker',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import wdDatetimePickerView from '../wd-datetime-picker-view/wd-datetime-picker-view.vue'
+import { computed, getCurrentInstance, nextTick, onBeforeMount, onMounted, ref, watch } from 'vue'
+import { deepClone, isArray, isDef, isEqual, isFunction, padZero } from '../common/util'
+import { useCell } from '../composables/useCell'
+import {
+  getPickerValue,
+  type DatetimePickerViewInstance,
+  type DatetimePickerViewColumnFormatter,
+  type DatetimePickerViewColumnType
+} from '../wd-datetime-picker-view/types'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { datetimePickerProps, type DatetimePickerExpose } from './types'
+import { dayjs } from '../common/dayjs'
+
+const props = defineProps(datetimePickerProps)
+const emit = defineEmits(['change', 'open', 'toggle', 'cancel', 'confirm', 'update:modelValue'])
+
+const { translate } = useTranslate('datetime-picker')
+
+const datetimePickerView = ref<DatetimePickerViewInstance>()
+const datetimePickerView1 = ref<DatetimePickerViewInstance>()
+
+const showValue = ref<string | Date | Array<string | Date>>('')
+const popupShow = ref<boolean>(false)
+const showStart = ref<boolean>(true)
+const region = ref<boolean>(false)
+const showTabLabel = ref<string[]>([])
+const innerValue = ref<string | number>('')
+const endInnerValue = ref<string | number>('')
+
+const isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
+const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
+
+const isLoading = ref<boolean>(false) // 加载
+const { proxy } = getCurrentInstance() as any
+
+const cell = useCell()
+
+watch(
+  () => props.modelValue,
+  (val, oldVal) => {
+    if (isEqual(val, oldVal)) return
+
+    if (isArray(val)) {
+      region.value = true
+      innerValue.value = deepClone(getDefaultInnerValue(true))
+      endInnerValue.value = deepClone(getDefaultInnerValue(true, true))
+    } else {
+      // 每次value更新时都需要刷新整个列表
+      innerValue.value = deepClone(getDefaultInnerValue())
+    }
+    nextTick(() => {
+      setShowValue(false, false, true)
+    })
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.displayFormat,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormat must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+watch(
+  () => props.filter,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of filter must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+watch(
+  () => props.formatter,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of formatter must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+watch(
+  () => props.beforeConfirm,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforeConfirm must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+watch(
+  () => props.displayFormatTabLabel,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormatTabLabel must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.defaultValue,
+  (val) => {
+    if (isArray(val) || region.value) {
+      innerValue.value = deepClone(getDefaultInnerValue(true))
+      endInnerValue.value = deepClone(getDefaultInnerValue(true, true))
+    } else {
+      innerValue.value = deepClone(getDefaultInnerValue())
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+// 表单校验错误信息
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+/**
+ * @description 处理时间边界值判断
+ * @param isStart 是否是开始时间
+ * @param columnType 当前列类型
+ * @param value 当前值
+ * @param currentArray 当前完整选择的数组
+ * @param boundary 边界值数组
+ * @returns 是否超出边界
+ */
+function handleBoundaryValue(
+  isStart: boolean,
+  columnType: DatetimePickerViewColumnType,
+  value: number,
+  currentArray: number[],
+  boundary: number[]
+): boolean {
+  const { type } = props
+
+  switch (type) {
+    case 'datetime': {
+      const [year, month, date, hour, minute] = boundary
+      if (columnType === 'year') {
+        return isStart ? value > year : value < year
+      }
+      if (columnType === 'month' && currentArray[0] === year) {
+        return isStart ? value > month : value < month
+      }
+      if (columnType === 'date' && currentArray[0] === year && currentArray[1] === month) {
+        return isStart ? value > date : value < date
+      }
+      if (columnType === 'hour' && currentArray[0] === year && currentArray[1] === month && currentArray[2] === date) {
+        return isStart ? value > hour : value < hour
+      }
+      if (columnType === 'minute' && currentArray[0] === year && currentArray[1] === month && currentArray[2] === date && currentArray[3] === hour) {
+        return isStart ? value > minute : value < minute
+      }
+      break
+    }
+    case 'year-month': {
+      const [year, month] = boundary
+      if (columnType === 'year') {
+        return isStart ? value > year : value < year
+      }
+      if (columnType === 'month' && currentArray[0] === year) {
+        return isStart ? value > month : value < month
+      }
+      break
+    }
+    case 'year': {
+      const [year] = boundary
+      if (columnType === 'year') {
+        return isStart ? value > year : value < year
+      }
+      break
+    }
+    case 'date': {
+      const [year, month, date] = boundary
+      if (columnType === 'year') {
+        return isStart ? value > year : value < year
+      }
+      if (columnType === 'month' && currentArray[0] === year) {
+        return isStart ? value > month : value < month
+      }
+      if (columnType === 'date' && currentArray[0] === year && currentArray[1] === month) {
+        return isStart ? value > date : value < date
+      }
+      break
+    }
+    case 'time': {
+      const [hour, minute] = boundary
+      if (columnType === 'hour') {
+        return isStart ? value > hour : value < hour
+      }
+      if (columnType === 'minute' && currentArray[0] === hour) {
+        return isStart ? value > minute : value < minute
+      }
+      break
+    }
+  }
+  return false
+}
+
+/**
+ * @description 自定义列项筛选规则
+ */
+const customColumnFormatter: DatetimePickerViewColumnFormatter = (picker) => {
+  if (!picker) return []
+
+  const { type } = props
+  const { startSymbol, formatter } = picker
+  const start = picker.correctValue(innerValue.value)
+  const end = picker.correctValue(endInnerValue.value)
+
+  const currentValue = startSymbol ? picker.getPickerValue(start, type) : picker.getPickerValue(end, type)
+  const boundary = startSymbol ? picker.getPickerValue(end, type) : picker.getPickerValue(start, type)
+  const columns = picker.getOriginColumns()
+
+  return columns.map((column, _) => {
+    return column.values.map((value) => {
+      const disabled = handleBoundaryValue(startSymbol, column.type, value, currentValue, boundary)
+      return {
+        label: formatter ? formatter(column.type, padZero(value)) : padZero(value),
+        value,
+        disabled
+      }
+    })
+  })
+}
+
+onBeforeMount(() => {
+  const { modelValue: value } = props
+  if (isArray(value)) {
+    region.value = true
+    innerValue.value = deepClone(getDefaultInnerValue(true))
+    endInnerValue.value = deepClone(getDefaultInnerValue(true, true))
+  } else {
+    innerValue.value = deepClone(getDefaultInnerValue())
+  }
+})
+
+onMounted(() => {
+  setShowValue(false, false, true)
+})
+
+/**
+ * @description 根据传入的picker，picker组件获取当前cell展示值。
+ */
+function getSelects(picker: 'before' | 'after') {
+  let value = picker === 'before' ? innerValue.value : endInnerValue.value
+  let selected: number[] = []
+  if (value) {
+    selected = getPickerValue(value, props.type)
+  }
+
+  let selects = selected.map((value) => {
+    return {
+      [props.labelKey]: padZero(value),
+      [props.valueKey]: value
+    }
+  })
+  return selects
+}
+
+function noop() {}
+
+function getDefaultInnerValue(isRegion?: boolean, isEnd?: boolean): string | number {
+  const { modelValue: value, defaultValue, maxDate, minDate, type } = props
+  if (isRegion) {
+    const index = isEnd ? 1 : 0
+    const targetValue = isArray(value) ? (value[index] as string) : ''
+    const targetDefault = isArray(defaultValue) ? (defaultValue[index] as string) : ''
+    const maxValue = type === 'time' ? dayjs(maxDate).format('HH:mm') : maxDate
+    const minValue = type === 'time' ? dayjs(minDate).format('HH:mm') : minDate
+    return targetValue || targetDefault || (isEnd ? maxValue : minValue)
+  } else {
+    return isDef(value || defaultValue) ? (value as string) || (defaultValue as string) : ''
+  }
+}
+
+// 对外暴露接口，打开弹框
+function open() {
+  showPopup()
+}
+
+// 对外暴露接口，关闭弹框
+function close() {
+  onCancel()
+}
+
+function showPopup() {
+  if (props.disabled || props.readonly) return
+
+  emit('open')
+  if (region.value) {
+    popupShow.value = true
+    showStart.value = true
+    innerValue.value = deepClone(getDefaultInnerValue(true, false))
+    endInnerValue.value = deepClone(getDefaultInnerValue(true, true))
+  } else {
+    popupShow.value = true
+    innerValue.value = deepClone(getDefaultInnerValue())
+  }
+  setShowValue(true, false, true)
+}
+
+/**
+ * @description 区域选择时tab标签切换时触发
+ */
+function tabChange() {
+  showStart.value = !showStart.value
+  // 列项刷新多级联动挂载到datetimepickerView
+  const picker = showStart.value ? datetimePickerView.value : datetimePickerView1.value
+  picker!.setColumns(picker!.updateColumns())
+
+  emit('toggle', showStart.value ? innerValue.value : endInnerValue.value)
+}
+
+/**
+ * @description datetimePickerView change 事件
+ */
+function onChangeStart({ value }: { value: number | string }) {
+  if (!datetimePickerView.value) return
+  if (region.value && !datetimePickerView1.value) return
+
+  if (region.value) {
+    // 区间选择才需要处理边界值
+    const currentArray = datetimePickerView.value.getPickerValue(value, props.type)
+    const boundaryArray = datetimePickerView.value.getPickerValue(endInnerValue.value, props.type)
+    const columns = datetimePickerView.value.getOriginColumns()
+
+    // 检查是否有任何列超出边界
+    const needsAdjust = columns.some((column, index) => {
+      return handleBoundaryValue(true, column.type, currentArray[index], currentArray, boundaryArray)
+    })
+
+    innerValue.value = deepClone(needsAdjust ? endInnerValue.value : value)
+
+    nextTick(() => {
+      showTabLabel.value = [setTabLabel(), deepClone(showTabLabel.value[1])]
+      emit('change', {
+        value: [innerValue.value, endInnerValue.value]
+      })
+      // 更新两个picker的列
+      datetimePickerView.value && datetimePickerView.value.setColumns(datetimePickerView.value.updateColumns())
+      datetimePickerView1.value && datetimePickerView1.value.setColumns(datetimePickerView1.value.updateColumns())
+    })
+  } else {
+    // 非区间选择直接设置值即可
+    innerValue.value = deepClone(value)
+    emit('change', {
+      value: innerValue.value
+    })
+  }
+}
+
+/**
+ * @description 区域选择 下方 datetimePickerView change 事件
+ */
+function onChangeEnd({ value }: { value: number | string }) {
+  if (!datetimePickerView.value || !datetimePickerView1.value) return
+
+  const currentArray = datetimePickerView1.value.getPickerValue(value, props.type)
+  const boundaryArray = datetimePickerView1.value.getPickerValue(innerValue.value, props.type)
+  const columns = datetimePickerView1.value.getOriginColumns()
+
+  // 检查是否有任何列超出边界
+  const needsAdjust = columns.some((column, index) => {
+    return handleBoundaryValue(false, column.type, currentArray[index], currentArray, boundaryArray)
+  })
+
+  endInnerValue.value = deepClone(needsAdjust ? innerValue.value : value)
+
+  nextTick(() => {
+    showTabLabel.value = [deepClone(showTabLabel.value[0]), setTabLabel(1)]
+    emit('change', {
+      value: [innerValue.value, endInnerValue.value]
+    })
+    // 更新两个picker的列
+    datetimePickerView.value && datetimePickerView.value.setColumns(datetimePickerView.value.updateColumns())
+    datetimePickerView1.value && datetimePickerView1.value.setColumns(datetimePickerView1.value.updateColumns())
+  })
+}
+
+/**
+ * @description 点击取消按钮触发。关闭popup，触发cancel事件。
+ */
+function onCancel() {
+  popupShow.value = false
+  setTimeout(() => {
+    if (region.value) {
+      innerValue.value = deepClone(getDefaultInnerValue(true))
+      endInnerValue.value = deepClone(getDefaultInnerValue(true, true))
+    } else {
+      innerValue.value = deepClone(getDefaultInnerValue())
+    }
+  }, 200)
+
+  emit('cancel')
+}
+
+/** picker触发confirm事件，同步触发confirm事件 */
+function onConfirm() {
+  if (props.loading || isLoading.value) return
+
+  // 如果当前还在滑动且未停止下来，则锁住先不确认，等滑完再自动确认，避免pickview值未更新
+  if (isPicking.value) {
+    hasConfirmed.value = true
+    return
+  }
+
+  const { beforeConfirm } = props
+  if (beforeConfirm) {
+    beforeConfirm(
+      region.value ? [innerValue.value, endInnerValue.value] : innerValue.value,
+      (isPass: boolean) => {
+        isPass && handleConfirm()
+      },
+      proxy.$.exposed
+    )
+  } else {
+    handleConfirm()
+  }
+}
+
+function onPickStart() {
+  isPicking.value = true
+}
+
+function onPickEnd() {
+  isPicking.value = false
+
+  // 延迟一会，因为组件层级嵌套过多，日期的计算时间也较长
+  setTimeout(() => {
+    if (hasConfirmed.value) {
+      hasConfirmed.value = false
+      onConfirm()
+    }
+  }, 50)
+}
+
+function handleConfirm() {
+  if (props.loading || isLoading.value || props.disabled) {
+    popupShow.value = false
+    return
+  }
+  const value = region.value ? [innerValue.value, endInnerValue.value] : innerValue.value
+  popupShow.value = false
+  emit('update:modelValue', value)
+  emit('confirm', {
+    value
+  })
+  setShowValue(false, true)
+}
+
+/**
+ * @description 设置区域选择 tab 标签展示值
+ * @param {Number} index 索引标志位，有三个有效值; 0(默认):上方picker索引; 1:下方picker索引;
+ * @return {String} showTabLabel
+ */
+function setTabLabel(index: number = 0) {
+  if (region.value) {
+    let items: Record<string, any>[] = []
+    if (index === 0) {
+      items = ((datetimePickerView.value ? datetimePickerView.value!.getSelects() : undefined) ||
+        (innerValue.value && getSelects('before'))) as Record<string, any>[]
+    } else {
+      items = ((datetimePickerView1.value ? datetimePickerView1.value!.getSelects() : undefined) ||
+        (endInnerValue.value && getSelects('after'))) as Record<string, any>[]
+    }
+    return defaultDisplayFormat(items, true)
+  } else {
+    return ''
+  }
+}
+
+/**
+ * @description 设置展示值
+ * @param {Boolean} tab 是否修改tab展示值（尽在区域选择情况下生效）
+ * @param {Boolean} isConfirm 是否提交当前修改
+ */
+function setShowValue(tab: boolean = false, isConfirm: boolean = false, beforeMount: boolean = false) {
+  if (region.value) {
+    const items = beforeMount
+      ? (innerValue.value && getSelects('before')) || []
+      : (datetimePickerView.value && datetimePickerView.value.getSelects && datetimePickerView.value.getSelects()) || []
+
+    const endItems = beforeMount
+      ? (endInnerValue.value && getSelects('after')) || []
+      : (datetimePickerView1.value && datetimePickerView1.value.getSelects && datetimePickerView1.value.getSelects()) || []
+
+    showValue.value = tab
+      ? showValue.value
+      : [
+          (props.modelValue as (string | number)[])[0] || isConfirm ? defaultDisplayFormat(items as Record<string, any>[]) : '',
+          (props.modelValue as (string | number)[])[1] || isConfirm ? defaultDisplayFormat(endItems as Record<string, any>[]) : ''
+        ]
+    showTabLabel.value = [defaultDisplayFormat(items as Record<string, any>[], true), defaultDisplayFormat(endItems as Record<string, any>[], true)]
+  } else {
+    const items = beforeMount
+      ? (innerValue.value && getSelects('before')) || []
+      : (datetimePickerView.value && datetimePickerView.value.getSelects && datetimePickerView.value.getSelects()) || []
+
+    showValue.value = deepClone(props.modelValue || isConfirm ? defaultDisplayFormat(items as Record<string, any>[]) : '')
+  }
+}
+
+/**
+ * @description 设置展示值
+ * @param {Object} items 获取到的选中项 包含 { value, label }
+ * @param {Boolean} tabLabel 当前返回的是否是展示tab上的标签
+ * @return {String} showValue / showTabLabel
+ */
+function defaultDisplayFormat(items: Record<string, any>[], tabLabel: boolean = false) {
+  if (items.length === 0) return ''
+
+  if (tabLabel && props.displayFormatTabLabel) {
+    return props.displayFormatTabLabel(items)
+  }
+
+  if (props.displayFormat) {
+    return props.displayFormat(items)
+  }
+
+  // 如果使用了自定义的的formatter，defaultDisplayFormat无效
+  if (props.formatter) {
+    const typeMaps = {
+      year: ['year'],
+      datetime: ['year', 'month', 'date', 'hour', 'minute'],
+      date: ['year', 'month', 'date'],
+      time: ['hour', 'minute'],
+      'year-month': ['year', 'month']
+    }
+    return items
+      .map((item, index) => {
+        return props.formatter!(typeMaps[props.type][index], item.value)
+      })
+      .join('')
+  }
+
+  switch (props.type) {
+    case 'year':
+      return items[0].label
+    case 'date':
+      return `${items[0].label}-${items[1].label}-${items[2].label}`
+    case 'year-month':
+      return `${items[0].label}-${items[1].label}`
+    case 'time':
+      return `${items[0].label}:${items[1].label}`
+    case 'datetime':
+      return `${items[0].label}-${items[1].label}-${items[2].label} ${items[3].label}:${items[4].label}`
+  }
+}
+
+function setLoading(loading: boolean) {
+  isLoading.value = loading
+}
+
+defineExpose<DatetimePickerExpose>({
+  open,
+  close,
+  setLoading
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/index.scss b/src/uni_modules/wot-design-uni/components/wd-divider/index.scss
new file mode 100644
index 0000000..c67d106
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-divider/index.scss
@@ -0,0 +1,100 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(divider) {
+    color: $-dark-color3;
+
+    @include e(line) {
+      background: $-dark-color-gray;
+    }
+  }
+}
+
+@include b(divider) {
+  position: relative;
+  display: flex;
+  padding: $-divider-padding;
+  margin: $-divider-margin;
+  align-items: center;
+  color: $-divider-color;
+  font-size: $-divider-fs;
+
+  &::after,
+  &::before {
+    flex: 1;
+    display: block;
+    box-sizing: border-box;
+    border-style: solid;
+    border-color: $-divider-line-color;
+    border-width: $-divider-line-height 0 0;
+  }
+
+  &::before {
+    content: '';
+  }
+
+  @include m(center, left, right) {
+    &::after {
+      content: '';
+      margin-left: $-divider-content-left-margin;
+    }
+
+    &::before {
+      margin-right: $-divider-content-right-margin;
+    }
+  }
+
+  @include m(left) {
+    &::before {
+      max-width: $-divider-content-left-width;
+    }
+  }
+
+  @include m(right) {
+    &::after {
+      max-width: $-divider-content-right-width;
+    }
+  }
+
+  @include when(hairline) {
+
+    &::before,
+    &::after {
+      transform: scaleY(0.5);
+    }
+  }
+
+  @include when(dashed) {
+
+    &::before,
+    &::after {
+      border-style: dashed;
+    }
+  }
+
+  @include m(vertical) {
+    display: inline-block;
+    width: $-divider-vertical-line-width;
+    height: $-divider-vertical-height;
+    margin: $-divider-vertical-content-margin;
+    padding: 0;
+    vertical-align: middle;
+
+    &::before {
+      height: 100%;
+      border-width: 0 0 0 $-divider-vertical-line-width;
+    }
+
+    &::after {
+      display: none;
+    }
+
+    @include when(hairline) {
+      &::before {
+        transform: scaleX(0.5);
+      }
+    }
+  }
+
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/types.ts b/src/uni_modules/wot-design-uni/components/wd-divider/types.ts
new file mode 100644
index 0000000..12d6726
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-divider/types.ts
@@ -0,0 +1,35 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type DividerPosition = 'center' | 'left' | 'right'
+export type DividerDirection = 'horizontal' | 'vertical'
+
+export const dividerProps = {
+  ...baseProps,
+  /**
+   * 自定义颜色
+   */
+  color: String,
+  /**
+   * 内容位置，可选值为 `left` `right` `center`
+   * 默认值：`center`
+   */
+  contentPosition: makeStringProp<DividerPosition>('center'),
+  /**
+   * 是否显示为虚线
+   * 默认值：`false`
+   */
+  dashed: Boolean,
+  /**
+   * 是否为垂直分割线
+   * 默认值：`false`
+   */
+  vertical: makeBooleanProp(false),
+  /**
+   * 是否显示为 0.5px 的线
+   * 默认值：`true`
+   */
+  hairline: makeBooleanProp(true)
+}
+
+export type DividerProps = ExtractPropTypes<typeof dividerProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue b/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue
new file mode 100644
index 0000000..25eb681
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-divider/wd-divider.vue
@@ -0,0 +1,52 @@
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <slot v-if="!vertical"></slot>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-divider',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, useSlots, type CSSProperties } from 'vue'
+import { dividerProps } from './types'
+import { objToStyle } from '../common/util'
+
+const props = defineProps(dividerProps)
+const slots = useSlots()
+
+const rootStyle = computed(() => {
+  const { color, customStyle } = props
+  const style: CSSProperties = {}
+  if (color) {
+    style.color = color
+  }
+  return `${objToStyle(style)}${customStyle}`
+})
+
+const rootClass = computed(() => {
+  const prefixCls = 'wd-divider'
+  const classes: Record<string, boolean> = {
+    [prefixCls]: true,
+    ['is-dashed']: props.dashed,
+    ['is-hairline']: props.hairline,
+    [`${prefixCls}--vertical`]: props.vertical,
+    [`${prefixCls}--center`]: !props.vertical && props.contentPosition === 'center' && !!slots.default,
+    [`${prefixCls}--left`]: !props.vertical && props.contentPosition === 'left',
+    [`${prefixCls}--right`]: !props.vertical && props.contentPosition === 'right',
+    [props.customClass]: !!props.customClass
+  }
+  return classes
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/index.scss b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/index.scss
new file mode 100644
index 0000000..13546eb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/index.scss
@@ -0,0 +1,66 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(drop-item) {
+    color: $-dark-color;
+
+    @include e(tip) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(drop-item) {
+  position: fixed;
+  right: 0;
+  left: 0;
+  overflow: hidden;
+  font-size: $-drop-menu-item-fs;
+  color: $-drop-menu-item-color;
+  width: 100%;
+  z-index: 101;
+  
+  .wd-drop-item__popup {
+    position: absolute;
+    max-height: 80%;
+  }
+
+  @include e(option) {
+    display: flex;
+    height: $-drop-menu-item-height;
+    line-height: $-drop-menu-item-height;
+    padding: 0 $-drop-menu-side-padding;
+    justify-content: space-between;
+    align-items: center;
+    transition: color .2s;
+
+    @include when(active) {
+      color: $-drop-menu-item-color-active;
+    }
+  }
+
+  @include e(title){
+    display: block;
+  }
+
+  @include e(tip) {
+    display: inline-block;
+    color: $-drop-menu-item-color-tip;
+    font-size: $-drop-menu-item-fs-tip;
+    margin-left: 2px;
+  }
+
+  @include edeep(icon){
+    display: block;
+    font-size: $-drop-menu-option-check-size;
+  }
+
+  @include e(modal) {
+    position: fixed;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, 0.7);
+    height: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
new file mode 100644
index 0000000..ebbd9bf
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/types.ts
@@ -0,0 +1,86 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type DropMenuItemBeforeToggleOption = {
+  // 操作状态：true 打开下拉菜单，false 关闭下拉菜单
+  status: boolean
+  // 回调函数，用于控制是否允许打开或关闭下拉菜单，true 允许打开或关闭，false 不允许打开或关闭
+  resolve: (isPass: boolean) => void
+}
+
+export type DropMenuItemBeforeToggle = (option: DropMenuItemBeforeToggleOption) => void
+
+export const dorpMenuItemProps = {
+  ...baseProps,
+  /**
+   * DropMenuItem 左侧文字样式
+   */
+  customTitle: makeStringProp(''),
+  /**
+   * DropMenuItem 右侧 icon 样式
+   */
+  customIcon: makeStringProp(''),
+  /**
+   * 当前选中项对应选中的 value
+   */
+  modelValue: [String, Number],
+  /**
+   * 列表数据，对应数据结构 [{text: '标题', value: '0', tip: '提示文字'}]
+   */
+  options: makeArrayProp<Record<string, any>>(),
+  /**
+   * 禁用菜单
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 选中的图标名称(可选名称在 wd-icon 组件中)
+   */
+  iconName: makeStringProp('check'),
+  /**
+   * 菜单标题
+   */
+  title: String,
+  /**
+   * 菜单图标
+   */
+  icon: makeStringProp('arrow-down'),
+  /**
+   * 菜单图标大小
+   */
+  iconSize: makeStringProp('14px'),
+  /**
+   * 自定义点击事件
+   */
+  beforeToggle: Function as PropType<DropMenuItemBeforeToggle>,
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选项对象中，选项说明对应的 key
+   */
+  tipKey: makeStringProp('tip'),
+  /**
+   * 自定义下拉菜单popup样式类
+   */
+  customPopupClass: makeStringProp(''),
+  /**
+   * 自定义下拉菜单popup样式
+   */
+  customPopupStyle: makeStringProp('')
+}
+
+export type DropMenuItemProps = ExtractPropTypes<typeof dorpMenuItemProps>
+
+export type DropMenuItemExpose = {
+  getShowPop: () => boolean
+  open: () => void
+  close: () => void
+  toggle: () => void
+}
+
+export type DropMenuItemInstance = ComponentPublicInstance<DropMenuItemProps, DropMenuItemExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
new file mode 100644
index 0000000..612a7c5
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu-item/wd-drop-menu-item.vue
@@ -0,0 +1,216 @@
+<template>
+  <view
+    v-if="showWrapper"
+    :class="`wd-drop-item  ${customClass}`"
+    :style="`pointer-events: none; z-index: ${zIndex}; ${positionStyle};${customStyle}`"
+  >
+    <wd-popup
+      v-model="showPop"
+      :z-index="zIndex"
+      :duration="duration"
+      :position="position"
+      :custom-style="`position: absolute; pointer-events: auto; max-height: 80%;${customPopupStyle}`"
+      :custom-class="customPopupClass"
+      :modal="false"
+      :close-on-click-modal="false"
+      @before-enter="beforeEnter"
+      @after-enter="afterEnter"
+      @before-leave="beforeLeave"
+      @after-leave="afterLeave"
+    >
+      <view v-if="options.length">
+        <view
+          v-for="(item, index) in options"
+          :key="index"
+          @click="choose(index)"
+          :class="`wd-drop-item__option ${(item[valueKey] !== '' ? item[valueKey] : item) === modelValue ? 'is-active' : ''}`"
+        >
+          <view :class="`wd-drop-item__title ${customTitle}`">
+            <text>{{ item[labelKey] ? item[labelKey] : item }}</text>
+            <text v-if="item[tipKey]" class="wd-drop-item__tip">{{ item[tipKey] }}</text>
+          </view>
+          <wd-icon
+            v-if="(item[valueKey] !== '' ? item[valueKey] : item) === modelValue"
+            :name="iconName"
+            size="20px"
+            :class="`wd-drop-item__icon ${customIcon}`"
+          />
+        </view>
+      </view>
+      <slot v-else />
+    </wd-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-drop-menu-item',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, ref, watch } from 'vue'
+import { pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import type { PopupType } from '../wd-popup/types'
+import { useParent } from '../composables/useParent'
+import { DROP_MENU_KEY } from '../wd-drop-menu/types'
+import { isDef, isFunction } from '../common/util'
+import { dorpMenuItemProps, type DropMenuItemExpose } from './types'
+
+const props = defineProps(dorpMenuItemProps)
+const emit = defineEmits(['change', 'update:modelValue', 'open', 'opened', 'closed', 'close'])
+
+const queue = inject<Queue | null>(queueKey, null)
+const showWrapper = ref<boolean>(false)
+const showPop = ref<boolean>(false)
+const position = ref<PopupType>()
+const zIndex = ref<number>(12)
+const modal = ref<boolean>(true)
+const duration = ref<number>(0)
+
+const { parent: dropMenu } = useParent(DROP_MENU_KEY)
+
+const { proxy } = getCurrentInstance() as any
+
+const positionStyle = computed(() => {
+  let style: string = ''
+  if (showWrapper.value && dropMenu) {
+    style =
+      dropMenu.props.direction === 'down'
+        ? `top: calc(var(--window-top) + ${dropMenu.offset.value}px); bottom: 0;`
+        : `top: 0; bottom: calc(var(--window-bottom) + ${dropMenu.offset.value}px)`
+  } else {
+    style = ''
+  }
+  return style
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (isDef(newValue) && typeof newValue !== 'number' && typeof newValue !== 'string') {
+      console.error('[wot-design] warning(wd-drop-menu-item): the type of value should be a number or a string.')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function getShowPop() {
+  return showPop.value
+}
+// 模拟单选操作 默认根据 value 选中操作
+function choose(index: number) {
+  if (props.disabled) return
+  const { valueKey } = props
+  const item = props.options[index]
+  const newValue = item[valueKey] !== undefined ? item[valueKey] : item
+  emit('update:modelValue', newValue)
+  emit('change', {
+    value: newValue,
+    selectedItem: item
+  })
+  close()
+}
+// 外部关闭弹出框
+function close() {
+  if (!showPop.value) {
+    return
+  }
+  if (isFunction(props.beforeToggle)) {
+    props.beforeToggle({
+      status: false,
+      resolve: (isPass: boolean) => {
+        isPass && handleClose()
+      }
+    })
+  } else {
+    handleClose()
+  }
+}
+
+function handleClose() {
+  if (showPop.value) {
+    showPop.value = false
+  }
+}
+
+function open() {
+  if (showPop.value) {
+    return
+  }
+  if (isFunction(props.beforeToggle)) {
+    props.beforeToggle({
+      status: true,
+      resolve: (isPass) => {
+        isPass && handleOpen()
+      }
+    })
+  } else {
+    handleOpen()
+  }
+}
+
+function handleOpen() {
+  showWrapper.value = true
+  showPop.value = true
+  if (dropMenu) {
+    modal.value = Boolean(dropMenu.props.modal)
+    duration.value = Number(dropMenu.props.duration)
+    position.value = dropMenu.props.direction === 'down' ? 'top' : 'bottom'
+  }
+}
+
+function toggle() {
+  if (showPop.value) {
+    close()
+  } else {
+    open()
+  }
+}
+
+function afterLeave() {
+  showWrapper.value = false
+  emit('closed')
+}
+function beforeEnter() {
+  emit('open')
+}
+function afterEnter() {
+  emit('opened')
+}
+function beforeLeave() {
+  emit('close')
+}
+
+defineExpose<DropMenuItemExpose>({ getShowPop, open, close, toggle })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu/index.scss b/src/uni_modules/wot-design-uni/components/wd-drop-menu/index.scss
new file mode 100644
index 0000000..eb78d6e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu/index.scss
@@ -0,0 +1,89 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(drop-menu) {
+    color: $-dark-color;
+    @include e(list) {
+      background-color: $-dark-background2;
+    }
+
+    @include e(item) {
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(drop-menu) {
+  box-sizing: border-box;
+  color: $-drop-menu-color;
+  font-size: $-drop-menu-fs;
+  position: relative;
+
+  @include e(list) {
+    display: flex;
+    text-align: center;
+    background-color: #fff;
+  }
+  @include e(item) {
+    flex: 1;
+    min-width: 0;
+    height: $-drop-menu-height;
+    line-height: $-drop-menu-height;
+    text-align: center;
+
+    @include when(active) {
+      font-weight: $-fw-medium;
+
+      .wd-drop-menu__item-title::after {
+        opacity: 1;
+      }
+      :deep(.wd-drop-menu__arrow) {
+        transform: scale(0.6) rotate(-180deg);
+        transform-origin: center center;
+      }
+    }
+    @include when(disabled) {
+      color: $-drop-menu-disabled-color;
+    }
+  }
+
+  @include e(item-title) {
+    position: relative;
+    display: inline-block;
+    max-width: 100%;
+    padding: 0 $-drop-menu-side-padding;
+    box-sizing: border-box;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: 19px;
+      height: $-drop-menu-line-height;
+      bottom: 6px;
+      left: 50%;
+      transform: translate(-50%, 0);
+      background: $-drop-menu-line-color;
+      border-radius: $-drop-menu-line-height;
+      transition: opacity .15s;
+      opacity: 0;
+    }
+  }
+
+  @include e(item-title-text) {
+    position: relative;
+    @include lineEllipsis;
+  }
+
+  @include edeep(arrow) {
+    position: absolute;
+    display: inline-block;
+    top: 0;
+    right: -4px;
+    transition: transform 0.3s;
+    transform: scale(0.6);
+    font-size: $-drop-menu-arrow-fs;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu/types.ts b/src/uni_modules/wot-design-uni/components/wd-drop-menu/types.ts
new file mode 100644
index 0000000..339e7bb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu/types.ts
@@ -0,0 +1,38 @@
+import { type ExtractPropTypes, type InjectionKey, type Ref } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type DropDirction = 'up' | 'down'
+
+export type DropMenuProvide = {
+  props: Partial<DropMenuProps>
+  fold: (child?: any) => void
+  offset: Ref<number>
+}
+
+export const DROP_MENU_KEY: InjectionKey<DropMenuProvide> = Symbol('wd-drop-menu')
+
+export const dropMenuProps = {
+  ...baseProps,
+  /**
+   * 弹框层级
+   */
+  zIndex: makeNumberProp(12),
+  /**
+   * 菜单展开方向，可选值为up 或 down
+   */
+  direction: makeStringProp<DropDirction>('down'),
+  /**
+   * 是否展示蒙层
+   */
+  modal: makeBooleanProp(true),
+  /**
+   * 是否点击蒙层时关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 菜单展开收起动画时间，单位 ms
+   */
+  duration: makeNumberProp(200)
+}
+
+export type DropMenuProps = ExtractPropTypes<typeof dropMenuProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue b/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
new file mode 100644
index 0000000..49c327d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-drop-menu/wd-drop-menu.vue
@@ -0,0 +1,158 @@
+<template>
+  <view :style="customStyle" :class="`wd-drop-menu ${customClass}`" @click.stop.prevent="noop" :id="dropMenuId">
+    <wd-overlay :show="overlayVisible" :duration="duration" :z-index="12" :custom-style="modalStyle" @click="handleClickOverlay" @touchmove="noop" />
+
+    <!-- #ifdef MP-DINGTALK -->
+    <view :id="dropMenuId">
+      <!-- #endif -->
+      <view class="wd-drop-menu__list">
+        <view
+          v-for="(child, index) in children"
+          :key="index"
+          @click="toggle(child)"
+          :class="`wd-drop-menu__item ${child.disabled ? 'is-disabled' : ''} ${child.$.exposed!.getShowPop() ? 'is-active' : ''}`"
+        >
+          <view class="wd-drop-menu__item-title">
+            <view class="wd-drop-menu__item-title-text">{{ getDisplayTitle(child) }}</view>
+            <wd-icon :name="child.icon" :size="child.iconSize" custom-class="wd-drop-menu__arrow" />
+          </view>
+        </view>
+      </view>
+      <slot />
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-drop-menu',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, inject, onBeforeMount, ref, watch } from 'vue'
+import { closeOther } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { getRect, uuid } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { DROP_MENU_KEY, dropMenuProps } from './types'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
+
+const props = defineProps(dropMenuProps)
+const queue = inject<Queue | null>(queueKey, null)
+const dropMenuId = ref<string>(`dropMenuId${uuid()}`)
+const offset = ref<number>(0)
+const windowHeight = ref<number>(0)
+const modalStyle = computed(() => {
+  return props.direction === 'down'
+    ? `top: calc(var(--window-top) + ${offset.value}px); bottom: 0;`
+    : `top: 0; bottom: calc(var(--window-bottom) + ${offset.value}px)`
+})
+
+const { proxy } = getCurrentInstance() as any
+
+const { linkChildren, children } = useChildren(DROP_MENU_KEY)
+
+const showOverlay = computed(() => {
+  return children.some((child) => child.$.exposed!.getShowPop())
+})
+
+const overlayVisible = ref(false)
+let overlayTimer: ReturnType<typeof setTimeout> | null
+
+// 延迟关闭遮罩层，避免闪烁
+// 小程序中，即使先 fold 再 closeOther 也会有闪烁，使用延迟关闭遮罩层处理
+watch(showOverlay, (newVal) => {
+  if (overlayTimer) {
+    clearTimeout(overlayTimer)
+  }
+  if (newVal) {
+    overlayVisible.value = true
+  } else {
+    overlayTimer = setTimeout(() => {
+      overlayVisible.value = false
+      overlayTimer = null
+    }, 16)
+  }
+})
+
+linkChildren({ props, fold, offset })
+
+watch(
+  () => props.direction,
+  (newValue) => {
+    if (!['up', 'down'].includes(newValue)) {
+      // eslint-disable-next-line quotes
+      console.error("[wot design] warning(wd-drop-menu): direction must be 'up' or 'down'")
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+onBeforeMount(() => {
+  windowHeight.value = uni.getSystemInfoSync().windowHeight
+})
+
+function noop() {}
+
+function getDisplayTitle(child: any) {
+  const { title, modelValue, options, valueKey, labelKey } = child
+
+  if (title) {
+    return title
+  }
+  for (let i = 0, len = options.length; i < len; i++) {
+    if (modelValue === options[i][valueKey]) {
+      return options[i][labelKey]
+    }
+  }
+  console.error('[wot-design] warning(wd-drop-menu-item): no value is matched in the options option.')
+}
+
+function toggle(child: any) {
+  // 点击当前 menu, 关闭其他 menu
+  if (child && !child.disabled) {
+    if (queue && queue.closeOther) {
+      queue.closeOther(child)
+    } else {
+      closeOther(child)
+    }
+    fold(child)
+  }
+}
+
+/**
+ * 控制菜单内容是否展开
+ */
+function fold(child: any) {
+  getRect(`#${dropMenuId.value}`, false, proxy).then((rect) => {
+    if (!rect) return
+    const { top, bottom } = rect
+    if (props.direction === 'down') {
+      offset.value = Number(bottom)
+    } else {
+      offset.value = windowHeight.value - Number(top)
+    }
+    child.$.exposed!.toggle()
+  })
+}
+
+function handleClickOverlay() {
+  if (props.closeOnClickModal) {
+    // 关闭所有打开的菜单项
+    children.forEach((child) => {
+      child.$.exposed!.close()
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-fab/index.scss b/src/uni_modules/wot-design-uni/components/wd-fab/index.scss
new file mode 100644
index 0000000..16addbf
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-fab/index.scss
@@ -0,0 +1,116 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(fab) {}
+}
+
+@include b(fab) {
+  position: fixed;
+  z-index: 99;
+
+  @include edeep(trigger) {
+    min-width: auto !important;
+    box-sizing: border-box;
+    width: $-fab-trigger-width !important;
+    height: $-fab-trigger-height !important;
+    border-radius: calc($-fab-trigger-height / 2) !important;
+  }
+
+  :deep() {
+    @include e(actions) {
+      position: absolute;
+      z-index: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      padding: $-fab-actions-padding 0;
+
+      @include m(left, right) {
+        height: 100%;
+        top: 0;
+        padding: 0 $-fab-actions-padding;
+      }
+
+      @include m(left) {
+        flex-direction: row-reverse;
+        right: 100%;
+      }
+
+      @include m(right) {
+        flex-direction: row;
+        left: 100%;
+      }
+
+      @include m(top, bottom) {
+        width: 100%;
+        left: 0;
+      }
+
+      @include m(top) {
+        flex-direction: column-reverse;
+        bottom: 100%;
+      }
+
+      @include m(bottom) {
+        flex-direction: column;
+        top: 100%;
+      }
+    }
+
+    // 动画
+    @include e(transition-enter-active, transition-leave-active) {
+      transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    }
+
+
+    @include e(transition-enter) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY(40px);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(-40px);
+      }
+    }
+
+    @include e(transition-leave-to) {
+      @include m(top) {
+        opacity: 0;
+        transform: translateY(40px);
+      }
+
+      @include m(bottom) {
+        opacity: 0;
+        transform: translateY(-40px);
+      }
+
+      @include m(left) {
+        opacity: 0;
+        transform: translateX(40px);
+      }
+
+      @include m(right) {
+        opacity: 0;
+        transform: translateX(-40px);
+      }
+    }
+
+  }
+
+  @include edeep(icon) {
+    font-size: $-fab-icon-fs;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-fab/types.ts b/src/uni_modules/wot-design-uni/components/wd-fab/types.ts
new file mode 100644
index 0000000..269b127
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-fab/types.ts
@@ -0,0 +1,66 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { PropType } from 'vue'
+
+export type FabType = 'primary' | 'success' | 'info' | 'warning' | 'error' | 'default'
+export type FabPosition = 'left-top' | 'right-top' | 'left-bottom' | 'right-bottom' | 'left-center' | 'right-center' | 'top-center' | 'bottom-center'
+export type FabDirection = 'top' | 'right' | 'bottom' | 'left'
+export type FabGap = Partial<Record<FabDirection, number>>
+export const fabProps = {
+  ...baseProps,
+  /**
+   * 是否激活
+   */
+  active: makeBooleanProp(false),
+  /**
+   * 类型，可选值为 default primary info success warning error
+   */
+  type: makeStringProp<FabType>('primary'),
+  /**
+   * 悬浮按钮位置，可选值为 left-top right-top left-bottom right-bottom left-center right-center top-center bottom-center
+   */
+  position: makeStringProp<FabPosition>('right-bottom'),
+  /**
+   * 悬浮按钮菜单弹出方向，可选值为 top bottom left right
+   */
+  direction: makeStringProp<FabDirection>('top'),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 悬浮按钮未展开时的图标
+   */
+  inactiveIcon: makeStringProp('add'),
+  /**
+   * 悬浮按钮展开时的图标
+   */
+  activeIcon: makeStringProp('close'),
+  /**
+   * 自定义悬浮按钮层级
+   */
+  zIndex: makeNumberProp(99),
+  /**
+   * 是否可拖动
+   */
+  draggable: makeBooleanProp(false),
+  gap: {
+    type: Object as PropType<FabGap>,
+    default: () => ({})
+  },
+  /**
+   * 用于控制点击时是否展开菜单
+   */
+  expandable: makeBooleanProp(true)
+}
+
+export type FabProps = ExtractPropTypes<typeof fabProps>
+
+export type FabExpose = {
+  // 展开菜单
+  open: () => void
+  // 收起菜单
+  close: () => void
+}
+
+export type FabInstance = ComponentPublicInstance<FabProps, FabExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue b/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue
new file mode 100644
index 0000000..aff2605
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-fab/wd-fab.vue
@@ -0,0 +1,276 @@
+<template>
+  <view
+    @touchmove.stop.prevent="handleTouchMove"
+    @touchstart="handleTouchStart"
+    @touchend="handleTouchEnd"
+    :class="`wd-fab ${customClass}`"
+    :style="rootStyle"
+    @click.stop=""
+  >
+    <view @click.stop="" :style="{ visibility: inited ? 'visible' : 'hidden' }" id="trigger">
+      <slot name="trigger" v-if="$slots.trigger"></slot>
+      <wd-button v-else @click="handleClick" custom-class="wd-fab__trigger" round :type="type" :disabled="disabled">
+        <wd-icon custom-class="wd-fab__icon" :name="isActive ? activeIcon : inactiveIcon"></wd-icon>
+      </wd-button>
+    </view>
+    <wd-transition
+      v-if="expandable"
+      :enter-class="`wd-fab__transition-enter--${fabDirection}`"
+      enter-active-class="wd-fab__transition-enter-active"
+      :leave-to-class="`wd-fab__transition-leave-to--${fabDirection}`"
+      leave-active-class="wd-fab__transition-leave-active"
+      :custom-class="`wd-fab__actions wd-fab__actions--${fabDirection}`"
+      :show="isActive"
+      :duration="300"
+    >
+      <slot></slot>
+    </wd-transition>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-fab',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdButton from '../wd-button/wd-button.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { type CSSProperties, computed, ref, watch, inject, getCurrentInstance, onBeforeUnmount, onMounted, nextTick } from 'vue'
+import { getRect, isDef, isH5, objToStyle } from '../common/util'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { fabProps, type FabExpose } from './types'
+import { reactive } from 'vue'
+import { useRaf } from '../composables/useRaf'
+
+const props = defineProps(fabProps)
+const emit = defineEmits(['update:active', 'click'])
+const inited = ref<boolean>(false) // 是否初始化完成
+const isActive = ref<boolean>(false) // 是否激活状态
+const queue = inject<Queue | null>(queueKey, null)
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.active,
+  (newValue) => {
+    isActive.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => isActive.value,
+  (newValue) => {
+    if (newValue) {
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+  }
+)
+
+const fabDirection = ref(props.direction)
+
+watch(
+  () => props.direction,
+  (direction) => (fabDirection.value = direction)
+)
+
+watch(
+  () => props.position,
+  () => initPosition()
+)
+
+const top = ref<number>(0)
+const left = ref<number>(0)
+const screen = reactive({ width: 0, height: 0 })
+const fabSize = reactive({ width: 56, height: 56 })
+const bounding = reactive({
+  minTop: 0,
+  minLeft: 0,
+  maxTop: 0,
+  maxLeft: 0
+})
+
+async function getBounding() {
+  const sysInfo = uni.getSystemInfoSync()
+  try {
+    const trigerInfo = await getRect('#trigger', false, proxy)
+    fabSize.width = trigerInfo.width || 56
+    fabSize.height = trigerInfo.height || 56
+  } catch (error) {
+    console.log(error)
+  }
+
+  const { top = 16, left = 16, right = 16, bottom = 16 } = props.gap
+  screen.width = sysInfo.windowWidth
+  screen.height = isH5 ? sysInfo.windowTop + sysInfo.windowHeight : sysInfo.windowHeight
+  bounding.minTop = isH5 ? sysInfo.windowTop + top : top
+  bounding.minLeft = left
+  bounding.maxLeft = screen.width - fabSize.width - right
+  bounding.maxTop = screen.height - fabSize.height - bottom
+}
+
+function initPosition() {
+  const pos = props.position
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  const centerY = (maxTop + minTop) / 2
+  const centerX = (maxLeft + minLeft) / 2
+
+  switch (pos) {
+    case 'left-top':
+      top.value = minTop
+      left.value = minLeft
+      break
+    case 'right-top':
+      top.value = minTop
+      left.value = maxLeft
+      break
+    case 'left-bottom':
+      top.value = maxTop
+      left.value = minLeft
+      break
+    case 'right-bottom':
+      top.value = maxTop
+      left.value = maxLeft
+      break
+    case 'left-center':
+      top.value = centerY
+      left.value = minLeft
+      break
+    case 'right-center':
+      top.value = centerY
+      left.value = maxLeft
+      break
+    case 'top-center':
+      top.value = minTop
+      left.value = centerX
+      break
+    case 'bottom-center':
+      top.value = maxTop
+      left.value = centerX
+      break
+  }
+}
+
+// 按下时坐标相对于元素的偏移量
+const touchOffset = reactive({ x: 0, y: 0 })
+const attractTransition = ref<boolean>(false)
+function handleTouchStart(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  touchOffset.x = touch.clientX - left.value
+  touchOffset.y = touch.clientY - top.value
+  attractTransition.value = false
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (props.draggable === false) return
+
+  const touch = e.touches[0]
+  const { minLeft, minTop, maxLeft, maxTop } = bounding
+  let x = touch.clientX - touchOffset.x
+  let y = touch.clientY - touchOffset.y
+
+  if (x < minLeft) x = minLeft
+  else if (x > maxLeft) x = maxLeft
+
+  if (y < minTop) y = minTop
+  else if (y > maxTop) y = maxTop
+
+  top.value = y
+  left.value = x
+}
+
+function handleTouchEnd() {
+  if (props.draggable === false) return
+
+  const screenCenterX = screen.width / 2
+  const fabCenterX = left.value + fabSize.width / 2
+  attractTransition.value = true
+  if (fabCenterX < screenCenterX) {
+    left.value = bounding.minLeft
+    fabDirection.value = 'right'
+  } else {
+    left.value = bounding.maxLeft
+    fabDirection.value = 'left'
+  }
+}
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    top: top.value + 'px',
+    left: left.value + 'px',
+    transition: attractTransition.value ? 'all ease 0.3s' : 'none'
+  }
+  if (isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+onMounted(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+
+  const { start } = useRaf(async () => {
+    await getBounding()
+    initPosition()
+    inited.value = true
+  })
+  start()
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  if (!props.expandable) {
+    emit('click')
+    return
+  }
+  isActive.value = !isActive.value
+  emit('update:active', isActive.value)
+}
+
+function open() {
+  isActive.value = true
+  emit('update:active', true)
+}
+
+function close() {
+  isActive.value = false
+  emit('update:active', false)
+}
+
+defineExpose<FabExpose>({
+  open,
+  close
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-floating-panel/index.scss b/src/uni_modules/wot-design-uni/components/wd-floating-panel/index.scss
new file mode 100644
index 0000000..8fdaaa6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-floating-panel/index.scss
@@ -0,0 +1,64 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(floating-panel) {
+    background: $-dark-background2;
+
+    @include e(content) {
+      background: $-dark-background2;
+    }
+  }
+}
+
+@include b(floating-panel) {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: $-floating-panel-z-index;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  width: 100vw;
+  border-top-left-radius: $-floating-panel-radius;
+  border-top-right-radius: $-floating-panel-radius;
+  background-color: $-floating-panel-bg;
+  touch-action: none;
+  will-change: transform;
+  @include when(safe) {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  &::after {
+    position: absolute;
+    bottom: -100vh;
+    display: block;
+    width: 100vw;
+    height: 100vh;
+    content: '';
+    background-color: inherit;
+  }
+
+  @include e(header) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: $-floating-panel-header-height;
+    cursor: grab;
+    user-select: none;
+    &-bar {
+      width: $-floating-panel-bar-width;
+      height: $-floating-panel-bar-height;
+      background-color: $-floating-panel-bar-bg;
+      border-radius: $-floating-panel-bar-radius;
+    }
+  }
+
+  @include e(content) {
+    flex: 1;
+    min-width: 0;
+    min-height: 0;
+    background-color: $-floating-panel-content-bg;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-floating-panel/type.ts b/src/uni_modules/wot-design-uni/components/wd-floating-panel/type.ts
new file mode 100644
index 0000000..af0bc9d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-floating-panel/type.ts
@@ -0,0 +1,32 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, truthProp } from '../common/props'
+
+export const floatingPanelProps = {
+  ...baseProps,
+  /**
+   * 面板的显示高度
+   */
+  height: makeNumberProp(0),
+  /**
+   * 设置自定义锚点，默认值 [100, windowHeight * 0.6]
+   */
+  anchors: makeArrayProp<number>(),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 是否显示滚动条，默认值为 true
+   */
+  showScrollbar: truthProp,
+  /**
+   * 动画时长，单位毫秒，默认值为 300ms
+   */
+  duration: makeNumericProp(300),
+  /**
+   * 是否允许内容区容器拖拽，默认值为 true
+   */
+  contentDraggable: truthProp
+}
+
+export type FloatingPanelProps = ExtractPropTypes<typeof floatingPanelProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue b/src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue
new file mode 100644
index 0000000..0f92ec4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-floating-panel/wd-floating-panel.vue
@@ -0,0 +1,140 @@
+<template>
+  <view
+    :class="`wd-floating-panel ${customClass} ${safeAreaInsetBottom ? 'is-safe' : ''}`"
+    :style="rootStyle"
+    @touchstart.passive="handleTouchStart"
+    @touchmove.passive="handleTouchMove"
+    @touchend="handleTouchEnd"
+    @touchcancel="handleTouchEnd"
+  >
+    <view :class="`wd-floating-panel__header`">
+      <view :class="`wd-floating-panel__header-bar`"></view>
+    </view>
+
+    <scroll-view
+      :class="`wd-floating-panel__content`"
+      data-id="content"
+      :show-scrollbar="showScrollbar"
+      scroll-y
+      @touchmove.stop.prevent="handleTouchMove"
+    >
+      <slot />
+    </scroll-view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-floating-panel',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import { floatingPanelProps } from './type'
+import { addUnit, closest, objToStyle } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+
+const touch = useTouch()
+
+const props = defineProps(floatingPanelProps)
+const emit = defineEmits(['update:height', 'height-change'])
+
+const heightValue = ref<number>(props.height)
+
+const DAMP = 0.2 // 阻尼系数
+let startY: number // 起始位置
+const windowHeight = ref<number>(0)
+const dragging = ref<boolean>(false) // 是否正在拖拽
+
+const boundary = computed(() => ({
+  min: props.anchors[0] ? props.anchors[0] : 100,
+  max: props.anchors[props.anchors.length - 1] ? props.anchors[props.anchors.length - 1] : Math.round(windowHeight.value * 0.6)
+}))
+
+const anchors = computed(() => (props.anchors.length >= 2 ? props.anchors : [boundary.value.min, boundary.value.max]))
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    height: addUnit(boundary.value.max),
+    transform: `translateY(calc(100% + ${addUnit(-heightValue.value)}))`,
+    transition: !dragging.value ? `transform ${props.duration}ms cubic-bezier(0.18, 0.89, 0.32, 1.28)` : 'none'
+  }
+
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const updateHeight = (value: number) => {
+  heightValue.value = value
+  emit('update:height', value)
+}
+
+const handleTouchStart = (event: TouchEvent) => {
+  touch.touchStart(event)
+  dragging.value = true
+  startY = -heightValue.value
+}
+
+const handleTouchMove = (event: TouchEvent) => {
+  const target = event.currentTarget as any
+  if (target.dataset.id == 'content') {
+    if (!props.contentDraggable) return
+  }
+  touch.touchMove(event)
+  const moveY = touch.deltaY.value + startY
+  updateHeight(-ease(moveY))
+}
+
+const handleTouchEnd = () => {
+  dragging.value = false
+  updateHeight(closest(anchors.value, heightValue.value))
+
+  if (heightValue.value !== -startY) {
+    emit('height-change', { height: heightValue.value })
+  }
+}
+
+const ease = (y: number) => {
+  const absDistance = Math.abs(y)
+  const { min, max } = boundary.value
+
+  if (absDistance > max) {
+    return -(max + (absDistance - max) * DAMP)
+  }
+
+  if (absDistance < min) {
+    return -(min - (min - absDistance) * DAMP)
+  }
+
+  return y
+}
+
+watch(
+  () => props.height,
+  (value) => {
+    heightValue.value = value
+  }
+)
+
+watch(
+  boundary,
+  () => {
+    updateHeight(closest(anchors.value, heightValue.value))
+  },
+  { immediate: true }
+)
+
+onBeforeMount(() => {
+  const { windowHeight: _windowHeight } = uni.getSystemInfoSync()
+  windowHeight.value = _windowHeight
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-form-item/index.scss b/src/uni_modules/wot-design-uni/components/wd-form-item/index.scss
new file mode 100644
index 0000000..9bf9400
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-form-item/index.scss
@@ -0,0 +1,18 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(form-item) {
+  }
+}
+
+
+@include b(form-item) {
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-form-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-form-item/types.ts
new file mode 100644
index 0000000..ed1a4e2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-form-item/types.ts
@@ -0,0 +1,16 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+
+export const formItemProps = {
+  ...baseProps,
+  prop: makeRequiredProp(String),
+  rules: makeArrayProp<FormItemRule>(),
+  required: Boolean,
+  center: makeBooleanProp(false),
+  label: String,
+  labelWidth: makeStringProp('100px'),
+  isLink: Boolean
+}
+
+export type FormItemProps = ExtractPropTypes<typeof formItemProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue b/src/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue
new file mode 100644
index 0000000..c3a36d3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue
@@ -0,0 +1,65 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-12-14 11:21:58
+ * @LastEditTime: 2024-03-15 21:29:33
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-form-item/wd-form-item.vue
+ * 记得注释
+-->
+<template>
+  <wd-cell
+    custom-class="wd-form-item"
+    :required="required"
+    :title="label"
+    :center="center"
+    :border="border"
+    :title-width="labelWidth"
+    :is-link="isLink"
+  >
+    <slot></slot>
+    <view v-if="errorMessage" class="wd-form-item__error-message">{{ errorMessage }}</view>
+  </wd-cell>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-form-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import WdCell from '../wd-cell/wd-cell.vue'
+import { FORM_KEY } from '../wd-form/types'
+import { formItemProps } from './types'
+
+const props = defineProps(formItemProps)
+
+const { parent: form, index } = useParent(FORM_KEY)
+
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+const border = computed(() => {
+  if (index.value > 0 && form && form.props.border) {
+    return true
+  } else {
+    return false
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-form/index.scss b/src/uni_modules/wot-design-uni/components/wd-form/index.scss
new file mode 100644
index 0000000..44acaeb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-form/index.scss
@@ -0,0 +1,10 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(form) {
+  }
+}
+
+@include b(form) {
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-form/types.ts b/src/uni_modules/wot-design-uni/components/wd-form/types.ts
new file mode 100644
index 0000000..87c1044
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-form/types.ts
@@ -0,0 +1,85 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-12-14 11:21:58
+ * @LastEditTime: 2025-01-11 13:31:20
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-form/types.ts
+ * 记得注释
+ */
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp } from '../common/props'
+
+export type FormProvide = {
+  props: {
+    model: Record<string, any>
+    rules?: FormRules
+    border?: boolean
+  }
+  errorMessages?: Record<string, string>
+}
+
+export const FORM_KEY: InjectionKey<FormProvide> = Symbol('wd-form')
+
+export type FormRules = {
+  [key: string]: FormItemRule[]
+}
+
+export type ErrorMessage = {
+  prop: string
+  message: string
+}
+
+export interface FormItemRule {
+  [key: string]: any
+  required: boolean
+  message: string
+  pattern?: RegExp
+  validator?: (value: any, rule: FormItemRuleWithoutValidator) => boolean | Promise<string> | Promise<boolean> | Promise<void> | Promise<unknown>
+}
+
+export type FormItemRuleWithoutValidator = Omit<FormItemRule, 'validator'>
+
+export const formProps = {
+  ...baseProps,
+  /**
+   * 表单数据对象
+   */
+  model: makeRequiredProp(Object as PropType<Record<string, any>>),
+  /**
+   * 表单验证规则
+   */
+  rules: {
+    type: Object as PropType<FormRules>,
+    default: () => ({})
+  },
+  /**
+   * 是否在输入时重置表单校验信息
+   */
+  resetOnChange: makeBooleanProp(true),
+  /**
+   * 错误提示类型
+   */
+  errorType: {
+    type: String as PropType<'toast' | 'message' | 'none'>,
+    default: 'message'
+  }
+}
+export type FormProps = ExtractPropTypes<typeof formProps>
+
+export type FormExpose = {
+  /**
+   * 表单校验
+   * @param prop 指定校验字段
+   */
+  validate: (prop?: string | Array<string>) => Promise<{
+    valid: boolean
+    errors: ErrorMessage[]
+  }>
+  /**
+   * 重置表单项的验证提示
+   */
+  reset: () => void
+}
+
+export type FormInstance = ComponentPublicInstance<FormProps, FormExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue b/src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue
new file mode 100644
index 0000000..6acf7ab
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-form/wd-form.vue
@@ -0,0 +1,209 @@
+<template>
+  <view :class="`wd-form ${customClass}`" :style="customStyle">
+    <slot></slot>
+    <wd-toast v-if="props.errorType === 'toast'" selector="wd-form-toast" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-form',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdToast from '../wd-toast/wd-toast.vue'
+import { reactive, watch } from 'vue'
+import { deepClone, getPropByPath, isArray, isDef, isPromise, isString } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { useToast } from '../wd-toast'
+import { type FormRules, FORM_KEY, type ErrorMessage, formProps, type FormExpose } from './types'
+
+const { show: showToast } = useToast('wd-form-toast')
+const props = defineProps(formProps)
+
+const { children, linkChildren } = useChildren(FORM_KEY)
+let errorMessages = reactive<Record<string, string>>({})
+
+linkChildren({ props, errorMessages })
+
+watch(
+  () => props.model,
+  () => {
+    if (props.resetOnChange) {
+      clearMessage()
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+/**
+ * 表单校验
+ * @param prop 指定校验字段或字段数组
+ */
+async function validate(prop?: string | string[]): Promise<{ valid: boolean; errors: ErrorMessage[] }> {
+  const errors: ErrorMessage[] = []
+  let valid: boolean = true
+  const promises: Promise<void>[] = []
+  const formRules: FormRules = getMergeRules()
+  const propsToValidate = isArray(prop) ? prop : isDef(prop) ? [prop] : []
+  const rulesToValidate: FormRules =
+    propsToValidate.length > 0
+      ? propsToValidate.reduce((acc, key) => {
+          if (formRules[key]) {
+            acc[key] = formRules[key]
+          }
+          return acc
+        }, {} as FormRules)
+      : formRules
+
+  for (const propName in rulesToValidate) {
+    const rules = rulesToValidate[propName]
+    const value = getPropByPath(props.model, propName)
+
+    if (rules && rules.length > 0) {
+      for (const rule of rules) {
+        if (rule.required && (!isDef(value) || value === '')) {
+          errors.push({
+            prop: propName,
+            message: rule.message
+          })
+          valid = false
+          break
+        }
+        if (rule.pattern && !rule.pattern.test(value)) {
+          errors.push({
+            prop: propName,
+            message: rule.message
+          })
+          valid = false
+          break
+        }
+        const { validator, ...ruleWithoutValidator } = rule
+        if (validator) {
+          const result = validator(value, ruleWithoutValidator)
+          if (isPromise(result)) {
+            promises.push(
+              result
+                .then((res) => {
+                  if (typeof res === 'string') {
+                    errors.push({
+                      prop: propName,
+                      message: res
+                    })
+                    valid = false
+                  } else if (typeof res === 'boolean' && !res) {
+                    errors.push({
+                      prop: propName,
+                      message: rule.message
+                    })
+                    valid = false
+                  }
+                })
+                .catch((error?: string | Error) => {
+                  const message = isDef(error) ? (isString(error) ? error : error.message || rule.message) : rule.message
+                  errors.push({ prop: propName, message })
+                  valid = false
+                })
+            )
+          } else {
+            if (!result) {
+              errors.push({
+                prop: propName,
+                message: rule.message
+              })
+              valid = false
+            }
+          }
+        }
+      }
+    }
+  }
+
+  await Promise.all(promises)
+
+  showMessage(errors)
+
+  if (valid) {
+    if (propsToValidate.length) {
+      propsToValidate.forEach(clearMessage)
+    } else {
+      clearMessage()
+    }
+  }
+
+  return {
+    valid,
+    errors
+  }
+}
+
+// 合并子组件的rules到父组件的rules
+function getMergeRules() {
+  const mergedRules: FormRules = deepClone(props.rules)
+  const childrenProps = children.map((child) => child.prop)
+
+  // 过滤掉在 children 中不存在对应子组件的规则
+  Object.keys(mergedRules).forEach((key) => {
+    if (!childrenProps.includes(key)) {
+      delete mergedRules[key]
+    }
+  })
+
+  children.forEach((item) => {
+    if (isDef(item.prop) && isDef(item.rules) && item.rules.length) {
+      if (mergedRules[item.prop]) {
+        mergedRules[item.prop] = [...mergedRules[item.prop], ...item.rules]
+      } else {
+        mergedRules[item.prop] = item.rules
+      }
+    }
+  })
+  return mergedRules
+}
+
+function showMessage(errors: ErrorMessage[]) {
+  const childrenProps = children.map((e) => e.prop).filter(Boolean)
+  const messages = errors.filter((error) => error.message && childrenProps.includes(error.prop))
+  if (messages.length) {
+    messages.sort((a, b) => {
+      return childrenProps.indexOf(a.prop) - childrenProps.indexOf(b.prop)
+    })
+    if (props.errorType === 'toast') {
+      showToast(messages[0].message)
+    } else if (props.errorType === 'message') {
+      messages.forEach((error) => {
+        errorMessages[error.prop] = error.message
+      })
+    }
+  }
+}
+
+function clearMessage(prop?: string) {
+  if (prop) {
+    errorMessages[prop] = ''
+  } else {
+    Object.keys(errorMessages).forEach((key) => {
+      errorMessages[key] = ''
+    })
+  }
+}
+
+/**
+ * 重置表单项的验证提示
+ */
+function reset() {
+  clearMessage()
+}
+
+defineExpose<FormExpose>({ validate, reset })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-gap/index.scss b/src/uni_modules/wot-design-uni/components/wd-gap/index.scss
new file mode 100644
index 0000000..3a44d47
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-gap/index.scss
@@ -0,0 +1,9 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+@include b(gap) {
+  @include m(safe) {
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-gap/types.ts b/src/uni_modules/wot-design-uni/components/wd-gap/types.ts
new file mode 100644
index 0000000..c53522e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-gap/types.ts
@@ -0,0 +1,17 @@
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const gapProps = {
+  ...baseProps,
+  /**
+   * 背景颜色
+   */
+  bgColor: makeStringProp('transparent'),
+  /**
+   * 是否开启底部安全区
+   */
+  safeAreaBottom: makeBooleanProp(false),
+  /**
+   * 高度
+   */
+  height: makeNumericProp(15)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue b/src/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue
new file mode 100644
index 0000000..da5c4dd
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-gap/wd-gap.vue
@@ -0,0 +1,36 @@
+<template>
+  <view :class="`wd-gap ${safeAreaBottom ? 'wd-gap--safe' : ''} ${customClass}`" :style="rootStyle"></view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-gap',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { type CSSProperties, computed } from 'vue'
+import { addUnit, isDef, objToStyle } from '../common/util'
+import { gapProps } from './types'
+
+const props = defineProps(gapProps)
+
+const rootStyle = computed(() => {
+  const rootStyle: CSSProperties = {}
+  if (isDef(props.bgColor)) {
+    rootStyle['background'] = props.bgColor
+  }
+  if (isDef(props.height)) {
+    rootStyle['height'] = addUnit(props.height)
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-grid-item/index.scss b/src/uni_modules/wot-design-uni/components/wd-grid-item/index.scss
new file mode 100644
index 0000000..8418409
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-grid-item/index.scss
@@ -0,0 +1,148 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(grid-item) {
+
+    @include when(border) {
+      &::before {
+        background-color: $-dark-border-color;
+      }
+      &::after {
+        background-color: $-dark-border-color;
+      }
+    }
+
+      // 第一行元素
+  @include when(first) {
+    &::after {
+      background-color: $-dark-border-color;
+    }
+  }
+
+
+    @include e(content) {
+      background-color: $-dark-background2;
+
+      @include m(hover) {
+        background-color: $-grid-item-hover-bg-dark !important;
+      }
+    }
+  }
+}
+
+@include b(grid-item) {
+  height: 100%;
+  font-size: $-grid-item-fs;
+  box-sizing: border-box;
+
+  position: relative;
+  float: left;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  overflow: hidden;
+
+  @include when(border) {
+    &::before {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      transform: scaleY(0.5);
+      background-color: $-grid-item-border-color;
+      top: 0;
+      left: 0;
+      z-index: 1;
+    }
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      transform: scaleX(0.5);
+      height: 100%;
+      background-color: $-grid-item-border-color;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  // 第一行元素
+  @include when(first) {
+    &::after {
+      content: "";
+      position: absolute;
+      width: 1px;
+      transform: scaleX(0.5);
+      height: 100%;
+      background-color: $-grid-item-border-color;
+      bottom: 0;
+      right: 0;
+    }
+  }
+
+  // 每行右侧的元素
+  @include when(right) {
+    &::after {
+      display: none;
+    }
+  }
+
+  @include when(last) {
+    &::after {
+      display: none;
+    }
+  }
+  @include e(wrapper) {
+    display: inline-block;
+    margin: 0 auto;
+  }
+
+  @include e(content) {
+    height: 100%;
+    padding: $-grid-item-padding;
+    background-color: $-grid-item-bg;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    @include when(square) {
+      box-sizing: border-box;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      padding: 0;
+      height: 100%;
+    }
+
+    @include when(round) {
+      &::after {
+        content: " ";
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 200%;
+        height: 200%;
+        border: 1px solid $-grid-item-border-color;
+        transform-origin: top left;
+        transform: scale(0.5);
+        box-sizing: border-box;
+      }
+    }
+
+    @include m(hover) {
+      background-color: $-grid-item-hover-bg !important;
+    }
+  }
+
+  @include e(text) {
+    margin-top: 8px;
+    font-size: $-grid-item-fs;
+    line-height: $-grid-item-fs;
+    @include lineEllipsis;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-grid-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-grid-item/types.ts
new file mode 100644
index 0000000..d87e323
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-grid-item/types.ts
@@ -0,0 +1,74 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../common/props'
+import type { BadgeProps, BadgeType } from '../wd-badge/types'
+
+export type LinkType = 'navigateTo' | 'switchTab' | 'reLaunch' | 'redirectTo'
+
+export const gridItemProps = {
+  ...baseProps,
+  /**
+   * GridItem 下方文字样式
+   */
+  customText: makeStringProp(''),
+  /**
+   * GridItem 上方 icon 样式
+   */
+  customIcon: makeStringProp(''),
+  /**
+   * 图标名称，可选值见 wd-icon 组件
+   */
+  icon: makeStringProp(''),
+  /**
+   * 图标大小
+   */
+  iconSize: makeStringProp('26px'),
+  /**
+   * 文字
+   */
+  text: String,
+  /**
+   * 点击后跳转的链接地址
+   */
+  url: String,
+  /**
+   * 页面跳转方式, 参考微信小程序路由文档，可选值：navigateTo / switchTab / reLaunch
+   */
+  linkType: makeStringProp<LinkType>('navigateTo'),
+  /**
+   * 是否开启 GridItem 内容插槽
+   */
+  useSlot: makeBooleanProp(false),
+  /**
+   * 是否开启 GridItem icon 插槽
+   */
+  useIconSlot: makeBooleanProp(false),
+  /**
+   * 是否开启 GridItem text 内容插槽
+   */
+  useTextSlot: makeBooleanProp(false),
+  /**
+   * 是否显示图标右上角小红点
+   */
+  isDot: {
+    type: Boolean,
+    default: undefined
+  },
+  /**
+   * 图标右上角显示的 badge 类型，可选值：primary / success / warning / danger / info
+   */
+  type: String as PropType<BadgeType>,
+  /**
+   * 图标右上角 badge 显示值
+   */
+  value: numericProp,
+  /**
+   * 图标右上角 badge 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
+   */
+  max: Number,
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<Partial<BadgeProps>>
+}
+
+export type GridItemProps = ExtractPropTypes<typeof gridItemProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue b/src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue
new file mode 100644
index 0000000..574bab6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-grid-item/wd-grid-item.vue
@@ -0,0 +1,177 @@
+<template>
+  <view :class="`wd-grid-item ${border && !gutter ? itemClass : ''} ${customClass}`" @click="click" :style="`${style};${customStyle}`">
+    <view
+      :class="`wd-grid-item__content ${square ? 'is-square' : ''} ${border && gutter > 0 ? 'is-round' : ''}`"
+      :style="gutterContentStyle"
+      :hover-class="hoverClass"
+    >
+      <slot v-if="useSlot" />
+      <block v-else>
+        <view :style="'width:' + iconSize + '; height: ' + iconSize" class="wd-grid-item__wrapper">
+          <wd-badge custom-class="badge" v-bind="customBadgeProps">
+            <template v-if="useIconSlot">
+              <slot name="icon" />
+            </template>
+            <wd-icon v-else :name="icon" :size="iconSize" :custom-class="customIcon" />
+          </wd-badge>
+        </view>
+        <slot name="text" v-if="useTextSlot" />
+        <view v-else class="wd-grid-item__text custom-text">{{ text }}</view>
+      </block>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-grid-item',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdBadge from '../wd-badge/wd-badge.vue'
+import { onMounted, ref, watch, computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { GRID_KEY } from '../wd-grid/types'
+import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
+import { gridItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+
+const props = defineProps(gridItemProps)
+const emit = defineEmits(['itemclick'])
+
+const style = ref<string>('')
+const gutterContentStyle = ref<string>('')
+const itemClass = ref<string>('')
+const gutter = ref<number>(0)
+const square = ref<boolean>(false)
+const border = ref<boolean>(true)
+const { parent: grid } = useParent(GRID_KEY)
+
+const childCount = computed(() => {
+  if (isDef(grid) && isDef(grid.children)) {
+    return grid.children.length
+  } else {
+    return 0
+  }
+})
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.value,
+        type: props.type
+      },
+      isUndefined
+    )
+  )
+  return badgeProps
+})
+
+watch(
+  () => childCount.value,
+  () => {
+    if (!grid) return
+    const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / (childCount.value || 1) + '%'
+    // 单独定义间隔
+    const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
+    // 单独定义正方形
+    const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
+    style.value = `width: ${width}; ${squareStyle || gutterStyle}`
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+onMounted(() => {
+  init()
+})
+
+function init() {
+  if (!grid) return
+  const children = grid.children
+  const width = grid.props.column ? 100 / grid.props.column + '%' : 100 / children.length + '%'
+  // 单独定义间隔
+  const gutterStyle = grid.props.gutter ? `padding:${grid.props.gutter}px ${grid.props.gutter}px 0 0; background-color: transparent;` : ''
+  // 单独定义正方形
+  const squareStyle = grid.props.square ? `background-color:transparent; padding-bottom: 0; padding-top:${width}` : ''
+  // 间隔+正方形
+  gutterContentStyle.value =
+    grid.props.gutter && grid.props.square
+      ? `right: ${grid.props.gutter}px; bottom:${grid.props.gutter}px;height: auto; background-color: ${grid.props.bgColor}`
+      : `background-color: ${grid.props.bgColor}`
+
+  border.value = Boolean(grid.props.border)
+  square.value = Boolean(grid.props.square)
+  gutter.value = Number(grid.props.gutter)
+  style.value = `width: ${width}; ${squareStyle || gutterStyle}`
+}
+
+function click() {
+  if (grid && !grid.props.clickable) return
+  const { url, linkType } = props
+  emit('itemclick')
+  if (url) {
+    switch (linkType) {
+      case 'navigateTo':
+        uni.navigateTo({
+          url
+        })
+        break
+      case 'reLaunch':
+        uni.reLaunch({
+          url
+        })
+        break
+      case 'redirectTo':
+        uni.redirectTo({
+          url
+        })
+        break
+      case 'switchTab':
+        uni.switchTab({
+          url
+        })
+        break
+      default:
+        console.error(`[wot-design] warning(wd-grid-item): linkType can not be ${linkType}`)
+        break
+    }
+  }
+}
+/**
+ * 设置样式
+ * @param classes
+ */
+function setiIemClass(classes: string) {
+  itemClass.value = classes
+}
+
+const hoverClass = computed(() => {
+  if (grid?.props.clickable) {
+    return grid.props.hoverClass ? grid.props.hoverClass : 'wd-grid-item__content--hover'
+  }
+  return 'none'
+})
+
+defineExpose({
+  setiIemClass,
+  itemClass,
+  init
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-grid/index.scss b/src/uni_modules/wot-design-uni/components/wd-grid/index.scss
new file mode 100644
index 0000000..6996022
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-grid/index.scss
@@ -0,0 +1,9 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(grid) {
+  position: relative;
+  box-sizing: border-box;
+  overflow: hidden;
+  height: auto;
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-grid/types.ts b/src/uni_modules/wot-design-uni/components/wd-grid/types.ts
new file mode 100644
index 0000000..f0908c2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-grid/types.ts
@@ -0,0 +1,59 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-12-14 11:21:58
+ * @LastEditTime: 2024-03-18 14:38:35
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-grid\types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type GridProvide = {
+  props: {
+    clickable?: boolean
+    square?: boolean
+    column?: number
+    border?: boolean
+    bgColor?: string
+    gutter?: number
+    hoverClass?: string
+  }
+}
+
+export const GRID_KEY: InjectionKey<GridProvide> = Symbol('wd-grid')
+
+export const gridProps = {
+  ...baseProps,
+  /**
+   * 是否开启格子点击反馈
+   */
+  clickable: makeBooleanProp(false),
+  /**
+   * 是否将格子固定为正方形
+   */
+  square: makeBooleanProp(false),
+  /**
+   * 列数
+   */
+  column: Number,
+  /**
+   * 是否显示边框
+   */
+  border: makeBooleanProp(false),
+  /**
+   * 背景颜色
+   */
+  bgColor: makeStringProp(''),
+  /**
+   * 格子之间的间距，默认单位为px
+   */
+  gutter: Number,
+  /**
+   * 自定义内容区域hover-class
+   */
+  hoverClass: String
+}
+
+export type GridProps = ExtractPropTypes<typeof gridProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue b/src/uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue
new file mode 100644
index 0000000..a4e11f7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-grid/wd-grid.vue
@@ -0,0 +1,106 @@
+<template>
+  <view :class="`wd-grid ${customClass}`" :style="rootStyle">
+    <!-- 默认插入的 item -->
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-grid',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, watch } from 'vue'
+import { useChildren } from '../composables/useChildren'
+import { GRID_KEY, gridProps } from './types'
+import { debounce } from '../common/util'
+const nextTick = () => new Promise((resolve) => setTimeout(resolve, 20))
+
+const props = defineProps(gridProps)
+
+// 子元素个数
+const { linkChildren, children } = useChildren(GRID_KEY)
+linkChildren({ props })
+
+watch(
+  () => props.column,
+  (val, oldVal) => {
+    if (val === oldVal) return
+    if (!val || val <= 0) {
+      console.error(
+        'The number of columns attribute value is invalid. The attribute must be greater than 0 and it is not recommended to use a larger value attribute.'
+      )
+    }
+    oldVal && init()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.border,
+  (val) => {
+    val &&
+      Promise.resolve()
+        .then(nextTick)
+        .then(() => {
+          init()
+        })
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => children,
+  () => {
+    handleChildrenChange()
+  },
+  {
+    deep: true
+  }
+)
+
+const rootStyle = computed(() => {
+  return `${props.gutter ? 'padding-left:' + props.gutter + 'px;' + 'padding-bottom:' + props.gutter + 'px;' : ''}${props.customStyle}`
+})
+
+const handleChildrenChange = debounce(() => {
+  init()
+}, 50)
+
+function init() {
+  if (!children) return
+  children.forEach((item, index) => {
+    if (props.border) {
+      const { column } = props
+      if (column) {
+        const isRightItem = children.length - 1 === index || (index + 1) % column === 0
+        const isFirstLine = index + 1 <= column
+        isFirstLine && item.$.exposed!.setiIemClass('is-first')
+        isRightItem && item.$.exposed!.setiIemClass('is-right')
+        !isFirstLine && item.$.exposed!.setiIemClass('is-border')
+      } else {
+        item.$.exposed!.setiIemClass('is-first')
+      }
+      children.length - 1 === index && item.$.exposed!.setiIemClass(item.$.exposed!.itemClass.value + ' is-last')
+    }
+    item.$.exposed!.init()
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-icon/index.scss b/src/uni_modules/wot-design-uni/components/wd-icon/index.scss
new file mode 100644
index 0000000..bdf495f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-icon/index.scss
@@ -0,0 +1,1226 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@font-face {
+  font-family: 'wd-icons';
+  src: url('https://at.alicdn.com/t/c/font_4245058_s5cpwl25n7o.woff2?t=1696817709651') format('woff2'),
+    url('https://at.alicdn.com/t/c/font_4245058_s5cpwl25n7o.woff?t=1696817709651') format('woff'),
+    url('https://at.alicdn.com/t/c/font_4245058_s5cpwl25n7o.ttf?t=1696817709651') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/*  #ifdef  APP-PLUS  */
+@font-face {
+  font-family: 'wd-icons';
+  src:
+    url('./wd-icons.ttf') format('truetype');
+  font-weight: normal;
+  font-style: normal;
+}
+
+/*  #endif  */
+
+@include b(icon) {
+  display: inline-block;
+  font-family: 'wd-icons' !important;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  @include m(image) {
+    width: 1em;
+    height: 1em;
+  }
+
+  @include e(image) {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+
+
+.wd-icon-usergroup-clear:before {
+  content: "\e739";
+}
+
+.wd-icon-user-circle:before {
+  content: "\e73a";
+}
+
+.wd-icon-user-talk:before {
+  content: "\e73b";
+}
+
+.wd-icon-user-clear:before {
+  content: "\e73c";
+}
+
+.wd-icon-user:before {
+  content: "\e73d";
+}
+
+.wd-icon-usergroup-add:before {
+  content: "\e73e";
+}
+
+.wd-icon-usergroup:before {
+  content: "\e73f";
+}
+
+.wd-icon-user-add:before {
+  content: "\e740";
+}
+
+.wd-icon-user-avatar:before {
+  content: "\e741";
+}
+
+.wd-icon-pointing-hand:before {
+  content: "\e742";
+}
+
+.wd-icon-cursor:before {
+  content: "\e743";
+}
+
+.wd-icon-fullsreen:before {
+  content: "\e72c";
+}
+
+.wd-icon-cloud-download:before {
+  content: "\e72d";
+}
+
+.wd-icon-chevron-down-rectangle:before {
+  content: "\e72e";
+}
+
+.wd-icon-edit:before {
+  content: "\e72f";
+}
+
+.wd-icon-fullscreen-exit:before {
+  content: "\e730";
+}
+
+.wd-icon-circle1:before {
+  content: "\e731";
+}
+
+.wd-icon-close-normal:before {
+  content: "\e732";
+}
+
+.wd-icon-browse:before {
+  content: "\e733";
+}
+
+.wd-icon-browse-off:before {
+  content: "\e734";
+}
+
+.wd-icon-chevron-up-rectangle:before {
+  content: "\e735";
+}
+
+.wd-icon-add-rectangle:before {
+  content: "\e736";
+}
+
+.wd-icon-add1:before {
+  content: "\e737";
+}
+
+.wd-icon-add-circle1:before {
+  content: "\e738";
+}
+
+.wd-icon-download1:before {
+  content: "\e71c";
+}
+
+.wd-icon-link:before {
+  content: "\e71d";
+}
+
+.wd-icon-edit-1:before {
+  content: "\e71e";
+}
+
+.wd-icon-jump:before {
+  content: "\e71f";
+}
+
+.wd-icon-chevron-down-circle:before {
+  content: "\e720";
+}
+
+.wd-icon-delete1:before {
+  content: "\e721";
+}
+
+.wd-icon-filter-clear:before {
+  content: "\e722";
+}
+
+.wd-icon-check-rectangle-filled:before {
+  content: "\e723";
+}
+
+.wd-icon-minus-circle-filled:before {
+  content: "\e724";
+}
+
+.wd-icon-play:before {
+  content: "\e725";
+}
+
+.wd-icon-pause-circle-filled:before {
+  content: "\e726";
+}
+
+.wd-icon-filter1:before {
+  content: "\e727";
+}
+
+.wd-icon-move:before {
+  content: "\e728";
+}
+
+.wd-icon-login:before {
+  content: "\e729";
+}
+
+.wd-icon-minus-circle:before {
+  content: "\e72a";
+}
+
+.wd-icon-close-circle:before {
+  content: "\e72b";
+}
+
+.wd-icon-logout:before {
+  content: "\e70b";
+}
+
+.wd-icon-search1:before {
+  content: "\e70c";
+}
+
+.wd-icon-pause-circle:before {
+  content: "\e70d";
+}
+
+.wd-icon-play-circle:before {
+  content: "\e70e";
+}
+
+.wd-icon-more1:before {
+  content: "\e70f";
+}
+
+.wd-icon-minus-rectangle:before {
+  content: "\e710";
+}
+
+.wd-icon-stop:before {
+  content: "\e711";
+}
+
+.wd-icon-scan1:before {
+  content: "\e712";
+}
+
+.wd-icon-close-rectangle:before {
+  content: "\e713";
+}
+
+.wd-icon-rollback:before {
+  content: "\e714";
+}
+
+.wd-icon-a-order-adjustmentcolumn:before {
+  content: "\e715";
+}
+
+.wd-icon-pause:before {
+  content: "\e716";
+}
+
+.wd-icon-ellipsis:before {
+  content: "\e717";
+}
+
+.wd-icon-cloud-upload:before {
+  content: "\e718";
+}
+
+.wd-icon-stop-circle-filled:before {
+  content: "\e719";
+}
+
+.wd-icon-clear:before {
+  content: "\e71a";
+}
+
+.wd-icon-remove:before {
+  content: "\e71b";
+}
+
+.wd-icon-zoom-out:before {
+  content: "\e6fb";
+}
+
+.wd-icon-thumb-down:before {
+  content: "\e6fc";
+}
+
+.wd-icon-setting1:before {
+  content: "\e6fd";
+}
+
+.wd-icon-save:before {
+  content: "\e6fe";
+}
+
+.wd-icon-unfold-more:before {
+  content: "\e6ff";
+}
+
+.wd-icon-zoom-in:before {
+  content: "\e700";
+}
+
+.wd-icon-thumb-up:before {
+  content: "\e701";
+}
+
+.wd-icon-unfold-less:before {
+  content: "\e702";
+}
+
+.wd-icon-play-circle-filled:before {
+  content: "\e703";
+}
+
+.wd-icon-poweroff:before {
+  content: "\e704";
+}
+
+.wd-icon-share:before {
+  content: "\e705";
+}
+
+.wd-icon-refresh1:before {
+  content: "\e706";
+}
+
+.wd-icon-link-unlink:before {
+  content: "\e707";
+}
+
+.wd-icon-upload:before {
+  content: "\e708";
+}
+
+.wd-icon-rectangle:before {
+  content: "\e709";
+}
+
+.wd-icon-stop-circle:before {
+  content: "\e70a";
+}
+
+.wd-icon-backtop-rectangle:before {
+  content: "\e6ea";
+}
+
+.wd-icon-caret-down:before {
+  content: "\e6eb";
+}
+
+.wd-icon-arrow-left1:before {
+  content: "\e6ec";
+}
+
+.wd-icon-help-circle:before {
+  content: "\e6ed";
+}
+
+.wd-icon-help-circle-filled:before {
+  content: "\e6ee";
+}
+
+.wd-icon-time-filled:before {
+  content: "\e6ef";
+}
+
+.wd-icon-close-circle-filled:before {
+  content: "\e6f0";
+}
+
+.wd-icon-info-circle:before {
+  content: "\e6f1";
+}
+
+.wd-icon-info-circle-filled:before {
+  content: "\e6f2";
+}
+
+.wd-icon-check1:before {
+  content: "\e6f3";
+}
+
+.wd-icon-help:before {
+  content: "\e6f4";
+}
+
+.wd-icon-error:before {
+  content: "\e6f5";
+}
+
+.wd-icon-check-circle:before {
+  content: "\e6f6";
+}
+
+.wd-icon-error-circle-filled:before {
+  content: "\e6f7";
+}
+
+.wd-icon-error-circle:before {
+  content: "\e6f8";
+}
+
+.wd-icon-check-rectangle:before {
+  content: "\e6f9";
+}
+
+.wd-icon-check-circle-filled:before {
+  content: "\e6fa";
+}
+
+.wd-icon-chevron-up:before {
+  content: "\e6da";
+}
+
+.wd-icon-chevron-up-circle:before {
+  content: "\e6db";
+}
+
+.wd-icon-chevron-right:before {
+  content: "\e6dc";
+}
+
+.wd-icon-arrow-down-rectangle:before {
+  content: "\e6dd";
+}
+
+.wd-icon-caret-up-small:before {
+  content: "\e6de";
+}
+
+.wd-icon-chevron-right-rectangle:before {
+  content: "\e6df";
+}
+
+.wd-icon-caret-right-small:before {
+  content: "\e6e0";
+}
+
+.wd-icon-arrow-right1:before {
+  content: "\e6e1";
+}
+
+.wd-icon-backtop:before {
+  content: "\e6e2";
+}
+
+.wd-icon-arrow-up1:before {
+  content: "\e6e3";
+}
+
+.wd-icon-caret-up:before {
+  content: "\e6e4";
+}
+
+.wd-icon-backward:before {
+  content: "\e6e5";
+}
+
+.wd-icon-arrow-down1:before {
+  content: "\e6e6";
+}
+
+.wd-icon-chevron-left:before {
+  content: "\e6e7";
+}
+
+.wd-icon-caret-right:before {
+  content: "\e6e8";
+}
+
+.wd-icon-caret-left:before {
+  content: "\e6e9";
+}
+
+.wd-icon-page-last:before {
+  content: "\e6c9";
+}
+
+.wd-icon-next:before {
+  content: "\e6ca";
+}
+
+.wd-icon-swap:before {
+  content: "\e6cb";
+}
+
+.wd-icon-round:before {
+  content: "\e6cc";
+}
+
+.wd-icon-previous:before {
+  content: "\e6cd";
+}
+
+.wd-icon-enter:before {
+  content: "\e6ce";
+}
+
+.wd-icon-chevron-down:before {
+  content: "\e6cf";
+}
+
+.wd-icon-caret-down-small:before {
+  content: "\e6d0";
+}
+
+.wd-icon-swap-right:before {
+  content: "\e6d1";
+}
+
+.wd-icon-chevron-left-circle:before {
+  content: "\e6d2";
+}
+
+.wd-icon-caret-left-small:before {
+  content: "\e6d3";
+}
+
+.wd-icon-chevron-right-circle:before {
+  content: "\e6d4";
+}
+
+.wd-icon-a-chevron-leftdouble:before {
+  content: "\e6d5";
+}
+
+.wd-icon-chevron-left-rectangle:before {
+  content: "\e6d6";
+}
+
+.wd-icon-a-chevron-rightdouble:before {
+  content: "\e6d7";
+}
+
+.wd-icon-page-first:before {
+  content: "\e6d8";
+}
+
+.wd-icon-forward:before {
+  content: "\e6d9";
+}
+
+.wd-icon-view-column:before {
+  content: "\e6b9";
+}
+
+.wd-icon-view-module:before {
+  content: "\e6ba";
+}
+
+.wd-icon-format-vertical-align-right:before {
+  content: "\e6bb";
+}
+
+.wd-icon-view-list:before {
+  content: "\e6bc";
+}
+
+.wd-icon-order-descending:before {
+  content: "\e6bd";
+}
+
+.wd-icon-format-horizontal-align-bottom:before {
+  content: "\e6be";
+}
+
+.wd-icon-queue:before {
+  content: "\e6bf";
+}
+
+.wd-icon-menu-fold:before {
+  content: "\e6c0";
+}
+
+.wd-icon-menu-unfold:before {
+  content: "\e6c1";
+}
+
+.wd-icon-format-horizontal-align-top:before {
+  content: "\e6c2";
+}
+
+.wd-icon-a-rootlist:before {
+  content: "\e6c3";
+}
+
+.wd-icon-order-ascending:before {
+  content: "\e6c4";
+}
+
+.wd-icon-format-vertical-align-left:before {
+  content: "\e6c5";
+}
+
+.wd-icon-format-horizontal-align-center:before {
+  content: "\e6c6";
+}
+
+.wd-icon-format-vertical-align-center:before {
+  content: "\e6c7";
+}
+
+.wd-icon-swap-left:before {
+  content: "\e6c8";
+}
+
+.wd-icon-flag:before {
+  content: "\e6aa";
+}
+
+.wd-icon-code:before {
+  content: "\e6ab";
+}
+
+.wd-icon-cart:before {
+  content: "\e6ac";
+}
+
+.wd-icon-attach:before {
+  content: "\e6ad";
+}
+
+.wd-icon-chart:before {
+  content: "\e6ae";
+}
+
+.wd-icon-creditcard:before {
+  content: "\e6af";
+}
+
+.wd-icon-calendar:before {
+  content: "\e6b0";
+}
+
+.wd-icon-app:before {
+  content: "\e6b1";
+}
+
+.wd-icon-books:before {
+  content: "\e6b2";
+}
+
+.wd-icon-barcode:before {
+  content: "\e6b3";
+}
+
+.wd-icon-chart-pie:before {
+  content: "\e6b4";
+}
+
+.wd-icon-chart-bar:before {
+  content: "\e6b5";
+}
+
+.wd-icon-chart-bubble:before {
+  content: "\e6b6";
+}
+
+.wd-icon-bulletpoint:before {
+  content: "\e6b7";
+}
+
+.wd-icon-bianjiliebiao:before {
+  content: "\e6b8";
+}
+
+.wd-icon-image:before {
+  content: "\e69a";
+}
+
+.wd-icon-laptop:before {
+  content: "\e69b";
+}
+
+.wd-icon-hourglass:before {
+  content: "\e69c";
+}
+
+.wd-icon-call:before {
+  content: "\e69d";
+}
+
+.wd-icon-mobile-vibrate:before {
+  content: "\e69e";
+}
+
+.wd-icon-mail:before {
+  content: "\e69f";
+}
+
+.wd-icon-notification-filled:before {
+  content: "\e6a0";
+}
+
+.wd-icon-desktop:before {
+  content: "\e6a1";
+}
+
+.wd-icon-history:before {
+  content: "\e6a2";
+}
+
+.wd-icon-discount-filled:before {
+  content: "\e6a3";
+}
+
+.wd-icon-dashboard:before {
+  content: "\e6a4";
+}
+
+.wd-icon-discount:before {
+  content: "\e6a5";
+}
+
+.wd-icon-heart-filled:before {
+  content: "\e6a6";
+}
+
+.wd-icon-chat1:before {
+  content: "\e6a7";
+}
+
+.wd-icon-a-controlplatform:before {
+  content: "\e6a8";
+}
+
+.wd-icon-gift:before {
+  content: "\e6a9";
+}
+
+.wd-icon-photo:before {
+  content: "\e692";
+}
+
+.wd-icon-play-circle-stroke:before {
+  content: "\e693";
+}
+
+.wd-icon-notification:before {
+  content: "\e694";
+}
+
+.wd-icon-cloud:before {
+  content: "\e695";
+}
+
+.wd-icon-gender-female:before {
+  content: "\e696";
+}
+
+.wd-icon-fork:before {
+  content: "\e697";
+}
+
+.wd-icon-layers:before {
+  content: "\e698";
+}
+
+.wd-icon-lock-off:before {
+  content: "\e699";
+}
+
+.wd-icon-location:before {
+  content: "\e68a";
+}
+
+.wd-icon-mobile:before {
+  content: "\e68b";
+}
+
+.wd-icon-qrcode:before {
+  content: "\e68c";
+}
+
+.wd-icon-home1:before {
+  content: "\e68d";
+}
+
+.wd-icon-time:before {
+  content: "\e68e";
+}
+
+.wd-icon-heart:before {
+  content: "\e68f";
+}
+
+.wd-icon-lock-on:before {
+  content: "\e690";
+}
+
+.wd-icon-print:before {
+  content: "\e691";
+}
+
+.wd-icon-slash:before {
+  content: "\e67a";
+}
+
+.wd-icon-usb:before {
+  content: "\e67b";
+}
+
+.wd-icon-tools:before {
+  content: "\e67c";
+}
+
+.wd-icon-wifi:before {
+  content: "\e67d";
+}
+
+.wd-icon-star-filled:before {
+  content: "\e67e";
+}
+
+.wd-icon-server:before {
+  content: "\e67f";
+}
+
+.wd-icon-sound:before {
+  content: "\e680";
+}
+
+.wd-icon-a-precisemonitor:before {
+  content: "\e681";
+}
+
+.wd-icon-service:before {
+  content: "\e682";
+}
+
+.wd-icon-tips:before {
+  content: "\e683";
+}
+
+.wd-icon-pin:before {
+  content: "\e684";
+}
+
+.wd-icon-secured:before {
+  content: "\e685";
+}
+
+.wd-icon-star:before {
+  content: "\e686";
+}
+
+.wd-icon-gender-male:before {
+  content: "\e687";
+}
+
+.wd-icon-shop:before {
+  content: "\e688";
+}
+
+.wd-icon-money-circle:before {
+  content: "\e689";
+}
+
+.wd-icon-file-word:before {
+  content: "\e66a";
+}
+
+.wd-icon-file-unknown:before {
+  content: "\e66b";
+}
+
+.wd-icon-folder-open:before {
+  content: "\e66c";
+}
+
+.wd-icon-file-pdf:before {
+  content: "\e66d";
+}
+
+.wd-icon-folder:before {
+  content: "\e66e";
+}
+
+.wd-icon-folder-add:before {
+  content: "\e66f";
+}
+
+.wd-icon-file:before {
+  content: "\e670";
+}
+
+.wd-icon-file-image:before {
+  content: "\e671";
+}
+
+.wd-icon-file-powerpoint:before {
+  content: "\e672";
+}
+
+.wd-icon-file-add:before {
+  content: "\e673";
+}
+
+.wd-icon-file-icon:before {
+  content: "\e674";
+}
+
+.wd-icon-file-paste:before {
+  content: "\e675";
+}
+
+.wd-icon-file-excel:before {
+  content: "\e676";
+}
+
+.wd-icon-file-copy:before {
+  content: "\e677";
+}
+
+.wd-icon-video1:before {
+  content: "\e678";
+}
+
+.wd-icon-wallet:before {
+  content: "\e679";
+}
+
+.wd-icon-ie:before {
+  content: "\e65d";
+}
+
+.wd-icon-logo-codepen:before {
+  content: "\e65e";
+}
+
+.wd-icon-github-filled:before {
+  content: "\e65f";
+}
+
+.wd-icon-ie-filled:before {
+  content: "\e660";
+}
+
+.wd-icon-apple:before {
+  content: "\e661";
+}
+
+.wd-icon-windows-filled:before {
+  content: "\e662";
+}
+
+.wd-icon-internet:before {
+  content: "\e663";
+}
+
+.wd-icon-github:before {
+  content: "\e664";
+}
+
+.wd-icon-windows:before {
+  content: "\e665";
+}
+
+.wd-icon-apple-filled:before {
+  content: "\e666";
+}
+
+.wd-icon-chrome-filled:before {
+  content: "\e667";
+}
+
+.wd-icon-chrome:before {
+  content: "\e668";
+}
+
+.wd-icon-android:before {
+  content: "\e669";
+}
+
+.wd-icon-edit-outline:before {
+  content: "\e64a";
+}
+
+.wd-icon-detection:before {
+  content: "\e64b";
+}
+
+.wd-icon-check-outline:before {
+  content: "\e64c";
+}
+
+.wd-icon-close:before {
+  content: "\e64d";
+}
+
+.wd-icon-check:before {
+  content: "\e64e";
+}
+
+.wd-icon-arrow-left:before {
+  content: "\e64f";
+}
+
+.wd-icon-computer:before {
+  content: "\e650";
+}
+
+.wd-icon-clock:before {
+  content: "\e651";
+}
+
+.wd-icon-check-bold:before {
+  content: "\e652";
+}
+
+.wd-icon-bags:before {
+  content: "\e653";
+}
+
+.wd-icon-arrow-down:before {
+  content: "\e654";
+}
+
+.wd-icon-arrow-right:before {
+  content: "\e655";
+}
+
+.wd-icon-circle:before {
+  content: "\e656";
+}
+
+.wd-icon-arrow-thin-down:before {
+  content: "\e657";
+}
+
+.wd-icon-camera:before {
+  content: "\e658";
+}
+
+.wd-icon-close-bold:before {
+  content: "\e659";
+}
+
+.wd-icon-add-circle:before {
+  content: "\e65a";
+}
+
+.wd-icon-arrow-thin-up:before {
+  content: "\e65b";
+}
+
+.wd-icon-add:before {
+  content: "\e65c";
+}
+
+.wd-icon-keyboard-delete:before {
+  content: "\e634";
+}
+
+.wd-icon-transfer:before {
+  content: "\e635";
+}
+
+.wd-icon-eye-close:before {
+  content: "\e61f";
+}
+
+.wd-icon-delete:before {
+  content: "\e61e";
+}
+
+.wd-icon-download:before {
+  content: "\e636";
+}
+
+.wd-icon-picture:before {
+  content: "\e637";
+}
+
+.wd-icon-refresh:before {
+  content: "\e638";
+}
+
+.wd-icon-read:before {
+  content: "\e639";
+}
+
+.wd-icon-note:before {
+  content: "\e63a";
+}
+
+.wd-icon-phone:before {
+  content: "\e63b";
+}
+
+.wd-icon-lenovo:before {
+  content: "\e63c";
+}
+
+.wd-icon-home:before {
+  content: "\e63d";
+}
+
+.wd-icon-search:before {
+  content: "\e63e";
+}
+
+.wd-icon-fill-camera:before {
+  content: "\e63f";
+}
+
+.wd-icon-fill-arrow-down:before {
+  content: "\e640";
+}
+
+.wd-icon-arrow-up:before {
+  content: "\e61d";
+}
+
+.wd-icon-delete-thin:before {
+  content: "\e641";
+}
+
+.wd-icon-filter:before {
+  content: "\e642";
+}
+
+.wd-icon-evaluation:before {
+  content: "\e643";
+}
+
+.wd-icon-close-outline:before {
+  content: "\e644";
+}
+
+.wd-icon-dong:before {
+  content: "\e645";
+}
+
+.wd-icon-error-fill:before {
+  content: "\e646";
+}
+
+.wd-icon-chat:before {
+  content: "\e647";
+}
+
+.wd-icon-decrease:before {
+  content: "\e648";
+}
+
+.wd-icon-copy:before {
+  content: "\e649";
+}
+
+.wd-icon-setting:before {
+  content: "\e621";
+}
+
+.wd-icon-subscribe:before {
+  content: "\e622";
+}
+
+.wd-icon-jdm:before {
+  content: "\e620";
+}
+
+.wd-icon-spool:before {
+  content: "\e623";
+}
+
+.wd-icon-warning:before {
+  content: "\e624";
+}
+
+.wd-icon-wifi-error:before {
+  content: "\e625";
+}
+
+.wd-icon-star-on:before {
+  content: "\e626";
+}
+
+.wd-icon-rotate:before {
+  content: "\e627";
+}
+
+.wd-icon-translate-bold:before {
+  content: "\e628";
+}
+
+.wd-icon-keyboard-collapse:before {
+  content: "\e629";
+}
+
+.wd-icon-keywords:before {
+  content: "\e62a";
+}
+
+.wd-icon-scan:before {
+  content: "\e62b";
+}
+
+.wd-icon-view:before {
+  content: "\e62c";
+}
+
+.wd-icon-phone-compute:before {
+  content: "\e62d";
+}
+
+.wd-icon-video:before {
+  content: "\e62e";
+}
+
+.wd-icon-thin-arrow-left:before {
+  content: "\e62f";
+}
+
+.wd-icon-goods:before {
+  content: "\e630";
+}
+
+.wd-icon-list:before {
+  content: "\e631";
+}
+
+.wd-icon-warn-bold:before {
+  content: "\e632";
+}
+
+.wd-icon-more:before {
+  content: "\e633";
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-icon/types.ts b/src/uni_modules/wot-design-uni/components/wd-icon/types.ts
new file mode 100644
index 0000000..7416705
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-icon/types.ts
@@ -0,0 +1,21 @@
+import { baseProps, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
+
+export const iconProps = {
+  ...baseProps,
+  /**
+   * 使用的图标名字，可以使用链接图片
+   */
+  name: makeRequiredProp(String),
+  /**
+   * 图标的颜色
+   */
+  color: String,
+  /**
+   * 图标的字体大小
+   */
+  size: numericProp,
+  /**
+   * 类名前缀，用于使用自定义图标
+   */
+  classPrefix: makeStringProp('wd-icon')
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-icon/wd-icon.vue b/src/uni_modules/wot-design-uni/components/wd-icon/wd-icon.vue
new file mode 100644
index 0000000..3cdae30
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-icon/wd-icon.vue
@@ -0,0 +1,53 @@
+<template>
+  <view @click="handleClick" :class="rootClass" :style="rootStyle">
+    <image v-if="isImage" class="wd-icon__image" :src="name"></image>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-icon',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { addUnit, isDef, objToStyle } from '../common/util'
+import { iconProps } from './types'
+
+const props = defineProps(iconProps)
+const emit = defineEmits(['click', 'touch'])
+
+const isImage = computed(() => {
+  return isDef(props.name) && props.name.includes('/')
+})
+
+const rootClass = computed(() => {
+  const prefix = props.classPrefix
+  return `${prefix} ${props.customClass} ${isImage.value ? 'wd-icon--image' : prefix + '-' + props.name}`
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.color) {
+    style['color'] = props.color
+  }
+  if (props.size) {
+    style['font-size'] = addUnit(props.size)
+  }
+  return `${objToStyle(style)} ${props.customStyle}`
+})
+
+function handleClick(event: any) {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-icon/wd-icons.ttf b/src/uni_modules/wot-design-uni/components/wd-icon/wd-icons.ttf
new file mode 100644
index 0000000..7abffe1
Binary files /dev/null and b/src/uni_modules/wot-design-uni/components/wd-icon/wd-icons.ttf differ
diff --git a/src/uni_modules/wot-design-uni/components/wd-img-cropper/index.scss b/src/uni_modules/wot-design-uni/components/wd-img-cropper/index.scss
new file mode 100644
index 0000000..7f55853
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-img-cropper/index.scss
@@ -0,0 +1,231 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+@include b(img-cropper) {
+  background: rgba(0, 0, 0, 1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1;
+
+  // 裁剪框包裹器
+  @include e(wrapper) {
+    position: relative;
+    background: rgba(0, 0, 0, 0.45);
+  }
+
+  @include e(cut) {
+    z-index: 9;
+    position: absolute;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+    pointer-events: none;
+
+    .wd-img-cropper__cut--top,
+    .wd-img-cropper__cut--bottom,
+    .wd-img-cropper__cut--left,
+    .wd-img-cropper__cut--right {
+      // 拖动中背景蒙层为0 拖动结束为0.85
+      background-color: rgba(0, 0, 0, 0.85);
+      transition: background 0.2s;
+
+      @include when(hightlight) {
+        background-color: rgba(0, 0, 0, 0);
+      }
+    }
+
+    .wd-img-cropper__cut--bottom,
+    .wd-img-cropper__cut--right {
+      flex: auto;
+    }
+
+    @include m(middle) {
+      display: flex;
+    }
+
+    @include m(body) {
+      // 若需要变化窗体大小，支持控制窗体的大小来控制下方所有对应的展示
+      background-color: transparent;
+      position: relative;
+
+      // 节选框的窗体最外部边缘线
+      &::before {
+        content: "";
+        border: 1px solid #fff;
+        width: calc(200% - 1px);
+        height: calc(200% - 1px);
+        position: absolute;
+        transform: scale(0.5) translate(-1px, -1px);
+        top: -50%;
+        left: -50%;
+      }
+
+      // 结算框对角尺寸
+      $border-size: 2px;
+
+      // 节选框的四个角
+      .is-left-top,
+      .is-left-bottom,
+      .is-right-top,
+      .is-right-bottom {
+        &::before {
+          content: "";
+          position: absolute;
+          width: $border-size;
+          height: 20px;
+          background-color: #fff;
+        }
+
+        &::after {
+          content: "";
+          position: absolute;
+          width: 20px;
+          height: $border-size;
+          background-color: #fff;
+        }
+      }
+
+      .is-left-top {
+
+        &::before,
+        &::after {
+          left: -$border-size;
+          top: -$border-size;
+        }
+      }
+
+      .is-left-bottom {
+
+        &::before,
+        &::after {
+          left: -$border-size;
+          bottom: -$border-size;
+        }
+      }
+
+      .is-right-top {
+
+        &::before,
+        &::after {
+          right: -$border-size;
+          top: -$border-size;
+        }
+      }
+
+      .is-right-bottom {
+
+        &::before,
+        &::after {
+          right: -$border-size;
+          bottom: -$border-size;
+        }
+      }
+
+      // 内部网格线
+      .is-gridlines-x,
+      .is-gridlines-y {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        display: flex;
+      }
+
+      .is-gridlines-x {
+        justify-content: center;
+
+        &::before {
+          content: "";
+          display: inline-block;
+          width: 66.66%;
+          height: 200%;
+          border: 1px solid #fff;
+          border-top: none;
+          border-bottom: none;
+          transform: scale(0.5) translate(0, -50%);
+        }
+      }
+
+      // 内部网格线 - y轴
+      .is-gridlines-y {
+        align-items: center;
+
+        &::after {
+          content: "";
+          flex-shrink: 0;
+          display: inline-block;
+          width: 200%;
+          height: 66.66%;
+          border: 1px solid #fff;
+          border-left: none;
+          border-right: none;
+          transform: scale(0.5) translate(-50%, 0);
+        }
+      }
+    }
+  }
+
+  @include e(img) {
+    z-index: 2;
+    top: 0;
+    left: 0;
+    position: absolute;
+    border: none;
+    width: 100%;
+    backface-visibility: hidden;
+    transform-origin: center;
+  }
+
+  @include e(canvas) {
+    position: fixed;
+    background: white;
+    width: 150px;
+    height: 150px;
+    z-index: 10;
+    top: -200%;
+    pointer-events: none;
+  }
+
+  @include e(footer) {
+    position: fixed;
+    z-index: 10;
+    bottom: 10px;
+    width: 100%;
+    height: 15vh;
+    text-align: center;
+
+    @include m(button) {
+      position: relative;
+      text-align: left;
+      margin: 0 20px;
+      padding-top: 4vh;
+      // line-height: 32px;
+      box-sizing: border-box;
+
+      .is-cancel {
+        display: inline-block;
+        color: #fff;
+        font-size: 16px;
+      }
+
+      .is-confirm {
+        position: absolute;
+        right: 0;
+        // height: 32px;
+        width: 56px;
+        border-radius: 16px;
+        font-size: 16px;
+      }
+    }
+  }
+
+  @include edeep(rotate) {
+    font-size: $-img-cropper-icon-size;
+    color: $-img-cropper-icon-color;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-img-cropper/types.ts b/src/uni_modules/wot-design-uni/components/wd-img-cropper/types.ts
new file mode 100644
index 0000000..a8682c1
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-img-cropper/types.ts
@@ -0,0 +1,85 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-06-03 23:43:43
+ * @LastEditTime: 2025-03-25 17:28:13
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-img-cropper/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const imgCropperProps = {
+  ...baseProps,
+  /**
+   * 打开图片裁剪组件
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   */
+  confirmButtonText: String,
+  /**
+   * 是否禁用旋转
+   */
+  disabledRotate: makeBooleanProp(false),
+  /** canvas绘图参数 start **/
+  /**
+   * 目标文件的类型，wx.canvasToTempFilePath属性介绍
+   */
+  fileType: makeStringProp('png'),
+  /**
+   * 生成的图片质量 wx.canvasToTempFilePath属性介绍
+   */
+  quality: makeNumberProp(1),
+  /**
+   * 设置导出图片尺寸
+   */
+  exportScale: makeNumberProp(2),
+  /** canvas绘图参数 end **/
+  /**
+   * 图片源路径
+   */
+  imgSrc: makeStringProp(''),
+  /**
+   * 图片宽
+   */
+  imgWidth: makeNumericProp(''),
+  /**
+   * 图片高
+   */
+  imgHeight: makeNumericProp(''),
+  /**
+   * 最大缩放
+   */
+  maxScale: makeNumberProp(3),
+  /**
+   * 裁剪框宽高比，格式为 width:height
+   */
+  aspectRatio: makeStringProp('1:1')
+}
+
+export type ImgCropperProps = ExtractPropTypes<typeof imgCropperProps>
+
+export type ImgCropperExpose = {
+  /**
+   * 逆转是否使用动画
+   */
+  revertIsAnimation: (animation: boolean) => void
+  /**
+   * 初始化图片的大小和角度以及距离
+   */
+  resetImg: () => void
+  /**
+   * 控制旋转角度
+   * @param angle 角度
+   */
+  setRoate: (angle: number) => void
+}
+
+export type ImgCropperInstance = ComponentPublicInstance<ImgCropperProps, ImgCropperExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue b/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue
new file mode 100644
index 0000000..396b30f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-img-cropper/wd-img-cropper.vue
@@ -0,0 +1,660 @@
+<template>
+  <!-- 绘制的图片canvas -->
+  <view v-if="modelValue" :class="`wd-img-cropper ${customClass}`" :style="customStyle" @touchmove="preventTouchMove">
+    <!-- 展示在用户面前的裁剪框 -->
+    <view class="wd-img-cropper__wrapper">
+      <!-- 画出裁剪框 -->
+      <view class="wd-img-cropper__cut">
+        <!-- 上方阴影块 -->
+        <view :class="`wd-img-cropper__cut--top ${IS_TOUCH_END ? '' : 'is-hightlight'}`" :style="`height: ${cutTop}px;`"></view>
+        <view class="wd-img-cropper__cut--middle" :style="`height: ${cutHeight}px;`">
+          <!-- 左侧阴影块 -->
+          <view
+            :class="`wd-img-cropper__cut--left ${IS_TOUCH_END ? '' : 'is-hightlight'}`"
+            :style="`width: ${cutLeft}px; height: ${cutHeight}px;`"
+          ></view>
+          <!-- 裁剪框 -->
+          <view class="wd-img-cropper__cut--body" :style="`width: ${cutWidth}px; height: ${cutHeight}px;`">
+            <!-- 内部网格线 -->
+            <view class="is-gridlines-x"></view>
+            <view class="is-gridlines-y"></view>
+            <!-- 裁剪窗体四个对角 -->
+            <view class="is-left-top"></view>
+            <view class="is-left-bottom"></view>
+            <view class="is-right-top"></view>
+            <view class="is-right-bottom"></view>
+          </view>
+          <!-- 右侧阴影块 -->
+          <view :class="`wd-img-cropper__cut--right ${IS_TOUCH_END ? '' : 'is-hightlight'}`"></view>
+        </view>
+
+        <!-- 底部阴影块 -->
+        <view :class="`wd-img-cropper__cut--bottom ${IS_TOUCH_END ? '' : 'is-hightlight'}`"></view>
+      </view>
+      <!-- 展示的传过来的图片: 控制图片的旋转角度(rotate)、缩放程度(imgScale)、移动位置(translate) -->
+      <image
+        :prop="isAnimation"
+        :change:prop="animation ? animation.setAnimation : ''"
+        class="wd-img-cropper__img"
+        :src="imgSrc"
+        :style="imageStyle"
+        :lazy-load="false"
+        @touchstart="handleImgTouchStart"
+        @touchmove="handleImgTouchMove"
+        @touchend="handleImgTouchEnd"
+        @error="handleImgLoadError"
+        @load="handleImgLoaded"
+      />
+    </view>
+    <!-- 绘制的图片canvas -->
+    <canvas
+      :canvas-id="canvasId"
+      :id="canvasId"
+      class="wd-img-cropper__canvas"
+      :disable-scroll="true"
+      :style="`width: ${Number(canvasWidth) * canvasScale}px; height: ${Number(canvasHeight) * canvasScale}px;`"
+    />
+    <!-- 下方按钮 -->
+    <view class="wd-img-cropper__footer">
+      <wd-icon custom-class="wd-img-cropper__rotate" v-if="!disabledRotate" name="rotate" @click="handleRotate"></wd-icon>
+      <view class="wd-img-cropper__footer--button">
+        <view class="is-cancel" @click="handleCancel">{{ cancelButtonText || translate('cancel') }}</view>
+        <wd-button size="small" :custom-style="buttonStyle" @click="handleConfirm">{{ confirmButtonText || translate('confirm') }}</wd-button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-img-cropper',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdButton from '../wd-button/wd-button.vue'
+import { computed, getCurrentInstance, ref, watch } from 'vue'
+import { addUnit, objToStyle, uuid } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { imgCropperProps, type ImgCropperExpose } from './types'
+
+const canvasId = ref<string>(`cropper${uuid()}`) // canvas 组件的唯一标识符
+
+// 延时动画设置
+let CHANGE_TIME: any | null = null
+// 移动节流
+let MOVE_THROTTLE: any | null = null
+// 节流标志
+let MOVE_THROTTLE_FLAG: boolean = true
+// 图片设置尺寸,此值不变（记录最初设定的尺寸）
+let INIT_IMGWIDTH: null | number | string = null
+// 图片设置尺寸,此值不变（记录最初设定的尺寸）
+let INIT_IMGHEIGHT: null | number | string = null
+// 顶部裁剪框占比
+const TOP_PERCENT = 0.85
+
+const props = defineProps(imgCropperProps)
+const emit = defineEmits(['imgloaded', 'imgloaderror', 'cancel', 'confirm', 'update:modelValue'])
+
+const { translate } = useTranslate('img-cropper')
+
+// 旋转角度
+const imgAngle = ref<number>(0)
+// 是否开启动画
+const isAnimation = ref<boolean>(false)
+// #ifdef MP-ALIPAY || APP-PLUS || H5
+// hack 避免钉钉小程序、支付宝小程序、app抛出相关异常
+const animation: any = null
+// #endif
+
+// 裁剪框的宽高
+const picWidth = ref<number>(0)
+const picHeight = ref<number>(0)
+const cutWidth = ref<number>(0)
+const cutHeight = ref<number>(0)
+const offset = ref<number>(20)
+// 裁剪框的距顶距左
+const cutLeft = ref<number>(0)
+const cutTop = ref<number>(0)
+// canvas最终成像宽高
+const canvasWidth = ref<string | number>('')
+const canvasHeight = ref<string | number>('')
+const canvasScale = ref<number>(2)
+// 当前缩放大小
+const imgScale = ref<number>(1)
+// // 图片宽高
+// imgWidth: null,
+// imgHeight: null,
+// 图片中心轴点距左的距离
+const imgLeft = ref<number>(uni.getSystemInfoSync().windowWidth / 2)
+const imgTop = ref<number>((uni.getSystemInfoSync().windowHeight / 2) * TOP_PERCENT)
+
+const imgInfo = ref<UniApp.GetImageInfoSuccessData | null>(null)
+const info = ref<UniApp.GetSystemInfoResult>(uni.getSystemInfoSync())
+
+// 是否移动中设置 同时控制背景颜色是否高亮
+const IS_TOUCH_END = ref<boolean>(true)
+// 记录移动中的双指位置 [0][1]分别代表两根手指 [1]做待用参数
+const movingPosRecord = ref<Record<string, string | number>[]>([
+  {
+    x: '',
+    y: ''
+  },
+  {
+    x: '',
+    y: ''
+  }
+])
+// 双指缩放时 两个坐标点斜边长度
+const fingerDistance = ref<string | number>('')
+
+const ctx = ref<UniApp.CanvasContext | null>(null)
+
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue) {
+      INIT_IMGWIDTH = props.imgWidth
+      INIT_IMGHEIGHT = props.imgHeight
+      info.value = uni.getSystemInfoSync()
+
+      // 根据aspectRatio计算裁剪框尺寸
+      const [widthRatio, heightRatio] = props.aspectRatio.split(':').map(Number)
+      const tempCutWidth = info.value.windowWidth - offset.value * 2
+      const tempCutHeight = (tempCutWidth * heightRatio) / widthRatio
+
+      cutWidth.value = tempCutWidth
+      cutHeight.value = tempCutHeight
+      cutTop.value = (info.value.windowHeight * TOP_PERCENT - tempCutHeight) / 2
+      cutLeft.value = offset.value
+
+      canvasScale.value = props.exportScale
+      canvasHeight.value = tempCutHeight
+      canvasWidth.value = tempCutWidth
+
+      // 根据开发者设置的图片目标尺寸计算实际尺寸
+      initImageSize()
+      // 初始化canvas
+      initCanvas()
+      // 加载图片
+      props.imgSrc && loadImg()
+    } else {
+      resetImg()
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.imgSrc,
+  (newValue) => {
+    newValue && loadImg()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => imgAngle.value,
+  (newValue) => {
+    if (newValue % 90) {
+      imgAngle.value = Math.round(newValue / 90) * 90
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+watch(
+  () => isAnimation.value,
+  (newValue) => {
+    // 开启过渡300毫秒之后自动关闭
+    CHANGE_TIME && clearTimeout(CHANGE_TIME)
+    if (newValue) {
+      CHANGE_TIME = setTimeout(() => {
+        revertIsAnimation(false)
+        clearTimeout(CHANGE_TIME)
+      }, 300)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const buttonStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    position: 'absolute',
+    right: 0,
+    // height: 32px;
+    width: '56px',
+    'border-radius': '16px',
+    'font-size': '16px'
+  }
+
+  return objToStyle(style)
+})
+
+const imageStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    width: picWidth.value ? addUnit(picWidth.value) : 'auto',
+    height: picHeight.value ? addUnit(picHeight.value) : 'auto',
+    transform: `translate(${addUnit(imgLeft.value - picWidth.value / 2)}, ${addUnit(imgTop.value - picHeight.value / 2)}) scale(${
+      imgScale.value
+    }) rotate(${imgAngle.value}deg)`,
+    'transition-duration': (isAnimation.value ? 0.4 : 0) + 's'
+  }
+  return objToStyle(style)
+})
+
+/**
+ * 逆转是否使用动画
+ */
+function revertIsAnimation(animation: boolean) {
+  isAnimation.value = animation
+}
+
+/**
+ * 控制旋转角度
+ * @param angle 角度
+ */
+function setRoate(angle: number) {
+  if (!angle || props.disabledRotate) return
+  revertIsAnimation(true)
+  imgAngle.value = angle
+
+  // 重新计算缩放比例
+  let tempPicWidth = picWidth.value
+  let tempPicHeight = picHeight.value
+
+  // 旋转后宽高互换
+  if ((angle / 90) % 2) {
+    tempPicWidth = picHeight.value
+    tempPicHeight = picWidth.value
+  }
+
+  // 计算新的缩放比例
+  const widthRatio = cutWidth.value / tempPicWidth
+  const heightRatio = cutHeight.value / tempPicHeight
+  imgScale.value = Math.max(widthRatio, heightRatio)
+
+  // 检测边缘位置
+  detectImgPosIsEdge()
+}
+
+/**
+ * 初始化图片的大小和角度以及距离
+ */
+function resetImg() {
+  const { windowHeight, windowWidth } = uni.getSystemInfoSync()
+  imgScale.value = 1
+  imgAngle.value = 0
+  imgLeft.value = windowWidth / 2
+  imgTop.value = (windowHeight / 2) * TOP_PERCENT
+}
+
+/**
+ *  加载图片资源文件，并初始化裁剪框内图片信息
+ */
+function loadImg() {
+  if (!props.imgSrc) return
+
+  uni.getImageInfo({
+    src: props.imgSrc,
+    success: (res) => {
+      // 存储img图片信息
+      imgInfo.value = res
+      // 计算最后图片尺寸
+      computeImgSize()
+      // 初始化尺寸
+      resetImg()
+    },
+    fail: () => {
+      // this.setData({ imgSrc: '' })
+    }
+  })
+}
+
+/**
+ *  设置图片尺寸，使其短边完全显示并填满裁剪框
+ */
+function computeImgSize() {
+  let tempPicWidth: number = picWidth.value
+  let tempPicHeight: number = picHeight.value
+
+  if (!INIT_IMGHEIGHT && !INIT_IMGWIDTH) {
+    // 计算图片与裁剪框的宽高比
+    const imgRatio = imgInfo.value!.width / imgInfo.value!.height
+    const cropRatio = cutWidth.value / cutHeight.value
+
+    if (imgRatio > cropRatio) {
+      // 图片更宽，以高度为准
+      tempPicHeight = cutHeight.value
+      tempPicWidth = tempPicHeight * imgRatio
+    } else {
+      // 图片更高，以宽度为准
+      tempPicWidth = cutWidth.value
+      tempPicHeight = tempPicWidth / imgRatio
+    }
+  } else if (INIT_IMGHEIGHT && !INIT_IMGWIDTH) {
+    tempPicHeight = Number(INIT_IMGHEIGHT)
+    tempPicWidth = (imgInfo.value!.width / imgInfo.value!.height) * tempPicHeight
+  } else if ((!INIT_IMGHEIGHT && INIT_IMGWIDTH) || (INIT_IMGHEIGHT && INIT_IMGWIDTH)) {
+    tempPicWidth = Number(INIT_IMGWIDTH)
+    tempPicHeight = (imgInfo.value!.height / imgInfo.value!.width) * tempPicWidth
+  }
+
+  // 确保计算后的尺寸至少有一边等于裁剪框尺寸
+  const widthRatio = cutWidth.value / tempPicWidth
+  const heightRatio = cutHeight.value / tempPicHeight
+  const scale = Math.max(widthRatio, heightRatio)
+
+  picWidth.value = tempPicWidth
+  picHeight.value = tempPicHeight
+  // 设置初始缩放以适应裁剪框
+  imgScale.value = scale
+}
+
+/**
+ *  canvas 初始化
+ */
+function initCanvas() {
+  if (!ctx.value) {
+    ctx.value = uni.createCanvasContext(canvasId.value, proxy)
+  }
+}
+
+/**
+ *  图片初始化,处理宽高特殊单位
+ */
+function initImageSize() {
+  // 处理宽高特殊单位 %>px
+  if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'string' && INIT_IMGWIDTH.indexOf('%') !== -1) {
+    const width: string = INIT_IMGWIDTH.replace('%', '')
+    INIT_IMGWIDTH = (info.value.windowWidth / 100) * Number(width)
+    picWidth.value = INIT_IMGWIDTH
+  } else if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'number') {
+    picWidth.value = INIT_IMGWIDTH
+  }
+  if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'string' && INIT_IMGHEIGHT.indexOf('%') !== -1) {
+    const height = (props.imgHeight as string).replace('%', '')
+    // INIT_IMGHEIGHT = this.data.imgHeight = (info.value.windowHeight / 100) * Number(height)
+    INIT_IMGHEIGHT = (info.value.windowHeight / 100) * Number(height)
+    picWidth.value = INIT_IMGHEIGHT
+  } else if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'number') {
+    picWidth.value = Number(INIT_IMGWIDTH)
+  }
+}
+
+/**
+ *  图片拖动边缘检测：检测移动或缩放时 是否触碰到图片边缘位置
+ */
+function detectImgPosIsEdge(scale?: number) {
+  const currentScale = scale || imgScale.value
+  let currentImgLeft = imgLeft.value
+  let currentImgTop = imgTop.value
+  let currentPicWidth = picWidth.value
+  let currentPicHeight = picHeight.value
+
+  // 翻转后宽高切换
+  if ((imgAngle.value / 90) % 2) {
+    currentPicWidth = picHeight.value
+    currentPicHeight = picWidth.value
+  }
+  // 左
+  currentImgLeft =
+    (currentPicWidth * currentScale) / 2 + cutLeft.value >= currentImgLeft ? currentImgLeft : (currentPicWidth * imgScale.value) / 2 + cutLeft.value
+  // 右
+  currentImgLeft =
+    cutLeft.value + cutWidth.value - (currentPicWidth * currentScale) / 2 <= currentImgLeft
+      ? currentImgLeft
+      : cutLeft.value + cutWidth.value - (currentPicWidth * currentScale) / 2
+  // 上
+  currentImgTop =
+    (currentPicHeight * currentScale) / 2 + cutTop.value >= currentImgTop ? currentImgTop : (currentPicHeight * currentScale) / 2 + cutTop.value
+  // 下
+  currentImgTop =
+    cutTop.value + cutHeight.value - (currentPicHeight * currentScale) / 2 <= currentImgTop
+      ? currentImgTop
+      : cutTop.value + cutHeight.value - (currentPicHeight * currentScale) / 2
+
+  imgScale.value = currentScale
+  imgTop.value = currentImgTop
+  imgLeft.value = currentImgLeft
+}
+
+/**
+ *  缩放边缘检测：检测移动或缩放时 是否触碰到图片边缘位置
+ */
+function detectImgScaleIsEdge() {
+  let tempPicWidth = picWidth.value
+  let tempPicHeight = picHeight.value
+  let tempImgScale = imgScale.value
+
+  // 翻转后宽高切换
+  if ((imgAngle.value / 90) % 2) {
+    tempPicWidth = picHeight.value
+    tempPicHeight = picWidth.value
+  }
+  if (tempPicWidth * tempImgScale < cutWidth.value) {
+    tempImgScale = cutWidth.value / tempPicWidth
+  }
+  if (tempPicHeight * tempImgScale < cutHeight.value) {
+    tempImgScale = cutHeight.value / tempPicHeight
+  }
+  detectImgPosIsEdge(tempImgScale)
+}
+
+/**
+ *  节流
+ */
+function throttle() {
+  if (info.value.platform === 'android') {
+    MOVE_THROTTLE && clearTimeout(MOVE_THROTTLE)
+    MOVE_THROTTLE = setTimeout(() => {
+      MOVE_THROTTLE_FLAG = true
+    }, 1000 / 40)
+  } else {
+    !MOVE_THROTTLE_FLAG && (MOVE_THROTTLE_FLAG = true)
+  }
+}
+
+/**
+ *  {图片区} 开始拖动
+ */
+function handleImgTouchStart(event: any) {
+  // 如果处于在拖动中，背景为淡色展示全部，拖动结束则为 0.85 透明度
+  IS_TOUCH_END.value = false
+  if (event.touches.length === 1) {
+    // 单指拖动
+    movingPosRecord.value[0] = {
+      x: event.touches[0].clientX - imgLeft.value,
+      y: event.touches[0].clientY - imgTop.value
+    }
+  } else {
+    // 以两指为坐标点 做直角三角形 a2 + b2 = c2
+    const width = Math.abs(event.touches[1].clientX - event.touches[0].clientX)
+    const height = Math.abs(event.touches[1].clientY - event.touches[0].clientY)
+    fingerDistance.value = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+  }
+}
+
+/**
+ *  {图片区} 拖动中
+ */
+function handleImgTouchMove(event: any) {
+  if (IS_TOUCH_END.value || !MOVE_THROTTLE_FLAG) return
+  // 节流
+  throttle()
+  if (event.touches.length === 1) {
+    // 单指拖动
+    const { x, y } = movingPosRecord.value[0]
+    const left = event.touches[0].clientX - Number(x)
+    const top = event.touches[0].clientY - Number(y)
+    imgLeft.value = left
+    imgTop.value = top
+    detectImgPosIsEdge()
+  } else {
+    // 以两指为坐标点 做直角三角形 a2 + b2 = c2
+    const width = Math.abs(event.touches[1].clientX - event.touches[0].clientX)
+    const height = Math.abs(event.touches[1].clientY - event.touches[0].clientY)
+    const hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+    const scale = imgScale.value * (hypotenuse / Number(fingerDistance.value))
+    imgScale.value = Math.min(scale, props.maxScale)
+    detectImgScaleIsEdge()
+    fingerDistance.value = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2))
+  }
+}
+
+/**
+ *  {图片区} 拖动结束
+ */
+function handleImgTouchEnd() {
+  IS_TOUCH_END.value = true
+}
+
+/**
+ *  图片已加载完成
+ */
+function handleImgLoaded(res: any) {
+  emit('imgloaded', res)
+}
+
+/**
+ *  图片加载失败
+ */
+function handleImgLoadError(err: any) {
+  emit('imgloaderror', err)
+}
+
+/**
+ *  旋转图片
+ */
+function handleRotate() {
+  setRoate(imgAngle.value - 90)
+}
+
+/**
+ *  取消裁剪图片
+ */
+function handleCancel() {
+  emit('cancel')
+  emit('update:modelValue', false)
+}
+
+/**
+ *  完成裁剪
+ */
+function handleConfirm() {
+  draw()
+}
+
+/**
+ *  canvas 绘制图片输出成文件类型
+ */
+function canvasToImage() {
+  const { fileType, quality, exportScale } = props
+  uni.canvasToTempFilePath(
+    {
+      width: cutWidth.value * exportScale,
+      height: Math.round(cutHeight.value * exportScale),
+      destWidth: cutWidth.value * exportScale,
+      destHeight: Math.round(cutHeight.value * exportScale),
+      fileType,
+      quality,
+      canvasId: canvasId.value,
+      success: (res: any) => {
+        const result = { tempFilePath: res.tempFilePath, width: cutWidth.value * exportScale, height: cutHeight.value * exportScale }
+        // #ifdef MP-DINGTALK
+        result.tempFilePath = res.filePath
+        // #endif
+        emit('confirm', result)
+      },
+      complete: () => {
+        emit('update:modelValue', false)
+      }
+    },
+    proxy
+  )
+}
+
+/**
+ *  canvas绘制，用canvas模拟裁剪框 对根据图片当前的裁剪信息进行模拟
+ */
+function draw() {
+  if (!props.imgSrc) return
+  const draw = () => {
+    // 图片真实大小
+    const width = picWidth.value * imgScale.value * props.exportScale
+    const height = picHeight.value * imgScale.value * props.exportScale
+    // 取裁剪框和图片的交集
+    const x = imgLeft.value - cutLeft.value
+    const y = imgTop.value - cutTop.value
+    // 如果直接使用canvas绘制的图片会有锯齿，因此需要*设备像素比
+    // 设置（x, y）设置图片在canvas中的位置
+    ctx.value!.translate(x * props.exportScale, y * props.exportScale)
+    // 设置 旋转角度
+    if (!props.disabledRotate) {
+      ctx.value!.rotate((imgAngle.value * Math.PI) / 180)
+    }
+    // drawImage 的 旋转是根据以当前图片的图片水平垂直方向为x、y轴，并在x y轴上移动
+    ctx.value!.drawImage(props.imgSrc, -width / 2, -height / 2, width, height)
+
+    ctx.value!.restore()
+
+    // 绘制图片
+    ctx.value!.draw(false, () => {
+      canvasToImage()
+    })
+  }
+
+  canvasHeight.value = cutHeight.value
+  canvasWidth.value = cutWidth.value
+  draw()
+}
+function preventTouchMove() {}
+
+defineExpose<ImgCropperExpose>({
+  revertIsAnimation,
+  setRoate,
+  resetImg
+})
+</script>
+
+<!-- #ifdef MP-WEIXIN || MP-QQ  -->
+<script module="animation" lang="wxs">
+
+function setAnimation(newValue, oldValue, ownerInstance){
+  if (newValue) {
+    var id = ownerInstance.setTimeout(function() {
+    ownerInstance.callMethod('revertIsAnimation',false)
+    ownerInstance.clearTimeout(id)
+  },300)
+  }
+
+}
+
+module.exports= {
+  setAnimation:setAnimation,
+}
+</script>
+<!-- #endif -->
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-img/index.scss b/src/uni_modules/wot-design-uni/components/wd-img/index.scss
new file mode 100644
index 0000000..9d3eba2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-img/index.scss
@@ -0,0 +1,19 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+@include b(img) {
+  position: relative;
+  display: inline-block;
+
+  @include e(image) {
+    display: block;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+  }
+
+  @include when(round) {
+    overflow: hidden;
+    border-radius: 50%;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-img/types.ts b/src/uni_modules/wot-design-uni/components/wd-img/types.ts
new file mode 100644
index 0000000..afa36c2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-img/types.ts
@@ -0,0 +1,61 @@
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../common/props'
+export type ImageMode =
+  | 'scaleToFill'
+  | 'aspectFit'
+  | 'aspectFill'
+  | 'widthFix'
+  | 'heightFix'
+  | 'top'
+  | 'bottom'
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'top left'
+  | 'top right'
+  | 'bottom left'
+  | 'bottom right'
+
+export const imgProps = {
+  ...baseProps,
+  customImage: makeStringProp(''),
+  /**
+   * 图片链接
+   */
+  src: String,
+  /**
+   * 预览图片链接
+   */
+  previewSrc: String,
+  /**
+   * 是否显示为圆形
+   */
+  round: makeBooleanProp(false),
+  /**
+   * 填充模式：'top left' / 'top right' / 'bottom left' / 'bottom right' / 'right' / 'left' / 'center' / 'bottom' / 'top' / 'heightFix' / 'widthFix' / 'aspectFill' / 'aspectFit' / 'scaleToFill'
+   */
+  mode: makeStringProp<ImageMode>('scaleToFill'),
+  /**
+   * 是否懒加载
+   */
+  lazyLoad: makeBooleanProp(false),
+  /**
+   * 宽度，默认单位为px
+   */
+  width: numericProp,
+  /**
+   * 高度，默认单位为px
+   */
+  height: numericProp,
+  /**
+   * 圆角大小，默认单位为px
+   */
+  radius: numericProp,
+  /**
+   * 是否允许预览
+   */
+  enablePreview: makeBooleanProp(false),
+  /**
+   * 开启长按图片显示识别小程序码菜单，仅在微信小程序平台有效
+   */
+  showMenuByLongpress: makeBooleanProp(false)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-img/wd-img.vue b/src/uni_modules/wot-design-uni/components/wd-img/wd-img.vue
new file mode 100644
index 0000000..dba0587
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-img/wd-img.vue
@@ -0,0 +1,89 @@
+<!--
+ * @Author: 810505339
+ * @Date: 2024-09-25 11:30:46
+ * @LastEditors: 810505339
+ * @LastEditTime: 2025-01-09 11:37:45
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-img\wd-img.vue
+ * 记得注释
+-->
+<template>
+  <view :class="rootClass" @click="handleClick" :style="rootStyle">
+    <image
+      :class="`wd-img__image ${customImage}`"
+      :style="status !== 'success' ? 'width: 0;height: 0;' : ''"
+      :src="src"
+      :mode="mode"
+      :show-menu-by-longpress="showMenuByLongpress"
+      :lazy-load="lazyLoad"
+      @load="handleLoad"
+      @error="handleError"
+    />
+    <slot v-if="status === 'loading'" name="loading"></slot>
+    <slot v-if="status === 'error'" name="error"></slot>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-img',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { addUnit, isDef, objToStyle } from '../common/util'
+import { imgProps } from './types'
+
+const props = defineProps(imgProps)
+const emit = defineEmits<{
+  (e: 'error', event: Event): void
+  (e: 'click', event: MouseEvent): void
+  (e: 'load', event: Event): void
+}>()
+
+const rootStyle = computed(() => {
+  const style: Record<string, string | number> = {}
+  if (isDef(props.height)) {
+    style['height'] = addUnit(props.height)
+  }
+  if (isDef(props.width)) {
+    style['width'] = addUnit(props.width)
+  }
+  if (isDef(props.radius)) {
+    style['border-radius'] = addUnit(props.radius)
+    style['overflow'] = 'hidden'
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `wd-img  ${props.round ? 'is-round' : ''} ${props.customClass}`
+})
+
+const status = ref<'loading' | 'error' | 'success'>('loading')
+
+function handleError(event: any) {
+  status.value = 'error'
+  emit('error', event)
+}
+function handleClick(event: MouseEvent) {
+  if (props.enablePreview && props.src && status.value == 'success') {
+    uni.previewImage({
+      urls: [props.previewSrc || props.src]
+    })
+  }
+  emit('click', event)
+}
+function handleLoad(event: any) {
+  status.value = 'success'
+  emit('load', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-anchor/index.scss b/src/uni_modules/wot-design-uni/components/wd-index-anchor/index.scss
new file mode 100644
index 0000000..f0a1ac6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-index-anchor/index.scss
@@ -0,0 +1,35 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(index-anchor) {
+    background-color: $-color-gray-8;
+    color: $-color-white;
+  }
+}
+
+// #ifdef MP-DINGTALK
+@include b(index-anchor-ding) {
+  
+  @include when(sticky){
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
+// #endif
+
+@include b(index-anchor) {
+  background-color: $-color-gray-2;
+  padding: 10px;
+  font-size: 14px;
+  color: $-color-title;
+
+  @include when(sticky){
+    position: sticky;
+    top: 0;
+    left: 0;
+    z-index: 1;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-anchor/type.ts b/src/uni_modules/wot-design-uni/components/wd-index-anchor/type.ts
new file mode 100644
index 0000000..8a683fc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-index-anchor/type.ts
@@ -0,0 +1,9 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeRequiredProp } from '../common/props'
+
+export const indexAnchorProps = {
+  ...baseProps,
+  index: makeRequiredProp([String, Number])
+}
+
+export type IndexAnchorProps = ExtractPropTypes<typeof indexAnchorProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-anchor/wd-index-anchor.vue b/src/uni_modules/wot-design-uni/components/wd-index-anchor/wd-index-anchor.vue
new file mode 100644
index 0000000..8ea7e1a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-index-anchor/wd-index-anchor.vue
@@ -0,0 +1,55 @@
+<template>
+  <!-- #ifdef MP-DINGTALK -->
+  <view :class="`wd-index-anchor-ding ${isSticky ? 'is-sticky' : ''}`">
+    <!-- #endif -->
+    <view :class="`wd-index-anchor ${isSticky ? 'is-sticky' : ''} ${customClass}`" :style="customStyle" :id="indexAnchorId">
+      <slot>
+        {{ index }}
+      </slot>
+    </view>
+    <!-- #ifdef MP-DINGTALK -->
+  </view>
+  <!-- #endif -->
+</template>
+
+<script setup lang="ts">
+import { indexAnchorProps } from './type'
+import { onMounted, getCurrentInstance, ref, computed } from 'vue'
+import { indexBarInjectionKey } from '../wd-index-bar/type'
+import { getRect, isDef, uuid } from '../common/util'
+import { useParent } from '../composables/useParent'
+
+const props = defineProps(indexAnchorProps)
+
+const { parent: indexBar } = useParent(indexBarInjectionKey)
+
+const indexAnchorId = ref<string>(`indexBar${uuid()}`)
+
+const { proxy } = getCurrentInstance()!
+
+const top = ref<number>(0)
+
+const isSticky = computed(() => {
+  return indexBar && indexBar.props.sticky && indexBar.anchorState.activeIndex === props.index
+})
+
+function getInfo() {
+  getRect(`#${indexAnchorId.value}`, false, proxy).then((res) => {
+    if (isDef(indexBar)) {
+      top.value = Math.floor(res.top!)
+    }
+  })
+}
+
+onMounted(() => {
+  getInfo()
+})
+
+defineExpose({
+  top
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-bar/index.scss b/src/uni_modules/wot-design-uni/components/wd-index-bar/index.scss
new file mode 100644
index 0000000..a0cf250
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-index-bar/index.scss
@@ -0,0 +1,39 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(index-bar) {
+    @include e(index) {
+      color: $-color-white;
+    }
+  }
+}
+
+@include b(index-bar) {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  @include e(content) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(sidebar) {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+    transform: translateY(-50%);
+  }
+
+  @include e(index) {
+    font-size: 12px;
+    font-weight: $-fw-medium;
+    color: $-color-title;
+    padding: 4px 6px;
+
+    @include when(active) {
+      color: $-color-theme;
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-bar/type.ts b/src/uni_modules/wot-design-uni/components/wd-index-bar/type.ts
new file mode 100644
index 0000000..9a8c603
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-index-bar/type.ts
@@ -0,0 +1,23 @@
+import type { InjectionKey } from 'vue'
+import type { ExtractPropTypes } from 'vue'
+import { makeBooleanProp } from '../common/props'
+
+export type AnchorIndex = number | string
+
+export const indexBarProps = {
+  /**
+   * @description 索引是否吸顶
+   */
+  sticky: makeBooleanProp(false)
+}
+
+export type IndexBarProps = ExtractPropTypes<typeof indexBarProps>
+
+export type InderBarProvide = {
+  props: { sticky?: boolean }
+  anchorState: {
+    activeIndex: AnchorIndex | null // 当前激活的索引
+  }
+}
+
+export const indexBarInjectionKey: InjectionKey<InderBarProvide> = Symbol('wd-index-bar')
diff --git a/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue b/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue
new file mode 100644
index 0000000..d822559
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-index-bar/wd-index-bar.vue
@@ -0,0 +1,156 @@
+<template>
+  <view class="wd-index-bar" :id="indexBarId">
+    <!-- #ifdef MP-DINGTALK -->
+    <view class="wd-index-bar" :id="indexBarId">
+      <!-- #endif -->
+      <scroll-view :scrollTop="scrollState.scrollTop" :scroll-y="true" class="wd-index-bar__content" @scroll="hanleScroll">
+        <slot></slot>
+      </scroll-view>
+      <view
+        class="wd-index-bar__sidebar"
+        @touchstart.stop.prevent="handleTouchStart"
+        @touchmove.stop.prevent="handleTouchMove"
+        @touchend.stop.prevent="handleTouchEnd"
+        @touchcancel.stop.prevent="handleTouchEnd"
+      >
+        <view class="wd-index-bar__index" :class="{ 'is-active': item.index === state.activeIndex }" v-for="item in children" :key="item.index">
+          {{ item.index }}
+        </view>
+      </view>
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script setup lang="ts">
+import type { AnchorIndex } from './type'
+import { indexBarInjectionKey, indexBarProps } from './type'
+import { ref, getCurrentInstance, onMounted, reactive, nextTick, watch } from 'vue'
+import { getRect, isDef, uuid, pause } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+
+const props = defineProps(indexBarProps)
+
+const indexBarId = ref<string>(`indexBar${uuid()}`)
+
+const { proxy } = getCurrentInstance()!
+
+const state = reactive({
+  activeIndex: null as AnchorIndex | null
+})
+
+const { linkChildren, children } = useChildren(indexBarInjectionKey)
+
+linkChildren({ props, anchorState: state })
+
+watch(
+  () => children,
+  (newValue) => {
+    if (!newValue.length) {
+      state.activeIndex = null // 或者设置为一个默认值，如第一个子项的索引
+      return
+    }
+
+    if (!isDef(state.activeIndex) || !newValue.find((item) => item.index === state.activeIndex)) {
+      state.activeIndex = newValue[0].index
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const scrollState = reactive({
+  scrollTop: 0, // 即将滚动到的位置
+  prevScrollTop: 0, // 上次记录的位置
+  // 滚动距离
+  touching: false
+})
+
+// 组件距离页面顶部的高度
+let offsetTop = 0
+let sidebarInfo = {
+  // 侧边栏距离顶部的高度
+  offsetTop: 0,
+  // 高度固定24px
+  indexHeight: 24
+}
+
+function init() {
+  setTimeout(() => {
+    Promise.all([
+      getRect(`#${indexBarId.value}`, false, proxy),
+      getRect('.wd-index-bar__sidebar', false, proxy),
+      getRect('.wd-index-bar__index', false, proxy)
+    ]).then(([bar, sidebar, index]) => {
+      offsetTop = bar.top!
+      sidebarInfo.offsetTop = sidebar.top!
+      sidebarInfo.indexHeight = index.height!
+    })
+  }, 100)
+}
+
+onMounted(() => {
+  init()
+})
+
+function hanleScroll(scrollEvent: any) {
+  if (scrollState.touching) {
+    return
+  }
+  const { detail } = scrollEvent
+  const scrolltop = Math.floor(detail.scrollTop)
+  const anchor = children.find((item, index) => {
+    if (!isDef(children[index + 1])) return true
+    if (item.$.exposed!.top.value - offsetTop <= scrolltop && children[index + 1].$.exposed!.top.value - offsetTop > scrolltop) return true
+    return false
+  })
+  if (isDef(anchor) && state.activeIndex !== anchor.index) {
+    state.activeIndex = anchor.index
+  }
+  scrollState.prevScrollTop = scrolltop
+}
+
+function getAnchorByPageY(pageY: number) {
+  const y = pageY - sidebarInfo.offsetTop
+  let idx = Math.floor(y / sidebarInfo.indexHeight)
+  if (idx < 0) idx = 0
+  else if (idx > children.length - 1) idx = children.length - 1
+  return children[idx]
+}
+
+function handleTouchStart() {
+  scrollState.touching = true
+}
+
+function handleTouchMove(e: TouchEvent) {
+  const clientY = e.touches[0].pageY
+  if (state.activeIndex === getAnchorByPageY(clientY).index) {
+    return
+  }
+  state.activeIndex = getAnchorByPageY(clientY).index
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
+}
+
+async function handleTouchEnd(e: TouchEvent) {
+  const clientY = e.changedTouches[0].pageY
+  state.activeIndex = getAnchorByPageY(clientY).index
+  setScrollTop(getAnchorByPageY(clientY).$.exposed!.top.value - offsetTop)
+  await pause()
+  scrollState.touching = false
+}
+
+function setScrollTop(top: number) {
+  if (scrollState.scrollTop === top) {
+    scrollState.scrollTop = scrollState.prevScrollTop
+    nextTick(() => {
+      scrollState.scrollTop = top
+    })
+  } else {
+    scrollState.scrollTop = top
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-input-number/index.scss b/src/uni_modules/wot-design-uni/components/wd-input-number/index.scss
new file mode 100644
index 0000000..32879c2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-input-number/index.scss
@@ -0,0 +1,132 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(input-number) {
+    @include e(action) {
+      color: $-dark-color;
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(input) {
+      color: $-dark-color;
+    }
+
+    @include when(disabled) {
+      .wd-input-number__input {
+        color: $-dark-color-gray;
+      }
+      .wd-input-number__sub,
+      .wd-input-number__add {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+@include b(input-number) {
+  display: inline-block;
+  user-select: none;
+  line-height: 1.15;
+
+  @include e(action) {
+    position: relative;
+    display: inline-block;
+    width: $-input-number-btn-width;
+    height: $-input-number-height;
+    vertical-align: middle;
+    color: $-input-number-icon-color;
+    -webkit-tap-highlight-color: transparent;
+    box-sizing: border-box;
+
+    // 左右加减号的边框
+    &::after {
+      position: absolute;
+      content: "";
+      width: calc(200% - 2px);
+      height: calc(200% - 2px);
+      left: 0;
+      top: 0;
+      border: 1px solid $-input-number-border-color;
+      border-top-left-radius: calc($-input-number-radius * 2);
+      border-bottom-left-radius: calc($-input-number-radius * 2);
+      transform: scale(0.5);
+      transform-origin: left top;
+    }
+    &:last-child::after {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      border-top-right-radius: calc($-input-number-radius * 2);
+      border-bottom-right-radius: calc($-input-number-radius * 2);
+    }
+    @include when(disabled) {
+      color: $-input-number-disabled-color;
+    }
+  }
+
+  @include e(inner) {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+  }
+
+  @include e(input) {
+    position: relative;
+    display: block;
+    width: $-input-number-input-width;
+    height: $-input-number-height;
+    padding: 0 2px;
+    box-sizing: border-box;
+    z-index: 1;
+    background: transparent;
+    border: none;
+    outline: none;
+    text-align: center;
+    color: $-input-number-color;
+    font-size: $-input-number-fs;
+    -webkit-appearance: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+
+  @include e(input-border) {
+    position: absolute;
+    width: 100%;
+    height: calc(200% - 2px);
+    left: 0;
+    top: 0;
+    border-top: 1px solid $-input-number-border-color;
+    border-bottom: 1px solid $-input-number-border-color;
+    transform: scaleY(0.5);
+    transform-origin: left top;
+    z-index: 0;
+  }
+
+  @include edeep(action-icon) {
+    position: absolute;
+    display: inline-block;
+    font-size: $-input-number-icon-size;
+    width: $-input-number-icon-size;
+    height: $-input-number-icon-size;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  @include when(disabled) {
+    .wd-input-number__input {
+      color: $-input-number-disabled-color;
+      z-index: inherit;
+    }
+    .wd-input-number__sub,
+    .wd-input-number__add {
+      color: $-input-number-disabled-color;
+    }
+  }
+  @include when(without-input) {
+    .wd-input-number__action:last-child::after {
+      border-left: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-input-number/types.ts b/src/uni_modules/wot-design-uni/components/wd-input-number/types.ts
new file mode 100644
index 0000000..5a0f31b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-input-number/types.ts
@@ -0,0 +1,106 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2025-02-19 12:47:54
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-input-number/types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeRequiredProp, makeStringProp, numericProp } from '../common/props'
+
+/**
+ * 输入框值变化前的回调函数类型定义
+ * @param value 输入框的新值
+ * @returns 返回布尔值或Promise<boolean>，用于控制是否允许值的变化
+ */
+export type InputNumberBeforeChange = (value: number | string) => boolean | Promise<boolean>
+
+export type OperationType = 'add' | 'sub'
+
+/**
+ * 输入数字组件事件类型枚举
+ * Input: 用户输入事件
+ * Blur: 失焦事件
+ * Watch: 监听值变化事件
+ * Button: 按钮点击事件
+ */
+export enum InputNumberEventType {
+  Input = 'input',
+  Blur = 'blur',
+  Watch = 'watch',
+  Button = 'button'
+}
+
+export const inputNumberProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: makeRequiredProp(numericProp),
+  /**
+   * 最小值
+   */
+  min: makeNumberProp(1),
+  /**
+   * 最大值
+   */
+  max: makeNumberProp(Number.MAX_SAFE_INTEGER),
+  /**
+   * 步进值
+   */
+  step: makeNumberProp(1),
+  /**
+   * 是否严格按照步进值递增或递减
+   */
+  stepStrictly: makeBooleanProp(false),
+  /**
+   * 数值精度
+   */
+  precision: makeNumericProp(0),
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否禁用输入框
+   */
+  disableInput: makeBooleanProp(false),
+  /**
+   * 是否禁用减号按钮
+   */
+  disableMinus: makeBooleanProp(false),
+  /**
+   * 是否禁用加号按钮
+   */
+  disablePlus: makeBooleanProp(false),
+  /**
+   * 是否不显示输入框
+   */
+  withoutInput: makeBooleanProp(false),
+  /**
+   * 输入框宽度
+   */
+  inputWidth: makeNumericProp(36),
+  /**
+   * 是否允许为空
+   */
+  allowNull: makeBooleanProp(false),
+  /**
+   * 输入框占位符
+   */
+  placeholder: makeStringProp(''),
+  /**
+   * 原生属性，键盘弹起时，是否自动上推页面
+   */
+  adjustPosition: makeBooleanProp(true),
+  /**
+   * 输入值变化前的回调函数，返回 `false` 可阻止输入，支持返回 `Promise`
+   */
+  beforeChange: Function as PropType<InputNumberBeforeChange>,
+  /**
+   * 是否开启长按加减手势
+   */
+  longPress: makeBooleanProp(false)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue b/src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue
new file mode 100644
index 0000000..320b8dc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-input-number/wd-input-number.vue
@@ -0,0 +1,316 @@
+<template>
+  <view :class="`wd-input-number ${customClass} ${disabled ? 'is-disabled' : ''} ${withoutInput ? 'is-without-input' : ''}`" :style="customStyle">
+    <!-- 减号按钮 -->
+    <view
+      :class="`wd-input-number__action ${minDisabled || disableMinus ? 'is-disabled' : ''}`"
+      @click="handleClick('sub')"
+      @touchstart="handleTouchStart('sub')"
+      @touchend.stop="handleTouchEnd"
+    >
+      <wd-icon name="decrease" custom-class="wd-input-number__action-icon"></wd-icon>
+    </view>
+    <!-- 输入框 -->
+    <view v-if="!withoutInput" class="wd-input-number__inner" @click.stop="">
+      <input
+        class="wd-input-number__input"
+        :style="`${inputWidth ? 'width: ' + inputWidth : ''}`"
+        type="digit"
+        :disabled="disabled || disableInput"
+        :value="String(inputValue)"
+        :placeholder="placeholder"
+        :adjust-position="adjustPosition"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+      />
+      <view class="wd-input-number__input-border"></view>
+    </view>
+    <!-- 加号按钮 -->
+    <view
+      :class="`wd-input-number__action ${maxDisabled || disablePlus ? 'is-disabled' : ''}`"
+      @click="handleClick('add')"
+      @touchstart="handleTouchStart('add')"
+      @touchend.stop="handleTouchEnd"
+    >
+      <wd-icon name="add" custom-class="wd-input-number__action-icon"></wd-icon>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-input-number',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { isDef, isEqual } from '../common/util'
+import { inputNumberProps, InputNumberEventType, type OperationType } from './types'
+import { callInterceptor } from '../common/interceptor'
+
+const props = defineProps(inputNumberProps)
+const emit = defineEmits(['focus', 'blur', 'change', 'update:modelValue'])
+const inputValue = ref<string | number>(getInitValue()) // 输入框的值
+let longPressTimer: ReturnType<typeof setTimeout> | null = null // 长按定时器
+
+/**
+ * 判断数字是否达到最小值限制
+ */
+const minDisabled = computed(() => {
+  const value = formatValue(inputValue.value)
+  const { disabled, min, step } = props
+  return disabled || Number(value) <= min || changeStep(value, -step) < min
+})
+
+/**
+ * 判断数字是否达到最大值限制
+ */
+const maxDisabled = computed(() => {
+  const value = formatValue(inputValue.value)
+  const { disabled, max, step } = props
+  return disabled || Number(value) >= max || changeStep(value, step) > max
+})
+
+// 监听 modelValue 变化
+watch(
+  () => props.modelValue,
+  (value) => {
+    updateValue(value, InputNumberEventType.Watch)
+  }
+)
+
+// 监听 max, min, precision 变化
+watch([() => props.max, () => props.min, () => props.precision], () => {
+  const value = formatValue(inputValue.value)
+  updateValue(value, InputNumberEventType.Watch)
+})
+
+/**
+ * 对比两个值是否相等
+ * @param value1 第一个值
+ * @param value2 第二个值
+ * @returns 是否相等
+ */
+function isValueEqual(value1: number | string, value2: number | string) {
+  return isEqual(String(value1), String(value2))
+}
+
+// 获取初始值
+function getInitValue() {
+  const formatted = formatValue(props.modelValue)
+  if (!isValueEqual(formatted, props.modelValue)) {
+    emit('update:modelValue', formatted)
+  }
+  return formatted
+}
+
+// 将值转换为指定精度
+function toPrecision(value: number) {
+  const precision = Number(props.precision)
+  return Number(parseFloat(`${Math.round(value * Math.pow(10, precision)) / Math.pow(10, precision)}`).toFixed(precision))
+}
+
+/**
+ * 获取数字的小数位数
+ * @param value 需要计算精度的数字
+ * @returns 小数位数
+ */
+function getPrecision(value?: number) {
+  if (!isDef(value)) return 0
+  const valueString = value.toString()
+  const dotPosition = valueString.indexOf('.')
+  let precision = 0
+  if (dotPosition !== -1) {
+    precision = valueString.length - dotPosition - 1
+  }
+  return precision
+}
+
+/**
+ * 按步进值严格递增或递减
+ * @param value 当前值
+ * @returns 按步进值调整后的值
+ */
+function toStrictlyStep(value: number | string) {
+  const stepPrecision = getPrecision(props.step)
+  const precisionFactory = Math.pow(10, stepPrecision)
+  return (Math.round(Number(value) / props.step) * precisionFactory * props.step) / precisionFactory
+}
+
+// 内部更新处理函数
+function doUpdate(value: string | number) {
+  inputValue.value = value
+  const formatted = formatValue(value)
+  nextTick(() => {
+    inputValue.value = formatted
+    emit('update:modelValue', inputValue.value)
+    emit('change', { value: inputValue.value })
+  })
+}
+
+/**
+ * 清理输入字符串中多余的小数点
+ * @param value 输入的字符串
+ * @returns 清理后的字符串
+ */
+function cleanExtraDecimal(value: string): string {
+  const precisionAllowed = Number(props.precision) > 0
+  if (precisionAllowed) {
+    const dotIndex = value.indexOf('.')
+    if (dotIndex === -1) {
+      return value
+    } else {
+      const integerPart = value.substring(0, dotIndex + 1)
+      // 去除后续出现的'.'
+      const decimalPart = value.substring(dotIndex + 1).replace(/\./g, '')
+      return integerPart + decimalPart
+    }
+  } else {
+    // 不允许小数：保留整数部分
+    const dotIndex = value.indexOf('.')
+    return dotIndex !== -1 ? value.substring(0, dotIndex) : value
+  }
+}
+
+/**
+ * 更新输入框的值
+ * @param value 新的值
+ * @param eventType 触发更新的事件类型
+ */
+function updateValue(value: string | number, eventType: InputNumberEventType = InputNumberEventType.Input) {
+  const fromUser = eventType !== InputNumberEventType.Watch // watch时不认为是用户直接输入
+  const forceFormat = eventType === InputNumberEventType.Blur || eventType === InputNumberEventType.Button
+  // 对于 Input 和 Watch 类型，如果值以'.'结尾，则直接更新，不进行格式化
+  if ((eventType === InputNumberEventType.Input || eventType === InputNumberEventType.Watch) && String(value).endsWith('.') && props.precision) {
+    inputValue.value = value
+    nextTick(() => {
+      inputValue.value = cleanExtraDecimal(String(value))
+      emit('update:modelValue', inputValue.value)
+      emit('change', { value: inputValue.value })
+    })
+    return
+  }
+  if (!forceFormat && isValueEqual(value, inputValue.value)) {
+    return
+  }
+
+  const update = () => doUpdate(value)
+
+  if (fromUser) {
+    callInterceptor(props.beforeChange, {
+      args: [value],
+      done: update
+    })
+  } else {
+    update()
+  }
+}
+
+// 根据步进值改变值
+function changeStep(val: string | number, step: number) {
+  val = Number(val)
+  if (isNaN(val)) {
+    return props.min
+  }
+  const precision = Math.max(getPrecision(val), getPrecision(step))
+  const precisionFactor = Math.pow(10, precision)
+  return toPrecision((val * precisionFactor + step * precisionFactor) / precisionFactor)
+}
+
+function changeValue(step: number) {
+  if ((step < 0 && (minDisabled.value || props.disableMinus)) || (step > 0 && (maxDisabled.value || props.disablePlus))) return
+  const value = changeStep(inputValue.value, step)
+  updateValue(value, InputNumberEventType.Button)
+}
+
+// 增减值
+function handleClick(type: OperationType) {
+  const diff = type === 'add' ? props.step : -props.step
+  changeValue(diff)
+}
+
+function handleInput(event: any) {
+  const rawValue = event.detail.value || ''
+  updateValue(rawValue, InputNumberEventType.Input)
+}
+
+function handleBlur(event: any) {
+  const value = event.detail.value || ''
+  updateValue(value, InputNumberEventType.Blur)
+  emit('blur', { value })
+}
+
+// 每隔一段时间，重新调用自身，达到长按加减效果
+function longPressStep(type: OperationType) {
+  clearlongPressTimer()
+  longPressTimer = setTimeout(() => {
+    handleClick(type)
+    longPressStep(type)
+  }, 250)
+}
+
+// 按下一段时间后，达到长按状态
+function handleTouchStart(type: OperationType) {
+  if (!props.longPress) return
+  clearlongPressTimer()
+  longPressTimer = setTimeout(() => {
+    handleClick(type)
+    longPressStep(type)
+  }, 600)
+}
+
+// 触摸结束，清除定时器，停止长按加减
+function handleTouchEnd() {
+  if (!props.longPress) return
+  clearlongPressTimer()
+}
+
+// 清除定时器
+function clearlongPressTimer() {
+  if (longPressTimer) {
+    clearTimeout(longPressTimer)
+    longPressTimer = null
+  }
+}
+
+// 处理聚焦事件
+function handleFocus(event: any) {
+  emit('focus', event.detail)
+}
+
+// 格式化值
+function formatValue(value: string | number) {
+  if (props.allowNull && (!isDef(value) || value === '')) {
+    return ''
+  }
+
+  let formatted = Number(value)
+
+  if (isNaN(formatted)) {
+    formatted = props.min
+  }
+
+  if (props.stepStrictly) {
+    formatted = toStrictlyStep(value)
+  }
+
+  formatted = Math.min(Math.max(formatted, props.min), props.max)
+
+  if (isDef(props.precision)) {
+    formatted = toPrecision(formatted)
+  }
+
+  return formatted
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-input/index.scss b/src/uni_modules/wot-design-uni/components/wd-input/index.scss
new file mode 100644
index 0000000..44ea40d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-input/index.scss
@@ -0,0 +1,324 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(input) {
+    background: $-dark-background2;
+
+    &::after {
+      background: $-dark-color-gray;
+    }
+
+    @include when(not-empty) {
+      &:not(.is-disabled) {
+        &::after {
+          background-color: $-dark-color;
+        }
+      }
+    }
+
+
+    @include e(inner) {
+      color: $-dark-color;
+
+      &::-webkit-input-placeholder {
+        color: $-dark-color3;
+      }
+    }
+
+    @include e(count) {
+      color: $-dark-color3;
+      background: transparent;
+    }
+
+    @include e(count-current) {
+      color: $-dark-color;
+    }
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      color: $-dark-color;
+      background: transparent;
+    }
+
+    @include when(cell) {
+      background-color: $-dark-background2;
+      line-height: $-cell-line-height;
+
+      @include when(border) {
+        @include halfPixelBorder("top", $-input-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include when(disabled) {
+
+      .wd-input__inner {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+    }
+
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(input) {
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+  background: $-input-bg;
+
+  &::after {
+    position: absolute;
+    content: "";
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: $-input-border-color;
+    transform: scaleY(0.5);
+    transition: background-color 0.2s ease-in-out;
+  }
+
+  @include when(not-empty) {
+    &:not(.is-disabled) {
+      &::after {
+        background-color: $-input-not-empty-border-color;
+      }
+    }
+  }
+
+  @include e(label) {
+    position: relative;
+    display: flex;
+    width: $-input-cell-label-width;
+    color: $-cell-title-color;
+    margin-right: $-cell-padding;
+    box-sizing: border-box;
+    font-size: $-input-fs;
+    flex-shrink: 0;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: "*";
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+      }
+    }
+  }
+
+  @include e(label-inner) {
+    display: inline-block;
+    font-size: $-input-fs;
+    line-height: $-cell-line-height;
+  }
+
+  @include e(body) {
+    flex: 1;
+  }
+
+  @include e(value) {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+
+  @include e(prefix) {
+    margin-right: $-input-icon-margin;
+    font-size: $-input-fs;
+    line-height: initial;
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      margin-left: 0;
+    }
+  }
+
+  @include e(suffix) {
+    flex-shrink: 0;
+    line-height: initial;
+  }
+
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include when(disabled) {
+
+    .wd-input__inner {
+      color: $-input-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include when(error) {
+
+    .wd-input__inner {
+      color: $-input-error-color;
+      background: transparent;
+    }
+  }
+
+  @include when(no-border) {
+    &::after {
+      display: none;
+    }
+
+    .wd-input__inner {
+      height: $-input-inner-height-no-border;
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  @include when(cell) {
+    display: flex;
+    align-items: flex-start;
+    padding: $-input-cell-padding $-input-padding;
+    background-color: $-input-cell-bg;
+
+    &.is-error::after {
+      background: $-input-cell-border-color;
+    }
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      display: inline-flex;
+      align-items: center;
+      height: $-input-cell-height;
+      line-height: $-input-cell-height;
+    }
+
+    .wd-input__prefix {
+      display: inline-block;
+      margin-right: $-cell-icon-right;
+    }
+
+    .wd-input__inner {
+      height: $-input-cell-height;
+    }
+
+    &.wd-input::after {
+      display: none;
+    }
+
+
+    @include when(center) {
+      align-items: center;
+    }
+
+    @include when(border) {
+      @include halfPixelBorder("top", $-input-cell-padding);
+    }
+  }
+
+  @include when(large) {
+    padding: $-input-cell-padding-large;
+
+    .wd-input__prefix {
+      font-size: $-input-fs-large;
+    }
+
+    .wd-input__label-inner {
+      font-size: $-input-fs-large;
+    }
+
+    .wd-input__inner {
+      font-size: $-input-fs-large;
+    }
+
+
+    .wd-input__count {
+      font-size: $-input-count-fs-large;
+    }
+
+    :deep(.wd-input__icon),
+    :deep(.wd-input__clear) {
+      font-size: $-input-icon-size-large;
+    }
+
+  }
+
+
+  @include e(inner) {
+    flex: 1;
+    height: $-input-inner-height;
+    font-size: $-input-fs;
+    color: $-input-color;
+    outline: none;
+    border: none;
+    background: none;
+    padding: 0;
+    box-sizing: border-box;
+
+    &::-webkit-input-placeholder {
+      color: $-input-placeholder-color;
+    }
+
+    @include when(align-right) {
+      text-align: right;
+    }
+  }
+
+  @include e(readonly-mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+
+
+  @include edeep(icon) {
+    margin-left: $-input-icon-margin;
+    font-size: $-input-icon-size;
+    color: $-input-icon-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include edeep(clear) {
+    margin-left: $-input-icon-margin;
+    font-size: $-input-icon-size;
+    color: $-input-clear-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include e(count) {
+    margin-left: 15px;
+    font-size: $-input-count-fs;
+    color: $-input-count-color;
+    vertical-align: middle;
+    background: $-input-bg;
+  }
+
+  @include e(count-current) {
+    color: $-input-count-current-color;
+
+    @include when(error) {
+      color: $-input-error-color;
+    }
+  }
+
+  .wd-input__count,
+  .wd-input__count-current {
+    display: inline-flex;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-input/placeholder.scss b/src/uni_modules/wot-design-uni/components/wd-input/placeholder.scss
new file mode 100644
index 0000000..53ca272
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-input/placeholder.scss
@@ -0,0 +1,21 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(input) {
+    @include e(placeholder) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+
+@include b(input) {
+  @include e(placeholder) {
+    color: $-input-placeholder-color;
+
+    &.is-error {
+      color: $-input-error-color;
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-input/types.ts b/src/uni_modules/wot-design-uni/components/wd-input/types.ts
new file mode 100644
index 0000000..b5ed9cb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-input/types.ts
@@ -0,0 +1,183 @@
+import type { PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+
+export type InputClearTrigger = 'focus' | 'always'
+
+export type InputType = 'text' | 'number' | 'digit' | 'idcard' | 'safe-password' | 'nickname' | 'tel'
+
+export type InputConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+export type InputSize = 'large'
+
+export type InputMode = 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url'
+
+export const inputProps = {
+  ...baseProps,
+  customInputClass: makeStringProp(''),
+  customLabelClass: makeStringProp(''),
+  // 原生属性
+  /**
+   * 占位文本
+   */
+  placeholder: String,
+  /**
+   * 原生属性，指定 placeholder 的样式，目前仅支持color,font-size和font-weight
+   */
+  placeholderStyle: String,
+  /**
+   * 原生属性，指定 placeholder 的样式类
+   */
+  placeholderClass: makeStringProp(''),
+  /**
+   * 原生属性，指定光标与键盘的距离。取 input 距离底部的距离和cursor-spacing指定的距离的最小值作为光标与键盘的距离
+   */
+  cursorSpacing: makeNumberProp(0),
+  /**
+   * 原生属性，指定focus时的光标位置
+   */
+  cursor: makeNumberProp(-1),
+  /**
+   * 原生属性，光标起始位置，自动聚集时有效，需与selection-end搭配使用
+   */
+  selectionStart: makeNumberProp(-1),
+  /**
+   * 原生属性，光标结束位置，自动聚集时有效，需与selection-start搭配使用
+   */
+  selectionEnd: makeNumberProp(-1),
+  /**
+   * 原生属性，键盘弹起时，是否自动上推页面
+   */
+  adjustPosition: makeBooleanProp(true),
+  /**
+   * focus时，点击页面的时候不收起键盘
+   */
+  holdKeyboard: makeBooleanProp(false),
+  /**
+   * 设置键盘右下角按钮的文字，仅在type='text'时生效，可选值：done / go / next / search / send
+   */
+  confirmType: makeStringProp<InputConfirmType>('done'),
+  /**
+   * 点击键盘右下角按钮时是否保持键盘不收起
+   */
+  confirmHold: makeBooleanProp(false),
+  /**
+   * 原生属性，获取焦点
+   */
+  focus: makeBooleanProp(false),
+  /**
+   * 类型，可选值：text / number / digit / idcard / safe-password / nickname / tel
+   */
+  type: makeStringProp<InputType>('text'),
+  /**
+   * 原生属性，最大长度
+   */
+  maxlength: {
+    type: Number,
+    // #ifndef MP-ALIPAY
+    default: -1
+    // #endif
+  },
+  /**
+   * 原生属性，禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 微信小程序原生属性，强制 input 处于同层状态，默认 focus 时 input 会切到非同层状态 (仅在 iOS 下生效)
+   */
+  alwaysEmbed: makeBooleanProp(false),
+  // 原生属性结束
+  /**
+   * 输入框的值靠右展示
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 绑定值
+   */
+  modelValue: makeNumericProp(''),
+  /**
+   * 显示为密码框
+   */
+  showPassword: makeBooleanProp(false),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false),
+  /**
+   * 只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 前置图标，icon组件中的图标类名
+   */
+  prefixIcon: String,
+  /**
+   * 后置图标，icon组件中的图标类名
+   */
+  suffixIcon: String,
+  /**
+   * 显示字数限制，需要同时设置 maxlength
+   */
+  showWordLimit: makeBooleanProp(false),
+  /**
+   * 设置左侧标题
+   */
+  label: String,
+  /**
+   * 设置左侧标题宽度
+   */
+  labelWidth: makeStringProp(''),
+  /**
+   * 设置输入框大小，可选值：large
+   */
+  size: String as PropType<InputSize>,
+  /**
+   * 设置输入框错误状态，错误状态时为红色
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 当有label属性时，设置标题和输入框垂直居中，默认为顶部居中
+   */
+  center: makeBooleanProp(false),
+  /**
+   * 非 cell 类型下是否隐藏下划线
+   */
+  noBorder: makeBooleanProp(false),
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
+   * 类型: "focus" | "always"
+   * 默认值: "always"
+   */
+  clearTrigger: makeStringProp<InputClearTrigger>('always'),
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: true
+   */
+  focusWhenClear: makeBooleanProp(true),
+  /**
+   * 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件
+   * 类型: boolean
+   * 默认值: true
+   */
+  ignoreCompositionEvent: makeBooleanProp(true),
+  /**
+   * 它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性。
+   * 类型: InputMode
+   * 可选值: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | "password"
+   * 默认值: "text"
+   */
+  inputmode: makeStringProp<InputMode>('text')
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue b/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
new file mode 100644
index 0000000..75a477d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-input/wd-input.vue
@@ -0,0 +1,298 @@
+<template>
+  <view :class="rootClass" :style="customStyle" @click="handleClick">
+    <view v-if="label || $slots.label" :class="labelClass" :style="labelStyle">
+      <view v-if="prefixIcon || $slots.prefix" class="wd-input__prefix">
+        <wd-icon v-if="prefixIcon && !$slots.prefix" custom-class="wd-input__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
+        <slot v-else name="prefix"></slot>
+      </view>
+      <view class="wd-input__label-inner">
+        <template v-if="label && !$slots.label">{{ label }}</template>
+        <slot v-else name="label"></slot>
+      </view>
+    </view>
+    <view class="wd-input__body">
+      <view class="wd-input__value">
+        <view v-if="(prefixIcon || $slots.prefix) && !label" class="wd-input__prefix">
+          <wd-icon v-if="prefixIcon && !$slots.prefix" custom-class="wd-input__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
+          <slot v-else name="prefix"></slot>
+        </view>
+        <input
+          :class="[
+            'wd-input__inner',
+            prefixIcon ? 'wd-input__inner--prefix' : '',
+            showWordCount ? 'wd-input__inner--count' : '',
+            alignRight ? 'is-align-right' : '',
+            customInputClass
+          ]"
+          :type="type"
+          :password="showPassword && !isPwdVisible"
+          v-model="inputValue"
+          :placeholder="placeholderValue"
+          :disabled="disabled || readonly"
+          :maxlength="maxlength"
+          :focus="focused"
+          :confirm-type="confirmType"
+          :confirm-hold="confirmHold"
+          :cursor="cursor"
+          :cursor-spacing="cursorSpacing"
+          :placeholder-style="placeholderStyle"
+          :selection-start="selectionStart"
+          :selection-end="selectionEnd"
+          :adjust-position="adjustPosition"
+          :hold-keyboard="holdKeyboard"
+          :always-embed="alwaysEmbed"
+          :placeholder-class="inputPlaceholderClass"
+          :ignoreCompositionEvent="ignoreCompositionEvent"
+          :inputmode="inputmode"
+          @input="handleInput"
+          @focus="handleFocus"
+          @blur="handleBlur"
+          @confirm="handleConfirm"
+          @keyboardheightchange="handleKeyboardheightchange"
+        />
+        <view v-if="props.readonly" class="wd-input__readonly-mask" />
+        <view v-if="showClear || showPassword || suffixIcon || showWordCount || $slots.suffix" class="wd-input__suffix">
+          <wd-icon v-if="showClear" custom-class="wd-input__clear" name="error-fill" @click="handleClear" />
+          <wd-icon v-if="showPassword" custom-class="wd-input__icon" :name="isPwdVisible ? 'view' : 'eye-close'" @click="togglePwdVisible" />
+          <view v-if="showWordCount" class="wd-input__count">
+            <text
+              :class="[
+              inputValue && String(inputValue).length > 0 ? 'wd-input__count-current' : '',
+              String(inputValue).length > maxlength! ? 'is-error' : ''
+            ]"
+            >
+              {{ String(inputValue).length }}
+            </text>
+            /{{ maxlength }}
+          </view>
+          <wd-icon v-if="suffixIcon && !$slots.suffix" custom-class="wd-input__icon" :name="suffixIcon" @click="onClickSuffixIcon" />
+          <slot v-else name="suffix"></slot>
+        </view>
+      </view>
+      <view v-if="errorMessage" class="wd-input__error-message">{{ errorMessage }}</view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-input',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch, useSlots, type Slots } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { isDef, objToStyle, pause, isEqual } from '../common/util'
+import { useCell } from '../composables/useCell'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { inputProps } from './types'
+
+interface InputSlots extends Slots {
+  prefix?: () => any
+  suffix?: () => any
+  label?: () => any
+}
+
+const props = defineProps(inputProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'clear',
+  'blur',
+  'focus',
+  'input',
+  'keyboardheightchange',
+  'confirm',
+  'clicksuffixicon',
+  'clickprefixicon',
+  'click'
+])
+const slots = useSlots() as InputSlots
+const { translate } = useTranslate('input')
+
+const isPwdVisible = ref<boolean>(false)
+const clearing = ref<boolean>(false) // 是否正在清空操作，避免重复触发失焦
+const focused = ref<boolean>(false) // 控制聚焦
+const focusing = ref<boolean>(false) // 当前是否激活状态
+const inputValue = ref<string | number>(getInitValue()) // 输入框的值
+const cell = useCell()
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    focused.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = isDef(newValue) ? String(newValue) : ''
+  }
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+const placeholderValue = computed(() => {
+  return isDef(props.placeholder) ? props.placeholder : translate('placeholder')
+})
+
+/**
+ * 展示清空按钮
+ */
+const showClear = computed(() => {
+  const { disabled, readonly, clearable, clearTrigger } = props
+  if (clearable && !readonly && !disabled && inputValue.value && (clearTrigger === 'always' || (props.clearTrigger === 'focus' && focusing.value))) {
+    return true
+  } else {
+    return false
+  }
+})
+
+/**
+ * 展示字数统计
+ */
+const showWordCount = computed(() => {
+  const { disabled, readonly, maxlength, showWordLimit } = props
+  return Boolean(!disabled && !readonly && isDef(maxlength) && maxlength > -1 && showWordLimit)
+})
+
+/**
+ * 表单错误提示信息
+ */
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+const rootClass = computed(() => {
+  return `wd-input  ${props.label || slots.label ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${cell.border.value ? 'is-border' : ''} ${
+    props.size ? 'is-' + props.size : ''
+  } ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''}  ${
+    inputValue.value && String(inputValue.value).length > 0 ? 'is-not-empty' : ''
+  }  ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
+})
+
+const labelClass = computed(() => {
+  return `wd-input__label ${props.customLabelClass} ${isRequired.value ? 'is-required' : ''}`
+})
+
+const inputPlaceholderClass = computed(() => {
+  return `wd-input__placeholder  ${props.placeholderClass}`
+})
+
+const labelStyle = computed(() => {
+  return props.labelWidth
+    ? objToStyle({
+        'min-width': props.labelWidth,
+        'max-width': props.labelWidth
+      })
+    : ''
+})
+
+// 状态初始化
+function getInitValue() {
+  const formatted = formatValue(props.modelValue)
+  if (!isValueEqual(formatted, props.modelValue)) {
+    emit('update:modelValue', formatted)
+  }
+  return formatted
+}
+
+function formatValue(value: string | number) {
+  const { maxlength } = props
+  if (isDef(maxlength) && maxlength !== -1 && String(value).length > maxlength) {
+    return value.toString().slice(0, maxlength)
+  }
+  return value
+}
+
+function togglePwdVisible() {
+  isPwdVisible.value = !isPwdVisible.value
+}
+async function handleClear() {
+  clearing.value = true
+  focusing.value = false
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    focused.value = false
+  }
+  await pause()
+  if (props.focusWhenClear) {
+    focused.value = true
+    focusing.value = true
+  }
+  emit('update:modelValue', inputValue.value)
+  emit('clear')
+}
+async function handleBlur() {
+  // 等待150毫秒，clear执行完毕
+  await pause(150)
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+  focusing.value = false
+  emit('blur', {
+    value: inputValue.value
+  })
+}
+function handleFocus({ detail }: any) {
+  focusing.value = true
+  emit('focus', detail)
+}
+function handleInput({ detail }: any) {
+  emit('update:modelValue', inputValue.value)
+  emit('input', detail)
+}
+function handleKeyboardheightchange({ detail }: any) {
+  emit('keyboardheightchange', detail)
+}
+function handleConfirm({ detail }: any) {
+  emit('confirm', detail)
+}
+function onClickSuffixIcon() {
+  emit('clicksuffixicon')
+}
+function onClickPrefixIcon() {
+  emit('clickprefixicon')
+}
+function handleClick(event: MouseEvent) {
+  emit('click', event)
+}
+function isValueEqual(value1: number | string, value2: number | string) {
+  return isEqual(String(value1), String(value2))
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
+<style lang="scss">
+@import './placeholder.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-keyboard/constants.ts b/src/uni_modules/wot-design-uni/components/wd-keyboard/constants.ts
new file mode 100644
index 0000000..764fb95
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-keyboard/constants.ts
@@ -0,0 +1,81 @@
+/**
+ * 车牌号键盘-省份简称
+ */
+export const CAR_KEYBOARD_AREAS = [
+  '京',
+  '沪',
+  '粤',
+  '津',
+  '冀',
+  '豫',
+  '云',
+  '辽',
+  '黑',
+  '湘',
+  '皖',
+  '鲁',
+  '苏',
+  '浙',
+  '赣',
+  '鄂',
+  '桂',
+  '甘',
+  '晋',
+  '陕',
+  '蒙',
+  '吉',
+  '闽',
+  '贵',
+  '渝',
+  '川',
+  '青',
+  '琼',
+  '宁',
+  '挂',
+  '藏',
+  '港',
+  '澳',
+  '新',
+  '使',
+  '学'
+]
+
+/**
+ * 车牌号键盘-数字和字母（不包含I和O，因为车牌号规则中不使用这两个字母）
+ */
+export const CAR_KEYBOARD_KEYS = [
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  0,
+  'Q',
+  'W',
+  'E',
+  'R',
+  'T',
+  'Y',
+  'U',
+  'P',
+  'A',
+  'S',
+  'D',
+  'F',
+  'G',
+  'H',
+  'J',
+  'K',
+  'L',
+  'Z',
+  'X',
+  'C',
+  'V',
+  'B',
+  'N',
+  'M'
+]
diff --git a/src/uni_modules/wot-design-uni/components/wd-keyboard/index.scss b/src/uni_modules/wot-design-uni/components/wd-keyboard/index.scss
new file mode 100644
index 0000000..feffeb0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-keyboard/index.scss
@@ -0,0 +1,102 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(keyboard) {
+    background: $-dark-background5;
+
+    @include e(header) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(keyboard) {
+  width: 100%;
+  background: $-keyboard-background;
+  color: $-color-black;
+  user-select: none;
+
+  @include m(with-title) {
+    border-radius: 20px 20px 0 0;
+  }
+
+  @include e(header) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    height: $-keyboard-title-height;
+    padding-top: 6px;
+    color: $-keyboard-title-color;
+    font-size: $-keyboard-title-font-size;
+  }
+
+  @include e(title) {
+    display: inline-block;
+    font-weight: normal;
+
+    &-left {
+      position: absolute;
+      left: 0;
+    }
+  }
+
+  @include e(body) {
+    display: flex;
+    padding: 6px 0 0 6px;
+  }
+
+  @include e(keys) {
+    display: flex;
+    flex: 3;
+    flex-wrap: wrap;
+  }
+
+  &-car {
+    @include e(body) {
+      display: flex;
+      padding: 6px 0 0 6px;
+    }
+  }
+
+  &-car {
+    @include e(keys) {
+      display: flex;
+      flex: 10;
+      flex-wrap: wrap;
+
+      .wd-key-wrapper {
+        --wot-keyboard-key-font-size: 18px;
+        flex-basis: 10%;
+
+        @include m(wider) {
+          flex-basis: 20%;
+        }
+      }
+    }
+  }
+
+  @include e(close) {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 0;
+    height: 100%;
+    padding: $-keyboard-close-padding;
+    color: $-keyboard-close-color;
+    font-size: $-keyboard-close-font-size;
+    background-color: transparent;
+    border: none;
+    @include m(hover) {
+      opacity: 0.6;
+    }
+  }
+
+  @include e(sidebar) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-keyboard/key/index.scss b/src/uni_modules/wot-design-uni/components/wd-keyboard/key/index.scss
new file mode 100644
index 0000000..6e256c2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-keyboard/key/index.scss
@@ -0,0 +1,79 @@
+@import './../../common/abstracts/_mixin.scss';
+@import './../../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(key) {
+    background: $-dark-background2;
+    color: $-dark-color;
+
+    &:active {
+      background-color: $-dark-background4;
+    }
+
+    @include m(active) {
+      background-color: $-dark-background4;
+    }
+  }
+}
+
+.wd-key-wrapper {
+  position: relative;
+  flex: 1;
+  flex-basis: 33%;
+  box-sizing: border-box;
+  padding: 0 6px 6px 0;
+
+  @include m(wider) {
+    flex-basis: 66%;
+  }
+}
+
+@include b(key) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $-keyboard-key-height;
+  font-size: $-keyboard-key-font-size;
+  line-height: 1.5;
+  background: $-keyboard-key-background;
+  border-radius: $-keyboard-key-border-radius;
+
+  &:active {
+    background-color: $-keyboard-key-active-color;
+  }
+
+  @include m(large) {
+    position: absolute;
+    top: 0;
+    right: 6px;
+    bottom: 6px;
+    left: 0;
+    height: auto;
+  }
+
+  @include m(delete, close) {
+    font-size: $-keyboard-delete-font-size;
+  }
+
+  @include m(active) {
+    background-color: $-keyboard-key-active-color;
+  }
+
+  @include m(close) {
+    color: $-keyboard-button-text-color;
+    background: $-keyboard-button-background;
+
+    &:active {
+      background: $-keyboard-button-background;
+      opacity: $-keyboard-button-active-opacity;
+    }
+  }
+
+  @include edeep(loading-icon) {
+    color: $-keyboard-button-text-color;
+  }
+
+  @include edeep(icon) {
+    font-size: $-keyboard-icon-size;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-keyboard/key/index.vue b/src/uni_modules/wot-design-uni/components/wd-keyboard/key/index.vue
new file mode 100644
index 0000000..b1a9a7c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-keyboard/key/index.vue
@@ -0,0 +1,71 @@
+<template>
+  <view :class="`wd-key-wrapper ${wider ? 'wd-key-wrapper--wider' : ''}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+    <view :class="keyClass">
+      <wd-loading custom-class="wd-key__loading-icon" v-if="props.loading" />
+      <template v-if="type === 'delete'">
+        <template v-if="text">
+          {{ text }}
+        </template>
+        <wd-icon v-else custom-class="wd-key__icon" name="keyboard-delete" size="22px"></wd-icon>
+      </template>
+      <template v-else-if="type === 'extra'">
+        <template v-if="text">
+          {{ text }}
+        </template>
+        <wd-icon v-else custom-class="wd-key__icon" name="keyboard-collapse" size="22px"></wd-icon>
+      </template>
+      <template v-else>{{ text }}</template>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-key',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import { useTouch } from '../../composables/useTouch'
+import { keyProps } from './types'
+
+const props = defineProps(keyProps)
+const emit = defineEmits(['press'])
+
+const touch = useTouch()
+const active = ref<boolean>(false)
+
+const keyClass = computed(() => {
+  return `wd-key ${props.large ? 'wd-key--large' : ''} ${props.type === 'delete' ? 'wd-key--delete' : ''} ${
+    props.type === 'close' ? 'wd-key--close' : ''
+  }`
+})
+
+function onTouchStart(event: TouchEvent) {
+  touch.touchStart(event)
+  active.value = true
+}
+
+function onTouchMove(event: TouchEvent) {
+  touch.touchMove(event)
+  if (touch.direction.value) {
+    active.value = false
+  }
+}
+
+function onTouchEnd() {
+  if (active.value) {
+    active.value = false
+    emit('press', props.text, props.type)
+  }
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-keyboard/key/types.ts b/src/uni_modules/wot-design-uni/components/wd-keyboard/key/types.ts
new file mode 100644
index 0000000..efa497a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-keyboard/key/types.ts
@@ -0,0 +1,11 @@
+import { makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+export type NumberKeyType = '' | 'delete' | 'extra' | 'close'
+
+export const keyProps = {
+  type: makeStringProp<NumberKeyType>(''),
+  text: makeNumericProp(''),
+  wider: makeBooleanProp(false),
+  large: makeBooleanProp(false),
+  loading: makeBooleanProp(false)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-keyboard/types.ts b/src/uni_modules/wot-design-uni/components/wd-keyboard/types.ts
new file mode 100644
index 0000000..c456187
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-keyboard/types.ts
@@ -0,0 +1,79 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type KeyboardMode = 'default' | 'custom' | 'car'
+export type KeyType = '' | 'delete' | 'extra' | 'close'
+
+export interface Key {
+  text?: number | string // key文本
+  type?: KeyType // key的类型
+  wider?: boolean // 是否占2个key的宽度
+}
+
+export const keyboardProps = {
+  ...baseProps,
+  /**
+   * 是否可见
+   */
+  visible: makeBooleanProp(false),
+  /**
+   * 绑定的值
+   */
+  modelValue: makeStringProp(''),
+  /**
+   * 标题
+   */
+  title: String,
+  /**
+   * 键盘模式
+   */
+  mode: makeStringProp<KeyboardMode>('default'),
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(100),
+  /**
+   * 最大长度
+   */
+  maxlength: makeNumberProp(Infinity),
+  /**
+   * 是否显示删除键
+   */
+  showDeleteKey: makeBooleanProp(true),
+  /**
+   * 是否随机键盘按键顺序
+   */
+  randomKeyOrder: makeBooleanProp(false),
+  /**
+   * 确认按钮文本
+   */
+  closeText: String,
+  /**
+   * 删除按钮文本
+   */
+  deleteText: String,
+  /**
+   * 关闭按钮是否显示加载状态
+   */
+  closeButtonLoading: makeBooleanProp(false),
+  /**
+   * 是否显示蒙层
+   */
+  modal: makeBooleanProp(false),
+  /**
+   * 是否在点击外部时收起键盘
+   */
+  hideOnClickOutside: makeBooleanProp(true),
+  /**
+   * 是否锁定滚动
+   */
+  lockScroll: makeBooleanProp(true),
+  /**
+   * 是否在底部安全区域内
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 额外按键
+   */
+  extraKey: [String, Array] as PropType<string | Array<string>>
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-keyboard/wd-keyboard.vue b/src/uni_modules/wot-design-uni/components/wd-keyboard/wd-keyboard.vue
new file mode 100644
index 0000000..875fb13
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-keyboard/wd-keyboard.vue
@@ -0,0 +1,179 @@
+<template>
+  <wd-popup
+    v-model="show"
+    position="bottom"
+    :z-index="zIndex"
+    :safe-area-inset-bottom="safeAreaInsetBottom"
+    :modal-style="modal ? '' : 'opacity: 0;'"
+    :modal="hideOnClickOutside"
+    :lockScroll="lockScroll"
+    @click-modal="handleClose"
+  >
+    <view :class="`wd-keyboard ${customClass}`" :style="customStyle">
+      <view class="wd-keyboard__header" v-if="showTitle || $slots.title">
+        <slot name="title">
+          <text class="wd-keyboard__title">{{ title }}</text>
+        </slot>
+        <view class="wd-keyboard__close" hover-class="wd-keyboard__close--hover" v-if="showClose" @click="handleClose">
+          <text>{{ closeText }}</text>
+        </view>
+      </view>
+      <template v-if="mode !== 'car'">
+        <view class="wd-keyboard__body">
+          <view class="wd-keyboard__keys">
+            <wd-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></wd-key>
+          </view>
+          <view class="wd-keyboard__sidebar" v-if="mode === 'custom'">
+            <wd-key v-if="showDeleteKey" large :text="deleteText" type="delete" @press="handlePress"></wd-key>
+            <wd-key large :text="closeText" type="close" :loading="closeButtonLoading" @press="handlePress"></wd-key>
+          </view>
+        </view>
+      </template>
+      <template v-if="mode === 'car'">
+        <view class="wd-keyboard-car__body">
+          <view class="wd-keyboard-car__keys">
+            <wd-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></wd-key>
+          </view>
+        </view>
+      </template>
+    </view>
+  </wd-popup>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-keyboard',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import WdKey from './key/index.vue'
+import { keyboardProps, type Key } from './types'
+import type { NumberKeyType } from './key/types'
+import { CAR_KEYBOARD_AREAS, CAR_KEYBOARD_KEYS } from './constants'
+
+const props = defineProps(keyboardProps)
+const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue'])
+
+const show = ref(props.visible)
+watch(
+  () => props.visible,
+  (newValue) => {
+    show.value = newValue
+  }
+)
+
+const carKeyboardLang = ref('zh')
+const keys = computed(() => (props.mode !== 'car' ? (props.mode === 'custom' ? genCustomKeys() : genDefaultKeys()) : genCarKeys()))
+
+const showClose = computed(() => {
+  return props.closeText && (props.mode === 'default' || props.mode === 'car')
+})
+
+const showTitle = computed(() => {
+  return props.title || showClose.value
+})
+
+/**
+ * 随机打乱数组的顺序
+ * @param arr 要打乱顺序的数组
+ * @returns 打乱顺序后的数组
+ */
+function shuffleArray<T>(arr: T[]): T[] {
+  const newArr = [...arr]
+  for (let i = newArr.length - 1; i > 0; i--) {
+    // 生成一个随机索引 j，范围是 [0, i]
+    const j = Math.floor(Math.random() * (i + 1))
+
+    // 交换索引 i 和 j 处的元素
+    ;[newArr[i], newArr[j]] = [newArr[j], newArr[i]]
+  }
+  return newArr
+}
+function genBasicKeys(): Key[] {
+  const keys = Array.from({ length: 9 }, (_, i) => ({ text: i + 1 }))
+
+  // 如果需要随机顺序，则调用 shuffleArray 方法打乱数组顺序
+  return props.randomKeyOrder ? shuffleArray(keys) : keys
+}
+
+function genDefaultKeys(): Key[] {
+  return [
+    ...genBasicKeys(),
+    { text: props.extraKey as string, type: 'extra' },
+    { text: 0 },
+    {
+      // 根据条件是否显示删除键的文本和类型
+      text: props.showDeleteKey ? props.deleteText : '',
+      type: props.showDeleteKey ? 'delete' : ''
+    }
+  ]
+}
+
+function genCustomKeys(): Key[] {
+  const keys = genBasicKeys()
+  const extraKeys = Array.isArray(props.extraKey) ? props.extraKey : [props.extraKey]
+  if (extraKeys.length === 1) {
+    // 如果只有一个额外按键，则添加一个宽度较大的数字0和一个额外按键
+    keys.push({ text: 0, wider: true }, { text: extraKeys[0], type: 'extra' })
+  } else if (extraKeys.length === 2) {
+    // 如果有两个额外按键，则添加两个额外按键和一个数字0
+    keys.push({ text: extraKeys[0], type: 'extra' }, { text: 0 }, { text: extraKeys[1], type: 'extra' })
+  }
+
+  return keys
+}
+
+// 生成车牌键盘
+function genCarKeys(): Array<Key> {
+  const [keys, remainKeys] = splitCarKeys()
+  return [
+    ...keys,
+    { text: carKeyboardLang.value === 'zh' ? 'ABC' : '返回', type: 'extra', wider: true },
+    ...remainKeys,
+    { text: props.deleteText, type: 'delete', wider: true }
+  ]
+}
+
+function splitCarKeys(): Array<Array<Key>> {
+  const keys = carKeyboardLang.value === 'zh' ? CAR_KEYBOARD_AREAS.map((key) => ({ text: key })) : CAR_KEYBOARD_KEYS.map((key) => ({ text: key }))
+  return [keys.slice(0, 30), keys.slice(30)]
+}
+
+const handleClose = () => {
+  emit('close')
+  emit('update:visible', false)
+}
+
+const handlePress = (text: string, type: NumberKeyType) => {
+  if (type === 'extra') {
+    if (text === '') {
+      return handleClose()
+    } else if (text === 'ABC' || text === '返回') {
+      carKeyboardLang.value = carKeyboardLang.value === 'zh' ? 'en' : 'zh'
+      return
+    }
+  }
+
+  const value = props.modelValue
+  if (type === 'delete') {
+    emit('delete')
+    emit('update:modelValue', value.slice(0, value.length - 1))
+  } else if (type === 'close') {
+    handleClose()
+  } else if (value.length < +props.maxlength) {
+    emit('input', text)
+    emit('update:modelValue', value + text)
+  }
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-loading/index.scss b/src/uni_modules/wot-design-uni/components/wd-loading/index.scss
new file mode 100644
index 0000000..bc995a7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-loading/index.scss
@@ -0,0 +1,37 @@
+@import "../common/abstracts/_mixin.scss";
+@import "../common/abstracts/variable.scss";
+
+@include b(loading) {
+  font-size: 0;
+  line-height: 0;
+  vertical-align: middle;
+  display: inline-block;
+  width: $-loading-size;
+  height: $-loading-size;
+
+  @include e(body) {
+    width: 100%;
+    height: 100%;
+    animation: wd-rotate 0.8s linear infinite;
+    animation-duration: 2s;
+
+  }
+  @include e(svg) {
+    width: 100%;
+    height: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+}
+
+@keyframes wd-rotate {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+
diff --git a/src/uni_modules/wot-design-uni/components/wd-loading/types.ts b/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
new file mode 100644
index 0000000..c997f2a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
@@ -0,0 +1,31 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-07-18 22:09:12
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loading/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeNumericProp, makeStringProp } from '../common/props'
+
+export type LoadingType = 'outline' | 'ring' // 提示信息加载状态类型
+
+export const loadingProps = {
+  ...baseProps,
+  /**
+   * 加载指示器类型，可选值：'outline' | 'ring'
+   */
+  type: makeStringProp<LoadingType>('ring'),
+  /**
+   * 设置加载指示器颜色
+   */
+  color: makeStringProp('#4D80F0'),
+  /**
+   * 设置加载指示器大小
+   */
+  size: makeNumericProp('')
+}
+
+export type LoadingProps = ExtractPropTypes<typeof loadingProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue b/src/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue
new file mode 100644
index 0000000..d887e8f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-loading/wd-loading.vue
@@ -0,0 +1,90 @@
+<template>
+  <view :class="`wd-loading ${props.customClass}`" :style="rootStyle">
+    <view class="wd-loading__body">
+      <view class="wd-loading__svg" :style="`background-image: url(${svg});`"></view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-loading',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import base64 from '../common/base64'
+import { gradient, context, objToStyle, addUnit, isDef } from '../common/util'
+import { loadingProps } from './types'
+
+const svgDefineId = context.id++
+const svgDefineId1 = context.id++
+const svgDefineId2 = context.id++
+
+const icon = {
+  outline(color = '#4D80F0') {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 42"><defs><linearGradient x1="100%" y1="0%" x2="0%" y2="0%" id="${svgDefineId}"><stop stop-color="#FFF" offset="0%" stop-opacity="0"/><stop stop-color="#FFF" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M21 1c11.046 0 20 8.954 20 20s-8.954 20-20 20S1 32.046 1 21 9.954 1 21 1zm0 7C13.82 8 8 13.82 8 21s5.82 13 13 13 13-5.82 13-13S28.18 8 21 8z" fill="${color}"/><path d="M4.599 21c0 9.044 7.332 16.376 16.376 16.376 9.045 0 16.376-7.332 16.376-16.376" stroke="url(#${svgDefineId}) " stroke-width="3.5" stroke-linecap="round"/></g></svg>`
+  },
+  ring(color = '#4D80F0', intermediateColor = '#a6bff7') {
+    return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><linearGradient id="${svgDefineId1}" gradientUnits="userSpaceOnUse" x1="50" x2="50" y2="180"><stop offset="0" stop-color="${color}"></stop> <stop offset="1" stop-color="${intermediateColor}"></stop></linearGradient> <path fill="url(#${svgDefineId1})" d="M20 100c0-44.1 35.9-80 80-80V0C44.8 0 0 44.8 0 100s44.8 100 100 100v-20c-44.1 0-80-35.9-80-80z"></path> <linearGradient id="${svgDefineId2}" gradientUnits="userSpaceOnUse" x1="150" y1="20" x2="150" y2="180"><stop offset="0" stop-color="#fff" stop-opacity="0"></stop> <stop offset="1" stop-color="${intermediateColor}"></stop></linearGradient> <path fill="url(#${svgDefineId2})" d="M100 0v20c44.1 0 80 35.9 80 80s-35.9 80-80 80v20c55.2 0 100-44.8 100-100S155.2 0 100 0z"></path> <circle cx="100" cy="10" r="10" fill="${color}"></circle></svg>`
+  }
+}
+
+const props = defineProps(loadingProps)
+
+const svg = ref<string>('')
+const intermediateColor = ref<string>('')
+const iconSize = ref<string | number | null>(null)
+
+watch(
+  () => props.size,
+  (newVal) => {
+    iconSize.value = addUnit(newVal)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.type,
+  () => {
+    buildSvg()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(iconSize.value)) {
+    style.height = addUnit(iconSize.value)
+    style.width = addUnit(iconSize.value)
+  }
+  return `${objToStyle(style)} ${props.customStyle}`
+})
+
+onBeforeMount(() => {
+  intermediateColor.value = gradient(props.color, '#ffffff', 2)[1]
+  buildSvg()
+})
+
+function buildSvg() {
+  const { type, color } = props
+  let ringType: 'outline' | 'ring' = isDef(type) ? type : 'ring'
+  const svgStr = `"data:image/svg+xml;base64,${base64(ringType === 'ring' ? icon[ringType](color, intermediateColor.value) : icon[ringType](color))}"`
+  svg.value = svgStr
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-loadmore/index.scss b/src/uni_modules/wot-design-uni/components/wd-loadmore/index.scss
new file mode 100644
index 0000000..78974f6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-loadmore/index.scss
@@ -0,0 +1,39 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+.wot-theme-dark {
+  @include b(loadmore) {
+    color: $-dark-color;
+  }
+}
+
+@include b(loadmore) {
+  width: 100%;
+  height: $-loadmore-height;
+  line-height: $-loadmore-height;
+  text-align: center;
+  color: $-loadmore-color;
+
+  @include edeep(loading) {
+    display: inline-block;
+    margin-right: 8px;
+    vertical-align:  middle;
+    width: $-loadmore-loading-size;
+    height: $-loadmore-loading-size;
+  }
+  @include e(text) {
+    display: inline-block;
+    font-size: $-loadmore-fs;
+    vertical-align: middle;
+
+    @include when(light) {
+      margin: 0 6px;
+      color: $-loadmore-error-color;
+    }
+  }
+  @include edeep(refresh) {
+    display: inline-block;
+    color: $-loadmore-error-color;
+    vertical-align: middle;
+    font-size: $-loadmore-refresh-fs;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-loadmore/types.ts b/src/uni_modules/wot-design-uni/components/wd-loadmore/types.ts
new file mode 100644
index 0000000..8ee2d00
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-loadmore/types.ts
@@ -0,0 +1,30 @@
+import type { PropType } from 'vue'
+import { baseProps } from '../common/props'
+import type { LoadingProps } from '../wd-loading/types'
+
+export type LoadMoreState = 'loading' | 'error' | 'finished'
+
+export const loadmoreProps = {
+  ...baseProps,
+  /**
+   * 加载状态，可选值：'loading' | 'error' | 'finished'
+   */
+  state: String as PropType<LoadMoreState>,
+  /**
+   * 加载提示文案
+   */
+  loadingText: String,
+  /**
+   * 全部加载完的提示文案
+   */
+  finishedText: String,
+  /**
+   * 加载失败的提示文案
+   */
+  errorText: String,
+  /**
+   * 加载中loading组件的属性
+   * 参考loading组件
+   */
+  loadingProps: Object as PropType<Partial<LoadingProps>>
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue b/src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue
new file mode 100644
index 0000000..2852119
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue
@@ -0,0 +1,68 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2024-11-09 12:35:25
+ * @LastEditTime: 2024-11-09 15:01:32
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-loadmore/wd-loadmore.vue
+ * 记得注释
+-->
+<template>
+  <view :class="['wd-loadmore', customClass]" :style="customStyle" @click="reload">
+    <wd-divider v-if="state === 'finished'">{{ finishedText || translate('finished') }}</wd-divider>
+    <block v-if="state === 'error'">
+      <text class="wd-loadmore__text">{{ errorText || translate('error') }}</text>
+      <text class="wd-loadmore__text is-light">{{ translate('retry') }}</text>
+      <wd-icon name="refresh" custom-class="wd-loadmore__refresh" />
+    </block>
+    <block v-if="state === 'loading'">
+      <wd-loading v-bind="customLoadingProps" />
+      <text class="wd-loadmore__text">{{ loadingText || translate('loading') }}</text>
+    </block>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-loadmore',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdDivider from '../wd-divider/wd-divider.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, ref } from 'vue'
+import { useTranslate } from '../composables/useTranslate'
+import { loadmoreProps, type LoadMoreState } from './types'
+import type { LoadingProps } from '../wd-loading/types'
+import { isDef, isUndefined, omitBy } from '../common/util'
+
+const customLoadingProps = computed(() => {
+  const loadingProps: Partial<LoadingProps> = isDef(props.loadingProps) ? omitBy(props.loadingProps, isUndefined) : {}
+  loadingProps.customClass = `wd-loadmore__loading ${loadingProps.customClass || ''}`
+  return loadingProps
+})
+
+const props = defineProps(loadmoreProps)
+const emit = defineEmits(['reload'])
+
+const { translate } = useTranslate('loadmore')
+
+const currentState = ref<LoadMoreState | null>(null)
+
+function reload() {
+  if (props.state !== 'error') return
+  currentState.value = 'loading'
+  emit('reload')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-message-box/index.scss b/src/uni_modules/wot-design-uni/components/wd-message-box/index.scss
new file mode 100644
index 0000000..b4c39e3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-message-box/index.scss
@@ -0,0 +1,108 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+.wot-theme-dark {
+  @include b(message-box) {
+    @include e(body) {
+      background-color: $-dark-background2;
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(content) {
+      color: $-dark-color3;
+
+      &::-webkit-scrollbar-thumb {
+        background: $-dark-border-color;
+      }
+    }
+  }
+}
+
+:deep(.wd-message-box){
+  border-radius: $-message-box-radius;
+  overflow: hidden;
+}
+
+@include b(message-box) {
+  border-radius: $-message-box-radius;
+  overflow: hidden;
+
+  @include e(container) {
+    width: $-message-box-width;
+    box-sizing: border-box;
+  }
+
+  @include e(body) {
+    background-color: $-message-box-bg;
+    padding: $-message-box-padding;
+
+    @include when(no-title) {
+      padding: 25px 24px 0px;
+    }
+  }
+
+  @include e(title) {
+    text-align: center;
+    font-size: $-message-box-title-fs;
+    color: $-message-box-title-color;
+    line-height: 20px;
+    font-weight: 500;
+    padding-top: 5px;
+    padding-bottom: 10px;
+  }
+
+  @include e(content) {
+    max-height: $-message-box-content-max-height;
+    color: $-message-box-content-color;
+    font-size: $-message-box-content-fs;
+    text-align: center;
+    overflow: auto;
+    line-height: 20px;
+
+    &::-webkit-scrollbar {
+      width: $-message-box-content-scrollbar-width;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      width: $-message-box-content-scrollbar-width;
+      background: $-message-box-content-scrollbar-color;
+      border-radius: calc($-message-box-content-scrollbar-width / 2);
+    }
+  }
+
+  @include e(input-error) {
+    min-height: 18px;
+    margin-top: 2px;
+    color: $-message-box-input-error-color;
+    text-align: left;
+
+    @include when(hidden) {
+      visibility: hidden;
+    }
+  }
+
+  @include e(actions) {
+    padding: 24px;
+  }
+  
+  @include edeep(actions-btn) {
+    &:not(:last-child) {
+      margin-right: 16px;
+    }
+  }
+
+  @include e(flex) {
+    display: flex;
+  }
+
+  @include e(block) {
+    display: block;
+  }
+
+  @include e(cancel) {
+    margin-right: 16px;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts b/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts
new file mode 100644
index 0000000..5e67a4e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-message-box/index.ts
@@ -0,0 +1,96 @@
+/*
+ * @Author: weisheng
+ * @Date: 2022-12-14 17:33:21
+ * @LastEditTime: 2024-12-05 13:23:17
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\index.ts
+ * 记得注释
+ */
+import { inject, provide, ref } from 'vue'
+import type { Message, MessageOptions, MessageOptionsWithCallBack, MessageResult, MessageType } from './types'
+import { deepMerge } from '../common/util'
+
+const messageDefaultOptionKey = '__MESSAGE_OPTION__'
+
+const None = Symbol('None')
+
+// 默认模板
+export const defaultOptions: MessageOptionsWithCallBack = {
+  title: '',
+  showCancelButton: false,
+  show: false,
+  closeOnClickModal: true,
+  msg: '',
+  type: 'alert',
+  inputType: 'text',
+  inputValue: '',
+  showErr: false,
+  zIndex: 99,
+  lazyRender: true,
+  inputError: ''
+}
+
+export function useMessage(selector: string = ''): Message {
+  const messageOptionKey = selector ? messageDefaultOptionKey + selector : messageDefaultOptionKey
+  const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack | typeof None>(None)) // Message选项
+  if (messageOption.value === None) {
+    messageOption.value = defaultOptions
+    provide(messageOptionKey, messageOption)
+  }
+
+  const createMethod = (type: MessageType) => {
+    // 优先级：options->MessageOptions->defaultOptions
+    return (options: MessageOptions | string) => {
+      const messageOptions = deepMerge({ type: type }, typeof options === 'string' ? { title: options } : options) as MessageOptions
+      if (messageOptions.type === 'confirm' || messageOptions.type === 'prompt') {
+        messageOptions.showCancelButton = true
+      } else {
+        messageOptions.showCancelButton = false
+      }
+      return show(messageOptions)
+    }
+  }
+
+  const show = (option: MessageOptions | string) => {
+    // 返回一个promise
+    return new Promise<MessageResult>((resolve, reject) => {
+      const options = deepMerge(defaultOptions, typeof option === 'string' ? { title: option } : option)
+      messageOption.value = deepMerge(options, {
+        show: true,
+        success: (res: MessageResult) => {
+          close()
+          resolve(res)
+        },
+        fail: (res: MessageResult) => {
+          close()
+          reject(res)
+        }
+      })
+    })
+  }
+
+  // 打开Alert 弹框
+  const alert = createMethod('alert')
+  // 打开Confirm 弹框
+  const confirm = createMethod('confirm')
+  // 打开Prompt 弹框
+  const prompt = createMethod('prompt')
+
+  const close = () => {
+    if (messageOption.value !== None) {
+      messageOption.value.show = false
+    }
+  }
+  return {
+    show,
+    alert,
+    confirm,
+    prompt,
+    close
+  }
+}
+
+export const getMessageDefaultOptionKey = (selector: string) => {
+  return selector ? `${messageDefaultOptionKey}${selector}` : messageDefaultOptionKey
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-message-box/types.ts b/src/uni_modules/wot-design-uni/components/wd-message-box/types.ts
new file mode 100644
index 0000000..5ce339c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-message-box/types.ts
@@ -0,0 +1,137 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-04-08 22:34:01
+ * @LastEditTime: 2024-12-05 13:26:50
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-message-box\types.ts
+ * 记得注释
+ */
+import { baseProps, makeStringProp } from '../common/props'
+import type { ButtonProps } from '../wd-button/types'
+import { type InputSize, type InputType } from '../wd-input/types'
+
+export type MessageType = 'alert' | 'confirm' | 'prompt'
+
+export type MessageBeforeConfirmOption = {
+  resolve: (isPass: boolean) => void
+}
+
+export type MessageOptions = {
+  /**
+   * 标题
+   */
+  title?: string
+  /**
+   * 是否展示取消按钮
+   */
+  showCancelButton?: boolean
+  /**
+   * 是否支持点击蒙层进行关闭，点击蒙层回调传入的action为'modal'
+   */
+  closeOnClickModal?: boolean
+  /**
+   * 确定按钮文案
+   */
+  confirmButtonText?: string
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText?: string
+  /**
+   * 消息文案
+   */
+  msg?: string
+  /**
+   * 弹框类型
+   */
+  type?: MessageType
+  /**
+   * 当type为prompt时，输入框类型
+   */
+  inputType?: InputType
+  /**
+   * 设置输入框大小，可选值：large
+   */
+  inputSize?: InputSize
+  /**
+   * 当type为prompt时，输入框初始值
+   */
+  inputValue?: string | number
+  /**
+   * 当type为prompt时，输入框placeholder
+   */
+  inputPlaceholder?: string
+  /**
+   * 当type为prompt时，输入框正则校验，点击确定按钮时进行校验
+   */
+  inputPattern?: RegExp
+  /**
+   * 当type为prompt时，输入框校验函数，点击确定按钮时进行校验
+   */
+  inputValidate?: InputValidate
+  /**
+   * 当type为prompt时，输入框检验不通过时的错误提示文案
+   */
+  inputError?: string
+  /**
+   * 是否展示错误信息
+   */
+  showErr?: boolean
+  /**
+   * 弹窗层级
+   */
+  zIndex?: number
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   */
+  lazyRender?: boolean
+  /**
+   * 确认前钩子
+   */
+  beforeConfirm?: (options: MessageBeforeConfirmOption) => void
+  /**
+   * 取消按钮Props
+   */
+  cancelButtonProps?: Partial<ButtonProps>
+  /**
+   * 确认按钮Props
+   */
+  confirmButtonProps?: Partial<ButtonProps>
+}
+
+export type MessageOptionsWithCallBack = MessageOptions & {
+  show?: boolean
+  success?: (res: MessageResult) => void
+  fail?: (res: MessageResult) => void
+}
+
+export type ActionType = 'confirm' | 'cancel' | 'modal'
+
+export type InputValidate = (inputValue: string | number) => boolean
+
+export interface MessageResult {
+  action: ActionType
+  value?: string | number
+}
+
+export interface Message {
+  // 打开Message
+  show(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Alert 弹框
+  alert(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Confirm 弹框
+  confirm(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 打开Prompt 弹框
+  prompt(toastOptions: MessageOptions | string): Promise<MessageResult>
+  // 关闭Message
+  close(): void
+}
+
+export const messageBoxProps = {
+  ...baseProps,
+  /**
+   * 指定唯一标识
+   */
+  selector: makeStringProp('')
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue b/src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue
new file mode 100644
index 0000000..354b8fb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-message-box/wd-message-box.vue
@@ -0,0 +1,290 @@
+<template>
+  <view>
+    <wd-popup
+      transition="zoom-in"
+      v-model="messageState.show"
+      :close-on-click-modal="messageState.closeOnClickModal"
+      :lazy-render="messageState.lazyRender"
+      custom-class="wd-message-box"
+      @click-modal="toggleModal('modal')"
+      :z-index="messageState.zIndex"
+      :duration="200"
+    >
+      <view :class="rootClass">
+        <view :class="bodyClass">
+          <view v-if="messageState.title" class="wd-message-box__title">
+            {{ messageState.title }}
+          </view>
+          <view class="wd-message-box__content">
+            <block v-if="messageState.type === 'prompt'">
+              <wd-input
+                v-model="messageState.inputValue"
+                :type="messageState.inputType"
+                :size="messageState.inputSize"
+                :placeholder="messageState.inputPlaceholder"
+                @input="inputValChange"
+              />
+              <view v-if="messageState.showErr" class="wd-message-box__input-error">
+                {{ messageState.inputError || translate('inputNoValidate') }}
+              </view>
+            </block>
+            <slot>{{ messageState.msg }}</slot>
+          </view>
+        </view>
+        <view :class="`wd-message-box__actions ${messageState.showCancelButton ? 'wd-message-box__flex' : 'wd-message-box__block'}`">
+          <wd-button v-bind="customCancelProps" v-if="messageState.showCancelButton" @click="toggleModal('cancel')">
+            {{ messageState.cancelButtonText || translate('cancel') }}
+          </wd-button>
+          <wd-button v-bind="customConfirmProps" @click="toggleModal('confirm')">
+            {{ messageState.confirmButtonText || translate('confirm') }}
+          </wd-button>
+        </view>
+      </view>
+    </wd-popup>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-message-box',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import wdButton from '../wd-button/wd-button.vue'
+import wdInput from '../wd-input/wd-input.vue'
+import { computed, inject, reactive, ref, watch } from 'vue'
+import { messageBoxProps, type MessageOptionsWithCallBack, type MessageResult } from './types'
+import { defaultOptions, getMessageDefaultOptionKey } from '.'
+import { deepAssign, isDef, isFunction, isUndefined, omitBy } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import type { ButtonProps } from '../wd-button/types'
+
+const props = defineProps(messageBoxProps)
+
+const { translate } = useTranslate('message-box')
+
+const rootClass = computed(() => {
+  return `wd-message-box__container ${props.customClass}`
+})
+
+const bodyClass = computed(() => {
+  return `wd-message-box__body ${!messageState.title ? 'is-no-title' : ''} ${messageState.type === 'prompt' ? 'is-prompt' : ''}`
+})
+
+const messageOptionKey = getMessageDefaultOptionKey(props.selector)
+const messageOption = inject(messageOptionKey, ref<MessageOptionsWithCallBack>(defaultOptions)) // message选项
+
+const messageState = reactive<MessageOptionsWithCallBack>({
+  msg: '', // 消息内容
+  show: false, // 是否显示弹框
+  title: '', // 标题
+  showCancelButton: false, // 是否展示取消按钮
+  closeOnClickModal: true, // 是否支持点击蒙层关闭
+  confirmButtonText: '', // 确定按钮文案
+  cancelButtonText: '', // 取消按钮文案
+  type: 'alert', // 弹框类型
+  inputType: 'text', // 输入框类型
+  inputValue: '', // 输入框初始值
+  inputPlaceholder: '', // 输入框placeholder
+  inputError: '', // 输入框错误提示文案
+  showErr: false, // 是否显示错误提示
+  zIndex: 99, // 弹窗层级
+  lazyRender: true // 弹层内容懒渲染
+})
+
+/**
+ * 确认按钮属性
+ */
+const customConfirmProps = computed(() => {
+  const buttonProps: Partial<ButtonProps> = deepAssign(
+    {
+      block: true
+    },
+    isDef(messageState.confirmButtonProps) ? omitBy(messageState.confirmButtonProps, isUndefined) : {}
+  )
+  buttonProps.customClass = `${buttonProps.customClass || ''} wd-message-box__actions-btn`
+  return buttonProps
+})
+
+/**
+ * 取消按钮属性
+ */
+const customCancelProps = computed(() => {
+  const buttonProps: Partial<ButtonProps> = deepAssign(
+    {
+      block: true,
+      type: 'info'
+    },
+    isDef(messageState.cancelButtonProps) ? omitBy(messageState.cancelButtonProps, isUndefined) : {}
+  )
+  buttonProps.customClass = `${buttonProps.customClass || ''} wd-message-box__actions-btn`
+  return buttonProps
+})
+
+// 监听options变化展示
+watch(
+  () => messageOption.value,
+  (newVal: MessageOptionsWithCallBack) => {
+    reset(newVal)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => messageState.show,
+  (newValue) => {
+    resetErr(!!newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * 点击操作
+ * @param action
+ */
+function toggleModal(action: 'confirm' | 'cancel' | 'modal') {
+  if (action === 'modal' && !messageState.closeOnClickModal) {
+    return
+  }
+  if (messageState.type === 'prompt' && action === 'confirm' && !validate()) {
+    return
+  }
+  switch (action) {
+    case 'confirm':
+      if (messageState.beforeConfirm) {
+        messageState.beforeConfirm({
+          resolve: (isPass) => {
+            if (isPass) {
+              handleConfirm({
+                action: action,
+                value: messageState.inputValue
+              })
+            }
+          }
+        })
+      } else {
+        handleConfirm({
+          action: action,
+          value: messageState.inputValue
+        })
+      }
+      break
+    case 'cancel':
+      handleCancel({
+        action: action
+      })
+      break
+    default:
+      handleCancel({
+        action: 'modal'
+      })
+      break
+  }
+}
+
+/**
+ * 确认回调
+ * @param result
+ */
+function handleConfirm(result: MessageResult) {
+  messageState.show = false
+  if (isFunction(messageState.success)) {
+    messageState.success(result)
+  }
+}
+
+/**
+ * 取消回调
+ * @param result
+ */
+function handleCancel(result: MessageResult) {
+  messageState.show = false
+  if (isFunction(messageState.fail)) {
+    messageState.fail(result)
+  }
+}
+
+/**
+ * 如果存在校验规则行为，则进行判断校验是否通过规则。默认不存在校验直接铜鼓。
+ */
+function validate() {
+  if (messageState.inputPattern && !messageState.inputPattern.test(String(messageState.inputValue))) {
+    messageState.showErr = true
+    return false
+  }
+  if (typeof messageState.inputValidate === 'function') {
+    const validateResult = messageState.inputValidate(messageState.inputValue!)
+    if (!validateResult) {
+      messageState.showErr = true
+      return false
+    }
+  }
+  messageState.showErr = false
+  return true
+}
+
+/**
+ * @description show关闭时，销毁错误提示
+ * @param val
+ */
+function resetErr(val: boolean) {
+  if (val === false) {
+    messageState.showErr = false
+  }
+}
+function inputValChange({ value }: { value: string | number }) {
+  if (value === '') {
+    messageState.showErr = false
+    return
+  }
+  messageState.inputValue = value
+}
+
+/**
+ * 重置message选项值
+ * @param option message选项值
+ */
+function reset(option: MessageOptionsWithCallBack) {
+  if (option) {
+    messageState.title = isDef(option.title) ? option.title : ''
+    messageState.showCancelButton = isDef(option.showCancelButton) ? option.showCancelButton : false
+    messageState.show = option.show
+    messageState.closeOnClickModal = option.closeOnClickModal
+    messageState.confirmButtonText = option.confirmButtonText
+    messageState.cancelButtonText = option.cancelButtonText
+    messageState.msg = option.msg
+    messageState.type = option.type
+    messageState.inputType = option.inputType
+    messageState.inputSize = option.inputSize
+    messageState.inputValue = option.inputValue
+    messageState.inputPlaceholder = option.inputPlaceholder
+    messageState.inputPattern = option.inputPattern!
+    messageState.inputValidate = option.inputValidate
+    messageState.success = option.success
+    messageState.fail = option.fail
+    messageState.beforeConfirm = option.beforeConfirm
+    messageState.inputError = option.inputError
+    messageState.showErr = option.showErr
+    messageState.zIndex = option.zIndex
+    messageState.lazyRender = option.lazyRender
+    messageState.confirmButtonProps = option.confirmButtonProps
+    messageState.cancelButtonProps = option.cancelButtonProps
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/index.scss b/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/index.scss
new file mode 100644
index 0000000..b41d43d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/index.scss
@@ -0,0 +1,66 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(navbar-capsule) {
+    &::before {
+      border: 2rpx solid $-dark-border-color;
+    }
+
+    &::after {
+      background: $-dark-border-color;
+    }
+
+    :deep(.wd-navbar-capsule__icon) {
+      color: $-dark-color;
+    }
+  }
+}
+
+
+@include b(navbar-capsule) {
+  position: relative;
+  box-sizing: border-box;
+  width: $-navbar-capsule-width;
+  height: $-navbar-capsule-height;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 200%;
+    height: 200%;
+    transform: scale(0.5);
+    transform-origin: 0 0;
+    box-sizing: border-box;
+    border-radius: calc($-navbar-capsule-border-radius * 2);
+    border: 2rpx solid $-navbar-capsule-border-color;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 1px;
+    height: 36rpx;
+    background: $-navbar-capsule-border-color;
+  }
+
+  &:empty {
+    display: none;
+  }
+
+  @include edeep(icon) {
+    flex: 1;
+    position: relative;
+    color: $-navbar-desc-font-color;
+    font-size: $-navbar-capsule-icon-size;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/types.ts b/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/types.ts
new file mode 100644
index 0000000..2aee4bc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/types.ts
@@ -0,0 +1,8 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps } from '../common/props'
+
+export const navbarCapsuleProps = {
+  ...baseProps
+}
+
+export type NavbarCapsuleProps = ExtractPropTypes<typeof navbarCapsuleProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue b/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue
new file mode 100644
index 0000000..8b3568e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-navbar-capsule/wd-navbar-capsule.vue
@@ -0,0 +1,35 @@
+<template>
+  <view :class="`wd-navbar-capsule ${customClass}`" :style="customStyle">
+    <wd-icon @click="handleBack" name="chevron-left" custom-class="wd-navbar-capsule__icon" />
+    <wd-icon @click="handleBackHome" name="home" custom-class="wd-navbar-capsule__icon" />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-navbar-capsule',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { navbarCapsuleProps } from './types'
+
+const emit = defineEmits(['back', 'back-home'])
+defineProps(navbarCapsuleProps)
+
+function handleBack() {
+  emit('back')
+}
+function handleBackHome() {
+  emit('back-home')
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-navbar/index.scss b/src/uni_modules/wot-design-uni/components/wd-navbar/index.scss
new file mode 100644
index 0000000..e1685f2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-navbar/index.scss
@@ -0,0 +1,93 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(navbar) {
+    background-color: $-dark-background;
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(text) {
+      color: $-dark-color;
+    }
+
+    :deep(.wd-navbar__arrow) {
+      color: $-dark-color;
+    }
+  }
+}
+
+
+@include b(navbar) {
+  position: relative;
+  text-align: center;
+  user-select: none;
+  height: $-navbar-height;
+  line-height: $-navbar-height;
+  background-color: $-navbar-background;
+  box-sizing: content-box;
+
+  @include e(content) {
+    position: relative;
+    height: 100%;
+    width: 100%;
+  }
+
+  @include e(title) {
+    max-width: 60%;
+    height: 100%;
+    margin: 0 auto;
+    color: $-navbar-color;
+    font-weight: $-navbar-title-font-weight;
+    font-size: $-navbar-title-font-size;
+    @include lineEllipsis();
+  }
+
+  @include e(text) {
+    display: inline-block;
+    vertical-align: middle;
+    color: $-navbar-desc-font-color;
+  }
+
+  @include e(left, right, capsule) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    font-size: $-navbar-desc-font-size;
+    display: flex;
+    align-items: center;
+    padding: 0 12px;
+
+    @include when(disabled) {
+      opacity: $-navbar-disabled-opacity;
+    }
+  }
+
+  @include e(left, capsule) {
+    left: 0;
+  }
+
+  @include e(right) {
+    right: 0;
+  }
+
+  @include edeep(arrow) {
+    font-size: $-navbar-arrow-size;
+    color: $-navbar-color;
+  }
+
+
+  @include when(border) {
+    @include halfPixelBorder('bottom');
+  }
+
+  @include when(fixed) {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    z-index: 500;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-navbar/types.ts b/src/uni_modules/wot-design-uni/components/wd-navbar/types.ts
new file mode 100644
index 0000000..1879865
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-navbar/types.ts
@@ -0,0 +1,52 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export const navbarProps = {
+  ...baseProps,
+  /**
+   * 标题文字
+   */
+  title: String,
+  /**
+   * 左侧文案
+   */
+  leftText: String,
+  /**
+   * 右侧文案
+   */
+  rightText: String,
+  /**
+   * 是否显示左侧箭头
+   */
+  leftArrow: makeBooleanProp(false),
+  /**
+   * 是否显示下边框
+   */
+  bordered: makeBooleanProp(true),
+  /**
+   * 是否固定到顶部
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 固定在顶部时，是否在标签位置生成一个等高的占位元素
+   */
+  placeholder: makeBooleanProp(false),
+  /**
+   * 导航栏 z-index
+   */
+  zIndex: makeNumberProp(500),
+  /**
+   * 是否开启顶部安全区适配
+   */
+  safeAreaInsetTop: makeBooleanProp(false),
+  /**
+   * 是否禁用左侧按钮，禁用时透明度降低，且无法点击
+   */
+  leftDisabled: makeBooleanProp(false),
+  /**
+   * 是否禁用右侧按钮，禁用时透明度降低，且无法点击
+   */
+  rightDisabled: makeBooleanProp(false)
+}
+
+export type NavbarProps = ExtractPropTypes<typeof navbarProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue b/src/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue
new file mode 100644
index 0000000..0965d55
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-navbar/wd-navbar.vue
@@ -0,0 +1,111 @@
+<template>
+  <view :style="{ height: addUnit(height) }">
+    <view :class="`wd-navbar ${customClass} ${fixed ? 'is-fixed' : ''} ${bordered ? 'is-border' : ''}`" :style="rootStyle">
+      <view class="wd-navbar__content">
+        <view class="wd-navbar__capsule" v-if="$slots.capsule">
+          <slot name="capsule" />
+        </view>
+
+        <view :class="`wd-navbar__left ${leftDisabled ? 'is-disabled' : ''}`" @click="handleClickLeft" v-else-if="!$slots.left">
+          <wd-icon v-if="leftArrow" name="arrow-left" custom-class="wd-navbar__arrow" />
+          <view v-if="leftText" class="wd-navbar__text">{{ leftText }}</view>
+        </view>
+
+        <view v-else :class="`wd-navbar__left ${leftDisabled ? 'is-disabled' : ''}`" @click="handleClickLeft">
+          <slot name="left" />
+        </view>
+
+        <view class="wd-navbar__title">
+          <slot name="title" />
+          <block v-if="!$slots.title && title">{{ title }}</block>
+        </view>
+        <view :class="`wd-navbar__right ${rightDisabled ? 'is-disabled' : ''}`" @click="handleClickRight" v-if="$slots.right || rightText">
+          <slot name="right" />
+
+          <view v-if="!$slots.right && rightText" class="wd-navbar__text" hover-class="wd-navbar__text--hover" :hover-stay-time="70">
+            {{ rightText }}
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-navbar',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { type CSSProperties, computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+import { getRect, addUnit, isDef, objToStyle } from '../common/util'
+import { navbarProps } from './types'
+
+const props = defineProps(navbarProps)
+const emit = defineEmits(['click-left', 'click-right'])
+
+const height = ref<number | ''>('') // 占位高度
+
+const { statusBarHeight } = uni.getSystemInfoSync()
+
+watch(
+  [() => props.fixed, () => props.placeholder],
+  () => {
+    setPlaceholderHeight()
+  },
+  { deep: true, immediate: false }
+)
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (props.fixed && isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  if (props.safeAreaInsetTop) {
+    style['padding-top'] = addUnit(statusBarHeight || 0)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+onMounted(() => {
+  if (props.fixed && props.placeholder) {
+    nextTick(() => {
+      setPlaceholderHeight()
+    })
+  }
+})
+
+function handleClickLeft() {
+  if (!props.leftDisabled) {
+    emit('click-left')
+  }
+}
+
+function handleClickRight() {
+  if (!props.rightDisabled) {
+    emit('click-right')
+  }
+}
+
+const { proxy } = getCurrentInstance() as any
+
+function setPlaceholderHeight() {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.wd-navbar', false, proxy).then((res) => {
+    height.value = res.height as number
+  })
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-notice-bar/index.scss b/src/uni_modules/wot-design-uni/components/wd-notice-bar/index.scss
new file mode 100644
index 0000000..5ee8d3c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-notice-bar/index.scss
@@ -0,0 +1,68 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(notice-bar) {
+  display: flex;
+  padding: $-notice-bar-padding;
+  align-items: center;
+  font-size: $-notice-bar-fs;
+  border-radius: $-notice-bar-border-radius;
+  position: relative;
+  box-sizing: border-box;
+  @include when(warning) {
+    background: $-notice-bar-warning-bg;
+    color: $-notice-bar-warning-color;
+  }
+  @include when(info) {
+    background: $-notice-bar-info-bg;
+    color: $-notice-bar-info-color;
+  }
+  @include when(danger) {
+    background: $-notice-bar-danger-bg;
+    color: $-notice-bar-danger-color;
+  }
+  @include edeep(prefix) {
+    padding-right: 4px;
+    font-size: $-notice-bar-prefix-size;
+  }
+
+  @include edeep(suffix) {
+    text-align: center;
+    font-size: $-notice-bar-close-size;
+    display: inline-block;
+    background-color: $-notice-bar-close-bg;
+    color: $-notice-bar-close-color;
+    padding: 0;
+    border-radius: 0px 8px 0px 4px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+  @include e(wrap) {
+    position: relative;
+    flex: 1;
+    height: $-notice-bar-line-height;
+    overflow: hidden;
+    line-height: $-notice-bar-line-height;
+  }
+  @include e(content) {
+    position: absolute;
+    white-space: nowrap;
+  }
+  @include m(ellipse) {
+    .wd-notice-bar__content {
+      position: static;
+      @include lineEllipsis;
+    }
+  }
+  @include m(wrap) {
+
+    .wd-notice-bar__wrap {
+      height: auto;
+    }
+    .wd-notice-bar__content {
+      position: static;
+      white-space: normal;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-notice-bar/types.ts b/src/uni_modules/wot-design-uni/components/wd-notice-bar/types.ts
new file mode 100644
index 0000000..df6f796
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-notice-bar/types.ts
@@ -0,0 +1,67 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type NoticeBarType = 'warning' | 'info' | 'danger' | ''
+export type NoticeBarScrollDirection = 'horizontal' | 'vertical'
+
+export const noticeBarProps = {
+  ...baseProps,
+  /**
+   * 设置通知栏文案
+   */
+  text: {
+    type: [String, Array] as PropType<string | string[]>,
+    default: ''
+  },
+  /**
+   * 设置通知栏类型，可选值为：'warning' | 'info' | 'danger'
+   */
+  type: makeStringProp<NoticeBarType>('warning'),
+  /**
+   * 是否可滚动
+   */
+  scrollable: makeBooleanProp(true),
+  /**
+   * 滚动延迟时间（秒）
+   */
+  delay: makeNumberProp(1),
+  /**
+   * 滚动速度（px/s）
+   */
+  speed: makeNumberProp(50),
+  /**
+   * 是否可关闭
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 是否换行显示
+   */
+  wrapable: makeBooleanProp(false),
+  /**
+   * 设置左侧图标，使用 icon 章节中的图标名
+   */
+  prefix: String,
+  /**
+   * 文字、图标颜色
+   */
+  color: String,
+  /**
+   * 背景颜色
+   */
+  backgroundColor: String,
+  /**
+   * 滚动方向
+   */
+  direction: makeStringProp<NoticeBarScrollDirection>('horizontal')
+}
+
+export type NoticeBarProps = ExtractPropTypes<typeof noticeBarProps>
+
+export type NoticeBarExpose = {
+  /**
+   * 重置NoticeBar动画
+   */
+  reset: () => void
+}
+
+export type NoticeBarInstance = ComponentPublicInstance<NoticeBarProps, NoticeBarExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue b/src/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue
new file mode 100644
index 0000000..1c0e16a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-notice-bar/wd-notice-bar.vue
@@ -0,0 +1,266 @@
+<template>
+  <view v-if="show" :class="`wd-notice-bar ${customClass} ${noticeBarClass}`" :style="rootStyle">
+    <wd-icon v-if="prefix" custom-class="wd-notice-bar__prefix" :name="prefix"></wd-icon>
+    <slot v-else name="prefix"></slot>
+    <view class="wd-notice-bar__wrap">
+      <view class="wd-notice-bar__content" :style="animation" @transitionend="animationEnd" @click="handleClick">
+        <template v-if="isVertical">
+          <view v-for="item in textArray" :key="item">{{ item }}</view>
+          <view v-if="textArray.length > 1">{{ textArray[0] }}</view>
+        </template>
+        <slot v-else>{{ currentText }}</slot>
+      </view>
+    </view>
+    <wd-icon v-if="closable" custom-class="wd-notice-bar__suffix" name="close-bold" @click="handleClose"></wd-icon>
+    <slot v-else name="suffix"></slot>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-notice-bar',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { ref, watch, nextTick, computed, getCurrentInstance, type CSSProperties, onMounted, onActivated, onDeactivated, reactive } from 'vue'
+import { getRect, isArray, isDef, objToStyle } from '../common/util'
+import { type NoticeBarExpose, noticeBarProps } from './types'
+const $wrap = '.wd-notice-bar__wrap'
+const $content = '.wd-notice-bar__content'
+
+const props = defineProps(noticeBarProps)
+const emit = defineEmits(['close', 'next', 'click'])
+
+const wrapWidth = ref<number>(0)
+const show = ref<boolean>(true)
+const currentIndex = ref<number>(0)
+const textArray = computed(() => (Array.isArray(props.text) ? props.text : [props.text]))
+const currentText = computed(() => textArray.value[currentIndex.value])
+const verticalIndex = ref<number>(0)
+const wrapRect = ref<UniApp.NodeInfo | null>(null) // 外层容器节点信息
+const contentRect = ref<UniApp.NodeInfo | null>(null) // 内容节点信息
+const isHorizontal = computed(() => props.direction === 'horizontal')
+const isVertical = computed(() => props.direction === 'vertical')
+
+const transitionState = reactive<CSSProperties>({
+  transitionProperty: 'unset',
+  transitionDelay: 'unset',
+  transitionDuration: 'unset',
+  transform: 'none',
+  transitionTimingFunction: 'linear'
+})
+
+const animation = computed(() => {
+  return objToStyle(transitionState)
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.color)) {
+    style.color = props.color
+  }
+
+  if (isDef(props.backgroundColor)) {
+    style.background = props.backgroundColor
+  }
+
+  return `${objToStyle(style)}${props.customStyle}`
+})
+const noticeBarClass = computed(() => {
+  const { type, wrapable, scrollable } = props
+
+  let noticeBarClasses: string[] = []
+  type && noticeBarClasses.push(`is-${type}`)
+
+  if (isHorizontal.value) {
+    !wrapable && !scrollable && noticeBarClasses.push('wd-notice-bar--ellipse')
+  } else {
+    noticeBarClasses.push('wd-notice-bar--ellipse')
+  }
+
+  wrapable && !scrollable && noticeBarClasses.push('wd-notice-bar--wrap')
+  return noticeBarClasses.join(' ')
+})
+
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.text,
+  () => {
+    reset()
+  },
+  { deep: true }
+)
+
+onMounted(() => {
+  startTransition()
+  // #ifdef APP-PLUS
+  const pages = getCurrentPages()
+  const currentPage = pages[pages.length - 1]
+  const currentWebview = currentPage.$getAppWebview!()
+  currentWebview.addEventListener('hide', () => {
+    stopTransition()
+  })
+  currentWebview.addEventListener('show', () => {
+    startTransition()
+  })
+  // #endif
+})
+
+onActivated(() => {
+  startTransition()
+})
+
+onDeactivated(() => {
+  stopTransition()
+})
+
+function reset() {
+  stopTransition()
+  startTransition()
+}
+
+function startTransition() {
+  nextTick(() => scroll())
+}
+
+function stopTransition() {
+  transitionState.transitionProperty = 'unset'
+  transitionState.transitionDelay = 'unset'
+  transitionState.transitionDuration = 'unset'
+  transitionState.transform = 'none'
+  transitionState.transitionTimingFunction = 'linear'
+  currentIndex.value = 0
+  verticalIndex.value = 0
+}
+
+function handleClose() {
+  show.value = false
+  emit('close')
+}
+
+function setTransition({ duration, delay, translate }: { duration: number; delay: number; translate: number }) {
+  transitionState.transitionProperty = 'all'
+  transitionState.transitionDelay = `${delay}s`
+  transitionState.transitionDuration = `${duration}s`
+  transitionState.transform = `${props.direction === 'vertical' ? 'translateY' : 'translateX'}(${translate}px)`
+  transitionState.transitionTimingFunction = 'linear'
+}
+
+function queryRect() {
+  return Promise.all([getRect($wrap, false, proxy), getRect($content, false, proxy)])
+}
+
+async function verticalAnimate(height: number) {
+  const translate = -(height / (textArray.value.length + 1)) * (currentIndex.value + 1)
+  setTransition({
+    duration: height / (textArray.value.length + 1) / props.speed,
+    delay: props.delay,
+    translate
+  })
+}
+
+async function scroll() {
+  const [wRect, cRect] = await queryRect()
+  if (!wRect.width || !cRect.width || !cRect.height) return
+  wrapRect.value = wRect
+  contentRect.value = cRect
+  wrapWidth.value = wRect.width
+
+  if (isHorizontal.value) {
+    if (props.scrollable) {
+      setTransition({
+        duration: cRect.width / props.speed,
+        delay: props.delay,
+        translate: -cRect.width
+      })
+    }
+  } else {
+    if (textArray.value.length > 1) {
+      verticalAnimate(cRect.height)
+    }
+  }
+}
+
+function next() {
+  if (currentIndex.value >= textArray.value.length - 1) {
+    currentIndex.value = 0
+  } else {
+    currentIndex.value++
+  }
+  emit('next', currentIndex.value)
+}
+
+function animationEnd() {
+  if (isHorizontal.value) {
+    setTransition({
+      duration: 0,
+      delay: 0,
+      translate: wrapWidth.value + 1
+    })
+  } else {
+    if (++verticalIndex.value >= textArray.value.length) {
+      verticalIndex.value = 0
+      setTransition({
+        duration: 0,
+        delay: 0,
+        translate: 0
+      })
+    }
+  }
+
+  const timer = setTimeout(() => {
+    next() // 更换下一条文本
+
+    nextTick(async () => {
+      try {
+        const [wRect, cRect] = await queryRect()
+        wrapRect.value = wRect
+        contentRect.value = cRect
+        wrapWidth.value = wRect.width || 0
+      } catch (error) {
+        // console.error(error)
+      }
+
+      if (!contentRect.value || !contentRect.value.width || !contentRect.value.height) return
+
+      if (isHorizontal.value) {
+        setTransition({
+          duration: (wrapWidth.value + contentRect.value.width) / props.speed,
+          delay: props.delay,
+          translate: -contentRect.value.width
+        })
+      } else {
+        verticalAnimate(contentRect.value.height)
+      }
+    })
+
+    clearTimeout(timer)
+  }, 20)
+}
+
+function handleClick() {
+  const result = isArray(props.text)
+    ? {
+        index: currentIndex.value,
+        text: props.text[currentIndex.value]
+      }
+    : {
+        index: 0,
+        text: props.text
+      }
+  emit('click', result)
+}
+
+defineExpose<NoticeBarExpose>({ reset })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-notify/index.scss b/src/uni_modules/wot-design-uni/components/wd-notify/index.scss
new file mode 100644
index 0000000..5df8f4d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-notify/index.scss
@@ -0,0 +1,34 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(notify) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  padding: $-notify-padding;
+  font-size: $-notify-font-size;
+  line-height: $-notify-line-height;
+  color: $-notify-text-color;
+  
+  // allow newline character
+  white-space: pre-wrap;
+  text-align: center;
+  word-wrap: break-word;
+
+  @include m(primary) {
+    background: $-notify-primary-background;
+  }
+
+  @include m(success) {
+    background: $-notify-success-background;
+  }
+
+  @include m(danger) {
+    background: $-notify-danger-background;
+  }
+
+  @include m(warning) {
+    background: $-notify-warning-background;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-notify/index.ts b/src/uni_modules/wot-design-uni/components/wd-notify/index.ts
new file mode 100644
index 0000000..aaefa7c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-notify/index.ts
@@ -0,0 +1,61 @@
+import { inject, provide, reactive, ref } from 'vue'
+import type { NotifyProps } from './types'
+import { deepMerge, isString } from '../common/util'
+
+let timer: ReturnType<typeof setTimeout>
+let currentOptions = getDefaultOptions()
+const notifyDefaultOptionKey = '__NOTIFY_OPTION__'
+const None = Symbol('None')
+export const setNotifyDefaultOptions = (options: NotifyProps) => {
+  currentOptions = deepMerge(currentOptions, options) as NotifyProps
+}
+export const resetNotifyDefaultOptions = () => {
+  currentOptions = getDefaultOptions()
+}
+export const useNotify = (selector: string = '') => {
+  const notifyOptionKey = getNotifyOptionKey(selector)
+
+  const notifyOption = inject(notifyOptionKey, ref<NotifyProps | typeof None>(None))
+  if (notifyOption.value === None) {
+    notifyOption.value = currentOptions
+    provide(notifyOptionKey, notifyOption)
+  }
+  const showNotify = (option: NotifyProps | string) => {
+    const options = deepMerge(currentOptions, isString(option) ? { message: option } : option) as NotifyProps
+    notifyOption.value = deepMerge(options, { visible: true })
+    if (notifyOption.value.duration && notifyOption.value.duration > 0) {
+      timer && clearTimeout(timer)
+      timer = setTimeout(() => closeNotify(), options.duration)
+    }
+  }
+  const closeNotify = () => {
+    timer && clearTimeout(timer)
+    if (notifyOption.value !== None) {
+      notifyOption.value.visible = false
+    }
+  }
+
+  return {
+    showNotify,
+    closeNotify
+  }
+}
+export const getNotifyOptionKey = (selector: string) => {
+  return selector ? `${notifyDefaultOptionKey}${selector}` : notifyDefaultOptionKey
+}
+
+function getDefaultOptions(): NotifyProps {
+  return {
+    type: 'danger',
+    color: undefined,
+    zIndex: 99,
+    message: '',
+    duration: 3000,
+    position: 'top',
+    safeHeight: undefined,
+    background: undefined,
+    onClick: undefined,
+    onClosed: undefined,
+    onOpened: undefined
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-notify/types.ts b/src/uni_modules/wot-design-uni/components/wd-notify/types.ts
new file mode 100644
index 0000000..b22440d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-notify/types.ts
@@ -0,0 +1,62 @@
+import type { PropType, ExtractPropTypes } from 'vue'
+import { makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export type NotifyType = 'primary' | 'success' | 'danger' | 'warning'
+export type NotifyPosition = 'top' | 'bottom'
+export type NotifyProps = Omit<Partial<ExtractPropTypes<typeof notifyProps>>, 'selector'> & {
+  onClick?: (event: MouseEvent) => void
+  onClosed?: () => void
+  onOpened?: () => void
+}
+export type NotifyThemeVars = {
+  notifyPadding?: string
+  notifyFontSize?: string
+  notifyTextColor?: string
+  notifyLineHeight?: number | string
+  notifyDangerBackground?: string
+  notifyPrimaryBackground?: string
+  notifySuccessBackground?: string
+  notifyWarningBackground?: string
+}
+export const notifyProps = {
+  /**
+   * 类型，可选值为 primary success danger warning
+   */
+  type: makeStringProp<NotifyType>('danger'),
+  /**
+   * 字体颜色
+   */
+  color: makeStringProp(''),
+  /**
+   * 将组件的 z-index 层级设置为一个固定值
+   */
+  zIndex: makeNumberProp(99),
+  /**
+   * 显示
+   */
+  visible: makeBooleanProp(false),
+  /**
+   * 展示文案，支持通过\n换行
+   */
+  message: makeNumericProp(''),
+  /**
+   * 指定唯一标识
+   */
+  selector: makeStringProp(''),
+  /**
+   * 展示时长(ms)，值为 0 时，notify 不会消失
+   */
+  duration: makeNumberProp(3000),
+  /**
+   * 弹出位置，可选值为 top bottom
+   */
+  position: makeStringProp<NotifyPosition>('top'),
+  /**
+   * 顶部安全高度（
+   */
+  safeHeight: Number,
+  /**
+   * 背景颜色
+   */
+  background: makeStringProp('')
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue b/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue
new file mode 100644
index 0000000..8145745
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-notify/wd-notify.vue
@@ -0,0 +1,84 @@
+<template>
+  <wd-popup
+    v-model="state.visible"
+    :custom-style="customStyle"
+    :position="state.position"
+    :z-index="state.zIndex"
+    :duration="250"
+    :modal="false"
+    @leave="onClosed"
+    @enter="onOpened"
+  >
+    <view class="wd-notify" :class="[`wd-notify--${state.type}`]" :style="{ color: state.color, background: state.background }" @click="onClick">
+      <slot>{{ state.message }}</slot>
+    </view>
+  </wd-popup>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-notify',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import { inject, computed, watch, ref } from 'vue'
+import { notifyProps, type NotifyProps } from './types'
+import { getNotifyOptionKey } from '.'
+import { addUnit, isFunction } from '../common/util'
+
+const props = defineProps(notifyProps)
+const emits = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+  (e: 'click', event: MouseEvent): void
+  (e: 'closed'): void
+  (e: 'opened'): void
+}>()
+const state = inject(getNotifyOptionKey(props.selector), ref<NotifyProps>(props))
+
+const customStyle = computed(() => {
+  const { safeHeight, position } = state.value
+  let customStyle: string = ''
+  switch (position) {
+    case 'top':
+      customStyle = `top: calc(var(--window-top) + ${addUnit(safeHeight || 0)})`
+      break
+    case 'bottom':
+      customStyle = 'bottom: var(--window-bottom)'
+      break
+    default:
+      break
+  }
+  return customStyle
+})
+
+const onClick = (event: MouseEvent) => {
+  if (isFunction(state.value.onClick)) return state.value.onClick(event)
+  emits('click', event)
+}
+const onClosed = () => {
+  if (isFunction(state.value.onClosed)) return state.value.onClosed()
+  emits('closed')
+}
+const onOpened = () => {
+  if (isFunction(state.value.onOpened)) return state.value.onOpened()
+  emits('opened')
+}
+
+watch(
+  () => state.value.visible,
+  (visible) => {
+    emits('update:visible', visible as boolean)
+  },
+  { deep: true }
+)
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-number-keyboard/index.scss b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/index.scss
new file mode 100644
index 0000000..09a903a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/index.scss
@@ -0,0 +1,78 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(number-keyboard) {
+    background: $-dark-background5;
+
+    @include e(header){
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(number-keyboard) {
+  width: 100%;
+  background: $-number-keyboard-background;
+  color: $-color-black;
+  user-select: none;
+
+  @include m(with-title) {
+    border-radius: 20px 20px 0 0;
+  }
+
+  @include e(header) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: content-box;
+    height: $-number-keyboard-title-height;
+    padding-top: 6px;
+    color: $-number-keyboard-title-color;
+    font-size: $-number-keyboard-title-font-size;
+  }
+
+  @include e(title) {
+    display: inline-block;
+    font-weight: normal;
+
+    &-left {
+      position: absolute;
+      left: 0;
+    }
+  }
+
+  @include e(body) {
+    display: flex;
+    padding: 6px 0 0 6px;
+  }
+
+  @include e(keys) {
+    display: flex;
+    flex: 3;
+    flex-wrap: wrap;
+  }
+
+  @include e(close) {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    right: 0;
+    height: 100%;
+    padding: $-number-keyboard-close-padding;
+    color: $-number-keyboard-close-color;
+    font-size: $-number-keyboard-close-font-size;
+    background-color: transparent;
+    border: none;
+    @include m(hover){
+      opacity: 0.6; 
+    }
+  }
+
+  @include e(sidebar) {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.scss b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.scss
new file mode 100644
index 0000000..e2f9692
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.scss
@@ -0,0 +1,81 @@
+@import "./../../common/abstracts/_mixin.scss";
+@import "./../../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(key) {
+    background: $-dark-background2;
+    color: $-dark-color;
+
+    &:active {
+      background-color: $-dark-background4;
+    }
+
+    @include m(active) {
+      background-color: $-dark-background4;
+    }
+
+  }
+}
+
+.wd-key-wrapper {
+  position: relative;
+  flex: 1;
+  flex-basis: 33%;
+  box-sizing: border-box;
+  padding: 0 6px 6px 0;
+
+  @include m(wider) {
+    flex-basis: 66%;
+  }
+}
+
+@include b(key) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: $-number-keyboard-key-height;
+  font-size: $-number-keyboard-key-font-size;
+  line-height: 1.5;
+  background: $-number-keyboard-key-background;
+  border-radius: $-number-keyboard-key-border-radius;
+
+  &:active {
+    background-color: $-number-keyboard-key-active-color;
+  }
+
+  @include m(large) {
+    position: absolute;
+    top: 0;
+    right: 6px;
+    bottom: 6px;
+    left: 0;
+    height: auto;
+  }
+
+  @include m(delete, close) {
+    font-size: $-number-keyboard-delete-font-size;
+  }
+
+  @include m(active) {
+    background-color: $-number-keyboard-key-active-color;
+  }
+
+  @include m(close) {
+    color: $-number-keyboard-button-text-color;
+    background: $-number-keyboard-button-background;
+
+    &:active {
+      background: $-number-keyboard-button-background;
+      opacity: $-number-keyboard-button-active-opacity;
+    }
+  }
+
+  @include edeep(loading-icon) {
+    color: $-number-keyboard-button-text-color;
+  }
+
+  @include edeep(icon) {
+    font-size: $-number-keyboard-icon-size;
+  }
+
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.vue b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.vue
new file mode 100644
index 0000000..4ff505c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/index.vue
@@ -0,0 +1,73 @@
+<template>
+  <view :class="`wd-key-wrapper ${wider ? 'wd-key-wrapper--wider' : ''}`" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd">
+    <view :class="keyClass">
+      <wd-loading custom-class="wd-key__loading-icon" v-if="props.loading" />
+      <template v-if="type === 'delete'">
+        <template v-if="text">
+          {{ text }}
+        </template>
+        <wd-icon v-else custom-class="wd-key__icon" name="keyboard-delete" size="22px"></wd-icon>
+      </template>
+      <template v-else-if="type === 'extra'">
+        <template v-if="text">
+          {{ text }}
+        </template>
+        <wd-icon v-else custom-class="wd-key__icon" name="keyboard-collapse" size="22px"></wd-icon>
+      </template>
+      <template v-else>{{ text }}</template>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-key',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdLoading from '../../wd-loading/wd-loading.vue'
+import wdIcon from '../../wd-icon/wd-icon.vue'
+import { computed, ref } from 'vue'
+import { useTouch } from '../../composables/useTouch'
+import { keyProps } from './types'
+
+const props = defineProps(keyProps)
+const emit = defineEmits(['press'])
+
+const touch = useTouch()
+const active = ref<boolean>(false)
+
+const keyClass = computed(() => {
+  return `wd-key ${props.large ? 'wd-key--large' : ''} ${props.type === 'delete' ? 'wd-key--delete' : ''} ${
+    props.type === 'close' ? 'wd-key--close' : ''
+  }`
+})
+
+function onTouchStart(event: TouchEvent) {
+  touch.touchStart(event)
+  active.value = true
+}
+
+function onTouchMove(event: TouchEvent) {
+  touch.touchMove(event)
+  if (touch.direction.value) {
+    active.value = false
+  }
+}
+
+function onTouchEnd() {
+  if (active.value) {
+    active.value = false
+    emit('press', props.text, props.type)
+  }
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/types.ts b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/types.ts
new file mode 100644
index 0000000..efa497a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/key/types.ts
@@ -0,0 +1,11 @@
+import { makeBooleanProp, makeNumericProp, makeStringProp } from '../../common/props'
+
+export type NumberKeyType = '' | 'delete' | 'extra' | 'close'
+
+export const keyProps = {
+  type: makeStringProp<NumberKeyType>(''),
+  text: makeNumericProp(''),
+  wider: makeBooleanProp(false),
+  large: makeBooleanProp(false),
+  loading: makeBooleanProp(false)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-number-keyboard/types.ts b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/types.ts
new file mode 100644
index 0000000..e0f016e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/types.ts
@@ -0,0 +1,79 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type KeyboardMode = 'default' | 'custom'
+export type KeyType = '' | 'delete' | 'extra' | 'close'
+
+export interface Key {
+  text?: number | string // key文本
+  type?: KeyType // key的类型
+  wider?: boolean // 是否占2个key的宽度
+}
+
+export const numberKeyboardProps = {
+  ...baseProps,
+  /**
+   * 是否可见
+   */
+  visible: makeBooleanProp(false),
+  /**
+   * 绑定的值
+   */
+  modelValue: makeStringProp(''),
+  /**
+   * 标题
+   */
+  title: String,
+  /**
+   * 键盘模式
+   */
+  mode: makeStringProp<KeyboardMode>('default'),
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(100),
+  /**
+   * 最大长度
+   */
+  maxlength: makeNumberProp(Infinity),
+  /**
+   * 是否显示删除键
+   */
+  showDeleteKey: makeBooleanProp(true),
+  /**
+   * 是否随机键盘按键顺序
+   */
+  randomKeyOrder: makeBooleanProp(false),
+  /**
+   * 确认按钮文本
+   */
+  closeText: String,
+  /**
+   * 删除按钮文本
+   */
+  deleteText: String,
+  /**
+   * 关闭按钮是否显示加载状态
+   */
+  closeButtonLoading: makeBooleanProp(false),
+  /**
+   * 是否显示蒙层
+   */
+  modal: makeBooleanProp(false),
+  /**
+   * 是否在点击外部时收起键盘
+   */
+  hideOnClickOutside: makeBooleanProp(true),
+  /**
+   * 是否锁定滚动
+   */
+  lockScroll: makeBooleanProp(true),
+  /**
+   * 是否在底部安全区域内
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 额外按键
+   */
+  extraKey: [String, Array] as PropType<string | Array<string>>
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue
new file mode 100644
index 0000000..32e1967
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-number-keyboard/wd-number-keyboard.vue
@@ -0,0 +1,146 @@
+<template>
+  <wd-popup
+    v-model="show"
+    position="bottom"
+    :z-index="zIndex"
+    :safe-area-inset-bottom="safeAreaInsetBottom"
+    :modal-style="modal ? '' : 'opacity: 0;'"
+    :modal="hideOnClickOutside"
+    :lockScroll="lockScroll"
+    @click-modal="handleClose"
+  >
+    <view :class="`wd-number-keyboard ${customClass}`" :style="customStyle">
+      <view class="wd-number-keyboard__header" v-if="showTitle">
+        <slot name="title">
+          <text class="wd-number-keyboard__title">{{ title }}</text>
+        </slot>
+        <view class="wd-number-keyboard__close" hover-class="wd-number-keyboard__close--hover" v-if="showClose" @click="handleClose">
+          <text>{{ closeText }}</text>
+        </view>
+      </view>
+      <view class="wd-number-keyboard__body">
+        <view class="wd-number-keyboard__keys">
+          <wd-key v-for="key in keys" :key="key.text" :text="key.text" :type="key.type" :wider="key.wider" @press="handlePress"></wd-key>
+        </view>
+        <view class="wd-number-keyboard__sidebar" v-if="mode === 'custom'">
+          <wd-key v-if="showDeleteKey" large :text="deleteText" type="delete" @press="handlePress"></wd-key>
+          <wd-key large :text="closeText" type="close" :loading="closeButtonLoading" @press="handlePress"></wd-key>
+        </view>
+      </view>
+    </view>
+  </wd-popup>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-number-keyboard',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdPopup from '../wd-popup/wd-popup.vue'
+import { computed, ref, watch } from 'vue'
+import WdKey from './key/index.vue'
+import { numberKeyboardProps, type Key } from './types'
+import type { NumberKeyType } from './key/types'
+
+const props = defineProps(numberKeyboardProps)
+const emit = defineEmits(['update:visible', 'input', 'close', 'delete', 'update:modelValue'])
+
+const show = ref(props.visible)
+watch(
+  () => props.visible,
+  (newValue) => {
+    show.value = newValue
+  }
+)
+
+const keys = computed(() => (props.mode === 'custom' ? genCustomKeys() : genDefaultKeys()))
+
+const showClose = computed(() => {
+  return props.closeText && props.mode === 'default'
+})
+
+const showTitle = computed(() => {
+  return props.title || showClose.value
+})
+
+/**
+ * 随机打乱数组的顺序
+ * @param arr 要打乱顺序的数组
+ * @returns 打乱顺序后的数组
+ */
+function shuffleArray<T>(arr: T[]): T[] {
+  const newArr = [...arr]
+  for (let i = newArr.length - 1; i > 0; i--) {
+    // 生成一个随机索引 j，范围是 [0, i]
+    const j = Math.floor(Math.random() * (i + 1))
+
+    // 交换索引 i 和 j 处的元素
+    ;[newArr[i], newArr[j]] = [newArr[j], newArr[i]]
+  }
+  return newArr
+}
+function genBasicKeys(): Key[] {
+  const keys = Array.from({ length: 9 }, (_, i) => ({ text: i + 1 }))
+
+  // 如果需要随机顺序，则调用 shuffleArray 方法打乱数组顺序
+  return props.randomKeyOrder ? shuffleArray(keys) : keys
+}
+
+function genDefaultKeys(): Key[] {
+  return [
+    ...genBasicKeys(),
+    { text: props.extraKey as string, type: 'extra' },
+    { text: 0 },
+    {
+      // 根据条件是否显示删除键的文本和类型
+      text: props.showDeleteKey ? props.deleteText : '',
+      type: props.showDeleteKey ? 'delete' : ''
+    }
+  ]
+}
+
+function genCustomKeys(): Key[] {
+  const keys = genBasicKeys()
+  const extraKeys = Array.isArray(props.extraKey) ? props.extraKey : [props.extraKey]
+  if (extraKeys.length === 1) {
+    // 如果只有一个额外按键，则添加一个宽度较大的数字0和一个额外按键
+    keys.push({ text: 0, wider: true }, { text: extraKeys[0], type: 'extra' })
+  } else if (extraKeys.length === 2) {
+    // 如果有两个额外按键，则添加两个额外按键和一个数字0
+    keys.push({ text: extraKeys[0], type: 'extra' }, { text: 0 }, { text: extraKeys[1], type: 'extra' })
+  }
+
+  return keys
+}
+
+const handleClose = () => {
+  emit('close')
+  emit('update:visible', false)
+}
+
+const handlePress = (text: string, type: NumberKeyType) => {
+  if (text === '' && type === 'extra') {
+    return handleClose()
+  }
+  const value = props.modelValue
+  if (type === 'delete') {
+    emit('delete')
+    emit('update:modelValue', value.slice(0, value.length - 1))
+  } else if (type === 'close') {
+    handleClose()
+  } else if (value.length < +props.maxlength) {
+    emit('input', text)
+    emit('update:modelValue', value + text)
+  }
+}
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-overlay/index.scss b/src/uni_modules/wot-design-uni/components/wd-overlay/index.scss
new file mode 100644
index 0000000..4cb37fa
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-overlay/index.scss
@@ -0,0 +1,17 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(overlay) {
+    background: $-overlay-bg-dark;
+  }
+}
+
+@include b(overlay) {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: $-overlay-bg;
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-overlay/types.ts b/src/uni_modules/wot-design-uni/components/wd-overlay/types.ts
new file mode 100644
index 0000000..fd15be2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-overlay/types.ts
@@ -0,0 +1,25 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export const overlayProps = {
+  ...baseProps,
+  /**
+   * 是否展示遮罩层
+   */
+  show: makeBooleanProp(false),
+  /**
+   * 动画时长，单位毫秒
+   */
+  duration: {
+    type: [Object, Number, Boolean] as PropType<Record<string, number> | number | boolean>,
+    default: 300
+  },
+  /**
+   * 是否锁定滚动
+   */
+  lockScroll: makeBooleanProp(true),
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(10)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue b/src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue
new file mode 100644
index 0000000..26ed041
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-overlay/wd-overlay.vue
@@ -0,0 +1,49 @@
+<template>
+  <wd-transition
+    :show="show"
+    name="fade"
+    custom-class="wd-overlay"
+    :duration="duration"
+    :custom-style="`z-index: ${zIndex}; ${customStyle}`"
+    @click="handleClick"
+    @touchmove.stop.prevent="lockScroll ? noop : ''"
+  >
+    <slot></slot>
+  </wd-transition>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-overlay',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { overlayProps } from './types'
+// #ifdef H5
+import useLockScroll from '../composables/useLockScroll'
+// #endif
+
+const props = defineProps(overlayProps)
+
+const emit = defineEmits(['click'])
+
+function handleClick() {
+  emit('click')
+}
+
+function noop() {}
+
+// #ifdef H5
+useLockScroll(() => props.show && props.lockScroll)
+// #endif
+</script>
+
+<style lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-pagination/index.scss b/src/uni_modules/wot-design-uni/components/wd-pagination/index.scss
new file mode 100644
index 0000000..c464c50
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-pagination/index.scss
@@ -0,0 +1,57 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(pager) {
+    background-color: $-dark-background;
+    @include e(message) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(pager) {
+  user-select: none;
+  background-color: #fff;
+
+  @include edeep(icon) {
+    font-size: $-pagination-icon-size;
+  }
+
+  @include e(content) {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    padding: $-pagination-content-padding;
+  }
+  @include e(message) {
+    text-align: center;
+    color:$-pagination-message-color;
+    font-size: $-pagination-message-fs;
+    padding: $-pagination-message-padding;
+  }
+  @include edeep(nav) {
+    min-width: $-pagination-nav-width;
+    @include m(active){
+      color: rgba(0,0,0,0.65)      
+    }
+    @include m(disabled){
+      color: rgba(0,0,0,0.15)      
+    }
+  }
+  @include e(size){
+    flex: 1;
+    text-align: center;
+    font-size: $-pagination-nav-content-fs;
+  }
+  @include e(separator){
+    padding: $-pagination-nav-sepatator-padding;
+  }
+  @include edeep(left){
+    transform: rotate(180deg) translateY(1px);
+    display: inline-block;
+  }
+  @include e(current){
+    color: $-pagination-nav-current-color;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-pagination/types.ts b/src/uni_modules/wot-design-uni/components/wd-pagination/types.ts
new file mode 100644
index 0000000..a40c687
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-pagination/types.ts
@@ -0,0 +1,41 @@
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../common/props'
+
+export const paginationProps = {
+  ...baseProps,
+  /**
+   * 当前页
+   */
+  modelValue: makeRequiredProp(Number),
+  /**
+   * 总页数，如果有total，则优先使用total计算页数
+   */
+  totalPage: makeNumberProp(1),
+  /**
+   * 是否展示分页为Icon图标
+   */
+  showIcon: makeBooleanProp(false),
+  /**
+   * 是否展示总条数
+   */
+  showMessage: makeBooleanProp(false),
+  /**
+   * 总条数
+   */
+  total: makeNumberProp(0),
+  /**
+   * 每页条数
+   */
+  pageSize: makeNumberProp(10),
+  /**
+   * 上一页文本
+   */
+  prevText: String,
+  /**
+   * 下一页文本
+   */
+  nextText: String,
+  /**
+   * 总页数只有一页时是否隐藏
+   */
+  hideIfOnePage: makeBooleanProp(true)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-pagination/wd-pagination.vue b/src/uni_modules/wot-design-uni/components/wd-pagination/wd-pagination.vue
new file mode 100644
index 0000000..bf52e1b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-pagination/wd-pagination.vue
@@ -0,0 +1,110 @@
+<template>
+  <view :class="`wd-pager ${customClass}`" :style="customStyle" v-if="!(hideIfOnePage && totalPageNum === 1)">
+    <view class="wd-pager__content">
+      <wd-button :plain="modelValue > 1" type="info" size="small" :disabled="modelValue <= 1" custom-class="wd-pager__nav" @click="sub">
+        <text v-if="!showIcon">{{ prevText || translate('prev') }}</text>
+        <wd-icon
+          v-else
+          :custom-class="`wd-pager__left wd-pager__icon ${modelValue <= 1 ? 'wd-pager__nav--disabled' : 'wd-pager__nav--active'}`"
+          name="arrow-right"
+        ></wd-icon>
+      </wd-button>
+      <view class="wd-pager__size">
+        <text class="wd-pager__current">{{ modelValue }}</text>
+        <text class="wd-pager__separator">/</text>
+        <text>{{ totalPageNum }}</text>
+      </view>
+      <wd-button
+        :plain="modelValue < totalPageNum"
+        type="info"
+        size="small"
+        :disabled="modelValue >= totalPageNum"
+        custom-class="wd-pager__nav"
+        @click="add"
+      >
+        <text v-if="!showIcon">{{ nextText || translate('next') }}</text>
+        <wd-icon
+          v-else
+          :custom-class="`wd-pager__icon ${modelValue >= totalPageNum ? 'wd-pager__nav--disabled' : 'wd-pager__nav--active'}`"
+          name="arrow-right"
+        ></wd-icon>
+      </wd-button>
+    </view>
+    <view class="wd-pager__message" v-if="showMessage">
+      <text>{{ translate('page', modelValue) }}，</text>
+      <text v-if="total">{{ translate('total', total) }}，</text>
+      <text>{{ translate('size', pageSize) }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-pagination',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdButton from '../wd-button/wd-button.vue'
+import { ref, watch } from 'vue'
+import { useTranslate } from '../composables/useTranslate'
+import { paginationProps } from './types'
+
+const { translate } = useTranslate('pagination')
+
+const props = defineProps(paginationProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const totalPageNum = ref<number>(0) // 总页数
+
+watch(
+  () => props.totalPage,
+  (newValue) => {
+    if (!totalPageNum.value && newValue) {
+      totalPageNum.value = newValue
+    }
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.total,
+  () => {
+    updateTotalPage()
+  },
+  { immediate: true, deep: true }
+)
+
+function add() {
+  const { modelValue } = props
+  if (modelValue > totalPageNum.value - 1) {
+    return
+  }
+  emit('change', { value: modelValue + 1 })
+  emit('update:modelValue', modelValue + 1)
+}
+
+function sub() {
+  const { modelValue } = props
+  if (modelValue < 2) {
+    return
+  }
+  emit('change', { value: modelValue - 1 })
+  emit('update:modelValue', modelValue - 1)
+}
+
+function updateTotalPage() {
+  const { total, pageSize } = props
+  totalPageNum.value = Math.ceil(total / pageSize)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-password-input/index.scss b/src/uni_modules/wot-design-uni/components/wd-password-input/index.scss
new file mode 100644
index 0000000..347bb00
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-password-input/index.scss
@@ -0,0 +1,124 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(password-input) {
+    @include e(item) {
+      color: $-dark-color;
+      background: $-dark-background2;
+
+      @include when(border) {
+        border-color: $-dark-border-color;
+      }
+    }
+
+    @include e(mask) {
+      background-color: $-dark-color;
+    }
+
+    @include e(cursor) {
+      background-color: $-dark-color;
+    }
+
+    @include e(info) {
+      color: $-dark-color;
+
+      @include when(border) {
+        color: $-dark-color2;
+      }
+    }
+  }
+}
+
+@include b(password-input) {
+  position: relative;
+  margin: 0 $-password-input-margin;
+  user-select: none;
+
+  @include e(security) {
+    display: flex;
+    width: 100%;
+    height: $-password-input-height;
+    cursor: pointer;
+  }
+
+  @include e(item) {
+    position: relative;
+    display: flex;
+    flex: 1;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: $-password-input-text-color;
+    font-size: $-password-input-font-size;
+    line-height: 1.2;
+    background: $-password-input-background;
+
+    @include when(border) {
+      border: 1px solid $-password-input-border-color;
+
+      &:not(:last-child) {
+        border-right: none;
+      }
+
+      &:first-child {
+        border-top-left-radius: $-password-input-radius;
+        border-bottom-left-radius: $-password-input-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: $-password-input-radius;
+        border-bottom-right-radius: $-password-input-radius;
+      }
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $-password-input-dot-size;
+    height: $-password-input-dot-size;
+    background: $-password-input-dot-color;
+    border-radius: 100%;
+    transform: translate(-50%, -50%);
+    visibility: hidden;
+  }
+
+  @include e(cursor) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: $-password-input-cursor-width;
+    height: $-password-input-cursor-height;
+    background: $-password-input-cursor-color;
+    transform: translate(-50%, -50%);
+    animation: $-password-input-cursor-duration cursor-flicker infinite;
+  }
+
+  @include e(info) {
+    margin-top: $-password-input-margin;
+    font-size: $-password-input-info-font-size;
+    text-align: center;
+    color: $-password-input-info-color;
+
+    @include when(error) {
+      color: $-password-input-error-info-color;
+    }
+
+  }
+}
+
+@keyframes cursor-flicker {
+  from {
+    opacity: 0;
+  }
+
+  50% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-password-input/types.ts b/src/uni_modules/wot-design-uni/components/wd-password-input/types.ts
new file mode 100644
index 0000000..550788c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-password-input/types.ts
@@ -0,0 +1,42 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-03-18 15:12:17
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-password-input\types.ts
+ * 记得注释
+ */
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const passwordInputProps = {
+  ...baseProps,
+  /**
+   * 绑定的值
+   */
+  modelValue: makeStringProp(''),
+  /**
+   * 是否隐藏密码内容
+   */
+  mask: makeBooleanProp(true),
+  /**
+   * 输入框下方文字提示
+   */
+  info: makeStringProp(''),
+  /**
+   * 输入框下方错误提示
+   */
+  errorInfo: makeStringProp(''),
+  /**
+   * 输入框格子之间的间距，如 20px 2em，默认单位为 px
+   */
+  gutter: makeNumericProp(0),
+  /**
+   * 密码最大长度
+   */
+  length: makeNumberProp(6),
+  /**
+   * 是否已聚焦，聚焦时会显示光标
+   */
+  focused: makeBooleanProp(true)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-password-input/wd-password-input.vue b/src/uni_modules/wot-design-uni/components/wd-password-input/wd-password-input.vue
new file mode 100644
index 0000000..1bad247
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-password-input/wd-password-input.vue
@@ -0,0 +1,49 @@
+<template>
+  <view :class="`wd-password-input ${customClass}`" :style="customStyle">
+    <view @touchstart="onTouchStart" class="wd-password-input__security">
+      <view
+        v-for="(_, index) in length"
+        :key="index"
+        :class="`wd-password-input__item ${gutter ? '' : 'is-border'}`"
+        :style="{ marginLeft: index !== 0 && gutter ? addUnit(gutter) : 0 }"
+      >
+        <view v-if="focused && index === modelValue.length" class="wd-password-input__cursor"></view>
+        <view v-else :class="`wd-password-input__value`">
+          <view :style="{ visibility: mask && modelValue[index] ? 'visible' : 'hidden' }" class="wd-password-input__mask"></view>
+          <text v-if="!mask && modelValue[index]">{{ modelValue[index] }}</text>
+        </view>
+      </view>
+    </view>
+    <view v-if="info || errorInfo" :class="`wd-password-input__info ${errorInfo ? 'is-error' : ''}`">
+      {{ errorInfo || info }}
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-password-input',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { addUnit } from '../common/util'
+import { passwordInputProps } from './types'
+
+defineProps(passwordInputProps)
+
+const emit = defineEmits(['focus'])
+
+function onTouchStart(event: Event) {
+  emit('focus', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker-view/index.scss b/src/uni_modules/wot-design-uni/components/wd-picker-view/index.scss
new file mode 100644
index 0000000..83d4aaf
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-picker-view/index.scss
@@ -0,0 +1,92 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(picker-view) {
+    @include e(columns) {
+      background: $-dark-background2;
+    }
+
+    :deep(.wd-picker-view__roller) {
+      background: $-dark-background4;
+    }
+  }
+
+  @include b(picker-view-column) {
+    color: $-dark-color;
+
+    @include e(item) {
+      @include m(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+
+@include b(picker-view) {
+  position: relative;
+  padding: 10px 0;
+
+  @include e(columns) {
+    position: relative;
+    display: flex;
+    background: $-picker-bg;
+    overflow: hidden;
+    align-items: center;
+  }
+
+  @include edeep(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: $-picker-mask;
+    background-position: top, bottom;
+    background-repeat: no-repeat;
+    z-index: 2;
+    pointer-events: none;
+    filter: blur(4px);
+  }
+
+  @include e(loading) {
+    position: absolute;
+    display: flex;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    background: $-picker-loading-bg;
+  }
+
+  @include edeep(roller) {
+    background: rgba(245, 245, 245, 1);
+    z-index: 0;
+
+    &::before,
+    &::after {
+      display: none;
+    }
+  }
+}
+
+@include b(picker-view-column) {
+  flex: 1;
+  font-size: $-picker-column-fs;
+  color: $-picker-column-color;
+  text-align: center;
+  transition-timing-function: cubic-bezier(0.28, 0.8, 0.63, 1);
+
+  @include e(item) {
+    padding: $-picker-column-padding;
+    @include lineEllipsis;
+
+    @include m(disabled) {
+      color: $-picker-column-disabled-color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker-view/types.ts b/src/uni_modules/wot-design-uni/components/wd-picker-view/types.ts
new file mode 100644
index 0000000..ba4884b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-picker-view/types.ts
@@ -0,0 +1,148 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType, Ref } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import { getType, isArray, isObj } from '../common/util'
+
+export type ColumnItem = {
+  [key: string]: any
+  value?: string | number | boolean
+  label?: string
+  disabled?: boolean
+}
+
+export type PickerViewColumnChange = (
+  pickerView: PickerViewInstance,
+  selects: Record<string, any> | Record<string, any>[],
+  index: number,
+  reslove: () => void
+) => void
+
+export const pickerViewProps = {
+  ...baseProps,
+  /**
+   * 加载状态
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /**
+   * picker内部滚筒高
+   */
+  columnsHeight: makeNumberProp(217),
+  /**
+   * 选项对象中，value对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，展示的文本对应的 key
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 是否在手指松开时立即触发picker-view的 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 选中项，如果为多列选择器，则其类型应为数组
+   */
+  modelValue: {
+    type: [String, Number, Boolean, Array<number>, Array<string>, Array<boolean>] as PropType<
+      string | number | boolean | Array<number> | Array<string> | Array<boolean>
+    >,
+    default: '',
+    required: true
+  },
+  /**
+   * 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器
+   */
+  columns: makeArrayProp<string | number | ColumnItem | Array<number> | Array<string> | Array<ColumnItem>>(),
+  /**
+   * 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 setColumnData 方法修改其他列的数据源。
+   */
+  columnChange: Function as PropType<PickerViewColumnChange>
+}
+
+export type PickerViewExpose = {
+  getSelects: () => Record<string, any> | Record<string, any>[]
+  getValues: () => string | string[]
+  setColumnData: (columnIndex: number, data: Array<string | number | ColumnItem | Array<string | number | ColumnItem>>, rowIndex?: number) => void
+  getColumnsData: () => Record<string, string>[][]
+  getColumnData: (columnIndex: number) => Record<string, string>[]
+  getColumnIndex: (columnIndex: number) => number
+  getLabels: () => string[]
+  getSelectedIndex: () => number[]
+  resetColumns: (columns: (string | number | string[] | number[] | ColumnItem | ColumnItem[])[]) => void
+}
+
+export type PickerViewProps = ExtractPropTypes<typeof pickerViewProps>
+
+export type PickerViewInstance = ComponentPublicInstance<PickerViewProps, PickerViewExpose>
+
+/**
+ * 格式化传入的列数据
+ * 列数据统一格式化为二维数组
+ * @param array 列数据
+ * @param valueKey
+ * @param labelKey
+ * @returns
+ */
+export function formatArray(
+  array: Array<string | number | ColumnItem | Array<string | number | ColumnItem>>,
+  valueKey: string,
+  labelKey: string
+): ColumnItem[][] {
+  let tempArray: Array<string | number | ColumnItem | Array<string | number | ColumnItem>> = isArray(array) ? array : [array]
+  // 判断数组第一层的数据类型，如果存在多种类型，则抛错
+  const firstLevelTypeList = new Set(array.map(getType))
+  /**
+   * 存在三种类型的合法数据
+   * 1.数组是一维元素，所有元素都是原始值
+   * 2.数组是一维元素，所有元素都是object
+   * 3.数组是二维元素，二维元素可以是任意内容
+   */
+  if (firstLevelTypeList.size !== 1 && firstLevelTypeList.has('object')) {
+    // 原始值和引用类型不用混用
+    throw Error('The columns are correct')
+  }
+  /**
+   * 简单处理，如果数组第一项不是数组则认为它是一个一维数组
+   * 所以需要把一维的转成二维，这样方便统一处理
+   */
+  if (!isArray(array[0])) {
+    tempArray = [tempArray as Array<string | number | ColumnItem>]
+  }
+  // 转化为二维数组后需要将每一项包装成ColumnItem
+  const result: Array<Array<ColumnItem>> = (tempArray as Array<Array<string | number | ColumnItem>>).map((col) => {
+    return col.map((row) => {
+      // 非对象类型直接将值作为label和value
+      if (!isObj(row)) {
+        return {
+          [valueKey]: row,
+          [labelKey]: row
+        }
+      }
+      /**
+       * 针对已经是object的，修补成{valueKey,labelKey}
+       * 如果没有labelKey，用valueKey代替
+       * 如果没有valueKey，用labelKey代替
+       * valueKey,labelKey都没有，直接抛错
+       */
+      // eslint-disable-next-line no-prototype-builtins
+      if (!row.hasOwnProperty(valueKey) && !row.hasOwnProperty(labelKey)) {
+        // eslint-disable-next-line prettier/prettier
+      throw Error('Can\'t find valueKey and labelKey in columns')
+      }
+      // eslint-disable-next-line no-prototype-builtins
+      if (!row.hasOwnProperty(labelKey)) {
+        row[labelKey] = row[valueKey]
+      }
+      // eslint-disable-next-line no-prototype-builtins
+      if (!row.hasOwnProperty(valueKey)) {
+        row[valueKey] = row[labelKey]
+      }
+      return row
+    })
+  })
+
+  return result
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue b/src/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue
new file mode 100644
index 0000000..28e6845
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-picker-view/wd-picker-view.vue
@@ -0,0 +1,370 @@
+<template>
+  <view :class="`wd-picker-view ${customClass}`" :style="customStyle">
+    <view class="wd-picker-view__loading" v-if="loading">
+      <wd-loading :color="loadingColor" />
+    </view>
+    <view :style="`height: ${columnsHeight - 20}px;`">
+      <picker-view
+        mask-class="wd-picker-view__mask"
+        indicator-class="wd-picker-view__roller"
+        :indicator-style="`height: ${itemHeight}px;`"
+        :style="`height: ${columnsHeight - 20}px;`"
+        :value="selectedIndex"
+        :immediate-change="immediateChange"
+        @change="onChange"
+        @pickstart="onPickStart"
+        @pickend="onPickEnd"
+      >
+        <picker-view-column v-for="(col, colIndex) in formatColumns" :key="colIndex" class="wd-picker-view-column">
+          <view
+            v-for="(row, rowIndex) in col"
+            :key="rowIndex"
+            :class="`wd-picker-view-column__item ${row['disabled'] ? 'wd-picker-view-column__item--disabled' : ''}  ${
+              selectedIndex[colIndex] == rowIndex ? 'wd-picker-view-column__item--active' : ''
+            }`"
+            :style="`line-height: ${itemHeight}px;`"
+          >
+            {{ row[labelKey] }}
+          </view>
+        </picker-view-column>
+      </picker-view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-picker-view',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdLoading from '../wd-loading/wd-loading.vue'
+import { getCurrentInstance, ref, watch, nextTick } from 'vue'
+import { deepClone, getType, isArray, isDef, isEqual, range } from '../common/util'
+import { formatArray, pickerViewProps, type ColumnItem, type PickerViewExpose } from './types'
+
+const props = defineProps(pickerViewProps)
+const emit = defineEmits(['change', 'pickstart', 'pickend', 'update:modelValue'])
+
+const formatColumns = ref<ColumnItem[][]>([]) // 格式化后的列数据
+const itemHeight = ref<number>(35)
+const selectedIndex = ref<Array<number>>([]) // 格式化之后，每列选中的下标集合
+
+watch(
+  [() => props.modelValue, () => props.columns],
+  (newValue, oldValue) => {
+    if (!isEqual(oldValue[1], newValue[1])) {
+      if (isArray(newValue[1]) && newValue[1].length > 0) {
+        formatColumns.value = formatArray(newValue[1], props.valueKey, props.labelKey)
+      } else {
+        // 当 columns 变为空时，清空 formatColumns 和 selectedIndex
+        formatColumns.value = []
+        selectedIndex.value = []
+      }
+    }
+    if (isDef(newValue[0])) {
+      selectWithValue(newValue[0])
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const { proxy } = getCurrentInstance() as any
+
+/**
+ * 根据传入的value，寻找对应的索引，并传递给原生选择器。
+ * 需要保证formatColumns先设置，之后会修改selectedIndex。
+ * @param {String|Number|Boolean|Array<String|Number|Boolean|Array<any>>}value
+ */
+function selectWithValue(value: string | number | boolean | number[] | string[] | boolean[]) {
+  if (formatColumns.value.length === 0) {
+    selectedIndex.value = [] // 如果列为空，直接清空选中索引
+    return
+  }
+  // 使其默认选中首项
+  if (value === '' || !isDef(value) || (isArray(value) && value.length === 0)) {
+    value = formatColumns.value.map((col) => {
+      return col[0][props.valueKey]
+    })
+  }
+  const valueType = getType(value)
+  const type = ['string', 'number', 'boolean', 'array']
+  if (type.indexOf(valueType) === -1) console.error(`value must be one of ${type.toString()}`)
+
+  /**
+   * 1.单key转为Array<key>
+   * 2.根据formatColumns的长度截取Array<String>，保证下面的遍历不溢出
+   * 3.根据每列的key值找到选项中value为此key的下标并记录
+   */
+  value = isArray(value) ? value : [value as string]
+  value = value.slice(0, formatColumns.value.length)
+
+  let selected: number[] = deepClone(selectedIndex.value)
+  value.forEach((target, col) => {
+    let row = formatColumns.value[col].findIndex((row) => {
+      return row[props.valueKey].toString() === target.toString()
+    })
+    row = row === -1 ? 0 : row
+    selected = correctSelectedIndex(col, row, selected)
+  })
+  /** 根据formatColumns的长度去除selectWithIndex无用的部分。
+   * 始终保持value、selectWithIndex、formatColumns长度一致
+   */
+  selectedIndex.value = selected.slice(0, value.length)
+}
+
+/**
+ * 修正选中项的值
+ * @param value 当前picker选择器选中的值
+ * @param origin 原始选中的值
+ */
+function correctSelected(value: number[]) {
+  let selected = deepClone(value)
+  value.forEach((row, col) => {
+    row = range(row, 0, formatColumns.value[col].length - 1)
+    selected = correctSelectedIndex(col, row, selected)
+  })
+  return selected
+}
+
+/**
+ * 修正选中项指定列行的值
+ * @param columnIndex 列下标
+ * @param rowIndex 行下标
+ * @param selected 选中值列表
+ */
+function correctSelectedIndex(columnIndex: number, rowIndex: number, selected: number[]) {
+  const col = formatColumns.value[columnIndex]
+  if (!col || !col[rowIndex]) {
+    throw Error(`The value to select with Col:${columnIndex} Row:${rowIndex} is incorrect`)
+  }
+  const select: number[] = deepClone(selected)
+  select[columnIndex] = rowIndex
+
+  // 被禁用的无法选中，选中距离它最近的未被禁用的
+  if (col[rowIndex].disabled) {
+    // 寻找值为0或最最近的未被禁用的节点的索引
+    const prev = col
+      .slice(0, rowIndex)
+      .reverse()
+      .findIndex((s) => !s.disabled)
+    const next = col.slice(rowIndex + 1).findIndex((s) => !s.disabled)
+    if (prev !== -1) {
+      select[columnIndex] = rowIndex - 1 - prev
+    } else if (next !== -1) {
+      select[columnIndex] = rowIndex + 1 + next
+    } else if (select[columnIndex] === undefined) {
+      select[columnIndex] = 0
+    }
+  }
+  return select
+}
+
+/**
+ * 选择器选中项变化时触发
+ * @param param0
+ */
+function onChange({ detail: { value } }: { detail: { value: number[] } }) {
+  value = value.map((v: any) => {
+    return Number(v || 0)
+  })
+  const index = getChangeDiff(value)
+  // 先将picker选择器的值赋给selectedIndex，然后重新赋予修正后的值，防止两次操作修正结果一致时pikcer视图不刷新
+  selectedIndex.value = deepClone(value)
+  nextTick(() => {
+    // 重新赋予修正后的值
+    selectedIndex.value = correctSelected(value)
+    if (props.columnChange) {
+      // columnsChange 可能有异步操作，需要添加 resolve 进行回调通知，形参小于4个则为同步
+      if (props.columnChange.length < 4) {
+        props.columnChange(proxy.$.exposed, getSelects(), index || 0, () => {})
+        handleChange(index || 0)
+      } else {
+        props.columnChange(proxy.$.exposed, getSelects(), index || 0, () => {
+          // 如果selectedIndex只有一列，返回此项；如果是多项，返回所有选中项。
+          handleChange(index || 0)
+        })
+      }
+    } else {
+      // 如果selectedIndex只有一列，返回此项；如果是多项，返回所有选中项。
+      handleChange(index || 0)
+    }
+  })
+}
+
+/**
+ * 获取选中项变化的列的下标
+ * @param now 当前选中项值
+ * @param origin 旧选中项值
+ */
+function getChangeColumn(now: number[], origin: number[]) {
+  if (!now || !origin) return -1
+  const index = now.findIndex((row, index) => row !== origin[index])
+  return index
+}
+
+function getChangeDiff(value: number[]) {
+  value = value.slice(0, formatColumns.value.length)
+
+  // 保留选中前的
+  const origin: number[] = deepClone(selectedIndex.value)
+  // 存储赋值旧值，便于外部比较
+  let selected: number[] = deepClone(selectedIndex.value)
+
+  value.forEach((row, col) => {
+    row = range(row, 0, formatColumns.value[col].length - 1)
+    if (row === origin[col]) return
+    selected = correctSelectedIndex(col, row, selected)
+  })
+
+  // 值变化的列
+  const diffCol = getChangeColumn(selected, origin)
+  if (diffCol === -1) return
+
+  // 获取变化的的行
+  const diffRow = selected[diffCol]
+
+  // 如果selectedIndex只有一列，返回选中项的索引；如果是多项，返回选中项所在的列。
+  return selected.length === 1 ? diffRow : diffCol
+}
+
+/**
+ * 列更新
+ * @param index 列下标
+ */
+function handleChange(index: number) {
+  const value = getValues()
+
+  // 避免多次触发change
+  if (isEqual(value, props.modelValue)) return
+
+  emit('update:modelValue', value)
+  // 延迟一下，避免组件刚渲染时调用者的事件未初始化好
+  setTimeout(() => {
+    emit('change', {
+      picker: proxy.$.exposed,
+      value,
+      index
+    })
+  }, 0)
+}
+
+/**
+ * @description 获取所有列选中项，返回值为一个数组
+ */
+function getSelects() {
+  const selects = selectedIndex.value.map((row, col) => formatColumns.value[col][row])
+  // 单列选择器，则返回单项
+  if (selects.length === 1) {
+    return selects[0]
+  }
+  return selects
+}
+
+/**
+ * 获取所有列的选中值
+ * 如果values只有一项则将第一项返回
+ */
+function getValues() {
+  const { valueKey } = props
+  const values = selectedIndex.value.map((row, col) => {
+    return formatColumns.value[col][row][valueKey]
+  })
+
+  if (values.length === 1) {
+    return values[0]
+  }
+  return values
+}
+
+/**
+ * 获取所有列选中项的label，返回值为一个数组
+ */
+function getLabels() {
+  const { labelKey } = props
+  return selectedIndex.value.map((row, col) => formatColumns.value[col][row][labelKey])
+}
+
+/**
+ * 获取某一列的选中项下标
+ * @param {Number} columnIndex 列的下标
+ * @returns {Number} 下标
+ */
+function getColumnIndex(columnIndex: number) {
+  return selectedIndex.value[columnIndex]
+}
+
+/**
+ *  获取某一列的选项
+ * @param {Number} columnIndex 列的下标
+ * @returns {Array<{valueKey,labelKey}>} 当前列的集合
+ */
+function getColumnData(columnIndex: number) {
+  return formatColumns.value[columnIndex]
+}
+
+/**
+ * 设置列数据
+ * @param columnIndex 列下标
+ * @param data // 列数据
+ * @param rowIndex // 行下标
+ */
+function setColumnData(columnIndex: number, data: Array<string | number | ColumnItem | Array<string | number | ColumnItem>>, rowIndex: number = 0) {
+  formatColumns.value[columnIndex] = formatArray(data, props.valueKey, props.labelKey).reduce((acc, val) => acc.concat(val), [])
+  selectedIndex.value = correctSelectedIndex(columnIndex, rowIndex, selectedIndex.value)
+}
+
+/**
+ * 获取列数据
+ */
+function getColumnsData() {
+  return deepClone(formatColumns.value)
+}
+
+/**
+ * 获取选中数据
+ */
+function getSelectedIndex() {
+  return selectedIndex.value
+}
+
+/**
+ * 用于重置列数据为指定列数据
+ */
+function resetColumns(columns: (string | number | string[] | number[] | ColumnItem | ColumnItem[])[]) {
+  if (isArray(columns) && columns.length) {
+    formatColumns.value = formatArray(columns, props.valueKey, props.labelKey)
+  }
+}
+
+function onPickStart() {
+  emit('pickstart')
+}
+
+function onPickEnd() {
+  emit('pickend')
+}
+
+defineExpose<PickerViewExpose>({
+  getSelects,
+  getValues,
+  setColumnData,
+  getColumnsData,
+  getColumnData,
+  getColumnIndex,
+  getLabels,
+  getSelectedIndex,
+  resetColumns
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/index.scss b/src/uni_modules/wot-design-uni/components/wd-picker/index.scss
new file mode 100644
index 0000000..e82976c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-picker/index.scss
@@ -0,0 +1,224 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+
+.wot-theme-dark {
+  @include b(picker) {
+    @include when(border) {
+      .wd-picker__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include e(title) {
+      color: $-dark-color;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+    @include e(value) {
+      color: $-dark-color;
+    }
+
+    @include e(placeholder) {
+      color: $-dark-color-gray;
+    }
+
+    :deep(.wd-picker__arrow),
+    :deep(.wd-picker__clear) {
+      color: $-dark-color;
+    }
+
+    @include e(cell) {
+      background-color: $-dark-background2;
+      color: $-dark-color;
+      @include when(disabled) {
+        .wd-picker__value {
+          color: $-dark-color3;
+        }
+        .wd-picker__placeholder {
+          color: $-dark-color-gray;
+        }
+      }
+    }
+
+    @include when(disabled) {
+      .wd-picker__value {
+        color: $-dark-color3;
+      }
+
+      .wd-picker__placeholder {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(action) {
+      @include m(cancel) {
+        color: $-dark-color;
+      }
+      @include when(loading) {
+        color: $-dark-color3;
+      }
+    }
+  }
+}
+
+
+@include b(picker) {
+  @include edeep(popup) {
+    border-radius: 16px 16px 0px 0px;
+  }
+
+  @include when(border) {
+    .wd-picker__cell {
+      @include halfPixelBorder('top', $-cell-padding);
+    }
+  }
+  @include when(large) {
+    .wd-picker__cell {
+      font-size: $-cell-title-fs-large;
+    }
+    :deep(.wd-picker__arrow),
+    :deep(.wd-picker__clear) {
+      font-size: $-cell-icon-size-large;
+    }
+  }
+  @include when(error) {
+    .wd-picker__value,
+    :deep(.wd-picker__arrow) {
+      color: $-input-error-color;
+    }
+  }
+  @include when(align-right) {
+    .wd-picker__value {
+      text-align: right;
+    }
+  }
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    align-items: flex-start;
+    background-color: $-color-white;
+    text-decoration: none;
+    color: $-cell-title-color;
+    font-size: $-cell-title-fs;
+    overflow: hidden;
+    line-height: $-cell-line-height;
+
+    @include when(disabled) {
+      .wd-picker__value {
+        color: $-input-disabled-color;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .wd-picker__value {
+      color: $-picker-column-disabled-color;
+    }
+  }
+
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include e(label) {
+    position: relative;
+    width: $-input-cell-label-width;
+    margin-right: $-cell-padding;
+    color: $-cell-title-color;
+    box-sizing: border-box;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: '*';
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+      }
+    }
+  }
+
+  @include e(value-wraper) {
+    display: flex;
+  }
+
+  @include e(value) {
+    flex: 1;
+    margin-right: 10px;
+    color: $-cell-value-color;
+    
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+  }
+
+  @include e(body) {
+    flex: 1;
+  }
+
+  @include e(placeholder) {
+    color: $-input-placeholder-color;
+  }
+
+  @include edeep(arrow,clear) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include edeep(clear){
+    color: $-cell-clear-color;
+  }
+
+  @include e(wraper) {
+    padding-bottom: var(--window-bottom);
+  }
+
+  @include e(toolbar) {
+    position: relative;
+    display: flex;
+    font-size: $-picker-toolbar-fs;
+    height: $-picker-toolbar-height;
+    line-height: $-picker-action-height;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box;
+  }
+
+  @include e(action) {
+    display: block;
+    border: none;
+    outline: none;
+    font-size: $-picker-toolbar-fs;
+    color: $-picker-toolbar-finish-color;
+    background: transparent;
+    padding: 24px 15px 14px 15px;
+
+    @include m(cancel) {
+      color: $-picker-toolbar-cancel-color;
+    }
+
+    @include when(loading) {
+      color: $-picker-loading-button-color;
+    }
+  }
+  @include e(title) {
+    display: block;
+    padding-top: 10px;
+    color: $-picker-toolbar-title-color;
+    font-weight: $-action-sheet-weight;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-picker/types.ts
new file mode 100644
index 0000000..c95a74c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-picker/types.ts
@@ -0,0 +1,179 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { ColumnItem, PickerViewColumnChange } from '../wd-picker-view/types'
+import type { FormItemRule } from '../wd-form/types'
+
+export const pickerProps = {
+  ...baseProps,
+  /**
+   * label 外部自定义样式
+   */
+  customLabelClass: makeStringProp(''),
+  /**
+   * value 外部自定义样式
+   */
+  customValueClass: makeStringProp(''),
+  /**
+   * pickerView 外部自定义样式
+   */
+  customViewClass: makeStringProp(''),
+  /**
+   * 选择器左侧文案
+   */
+  label: String,
+  /**
+   * 选择器占位符
+   */
+  placeholder: String,
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否只读
+   */
+  readonly: makeBooleanProp(false),
+  /**
+   * 加载中
+   */
+  loading: makeBooleanProp(false),
+  /**
+   * 加载中颜色
+   */
+  loadingColor: makeStringProp('#4D80F0'),
+  /* popup */
+  /**
+   * 弹出层标题
+   */
+  title: String,
+  /**
+   * 取消按钮文案
+   */
+  cancelButtonText: String,
+  /**
+   * 确认按钮文案
+   */
+  confirmButtonText: String,
+  /**
+   * 是否必填
+   */
+  required: makeBooleanProp(false),
+  /**
+   * 尺寸
+   */
+  size: String,
+  /**
+   * 标签宽度
+   */
+  labelWidth: String,
+  /**
+   * 使用默认插槽
+   */
+  useDefaultSlot: makeBooleanProp(false),
+  /**
+   * 使用标签插槽
+   */
+  useLabelSlot: makeBooleanProp(false),
+  /**
+   * 错误状态
+   */
+  error: makeBooleanProp(false),
+  /**
+   * 右对齐
+   */
+  alignRight: makeBooleanProp(false),
+  /**
+   * 确定前校验函数，接收 (value, resolve, picker) 参数，通过 resolve 继续执行 picker，resolve 接收1个boolean参数
+   */
+  beforeConfirm: Function as PropType<PickerBeforeConfirm>,
+  /**
+   * 点击蒙层关闭
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 底部安全区域内
+   */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /**
+   * 文本溢出显示省略号
+   */
+  ellipsis: makeBooleanProp(false),
+  /**
+   * 选项总高度
+   */
+  columnsHeight: makeNumberProp(217),
+  /**
+   * 选项值对应的键名
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项文本对应的键名
+   */
+  labelKey: makeStringProp('label'),
+  /**
+   * 选中项，如果为多列选择器，则其类型应为数组
+   */
+  modelValue: {
+    type: [String, Number, Array] as PropType<string | number | Array<string> | Array<number>>,
+    default: ''
+  },
+  /**
+   * 选择器数据，可以为字符串数组，也可以为对象数组，如果为二维数组，则为多列选择器
+   */
+  columns: {
+    type: Array as PropType<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>,
+    default: () => []
+  },
+  /**
+   * 接收 pickerView 实例、选中项、当前修改列的下标、resolve 作为入参，根据选中项和列下标进行判断，通过 pickerView 实例暴露出来的 setColumnData 方法修改其他列的数据源。
+   */
+  columnChange: Function as PropType<PickerViewColumnChange>,
+  /**
+   * 自定义展示文案的格式化函数，返回一个字符串
+   */
+  displayFormat: Function as PropType<PickerDisplayFormat>,
+  /**
+   * 自定义层级
+   */
+  zIndex: makeNumberProp(15),
+  /**
+   * 表单域 model 字段名，在使用表单校验功能的情况下，该属性是必填的
+   */
+  prop: String,
+  /**
+   * 表单验证规则，结合wd-form组件使用
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 是否在手指松开时立即触发 change 事件。若不开启则会在滚动动画结束后触发 change 事件，1.2.25版本起提供，仅微信小程序和支付宝小程序支持。
+   */
+  immediateChange: makeBooleanProp(false),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false)
+}
+
+export type PickerProps = ExtractPropTypes<typeof pickerProps>
+
+export type PickerDisplayFormat = (item: ColumnItem | ColumnItem[], vl: { valueKey: string; labelKey: string }) => string
+
+export type PickerBeforeConfirm = (
+  value: string | number | boolean | string[] | number[] | boolean[],
+  resolve: (isPass: boolean) => void,
+  picker: any
+) => void
+
+export type PickerExpose = {
+  // 打开picker弹框
+  open: () => void
+  // 关闭picker弹框
+  close: () => void
+  /**
+   * 设置加载状态
+   * @param loading 加载状态
+   */
+  setLoading: (loading: boolean) => void
+}
+
+export type PickerInstance = ComponentPublicInstance<PickerExpose, PickerProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
new file mode 100644
index 0000000..7c3728e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-picker/wd-picker.vue
@@ -0,0 +1,420 @@
+<template>
+  <view
+    :class="`wd-picker ${disabled ? 'is-disabled' : ''} ${size ? 'is-' + size : ''}  ${cell.border.value ? 'is-border' : ''} ${
+      alignRight ? 'is-align-right' : ''
+    } ${error ? 'is-error' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <view class="wd-picker__field" @click="showPopup">
+      <slot v-if="useDefaultSlot"></slot>
+      <view v-else class="wd-picker__cell">
+        <view
+          v-if="label || useLabelSlot"
+          :class="`wd-picker__label ${customLabelClass}  ${isRequired ? 'is-required' : ''}`"
+          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
+        >
+          <template v-if="label">{{ label }}</template>
+          <slot v-else name="label"></slot>
+        </view>
+        <view class="wd-picker__body">
+          <view class="wd-picker__value-wraper">
+            <view :class="`wd-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${showValue ? '' : 'wd-picker__placeholder'}`">
+              {{ showValue ? showValue : placeholder || translate('placeholder') }}
+            </view>
+            <wd-icon v-if="showArrow" custom-class="wd-picker__arrow" name="arrow-right" />
+            <view v-else-if="showClear" @click.stop="handleClear">
+              <wd-icon custom-class="wd-picker__clear" name="error-fill" />
+            </view>
+          </view>
+          <view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
+        </view>
+      </view>
+    </view>
+    <wd-popup
+      v-model="popupShow"
+      position="bottom"
+      :hide-when-close="false"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      @close="onCancel"
+      custom-class="wd-picker__popup"
+    >
+      <view class="wd-picker__wraper">
+        <view class="wd-picker__toolbar" @touchmove="noop">
+          <view class="wd-picker__action wd-picker__action--cancel" @click="onCancel">
+            {{ cancelButtonText || translate('cancel') }}
+          </view>
+          <view v-if="title" class="wd-picker__title">{{ title }}</view>
+          <view :class="`wd-picker__action ${isLoading ? 'is-loading' : ''}`" @click="onConfirm">
+            {{ confirmButtonText || translate('done') }}
+          </view>
+        </view>
+        <wd-picker-view
+          ref="pickerViewWd"
+          :custom-class="customViewClass"
+          v-model="pickerValue"
+          :columns="displayColumns"
+          :loading="isLoading"
+          :loading-color="loadingColor"
+          :columns-height="columnsHeight"
+          :value-key="valueKey"
+          :label-key="labelKey"
+          :immediate-change="immediateChange"
+          @change="pickerViewChange"
+          @pickstart="onPickStart"
+          @pickend="onPickEnd"
+          :column-change="columnChange"
+        />
+      </view>
+    </wd-popup>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-picker',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdPopup from '../wd-popup/wd-popup.vue'
+import wdPickerView from '../wd-picker-view/wd-picker-view.vue'
+import { getCurrentInstance, onBeforeMount, ref, watch, computed, onMounted, nextTick } from 'vue'
+import { deepClone, defaultDisplayFormat, getType, isArray, isDef, isFunction } from '../common/util'
+import { useCell } from '../composables/useCell'
+import { type ColumnItem, formatArray, type PickerViewInstance } from '../wd-picker-view/types'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { pickerProps, type PickerExpose } from './types'
+const { translate } = useTranslate('picker')
+
+const props = defineProps(pickerProps)
+const emit = defineEmits(['confirm', 'open', 'cancel', 'clear', 'update:modelValue'])
+
+const pickerViewWd = ref<PickerViewInstance | null>(null)
+const cell = useCell()
+
+const innerLoading = ref<boolean>(false) // 内部控制是否loading
+
+// 弹出层是否显示
+const popupShow = ref<boolean>(false)
+// 选定后展示的选中项
+const showValue = ref<string>('')
+const pickerValue = ref<string | number | boolean | string[] | number[] | boolean[]>('')
+const displayColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 传入 pickerView 的columns
+const resetColumns = ref<Array<string | number | ColumnItem | Array<string | number | ColumnItem>>>([]) // 保存之前的 columns，当取消时，将数据源回滚，避免多级联动数据源不正确的情况
+const isPicking = ref<boolean>(false) // 判断pickview是否还在滑动中
+const hasConfirmed = ref<boolean>(false) // 判断用户是否点击了确认按钮
+
+const isLoading = computed(() => {
+  return props.loading || innerLoading.value
+})
+
+watch(
+  () => props.displayFormat,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormat must be Function')
+    }
+    if (pickerViewWd.value && pickerViewWd.value.getSelectedIndex().length !== 0) {
+      handleShowValueUpdate(props.modelValue)
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    pickerValue.value = newValue
+    // 获取初始选中项,并展示初始选中文案
+    handleShowValueUpdate(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columns,
+  (newValue) => {
+    displayColumns.value = deepClone(newValue)
+    resetColumns.value = deepClone(newValue)
+    if (newValue.length === 0) {
+      // 当 columns 变为空时，清空 pickerValue 和 showValue
+      pickerValue.value = isArray(props.modelValue) ? [] : ''
+      showValue.value = ''
+    } else {
+      // 非空时正常更新显示值
+      handleShowValueUpdate(props.modelValue)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columnChange,
+  (newValue) => {
+    if (newValue && !isFunction(newValue)) {
+      console.error('The type of columnChange must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+// 表单校验错误信息
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+const { proxy } = getCurrentInstance() as any
+
+onMounted(() => {
+  handleShowValueUpdate(props.modelValue)
+})
+
+onBeforeMount(() => {
+  displayColumns.value = deepClone(props.columns)
+  resetColumns.value = deepClone(props.columns)
+})
+
+/**
+ * 值变更时更新显示内容
+ * @param value
+ */
+function handleShowValueUpdate(value: string | number | Array<string | number>) {
+  // 获取初始选中项,并展示初始选中文案
+  if ((isArray(value) && value.length > 0) || (isDef(value) && !isArray(value) && value !== '')) {
+    if (pickerViewWd.value) {
+      nextTick(() => {
+        setShowValue(pickerViewWd.value!.getSelects())
+      })
+    } else {
+      setShowValue(getSelects(value)!)
+    }
+  } else {
+    showValue.value = ''
+  }
+}
+
+/**
+ * @description 根据传入的value，picker组件获取当前cell展示值。
+ * @param {String|Number|Array<String|Number|Array<any>>}value
+ */
+function getSelects(value: string | number | Array<string | number | Array<any>>) {
+  const formatColumns = formatArray(props.columns, props.valueKey, props.labelKey)
+  if (props.columns.length === 0) return
+
+  // 使其默认选中首项
+  if (value === '' || !isDef(value) || (isArray(value) && value.length === 0)) {
+    return
+  }
+  const valueType = getType(value)
+  const type = ['string', 'number', 'boolean', 'array']
+  if (type.indexOf(valueType) === -1) return []
+  /**
+   * 1.单key转为Array<key>
+   * 2.根据formatColumns的长度截取Array<String>，保证下面的遍历不溢出
+   * 3.根据每列的key值找到选项中value为此key的下标并记录
+   */
+  value = isArray(value) ? value : [value]
+  value = value.slice(0, formatColumns.length)
+
+  if (value.length === 0) {
+    value = formatColumns.map(() => 0)
+  }
+  let selected: number[] = []
+  value.forEach((target, col) => {
+    let row = formatColumns[col].findIndex((row) => {
+      return row[props.valueKey].toString() === target.toString()
+    })
+    row = row === -1 ? 0 : row
+    selected.push(row)
+  })
+
+  const selects = selected.map((row, col) => formatColumns[col][row])
+  // 单列选择器，则返回单项
+  if (selects.length === 1) {
+    return selects[0]
+  }
+  return selects
+}
+
+// 对外暴露方法，打开弹框
+function open() {
+  showPopup()
+}
+// 对外暴露方法，关闭弹框
+function close() {
+  onCancel()
+}
+/**
+ * 展示popup
+ */
+function showPopup() {
+  if (props.disabled || props.readonly) return
+
+  emit('open')
+  popupShow.value = true
+  pickerValue.value = props.modelValue
+  displayColumns.value = resetColumns.value
+}
+
+/**
+ * 点击取消按钮触发。关闭popup，触发cancel事件。
+ */
+function onCancel() {
+  popupShow.value = false
+  emit('cancel')
+  let timmer = setTimeout(() => {
+    clearTimeout(timmer)
+    isDef(pickerViewWd.value) && pickerViewWd.value.resetColumns(resetColumns.value)
+  }, 300)
+}
+/**
+ * 点击确定按钮触发。展示选中值，触发cancel事件。
+ */
+function onConfirm() {
+  if (isLoading.value) return
+
+  // 如果当前还在滑动且未停止下来，则锁住先不确认，等滑完再自动确认，避免pickview值未更新
+  if (isPicking.value) {
+    hasConfirmed.value = true
+    return
+  }
+
+  const { beforeConfirm } = props
+  if (beforeConfirm && isFunction(beforeConfirm)) {
+    beforeConfirm(
+      pickerValue.value,
+      (isPass: boolean) => {
+        isPass && handleConfirm()
+      },
+      proxy.$.exposed
+    )
+  } else {
+    handleConfirm()
+  }
+}
+function handleConfirm() {
+  if (isLoading.value || props.disabled) {
+    popupShow.value = false
+    return
+  }
+
+  const selects = pickerViewWd.value!.getSelects()
+  const values = pickerViewWd.value!.getValues()
+  // 获取当前的数据源，并设置给 resetColumns，用于取消时可以回退数据源
+  const columns = pickerViewWd.value!.getColumnsData()
+  popupShow.value = false
+  resetColumns.value = deepClone(columns)
+  emit('update:modelValue', values)
+
+  setShowValue(selects)
+  emit('confirm', {
+    value: values,
+    selectedItems: selects
+  })
+}
+/**
+ * 初始change事件
+ * @param event
+ */
+function pickerViewChange({ value }: any) {
+  pickerValue.value = value
+}
+/**
+ * 设置展示值
+ * @param  items
+ */
+function setShowValue(items: ColumnItem | ColumnItem[]) {
+  // 避免值为空时调用自定义展示函数
+  if ((isArray(items) && !items.length) || !items) return
+
+  const { valueKey, labelKey } = props
+  showValue.value = (props.displayFormat || defaultDisplayFormat)(items, { valueKey, labelKey })
+}
+function noop() {}
+function onPickStart() {
+  isPicking.value = true
+}
+function onPickEnd() {
+  isPicking.value = false
+
+  if (hasConfirmed.value) {
+    hasConfirmed.value = false
+    onConfirm()
+  }
+}
+
+/**
+ * 外部设置是否loading
+ * @param loading 是否loading
+ */
+function setLoading(loading: boolean) {
+  innerLoading.value = loading
+}
+
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length
+})
+
+function handleClear() {
+  const clearValue = isArray(pickerValue.value) ? [] : ''
+  emit('update:modelValue', clearValue)
+  emit('clear')
+}
+
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
+})
+
+defineExpose<PickerExpose>({
+  close,
+  open,
+  setLoading
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-popover/index.scss b/src/uni_modules/wot-design-uni/components/wd-popover/index.scss
new file mode 100644
index 0000000..6d6e1f7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-popover/index.scss
@@ -0,0 +1,116 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(popover) {
+
+    @include e(pos) {
+      background: rgb(75, 76, 77);
+      color: $-dark-color;
+      box-shadow: 0px 2px 10px 0px rgba(75, 76, 77, 0.1);
+    }
+
+    @include e(menu) {
+      background: rgb(75, 76, 77);
+    }
+
+    @include e(inner) {
+      background-color: rgb(75, 76, 77);
+    }
+
+    @include e(menu-inner) {
+
+      @include halfPixelBorder("top", 0, $-dark-border-color);
+    }
+
+    @include squareArrow($-popover-arrow-size, rgb(75, 76, 77), $-popover-z-index - 1, $-popover-arrow-box-shadow);
+
+  }
+}
+
+@include b(popover) {
+  position: relative;
+  display: inline-block;
+
+  @include edeep(icon) {
+    vertical-align: middle;
+    font-size: 18px;
+    margin-right: 5px;
+  }
+
+  @include e(menu-inner) {
+    position: relative;
+    padding: $-popover-padding 0;
+    display: flex;
+    align-items: center;
+
+    @include halfPixelBorder("top", 0, $-popover-border-color);
+
+    &:first-child::after {
+      display: none;
+    }
+  }
+
+  @include e(menu) {
+    display: inline-block;
+    padding: 0 $-popover-padding;
+    white-space: nowrap;
+    z-index: $-popover-z-index;
+    position: relative;
+    background: $-popover-bg;
+    border-radius: $-popover-radius;
+  }
+
+  @include edeep(pos) {
+    position: absolute;
+    box-sizing: border-box;
+    background-clip: padding-box;
+    text-align: center;
+    min-height: 36px;
+    z-index: $-popover-z-index;
+    line-height: $-popover-line-height;
+    font-size: $-popover-fs;
+    border-radius: $-popover-radius;
+    transition: opacity 0.2s;
+    background: $-popover-bg;
+    box-shadow: $-popover-box-shadow;
+    color: $-popover-color;
+  }
+
+  // @include edeep(transition) {
+  //   position: relative;
+  //   z-index: $-popover-z-index;
+  // }
+
+  @include e(hidden) {
+    left: -100vw;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    position: relative;
+    line-height: $-tooltip-line-height;
+    font-size: $-tooltip-fs;
+  }
+
+  @include e(inner) {
+    position: relative;
+    white-space: nowrap;
+    padding: $-popover-padding;
+    line-height: $-popover-line-height;
+    z-index: $-popover-z-index;
+    background-color: $-popover-bg;
+    border-radius: $-popover-radius;
+  }
+
+  @include edeep(close-icon) {
+    font-size: 12px;
+    position: absolute;
+    right: -8px;
+    top: -10px;
+    transform: scale(0.5);
+    padding: 10px;
+  }
+
+  @include squareArrow($-popover-arrow-size, $-popover-bg, $-popover-z-index - 1, $-popover-arrow-box-shadow);
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-popover/types.ts b/src/uni_modules/wot-design-uni/components/wd-popover/types.ts
new file mode 100644
index 0000000..8faa789
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-popover/types.ts
@@ -0,0 +1,69 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type PlacementType =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+
+export type PopoverMode = 'menu' | 'normal'
+
+export const popoverProps = {
+  ...baseProps,
+  customArrow: makeStringProp(''),
+  customPop: makeStringProp(''),
+  /**
+   * 是否显示 popover 箭头
+   */
+  visibleArrow: makeBooleanProp(true),
+  /**
+   * 显示的内容，也可以通过 slot#content 传入
+   */
+  content: [String, Object] as PropType<string | Record<string, any>[]>,
+  /**
+   * 指定 popover 的放置位置：top / top-start / top-end / bottom / bottom-start / bottom-end / left / left-start / left-end / right / right-start / right-end
+   */
+  placement: makeStringProp<PlacementType>('bottom'),
+  /**
+   * 偏移量
+   */
+  offset: makeNumberProp(0),
+  /**
+   * 是否使用内容插槽
+   */
+  useContentSlot: makeBooleanProp(false),
+  /**
+   * 是否禁用 popover
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否显示关闭按钮
+   */
+  showClose: makeBooleanProp(false),
+  /**
+   * 控制 popover 的显示状态
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 当前显示的模式，决定内容的展现形式，可选值：normal（普通模式）/ menu（菜单模式）
+   */
+  mode: makeStringProp<PopoverMode>('normal')
+}
+
+export type PopoverProps = ExtractPropTypes<typeof popoverProps>
+
+export type PopoverExpose = {
+  // 打开popover
+  open: () => void
+  // 关闭popover
+  close: () => void
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue b/src/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue
new file mode 100644
index 0000000..b3d15de
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-popover/wd-popover.vue
@@ -0,0 +1,180 @@
+<template>
+  <view :class="`wd-popover ${customClass}`" :style="customStyle" id="popover" @click.stop="popover.noop">
+    <!-- 使用插槽时无法获取正确宽高 -->
+    <view class="wd-popover__pos wd-popover__hidden" id="pos">
+      <view :class="`wd-popover__container ${customPop}`">
+        <view v-if="!useContentSlot && mode === 'normal'" class="wd-popover__inner">
+          {{ content }}
+        </view>
+        <view v-if="!useContentSlot && mode === 'menu' && typeof content === 'object'" class="wd-popover__menu">
+          <view v-for="(item, index) in content" :key="index" class="wd-popover__menu-inner" @click="menuClick(index)">
+            <wd-icon v-if="item.iconClass" :name="item.iconClass" custom-class="wd-popover__icon" />
+            <text>{{ item.content }}</text>
+          </view>
+        </view>
+      </view>
+    </view>
+    <wd-transition custom-class="wd-popover__pos" :custom-style="popover.popStyle.value" :show="showPopover" name="fade" :duration="200">
+      <view :class="`wd-popover__container ${customPop}`">
+        <view
+          v-if="props.visibleArrow"
+          :class="`wd-popover__arrow ${popover.arrowClass.value} ${customArrow}`"
+          :style="popover.arrowStyle.value"
+        ></view>
+        <!-- 普通模式 -->
+        <view v-if="!useContentSlot && mode === 'normal'" class="wd-popover__inner">
+          {{ content }}
+        </view>
+        <!-- 列表模式 -->
+        <view v-if="!useContentSlot && mode === 'menu'" class="wd-popover__menu">
+          <view
+            v-for="(item, index) in content"
+            :key="index"
+            class="wd-popover__menu-inner"
+            @click="menuClick(index)"
+            :style="index === 0 ? 'border-top: none' : ''"
+          >
+            <wd-icon v-if="typeof item === 'object' && item.iconClass" :name="item.iconClass" custom-class="wd-popover__icon" />
+            <view style="display: inline-block">{{ typeof item === 'object' && item.content ? item.content : '' }}</view>
+          </view>
+        </view>
+        <!-- 用户自定义样式 -->
+        <slot name="content" v-else />
+      </view>
+      <wd-icon v-if="showClose" name="close" custom-class="wd-popover__close-icon" @click="toggle"></wd-icon>
+    </wd-transition>
+    <view @click="toggle" class="wd-popover__target" id="target">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-popover',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { usePopover } from '../composables/usePopover'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { popoverProps, type PopoverExpose } from './types'
+import { isArray } from '../common/util'
+
+const props = defineProps(popoverProps)
+const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
+
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'popover'
+const { proxy } = getCurrentInstance() as any
+const popover = usePopover(props.visibleArrow)
+
+const showPopover = ref<boolean>(false) // 控制popover显隐
+
+watch(
+  () => props.content,
+  (newVal) => {
+    const { mode } = props
+    if (mode === 'normal' && typeof newVal !== 'string') {
+      console.error('The value type must be a string type in normal mode')
+    } else if (mode === 'menu' && !isArray(newVal)) {
+      console.error('The value type must be a Array type in menu mode')
+    }
+  }
+)
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(props.placement, props.visibleArrow, selector)
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showPopover.value = newValue
+  }
+)
+
+watch(
+  () => showPopover.value,
+  (newValue) => {
+    if (newValue) {
+      popover.control(props.placement, props.offset)
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+    popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
+    emit('change', { show: newValue })
+    emit(`${newValue ? 'open' : 'close'}`)
+  }
+)
+
+onMounted(() => {
+  popover.init(props.placement, props.visibleArrow, selector)
+})
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  popover.showStyle.value = showPopover.value ? 'opacity: 1;' : 'opacity: 0;'
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function menuClick(index: number) {
+  updateModelValue(false)
+  emit('menuclick', {
+    item: (props.content as Array<Record<string, any>>)[index],
+    index
+  })
+}
+
+function toggle() {
+  if (props.disabled) return
+  updateModelValue(!showPopover.value)
+}
+
+function open() {
+  updateModelValue(true)
+}
+
+function close() {
+  updateModelValue(false)
+}
+
+function updateModelValue(value: boolean) {
+  showPopover.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<PopoverExpose>({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-popup/index.scss b/src/uni_modules/wot-design-uni/components/wd-popup/index.scss
new file mode 100644
index 0000000..e23439c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-popup/index.scss
@@ -0,0 +1,84 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(popup-wrapper) {
+    :deep() {
+      .wd-popup {
+        background: $-dark-background2;
+      }
+
+      .wd-popup__close {
+        color: $-dark-color;
+      }
+    }
+  }
+}
+
+@include b(popup-wrapper) {
+  :deep() {
+    .wd-popup {
+      position: fixed;
+      max-height: 100%;
+      overflow-y: auto;
+      background: #fff;
+    }
+  }
+}
+
+
+@include b(popup) {
+  @include edeep(close) {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    color: $-popup-close-color;
+    font-size: $-popup-close-size;
+    transform: rotate(-45deg);
+  }
+
+  @include mdeep(center) {
+    left: 50%;
+    top: 50%;
+    transform: translate3d(-50%, -50%, 0);
+    transform-origin: 0% 0%;
+
+    &.wd-zoom-in-enter,
+    &.wd-zoom-in-leave-to {
+      transform: scale(0.8) translate3d(-50%, -50%, 0) !important;
+    }
+
+    @include when(deep) {
+
+      &.wd-zoom-in-enter,
+      &.wd-zoom-in-leave-to {
+        transform: scale(0.1) translate3d(-50%, -50%, 0) !important;
+      }
+    }
+
+  }
+
+  @include mdeep(left) {
+    top: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  @include mdeep(right) {
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  @include mdeep(top) {
+    top: 0;
+    left: 0;
+    right: 0;
+  }
+
+  @include mdeep(bottom) {
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-popup/types.ts b/src/uni_modules/wot-design-uni/components/wd-popup/types.ts
new file mode 100644
index 0000000..94fe28d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-popup/types.ts
@@ -0,0 +1,98 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-18 11:22:03
+ * @LastEditTime: 2024-11-08 12:55:58
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-popup\types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { TransitionName } from '../wd-transition/types'
+
+export type PopupType = 'center' | 'top' | 'right' | 'bottom' | 'left'
+
+export const popupProps = {
+  ...baseProps,
+  /**
+   * 动画类型，参见 wd-transition 组件的name
+   * 类型：string
+   * 可选值：fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in
+   */
+  transition: String as PropType<TransitionName>,
+  /**
+   * 关闭按钮
+   * 类型：boolean
+   * 默认值：false
+   */
+  closable: makeBooleanProp(false),
+  /**
+   * 弹出框的位置
+   * 类型：string
+   * 默认值：center
+   * 可选值：center / top / right / bottom / left
+   */
+  position: makeStringProp<PopupType>('center'),
+  /**
+   * 点击遮罩是否关闭
+   * 类型：boolean
+   * 默认值：true
+   */
+  closeOnClickModal: makeBooleanProp(true),
+  /**
+   * 动画持续时间
+   * 类型：number | boolean
+   * 默认值：300
+   */
+  duration: {
+    type: [Number, Boolean],
+    default: 300
+  },
+  /**
+   * 是否显示遮罩
+   * 类型：boolean
+   * 默认值：true
+   */
+  modal: makeBooleanProp(true),
+  /**
+   * 设置层级
+   * 类型：number
+   * 默认值：10
+   */
+  zIndex: makeNumberProp(10),
+  /**
+   * 是否当关闭时将弹出层隐藏（display: none)
+   * 类型：boolean
+   * 默认值：true
+   */
+  hideWhenClose: makeBooleanProp(true),
+  /**
+   * 遮罩样式
+   * 类型：string
+   * 默认值：''
+   */
+  modalStyle: makeStringProp(''),
+  /**
+   * 弹出面板是否设置底部安全距离（iphone X 类型的机型）
+   * 类型：boolean
+   * 默认值：false
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 弹出层是否显示
+   */
+  modelValue: makeBooleanProp(false),
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   * 类型：boolean
+   * 默认值：true
+   */
+  lazyRender: makeBooleanProp(true),
+  /**
+   * 是否锁定滚动
+   * 类型：boolean
+   * 默认值：true
+   */
+  lockScroll: makeBooleanProp(true)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue b/src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
new file mode 100644
index 0000000..ff5ad0d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-popup/wd-popup.vue
@@ -0,0 +1,133 @@
+<template>
+  <view class="wd-popup-wrapper">
+    <wd-overlay
+      v-if="modal"
+      :show="modelValue"
+      :z-index="zIndex"
+      :lock-scroll="lockScroll"
+      :duration="duration"
+      :custom-style="modalStyle"
+      @click="handleClickModal"
+      @touchmove="noop"
+    />
+    <wd-transition
+      :lazy-render="lazyRender"
+      :custom-class="rootClass"
+      :custom-style="style"
+      :duration="duration"
+      :show="modelValue"
+      :name="transitionName"
+      :destroy="hideWhenClose"
+      @before-enter="emit('before-enter')"
+      @enter="emit('enter')"
+      @after-enter="emit('after-enter')"
+      @before-leave="emit('before-leave')"
+      @leave="emit('leave')"
+      @after-leave="emit('after-leave')"
+    >
+      <slot />
+      <wd-icon v-if="closable" custom-class="wd-popup__close" name="add" @click="close" />
+    </wd-transition>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-popup',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { computed, onBeforeMount, ref } from 'vue'
+import { popupProps } from './types'
+import type { TransitionName } from '../wd-transition/types'
+
+const props = defineProps(popupProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'before-enter',
+  'enter',
+  'before-leave',
+  'leave',
+  'after-leave',
+  'after-enter',
+  'click-modal',
+  'close'
+])
+
+/**
+ * 弹出位置
+ */
+const transitionName = computed<TransitionName | TransitionName[]>(() => {
+  if (props.transition) {
+    return props.transition
+  }
+  if (props.position === 'center') {
+    return ['zoom-in', 'fade']
+  }
+  if (props.position === 'left') {
+    return 'slide-left'
+  }
+  if (props.position === 'right') {
+    return 'slide-right'
+  }
+  if (props.position === 'bottom') {
+    return 'slide-up'
+  }
+  if (props.position === 'top') {
+    return 'slide-down'
+  }
+  return 'slide-up'
+})
+
+const safeBottom = ref<number>(0)
+
+const style = computed(() => {
+  return `z-index:${props.zIndex}; padding-bottom: ${safeBottom.value}px;${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `wd-popup wd-popup--${props.position} ${!props.transition && props.position === 'center' ? 'is-deep' : ''} ${props.customClass || ''}`
+})
+
+onBeforeMount(() => {
+  if (props.safeAreaInsetBottom) {
+    const { safeArea, screenHeight, safeAreaInsets } = uni.getSystemInfoSync()
+
+    if (safeArea) {
+      // #ifdef MP-WEIXIN
+      safeBottom.value = screenHeight - (safeArea!.bottom || 0)
+      // #endif
+      // #ifndef MP-WEIXIN
+      safeBottom.value = safeAreaInsets ? safeAreaInsets.bottom : 0
+      // #endif
+    } else {
+      safeBottom.value = 0
+    }
+  }
+})
+
+function handleClickModal() {
+  emit('click-modal')
+  if (props.closeOnClickModal) {
+    close()
+  }
+}
+
+function close() {
+  emit('close')
+  emit('update:modelValue', false)
+}
+function noop() {}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-progress/index.scss b/src/uni_modules/wot-design-uni/components/wd-progress/index.scss
new file mode 100644
index 0000000..fc5cd32
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-progress/index.scss
@@ -0,0 +1,68 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(progress) {
+    @include e(label) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(progress) {
+  width: 100%;
+  height: $-progress-height;
+  display: flex;
+  align-items: center;
+  padding: $-progress-padding;
+
+  @include e(outer) {
+    display: block;
+    position: relative;
+    flex: 1;
+    height: $-progress-height;
+    border-radius: calc($-progress-height / 2);
+    background: $-progress-bg;
+  }
+  @include e(inner) {
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: calc($-progress-height / 2);
+    background: $-progress-color;
+    transition-property: width;
+    transition-timing-function: linear;
+    font-size: $-progress-icon-fs;
+
+    @include when(danger) {
+      background: $-progress-danger-color;
+    }
+    @include when(success) {
+      background: $-progress-success-color;
+    }
+    @include when(warning) {
+      background: $-progress-warning-color;
+    }
+  }
+  @include edeep(label) {
+    width: 30px;
+    margin-left: 9px;
+    color: $-progress-label-color;
+    font-size: $-progress-label-fs;
+  }
+  @include edeep(icon) {
+    font-size: $-progress-icon-fs;
+
+    @include when(danger) {
+      color: $-progress-danger-color;
+    }
+    @include when(success) {
+      color: $-progress-success-color;
+    }
+    @include when(warning) {
+      color: $-progress-warning-color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-progress/types.ts b/src/uni_modules/wot-design-uni/components/wd-progress/types.ts
new file mode 100644
index 0000000..0ae22c7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-progress/types.ts
@@ -0,0 +1,44 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-11-30 00:01:23
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-progress/types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export type ProgressStatus = 'success' | 'danger' | 'warning' // 状态类型
+
+export type ProgressColor = {
+  color: string // 颜色
+  percentage: number // 百分比
+}
+
+export const progressProps = {
+  ...baseProps,
+  /**
+   * 进度数值，最大值100
+   */
+  percentage: makeNumberProp(0),
+  /**
+   * 是否隐藏进度条上的文字，默认值为false
+   */
+  hideText: makeBooleanProp(false),
+  /**
+   * 进度条颜色
+   */
+  color: {
+    type: [String, Array] as PropType<string | string[] | ProgressColor[]>
+  },
+  /**
+   * 进度增加1%所需毫秒数
+   */
+  duration: makeNumberProp(30),
+  /**
+   * 进度条状态
+   */
+  status: String as PropType<ProgressStatus>
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue b/src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue
new file mode 100644
index 0000000..7e4df51
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-progress/wd-progress.vue
@@ -0,0 +1,197 @@
+<template>
+  <view :class="`wd-progress ${customClass}`" :style="customStyle">
+    <view class="wd-progress__outer">
+      <view :class="`wd-progress__inner ${innerClass}`" :style="rootStyle"></view>
+    </view>
+    <view v-if="!hideText" class="wd-progress__label">{{ percentage }}%</view>
+    <wd-icon
+      v-else-if="status"
+      :custom-class="`wd-progress__label wd-progress__icon ${innerClass}`"
+      :name="iconName"
+      :color="typeof color === 'string' ? color : ''"
+    ></wd-icon>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-progress',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, ref, watch } from 'vue'
+import { isArray, isDef, isObj, objToStyle, pause } from '../common/util'
+import { progressProps, type ProgressColor } from './types'
+
+const props = defineProps(progressProps)
+const showColor = ref<string>('')
+const showPercent = ref<number>(0)
+const changeCount = ref<number>(0)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+const rootStyle = computed(() => {
+  return objToStyle({
+    background: showColor.value,
+    width: `${showPercent.value}%`,
+    'transition-duration': `${changeCount.value * props.duration * 0.001}s`
+  })
+})
+
+const innerClass = computed(() => (props.status ? `is-${props.status}` : ''))
+
+const iconName = computed(() => {
+  let icon: string = ''
+  switch (props.status) {
+    case 'danger':
+      icon = 'close-outline'
+      break
+    case 'success':
+      icon = 'check-outline'
+      break
+    case 'warning':
+      icon = 'warn-bold'
+      break
+    default:
+      break
+  }
+  return icon
+})
+
+watch(
+  () => [props.percentage, props.color, props.duration],
+  () => {
+    validatePercentage(props.percentage)
+    updateProgress()
+  },
+  { immediate: true }
+)
+
+function validatePercentage(value: number) {
+  if (Number.isNaN(value) || value < 0 || value > 100) {
+    console.error('The value of percentage must be between 0 and 100')
+  }
+}
+
+/**
+ * 进度条前进
+ * @param partList 颜色数组
+ * @param percentage 进度值
+ */
+function updateProgressForward(partList: ProgressColor[], percentage: number) {
+  return partList.some((part, index) => {
+    if (showPercent.value < part.percentage && part.percentage <= percentage) {
+      update(part.percentage, part.color)
+      return true
+    } else if (index === partList.length - 1) {
+      update(percentage, part.color)
+    }
+  })
+}
+
+/**
+ * 进度条后退
+ * @param partList 颜色数组
+ * @param percentage 进度值
+ */
+function updateProgressBackward(partList: ProgressColor[], percentage: number) {
+  return partList.some((part) => {
+    if (percentage <= part.percentage) {
+      update(percentage, part.color)
+      return true
+    }
+  })
+}
+
+/**
+ * 更新进度条
+ */
+async function updateProgress() {
+  const { percentage, color } = props
+  if (!isDef(color) || (isArray(color) && color.length === 0)) {
+    changeCount.value = Math.abs(percentage - showPercent.value)
+    await pause()
+    showPercent.value = percentage
+    return
+  }
+  if (showPercent.value === percentage) return
+
+  const colorArray = isArray(color) ? color : [color]
+  validateColorArray(colorArray)
+  const partList = createPartList(colorArray)
+  showPercent.value > percentage ? updateProgressBackward(partList, percentage) : updateProgressForward(partList, percentage)
+}
+
+/**
+ * 判断是否是颜色数组
+ * @param array 颜色数组
+ */
+function isProgressColorArray(array: string[] | ProgressColor[]): array is ProgressColor[] {
+  return array.every(
+    (color) => isObj(color) && Object.prototype.hasOwnProperty.call(color, 'color') && Object.prototype.hasOwnProperty.call(color, 'percentage')
+  )
+}
+
+/**
+ * 判断是否是字符串数组
+ * @param array 颜色数组
+ */
+function isStringArray(array: string[] | ProgressColor[]): array is string[] {
+  return array.every((item) => typeof item === 'string')
+}
+
+/**
+ * 颜色数组校验
+ * @param colorArray 颜色数组
+ */
+function validateColorArray(colorArray: string[] | ProgressColor[]) {
+  const isStrArray = isStringArray(colorArray)
+  const isObjArray = isProgressColorArray(colorArray)
+  if (!isStrArray && !isObjArray) {
+    throw Error('Color must be String or Object with color and percentage')
+  }
+  if (isObjArray && colorArray.some(({ percentage }) => Number.isNaN(percentage))) {
+    throw Error('All the percentage must can be formatted to Number')
+  }
+}
+
+/**
+ * 创建颜色数组
+ * @param colorArray 颜色数组
+ * @return 颜色数组
+ */
+function createPartList(colorArray: string[] | ProgressColor[]) {
+  const partNum = 100 / colorArray.length
+  return isProgressColorArray(colorArray)
+    ? colorArray.sort((a, b) => a.percentage - b.percentage)
+    : colorArray.map((item, index) => ({
+        color: item,
+        percentage: (index + 1) * partNum
+      }))
+}
+
+function update(targetPercent: number, color: string) {
+  if (timer) return
+  const { duration } = props
+  changeCount.value = Math.abs(targetPercent - showPercent.value)
+  setTimeout(() => {
+    showPercent.value = targetPercent
+    showColor.value = color
+    timer = setTimeout(() => {
+      timer && clearTimeout(timer)
+      timer = null
+      updateProgress()
+    }, changeCount.value * duration)
+  }, 50)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-radio-group/index.scss b/src/uni_modules/wot-design-uni/components/wd-radio-group/index.scss
new file mode 100644
index 0000000..b21629c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-radio-group/index.scss
@@ -0,0 +1,23 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(radio-group) {
+    background-color: $-dark-background2;
+  }
+}
+
+@include b(radio-group) {
+  background-color: $-radio-bg;
+  font-size: 0;
+
+  // 上下20px 左右15px 内部间隔12px
+  @include when(button) {
+    width: 100%;
+    height: 100%;
+    padding: 8px 3px 20px 15px;
+    box-sizing: border-box;
+    overflow: hidden;
+    height: auto;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-radio-group/types.ts b/src/uni_modules/wot-design-uni/components/wd-radio-group/types.ts
new file mode 100644
index 0000000..83d5cd7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-radio-group/types.ts
@@ -0,0 +1,39 @@
+import { type InjectionKey } from 'vue'
+import type { RadioShape, RadioIconPlacement } from '../wd-radio/types'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type RadioGroupProvide = {
+  props: {
+    modelValue?: string | number | boolean
+    shape?: RadioShape
+    checkedColor?: string
+    disabled?: boolean
+    cell?: boolean
+    size?: string
+    inline?: boolean
+    iconPlacement?: RadioIconPlacement
+  }
+  updateValue: (value: string | number | boolean) => void
+}
+
+export const RADIO_GROUP_KEY: InjectionKey<RadioGroupProvide> = Symbol('wd-radio-group')
+
+export const radioGroupProps = {
+  ...baseProps,
+  /** 会自动选中value对应的单选框 */
+  modelValue: [String, Number, Boolean],
+  /** 单选框形状，可选值为 dot / button / check，默认为 check */
+  shape: makeStringProp<RadioShape>('check'),
+  /** 选中的颜色，默认为 #4D80F0 */
+  checkedColor: String,
+  /** 是否禁用，默认为 false */
+  disabled: makeBooleanProp(false),
+  /** 表单模式，默认为 false */
+  cell: makeBooleanProp(false),
+  /** 设置大小，默认为空 */
+  size: makeStringProp(''),
+  /** 同行展示，默认为 false */
+  inline: makeBooleanProp(false),
+  /** 图标位置，默认为 left */
+  iconPlacement: makeStringProp<RadioIconPlacement>('auto')
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-radio-group/wd-radio-group.vue b/src/uni_modules/wot-design-uni/components/wd-radio-group/wd-radio-group.vue
new file mode 100644
index 0000000..321613b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-radio-group/wd-radio-group.vue
@@ -0,0 +1,51 @@
+<template>
+  <view :class="`wd-radio-group  ${customClass} ${cell && shape === 'button' ? 'is-button' : ''}`" :style="customStyle">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-radio-group',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { watch } from 'vue'
+import { useChildren } from '../composables/useChildren'
+import { RADIO_GROUP_KEY, radioGroupProps } from './types'
+
+const props = defineProps(radioGroupProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren, children } = useChildren(RADIO_GROUP_KEY)
+
+linkChildren({ props, updateValue })
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    // type: 'dot', 'button', 'check'
+    const type = ['check', 'dot', 'button']
+    if (type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  },
+  { deep: true, immediate: true }
+)
+
+/**
+ * @description 处理radio子节点通知
+ */
+function updateValue(value: string | number | boolean) {
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-radio/index.scss b/src/uni_modules/wot-design-uni/components/wd-radio/index.scss
new file mode 100644
index 0000000..6519d1a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-radio/index.scss
@@ -0,0 +1,300 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+  @include b(radio) {
+    @include e(shape) {
+      background: transparent;
+    }
+    @include e(label) {
+      color: $-dark-color;
+    }
+    @include when(button) {
+      .wd-radio__label {
+        background-color: $-dark-background;
+      }
+      @include when(checked) {
+        .wd-radio__label {
+          background-color: $-dark-background2;
+        }
+      }
+    }
+
+    @include when(disabled) {
+      .wd-radio__label {
+        color: $-dark-color-gray;
+      }
+      @include when(checked) {
+        .wd-radio__label {
+          color: $-dark-color-gray;
+        }
+      }
+  
+      @include when(button) {
+        .wd-radio__label {
+          border-color: #c8c9cc;
+          background: #3a3a3c;
+          color: $-dark-color-gray;
+        }
+        @include when(checked) {
+          .wd-radio__label {
+            border-color: #c8c9cc;
+            background: #3a3a3c;
+            color: #c8c9cc;
+          }
+        }
+      }
+  
+      @include when(dot) {
+        .wd-radio__shape {
+          border-color: #c8c9cc;
+          background: #3a3a3c;
+          &::before {
+            background-color: #c8c9cc;
+          }
+        }
+      }
+    }
+  }
+}
+
+@include b(radio) {
+  display: flex;
+  margin-top: $-radio-margin;
+  justify-content: space-between;
+  align-items: center;
+  text-align: center;
+  line-height: 1.2;
+
+  @include when(first) {
+    margin-top: 0;
+  }
+  @include e(shape) {
+    position: relative;
+    display: inline-block;
+    width: $-radio-size;
+    height: $-radio-size;
+    font-size: $-radio-size;
+    color: transparent;
+    display: none;
+    vertical-align: middle;
+    transition: background 0.2s;
+  }
+  @include e(input) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    margin: 0;
+    opacity: 0;
+  }
+  @include e(label) {
+    display: inline-block;
+    vertical-align: top;
+    font-size: $-radio-label-fs;
+    color: $-radio-label-color;
+    line-height: 20px;
+  }
+  @include when(checked) {
+    .wd-radio__shape {
+      color: $-radio-checked-color;
+      border-color: currentColor;
+      display: inline-block;
+    }
+    .wd-radio__check {
+      color: $-radio-checked-color;
+      opacity: 1;
+    }
+  }
+
+  @include when(dot) {
+    .wd-radio__shape {
+      border: 2px solid $-radio-dot-border-color;
+      border-radius: 50%;
+      position: relative;
+      display: inline-block;
+      box-sizing: border-box;
+      transition: none;
+
+      &::before {
+        content: "";
+        position: absolute;
+        width: $-radio-dot-size;
+        height: $-radio-dot-size;
+        left: calc(50% - #{$-radio-dot-size / 2});
+        top: calc(50% - #{$-radio-dot-size / 2});
+        border-radius: 50%;
+        background-color: #fff;
+        transform: scale(0);
+        transition: transform .2s ease-in;
+      }
+    }
+    @include when(checked) {
+      .wd-radio__shape {
+        background-color: currentColor;
+        border-color: currentColor;
+        // background-color: $-radio-dot-checked-bg;
+        // border-color: $-radio-dot-checked-border-color;
+        &::before {
+          transform: scale(1);
+        }
+      }
+    }
+  }
+
+  @include when(button) {
+    display: inline-block;
+    margin-top: 0;
+    margin-right: 10px;
+
+    .wd-radio__shape {
+      display: none;
+    }
+    .wd-radio__label {
+      height: $-radio-button-height;
+      min-width: $-radio-button-min-width;
+      max-width: $-radio-button-max-width;
+      padding: 5px 15px;
+      margin-right: 0;
+      border-radius: $-radio-button-radius;
+      background-color: $-radio-button-bg;
+      font-size: $-radio-button-fs;
+      box-sizing: border-box;
+      border: 1px solid $-radio-button-border;
+      transition: all 0.2s;
+      @include lineEllipsis;
+    }
+    @include when(checked) {
+      .wd-radio__label {
+        color: $-radio-checked-color;
+        border-color: currentColor;
+        background-color: $-radio-bg;
+      }
+    }
+  }
+
+  &.icon-placement-left {
+    flex-direction: row-reverse;
+  }
+
+  @include when(inline) {
+    display: inline-block;
+    margin-top: 0;
+    margin-right: $-radio-margin;
+
+    @include when(first) {
+      margin-left: 0;
+    }
+    .wd-radio__shape {
+      display: block;
+      margin-right: 4px;
+      float: left;
+      &::after {
+        content: "";
+        display: table;
+        clear: both;
+      }
+    }
+
+    @include when(dot) {
+      .wd-radio__shape {
+        margin-top: 2px;
+      }
+      @include when(large) {
+        .wd-radio__shape {
+          margin-top: 0;
+        }
+      }
+    }
+
+    &.icon-placement-right {
+      .wd-radio__shape {
+        margin-right: 0;
+        margin-left: 4px;
+        float: right;
+      }
+    }
+  }
+
+  @include when(disabled) {
+    .wd-radio__label {
+      color: $-radio-disabled-label-color;
+    }
+    @include when(checked) {
+      .wd-radio__shape {
+        color: $-radio-disabled-label-color;
+      }
+      .wd-radio__check {
+        color: $-radio-disabled-label-color;
+      }
+      .wd-radio__label {
+        color: $-radio-disabled-label-color;
+      }
+    }
+
+    @include when(button) {
+      .wd-radio__label {
+        border-color: $-radio-disabled-color;
+        background: $-radio-disabled-color;
+        border-color: $-radio-button-border;
+        color: $-radio-disabled-label-color;
+      }
+      @include when(checked) {
+        .wd-radio__label {
+          border-color: $-radio-button-disabled-border;
+          background: $-radio-disabled-color;
+        }
+      }
+    }
+
+    @include when(dot) {
+      .wd-radio__shape {
+        background: $-radio-dot-disabled-bg;
+        border-color: $-radio-dot-disabled-border;
+      }
+    }
+  }
+
+  // 以下内容用于解决父子组件样式隔离的问题 —— START
+  @include when(cell-radio) {
+    padding: 13px 15px;
+    margin: 0;
+
+    @include when(large) {
+      padding: 14px 15px;
+    }
+  }
+
+  @include when(button-radio) {
+    display: inline-flex;
+    width: 33.3333%;
+    padding: 12px 12px 0px 0px;
+    box-sizing: border-box;
+
+    .wd-radio__label {
+      width: 100%;
+      max-width: inherit;
+    }
+  }
+  @include when(large) {
+    .wd-radio__shape {
+      width: $-radio-large-size;
+      height: $-radio-large-size;
+      font-size: $-radio-large-size;
+    }
+    .wd-radio__label {
+      font-size: $-radio-large-label-fs;
+    }
+
+    @include when(dot) {
+      .wd-radio__shape {
+        &::before {
+          width: $-radio-dot-large-size;
+          height: $-radio-dot-large-size;
+          left: calc(50% - #{$-radio-dot-large-size / 2});
+          top: calc(50% - #{$-radio-dot-large-size / 2});
+        }
+      }
+    }
+  }
+  // 以下内容用于解决父子组件样式隔离的问题 —— END
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-radio/types.ts b/src/uni_modules/wot-design-uni/components/wd-radio/types.ts
new file mode 100644
index 0000000..d0f03cc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-radio/types.ts
@@ -0,0 +1,51 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 20:40:34
+ * @LastEditTime: 2024-12-07 18:52:34
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-radio/types.ts
+ * 记得注释
+ */
+import type { PropType } from 'vue'
+import { baseProps, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type RadioShape = 'dot' | 'button' | 'check'
+
+export type RadioIconPlacement = 'left' | 'right' | 'auto'
+
+export const radioProps = {
+  ...baseProps,
+  /** 选中时的值 */
+  value: makeRequiredProp([String, Number, Boolean]),
+  /** 单选框的形状 */
+  shape: String as PropType<RadioShape>,
+  /** 选中的颜色 */
+  checkedColor: String,
+  /** 禁用 */
+  disabled: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /** 单元格 */
+  cell: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /** 大小 */
+  size: String,
+  /** 内联 */
+  inline: {
+    type: [Boolean, null] as PropType<boolean | null>,
+    default: null
+  },
+  /** 最大宽度 */
+  maxWidth: String,
+  /**
+   * 图标位置
+   * 可选值: 'left' | 'right' | 'auto'
+   */
+  iconPlacement: {
+    type: String as PropType<RadioIconPlacement>
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue b/src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue
new file mode 100644
index 0000000..14cecdf
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-radio/wd-radio.vue
@@ -0,0 +1,118 @@
+<template>
+  <view
+    :class="`wd-radio ${cellValue ? 'is-cell-radio' : ''} ${cellValue && shapeValue == 'button' ? 'is-button-radio' : ''} ${
+      sizeValue ? 'is-' + sizeValue : ''
+    } ${inlineValue ? 'is-inline' : ''} ${isChecked ? 'is-checked' : ''} ${shapeValue !== 'check' ? 'is-' + shapeValue : ''} ${
+      disabledValue ? 'is-disabled' : ''
+    } icon-placement-${iconPlacement} ${customClass}`"
+    :style="customStyle"
+    @click="handleClick"
+  >
+    <view
+      class="wd-radio__label"
+      :style="`${maxWidth ? 'max-width:' + maxWidth : ''};  ${
+        isChecked && shapeValue === 'button' && !disabledValue ? 'color :' + checkedColorValue : ''
+      }`"
+    >
+      <slot></slot>
+    </view>
+    <view class="wd-radio__shape" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''">
+      <wd-icon v-if="shapeValue === 'check'" :style="isChecked && !disabledValue ? 'color: ' + checkedColorValue : ''" name="check"></wd-icon>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-radio',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, watch } from 'vue'
+import { useParent } from '../composables/useParent'
+import { RADIO_GROUP_KEY } from '../wd-radio-group/types'
+import { radioProps, type RadioIconPlacement } from './types'
+import { getPropByPath, isDef } from '../common/util'
+
+const props = defineProps(radioProps)
+
+const { parent: radioGroup } = useParent(RADIO_GROUP_KEY)
+
+const isChecked = computed(() => {
+  if (radioGroup) {
+    return props.value === radioGroup.props.modelValue
+  } else {
+    return false
+  }
+})
+
+const shapeValue = computed(() => {
+  return props.shape || getPropByPath(radioGroup, 'props.shape')
+})
+
+const checkedColorValue = computed(() => {
+  return props.checkedColor || getPropByPath(radioGroup, 'props.checkedColor')
+})
+
+const disabledValue = computed(() => {
+  if (isDef(props.disabled)) {
+    return props.disabled
+  } else {
+    return getPropByPath(radioGroup, 'props.disabled')
+  }
+})
+
+const inlineValue = computed(() => {
+  if (isDef(props.inline)) {
+    return props.inline
+  } else {
+    return getPropByPath(radioGroup, 'props.inline')
+  }
+})
+
+const sizeValue = computed(() => {
+  return props.size || getPropByPath(radioGroup, 'props.size')
+})
+
+const cellValue = computed(() => {
+  if (isDef(props.cell)) {
+    return props.cell
+  } else {
+    return getPropByPath(radioGroup, 'props.cell')
+  }
+})
+
+const iconPlacement = computed<RadioIconPlacement>(() => {
+  if (isDef(props.iconPlacement)) {
+    return props.iconPlacement
+  } else {
+    return getPropByPath(radioGroup, 'props.iconPlacement')
+  }
+})
+
+watch(
+  () => props.shape,
+  (newValue) => {
+    const type = ['check', 'dot', 'button']
+    if (!newValue || type.indexOf(newValue) === -1) console.error(`shape must be one of ${type.toString()}`)
+  }
+)
+
+/**
+ * 点击子元素，通知父元素触发change事件
+ */
+function handleClick() {
+  const { value } = props
+  if (!disabledValue.value && radioGroup && isDef(value)) {
+    radioGroup.updateValue(value)
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-rate/index.scss b/src/uni_modules/wot-design-uni/components/wd-rate/index.scss
new file mode 100644
index 0000000..12b71b1
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-rate/index.scss
@@ -0,0 +1,25 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+@include b(rate) {
+  display: inline-block;
+  vertical-align: middle;
+  line-height: 1;
+
+  @include e(item) {
+    position: relative;
+    display: inline-block;
+    touch-action: none; // 禁用默认触摸行为
+  }
+  @include edeep(item-star) {
+    -webkit-background-clip: text !important;
+    color: transparent;
+  }
+  @include e(item-half) {
+    position: absolute;
+    left: 0;
+    top: 0;
+    overflow: hidden;
+    width: 50%;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-rate/types.ts b/src/uni_modules/wot-design-uni/components/wd-rate/types.ts
new file mode 100644
index 0000000..3842407
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-rate/types.ts
@@ -0,0 +1,96 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export const rateProps = {
+  ...baseProps,
+
+  /**
+   * 评分最大值
+   * 类型: number
+   * 默认值: 5
+   */
+  num: makeNumberProp(5),
+
+  /**
+   * 当前分数，使用v-model进行双向绑定
+   * 类型: string | number | null
+   * 默认值: null
+   */
+  modelValue: {
+    type: [String, Number, null] as PropType<string | number | null>,
+    default: null
+  },
+
+  /**
+   * 是否只读
+   * 类型: boolean
+   * 默认值: false
+   */
+  readonly: makeBooleanProp(false),
+
+  /**
+   * 图标大小
+   * 类型: string
+   * 默认值: '16px'
+   */
+  size: makeStringProp('16px'),
+
+  /**
+   * 图标间距
+   * 类型: string
+   * 默认值: '4px'
+   */
+  space: makeStringProp('4px'),
+
+  /**
+   * 未选中的图标颜色
+   * 类型: string
+   * 默认值: '#E8E8E8'
+   */
+  color: makeStringProp('#E8E8E8'),
+
+  /**
+   * 选中的图标颜色，支持传颜色数组（用于分段颜色）
+   * 类型: string | Array<string>
+   * 默认值: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)'
+   */
+  activeColor: {
+    type: [String, Array] as PropType<string | Array<string>>,
+    default: 'linear-gradient(180deg, rgba(255,238,0,1) 0%,rgba(250,176,21,1) 100%)'
+  },
+
+  /**
+   * 未选中的图标类名
+   * 类型: string
+   * 默认值: 'star-on'
+   */
+  icon: makeStringProp('star-on'),
+
+  /**
+   * 选中的图标类名
+   * 类型: string
+   * 默认值: 'star-on'
+   */
+  activeIcon: makeStringProp('star-on'),
+
+  /**
+   * 是否禁用
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 禁用的图标颜色
+   * 类型: string
+   * 默认值: 'linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)'
+   */
+  disabledColor: makeStringProp('linear-gradient(315deg, rgba(177,177,177,1) 0%,rgba(199,199,199,1) 100%)'),
+
+  /**
+   * 是否允许半选
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowHalf: makeBooleanProp(false)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue b/src/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue
new file mode 100644
index 0000000..9e6f76f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-rate/wd-rate.vue
@@ -0,0 +1,159 @@
+<template>
+  <view :class="`wd-rate ${customClass}`" :style="customStyle" @touchmove="onTouchMove">
+    <view
+      v-for="(rate, index) in rateList"
+      :key="index"
+      :data-index="index"
+      :style="{ 'margin-right': index == rateList.length - 1 ? 0 : space }"
+      class="wd-rate__item"
+    >
+      <wd-icon
+        custom-class="wd-rate__item-star"
+        :name="isActive(rate) ? activeIcon : icon"
+        :size="size"
+        :custom-style="rate === '100%' ? iconActiveStyle : iconStyle"
+        @click="changeRate(index, false)"
+      />
+      <view v-if="props.allowHalf" class="wd-rate__item-half" @click.stop="changeRate(index, true)">
+        <wd-icon
+          custom-class="wd-rate__item-star"
+          :name="isActive(rate) ? activeIcon : icon"
+          :size="size"
+          :custom-style="rate !== '0' ? iconActiveStyle : iconStyle"
+        />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-rate',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed, getCurrentInstance, ref, watch } from 'vue'
+import { rateProps } from './types'
+import { getRect } from '../common/util'
+const { proxy } = getCurrentInstance() as any
+
+const props = defineProps(rateProps)
+const emit = defineEmits(['update:modelValue', 'change'])
+
+const rateList = ref<Array<string>>([])
+const activeValue = ref<string>('')
+
+const iconStyle = computed(() => {
+  return `background:${props.color};`
+})
+
+const iconActiveStyle = computed(() => {
+  return `background:${props.disabled ? props.disabledColor : activeValue.value};`
+})
+
+watch(
+  () => props.activeColor,
+  (newVal) => {
+    if (Array.isArray(newVal) && !newVal.length) {
+      console.error('activeColor cannot be an empty array')
+    }
+    computeActiveValue()
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  [() => props.num, () => props.modelValue],
+  () => {
+    computeRateList()
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+// 当前选项是否为激活状态
+const isActive = (rate: string) => {
+  return rate !== '0'
+}
+
+/**
+ * @description 计算当前应当展示的rate数量
+ */
+function computeRateList() {
+  const { modelValue, num, allowHalf } = props
+  // value和num都准备好才能计算
+  if (modelValue === null || !num) return
+  if (typeof modelValue !== 'number') {
+    console.error('[Wot Design] error(wd-rate): the value of wd-rate should be a number')
+    return
+  }
+  const tempRateList: string[] = []
+  const fullLength = Math.floor(modelValue)
+  for (let i = 0; i < num; i++) {
+    if (i < fullLength) {
+      tempRateList.push('100%')
+    } else if (i === fullLength && allowHalf && modelValue % 1 !== 0) {
+      tempRateList.push('50%')
+    } else {
+      tempRateList.push('0')
+    }
+  }
+  rateList.value = tempRateList
+  computeActiveValue()
+}
+/**
+ * @description 计算当前应当展示的rate颜色
+ */
+function computeActiveValue() {
+  const { activeColor, modelValue, num } = props
+  let tempActiveValue: string = ''
+  if (Array.isArray(activeColor) && activeColor.length) {
+    tempActiveValue = Number(modelValue) <= num * 0.6 || !activeColor[1] ? activeColor[0] : activeColor[1]
+  } else {
+    tempActiveValue = activeColor as string
+  }
+  activeValue.value = tempActiveValue
+}
+/**
+ * @description 点击icon触发组件的change事件
+ */
+function changeRate(index: number, isHalf: boolean) {
+  if (props.readonly || props.disabled) return
+  const value = isHalf ? index + 0.5 : index + 1
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+
+async function onTouchMove(event: TouchEvent) {
+  const { clientX } = event.touches[0]
+  const rateItems = await getRect('.wd-rate__item', true, proxy)
+  const targetIndex = Array.from(rateItems).findIndex((rect) => {
+    return clientX >= rect.left! && clientX <= rect.right!
+  })
+  if (targetIndex !== -1) {
+    const target = rateItems[targetIndex]
+    const itemWidth = target.width!
+    const isHalf = props.allowHalf && clientX - target.left! < itemWidth / 2
+    const value = isHalf ? targetIndex + 0.5 : targetIndex + 1
+    if (value >= 0.5) {
+      changeRate(targetIndex, isHalf)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-resize/index.scss b/src/uni_modules/wot-design-uni/components/wd-resize/index.scss
new file mode 100644
index 0000000..cb0a039
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-resize/index.scss
@@ -0,0 +1,27 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(resize) {
+
+  @include e(container) {
+    position: absolute;
+    min-width: 1px;
+    min-height: 1px;
+  }
+
+  @include e(wrapper) {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: -9999;
+    overflow: hidden;
+    visibility: hidden;
+
+    @include m(placeholder) {
+      transition: 0s;
+      animation: none;
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-resize/types.ts b/src/uni_modules/wot-design-uni/components/wd-resize/types.ts
new file mode 100644
index 0000000..094de17
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-resize/types.ts
@@ -0,0 +1,6 @@
+import { baseProps, makeStringProp } from '../common/props'
+
+export const resizeProps = {
+  ...baseProps,
+  customContainerClass: makeStringProp('')
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-resize/wd-resize.vue b/src/uni_modules/wot-design-uni/components/wd-resize/wd-resize.vue
new file mode 100644
index 0000000..2b65423
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-resize/wd-resize.vue
@@ -0,0 +1,144 @@
+<template>
+  <view :class="`wd-resize ${customClass}`" :style="rootStyle">
+    <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
+    <view :id="resizeId" :class="`wd-resize__container ${customContainerClass}`">
+      <!--被监听的插槽-->
+      <slot />
+      <!--监听插槽变大-->
+      <scroll-view
+        class="wd-resize__wrapper"
+        :scroll-y="true"
+        :scroll-top="expandScrollTop"
+        :scroll-x="true"
+        :scroll-left="expandScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view class="wd-resize__wrapper--placeholder" style="height: 100000px; width: 100000px"></view>
+      </scroll-view>
+      <!--监听插槽变小-->
+      <scroll-view
+        class="wd-resize__wrapper"
+        :scroll-y="true"
+        :scroll-top="shrinkScrollTop"
+        :scroll-x="true"
+        :scroll-left="shrinkScrollLeft"
+        @scroll="onScrollHandler"
+      >
+        <view class="wd-resize__wrapper--placeholder" style="height: 250%; width: 250%"></view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-resize',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+import { addUnit, objToStyle, uuid } from '../common/util'
+import { resizeProps } from './types'
+
+const props = defineProps(resizeProps)
+const emit = defineEmits(['resize'])
+
+const expandScrollTop = ref<number>(0)
+const shrinkScrollTop = ref<number>(0)
+const expandScrollLeft = ref<number>(0)
+const shrinkScrollLeft = ref<number>(0)
+const height = ref<number>(0)
+const width = ref<number>(0)
+const scrollEventCount = ref<number>(0)
+
+const rootStyle = computed(() => {
+  const style: Record<string, string | number> = {
+    width: addUnit(width.value),
+    height: addUnit(height.value)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+let onScrollHandler = () => {}
+const { proxy } = getCurrentInstance() as any
+
+const resizeId = ref<string>(`resize${uuid()}`)
+
+onMounted(() => {
+  // 初始化数据获取
+  const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
+  query.exec(([res]) => {
+    // 闭包记录容器高度
+    let lastHeight = res.height
+    let lastWidth = res.width
+    // 立即填充父容器高宽
+    height.value = lastHeight
+    width.value = lastWidth
+    // 监听滚动事件
+    onScrollHandler = () => {
+      const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
+      query.exec(([res]) => {
+        // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
+        if (scrollEventCount.value++ === 0) {
+          const result: Record<string, string | number> = {}
+          ;['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+            result[propName] = res[propName]
+          })
+          emit('resize', result)
+        }
+        // 滚动条拉到底部会触发两次多余的事件，屏蔽掉。
+        if (scrollEventCount.value < 3) return
+        // 手动设置父容器高宽，防止父容器坍塌
+        // 滚动完，重新获取容器新的高度
+        const newHeight = res.height
+        const newWidth = res.width
+        // 立即填充父容器高宽
+        height.value = newHeight
+        width.value = newWidth
+        // 宽高都改变时，只需要触发一次 size 事件
+        const emitStack: number[] = []
+        if (newHeight !== lastHeight) {
+          lastHeight = newHeight
+          emitStack.push(1)
+        }
+        if (newWidth !== lastWidth) {
+          lastWidth = newWidth
+          emitStack.push(1)
+        }
+        if (emitStack.length !== 0) {
+          const result: Record<string, any> = {}
+          ;['bottom', 'top', 'left', 'right', 'height', 'width'].forEach((propName) => {
+            result[propName] = res[propName]
+          })
+          emit('resize', result)
+        }
+        // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+        scrollToBottom({
+          lastWidth: lastWidth,
+          lastHeight: lastHeight
+        })
+      })
+    }
+    // 滚动条拉到底部（如果使用 nextTick 效果更佳）
+    scrollToBottom({
+      lastWidth: lastWidth,
+      lastHeight: lastHeight
+    })
+  })
+})
+
+function scrollToBottom({ lastWidth, lastHeight }: { lastWidth: number; lastHeight: number }) {
+  expandScrollTop.value = 100000 + lastHeight
+  shrinkScrollTop.value = 3 * height.value + lastHeight
+  expandScrollLeft.value = 100000 + lastWidth
+  shrinkScrollLeft.value = 3 * width.value + lastWidth
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-row/index.scss b/src/uni_modules/wot-design-uni/components/wd-row/index.scss
new file mode 100644
index 0000000..26ffdbd
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-row/index.scss
@@ -0,0 +1,10 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(row) {
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-row/types.ts b/src/uni_modules/wot-design-uni/components/wd-row/types.ts
new file mode 100644
index 0000000..f03f970
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-row/types.ts
@@ -0,0 +1,16 @@
+import { type InjectionKey } from 'vue'
+import { baseProps, makeNumberProp } from '../common/props'
+
+export type RowProvide = {
+  props: { gutter?: number }
+}
+
+export const ROW_KEY: InjectionKey<RowProvide> = Symbol('wd-row')
+
+export const rowProps = {
+  ...baseProps,
+  /**
+   * 列元素之间的间距（单位为px）
+   */
+  gutter: makeNumberProp(0)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-row/wd-row.vue b/src/uni_modules/wot-design-uni/components/wd-row/wd-row.vue
new file mode 100644
index 0000000..bd47500
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-row/wd-row.vue
@@ -0,0 +1,42 @@
+<template>
+  <view :class="`wd-row ${customClass}`" :style="rowStyle">
+    <!-- 每一行 -->
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-row',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { useChildren } from '../composables/useChildren'
+import { ROW_KEY, rowProps } from './types'
+import { addUnit, objToStyle } from '../common/util'
+
+const props = defineProps(rowProps)
+const { linkChildren } = useChildren(ROW_KEY)
+
+linkChildren({ props })
+
+const rowStyle = computed(() => {
+  const style: CSSProperties = {}
+  const { gutter } = props
+  if (gutter < 0) {
+    console.error('[wot design] warning(wd-row): attribute gutter must be greater than or equal to 0')
+  } else if (gutter) {
+    style.marginLeft = addUnit(gutter / 2)
+    style.marginRight = addUnit(gutter / 2)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-search/index.scss b/src/uni_modules/wot-design-uni/components/wd-search/index.scss
new file mode 100644
index 0000000..c57330c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-search/index.scss
@@ -0,0 +1,148 @@
+@import '../common/abstracts/_mixin.scss';
+@import '../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(search) {
+    background: $-dark-background4;
+
+    @include e(block) {
+      background-color: $-dark-background;
+    }
+
+    @include e(input) {
+      color: $-dark-color;
+    }
+
+    @include e(cover) {
+      background-color: $-dark-background;
+    }
+
+    @include e(search-icon) {
+      color: $-dark-color;
+    }
+    @include e(search-left-icon) {
+      color: $-dark-color;
+    }
+    @include e(clear) {
+      color: $-dark-color;
+    }
+    @include e(cancel) {
+      color: $-dark-color;
+    }
+
+    @include when(light) {
+      background: $-dark-background4;
+  
+      .wd-search__block {
+        background: $-dark-background7;
+      }
+  
+      .wd-search__cover {
+        background: $-dark-background7;
+      }
+    }
+  }
+}
+
+@include b(search) {
+  display: flex;
+  padding: $-search-padding;
+  align-items: center;
+  background: #fff;
+
+  @include e(block) {
+    flex: 1;
+    background-color: $-search-input-bg;
+    border-radius: $-search-input-radius;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+  }
+  @include e(field) {
+    flex: 1;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    position: relative;
+  }
+  @include e(input) {
+    flex: 1;
+    height: $-search-input-height;
+    box-sizing: border-box;
+    padding: $-search-input-padding;
+    border: none;
+    background: transparent;
+    font-size: $-search-input-fs;
+    -webkit-appearance: none;
+    outline: none;
+    color: $-search-input-color;
+    z-index: 0;
+
+    @include lineEllipsis;
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
+  }
+  @include e(cover) {
+    width: 100%;
+    height: $-search-input-height;
+    background-color: $-search-input-bg;
+    line-height: $-search-input-height;
+    font-size: $-search-input-fs;
+    border-radius: $-search-input-radius;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  @include edeep(search-icon) {
+    margin-right: 8px;
+    color: $-search-icon-color;
+    font-size: $-search-icon-size;
+  }
+  @include edeep(search-left-icon) {
+    position: absolute;
+    font-size: $-search-icon-size;
+    top: 50%;
+    left: 16px;
+    transform: translateY(-50%);
+    color: $-search-icon-color;
+  }
+  @include e(placeholder-txt) {
+    color: $-search-placeholder-color;
+    font-size: $-search-input-fs;
+  }
+  @include edeep(clear) {
+    position: absolute;
+    right: 0;
+    padding: 6px 9px 6px 7px;
+    color: $-search-cancel-color;
+  }
+  @include edeep(clear-icon) {
+    vertical-align: middle;
+    font-size: $-search-clear-icon-size;
+  }
+  @include e(cancel) {
+    padding: $-search-cancel-padding;
+    height: $-search-input-height;
+    line-height: $-search-input-height;
+    font-size: $-search-cancel-fs;
+    color: $-search-cancel-color;
+    -webkit-tap-highlight-color: transparent;
+  }
+  @include when(light) {
+    background: $-search-light-bg;
+
+    .wd-search__block {
+      background: #fff;
+    }
+
+    .wd-search__cover {
+      background: #fff;
+    }
+  }
+  @include when(without-cancel) {
+    padding-right: $-search-side-padding;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-search/types.ts b/src/uni_modules/wot-design-uni/components/wd-search/types.ts
new file mode 100644
index 0000000..dc9a0cd
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-search/types.ts
@@ -0,0 +1,102 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-09-01 15:42:04
+ * @LastEditTime: 2024-09-21 15:36:09
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-search\types.ts
+ * 记得注释
+ */
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const searchProps = {
+  ...baseProps,
+  customInputClass: makeStringProp(''),
+  /**
+   * 输入框内容，双向绑定
+   * 类型: string
+   * 默认值: ''
+   */
+  modelValue: makeStringProp(''),
+
+  /**
+   * 是否使用输入框右侧插槽
+   * 类型: boolean
+   * 默认值: false
+   * @deprecated 该属性已废弃，将在下一个minor版本被移除，直接使用插槽即可
+   */
+  useSuffixSlot: makeBooleanProp(false),
+
+  /**
+   * 搜索框占位文本
+   * 类型: string
+   */
+  placeholder: String,
+
+  /**
+   * 搜索框右侧文本
+   * 类型: string
+   */
+  cancelTxt: String,
+
+  /**
+   * 搜索框亮色（白色）
+   * 类型: boolean
+   * 默认值: false
+   */
+  light: makeBooleanProp(false),
+
+  /**
+   * 是否隐藏右侧文本
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideCancel: makeBooleanProp(false),
+
+  /**
+   * 是否禁用搜索框
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 原生属性，设置最大长度。-1 表示无限制
+   * 类型: string / number
+   * 默认值: -1
+   */
+  maxlength: makeNumberProp(-1),
+
+  /**
+   * placeholder 居左边
+   * 类型: boolean
+   * 默认值: false
+   */
+  placeholderLeft: makeBooleanProp(false),
+
+  /**
+   * 是否自动聚焦
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.63
+   */
+  focus: makeBooleanProp(false),
+
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.63
+   */
+  focusWhenClear: makeBooleanProp(false),
+
+  /**
+   * 原生属性，指定 placeholder 的样式，目前仅支持color,font-size和font-weight
+   */
+  placeholderStyle: String,
+
+  /**
+   * 原生属性，指定 placeholder 的样式类
+   */
+  placeholderClass: makeStringProp('')
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue b/src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue
new file mode 100644
index 0000000..a9c97b5
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-search/wd-search.vue
@@ -0,0 +1,201 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <view class="wd-search__block">
+      <slot name="prefix"></slot>
+      <view class="wd-search__field">
+        <view v-if="!placeholderLeft" :style="coverStyle" class="wd-search__cover" @click="closeCover">
+          <wd-icon name="search" custom-class="wd-search__search-icon"></wd-icon>
+          <text :class="`wd-search__placeholder-txt ${placeholderClass}`">{{ placeholder || translate('search') }}</text>
+        </view>
+        <wd-icon v-if="showInput || str || placeholderLeft" name="search" custom-class="wd-search__search-left-icon"></wd-icon>
+        <input
+          v-if="showInput || str || placeholderLeft"
+          :placeholder="placeholder || translate('search')"
+          :placeholder-class="`wd-search__placeholder-txt ${placeholderClass}`"
+          :placeholder-style="placeholderStyle"
+          confirm-type="search"
+          v-model="str"
+          :class="['wd-search__input', customInputClass]"
+          @focus="searchFocus"
+          @input="inputValue"
+          @blur="searchBlur"
+          @confirm="search"
+          :disabled="disabled"
+          :maxlength="maxlength"
+          :focus="isFocused"
+        />
+        <wd-icon v-if="str" custom-class="wd-search__clear wd-search__clear-icon" name="error-fill" @click="clearSearch" />
+      </view>
+    </view>
+
+    <slot v-if="!hideCancel" name="suffix">
+      <view class="wd-search__cancel" @click="handleCancel">
+        {{ cancelTxt || translate('cancel') }}
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-search',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { type CSSProperties, computed, onMounted, ref, watch } from 'vue'
+import { objToStyle, pause } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { searchProps } from './types'
+
+const props = defineProps(searchProps)
+const emit = defineEmits(['update:modelValue', 'change', 'clear', 'search', 'focus', 'blur', 'cancel'])
+
+const { translate } = useTranslate('search')
+
+const isFocused = ref<boolean>(false) // 是否聚焦中
+const showInput = ref<boolean>(false) // 是否显示输入框 用于实现聚焦的hack
+const str = ref('')
+const showPlaceHolder = ref<boolean>(true)
+const clearing = ref<boolean>(false)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    str.value = newValue
+    if (newValue) {
+      showInput.value = true
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    if (newValue) {
+      if (props.disabled) return
+      closeCover()
+    }
+  }
+)
+
+onMounted(() => {
+  if (props.focus) {
+    closeCover()
+  }
+})
+
+const rootClass = computed(() => {
+  return `wd-search  ${props.light ? 'is-light' : ''}  ${props.hideCancel ? 'is-without-cancel' : ''} ${props.customClass}`
+})
+
+const coverStyle = computed(() => {
+  const coverStyle: CSSProperties = {
+    display: str.value === '' && showPlaceHolder.value ? 'flex' : 'none'
+  }
+
+  return objToStyle(coverStyle)
+})
+
+async function hackFocus(focus: boolean) {
+  showInput.value = focus
+  await pause()
+  isFocused.value = focus
+}
+
+async function closeCover() {
+  if (props.disabled) return
+  await pause(100)
+  showPlaceHolder.value = false
+  hackFocus(true)
+}
+/**
+ * @description input的input事件handle
+ * @param value
+ */
+function inputValue(event: any) {
+  str.value = event.detail.value
+  emit('update:modelValue', event.detail.value)
+  emit('change', {
+    value: event.detail.value
+  })
+}
+/**
+ * @description 点击清空icon的handle
+ */
+async function clearSearch() {
+  str.value = ''
+  clearing.value = true
+  if (props.focusWhenClear) {
+    isFocused.value = false
+  }
+  await pause(100)
+  if (props.focusWhenClear) {
+    showPlaceHolder.value = false
+    hackFocus(true)
+  } else {
+    showPlaceHolder.value = true
+    hackFocus(false)
+  }
+  emit('change', {
+    value: ''
+  })
+  emit('update:modelValue', '')
+  emit('clear')
+}
+/**
+ * @description 点击搜索按钮时的handle
+ * @param value
+ */
+function search({ detail: { value } }: any) {
+  // 组件触发search事件
+  emit('search', {
+    value
+  })
+}
+/**
+ * @description 输入框聚焦时的handle
+ */
+function searchFocus() {
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+  showPlaceHolder.value = false
+  emit('focus', {
+    value: str.value
+  })
+}
+/**
+ * @description 输入框失焦的handle
+ */
+function searchBlur() {
+  if (clearing.value) return
+  // 组件触发blur事件
+  showPlaceHolder.value = !str.value
+  showInput.value = !showPlaceHolder.value
+  isFocused.value = false
+  emit('blur', {
+    value: str.value
+  })
+}
+/**
+ * @description 点击取消搜索按钮的handle
+ */
+function handleCancel() {
+  // 组件触发cancel事件
+  emit('cancel', {
+    value: str.value
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-segmented/index.scss b/src/uni_modules/wot-design-uni/components/wd-segmented/index.scss
new file mode 100644
index 0000000..f79061e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-segmented/index.scss
@@ -0,0 +1,101 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(segmented) {
+    background: $-dark-background2;
+
+    @include e(item) {
+      color: $-dark-color3;
+
+      @include when(active) {
+        color: $-dark-color;
+
+        @include when(disabled) {
+          color: $-dark-color3;
+        }
+      }
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+
+      @include m(active) {
+        background-color: $-color-theme;
+
+        @include when(disabled) {
+          opacity: 0.6;
+        }
+      }
+    }
+
+  }
+}
+
+@include b(segmented) {
+  position: relative;
+  display: flex;
+  align-items: stretch;
+  justify-items: flex-start;
+  width: 100%;
+  background-color: $-segmented-item-bg-color;
+  padding: $-segmented-padding;
+  border-radius: 4px;
+  box-sizing: border-box;
+
+
+  @include e(item) {
+    position: relative;
+    text-align: center;
+    border-radius: 4px;
+    flex: 1;
+    min-width: 0;
+    z-index: 1;
+    min-height: 28px;
+    line-height: 28px;
+    padding: 0 12px;
+    font-size: 14px;
+    color: $-segmented-item-color;
+    font-weight: 400;
+
+    @include when(active) {
+      font-weight: 550;
+    }
+
+    @include when(large) {
+      min-height: 32px;
+      line-height: 32px;
+      padding: 0 12px;
+      font-size: 16px;
+    }
+
+
+    @include when(small) {
+      min-height: 24px;
+      line-height: 24px;
+      padding: 0 7px;
+      font-size: 12px;
+    }
+
+    @include when(disabled) {
+      cursor: no-drop;
+      color: $-segmented-item-disabled-color;
+    }
+
+    @include m(active) {
+      background-color: $-segmented-item-acitve-bg;
+      border-radius: 4px;
+      height: calc(100% - $-segmented-padding * 2);
+      @include when(disabled) {
+        opacity: 0.8;
+      }
+    }
+  }
+
+  @include e(item-label) {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts b/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts
new file mode 100644
index 0000000..99c3a39
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts
@@ -0,0 +1,80 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-18 11:22:03
+ * @LastEditTime: 2024-11-24 23:04:55
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-segmented/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type SegmentedType = 'large' | 'middle' | 'small'
+
+export interface SegmentedOption {
+  value: string | number // 选中值
+  disabled?: boolean // 是否禁用
+  payload?: any // 更多数据
+}
+
+export const segmentedProps = {
+  ...baseProps,
+
+  /**
+   * 当前选中的值
+   * 类型: string | number
+   * 最低版本: 0.1.23
+   */
+  value: makeRequiredProp([String, Number]),
+
+  /**
+   * 是否禁用分段器
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.23
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 控件尺寸
+   * 类型: string
+   * 可选值: 'large' | 'middle' | 'small'
+   * 默认值: 'middle'
+   * 最低版本: 0.1.23
+   */
+  size: makeStringProp<SegmentedType>('middle'),
+
+  /**
+   * 数据集合
+   * 类型: string[] | number[] | SegmentedOption[]
+   * 必需: 是
+   * 默认值: []
+   * 最低版本: 0.1.23
+   */
+  options: {
+    type: Array as PropType<string[] | number[] | SegmentedOption[]>,
+    required: true,
+    default: () => []
+  },
+
+  /**
+   * 切换选项时是否振动
+   * 类型: boolean
+   * 默认值: false
+   * 最低版本: 0.1.23
+   */
+  vibrateShort: makeBooleanProp(false)
+}
+
+export type SegmentedExpose = {
+  /**
+   * 更新滑块偏移量
+   * @param animation 是否开启动画，默认开启
+   */
+  updateActiveStyle: (animation?: boolean) => void
+}
+
+export type SegmentedProps = ExtractPropTypes<typeof segmentedProps>
+
+export type SegmentedInstance = ComponentPublicInstance<SegmentedProps, SegmentedExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue b/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue
new file mode 100644
index 0000000..77f9b0d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-segmented/wd-segmented.vue
@@ -0,0 +1,134 @@
+<template>
+  <view :class="`wd-segmented ${customClass}`" :style="customStyle">
+    <view
+      :class="`wd-segmented__item is-${size} ${state.activeIndex === index ? 'is-active' : ''} ${
+        disabled || (isObj(option) ? option.disabled : false) ? 'is-disabled' : ''
+      }`"
+      @click="handleClick(option, index)"
+      v-for="(option, index) in options"
+      :key="index"
+    >
+      <view class="wd-segmented__item-label">
+        <slot name="label" v-if="$slots.label" :option="isObj(option) ? option : { value: option }"></slot>
+        <template v-else>
+          {{ isObj(option) ? option.value : option }}
+        </template>
+      </view>
+    </view>
+    <view :class="`wd-segmented__item--active ${activeDisabled ? 'is-disabled' : ''}`" :style="state.activeStyle"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-segmented',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, onMounted, reactive, watch } from 'vue'
+import { getRect, isObj, objToStyle, addUnit, pause } from '../common/util'
+import type { CSSProperties } from 'vue'
+import { segmentedProps, type SegmentedExpose, type SegmentedOption } from './types'
+const $item = '.wd-segmented__item'
+
+const props = defineProps(segmentedProps)
+const emit = defineEmits(['update:value', 'change', 'click'])
+
+const state = reactive({
+  activeIndex: 0, // 选中项
+  activeStyle: '' // 选中样式
+})
+
+const activeDisabled = computed(() => {
+  return props.disabled || (props.options[0] && isObj(props.options[0]) ? props.options[0].disabled : false)
+})
+
+watch(
+  () => props.value,
+  () => {
+    updateCurrentIndex()
+    updateActiveStyle()
+    if (props.vibrateShort) {
+      uni.vibrateShort({})
+    }
+  },
+  {
+    immediate: false
+  }
+)
+
+const { proxy } = getCurrentInstance() as any
+
+onMounted(async () => {
+  updateCurrentIndex()
+  await pause()
+  updateActiveStyle(false)
+})
+
+/**
+ * 更新滑块偏移量
+ *
+ */
+function updateActiveStyle(animation: boolean = true) {
+  getRect($item, true, proxy).then((rects) => {
+    const rect = rects[state.activeIndex]
+    const style: CSSProperties = {
+      position: 'absolute',
+      width: addUnit(rect.width!),
+      'z-index': 0
+    }
+    const left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0)
+    if (left) {
+      style.transform = `translateX(${left}px)`
+    }
+    if (animation) {
+      style.transition = 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)'
+    }
+    state.activeStyle = objToStyle(style)
+  })
+}
+
+/**
+ * 更新当前下标
+ */
+function updateCurrentIndex() {
+  const index = props.options.findIndex((option: string | number | SegmentedOption) => {
+    const value = isObj(option) ? option.value : option
+    return value == props.value
+  })
+  if (index >= 0) {
+    state.activeIndex = index
+  } else {
+    const value = isObj(props.options[0]) ? props.options[0].value : props.options[0]
+    emit('update:value', value)
+    emit('change', isObj(props.options[0]) ? props.options[0] : { value })
+  }
+}
+
+function handleClick(option: string | number | SegmentedOption, index: number) {
+  const disabled = props.disabled || (isObj(option) ? option.disabled : false)
+  if (disabled) {
+    return
+  }
+  const value = isObj(option) ? option.value : option
+  state.activeIndex = index
+  updateActiveStyle()
+  emit('update:value', value)
+  emit('change', isObj(option) ? option : { value })
+  emit('click', isObj(option) ? option : { value })
+}
+
+defineExpose<SegmentedExpose>({
+  updateActiveStyle
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-select-picker/index.scss b/src/uni_modules/wot-design-uni/components/wd-select-picker/index.scss
new file mode 100644
index 0000000..16c7460
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-select-picker/index.scss
@@ -0,0 +1,185 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(select-picker) {
+    @include when(border) {
+      .wd-select-picker__cell {
+        @include halfPixelBorder('top', $-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include e(cell) {
+      background-color: $-dark-background2;
+      color: $-dark-color;
+      @include when(disabled) {
+        .wd-select-picker__value {
+          color: $-dark-color3;
+        }
+      }
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+    @include e(value) {
+      color: $-dark-color;
+      @include m(placeholder) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    :deep(.wd-select-picker__arrow),
+    :deep(.wd-select-picker__close),
+    :deep(.wd-select-picker__clear) {
+      color: $-dark-color;
+    }
+
+  }
+
+}
+
+@include b(select-picker) {
+  @include when(border) {
+    .wd-select-picker__cell {
+      @include halfPixelBorder('top', $-cell-padding);
+    }
+  }
+  @include e(cell) {
+    position: relative;
+    display: flex;
+    padding: $-cell-wrapper-padding $-cell-padding;
+    align-items: flex-start;
+    background-color: $-color-white;
+    text-decoration: none;
+    color: $-cell-title-color;
+    font-size: $-cell-title-fs;
+    overflow: hidden;
+    line-height: $-cell-line-height;
+  }
+  @include e(cell) {
+    @include when(disabled) {
+      .wd-select-picker__value {
+        color: $-input-disabled-color;
+      }
+    }
+    @include when(align-right) {
+      .wd-select-picker__value {
+        text-align: right;
+      }
+    }
+    @include when(error) {
+      .wd-select-picker__value {
+        color: $-input-error-color;
+      }
+      :deep(.wd-select-picker__arrow) {
+        color: $-input-error-color;
+      }
+    }
+    @include when(large) {
+      font-size: $-cell-title-fs-large;
+
+      :deep(.wd-select-picker__arrow),
+      :deep(.wd-select-picker__clear) {
+        font-size: $-cell-icon-size-large;
+      }
+    }
+  }
+  @include e(error-message){
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+  @include e(label) {
+    position: relative;
+    width: $-input-cell-label-width;
+    color: $-cell-title-color;
+    margin-right: $-cell-padding;
+    box-sizing: border-box;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: '*';
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+      }
+    }
+  }
+  @include e(value-wraper) {
+    display: flex;
+  }
+  @include e(value) {
+    flex: 1;
+    margin-right: 10px;
+    color: $-cell-value-color;
+    
+    @include when(ellipsis) {
+      @include lineEllipsis;
+    }
+    @include m(placeholder) {
+      color: $-input-placeholder-color;
+    }
+  }
+  @include e(body) {
+    flex: 1;
+  }
+  @include edeep(arrow, clear) {
+    display: block;
+    font-size: $-cell-icon-size;
+    color: $-cell-arrow-color;
+    line-height: $-cell-line-height;
+  }
+
+  @include edeep(clear) {
+    color: $-cell-clear-color;
+  }
+ 
+  @include e(loading) {
+    position: absolute;
+    display: flex;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    background: $-picker-loading-bg;
+  }
+  // selectPiceker多出的样式
+  @include edeep(header) {
+    height: 72px;
+    line-height: 72px;
+  }
+  @include e(wrapper) {
+    padding: 0 10px;
+    position: relative;
+    max-height: 356px;
+    box-sizing: border-box;
+    overflow: auto;
+
+    @include when(filterable) {
+      height: 314px;
+      max-height: 314px;
+    }
+
+    @include when(loading) {
+      overflow: hidden;
+    }
+  }
+  @include e(text-active) {
+    color: $-color-theme;
+  }
+
+  @include e(footer) {
+    padding: 24px 15px;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-select-picker/types.ts b/src/uni_modules/wot-design-uni/components/wd-select-picker/types.ts
new file mode 100644
index 0000000..8457d11
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-select-picker/types.ts
@@ -0,0 +1,105 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeRequiredProp, makeStringProp } from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+
+export type SelectPickerType = 'checkbox' | 'radio'
+
+export const selectPickerProps = {
+  ...baseProps,
+  /** 选择器左侧文案 */
+  label: String,
+  /** 设置左侧标题宽度 */
+  labelWidth: makeStringProp('33%'),
+  /** 禁用 */
+  disabled: makeBooleanProp(false),
+  /** 只读 */
+  readonly: Boolean,
+  /** 选择器占位符 */
+  placeholder: String,
+  /** 弹出层标题 */
+  title: String,
+  /** 选择器的值靠右展示 */
+  alignRight: makeBooleanProp(false),
+  /** 是否为错误状态，错误状态时右侧内容为红色 */
+  error: makeBooleanProp(false),
+  /** 必填样式 */
+  required: makeBooleanProp(false),
+  /** 使用 label 插槽时设置该选项 */
+  useLabelSlot: makeBooleanProp(false),
+  /** 使用默认插槽时设置该选项 */
+  useDefaultSlot: makeBooleanProp(false),
+  /** 设置选择器大小 */
+  size: String,
+  /** 选中的颜色（单/复选框） */
+  checkedColor: String,
+  /** 最小选中的数量（仅在复选框类型下生效，`type`类型为`checkbox`） */
+  min: makeNumberProp(0),
+  /** 最大选中的数量，0 为无限数量，默认为 0（仅在复选框类型下生效，`type`类型为`checkbox`） */
+  max: makeNumberProp(0),
+  /** 设置 picker 内部的选项组尺寸大小 （单/复选框） */
+  selectSize: String,
+  /** 加载中 */
+  loading: makeBooleanProp(false),
+  /** 加载的颜色，只能使用十六进制的色值写法，且不能使用缩写 */
+  loadingColor: makeStringProp('#4D80F0'),
+  /** 点击遮罩是否关闭 */
+  closeOnClickModal: makeBooleanProp(true),
+  /** 选中项，`type`类型为`checkbox`时，类型为 array；`type`为`radio` 时 ，类型为 number / boolean / string */
+  modelValue: makeRequiredProp([String, Number, Boolean, Array] as PropType<string | number | boolean | (string | number | boolean)[]>),
+  /** 选择器数据，一维数组 */
+  columns: makeArrayProp<Record<string, any>>(),
+  /** 单复选选择器类型 */
+  type: makeStringProp<SelectPickerType>('checkbox'),
+  /** 选项对象中，value 对应的 key */
+  valueKey: makeStringProp('value'),
+  /** 选项对象中，展示的文本对应的 key */
+  labelKey: makeStringProp('label'),
+  /** 确认按钮文案 */
+  confirmButtonText: String,
+  /** 自定义展示文案的格式化函数，返回一个字符串 */
+  displayFormat: Function as PropType<SelectPickerDisplayFormat>,
+  /** 确定前校验函数，接收 (value, resolve) 参数，通过 resolve 继续执行 picker，resolve 接收 1 个 boolean 参数 */
+  beforeConfirm: Function as PropType<SelectPickerBeforeConfirm>,
+  /** 弹窗层级 */
+  zIndex: makeNumberProp(15),
+  /** 弹出面板是否设置底部安全距离（iphone X 类型的机型） */
+  safeAreaInsetBottom: makeBooleanProp(true),
+  /** 可搜索（目前只支持本地搜索） */
+  filterable: makeBooleanProp(false),
+  /** 搜索框占位符 */
+  filterPlaceholder: String,
+  /** 是否超出隐藏 */
+  ellipsis: makeBooleanProp(false),
+  /** 重新打开是否滚动到选中项 */
+  scrollIntoView: makeBooleanProp(true),
+  /** 表单域 `model` 字段名，在使用表单校验功能的情况下，该属性是必填的 */
+  prop: String,
+  /** 表单验证规则，结合`wd-form`组件使用 */
+  rules: makeArrayProp<FormItemRule>(),
+  /** 自定义内容样式类 */
+  customContentClass: makeStringProp(''),
+  /** 自定义标签样式类 */
+  customLabelClass: makeStringProp(''),
+  /** 自定义值样式类 */
+  customValueClass: makeStringProp(''),
+  /** 是否显示确认按钮（radio类型生效），默认值为：true */
+  showConfirm: makeBooleanProp(true),
+  /**
+   * 显示清空按钮
+   */
+  clearable: makeBooleanProp(false)
+}
+export type SelectPickerProps = ExtractPropTypes<typeof selectPickerProps>
+
+export type SelectPickerDisplayFormat = (items: string | number | boolean | (string | number | boolean)[], columns: Record<string, any>[]) => string
+
+export type SelectPickerBeforeConfirm = (value: string | number | boolean | (string | number | boolean)[], resolve: (isPass: boolean) => void) => void
+
+export type SelectPickerExpose = {
+  // 打开picker弹框
+  open: () => void
+  // 关闭picker弹框
+  close: () => void
+}
+
+export type SelectPickerInstance = ComponentPublicInstance<SelectPickerExpose, SelectPickerProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue b/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
new file mode 100644
index 0000000..9833534
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
@@ -0,0 +1,451 @@
+<template>
+  <view :class="`wd-select-picker ${cell.border.value ? 'is-border' : ''} ${customClass}`" :style="customStyle">
+    <view class="wd-select-picker__field" @click="open">
+      <slot v-if="useDefaultSlot"></slot>
+      <view
+        v-else
+        :class="`wd-select-picker__cell ${disabled && 'is-disabled'} ${props.readonly && 'is-readonly'} ${alignRight && 'is-align-right'} ${
+          error && 'is-error'
+        } ${size && 'is-' + size}`"
+      >
+        <view
+          v-if="label || useLabelSlot"
+          :class="`wd-select-picker__label ${isRequired && 'is-required'} ${customLabelClass}`"
+          :style="labelWidth ? 'min-width:' + labelWidth + ';max-width:' + labelWidth + ';' : ''"
+        >
+          <block v-if="label">{{ label }}</block>
+          <slot v-else name="label"></slot>
+        </view>
+        <view class="wd-select-picker__body">
+          <view class="wd-select-picker__value-wraper">
+            <view
+              :class="`wd-select-picker__value ${ellipsis && 'is-ellipsis'} ${customValueClass} ${
+                showValue ? '' : 'wd-select-picker__value--placeholder'
+              }`"
+            >
+              {{ showValue || placeholder || translate('placeholder') }}
+            </view>
+            <wd-icon v-if="showArrow" custom-class="wd-select-picker__arrow" name="arrow-right" />
+            <view v-else-if="showClear" @click.stop="handleClear">
+              <wd-icon custom-class="wd-select-picker__clear" name="error-fill" />
+            </view>
+          </view>
+
+          <view v-if="errorMessage" class="wd-select-picker__error-message">{{ errorMessage }}</view>
+        </view>
+      </view>
+    </view>
+    <wd-action-sheet
+      v-model="pickerShow"
+      :duration="250"
+      :title="title || translate('title')"
+      :close-on-click-modal="closeOnClickModal"
+      :z-index="zIndex"
+      :safe-area-inset-bottom="safeAreaInsetBottom"
+      @close="close"
+      @opened="scrollIntoView ? setScrollIntoView() : ''"
+      custom-header-class="wd-select-picker__header"
+    >
+      <wd-search
+        v-if="filterable"
+        v-model="filterVal"
+        :placeholder="filterPlaceholder || translate('filterPlaceholder')"
+        hide-cancel
+        placeholder-left
+        @change="handleFilterChange"
+      />
+      <scroll-view
+        :class="`wd-select-picker__wrapper ${filterable ? 'is-filterable' : ''} ${loading ? 'is-loading' : ''} ${customContentClass}`"
+        :scroll-y="!loading"
+        :scroll-top="scrollTop"
+        :scroll-with-animation="true"
+      >
+        <!-- 多选 -->
+        <view v-if="type === 'checkbox' && isArray(selectList)" id="wd-checkbox-group">
+          <wd-checkbox-group v-model="selectList" cell :size="selectSize" :checked-color="checkedColor" :min="min" :max="max" @change="handleChange">
+            <view v-for="item in filterColumns" :key="item[valueKey]" :id="'check' + item[valueKey]">
+              <wd-checkbox :modelValue="item[valueKey]" :disabled="item.disabled">
+                <block v-if="filterable && filterVal">
+                  <block v-for="text in item[labelKey]" :key="text.label">
+                    <text v-if="text.type === 'active'" class="wd-select-picker__text-active">{{ text.label }}</text>
+                    <block v-else>{{ text.label }}</block>
+                  </block>
+                </block>
+                <block v-else>
+                  {{ item[labelKey] }}
+                </block>
+              </wd-checkbox>
+            </view>
+          </wd-checkbox-group>
+        </view>
+        <!-- 单选 -->
+        <view v-if="type === 'radio' && !isArray(selectList)" id="wd-radio-group">
+          <wd-radio-group v-model="selectList" cell :size="selectSize" :checked-color="checkedColor" @change="handleChange">
+            <view v-for="(item, index) in filterColumns" :key="index" :id="'radio' + item[valueKey]">
+              <wd-radio :value="item[valueKey]" :disabled="item.disabled">
+                <block v-if="filterable && filterVal">
+                  <block v-for="text in item[labelKey]" :key="text.label">
+                    <text :class="`${text.type === 'active' ? 'wd-select-picker__text-active' : ''}`">{{ text.label }}</text>
+                  </block>
+                </block>
+                <block v-else>
+                  {{ item[labelKey] }}
+                </block>
+              </wd-radio>
+            </view>
+          </wd-radio-group>
+        </view>
+        <view v-if="loading" class="wd-select-picker__loading" @touchmove="noop">
+          <wd-loading :color="loadingColor" />
+        </view>
+      </scroll-view>
+      <!-- 确认按钮 -->
+      <view v-if="showConfirm" class="wd-select-picker__footer">
+        <wd-button block size="large" @click="onConfirm" :disabled="loading">{{ confirmButtonText || translate('confirm') }}</wd-button>
+      </view>
+    </wd-action-sheet>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-select-picker',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdActionSheet from '../wd-action-sheet/wd-action-sheet.vue'
+import wdCheckbox from '../wd-checkbox/wd-checkbox.vue'
+import wdCheckboxGroup from '../wd-checkbox-group/wd-checkbox-group.vue'
+import wdRadio from '../wd-radio/wd-radio.vue'
+import wdRadioGroup from '../wd-radio-group/wd-radio-group.vue'
+import wdButton from '../wd-button/wd-button.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+
+import { getCurrentInstance, onBeforeMount, ref, watch, nextTick, computed } from 'vue'
+import { useCell } from '../composables/useCell'
+import { getRect, isArray, isDef, isFunction, pause } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useTranslate } from '../composables/useTranslate'
+import { selectPickerProps, type SelectPickerExpose } from './types'
+
+const { translate } = useTranslate('select-picker')
+
+const props = defineProps(selectPickerProps)
+const emit = defineEmits(['change', 'cancel', 'confirm', 'clear', 'update:modelValue', 'open', 'close'])
+
+const pickerShow = ref<boolean>(false)
+const selectList = ref<Array<number | boolean | string> | number | boolean | string>([])
+const isConfirm = ref<boolean>(false)
+const lastSelectList = ref<Array<number | boolean | string> | number | boolean | string>([])
+const filterVal = ref<string>('')
+const filterColumns = ref<Array<Record<string, any>>>([])
+const scrollTop = ref<number>(0) // 滚动位置
+const cell = useCell()
+
+const showValue = computed(() => {
+  const value = valueFormat(props.modelValue)
+  let showValueTemp: string = ''
+
+  if (props.displayFormat) {
+    showValueTemp = props.displayFormat(value, props.columns)
+  } else {
+    const { type, labelKey } = props
+    if (type === 'checkbox') {
+      const selectedItems = (isArray(value) ? value : []).map((item) => {
+        return getSelectedItem(item)
+      })
+      showValueTemp = selectedItems
+        .map((item) => {
+          return item[labelKey]
+        })
+        .join(', ')
+    } else if (type === 'radio') {
+      const selectedItem = getSelectedItem(value as string | number | boolean)
+      showValueTemp = selectedItem[labelKey]
+    } else {
+      showValueTemp = value as string
+    }
+  }
+  return showValueTemp
+})
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (newValue === selectList.value) return
+    selectList.value = valueFormat(newValue)
+    lastSelectList.value = valueFormat(newValue)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.columns,
+  (newValue) => {
+    if (props.filterable && filterVal.value) {
+      formatFilterColumns(newValue, filterVal.value)
+    } else {
+      filterColumns.value = newValue
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.displayFormat,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of displayFormat must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.beforeConfirm,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforeConfirm must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+// 表单校验错误信息
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+onBeforeMount(() => {
+  selectList.value = valueFormat(props.modelValue)
+  filterColumns.value = props.columns
+})
+
+const { proxy } = getCurrentInstance() as any
+
+async function setScrollIntoView() {
+  let wraperSelector: string = ''
+  let selectorPromise: Promise<UniApp.NodeInfo>[] = []
+  if (isDef(selectList.value) && selectList.value !== '' && !isArray(selectList.value)) {
+    wraperSelector = '#wd-radio-group'
+    selectorPromise = [getRect(`#radio${selectList.value}`, false, proxy)]
+  } else if (isArray(selectList.value) && selectList.value.length > 0) {
+    selectList.value.forEach((value) => {
+      selectorPromise.push(getRect(`#check${value}`, false, proxy))
+    })
+    wraperSelector = '#wd-checkbox-group'
+  }
+  if (wraperSelector) {
+    await pause(2000 / 30)
+    Promise.all([getRect('.wd-select-picker__wrapper', false, proxy), getRect(wraperSelector, false, proxy), ...selectorPromise]).then((res) => {
+      if (isDef(res) && isArray(res)) {
+        const scrollView = res[0]
+        const wraper = res[1]
+        const target = res.slice(2) || []
+        if (isDef(wraper) && isDef(scrollView)) {
+          const index = target.findIndex((item) => {
+            return item.bottom! > scrollView.top! && item.top! < scrollView.bottom!
+          })
+          if (index < 0) {
+            scrollTop.value = -1
+            nextTick(() => {
+              scrollTop.value = Math.max(0, target[0].top! - wraper.top! - scrollView.height! / 2)
+            })
+          }
+        }
+      }
+    })
+  }
+}
+
+function noop() {}
+
+function getSelectedItem(value: string | number | boolean) {
+  const { valueKey, labelKey, columns } = props
+
+  const selecteds = columns.filter((item) => {
+    return item[valueKey] === value
+  })
+
+  if (selecteds.length > 0) {
+    return selecteds[0]
+  }
+
+  return {
+    [valueKey]: value,
+    [labelKey]: ''
+  }
+}
+
+function valueFormat(value: string | number | boolean | (string | number | boolean)[]) {
+  return props.type === 'checkbox' ? (isArray(value) ? value : []) : value
+}
+
+function handleChange({ value }: { value: string | number | boolean | (string | number | boolean)[] }) {
+  selectList.value = value
+  emit('change', { value })
+  if (props.type === 'radio' && !props.showConfirm) {
+    onConfirm()
+  }
+}
+
+function close() {
+  pickerShow.value = false
+  // 未确定选项时，数据还原复位
+  if (!isConfirm.value) {
+    selectList.value = valueFormat(lastSelectList.value)
+  }
+  emit('cancel')
+  emit('close')
+}
+
+function open() {
+  if (props.disabled || props.readonly) return
+  selectList.value = valueFormat(props.modelValue)
+  pickerShow.value = true
+  isConfirm.value = false
+  emit('open')
+}
+
+function onConfirm() {
+  if (props.loading) {
+    pickerShow.value = false
+    emit('confirm')
+    emit('close')
+    return
+  }
+  if (props.beforeConfirm) {
+    props.beforeConfirm(selectList.value, (isPass: boolean) => {
+      isPass && handleConfirm()
+    })
+  } else {
+    handleConfirm()
+  }
+}
+
+function handleConfirm() {
+  isConfirm.value = true
+  pickerShow.value = false
+  lastSelectList.value = valueFormat(selectList.value)
+  let selectedItems: Record<string, any> = {}
+  if (props.type === 'checkbox') {
+    selectedItems = (isArray(lastSelectList.value) ? lastSelectList.value : []).map((item) => {
+      return getSelectedItem(item)
+    })
+  } else {
+    selectedItems = getSelectedItem(lastSelectList.value as string | number | boolean)
+  }
+  emit('update:modelValue', lastSelectList.value)
+  emit('confirm', {
+    value: lastSelectList.value,
+    selectedItems
+  })
+  emit('close')
+}
+
+function getFilterText(label: string, filterVal: string) {
+  const reg = new RegExp(`(${filterVal})`, 'g')
+
+  return label.split(reg).map((text) => {
+    return {
+      type: text === filterVal ? 'active' : 'normal',
+      label: text
+    }
+  })
+}
+
+function handleFilterChange({ value }: { value: string }) {
+  if (value === '') {
+    filterColumns.value = []
+    filterVal.value = value
+    nextTick(() => {
+      filterColumns.value = props.columns
+    })
+  } else {
+    filterVal.value = value
+    formatFilterColumns(props.columns, value)
+  }
+}
+
+function formatFilterColumns(columns: Record<string, any>[], filterVal: string) {
+  const filterColumnsTemp = columns.filter((item) => {
+    return item[props.labelKey].indexOf(filterVal) > -1
+  })
+
+  const formatFilterColumns = filterColumnsTemp.map((item) => {
+    return {
+      ...item,
+      [props.labelKey]: getFilterText(item[props.labelKey], filterVal)
+    }
+  })
+  filterColumns.value = []
+  nextTick(() => {
+    filterColumns.value = formatFilterColumns
+  })
+}
+
+const showConfirm = computed(() => {
+  return (props.type === 'radio' && props.showConfirm) || props.type === 'checkbox'
+})
+
+// 是否展示清除按钮
+const showClear = computed(() => {
+  return props.clearable && !props.disabled && !props.readonly && showValue.value.length
+})
+
+function handleClear() {
+  emit('update:modelValue', props.type === 'checkbox' ? [] : '')
+  emit('clear')
+}
+
+// 是否展示箭头
+const showArrow = computed(() => {
+  return !props.disabled && !props.readonly && !showClear.value
+})
+
+defineExpose<SelectPickerExpose>({
+  close,
+  open
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar-item/index.scss b/src/uni_modules/wot-design-uni/components/wd-sidebar-item/index.scss
new file mode 100644
index 0000000..02fae7a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sidebar-item/index.scss
@@ -0,0 +1,96 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(sidebar-item) {
+    background: $-dark-background2;
+    color: $-dark-color;
+
+    &:active {
+      background-color: $-dark-background4;
+    }
+
+    @include m(active) {
+      background: $-dark-background;
+      color: $-sidebar-active-color;
+    }
+
+    @include m(disabled) {
+      color: $-dark-color-gray;
+  
+      &:active {
+        background-color: $-dark-background2;
+      }
+    }
+  }
+
+}
+
+@include b(sidebar-item) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 32rpx;
+  font-size: $-sidebar-font-size;
+  color: $-sidebar-color;
+  background: $-sidebar-bg;
+  min-height: $-sidebar-item-height;
+  box-sizing: border-box;
+  white-space: wrap;
+  line-height: $-sidebar-item-line-height;
+
+  &:active {
+    background-color: $-sidebar-hover-bg;
+  }
+
+  @include m(active) {
+    font-weight: 600;
+    background: $-sidebar-active-bg;
+    color: $-sidebar-active-color;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: $-sidebar-active-border-width;
+      height: $-sidebar-active-border-height;
+      background: $-sidebar-active-color;
+      transform: translateY(-50%);
+      content: '';
+      border-radius: $-sidebar-active-border-width;
+    }
+
+    &:active {
+      background-color: transparent;
+    }
+  }
+
+  @include m(prefix) {
+    border-bottom-right-radius: $-sidebar-border-radius;
+  }
+
+  @include m(suffix) {
+    border-top-right-radius: $-sidebar-border-radius;
+  }
+
+
+  @include m(disabled) {
+    color: $-sidebar-disabled-color;
+    cursor: not-allowed;
+
+    &:active {
+      background-color: $-sidebar-bg;
+    }
+  }
+
+  @include edeep(badge) {
+    z-index: 2;
+  }
+
+  @include edeep(icon) {
+    font-size: $-sidebar-icon-size;
+    margin-right: 2px;
+  }
+
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-sidebar-item/types.ts
new file mode 100644
index 0000000..a51419f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sidebar-item/types.ts
@@ -0,0 +1,31 @@
+import type { ExtractPropTypes, Prop, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+export const sidebarItemProps = {
+  ...baseProps,
+  /** 当前选项标题 */
+  label: makeRequiredProp(String),
+  /** 当前选项的值，唯一标识 */
+  value: makeRequiredProp([Number, String]),
+  /** 徽标显示值 */
+  badge: {
+    type: [String, Number, null] as PropType<string | number | null>,
+    default: null
+  },
+  /** 徽标属性，透传给 Badge 组件 */
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
+  /** 图标 */
+  icon: String,
+  /** 是否点状徽标 */
+  isDot: {
+    type: Boolean,
+    default: undefined
+  },
+  /** 徽标最大值 */
+  max: Number,
+  /** 是否禁用 */
+  disabled: makeBooleanProp(false)
+}
+
+export type SidebarItemProps = ExtractPropTypes<typeof sidebarItemProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue b/src/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue
new file mode 100644
index 0000000..f20fa52
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sidebar-item/wd-sidebar-item.vue
@@ -0,0 +1,116 @@
+<template>
+  <view
+    @click="handleClick"
+    :class="`wd-sidebar-item ${active ? 'wd-sidebar-item--active' : ''} ${prefix ? 'wd-sidebar-item--prefix' : ''}  ${
+      suffix ? 'wd-sidebar-item--suffix' : ''
+    } ${disabled ? 'wd-sidebar-item--disabled' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <slot name="icon"></slot>
+    <template v-if="!$slots.icon && icon">
+      <wd-icon custom-class="wd-sidebar-item__icon" :name="icon"></wd-icon>
+    </template>
+    <wd-badge v-bind="customBadgeProps" custom-class="wd-sidebar-item__badge">
+      {{ label }}
+    </wd-badge>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sidebar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdBadge from '../wd-badge/wd-badge.vue'
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { SIDEBAR_KEY } from '../wd-sidebar/types'
+import { sidebarItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
+
+const props = defineProps(sidebarItemProps)
+
+const { parent: sidebar } = useParent(SIDEBAR_KEY)
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.badge
+      },
+      isUndefined
+    )
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const active = computed(() => {
+  let active: boolean = false
+  if (sidebar && sidebar.props.modelValue === props.value) {
+    active = true
+  }
+  return active
+})
+
+const prefix = computed(() => {
+  let prefix: boolean = false
+  if (sidebar) {
+    let activeIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === sidebar.props.modelValue
+    })
+
+    let currentIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex - 1) {
+      prefix = true
+    }
+  }
+  return prefix
+})
+
+const suffix = computed(() => {
+  let suffix: boolean = false
+  if (sidebar) {
+    let activeIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === sidebar.props.modelValue
+    })
+
+    let currentIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex + 1) {
+      suffix = true
+    }
+  }
+  return suffix
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  sidebar && sidebar.setChange(props.value, props.label)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar/index.scss b/src/uni_modules/wot-design-uni/components/wd-sidebar/index.scss
new file mode 100644
index 0000000..2e268fa
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sidebar/index.scss
@@ -0,0 +1,25 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(sidebar) {
+    background: $-dark-background;
+    @include e(padding){
+      background: $-dark-background2;
+    }
+  }
+}
+
+@include b(sidebar) {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  width: $-sidebar-width;
+  height: $-sidebar-height;
+  background: $-color-white;
+  
+  @include e(padding){
+    flex: 1 1 auto;
+    background: $-sidebar-bg;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts b/src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts
new file mode 100644
index 0000000..5491953
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts
@@ -0,0 +1,47 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-01-05 18:03:27
+ * @LastEditTime: 2024-11-18 23:27:55
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-sidebar/types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey, type PropType } from 'vue'
+import { baseProps, makeNumericProp } from '../common/props'
+
+export type SidebarProvide = {
+  props: Partial<SidebarProps>
+  setChange: (value: number | string, label: string) => void
+}
+
+export const SIDEBAR_KEY: InjectionKey<SidebarProvide> = Symbol('wd-sidebar')
+
+/**
+ * Sidebar切换前的选项接口
+ */
+export type SidebarBeforeChangeOption = {
+  // 目标值
+  value: number | string
+  resolve: (pass: boolean) => void
+}
+
+/**
+ * Sidebar切换前的钩子函数类型
+ * @param option 切换选项
+ */
+export type SidebarBeforeChange = (option: SidebarBeforeChangeOption) => void
+
+export const sidebarProps = {
+  ...baseProps,
+  /**
+   * 当前导航项的索引
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SidebarBeforeChange>
+}
+
+export type SidebarProps = ExtractPropTypes<typeof sidebarProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue b/src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue
new file mode 100644
index 0000000..ff659f6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sidebar/wd-sidebar.vue
@@ -0,0 +1,63 @@
+<template>
+  <view :class="`wd-sidebar ${customClass}`" :style="customStyle">
+    <slot></slot>
+    <view class="wd-sidebar__padding"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sidebar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { isFunction } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { SIDEBAR_KEY, sidebarProps } from './types'
+
+const props = defineProps(sidebarProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const { linkChildren } = useChildren(SIDEBAR_KEY)
+linkChildren({ props, setChange })
+
+/**
+ * 子项状态变更
+ * @param value 目标值
+ * @param label 目标值标题
+ */
+function setChange(value: number | string, label: string) {
+  if (isFunction(props.beforeChange)) {
+    props.beforeChange({
+      value: value,
+      resolve: (pass: boolean) => {
+        if (pass) {
+          updateValue(value, label)
+        }
+      }
+    })
+  } else {
+    updateValue(value, label)
+  }
+}
+
+/**
+ * 更新选中状态
+ * @param value 目标值
+ * @param label 目标值标题
+ */
+function updateValue(value: number | string, label: string) {
+  emit('update:modelValue', value)
+  emit('change', { value, label })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-signature/index.scss b/src/uni_modules/wot-design-uni/components/wd-signature/index.scss
new file mode 100644
index 0000000..e8259bb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-signature/index.scss
@@ -0,0 +1,31 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(signature) {
+  @include e(content) {
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    overflow: hidden;
+    background: $-signature-bg;
+    border-radius: $-signature-radius;
+    border: $-signature-border;
+  }
+
+  @include e(content-canvas) {
+    width: 100%;
+  }
+
+
+  @include e(footer) {
+    margin-top: $-signature-footer-margin-top;
+    justify-content: flex-end;
+    display: flex;
+
+    :deep(){
+      .wd-button{
+        margin-left: $-signature-button-margin-left;
+      }
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-signature/types.ts b/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
new file mode 100644
index 0000000..39336e1
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
@@ -0,0 +1,263 @@
+/*
+ * @Author: 810505339
+ * @Date: 2025-01-10 20:03:57
+ * @LastEditors: weisheng
+ * @LastEditTime: 2025-03-23 16:35:14
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-signature/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { baseProps, numericProp } from '../common/props'
+
+export const signatureProps = {
+  ...baseProps,
+  /**
+   * 签名笔颜色
+   * 类型：string
+   * 默认值：#000
+   */
+  penColor: {
+    type: String,
+    default: '#000'
+  },
+  /**
+   * 签名笔宽度
+   * 类型：number
+   * 默认值：3
+   */
+  lineWidth: {
+    type: Number,
+    default: 3
+  },
+  /**
+   * 清空按钮的文本
+   * 类型：string
+   */
+  clearText: String,
+  /**
+   * 撤回按钮的文本
+   * 类型：string
+   */
+  revokeText: String,
+  /**
+   * 恢复按钮的文本
+   * 类型：string
+   */
+  restoreText: String,
+  /**
+   * 确认按钮的文本
+   * 类型：string
+   */
+  confirmText: String,
+  /**
+   * 目标文件的类型
+   * 类型：string
+   * 默认值：png
+   */
+  fileType: {
+    type: String,
+    default: 'png'
+  },
+  /**
+   * 目标文件的质量
+   * 类型：number
+   * 默认值：1
+   */
+  quality: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 导出图片的缩放比例
+   * 类型：number
+   * 默认值：1
+   */
+  exportScale: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 是否禁用签名板
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 画布的高度
+   * 类型：number
+   */
+  height: numericProp,
+  /**
+   * 画布的宽度
+   * 类型：number
+   */
+  width: numericProp,
+  /**
+   * 画板的背景色
+   * 类型：string
+   */
+  backgroundColor: String,
+  /**
+   * 是否禁用画布滚动
+   * 类型：boolean
+   * 默认值：true
+   */
+  disableScroll: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * 是否开启历史记录
+   * 类型：boolean
+   * 默认值：false
+   */
+  enableHistory: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 撤回和恢复的步长
+   * 类型：number
+   * 默认值：1
+   */
+  step: {
+    type: Number,
+    default: 1
+  },
+  /**
+   * 撤回按钮的文本
+   * 类型：string
+   * 默认值：撤销
+   */
+  undoText: String,
+  /**
+   * 恢复按钮的文本
+   * 类型：string
+   * 默认值：恢复
+   */
+  redoText: String,
+  /**
+   * 是否启用压感模式(笔锋)
+   * 类型：boolean
+   * 默认值：false
+   */
+  pressure: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 压感模式下笔画最小宽度
+   * 类型：number
+   * 默认值：2
+   */
+  minWidth: {
+    type: Number,
+    default: 2
+  },
+  /**
+   * 压感模式下笔画最大宽度
+   * 类型：number
+   * 默认值：6
+   */
+  maxWidth: {
+    type: Number,
+    default: 6
+  },
+  /**
+   * 最小速度阈值，影响压感模式下的笔画宽度变化
+   * 类型：number
+   * 默认值：1.5
+   */
+  minSpeed: {
+    type: Number,
+    default: 1.5
+  }
+}
+
+/**
+ * 签名结果类型
+ * @property tempFilePath - 生成图片的临时路径
+ * @property success - 是否成功生成图片
+ * @property width - 生成图片的宽度
+ * @property height - 生成图片的高度
+ */
+export type SignatureResult = {
+  tempFilePath: string
+  success: boolean
+  width: number
+  height: number
+}
+
+/**
+ * 签名线条类型
+ * @property points - 线条所包含的所有点的数组
+ * @property color - 线条颜色
+ * @property width - 线条宽度
+ * @property backgroundColor - 线条背景色 (可选)
+ * @property isPressure - 是否为笔锋模式的线条 (可选)
+ */
+export interface Line {
+  points: Point[]
+  color: string
+  width: number
+  backgroundColor?: string
+  isPressure?: boolean
+}
+
+/**
+ * 签名点位类型
+ * @property x - 点的横坐标
+ * @property y - 点的纵坐标
+ * @property t - 点的时间戳
+ * @property speed - 当前点的绘制速度 (可选)
+ * @property distance - 与上一个点的距离 (可选)
+ * @property lineWidth - 当前点的线宽 (可选，用于笔锋模式)
+ * @property lastX1 - 贝塞尔曲线第一个控制点的x坐标 (可选)
+ * @property lastY1 - 贝塞尔曲线第一个控制点的y坐标 (可选)
+ * @property lastX2 - 贝塞尔曲线第二个控制点的x坐标 (可选)
+ * @property lastY2 - 贝塞尔曲线第二个控制点的y坐标 (可选)
+ * @property isFirstPoint - 是否为线条的第一个点 (可选)
+ */
+export interface Point {
+  x: number
+  y: number
+  t: number
+  speed?: number
+  distance?: number
+  lineWidth?: number
+  lastX1?: number
+  lastY1?: number
+  lastX2?: number
+  lastY2?: number
+  isFirstPoint?: boolean
+}
+
+/**
+ * 签名组件暴露的方法类型
+ * @property init - 初始化签名板
+ * @property clear - 清除签名
+ * @property confirm - 确认签名并生成图片
+ * @property restore - 恢复上一步操作
+ * @property revoke - 撤销上一步操作
+ */
+export type SignatureExpose = {
+  /** 初始化签名板
+   * @param forceUpdate - 是否强制更新
+   */
+  init: (forceUpdate?: boolean) => void
+  /** 点击清除按钮清除签名 */
+  clear: () => void
+  /** 点击确定按钮 */
+  confirm: () => void
+  /* 点击恢复 */
+  restore: () => void
+  /* 点击撤回 */
+  revoke: () => void
+}
+
+export type SignatureProps = ExtractPropTypes<typeof signatureProps>
+
+export type SignatureInstance = ComponentPublicInstance<SignatureExpose, SignatureProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue b/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
new file mode 100644
index 0000000..79f8dcd
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-signature/wd-signature.vue
@@ -0,0 +1,591 @@
+<template>
+  <view class="wd-signature">
+    <view class="wd-signature__content">
+      <!-- #ifdef MP-WEIXIN -->
+      <canvas
+        class="wd-signature__content-canvas"
+        :style="canvasStyle"
+        :width="canvasState.canvasWidth"
+        :height="canvasState.canvasHeight"
+        :canvas-id="canvasId"
+        :id="canvasId"
+        :disable-scroll="disableScroll"
+        @touchstart="startDrawing"
+        @touchend="stopDrawing"
+        @touchmove="draw"
+        type="2d"
+      />
+      <!-- #endif  -->
+      <!-- #ifndef MP-WEIXIN -->
+      <canvas
+        class="wd-signature__content-canvas"
+        :canvas-id="canvasId"
+        :style="canvasStyle"
+        :width="canvasState.canvasWidth"
+        :height="canvasState.canvasHeight"
+        :id="canvasId"
+        :disable-scroll="disableScroll"
+        @touchstart="startDrawing"
+        @touchend="stopDrawing"
+        @touchmove="draw"
+      />
+      <!-- #endif  -->
+    </view>
+    <view class="wd-signature__footer">
+      <slot
+        name="footer"
+        :clear="clear"
+        :confirm="confirmSignature"
+        :current-step="currentStep"
+        :revoke="revoke"
+        :restore="restore"
+        :can-undo="lines.length > 0"
+        :can-redo="redoLines.length > 0"
+        :history-list="lines"
+      >
+        <block v-if="enableHistory">
+          <wd-button size="small" plain @click="revoke" :disabled="lines.length <= 0">
+            {{ revokeText || translate('revokeText') }}
+          </wd-button>
+          <wd-button size="small" plain @click="restore" :disabled="redoLines.length <= 0">
+            {{ restoreText || translate('restoreText') }}
+          </wd-button>
+        </block>
+        <wd-button size="small" plain @click="clear">{{ clearText || translate('clearText') }}</wd-button>
+        <wd-button size="small" @click="confirmSignature">{{ confirmText || translate('confirmText') }}</wd-button>
+      </slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-signature',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onBeforeMount, onMounted, reactive, ref, watch, type CSSProperties } from 'vue'
+import { addUnit, getRect, isDef, objToStyle, uuid } from '../common/util'
+import { signatureProps, type SignatureExpose, type SignatureResult, type Point, type Line } from './types'
+import { useTranslate } from '../composables/useTranslate'
+// #ifdef MP-WEIXIN
+import { canvas2dAdapter } from '../common/canvasHelper'
+// #endif
+
+const props = defineProps(signatureProps)
+const emit = defineEmits(['start', 'end', 'signing', 'confirm', 'clear'])
+const { translate } = useTranslate('signature')
+const { proxy } = getCurrentInstance() as any
+const canvasId = ref<string>(`signature${uuid()}`) // canvas 组件的唯一标识符
+let canvas: null = null //canvas对象 微信小程序生成图片必须传入
+const drawing = ref<boolean>(false) // 是否正在绘制
+const pixelRatio = ref<number>(1) // 像素比
+
+const canvasState = reactive({
+  canvasWidth: 0,
+  canvasHeight: 0,
+  ctx: null as UniApp.CanvasContext | null // canvas上下文
+})
+
+watch(
+  () => props.penColor,
+  () => {
+    setLine()
+  }
+)
+
+watch(
+  () => props.lineWidth,
+  () => {
+    setLine()
+  }
+)
+
+const canvasStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.width)) {
+    style.width = addUnit(props.width)
+  }
+
+  if (isDef(props.height)) {
+    style.height = addUnit(props.height)
+  }
+
+  return `${objToStyle(style)}`
+})
+
+const disableScroll = computed(() => props.disableScroll)
+const enableHistory = computed(() => props.enableHistory)
+
+const lines = ref<Line[]>([]) // 保存所有线条
+const redoLines = ref<Line[]>([]) // 保存撤销的线条
+const currentLine = ref<Line>() // 当前正在绘制的线
+const currentStep = ref(0) // 当前步骤
+
+// 添加计算笔画宽度的方法
+function calculateLineWidth(speed: number): number {
+  if (!props.pressure) return props.lineWidth
+
+  const minSpeed = props.minSpeed || 1.5
+  const limitedSpeed = Math.min(minSpeed * 10, Math.max(minSpeed, speed))
+  const addWidth = ((props.maxWidth - props.minWidth) * (limitedSpeed - minSpeed)) / minSpeed
+  const lineWidth = Math.max(props.maxWidth - addWidth, props.minWidth)
+  return Math.min(lineWidth, props.maxWidth)
+}
+
+/* 获取默认笔画宽度 */
+const getDefaultLineWidth = () => {
+  if (props.pressure) {
+    // 在压感模式下，使用最大和最小宽度的平均值作为默认值
+    return (props.maxWidth + props.minWidth) / 2
+  }
+  return props.lineWidth
+}
+
+/* 开始画线 */
+const startDrawing = (e: any) => {
+  e.preventDefault()
+  drawing.value = true
+  setLine()
+  emit('start', e)
+
+  // 创建新线条，同时保存当前的所有绘制参数
+  const { x, y } = e.touches[0]
+  currentLine.value = {
+    points: [
+      {
+        x,
+        y,
+        t: Date.now() // 使用 t 替换 width
+      }
+    ],
+    color: props.penColor,
+    width: getDefaultLineWidth(),
+    backgroundColor: props.backgroundColor,
+    isPressure: props.pressure // 添加笔锋模式标记
+  }
+
+  // 清空重做记录
+  redoLines.value = []
+  draw(e)
+}
+
+/* 结束画线 */
+const stopDrawing = (e: TouchEvent) => {
+  e.preventDefault()
+  drawing.value = false
+  if (currentLine.value) {
+    // 保存完整的线条信息，包括所有点的参数
+    lines.value.push({
+      ...currentLine.value,
+      points: currentLine.value.points.map((point) => ({
+        ...point,
+        t: point.t,
+        speed: point.speed,
+        distance: point.distance,
+        lineWidth: point.lineWidth,
+        lastX1: point.lastX1,
+        lastY1: point.lastY1,
+        lastX2: point.lastX2,
+        lastY2: point.lastY2,
+        isFirstPoint: point.isFirstPoint
+      }))
+    })
+    currentStep.value = lines.value.length
+  }
+  currentLine.value = undefined
+  const { ctx } = canvasState
+  if (ctx) ctx.beginPath()
+  emit('end', e)
+}
+
+/**
+ * 初始化 canvas
+ * @param forceUpdate 是否强制更新
+ */
+const initCanvas = (forceUpdate: boolean = false) => {
+  // 如果不是强制更新，且已经初始化过 canvas，则不再重复初始化
+  if (!forceUpdate && canvasState.canvasHeight && canvasState.canvasWidth) {
+    return
+  }
+  getContext().then(() => {
+    const { ctx } = canvasState
+    if (ctx && isDef(props.backgroundColor)) {
+      ctx.setFillStyle(props.backgroundColor)
+      ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
+      ctx.draw()
+    }
+  })
+}
+
+// 清空 canvas
+const clear = () => {
+  lines.value = []
+  redoLines.value = []
+  currentStep.value = 0
+  clearCanvas()
+  emit('clear')
+}
+
+// 确认签名
+const confirmSignature = () => {
+  canvasToImage()
+}
+
+//canvas划线
+const draw = (e: any) => {
+  e.preventDefault()
+  const { ctx } = canvasState
+
+  if (!drawing.value || props.disabled || !ctx) return
+  const { x, y } = e.touches[0]
+
+  const point: Point = {
+    x,
+    y,
+    t: Date.now()
+  }
+
+  if (currentLine.value) {
+    const points = currentLine.value.points
+    const prePoint = points[points.length - 1]
+
+    if (prePoint.t === point.t || (prePoint.x === x && prePoint.y === y)) {
+      return
+    }
+
+    // 计算点的速度和距离
+    point.distance = Math.sqrt(Math.pow(point.x - prePoint.x, 2) + Math.pow(point.y - prePoint.y, 2))
+    point.speed = point.distance / (point.t - prePoint.t || 0.1)
+
+    if (props.pressure) {
+      point.lineWidth = calculateLineWidth(point.speed)
+      // 处理线宽变化率限制
+      if (points.length >= 2) {
+        const prePoint2 = points[points.length - 2]
+        if (prePoint2.lineWidth && prePoint.lineWidth) {
+          const rate = (point.lineWidth - prePoint.lineWidth) / prePoint.lineWidth
+          const maxRate = 0.2 // 最大变化率20%
+          if (Math.abs(rate) > maxRate) {
+            const per = rate > 0 ? maxRate : -maxRate
+            point.lineWidth = prePoint.lineWidth * (1 + per)
+          }
+        }
+      }
+    }
+
+    points.push(point)
+
+    // 非笔锋模式直接使用线段连接
+    if (!props.pressure) {
+      ctx.beginPath()
+      ctx.moveTo(prePoint.x, prePoint.y)
+      ctx.lineTo(point.x, point.y)
+      ctx.stroke()
+      ctx.draw(true)
+    } else if (points.length >= 2) {
+      // 笔锋模式使用贝塞尔曲线
+      drawSmoothLine(prePoint, point)
+    }
+  }
+
+  emit('signing', e)
+}
+
+/* 重绘整个画布 */
+const redrawCanvas = () => {
+  const { ctx } = canvasState
+  if (!ctx) return
+
+  // 清除画布并设置背景
+  if (isDef(props.backgroundColor)) {
+    ctx.setFillStyle(props.backgroundColor)
+    ctx.fillRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
+  } else {
+    ctx.clearRect(0, 0, canvasState.canvasWidth, canvasState.canvasHeight)
+  }
+
+  // 如果没有线条，只需要清空画布
+  if (lines.value.length === 0) {
+    ctx.draw()
+    return
+  }
+
+  // 收集所有绘制操作，最后一次性 draw
+  lines.value.forEach((line) => {
+    if (!line.points.length) return
+
+    ctx.setStrokeStyle(line.color)
+    ctx.setLineJoin('round')
+    ctx.setLineCap('round')
+
+    if (line.isPressure && props.pressure) {
+      // 笔锋模式的重绘
+      line.points.forEach((point, index) => {
+        if (index === 0) return
+        const prePoint = line.points[index - 1]
+        const dis_x = point.x - prePoint.x
+        const dis_y = point.y - prePoint.y
+        const distance = Math.sqrt(dis_x * dis_x + dis_y * dis_y)
+
+        if (distance <= 2) {
+          point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5
+          point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5
+        } else {
+          const speed = point.speed || 0
+          const minSpeed = props.minSpeed || 1.5
+          const speedFactor = Math.max(0.1, Math.min(0.9, speed / (minSpeed * 10)))
+
+          point.lastX1 = prePoint.x + dis_x * (0.2 + speedFactor * 0.3)
+          point.lastY1 = prePoint.y + dis_y * (0.2 + speedFactor * 0.3)
+          point.lastX2 = prePoint.x + dis_x * (0.8 - speedFactor * 0.3)
+          point.lastY2 = prePoint.y + dis_y * (0.8 - speedFactor * 0.3)
+        }
+
+        const lineWidth = point.lineWidth || line.width
+        if (typeof prePoint.lastX1 === 'number') {
+          ctx.setLineWidth(lineWidth)
+          ctx.beginPath()
+          ctx.moveTo(prePoint.lastX2!, prePoint.lastY2!)
+          ctx.quadraticCurveTo(prePoint.x, prePoint.y, point.lastX1, point.lastY1)
+          ctx.stroke()
+
+          if (!prePoint.isFirstPoint) {
+            ctx.beginPath()
+            ctx.moveTo(prePoint.lastX1!, prePoint.lastY1!)
+            ctx.quadraticCurveTo(prePoint.x, prePoint.y, prePoint.lastX2!, prePoint.lastY2!)
+            ctx.stroke()
+          }
+        } else {
+          point.isFirstPoint = true
+        }
+      })
+    } else {
+      // 非笔锋模式的重绘
+      ctx.setLineWidth(line.width)
+      line.points.forEach((point, index) => {
+        if (index === 0) return
+        const prePoint = line.points[index - 1]
+        ctx.beginPath()
+        ctx.moveTo(prePoint.x, prePoint.y)
+        ctx.lineTo(point.x, point.y)
+        ctx.stroke()
+      })
+    }
+  })
+
+  // 所有线条绘制完成后，一次性更新画布
+  ctx.draw()
+}
+
+// 修改撤销功能
+const revoke = () => {
+  if (!lines.value.length) return
+  const step = Math.min(props.step, lines.value.length)
+  const removedLines = lines.value.splice(lines.value.length - step)
+  redoLines.value.push(...removedLines)
+  currentStep.value = Math.max(0, currentStep.value - step)
+  redrawCanvas()
+}
+
+// 修改恢复功能
+const restore = () => {
+  if (!redoLines.value.length) return
+  const step = Math.min(props.step, redoLines.value.length)
+  const restoredLines = redoLines.value.splice(redoLines.value.length - step)
+  lines.value.push(...restoredLines)
+  currentStep.value = Math.min(lines.value.length, currentStep.value + step)
+  redrawCanvas()
+}
+
+// 添加平滑线条绘制方法
+function drawSmoothLine(prePoint: Point, point: Point) {
+  const { ctx } = canvasState
+  if (!ctx) return
+
+  // 计算两点间距离
+  const dis_x = point.x - prePoint.x
+  const dis_y = point.y - prePoint.y
+  const distance = Math.sqrt(dis_x * dis_x + dis_y * dis_y)
+
+  if (distance <= 2) {
+    // 对于非常近的点，直接使用中点
+    point.lastX1 = point.lastX2 = prePoint.x + dis_x * 0.5
+    point.lastY1 = point.lastY2 = prePoint.y + dis_y * 0.5
+  } else {
+    // 根据点的速度计算控制点的偏移程度
+    const speed = point.speed || 0
+    const minSpeed = props.minSpeed || 1.5
+    const speedFactor = Math.max(0.1, Math.min(0.9, speed / (minSpeed * 10)))
+
+    // 计算控制点
+    point.lastX1 = prePoint.x + dis_x * (0.2 + speedFactor * 0.3)
+    point.lastY1 = prePoint.y + dis_y * (0.2 + speedFactor * 0.3)
+    point.lastX2 = prePoint.x + dis_x * (0.8 - speedFactor * 0.3)
+    point.lastY2 = prePoint.y + dis_y * (0.8 - speedFactor * 0.3)
+  }
+
+  // 计算线宽
+  const lineWidth = point.lineWidth || props.lineWidth
+
+  // 绘制贝塞尔曲线
+  if (typeof prePoint.lastX1 === 'number') {
+    // 设置线宽
+    ctx.setLineWidth(lineWidth)
+    // 绘制第一段曲线
+    ctx.beginPath()
+    ctx.moveTo(prePoint.lastX2!, prePoint.lastY2!)
+    ctx.quadraticCurveTo(prePoint.x, prePoint.y, point.lastX1, point.lastY1)
+    ctx.stroke()
+
+    if (!prePoint.isFirstPoint) {
+      // 绘制连接段曲线
+      ctx.beginPath()
+      ctx.moveTo(prePoint.lastX1!, prePoint.lastY1!)
+      ctx.quadraticCurveTo(prePoint.x, prePoint.y, prePoint.lastX2!, prePoint.lastY2!)
+      ctx.stroke()
+    }
+
+    // 批量更新绘制内容
+    ctx.draw(true)
+  } else {
+    point.isFirstPoint = true
+  }
+}
+
+onMounted(() => {
+  initCanvas()
+})
+
+onBeforeMount(() => {
+  // #ifdef MP
+  pixelRatio.value = uni.getSystemInfoSync().pixelRatio
+  // #endif
+})
+
+/**
+ * 获取canvas上下文
+ */
+function getContext() {
+  return new Promise<UniApp.CanvasContext>((resolve) => {
+    const { ctx } = canvasState
+
+    if (ctx) {
+      return resolve(ctx)
+    }
+    // #ifndef MP-WEIXIN
+    getRect(`#${canvasId.value}`, false, proxy).then((canvasRect) => {
+      setcanvasState(canvasRect.width!, canvasRect.height!)
+      canvasState.ctx = uni.createCanvasContext(canvasId.value, proxy)
+      if (canvasState.ctx) {
+        canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
+      }
+      resolve(canvasState.ctx)
+    })
+    // #endif
+    // #ifdef MP-WEIXIN
+
+    getRect(`#${canvasId.value}`, false, proxy, true).then((canvasRect: any) => {
+      if (canvasRect && canvasRect.node && canvasRect.width && canvasRect.height) {
+        const canvasInstance = canvasRect.node
+        canvasState.ctx = canvas2dAdapter(canvasInstance.getContext('2d') as CanvasRenderingContext2D)
+        canvasInstance.width = canvasRect.width * pixelRatio.value
+        canvasInstance.height = canvasRect.height * pixelRatio.value
+        canvasState.ctx.scale(pixelRatio.value, pixelRatio.value)
+        canvas = canvasInstance
+        setcanvasState(canvasRect.width, canvasRect.height)
+        resolve(canvasState.ctx)
+      }
+    })
+    // #endif
+  })
+}
+
+/**
+ * 设置 canvasState
+ */
+function setcanvasState(width: number, height: number) {
+  canvasState.canvasHeight = height * pixelRatio.value
+  canvasState.canvasWidth = width * pixelRatio.value
+}
+
+/* 设置线段 */
+function setLine() {
+  const { ctx } = canvasState
+  if (ctx) {
+    ctx.setLineWidth(getDefaultLineWidth()) // 使用新的默认宽度
+    ctx.setStrokeStyle(props.penColor)
+    ctx.setLineJoin('round')
+    ctx.setLineCap('round')
+  }
+}
+
+/**
+ *  canvas 绘制图片输出成文件类型
+ */
+function canvasToImage() {
+  const { fileType, quality, exportScale } = props
+  const { canvasWidth, canvasHeight } = canvasState
+  uni.canvasToTempFilePath(
+    {
+      width: canvasWidth * exportScale,
+      height: canvasHeight * exportScale,
+      destWidth: canvasWidth * exportScale,
+      destHeight: canvasHeight * exportScale,
+      fileType,
+      quality,
+      canvasId: canvasId.value,
+      canvas: canvas,
+      success: (res) => {
+        const result: SignatureResult = {
+          tempFilePath: res.tempFilePath,
+          width: (canvasWidth * exportScale) / pixelRatio.value,
+          height: (canvasHeight * exportScale) / pixelRatio.value,
+          success: true
+        }
+        // #ifdef MP-DINGTALK
+        result.tempFilePath = (res as any).filePath
+        // #endif
+        emit('confirm', result)
+      },
+      fail: () => {
+        const result: SignatureResult = {
+          tempFilePath: '',
+          width: (canvasWidth * exportScale) / pixelRatio.value,
+          height: (canvasHeight * exportScale) / pixelRatio.value,
+          success: false
+        }
+        emit('confirm', result)
+      }
+    },
+    proxy
+  )
+}
+
+function clearCanvas() {
+  const { canvasWidth, canvasHeight, ctx } = canvasState
+  if (ctx) {
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+    if (isDef(props.backgroundColor)) {
+      ctx.setFillStyle(props.backgroundColor)
+      ctx.fillRect(0, 0, canvasWidth, canvasHeight)
+    }
+    ctx.draw()
+  }
+}
+
+defineExpose<SignatureExpose>({
+  init: initCanvas,
+  clear,
+  confirm: confirmSignature,
+  restore,
+  revoke
+})
+</script>
+<style scoped lang="scss">
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-skeleton/index.scss b/src/uni_modules/wot-design-uni/components/wd-skeleton/index.scss
new file mode 100644
index 0000000..6c0f25c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-skeleton/index.scss
@@ -0,0 +1,96 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(skeleton) {
+    @include e(col) {
+      background-color: $-dark-background4;
+    }
+  }
+}
+@include b(skeleton) {
+  box-sizing: border-box;
+
+  @include e(row) {
+    justify-content: space-between;
+    margin-bottom: $-skeleton-row-margin-bottom;
+    display: flex;
+    align-items: center;
+
+    &:only-child,
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+  @include e(col) {
+    border-radius: $-skeleton-border-radius-text;
+    background-color: $-skeleton-background-color;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &:first-child:last-child,
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+  @include m(type) {
+    &-text {
+      width: 100%;
+      height: $-skeleton-text-height-default;
+      border-radius: $-skeleton-border-radius-text;
+    }
+
+    &-rect {
+      width: 100%;
+      height: $-skeleton-rect-height-default;
+      border-radius: $-skeleton-border-radius-rect;
+    }
+
+    &-circle {
+      flex-shrink: 0;
+      width: $-skeleton-circle-height-default;
+      height: $-skeleton-circle-height-default;
+      border-radius: $-skeleton-border-radius-circle;
+    }
+  }
+  @include m(animation) {
+    &-gradient {
+      position: relative;
+      overflow-x: hidden;
+
+      &::after {
+        content: ' ';
+        position: absolute;
+        animation: wd-skeleton-gradient 1.5s linear 2s infinite;
+        background: linear-gradient(90deg, rgba(255, 255, 255, 0), $-skeleton-animation-gradient, rgba(255, 255, 255, 0));
+        inset: 0;
+      }
+    }
+
+    &-flashed {
+      animation: wd-skeleton-flashed 2s linear 2s infinite;
+    }
+  }
+
+  @keyframes wd-skeleton-gradient {
+    0% {
+      transform: translateX(-100%) skewX(-15deg);
+    }
+    100% {
+      transform: translateX(100%) skewX(-15deg);
+    }
+  }
+  @keyframes wd-skeleton-flashed {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.3;
+      background-color: $-skeleton-animation-flashed;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-skeleton/index.ts b/src/uni_modules/wot-design-uni/components/wd-skeleton/index.ts
new file mode 100644
index 0000000..43e0049
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-skeleton/index.ts
@@ -0,0 +1 @@
+export type { SkeletonThemeVars } from './types'
diff --git a/src/uni_modules/wot-design-uni/components/wd-skeleton/types.ts b/src/uni_modules/wot-design-uni/components/wd-skeleton/types.ts
new file mode 100644
index 0000000..5effc14
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-skeleton/types.ts
@@ -0,0 +1,69 @@
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'
+import { makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type SkeletonTheme = 'text' | 'avatar' | 'paragraph' | 'image'
+export type SkeletonAnimation = 'gradient' | 'flashed'
+export type SkeletonRowColObj = {
+  [key: string]: any
+  type?: 'rect' | 'circle' | 'text'
+  size?: string | number
+  width?: string | number
+  height?: string | number
+  margin?: string | number
+  background?: string
+  marginLeft?: string | number
+  marginRight?: string | number
+  borderRadius?: string | number
+  backgroundColor?: string
+}
+export type SkeletonRowCol = number | SkeletonRowColObj | Array<SkeletonRowColObj>
+export type SkeletonThemeVars = {
+  notifyPadding?: string
+  notifyFontSize?: string
+  notifyTextColor?: string
+  notifyLineHeight?: number | string
+  notifyDangerBackground?: string
+  notifyPrimaryBackground?: string
+  notifySuccessBackground?: string
+  notifyWarningBackground?: string
+}
+export const skeletonProps = {
+  /**
+   * 骨架图风格，有基础、头像组合等两大类
+   */
+  theme: makeStringProp<SkeletonTheme>('text'),
+  /**
+   * 用于设置行列数量、宽度高度、间距等。
+   * @example
+   * 【示例一】，`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。
+   * 【示例二】，`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。
+   * 【示例三】，`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距
+   */
+  rowCol: makeArrayProp<SkeletonRowCol>(),
+  /**
+   * 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容
+   * @default true
+   */
+  loading: makeBooleanProp(true),
+  /**
+   * 动画效果，有「渐变加载动画」和「闪烁加载动画」两种。值为空则表示没有动画
+   */
+  animation: {
+    type: String as PropType<SkeletonAnimation>,
+    default: ''
+  },
+  // 自定义类名
+  customClass: {
+    type: [String, Array, Object],
+    default: ''
+  },
+  // 自定义样式
+  customStyle: {
+    type: Object as PropType<CSSProperties>,
+    default() {
+      return {}
+    }
+  }
+}
+
+export type SkeletonProps = ExtractPropTypes<typeof skeletonProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue b/src/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue
new file mode 100644
index 0000000..68ec6cc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue
@@ -0,0 +1,119 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-04-01 20:24:22
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue
+ * 记得注释
+-->
+<template>
+  <view :class="`wd-skeleton ${customClass}`" :style="customStyle">
+    <view class="wd-skeleton__content" v-if="show">
+      <view class="wd-skeleton__row" v-for="(row, index) of parsedRowCols" :key="`row-${index}`">
+        <view v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style" />
+      </view>
+    </view>
+    <view v-else>
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  // #ifdef H5
+  name: 'wd-skeleton',
+  // #endif
+  options: { virtualHost: true, addGlobalClass: true, styleIsolation: 'shared' }
+}
+</script>
+
+<script lang="ts" setup>
+import type { CSSProperties } from 'vue'
+import { ref, computed, watch } from 'vue'
+import type { SkeletonRowCol, SkeletonRowColObj } from './types'
+import { skeletonProps } from './types'
+import { isNumber, addUnit } from '../common/util'
+
+const themeMap = {
+  avatar: [{ type: 'circle', height: '64px', width: '64px' }],
+  image: [{ type: 'rect', height: '64px', width: '64px' }],
+  text: [
+    1,
+    [
+      { width: '24%', height: '16px', marginRight: '16px' },
+      { width: '76%', height: '16px' }
+    ]
+  ],
+  paragraph: [1, 1, 1, { width: '55%' }]
+}
+const props = defineProps(skeletonProps)
+const rowCols = ref<SkeletonRowCol[]>([])
+
+const parsedRowCols = computed(() => {
+  return rowCols.value.map((item) => {
+    if (isNumber(item)) {
+      return [
+        {
+          class: getColItemClass({ type: 'text' }),
+          style: {}
+        }
+      ]
+    }
+    if (Array.isArray(item)) {
+      return item.map((col) => {
+        return {
+          ...col,
+          class: getColItemClass(col),
+          style: getColItemStyle(col)
+        }
+      })
+    }
+    const nItem = item as SkeletonRowColObj
+
+    return [
+      {
+        ...nItem,
+        class: getColItemClass(nItem),
+        style: getColItemStyle(nItem)
+      }
+    ]
+  })
+})
+
+function getColItemClass(rowCol: SkeletonRowColObj) {
+  return ['wd-skeleton__col', `wd-skeleton--type-${rowCol.type || 'text'}`, { [`wd-skeleton--animation-${props.animation}`]: props.animation }]
+}
+function getColItemStyle(rowCol: SkeletonRowColObj) {
+  const style: CSSProperties = {}
+  const styleName = ['size', 'width', 'height', 'margin', 'background', 'marginLeft', 'marginRight', 'borderRadius', 'backgroundColor']
+
+  for (const name of styleName) {
+    if (Object.prototype.hasOwnProperty.call(rowCol, name)) {
+      const px = addUnit(rowCol[name])
+
+      if (name === 'size') {
+        style.width = px
+        style.height = px
+      } else {
+        ;(style as any)[name] = px
+      }
+    }
+  }
+  return style
+}
+
+watch(
+  () => props.rowCol,
+  (rowCol) => {
+    rowCols.value = [...(Array.isArray(rowCol) && rowCol.length ? props.rowCol : themeMap[props.theme])]
+  },
+  { immediate: true }
+)
+
+const show = computed(() => props.loading == undefined || props.loading === true)
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-slider/index.scss b/src/uni_modules/wot-design-uni/components/wd-slider/index.scss
new file mode 100644
index 0000000..c6b3e4a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-slider/index.scss
@@ -0,0 +1,92 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(slider) {
+    @include e(label-min, label-max) {
+      color: $-dark-color;
+    }
+
+    @include e(label) {
+      color: $-dark-color;
+      background-color: rgba($color: $-dark-background2, $alpha: 0.5);
+    }
+
+    @include m(disabled) {
+      @include me(label-min, label-max) {
+        color: $-dark-color-gray;
+      }
+    }
+  }
+}
+
+
+@include b(slider) {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  height: calc($-slider-handle-radius * 3);
+
+  @include e(label-min, label-max) {
+    font-size: $-slider-fs;
+    color: $-slider-color;
+  }
+  @include e(label) {
+    text-align: center;
+    width: calc($-slider-handle-radius * 2);
+    line-height: calc($-slider-handle-radius * 2);
+    font-size: $-slider-fs;
+    line-height: 1.2;
+    color: $-slider-color;
+    background-color: rgba($color: #fff, $alpha: 0.5);
+    border-radius: 100%;
+    position: absolute;
+    bottom: calc($-slider-handle-radius * 2 + 8px);
+  }
+  @include e(bar-wrapper) {
+    flex: 1;
+    position: relative;
+    border-radius: calc($-slider-axie-height / 2);
+    background-color: #e5e5e5;
+    margin: calc($-slider-handle-radius - $-slider-axie-height / 2) 0;
+  }
+  @include e(bar) {
+    position: relative;
+    border-radius: inherit;
+    height: $-slider-axie-height;
+    background: $-slider-line-color;
+  }
+  @include e(button-wrapper) {
+    width: calc($-slider-handle-radius * 2);
+    position: absolute;
+    right: 0;
+    top: 0;
+    transform: translate3d(-50%, -50%, 0);
+  }
+  @include e(has-label) {
+    padding-top: calc($-slider-fs * 1.2 + 8px);
+  }
+  @include e(button) {
+    height: calc($-slider-handle-radius * 2);
+    width: calc($-slider-handle-radius * 2);
+    background: $-slider-handle-bg;
+    border-radius: 100%;
+    border: 1px solid $-slider-axie-bg;
+    box-sizing: border-box;
+    box-shadow: 0 2px 4px 0 rgba($color: #9b9b9b, $alpha: 0.5);
+  }
+  @include e(label-min) {
+    margin-right: calc($-slider-handle-radius * 2);
+  }
+  @include e(label-max) {
+    margin-left: calc($-slider-handle-radius * 2);
+  }
+  @include m(disabled) {
+    @include me(bar) {
+      opacity: 0.25;
+    }
+    @include me(label-min, label-max) {
+      color: $-slider-disabled-color;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-slider/types.ts b/src/uni_modules/wot-design-uni/components/wd-slider/types.ts
new file mode 100644
index 0000000..61c9faf
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-slider/types.ts
@@ -0,0 +1,104 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-06-03 23:43:43
+ * @LastEditTime: 2024-06-06 22:03:57
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-slider/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export const sliderProps = {
+  ...baseProps,
+
+  /**
+   * 自定义最小值的样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customMinClass: makeStringProp(''),
+
+  /**
+   * 自定义最大值的样式类名
+   * 类型: string
+   * 默认值: ''
+   */
+  customMaxClass: makeStringProp(''),
+
+  /**
+   * 是否隐藏左右的最大最小值
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideMinMax: makeBooleanProp(false),
+
+  /**
+   * 是否隐藏当前滑块值
+   * 类型: boolean
+   * 默认值: false
+   */
+  hideLabel: makeBooleanProp(false),
+
+  /**
+   * 是否禁用滑块
+   * 类型: boolean
+   * 默认值: false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 进度条未激活的背景颜色
+   * 类型: string
+   * 默认值: '#e5e5e5'
+   */
+  inactiveColor: makeStringProp('#e5e5e5'),
+
+  /**
+   * 进度条激活的背景颜色
+   * 类型: string
+   * 默认值: ''
+   */
+  activeColor: makeStringProp(''),
+
+  /**
+   * 滑块的最大值
+   * 类型: number
+   * 默认值: 100
+   */
+  max: makeNumberProp(100),
+
+  /**
+   * 滑块的最小值
+   * 类型: number
+   * 默认值: 0
+   */
+  min: makeNumberProp(0),
+
+  /**
+   * 滑块的步进值
+   * 类型: number
+   * 默认值: 1
+   */
+  step: makeNumberProp(1),
+
+  /**
+   * 滑块的值，如果为数组，则为双向滑块
+   * 类型: number | number[]
+   * 默认值: 0
+   */
+  modelValue: {
+    type: [Number, Array] as PropType<number | number[]>,
+    default: 0
+  }
+}
+
+export type SliderExpose = {
+  /**
+   * 初始化slider宽度
+   */
+  initSlider: () => void
+}
+
+export type SliderInstance = ComponentPublicInstance<SliderExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue b/src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue
new file mode 100644
index 0000000..4e11ffc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-slider/wd-slider.vue
@@ -0,0 +1,358 @@
+<template>
+  <view :class="rootClass" :style="customStyle" :id="sliderId">
+    <!-- #ifdef MP-DINGTALK -->
+    <view :id="sliderId" style="flex: 1" :class="rootClass">
+      <!-- #endif -->
+      <view :class="`wd-slider__label-min ${customMinClass}`" v-if="!hideMinMax">
+        {{ minValue }}
+      </view>
+      <view class="wd-slider__bar-wrapper" :style="barWrapperStyle">
+        <view class="wd-slider__bar" :style="barCustomStyle"></view>
+        <!-- 左边 -->
+        <view
+          class="wd-slider__button-wrapper"
+          :style="buttonLeftStyle"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+          @touchcancel="onTouchEnd"
+        >
+          <view class="wd-slider__label" v-if="!hideLabel">{{ leftNewValue }}</view>
+          <view class="wd-slider__button" />
+        </view>
+        <!-- 右边 -->
+        <view
+          v-if="showRight"
+          class="wd-slider__button-wrapper"
+          :style="buttonRightStyle"
+          @touchstart="onTouchStartRight"
+          @touchmove="onTouchMoveRight"
+          @touchend="onTouchEndRight"
+          @touchcancel="onTouchEndRight"
+        >
+          <view class="wd-slider__label" v-if="!hideLabel">{{ rightNewValue }}</view>
+          <view class="wd-slider__button" />
+        </view>
+      </view>
+      <view :class="`wd-slider__label-max ${customMaxClass}`" v-if="!hideMinMax">
+        {{ maxValue }}
+      </view>
+      <!-- #ifdef MP-DINGTALK -->
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-slider',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, onMounted, ref } from 'vue'
+import { getRect, isArray, isDef, isNumber, uuid } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+import { watch } from 'vue'
+import { sliderProps, type SliderExpose } from './types'
+
+const props = defineProps(sliderProps)
+const emit = defineEmits(['dragstart', 'dragmove', 'dragend', 'update:modelValue'])
+
+// 存放右滑轮中的所有属性
+const rightSlider = {
+  startValue: 0,
+  deltaX: 0,
+  newValue: 0
+}
+const sliderId = ref<string>(`sliderId${uuid()}`)
+
+const touchLeft = useTouch()
+const touchRight = useTouch()
+
+const showRight = ref<boolean>(false)
+const barStyle = ref<string>('')
+const leftNewValue = ref<number>(0)
+const rightNewValue = ref<number>(0)
+const rightBarPercent = ref<number>(0)
+const leftBarPercent = ref<number>(0)
+const trackWidth = ref<number>(0)
+const trackLeft = ref<number>(0)
+const startValue = ref<number>(0)
+const currentValue = ref<number | number[]>(0)
+const newValue = ref<number>(0)
+
+const maxValue = ref<number>(100) // 最大值
+const minValue = ref<number>(0) // 最小值
+const stepValue = ref<number>(1) // 步长
+
+watch(
+  () => props.max,
+  (newValue) => {
+    if (newValue <= props.min) {
+      maxValue.value = props.min // 交换最大值和最小值
+      minValue.value = newValue
+      console.warn('[wot design] warning(wd-slider): max value must be greater than min value')
+    } else {
+      maxValue.value = newValue // 更新最大值
+    }
+    calcBarPercent()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.min,
+  (newValue) => {
+    if (newValue >= props.max) {
+      minValue.value = props.max // 交换最小值和最大值
+      maxValue.value = newValue
+      console.warn('[wot design] warning(wd-slider): min value must be less than max value')
+    } else {
+      minValue.value = newValue // 更新最小值
+    }
+    calcBarPercent()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.step,
+  (newValue) => {
+    if (newValue < 1) {
+      stepValue.value = 1
+      console.warn('[wot design] warning(wd-slider): step must be greater than 0')
+    } else {
+      stepValue.value = Math.floor(newValue)
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    // 类型校验，支持所有值(除null、undefined。undefined建议统一写成void (0)防止全局undefined被覆盖)
+    if (newValue === null || newValue === undefined) {
+      emit('update:modelValue', currentValue.value)
+      console.warn('[wot design] warning(wd-slider): value can nott be null or undefined')
+    } else if (isArray(newValue) && newValue.length !== 2) {
+      console.warn('[wot design] warning(wd-slider): value must be dyadic array')
+    } else if (!isNumber(newValue) && !isArray(newValue)) {
+      emit('update:modelValue', currentValue.value)
+      console.warn('[wot design] warning(wd-slider): value must be dyadic array Or Number')
+    }
+    // 动态传值后修改
+    if (isArray(newValue)) {
+      if (currentValue.value && isArray(currentValue.value) && equal(newValue, currentValue.value)) return
+      currentValue.value = newValue
+      showRight.value = true
+      if (leftBarPercent.value <= rightBarPercent.value) {
+        leftBarSlider(newValue[0])
+        rightBarSlider(newValue[1])
+      } else {
+        leftBarSlider(newValue[1])
+        rightBarSlider(newValue[0])
+      }
+    } else {
+      if (newValue === currentValue.value) return
+      currentValue.value = newValue
+      leftBarSlider(newValue)
+    }
+  },
+  { deep: true, immediate: true }
+)
+
+const { proxy } = getCurrentInstance() as any
+
+const rootClass = computed(() => {
+  const rootClass = `wd-slider ${!props.hideLabel ? 'wd-slider__has-label' : ''} ${props.disabled ? 'wd-slider--disabled' : ''} ${props.customClass}`
+  return rootClass
+})
+
+const barWrapperStyle = computed(() => {
+  const barWrapperStyle = `${props.inactiveColor ? 'background:' + props.inactiveColor : ''}`
+  return barWrapperStyle
+})
+
+const barCustomStyle = computed(() => {
+  const barWrapperStyle = `${barStyle.value};${props.activeColor ? 'background:' + props.activeColor : ''}`
+  return barWrapperStyle
+})
+
+const buttonLeftStyle = computed(() => {
+  const buttonLeftStyle = `left: ${leftBarPercent.value}%; visibility: ${!props.disabled ? 'show' : 'hidden'};`
+  return buttonLeftStyle
+})
+
+const buttonRightStyle = computed(() => {
+  const buttonRightStyle = `left: ${rightBarPercent.value}%; visibility: ${!props.disabled ? 'show' : 'hidden'}`
+  return buttonRightStyle
+})
+
+onMounted(() => {
+  initSlider()
+})
+
+/**
+ * 初始化slider宽度
+ */
+function initSlider() {
+  getRect(`#${sliderId.value}`, false, proxy).then((data) => {
+    // trackWidth: 轨道全长
+    trackWidth.value = Number(data.width)
+    // trackLeft: 轨道距离左侧的距离
+    trackLeft.value = Number(data.left)
+  })
+}
+
+function onTouchStart(event: any) {
+  const { disabled, modelValue } = props
+  if (disabled) return
+  touchLeft.touchStart(event)
+  startValue.value = !isArray(modelValue)
+    ? format(modelValue)
+    : leftBarPercent.value < rightBarPercent.value
+    ? format(modelValue[0])
+    : format(modelValue[1])
+  emit('dragstart', {
+    value: currentValue.value
+  })
+}
+function onTouchMove(event: any) {
+  const { disabled } = props
+  if (disabled) return
+  touchLeft.touchMove(event)
+  // 移动间距 deltaX 就是向左(-)向右(+)
+  const diff = (touchLeft.deltaX.value / trackWidth.value) * (maxValue.value - minValue.value)
+  newValue.value = startValue.value + diff
+
+  // 左滑轮滑动控制
+  leftBarSlider(newValue.value)
+  emit('dragmove', {
+    value: currentValue.value
+  })
+}
+function onTouchEnd() {
+  if (props.disabled) return
+  emit('dragend', {
+    value: currentValue.value
+  })
+}
+// 右边滑轮滑动状态监听
+function onTouchStartRight(event: any) {
+  if (props.disabled) return
+  const { modelValue } = props
+  // 右滑轮移动时数据绑定
+  touchRight.touchStart(event)
+  // 记录开始数据值
+  rightSlider.startValue = leftBarPercent.value < rightBarPercent.value ? format((modelValue as number[])[1]) : format((modelValue as number[])[0])
+  emit('dragstart', {
+    value: currentValue.value
+  })
+}
+function onTouchMoveRight(event: any) {
+  if (props.disabled) return
+  touchRight.touchMove(event)
+  // 移动间距 deltaX 就是向左向右
+  const diff = (touchRight.deltaX.value / trackWidth.value) * (maxValue.value - minValue.value)
+  rightSlider.newValue = format(rightSlider.startValue + diff)
+  // 右滑轮滑动控制
+  rightBarSlider(rightSlider.newValue)
+  emit('dragmove', {
+    value: currentValue.value
+  })
+}
+function onTouchEndRight() {
+  if (props.disabled) return
+  emit('dragend', {
+    value: currentValue.value
+  })
+}
+/**
+ * 控制右侧滑轮滑动， value校验
+ * @param {Number} value 当前滑轮绑定值
+ */
+function rightBarSlider(value: number) {
+  value = format(value)
+  rightNewValue.value = value
+  emit('update:modelValue', [Math.min(leftNewValue.value, rightNewValue.value), Math.max(leftNewValue.value, rightNewValue.value)])
+  rightBarPercent.value = formatPercent(value)
+  styleControl()
+}
+/**
+ * 控制左滑轮滑动，更新渲染数据，对 value 进行校验取整
+ * @param {Number} value 当前滑轮绑定值
+ */
+function leftBarSlider(value: number) {
+  value = format(value)
+
+  // 把 value 转换成百分比
+  const percent = formatPercent(value)
+  if (!showRight.value) {
+    emit('update:modelValue', value)
+    leftNewValue.value = value
+    leftBarPercent.value = percent
+    barStyle.value = `width: ${percent}%; `
+  } else {
+    leftNewValue.value = value
+    leftBarPercent.value = percent
+    emit('update:modelValue', [Math.min(leftNewValue.value, rightNewValue.value), Math.max(leftNewValue.value, rightNewValue.value)])
+    styleControl()
+  }
+}
+// 样式控制
+function styleControl() {
+  // 左右滑轮距离左边最短为当前激活条所处位置
+  const barLeft =
+    leftBarPercent.value < rightBarPercent.value ? [leftBarPercent.value, rightBarPercent.value] : [rightBarPercent.value, leftBarPercent.value]
+  // 通过左右滑轮的间距控制 激活条宽度 barLeft[1] - barLeft[0]
+  const barStyleTemp = `width: ${barLeft[1] - barLeft[0]}%;  left: ${barLeft[0]}%`
+  currentValue.value =
+    leftNewValue.value < rightNewValue.value ? [leftNewValue.value, rightNewValue.value] : [rightNewValue.value, leftNewValue.value]
+  barStyle.value = barStyleTemp
+}
+
+function equal(arr1: number[], arr2: number[]) {
+  if (!isDef(arr1) || !isDef(arr2)) {
+    return false
+  }
+  let i = 0
+  arr1.forEach((item, index) => {
+    item === arr2[index] && i++
+  })
+  return i === 2
+}
+function format(value: number) {
+  const formatValue = Math.round(Math.max(minValue.value, Math.min(value, maxValue.value)) / stepValue.value) * stepValue.value
+  return formatValue
+}
+
+// 计算占比
+function formatPercent(value: number) {
+  const percentage = ((value - minValue.value) / (maxValue.value - minValue.value)) * 100
+  return percentage
+}
+// 计算滑块位置和进度长度
+function calcBarPercent() {
+  const { modelValue } = props
+  let value = !isArray(modelValue) ? format(modelValue) : leftBarPercent.value < rightBarPercent.value ? format(modelValue[0]) : format(modelValue[1])
+  value = format(value)
+  // 把 value 转换成百分比
+  const percent = formatPercent(value)
+  leftBarPercent.value = percent
+  barStyle.value = `width: ${percent}%; `
+}
+
+defineExpose<SliderExpose>({
+  initSlider
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sort-button/index.scss b/src/uni_modules/wot-design-uni/components/wd-sort-button/index.scss
new file mode 100644
index 0000000..bbc9af2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sort-button/index.scss
@@ -0,0 +1,89 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(sort-button) {
+    @include e(wrapper) {
+      color: $-dark-color;
+    }
+  }
+
+}
+
+@include b(sort-button) {
+  display: inline-block;
+  height: $-sort-button-height;
+  line-height: $-sort-button-height;
+
+  @include m(line) {
+    .wd-sort-button__left {
+      &::after {
+        position: absolute;
+        content: '';
+        width: 19px;
+        height: 3px;
+        bottom: 6px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        background: $-sort-button-line-color;
+        border-radius: calc($-sort-button-line-height / 2);
+        transition: opacity .15s;
+        opacity: 0;
+      }
+
+      &.is-active::after {
+        opacity: 1;
+      }
+    }
+  }
+
+  @include e(wrapper) {
+    font-size: $-sort-button-fs;
+    color: $-sort-button-color;
+    word-break: break-all;
+    white-space: nowrap;
+  }
+
+  @include e(left) {
+    position: relative;
+    display: inline-block;
+    vertical-align: middle;
+
+    @include when(active) {
+      font-weight: $-fw-medium;
+
+      .wd-sort-button__right {
+        justify-content: center;
+      }
+
+    }
+  }
+
+  @include e(right) {
+    display: inline-block;
+    min-width: 14px;
+    margin-left: 2px;
+    vertical-align: middle;
+    line-height: 1.1;
+
+    @include when(active) {
+
+      :deep(.wd-sort-button__icon-up),
+      :deep(.wd-sort-button__icon-down) {
+        transform: scale(calc((10 / 14)));
+      }
+    }
+  }
+
+  @include edeep(icon-up) {
+    display: block !important;
+    line-height: 1.1;
+    transform: scale(calc((10 / 14))) translate(0, 7px);
+  }
+
+  @include edeep(icon-down) {
+    display: block !important;
+    line-height: 1.1;
+    transform: scale(calc((10 / 14))) translate(0, -7px);
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-sort-button/types.ts b/src/uni_modules/wot-design-uni/components/wd-sort-button/types.ts
new file mode 100644
index 0000000..1d94f4f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sort-button/types.ts
@@ -0,0 +1,43 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export const sortButtonProps = {
+  ...baseProps,
+  /**
+   * 选中的箭头方向，1表示升序，0表示重置状态，-1表示降序。
+   * 类型: number
+   * 可选值: -1, 0, 1
+   * 默认值: 0或-1（根据具体实现可能有所不同）
+   */
+  modelValue: makeNumberProp(0),
+
+  /**
+   * 排序按钮展示的文案。
+   * 类型: string
+   * 默认值: ''
+   */
+  title: makeStringProp(''),
+
+  /**
+   * 当展示双箭头时，是否允许手动重置按钮。
+   * 类型: boolean
+   * 默认值: false
+   */
+  allowReset: makeBooleanProp(false),
+
+  /**
+   * 是否优先切换为降序，如果不开启则默认优先切换为升序。
+   * 类型: boolean
+   * 默认值: false
+   */
+  descFirst: makeBooleanProp(false),
+
+  /**
+   * 是否展示下划线，当只有一个排序按钮时，通常不展示下划线。
+   * 类型: boolean
+   * 默认值: true
+   */
+  line: makeBooleanProp(true)
+}
+
+export type SortButtonProps = ExtractPropTypes<typeof sortButtonProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue b/src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue
new file mode 100644
index 0000000..d8e6c19
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sort-button/wd-sort-button.vue
@@ -0,0 +1,69 @@
+<template>
+  <view :class="`wd-sort-button ${line ? 'wd-sort-button--line' : ''} ${customClass}`" :style="customStyle" @click="handleClick">
+    <view class="wd-sort-button__wrapper">
+      <view :class="`wd-sort-button__left ${modelValue !== 0 ? 'is-active' : ''}`">
+        {{ title }}
+      </view>
+      <view :class="`wd-sort-button__right ${modelValue !== 0 ? 'is-active' : ''}`">
+        <wd-icon v-if="modelValue !== 1" name="arrow-up" custom-class="wd-sort-button__icon-up" />
+        <wd-icon v-if="modelValue !== -1" name="arrow-down" custom-class="wd-sort-button__icon-down" />
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sort-button',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { sortButtonProps } from './types'
+
+const props = defineProps(sortButtonProps)
+
+const emit = defineEmits(['change', 'update:modelValue'])
+
+function handleClick() {
+  let { modelValue: value, allowReset, descFirst } = props
+  if (descFirst) {
+    if (value === 0) {
+      value = -1
+    } else if (value === -1) {
+      value = 1
+    } else if (value === 1) {
+      if (allowReset) {
+        value = 0
+      } else {
+        value = -1
+      }
+    }
+  } else {
+    if (value === 0) {
+      value = 1
+    } else if (value === 1) {
+      value = -1
+    } else if (value === -1) {
+      if (allowReset) {
+        value = 0
+      } else {
+        value = 1
+      }
+    }
+  }
+  emit('update:modelValue', value)
+  emit('change', {
+    value
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss b/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
new file mode 100644
index 0000000..9ba494a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/index.scss
@@ -0,0 +1,37 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  background-color: $-dark-background2;
+  @include b(status-tip) {
+    @include e(text) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(status-tip) {
+  padding: $-statustip-padding;
+  width: 100%;
+  margin: 0 auto;
+  color: $-statustip-color;
+  font-size: $-statustip-fs;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  @include edeep(image) {
+    margin: 0 auto;
+    width: 160px;
+    height: 160px;
+  }
+  @include e(text) {
+    margin: 20px auto 0;
+    font-size: $-statustip-fs;
+    line-height: $-statustip-line-height;
+    color: $-statustip-color;
+    text-align: center;
+    overflow-wrap: break-word;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts b/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts
new file mode 100644
index 0000000..b4f1938
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/types.ts
@@ -0,0 +1,65 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 13:49:00
+ * @LastEditTime: 2024-09-19 14:45:29
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+import type { ImageMode } from '../wd-img/types'
+
+export type ImageSize = {
+  /**
+   * 宽度
+   */
+  width: number | string
+  /**
+   * 高度
+   */
+  height: number | string
+}
+
+export const statusTipProps = {
+  ...baseProps,
+
+  /**
+   * 缺省图片类型，支持传入图片 URL。
+   * 类型: string
+   * 可选值: search, network, content, collect, comment, halo, message
+   * 默认值: network
+   */
+  image: makeStringProp('network'),
+
+  /**
+   * 图片大小，默认单位为 `px`。
+   * 类型: string 或 number 或 ImageSize
+   * 默认值: 空字符串
+   */
+  imageSize: {
+    type: [String, Number, Object] as PropType<string | number | ImageSize>,
+    default: ''
+  },
+  /**
+   * 提示文案。
+   * 类型: string
+   * 默认值: 空字符串
+   */
+  tip: makeStringProp(''),
+  /**
+   * 图片裁剪、缩放的模式
+   * 类型：string
+   * 默认值：'aspectFill'
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFill'),
+  /**
+   * 图片路径前缀，指向图片所在目录，用于拼接图片 URL。推荐将图片放到自己的服务器上，并设置此属性。
+   * 类型: string
+   * 默认值: https://registry.npmmirror.com/wot-design-uni-assets/*\/files/
+   */
+  urlPrefix: makeStringProp('https://registry.npmmirror.com/wot-design-uni-assets/*/files/')
+}
+
+export type StatusTipProps = ExtractPropTypes<typeof statusTipProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue b/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
new file mode 100644
index 0000000..4ab2ee4
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-status-tip/wd-status-tip.vue
@@ -0,0 +1,70 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-06-12 10:04:19
+ * @LastEditTime: 2024-09-20 10:23:38
+ * @LastEditors: jiaoxueyan
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-status-tip\wd-status-tip.vue
+ * 记得注释
+-->
+<template>
+  <view :class="`wd-status-tip  ${customClass}`" :style="customStyle">
+    <slot name="image" v-if="$slots.image"></slot>
+    <wd-img v-else-if="imgUrl" :mode="imageMode" :src="imgUrl" custom-class="wd-status-tip__image" :custom-style="imgStyle"></wd-img>
+    <view v-if="tip" class="wd-status-tip__text">{{ tip }}</view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-status-tip',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdImg from '../wd-img/wd-img.vue'
+import { computed, type CSSProperties } from 'vue'
+import { addUnit, isDef, isObj, objToStyle } from '../common/util'
+import { statusTipProps } from './types'
+
+const props = defineProps(statusTipProps)
+
+// 图片地址
+const imgUrl = computed(() => {
+  // 改用网络地址，避免小程序打包的时候统一打包进去导致包过大问题
+  let img: string = ''
+  if (['search', 'network', 'content', 'collect', 'comment', 'halo', 'message'].includes(props.image)) {
+    img = `${props.urlPrefix}${props.image}.png`
+  } else {
+    img = props.image
+  }
+  return img
+})
+
+/**
+ * 图片样式
+ */
+const imgStyle = computed(() => {
+  let style: CSSProperties = {}
+  if (props.imageSize) {
+    if (isObj(props.imageSize)) {
+      isDef(props.imageSize.height) && (style.height = addUnit(props.imageSize.height))
+      isDef(props.imageSize.width) && (style.width = addUnit(props.imageSize.width))
+    } else {
+      style = {
+        height: addUnit(props.imageSize),
+        width: addUnit(props.imageSize)
+      }
+    }
+  }
+  return `${objToStyle(style)}`
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-step/index.scss b/src/uni_modules/wot-design-uni/components/wd-step/index.scss
new file mode 100644
index 0000000..5feb063
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-step/index.scss
@@ -0,0 +1,235 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(step) {
+    @include e(icon) {
+      background: $-dark-background2;
+    }
+
+    @include e(content){
+      color: $-dark-color3;
+    }
+
+    @include e(line) {
+      background: $-dark-color-gray;
+    }
+
+    @include e(dot) {
+      background: $-dark-color-gray;
+    }
+
+    @include e(description) {
+      color: $-dark-color3;
+    }
+
+    @include when(wait) {
+      .wd-step__description {
+        color: $-dark-color-gray;
+      }
+    }
+
+    :deep(.wd-step__icon-outer),:deep(.wd-step__icon-inner){
+      color: $-dark-color3; 
+      border-color: $-dark-color-gray;
+    }
+  }
+}
+
+
+@include b(step) {
+  position: relative;
+  display: inline-block;
+  vertical-align: top;
+
+  @include e(header) {
+    position: relative;
+    font-size: 0;
+
+    @include when(dot) {
+      .wd-step__line {
+        margin-top: -1px;
+      }
+    }
+  }
+  @include e(icon) {
+    display: inline-block;
+    position: relative;
+    width: $-steps-icon-size;
+    height: $-steps-icon-size;
+    background: #fff;
+    z-index: 1;
+
+    @include when(icon) {
+      width: $-steps-is-icon-width;
+      text-align: center;
+    }
+    @include when(dot) {
+      width: $-steps-dot-size;
+      height: $-steps-dot-size;
+      border: 1px solid transparent;
+      margin-left: -1px;
+      border-radius: 50%;
+      background: transparent;
+    }
+  }
+  @include edeep(icon-inner) {
+    font-size: $-steps-icon-size;
+    color: $-steps-inactive-color;
+  }
+  @include e(icon-outer) {
+    width: calc($-steps-icon-size - 2px);
+    height: calc($-steps-icon-size - 2px);
+    border: 1px solid $-steps-inactive-color;
+    color: $-steps-inactive-color;
+    text-align: center;
+    line-height: calc($-steps-icon-size - 2px);
+    border-radius: 50%;
+    font-size: $-steps-icon-text-fs;
+  }
+  @include e(line) {
+    position: absolute;
+    width: 100%;
+    height: 1px;
+    background: $-steps-line-color;
+    transform: scaleY(0.5);
+    top: 50%;
+    left: 0;
+  }
+  @include e(dot) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background: $-steps-line-color;
+  }
+  @include e(content){
+    margin-top: 7px;
+    color: $-steps-inactive-color;
+    font-size: $-steps-label-fs;
+  }
+  @include e(title) {
+    font-weight: $-steps-title-fw;
+    line-height: 1.43;
+
+    @include when(description) {
+      font-size: $-steps-title-fs;
+    }
+  }
+  @include e(description) {
+    margin-top: 5px;
+    padding: 0 2px;
+    color: $-steps-description-color;
+  }
+  @include when(wait) {
+    .wd-step__description {
+      color: $-steps-inactive-color;
+    }
+  }
+  @include when(finished) {
+    :deep(.wd-step__icon-inner) {
+      color: $-steps-finished-color;
+    }
+    .wd-step__icon-outer {
+      color: $-steps-finished-color;
+      border-color: $-steps-finished-color;
+    }
+    .wd-step__title {
+      color: $-steps-finished-color;
+    }
+    .wd-step__dot {
+      background: $-steps-finished-color;
+    }
+  }
+  @include when(process) {
+    .wd-step__icon.is-icon {
+      :deep(.wd-step__icon-inner) {
+        color: $-steps-finished-color;
+      }
+    }
+    .wd-step__icon-outer {
+      color: #fff;
+      background: $-steps-finished-color;
+      border-color: $-steps-finished-color;
+    }
+    .wd-step__title {
+      color: $-steps-finished-color;
+    }
+    .wd-step__icon {
+      border-color: $-steps-finished-color;
+
+      &.is-dot {
+        &::after {
+          position: absolute;
+          content: '';
+          width: $-steps-dot-size + 10px;
+          height: $-steps-dot-size + 10px;
+          left: -5px;
+          top: -5px;
+          border-radius: 50%;
+          background: $-steps-finished-color;
+          opacity: 0.2;
+        }
+      }
+    }
+    .wd-step__dot {
+      background: $-steps-finished-color;
+    }
+  }
+  @include when(error) {
+    :deep(.wd-step__icon-inner), .wd-step__title {
+      color: $-steps-error-color;
+    }
+    .wd-step__icon-outer {
+      color: $-steps-error-color;
+      border-color: $-steps-error-color;
+    }
+    .wd-step__dot {
+      background: $-steps-error-color;
+    }
+  }
+  @include when(center) {
+    text-align: center;
+
+    .wd-step__line {
+      left: 50%;
+      right: -50%;
+    }
+  }
+  @include when(vertical) {
+    display: block;
+
+    .wd-step__header {
+      position: absolute;
+      left: 0;
+      top: 0;
+      height: 100%;
+
+      &.is-dot {
+        top: 6px;
+
+        .wd-step__line {
+          margin-left: -1px;
+          margin-top: 0;
+        }
+      }
+    }
+    .wd-step__content {
+      margin-left: 30px;
+      margin-top: 0;
+      padding-bottom: 20px;
+    }
+    .wd-step__line {
+      top: 0;
+      left: 50%;
+      width: 1px;
+      height: 100%;
+      transform: scaleX(0.5);
+    }
+    .wd-step__icon.is-dot {
+      margin-left: 0;
+      margin-top: -1px;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-step/types.ts b/src/uni_modules/wot-design-uni/components/wd-step/types.ts
new file mode 100644
index 0000000..3d24ff6
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-step/types.ts
@@ -0,0 +1,33 @@
+import type { PropType } from 'vue'
+import { baseProps, makeBooleanProp } from '../common/props'
+
+export type StepStatus = 'finished' | 'process' | 'error'
+
+export const stepProps = {
+  ...baseProps,
+
+  /**
+   * 步骤标题，如果没有则使用默认文案。
+   * 当只有标题而没有描述时，标题的字号会小2号。
+   * 类型: string
+   */
+  title: String,
+
+  /**
+   * 步骤描述。
+   * 类型: string
+   */
+  description: String,
+
+  /**
+   * 步骤图标。
+   * 类型: string
+   */
+  icon: String,
+
+  /**
+   * 步骤状态，可选值为 'finished'（已完成）、'process'（进行中）、'error'（出错）。
+   * 类型: string
+   */
+  status: String as PropType<StepStatus>
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue b/src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue
new file mode 100644
index 0000000..1a40f83
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-step/wd-step.vue
@@ -0,0 +1,150 @@
+<template>
+  <view
+    v-if="currentStatus"
+    :class="`wd-step ${customClass} ${currentStatus ? 'is-' + currentStatus : ''} ${canAlignCenter ? 'is-center' : ''}  ${
+      vertical ? 'is-vertical' : ''
+    }`"
+    :style="rootStyle"
+  >
+    <view :class="`wd-step__header  ${dot ? 'is-dot' : ''}`">
+      <view :class="`wd-step__icon  ${dot ? 'is-dot' : !!icon || $slots.icon ? 'is-icon' : 'is-text'}`">
+        <view v-if="dot" class="wd-step__dot"></view>
+        <slot v-else-if="$slots.icon" name="icon" />
+        <wd-icon v-else-if="icon" custom-class="wd-step__icon-inner" :name="icon" />
+        <view v-else class="wd-step__icon-outer">
+          <wd-icon v-if="currentStatus === 'finished'" name="check-bold" />
+          <wd-icon v-else-if="currentStatus === 'error'" name="close-bold" />
+          <text v-else>{{ index + 1 }}</text>
+        </view>
+      </view>
+      <view v-if="index < childrenLength - 1" class="wd-step__line"></view>
+    </view>
+    <view class="wd-step__content">
+      <view :class="`wd-step__title ${$slots.description || description ? 'is-description' : ''}`">
+        <slot v-if="$slots.title" name="title" />
+        <text v-else>{{ currentTitle }}</text>
+      </view>
+      <view v-if="$slots.description || description" class="wd-step__description">
+        <slot v-if="$slots.description" name="description" />
+        <text v-else>{{ description }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-step',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { STEPS_KEY } from '../wd-steps/types'
+import { isDef, objToStyle } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { stepProps } from './types'
+import type { CSSProperties } from 'vue'
+
+const props = defineProps(stepProps)
+
+const { parent: steps, index } = useParent(STEPS_KEY)
+
+const { translate } = useTranslate('steps')
+
+const currentStatus = computed(() => {
+  return getCurrentStatus(index.value)
+})
+
+const currentTitle = computed(() => {
+  return getCurrentTitle(currentStatus.value)
+})
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (steps) {
+    const { vertical, space } = steps.props
+    if (vertical) {
+      if (isDef(space)) {
+        style['height'] = space
+      }
+    } else {
+      style['width'] = space || 100 / steps.children.length + '%'
+    }
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const canAlignCenter = computed(() => {
+  if (isDef(steps)) {
+    const { vertical, alignCenter } = steps.props
+    return Boolean(!vertical && alignCenter)
+  } else {
+    return false
+  }
+})
+
+const vertical = computed(() => {
+  if (isDef(steps)) {
+    return Boolean(steps.props.vertical)
+  } else {
+    return false
+  }
+})
+const dot = computed(() => {
+  if (isDef(steps)) {
+    return Boolean(steps.props.dot)
+  } else {
+    return false
+  }
+})
+
+const childrenLength = computed(() => {
+  if (isDef(steps)) {
+    return Number(steps.children.length)
+  } else {
+    return 0
+  }
+})
+
+function getCurrentStatus(index: number) {
+  if (props.status) {
+    return props.status
+  }
+
+  if (steps) {
+    const { active } = steps.props
+    if (Number(active) > index) {
+      return 'finished'
+    } else if (Number(active) === index) {
+      return 'process'
+    } else {
+      return 'wait'
+    }
+  } else {
+    return 'wait'
+  }
+}
+function getCurrentTitle(currentStatus: string) {
+  if (props.title) return props.title
+
+  switch (currentStatus) {
+    case 'finished':
+      return translate('finished')
+    case 'error':
+      return translate('failed')
+    case 'process':
+      return translate('process')
+    case 'wait':
+    default:
+      return translate('wait')
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-steps/index.scss b/src/uni_modules/wot-design-uni/components/wd-steps/index.scss
new file mode 100644
index 0000000..e436a2d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-steps/index.scss
@@ -0,0 +1,10 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(steps) {
+  font-size: 0;
+
+  @include when(vertical) {
+    display: block;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-steps/types.ts b/src/uni_modules/wot-design-uni/components/wd-steps/types.ts
new file mode 100644
index 0000000..13382c0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-steps/types.ts
@@ -0,0 +1,59 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-01-09 11:46:46
+ * @LastEditTime: 2024-03-18 17:23:06
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-steps\types.ts
+ * 记得注释
+ */
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp } from '../common/props'
+
+export const stepsProps = {
+  ...baseProps,
+
+  /**
+   * 当前激活的步骤进度，以数字表示。
+   * 类型: number
+   * 默认值: 0
+   */
+  active: makeNumberProp(0),
+
+  /**
+   * 是否为垂直方向的步骤条。
+   * 类型: boolean
+   * 默认值: false
+   */
+  vertical: makeBooleanProp(false),
+
+  /**
+   * 是否为点状步骤条样式。
+   * 类型: boolean
+   * 默认值: false
+   */
+  dot: makeBooleanProp(false),
+
+  /**
+   * 步骤条之间的间距，默认为自动计算。
+   * 如果指定，则使用此值作为间距。
+   * 类型: string
+   * 默认值: 自动计算
+   */
+  space: String,
+
+  /**
+   * 是否将步骤条水平居中显示，只对横向步骤条有效。
+   * 类型: boolean
+   * 默认值: false
+   */
+  alignCenter: makeBooleanProp(false)
+}
+
+export type StepsProps = ExtractPropTypes<typeof stepsProps>
+
+export type StepsProvide = {
+  props: Partial<StepsProps>
+}
+
+export const STEPS_KEY: InjectionKey<StepsProvide> = Symbol('wd-steps')
diff --git a/src/uni_modules/wot-design-uni/components/wd-steps/wd-steps.vue b/src/uni_modules/wot-design-uni/components/wd-steps/wd-steps.vue
new file mode 100644
index 0000000..0440038
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-steps/wd-steps.vue
@@ -0,0 +1,37 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-06-12 18:40:58
+ * @LastEditTime: 2024-03-15 13:42:55
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-steps\wd-steps.vue
+ * 记得注释
+-->
+<template>
+  <view :class="`wd-steps ${customClass} ${vertical ? 'is-vertical' : ''}`" :style="customStyle">
+    <slot />
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-steps',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { useChildren } from '../composables/useChildren'
+import { STEPS_KEY, stepsProps } from './types'
+
+const props = defineProps(stepsProps)
+
+const { linkChildren } = useChildren(STEPS_KEY)
+
+linkChildren({ props })
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sticky-box/index.scss b/src/uni_modules/wot-design-uni/components/wd-sticky-box/index.scss
new file mode 100644
index 0000000..9456c8b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sticky-box/index.scss
@@ -0,0 +1,6 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(sticky-box) {
+  position: relative;
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-sticky-box/types.ts b/src/uni_modules/wot-design-uni/components/wd-sticky-box/types.ts
new file mode 100644
index 0000000..cb0e125
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sticky-box/types.ts
@@ -0,0 +1,20 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-04-08 22:34:01
+ * @LastEditTime: 2024-06-01 16:04:56
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-sticky-box/types.ts
+ * 记得注释
+ */
+import type { ComponentInternalInstance, InjectionKey } from 'vue'
+
+export type stickyBoxProvide = {
+  boxStyle: {
+    height: number // 高度
+    width: number // 宽度
+  }
+  observerForChild: (child: ComponentInternalInstance) => void // 监听子组件
+}
+
+export const STICKY_BOX_KEY: InjectionKey<stickyBoxProvide> = Symbol('wd-sticky-box')
diff --git a/src/uni_modules/wot-design-uni/components/wd-sticky-box/wd-sticky-box.vue b/src/uni_modules/wot-design-uni/components/wd-sticky-box/wd-sticky-box.vue
new file mode 100644
index 0000000..afdb1bd
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sticky-box/wd-sticky-box.vue
@@ -0,0 +1,155 @@
+<template>
+  <view style="position: relative">
+    <view :class="`wd-sticky-box ${props.customClass}`" :style="customStyle" :id="styckyBoxId">
+      <wd-resize @resize="handleResize">
+        <slot />
+      </wd-resize>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sticky-box',
+  options: {
+    addGlobalClass: true,
+    // virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdResize from '../wd-resize/wd-resize.vue'
+import { getCurrentInstance, onBeforeMount, reactive, ref } from 'vue'
+import { getRect, uuid } from '../common/util'
+import { baseProps } from '../common/props'
+import { STICKY_BOX_KEY } from './types'
+import { useChildren } from '../composables/useChildren'
+
+const props = defineProps(baseProps)
+
+const styckyBoxId = ref<string>(`wd-sticky-box${uuid()}`)
+
+const observerMap = ref<Map<any, any>>(new Map())
+
+const boxStyle = reactive({
+  height: 0,
+  width: 0
+})
+
+const { proxy } = getCurrentInstance() as any
+
+const { children: stickyList, linkChildren } = useChildren(STICKY_BOX_KEY)
+linkChildren({
+  boxStyle: boxStyle,
+  observerForChild
+})
+
+onBeforeMount(() => {
+  observerMap.value = new Map()
+})
+
+/**
+ * 容器大小变化后重新监听sticky组件与box组件的交叉状态
+ * @param detail
+ */
+function handleResize(detail: any) {
+  // 相对的容器大小改变后，同步设置 wd-sticky-box 的大小
+  boxStyle.width = detail.width
+  boxStyle.height = detail.height
+  // wd-sticky-box 大小变化时，重新监听所有吸顶元素
+  const temp = observerMap.value
+  observerMap.value = new Map()
+  for (const [uid] of temp) {
+    const child = stickyList.find((sticky) => {
+      return sticky.$.uid === uid
+    })
+    observerForChild(child)
+  }
+  temp.forEach((observer) => {
+    observer.disconnect()
+  })
+  temp.clear()
+}
+/**
+ * 删除对指定sticky的监听
+ * @param child 指定的子组件
+ */
+function deleteObserver(child: any) {
+  const observer = observerMap.value.get(child.$.uid)
+  if (!observer) return
+  observer.disconnect()
+  observerMap.value.delete(child.$.uid)
+}
+/**
+ * 针对指定sticky添加监听
+ * @param child 指定的子组件
+ */
+function createObserver(child: any) {
+  const observer = uni.createIntersectionObserver(proxy, { thresholds: [0, 0.5] })
+  observerMap.value.set(child.$.uid, observer)
+  return observer
+}
+/**
+ * 监听子组件
+ * @param child 子组件
+ */
+function observerForChild(child: any) {
+  deleteObserver(child)
+  const observer = createObserver(child)
+  const exposed = child.$.exposed
+  let offset = exposed.stickyState.height + exposed.offsetTop
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  offset = offset + 44
+  // #endif
+
+  if (boxStyle.height <= exposed.stickyState.height) {
+    exposed.setPosition(false, 'absolute', 0)
+  }
+  observer.relativeToViewport({ top: -offset }).observe(`#${styckyBoxId.value}`, (result) => {
+    handleRelativeTo(exposed, result)
+  })
+  // 当子组件默认处于边界外且永远不会进入边界内时，需要手动调用一次
+  getRect(`#${styckyBoxId.value}`, false, proxy)
+    .then((res) => {
+      // #ifdef H5
+      // H5端，查询节点信息未计算导航栏高度
+      res.bottom = Number(res.bottom) + 44
+      // #endif
+      if (Number(res.bottom) <= offset) handleRelativeTo(exposed, { boundingClientRect: res })
+    })
+    .catch((res) => {
+      console.log(res)
+    })
+}
+/**
+ *  监听容器组件
+ * @param {Object} exposed wd-sticky实例暴露出的事件
+ * @param {Object} boundingClientRect 边界信息
+ */
+function handleRelativeTo(exposed: any, { boundingClientRect }: any) {
+  let childOffsetTop = exposed.offsetTop
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  childOffsetTop = childOffsetTop + 44
+  // #endif
+  const offset = exposed.stickyState.height + childOffsetTop
+  let isAbsolute = boundingClientRect.bottom <= offset
+  // #ifdef H5 || APP-PLUS
+  isAbsolute = boundingClientRect.bottom < offset
+  // #endif
+  if (isAbsolute) {
+    exposed.setPosition(true, 'absolute', boundingClientRect.height - exposed.stickyState.height)
+  } else if (boundingClientRect.top <= offset && !isAbsolute) {
+    if (exposed.stickyState.state === 'normal') return
+    exposed.setPosition(false, 'fixed', childOffsetTop)
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-sticky/index.scss b/src/uni_modules/wot-design-uni/components/wd-sticky/index.scss
new file mode 100644
index 0000000..36392a0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sticky/index.scss
@@ -0,0 +1,9 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(sticky) {
+  display: inline-block;
+  @include e(container) {
+    display: inline-block;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-sticky/types.ts b/src/uni_modules/wot-design-uni/components/wd-sticky/types.ts
new file mode 100644
index 0000000..1b14dcf
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sticky/types.ts
@@ -0,0 +1,13 @@
+import { baseProps, makeNumberProp } from '../common/props'
+
+export const stickyProps = {
+  ...baseProps,
+  /**
+   * 层级
+   */
+  zIndex: makeNumberProp(1),
+  /**
+   * 吸顶距离
+   */
+  offsetTop: makeNumberProp(0)
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue b/src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue
new file mode 100644
index 0000000..8b5e0d9
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue
@@ -0,0 +1,190 @@
+<template>
+  <view :style="`${rootStyle};display: inline-block;`">
+    <view :class="`wd-sticky ${customClass}`" :style="stickyStyle" :id="styckyId">
+      <view class="wd-sticky__container" :style="containerStyle">
+        <wd-resize @resize="handleResize" custom-style="display: inline-block;">
+          <slot />
+        </wd-resize>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sticky',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdResize from '../wd-resize/wd-resize.vue'
+import { computed, getCurrentInstance, reactive, ref, type CSSProperties } from 'vue'
+import { addUnit, getRect, objToStyle, pause, uuid } from '../common/util'
+import { stickyProps } from './types'
+import { useParent } from '../composables/useParent'
+import { STICKY_BOX_KEY } from '../wd-sticky-box/types'
+
+const props = defineProps(stickyProps)
+const styckyId = ref<string>(`wd-sticky${uuid()}`)
+const observerList = ref<UniApp.IntersectionObserver[]>([])
+
+const stickyState = reactive({
+  position: 'absolute',
+  boxLeaved: false,
+  top: 0,
+  height: 0,
+  width: 0,
+  state: ''
+})
+
+const { parent: stickyBox } = useParent(STICKY_BOX_KEY)
+
+const { proxy } = getCurrentInstance() as any
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': props.zIndex,
+    height: addUnit(stickyState.height),
+    width: addUnit(stickyState.width)
+  }
+  if (!stickyState.boxLeaved) {
+    style['position'] = 'relative'
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const stickyStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': props.zIndex,
+    height: addUnit(stickyState.height),
+    width: addUnit(stickyState.width)
+  }
+  if (!stickyState.boxLeaved) {
+    style['position'] = 'relative'
+  }
+  return `${objToStyle(style)}`
+})
+
+const containerStyle = computed(() => {
+  const style: CSSProperties = {
+    position: stickyState.position as 'static' | 'relative' | 'absolute' | 'sticky' | 'fixed',
+    top: addUnit(stickyState.top)
+  }
+  return objToStyle(style)
+})
+
+const innerOffsetTop = computed(() => {
+  let top: number = 0
+  // #ifdef H5
+  // H5端，导航栏为普通元素，需要将组件移动到导航栏的下边沿
+  // H5的导航栏高度为44px
+  top = 44
+  // #endif
+
+  return top + props.offsetTop
+})
+
+/**
+ * 清除对当前组件的监听
+ */
+function clearObserver() {
+  while (observerList.value.length !== 0) {
+    observerList.value.pop()!.disconnect()
+  }
+}
+/**
+ * 添加对当前组件的监听
+ */
+function createObserver() {
+  const observer = uni.createIntersectionObserver(proxy, { thresholds: [0, 0.5] })
+  observerList.value.push(observer)
+  return observer
+}
+/**
+ *  当前内容高度发生变化时重置监听
+ */
+async function handleResize(detail: any) {
+  stickyState.width = detail.width
+  stickyState.height = detail.height
+  await pause()
+  observerContentScroll()
+  if (!stickyBox || !stickyBox.observerForChild) return
+  stickyBox.observerForChild(proxy)
+}
+/**
+ *  监听吸顶元素滚动事件
+ */
+function observerContentScroll() {
+  if (stickyState.height === 0 && stickyState.width === 0) return
+  const offset = innerOffsetTop.value + stickyState.height
+  clearObserver()
+  createObserver()
+    .relativeToViewport({
+      top: -offset
+    })
+    .observe(`#${styckyId.value}`, (result) => {
+      handleRelativeTo(result)
+    })
+  getRect(`#${styckyId.value}`, false, proxy).then((res) => {
+    // #ifdef H5
+    // H5端，查询节点信息未计算导航栏高度
+    res.bottom = Number(res.bottom) + 44
+    // #endif
+    if (Number(res.bottom) <= offset) handleRelativeTo({ boundingClientRect: res })
+  })
+}
+/**
+ * @description 根据位置进行吸顶
+ */
+function handleRelativeTo({ boundingClientRect }: any) {
+  // sticky 高度大于或等于 wd-sticky-box，使用 wd-sticky-box 无任何意义
+  if (stickyBox && stickyBox.boxStyle && stickyState.height >= stickyBox.boxStyle.height) {
+    stickyState.position = 'absolute'
+    stickyState.top = 0
+    return
+  }
+
+  let isStycky = boundingClientRect.top <= innerOffsetTop.value
+  // #ifdef H5 || APP-PLUS
+  isStycky = boundingClientRect.top < innerOffsetTop.value
+  // #endif
+
+  if (isStycky) {
+    stickyState.state = 'sticky'
+    stickyState.boxLeaved = false
+    stickyState.position = 'fixed'
+    stickyState.top = innerOffsetTop.value
+  } else {
+    stickyState.state = 'normal'
+    stickyState.boxLeaved = false
+    stickyState.position = 'absolute'
+    stickyState.top = 0
+  }
+}
+
+/**
+ * 设置位置
+ * @param setboxLeaved
+ * @param setPosition
+ * @param setTop
+ */
+function setPosition(boxLeaved: boolean, position: string, top: number) {
+  stickyState.boxLeaved = boxLeaved
+  stickyState.position = position
+  stickyState.top = top
+}
+
+defineExpose({
+  setPosition,
+  stickyState,
+  offsetTop: props.offsetTop
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-swipe-action/index.scss b/src/uni_modules/wot-design-uni/components/wd-swipe-action/index.scss
new file mode 100644
index 0000000..5310e70
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swipe-action/index.scss
@@ -0,0 +1,22 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(swipe-action) {
+  position: relative;
+  overflow: hidden;
+  @include e(left) {
+    left: 0;
+    transform: translate3d(-100%, 0, 0);
+  }
+  @include e(right) {
+    right: 0;
+    transform: translate3d(100%, 0, 0);
+  }
+}
+
+.wd-swipe-action__left,
+.wd-swipe-action__right {
+  position: absolute;
+  top: 0;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-swipe-action/types.ts b/src/uni_modules/wot-design-uni/components/wd-swipe-action/types.ts
new file mode 100644
index 0000000..dc828f1
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swipe-action/types.ts
@@ -0,0 +1,40 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type SwipeActionStatus = 'left' | 'close' | 'right'
+
+// 点击关闭按钮、滑动关闭按钮、通过控制value关闭按钮
+export type SwipeActionReason = 'click' | 'swipe' | 'value'
+
+export type SwipeActionPosition = SwipeActionStatus | 'inside'
+
+export type SwipeActionBeforeClose = (reason: SwipeActionReason, position: SwipeActionPosition) => void
+
+export const swipeActionProps = {
+  ...baseProps,
+
+  /**
+   * 滑动按钮的状态，使用v-model进行双向绑定。
+   * 可选值为：'left'（左滑）、'close'（关闭状态）、'right'（右滑）。
+   * 类型：string
+   * 默认值：'close'
+   */
+  modelValue: makeStringProp<SwipeActionStatus>('close'),
+
+  /**
+   * 是否禁用滑动操作。
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 在关闭滑动按钮前调用的钩子函数。
+   * 可以在此函数中执行一些关闭前的操作，如确认提示等。
+   * 类型：function
+   * 默认值：无
+   */
+  beforeClose: Function as PropType<SwipeActionBeforeClose>
+}
+
+export type SwipeActionProps = ExtractPropTypes<typeof swipeActionProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-swipe-action/wd-swipe-action.vue b/src/uni_modules/wot-design-uni/components/wd-swipe-action/wd-swipe-action.vue
new file mode 100644
index 0000000..dcffd6a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swipe-action/wd-swipe-action.vue
@@ -0,0 +1,294 @@
+<template>
+  <!--注意阻止横向滑动的穿透：横向移动时阻止冒泡-->
+  <view
+    :class="`wd-swipe-action ${customClass}`"
+    :style="customStyle"
+    @click.stop="onClick()"
+    @touchstart="startDrag"
+    @touchmove="onDrag"
+    @touchend="endDrag"
+    @touchcancel="endDrag"
+  >
+    <!--容器-->
+    <view class="wd-swipe-action__wrapper" :style="wrapperStyle">
+      <!--左侧操作-->
+      <view class="wd-swipe-action__left" @click="onClick('left')">
+        <slot name="left" />
+      </view>
+      <!--内容-->
+      <slot />
+      <!--右侧操作-->
+      <view class="wd-swipe-action__right" @click="onClick('right')">
+        <slot name="right" />
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-swipe-action',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { useTouch } from '../composables/useTouch'
+import { getRect } from '../common/util'
+import { swipeActionProps, type SwipeActionPosition, type SwipeActionReason, type SwipeActionStatus } from './types'
+
+const props = defineProps(swipeActionProps)
+const emit = defineEmits(['click', 'update:modelValue'])
+
+const queue = inject<Queue | null>(queueKey, null)
+
+const wrapperStyle = ref<string>('')
+
+// 滑动开始时，wrapper的偏移量
+const originOffset = ref<number>(0)
+// wrapper现在的偏移量
+const wrapperOffset = ref<number>(0)
+// 是否处于滑动状态
+const touching = ref<boolean>(false)
+
+const touch = useTouch()
+
+const { proxy } = getCurrentInstance() as any
+
+watch(
+  () => props.modelValue,
+  (value, old) => {
+    changeState(value, old)
+  },
+  {
+    deep: true
+  }
+)
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  // 滑动开始时，wrapper的偏移量
+  originOffset.value = 0
+  // wrapper现在的偏移量
+  wrapperOffset.value = 0
+  // 是否处于滑动状态
+  touching.value = false
+})
+
+onMounted(() => {
+  touching.value = true
+  changeState(props.modelValue)
+  touching.value = false
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function changeState(value: SwipeActionStatus, old?: SwipeActionStatus) {
+  if (props.disabled) {
+    return
+  }
+  getWidths().then(([leftWidth, rightWidth]) => {
+    switch (value) {
+      case 'close':
+        // 调用此函数时，偏移量本就是0
+        if (wrapperOffset.value === 0) return
+        close('value', old)
+        break
+      case 'left':
+        swipeMove(leftWidth)
+        break
+      case 'right':
+        swipeMove(-rightWidth)
+        break
+    }
+  })
+}
+
+/**
+ * @description 获取左/右操作按钮的宽度
+ * @return {Promise<[Number, Number]>} 左宽度、右宽度
+ */
+function getWidths() {
+  return Promise.all([
+    getRect('.wd-swipe-action__left', false, proxy).then((rect) => {
+      return rect.width ? rect.width : 0
+    }),
+    getRect('.wd-swipe-action__right', false, proxy).then((rect) => {
+      return rect.width ? rect.width : 0
+    })
+  ])
+}
+/**
+ * @description wrapper滑动函数
+ * @param {Number} offset 滑动漂移量
+ */
+function swipeMove(offset = 0) {
+  // this.offset = offset
+  const transform = `translate3d(${offset}px, 0, 0)`
+  // 跟随手指滑动，不需要动画
+  const transition = touching.value ? 'none' : '.6s cubic-bezier(0.18, 0.89, 0.32, 1)'
+  wrapperStyle.value = `
+        -webkit-transform: ${transform};
+        -webkit-transition: ${transition};
+        transform: ${transform};
+        transition: ${transition};
+      `
+  // 记录容器当前偏移的量
+  wrapperOffset.value = offset
+}
+/**
+ * @description click的handler
+ * @param event
+ */
+function onClick(position?: SwipeActionPosition) {
+  if (props.disabled || wrapperOffset.value === 0) {
+    return
+  }
+
+  position = position || 'inside'
+  close('click', position)
+  emit('click', {
+    value: position
+  })
+}
+/**
+ * @description 开始滑动
+ */
+function startDrag(event: TouchEvent) {
+  if (props.disabled) return
+
+  originOffset.value = wrapperOffset.value
+  touch.touchStart(event)
+  if (queue && queue.closeOther) {
+    queue.closeOther(proxy)
+  } else {
+    closeOther(proxy)
+  }
+}
+/**
+ * @description 滑动时，逐渐展示按钮
+ * @param event
+ */
+function onDrag(event: TouchEvent) {
+  if (props.disabled) return
+
+  touch.touchMove(event)
+  if (touch.direction.value === 'vertical') {
+    return
+  } else {
+    event.preventDefault()
+    event.stopPropagation()
+  }
+
+  touching.value = true
+
+  // 本次滑动，wrapper应该设置的偏移量
+  const offset = originOffset.value + touch.deltaX.value
+  getWidths().then(([leftWidth, rightWidth]) => {
+    // 如果需要想滑出来的按钮不存在，对应的按钮肯定滑不出来，容器处于初始状态。此时需要模拟一下位于此处的start事件。
+    if ((leftWidth === 0 && offset > 0) || (rightWidth === 0 && offset < 0)) {
+      swipeMove(0)
+      return startDrag(event)
+    }
+    // 按钮已经展示完了，再滑动没有任何意义，相当于滑动结束。此时需要模拟一下位于此处的start事件。
+    if (leftWidth !== 0 && offset >= leftWidth) {
+      swipeMove(leftWidth)
+      return startDrag(event)
+    } else if (rightWidth !== 0 && -offset >= rightWidth) {
+      swipeMove(-rightWidth)
+      return startDrag(event)
+    }
+    swipeMove(offset)
+  })
+}
+/**
+ * @description 滑动结束，自动修正位置
+ */
+function endDrag() {
+  if (props.disabled) return
+  // 滑出"操作按钮"的阈值
+  const THRESHOLD = 0.3
+  touching.value = false
+
+  getWidths().then(([leftWidth, rightWidth]) => {
+    if (
+      originOffset.value < 0 && // 之前展示的是右按钮
+      wrapperOffset.value < 0 && // 目前仍然是右按钮
+      wrapperOffset.value - originOffset.value < rightWidth * THRESHOLD // 并且滑动的范围不超过右边框阀值
+    ) {
+      swipeMove(-rightWidth) // 回归右按钮
+      emit('update:modelValue', 'right')
+    } else if (
+      originOffset.value > 0 && // 之前展示的是左按钮
+      wrapperOffset.value > 0 && // 现在仍然是左按钮
+      originOffset.value - wrapperOffset.value < leftWidth * THRESHOLD // 并且滑动的范围不超过左按钮阀值
+    ) {
+      swipeMove(leftWidth) // 回归左按钮
+      emit('update:modelValue', 'left')
+    } else if (
+      rightWidth > 0 &&
+      originOffset.value >= 0 && // 之前是初始状态或者展示左按钮显
+      wrapperOffset.value < 0 && // 现在展示右按钮
+      Math.abs(wrapperOffset.value) > rightWidth * THRESHOLD // 视图中已经展示的右按钮长度超过阀值
+    ) {
+      swipeMove(-rightWidth)
+      emit('update:modelValue', 'right')
+    } else if (
+      leftWidth > 0 &&
+      originOffset.value <= 0 && // 之前初始状态或者右按钮显示
+      wrapperOffset.value > 0 && // 现在左按钮
+      Math.abs(wrapperOffset.value) > leftWidth * THRESHOLD // 视图中已经展示的左按钮长度超过阀值
+    ) {
+      swipeMove(leftWidth)
+      emit('update:modelValue', 'left')
+    } else {
+      // 回归初始状态
+      close('swipe')
+    }
+  })
+}
+/**
+ * @description 关闭操过按钮，并在合适的时候调用 beforeClose
+ */
+function close(reason: SwipeActionReason, position?: SwipeActionPosition) {
+  if (reason === 'swipe' && originOffset.value === 0) {
+    // offset：0 ——> offset：0
+    return swipeMove(0)
+  } else if (reason === 'swipe' && originOffset.value > 0) {
+    // offset > 0 ——> offset：0
+    position = 'left'
+  } else if (reason === 'swipe' && originOffset.value < 0) {
+    // offset < 0 ——> offset：0
+    position = 'right'
+  }
+
+  if (reason && position) {
+    props.beforeClose && props.beforeClose(reason, position)
+  }
+
+  swipeMove(0)
+  if (props.modelValue !== 'close') {
+    emit('update:modelValue', 'close')
+  }
+}
+
+defineExpose({ close })
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper-nav/index.scss b/src/uni_modules/wot-design-uni/components/wd-swiper-nav/index.scss
new file mode 100644
index 0000000..f7207ca
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swiper-nav/index.scss
@@ -0,0 +1,159 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(swiper-nav) {
+
+  @include e(btn) {
+    @include m(prev, next) {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: $-swiper-nav-btn-size;
+      height: $-swiper-nav-btn-size;
+      border-radius: 50%;
+      background: $-swiper-nav-btn-bg-color;
+
+      &::after {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        display: block;
+        content: '';
+        width: 12rpx;
+        height: 12rpx;
+        border-color: $-swiper-nav-btn-color;
+        border-style: solid;
+      }
+    }
+
+    @include m(prev) {
+      left: 30rpx;
+
+      &::after {
+        margin-left: 4rpx;
+        border-width: 2rpx 0 0 2rpx;
+        transform: translate(-50%, -50%) rotateZ(-45deg);
+      }
+    }
+
+    @include m(next) {
+      right: 30rpx;
+
+      &::after {
+        margin-left: -4rpx;
+        border-width: 2rpx 2rpx 0 0;
+        transform: translate(-50%, -50%) rotateZ(45deg);
+      }
+    }
+  }
+
+  @include m(dots, dots-bar) {
+    display: flex;
+    flex-direction: row;
+  }
+
+  @include m(fraction) {
+    padding: 0 16rpx;
+    height: $-swiper-nav-fraction-height;
+    line-height: $-swiper-nav-fraction-height;
+    border-radius: calc($-swiper-nav-fraction-height / 2);
+    background: $-swiper-nav-fraction-bg-color;
+    color: $-swiper-nav-fraction-color;
+    font-size: $-swiper-nav-fraction-font-size;
+  }
+
+
+  @include e(item) {
+    @include m(dots, dots-bar) {
+      width: $-swiper-nav-dot-size;
+      height: $-swiper-nav-dot-size;
+      background: $-swiper-nav-dot-color;
+      border-radius: 50%;
+      margin: 0 10rpx;
+      transition: all 0.4s ease-in;
+
+      @include when(vertical) {
+        margin: 10rpx 0;
+      }
+
+      @include when(active) {
+        background-color: $-swiper-nav-dot-active-color;
+      }
+    }
+
+    @include m(dots-bar) {
+
+      @include when(vertical) {
+        @include when(active) {
+          width: $-swiper-nav-dot-size;
+          height: $-swiper-nav-dots-bar-active-width;
+        }
+      }
+
+      @include when(active) {
+        width: $-swiper-nav-dots-bar-active-width;
+        border-radius: calc($-swiper-nav-dot-size / 2);
+        background-color: $-swiper-nav-dot-active-color;
+      }
+    }
+
+  }
+
+
+  @include m(left) {
+    position: absolute;
+    left: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @include m(right) {
+    position: absolute;
+    right: 24rpx;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
+  @include m(top-left) {
+    position: absolute;
+    top: 24rpx;
+    left: 24rpx;
+  }
+
+  @include m(top) {
+    position: absolute;
+    left: 50%;
+    top: 24rpx;
+    transform: translateX(-50%);
+  }
+
+  @include m(top-right) {
+    position: absolute;
+    top: 24rpx;
+    right: 24rpx;
+  }
+
+  @include m(bottom-left) {
+    position: absolute;
+    left: 24rpx;
+    bottom: 24rpx;
+  }
+
+  @include m(bottom) {
+    position: absolute;
+    left: 50%;
+    bottom: 24rpx;
+    transform: translateX(-50%);
+  }
+
+  @include m(bottom-right) {
+    position: absolute;
+    right: 24rpx;
+    bottom: 24rpx;
+  }
+
+  @include m(vertical) {
+    flex-direction: column;
+  }
+
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper-nav/types.ts b/src/uni_modules/wot-design-uni/components/wd-swiper-nav/types.ts
new file mode 100644
index 0000000..9ed1909
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swiper-nav/types.ts
@@ -0,0 +1,42 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { DirectionType, IndicatorPositionType } from '../wd-swiper/types'
+
+/**
+ * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+ */
+export type SwiperIndicatorType = 'dots' | 'dots-bar' | 'fraction'
+
+export const swiperNavprops = {
+  ...baseProps,
+  /**
+   * 当前轮播在哪一项（下标）
+   */
+  current: makeNumberProp(0),
+  /**
+   * 轮播滑动方向，包括横向滑动和纵向滑动两个方向
+   */
+  direction: makeStringProp<DirectionType>('horizontal'),
+  /**
+   * 小于这个数字不会显示导航器
+   */
+  minShowNum: makeNumberProp(2),
+  /**
+   * 指示器位置
+   */
+  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
+  /**
+   * 是否显示两侧的控制按钮
+   */
+  showControls: makeBooleanProp(false),
+  /**
+   * 总共的项数
+   */
+  total: makeNumberProp(0),
+  /**
+   * 指示器类型，点状(dots)、点条状(dots-bar)、分式(fraction)等
+   */
+  type: makeStringProp<SwiperIndicatorType>('dots')
+}
+
+export type SwiperNavProps = ExtractPropTypes<typeof swiperNavprops>
diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper-nav/wd-swiper-nav.vue b/src/uni_modules/wot-design-uni/components/wd-swiper-nav/wd-swiper-nav.vue
new file mode 100644
index 0000000..f7dcc2b
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swiper-nav/wd-swiper-nav.vue
@@ -0,0 +1,37 @@
+<template>
+  <view v-if="showControls" class="wd-swiper-nav__btn">
+    <view class="wd-swiper-nav__btn--prev" @click="handleNav('prev')" />
+    <view class="wd-swiper-nav__btn--next" @click="handleNav('next')" />
+  </view>
+  <view
+    v-if="total >= minShowNum"
+    :style="customStyle"
+    :class="`wd-swiper-nav wd-swiper-nav--${direction} wd-swiper-nav--${type} wd-swiper-nav--${indicatorPosition} ${customClass}`"
+  >
+    <block v-if="type === 'dots' || type === 'dots-bar'">
+      <view
+        v-for="(_, index) in total"
+        :key="index"
+        :class="`wd-swiper-nav__item--${type} ${current === index ? 'is-active' : ''} is-${direction}`"
+      ></view>
+    </block>
+    <block v-if="type === 'fraction'">{{ current + 1 }}/{{ total }}</block>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { swiperNavprops } from './types'
+
+defineProps(swiperNavprops)
+
+const emit = defineEmits(['change'])
+
+function handleNav(dir: 'prev' | 'next') {
+  const source: string = 'nav'
+  emit('change', { dir, source })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/index.scss b/src/uni_modules/wot-design-uni/components/wd-swiper/index.scss
new file mode 100644
index 0000000..70c9192
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swiper/index.scss
@@ -0,0 +1,33 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(swiper) {
+  position: relative;
+
+  @include e(track) {
+    border-radius: $-swiper-radius;
+    overflow: hidden;
+    transform: translateY(0);
+  }
+
+  @include e(item) {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    padding: $-swiper-item-padding;
+  }
+
+  @include e(image, video) {
+    width: 100%;
+    transition: all 0.3s ease;
+  }
+
+  @include e(text) {
+    // 随便搞个样式，反正用户还是会覆盖的
+    position: absolute;
+    right: 24rpx;
+    top: 24rpx;
+    color: $-swiper-item-text-color;
+    font-size: $-swiper-item-text-fs;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts b/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts
new file mode 100644
index 0000000..f37fcc5
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swiper/types.ts
@@ -0,0 +1,264 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import type { SwiperNavProps } from '../wd-swiper-nav/types'
+import type { ImageMode } from '../wd-img/types'
+
+/**
+ * 轮播滑动方向
+ */
+export type DirectionType = 'horizontal' | 'vertical'
+
+/**
+ * 切换动画
+ */
+export type EasingType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
+
+/**
+ * 指示器位置
+ */
+export type IndicatorPositionType = 'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'
+
+/**
+ * first：第一个滑块。
+ * current：实时的当前滑块。
+ * highest：高度最大的滑块。
+ * none：不根据滑块调整高度，容器高度取决于自身样式。
+ */
+export type AdjustHeightType = 'first' | 'current' | 'highest' | 'none'
+
+// 资源类型
+export type SwiperItemType = 'image' | 'video'
+
+export interface SwiperList {
+  [key: string]: any
+  // 图片、视频等资源地址
+  value?: string
+  // 视频资源的封面
+  poster?: string
+  // 资源文件类型，可选值：'image' | 'video'
+  type?: SwiperItemType
+}
+
+export const swiperProps = {
+  ...baseProps,
+
+  /**
+   * 是否自动播放轮播图
+   * 类型：boolean
+   * 默认值：true
+   */
+  autoplay: makeBooleanProp(true),
+
+  /**
+   * 当前轮播在哪一项（下标）
+   * 类型：number
+   * 默认值：0
+   */
+  current: makeNumberProp(0),
+
+  /**
+   * 轮播滑动方向，可选值：'horizontal'（水平）或'vertical'（垂直）
+   * 类型：string
+   * 默认值：'horizontal'
+   */
+  direction: makeStringProp<DirectionType>('horizontal'),
+
+  /**
+   * 同时显示的滑块数量
+   * 类型：number
+   * 默认值：1
+   */
+  displayMultipleItems: makeNumberProp(1),
+
+  /**
+   * 滑动动画时长，单位为毫秒
+   * 类型：number
+   * 默认值：300
+   */
+  duration: makeNumberProp(300),
+
+  /**
+   * 指定 swiper 切换缓动动画类型
+   * 类型：string
+   * 默认值：'default'
+   */
+  easingFunction: makeStringProp<EasingType>('default'),
+
+  /**
+   * 轮播的高度
+   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 默认值：'192'
+   */
+  height: makeNumericProp('192'),
+
+  /**
+   * 轮播间隔时间，单位为毫秒
+   * 类型：number
+   * 默认值：5000
+   */
+  interval: makeNumberProp(5000),
+
+  /**
+   * 图片列表，可以是一个图片对象数组或字符串数组
+   * 类型：array
+   * 默认值：空数组
+   */
+  list: {
+    type: Array as PropType<SwiperList[] | string[]>,
+    default: () => []
+  },
+
+  /**
+   * 是否循环播放轮播图
+   * 类型：boolean
+   * 默认值：true
+   */
+  loop: makeBooleanProp(true),
+
+  /**
+   * 视频是否循环播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  videoLoop: makeBooleanProp(true),
+
+  /**
+   * 视频是否静音播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  muted: makeBooleanProp(true),
+
+  /**
+   * 后边距
+   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 默认值：'0'
+   */
+  nextMargin: makeNumericProp('0'),
+
+  /**
+   * 页码信息展示位置，可选值：'left' | 'top-left' | 'top' | 'top-right' | 'bottom-left' | 'bottom' | 'bottom-right' | 'right'
+   * 类型：string
+   * 默认值：'bottom'
+   */
+  indicatorPosition: makeStringProp<IndicatorPositionType>('bottom'),
+  /**
+   * 前边距
+   * 类型：number 或 string（数字或可转换为数字的字符串）
+   * 默认值：'0'
+   */
+  previousMargin: makeNumericProp('0'),
+  /**
+   * 是否应用边距到第一个、最后一个元素
+   * 类型：boolean
+   * 默认值：false
+   */
+  snapToEdge: makeBooleanProp(false),
+  /**
+   * 指示器全部配置，可以是布尔值或指示器配置对象
+   * 类型：boolean 或 object
+   * 默认值：true
+   */
+  indicator: {
+    type: [Boolean, Object] as PropType<boolean | Partial<SwiperNavProps>>,
+    default: true
+  },
+
+  /**
+   * 图片裁剪、缩放的模式
+   * 类型：string
+   * 默认值：'aspectFill'
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFill'),
+  /**
+   * 选项对象中，value 对应的 key
+   */
+  valueKey: makeStringProp('value'),
+  /**
+   * 选项对象中，标题 text 对应的 key
+   */
+  textKey: makeStringProp('text'),
+  /**
+   * 视频是否自动播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  autoplayVideo: makeBooleanProp(true),
+  /**
+   * 切换轮播项时是否停止上一个视频的播放
+   * 类型：boolean
+   * 默认值：true
+   */
+  stopPreviousVideo: makeBooleanProp(true),
+  /**
+   * 视频播放时是否停止自动轮播
+   * 类型：boolean
+   * 默认值：false
+   */
+  stopAutoplayWhenVideoPlay: makeBooleanProp(false),
+  /**
+   * 自动以指定滑块的高度为整个容器的高度。当 vertical 为 true 时，默认不调整
+   * 仅支付宝小程序支持
+   * 类型：'first' | 'current' | 'highest' | 'none'
+   * 默认值：false
+   */
+  adjustHeight: makeStringProp<AdjustHeightType>('highest'),
+  /**
+   * vertical 为 true 时强制使 adjust-height 生效。
+   * 仅支付宝小程序支持
+   * 类型：boolean
+   * 默认值：false
+   */
+  adjustVerticalHeight: makeBooleanProp(false),
+  /**
+   * 自定义指示器类名
+   * 类型：string
+   */
+  customIndicatorClass: makeStringProp(''),
+
+  /**
+   * 自定义图片类名
+   * 类型：string
+   */
+  customImageClass: makeStringProp(''),
+
+  /**
+   * 自定义上一个图片类名
+   * 类型：string
+   */
+  customPrevImageClass: makeStringProp(''),
+
+  /**
+   * 自定义下一个图片类名
+   * 类型：string
+   */
+  customNextImageClass: makeStringProp(''),
+
+  /**
+   * 自定义swiper子项类名
+   * 类型：string
+   */
+  customItemClass: makeStringProp(''),
+  /**
+   * 自定义上一个子项类名
+   * 类型：string
+   */
+  customPrevClass: makeStringProp(''),
+  /**
+   * 自定义下一个子项类名
+   * 类型：string
+   */
+  customNextClass: makeStringProp(''),
+  /**
+   * 自定义文字标题类名
+   * 类型：string
+   */
+  customTextClass: makeStringProp(''),
+  /**
+   * 自定义文字标题样式
+   * 类型：string
+   */
+  customTextStyle: makeStringProp('')
+}
+
+export type SwiperProps = ExtractPropTypes<typeof swiperProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue b/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
new file mode 100644
index 0000000..4869c63
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-swiper/wd-swiper.vue
@@ -0,0 +1,310 @@
+<template>
+  <view :class="`wd-swiper ${customClass}`" :style="customStyle">
+    <!-- #ifdef MP-WEIXIN -->
+    <scroll-view scroll-x scroll-y style="width: 100%; height: 100%">
+      <!-- #endif -->
+      <swiper
+        :adjust-height="adjustHeight"
+        :adjust-vertical-height="adjustVerticalHeight"
+        class="wd-swiper__track"
+        :autoplay="autoplay && !videoPlaying"
+        :current="navCurrent"
+        :interval="interval"
+        :duration="duration"
+        :circular="loop"
+        :vertical="direction == 'vertical'"
+        :easing-function="easingFunction"
+        :previous-margin="addUnit(previousMargin)"
+        :next-margin="addUnit(nextMargin)"
+        :snap-to-edge="snapToEdge"
+        :display-multiple-items="displayMultipleItems"
+        :style="{ height: addUnit(height) }"
+        @change="handleChange"
+        @animationfinish="handleAnimationfinish"
+      >
+        <swiper-item v-for="(item, index) in list" :key="index" class="wd-swiper__item">
+          <video
+            v-if="isVideo(item)"
+            :id="`video-${index}-${uid}`"
+            :style="{ height: addUnit(height) }"
+            :src="isObj(item) ? item[valueKey] : item"
+            :poster="isObj(item) ? item.poster : ''"
+            :class="`wd-swiper__video ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
+            @play="handleVideoPaly"
+            @pause="handleVideoPause"
+            :enable-progress-gesture="false"
+            :loop="videoLoop"
+            :muted="muted"
+            :autoplay="autoplayVideo"
+            objectFit="cover"
+            @click="handleClick(index, item)"
+          />
+          <image
+            v-else
+            :src="isObj(item) ? item[valueKey] : item"
+            :class="`wd-swiper__image ${customImageClass} ${customItemClass} ${getCustomItemClass(currentValue, index, list)}`"
+            :style="{ height: addUnit(height) }"
+            :mode="imageMode"
+            @click="handleClick(index, item)"
+          />
+
+          <text v-if="isObj(item) && item[textKey]" :class="`wd-swiper__text ${customTextClass}`" :style="customTextStyle">{{ item[textKey] }}</text>
+        </swiper-item>
+      </swiper>
+      <!-- #ifdef MP-WEIXIN -->
+    </scroll-view>
+    <!-- #endif -->
+
+    <template v-if="indicator">
+      <slot name="indicator" :current="currentValue" :total="list.length"></slot>
+      <wd-swiper-nav
+        v-if="!$slots.indicator"
+        :custom-class="customIndicatorClass"
+        :type="swiperIndicator.type"
+        :current="swiperIndicator.current"
+        :total="swiperIndicator.total"
+        :direction="swiperIndicator.direction"
+        :indicator-position="swiperIndicator.indicatorPosition"
+        :min-show-num="swiperIndicator.minShowNum"
+        :show-controls="swiperIndicator.showControls"
+        @change="handleIndicatorChange"
+      />
+    </template>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-swiper',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdSwiperNav from '../wd-swiper-nav/wd-swiper-nav.vue'
+import { computed, watch, ref, getCurrentInstance } from 'vue'
+import { addUnit, isObj, isImageUrl, isVideoUrl, uuid, isDef } from '../common/util'
+import { swiperProps, type SwiperList } from './types'
+import type { SwiperNavProps } from '../wd-swiper-nav/types'
+
+const props = defineProps(swiperProps)
+const emit = defineEmits(['click', 'change', 'animationfinish', 'update:current'])
+const navCurrent = ref<number>(props.current) // 当前滑块 swiper使用
+const currentValue = ref<number>(props.current) // 当前滑块
+
+/**
+ * 更新当前滑块
+ * @param current 当前滑块索引
+ * @param force 是否强制更新swiper绑定的的current
+ */
+const updateCurrent = (current: number, force: boolean = false) => {
+  currentValue.value = current
+  if (force) {
+    navCurrent.value = current
+  }
+  emit('update:current', current)
+}
+
+const videoPlaying = ref<boolean>(false) // 当前是否在播放视频
+
+const { proxy } = getCurrentInstance() as any
+
+const uid = ref<string>(uuid())
+
+watch(
+  () => props.current,
+  (val) => {
+    if (val < 0) {
+      props.loop ? goToEnd() : goToStart()
+    } else if (val >= props.list.length) {
+      props.loop ? goToStart() : goToEnd()
+    } else {
+      navTo(val)
+    }
+  }
+)
+
+const swiperIndicator = computed(() => {
+  const { list, direction, indicatorPosition, indicator } = props
+  const swiperIndicator: Partial<SwiperNavProps> = {
+    current: currentValue.value || 0,
+    total: list.length || 0,
+    direction: direction || 'horizontal',
+    indicatorPosition: indicatorPosition || 'bottom'
+  }
+  if (isObj(indicator)) {
+    swiperIndicator.type = indicator.type || 'dots'
+    swiperIndicator.minShowNum = indicator.minShowNum || 2
+    swiperIndicator.showControls = indicator.showControls || false
+  }
+  return swiperIndicator
+})
+
+const getMediaType = (item: string | SwiperList, type: 'video' | 'image') => {
+  const checkType = (url: string) => (type === 'video' ? isVideoUrl(url) : isImageUrl(url))
+
+  if (isObj(item)) {
+    return item.type && ['video', 'image'].includes(item.type) ? item.type === type : checkType(item[props.valueKey])
+  } else {
+    return checkType(item)
+  }
+}
+
+const isVideo = (item: string | SwiperList) => {
+  return getMediaType(item, 'video')
+}
+
+const isImage = (item: string | SwiperList) => {
+  return getMediaType(item, 'image')
+}
+
+function navTo(index: number) {
+  if (index === currentValue.value) return
+  updateCurrent(index, true)
+}
+
+function goToStart() {
+  navTo(0)
+}
+
+function goToEnd() {
+  navTo(props.list.length - 1)
+}
+
+// 视频播放
+function handleVideoPaly() {
+  props.stopAutoplayWhenVideoPlay && (videoPlaying.value = true)
+}
+
+// 视频暂停
+function handleVideoPause() {
+  videoPlaying.value = false
+}
+
+/**
+ * 是否为当前滑块的前一个滑块
+ * @param current
+ * @param index
+ * @param list
+ */
+function isPrev(current: number, index: number, list: string[] | SwiperList[]) {
+  return (current - 1 + list.length) % list.length === index
+}
+
+/**
+ * 是否为当前滑块的后一个滑块
+ * @param current
+ * @param index
+ * @param list
+ */
+function isNext(current: number, index: number, list: string[] | SwiperList[]) {
+  return (current + 1 + list.length) % list.length === index
+}
+
+function getCustomItemClass(current: number, index: number, list: string[] | SwiperList[]) {
+  let customItemClass: string = ''
+  if (isPrev(current, index, list)) {
+    customItemClass = props.customPrevClass || props.customPrevImageClass
+  }
+  if (isNext(current, index, list)) {
+    customItemClass = props.customNextClass || props.customNextImageClass
+  }
+  return customItemClass
+}
+
+/**
+ * 轮播滑块切换时触发
+ */
+function handleChange(e: { detail: { current: number; source: string } }) {
+  const { current, source } = e.detail
+  const previous = currentValue.value
+  emit('change', { current, source })
+  if (current !== currentValue.value) {
+    const forceUpdate = source === 'autoplay' || source === 'touch'
+    updateCurrent(current, forceUpdate)
+  }
+  handleVideoChange(previous, current)
+}
+
+/**
+ * 处理视频切换
+ */
+function handleVideoChange(previous: number, current: number) {
+  handleStopVideoPaly(previous)
+  handleStartVideoPaly(current)
+}
+
+/**
+ * 开始播放指定视频
+ * @param index
+ */
+function handleStartVideoPaly(index: number) {
+  if (props.autoplayVideo) {
+    const currentItem = props.list[index]
+    if (isDef(currentItem) && isVideo(currentItem)) {
+      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
+      video.play()
+    }
+  }
+}
+
+/**
+ * 停止播放指定视频
+ * @param index
+ */
+function handleStopVideoPaly(index: number) {
+  if (props.stopPreviousVideo) {
+    const previousItem = props.list[index]
+    if (isDef(previousItem) && isVideo(previousItem)) {
+      const video = uni.createVideoContext(`video-${index}-${uid.value}`, proxy)
+      video.pause()
+    }
+  } else if (props.stopAutoplayWhenVideoPlay) {
+    handleVideoPause()
+  }
+}
+
+/**
+ * 滑块动画结束
+ */
+function handleAnimationfinish(e: { detail: { current: any; source: string } }) {
+  const { current, source } = e.detail
+  if (current !== currentValue.value) {
+    const forceUpdate = source === 'autoplay' || source === 'touch'
+    updateCurrent(current, forceUpdate)
+  }
+  /**
+   * 滑块动画结束时触发
+   */
+  emit('animationfinish', { current, source })
+}
+
+/**
+ * 点击滑块事件
+ * @param index 点击的滑块下标
+ * @param item 点击的滑块内容
+ */
+function handleClick(index: number, item: string | SwiperList) {
+  emit('click', { index, item })
+}
+
+function handleIndicatorChange({ dir }: { dir: 'prev' | 'next' }) {
+  const { list, loop } = props
+  const total = list.length
+  let nextPos = dir === 'next' ? currentValue.value + 1 : currentValue.value - 1
+  if (loop) {
+    nextPos = dir === 'next' ? (currentValue.value + 1) % total : (currentValue.value - 1 + total) % total
+  } else {
+    nextPos = nextPos < 0 || nextPos >= total ? currentValue.value : nextPos
+  }
+  if (nextPos === currentValue.value) return
+  navTo(nextPos)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-switch/index.scss b/src/uni_modules/wot-design-uni/components/wd-switch/index.scss
new file mode 100644
index 0000000..6facd99
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-switch/index.scss
@@ -0,0 +1,58 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@include b(switch) {
+  display: inline-block;
+  position: relative;
+  width: $-switch-width;
+  height: $-switch-height;
+  border-radius: $-switch-circle-size;
+  background: $-switch-inactive-color;
+  font-size: $-switch-size;
+  transition: all .3s;
+
+  @include e(checkbox) {
+    position: absolute;
+    width: 0;
+    height: 0;
+    opacity: 0;
+    margin: 0;
+  }
+  @include e(circle) {
+    box-sizing: border-box;
+    position: absolute;
+    display: inline-block;
+    width: $-switch-circle-size;
+    height: $-switch-circle-size;
+    top: 2px;
+    left: 2px;
+    background: #fff;
+    border-radius: 50%;
+    transition: left .3s ease-out;
+    box-shadow: 0 2px 4px 0 $-switch-inactive-shadow-color;
+
+    &::after {
+      position: absolute;
+      content: '';
+      width: calc(200% - 2px);
+      height: calc(200% - 2px);
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.5);
+      border: 1px solid $-switch-border-color;
+      border-radius: 50%;
+    }
+  }
+  @include when(checked) {
+    background: $-switch-active-color;
+    border-color: $-switch-active-color;
+
+    .wd-switch__circle {
+      left: calc($-switch-width - $-switch-circle-size - 2px);
+      box-shadow: 0 2px 4px 0 $-switch-active-shadow-color
+    }
+  }
+  @include when(disabled) {
+    opacity: 0.5;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-switch/types.ts b/src/uni_modules/wot-design-uni/components/wd-switch/types.ts
new file mode 100644
index 0000000..ad38038
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-switch/types.ts
@@ -0,0 +1,58 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, numericProp } from '../common/props'
+
+export type SwitchBeforeChangeOption = {
+  value: number | string | boolean
+  resolve: (pass: boolean) => void
+}
+
+export type SwitchBeforeChange = (option: SwitchBeforeChangeOption) => void
+
+export const switchProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [Boolean, String, Number],
+    required: true,
+    default: false
+  },
+  /**
+   * 是否禁用
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 激活值
+   */
+  activeValue: {
+    type: [Boolean, String, Number],
+    default: true
+  },
+  /**
+   * 非激活值
+   */
+  inactiveValue: {
+    type: [Boolean, String, Number],
+    default: false
+  },
+  /**
+   * 激活颜色
+   */
+  activeColor: String,
+  /**
+   * 非激活颜色
+   */
+  inactiveColor: String,
+  /**
+   * 大小
+   */
+  size: {
+    type: numericProp
+  },
+  /**
+   * 在改变前执行的函数
+   */
+  beforeChange: Function as PropType<SwitchBeforeChange>
+}
+export type SwitchProps = ExtractPropTypes<typeof switchProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue b/src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue
new file mode 100644
index 0000000..3e8e0d7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-switch/wd-switch.vue
@@ -0,0 +1,83 @@
+<template>
+  <view :class="rootClass" :style="rootStyle" @click="switchValue">
+    <view class="wd-switch__circle" :style="circleStyle"></view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-switch',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, type CSSProperties, onBeforeMount } from 'vue'
+import { addUnit, isFunction, objToStyle } from '../common/util'
+import { switchProps } from './types'
+
+const props = defineProps(switchProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const rootClass = computed(() => {
+  return `wd-switch ${props.customClass} ${props.disabled ? 'is-disabled' : ''} ${props.modelValue === props.activeValue ? 'is-checked' : ''}`
+})
+
+const rootStyle = computed(() => {
+  const rootStyle: CSSProperties = {
+    background: props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor,
+    'border-color': props.modelValue === props.activeValue ? props.activeColor : props.inactiveColor
+  }
+  if (props.size) {
+    rootStyle['font-size'] = addUnit(props.size)
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+const circleStyle = computed(() => {
+  const circleStyle: string =
+    (props.modelValue === props.activeValue && props.activeColor) || (props.modelValue !== props.activeValue && props.inactiveColor)
+      ? 'box-shadow: none;'
+      : ''
+  return circleStyle
+})
+
+function switchValue() {
+  if (props.disabled) return
+  const newVal = props.modelValue === props.activeValue ? props.inactiveValue : props.activeValue
+
+  if (props.beforeChange && isFunction(props.beforeChange)) {
+    props.beforeChange({
+      value: newVal,
+      resolve: (pass: boolean) => {
+        if (pass) {
+          emit('update:modelValue', newVal)
+          emit('change', {
+            value: newVal
+          })
+        }
+      }
+    })
+  } else {
+    emit('update:modelValue', newVal)
+    emit('change', {
+      value: newVal
+    })
+  }
+}
+
+onBeforeMount(() => {
+  if ([props.activeValue, props.inactiveValue].indexOf(props.modelValue) === -1) {
+    emit('update:modelValue', props.inactiveValue)
+    emit('change', {
+      value: props.inactiveValue
+    })
+  }
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tab/index.scss b/src/uni_modules/wot-design-uni/components/wd-tab/index.scss
new file mode 100644
index 0000000..671d2f0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tab/index.scss
@@ -0,0 +1,16 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+
+@include b(tab) {
+  width: 100%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  @include e(body) {
+    @include m(inactive) {
+      height: 0;
+      transition: height 0.3s ease-in-out;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-tab/types.ts b/src/uni_modules/wot-design-uni/components/wd-tab/types.ts
new file mode 100644
index 0000000..26fde38
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tab/types.ts
@@ -0,0 +1,30 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, numericProp } from '../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+export const tabProps = {
+  ...baseProps,
+  /**
+   * 唯一标识符
+   */
+  name: numericProp,
+  /**
+   * tab的标题
+   */
+  title: String,
+  /**
+   *  是否禁用，无法点击
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否懒加载，切换到该tab时才加载内容
+   * @default true
+   */
+  lazy: makeBooleanProp(true),
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<Partial<BadgeProps>>
+}
+
+export type TabProps = ExtractPropTypes<typeof tabProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue b/src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue
new file mode 100644
index 0000000..8a39488
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue
@@ -0,0 +1,88 @@
+<template>
+  <view :class="`wd-tab ${customClass}`" :style="customStyle">
+    <view :class="['wd-tab__body', { 'wd-tab__body--inactive': !active }]" v-if="shouldBeRender" :style="tabBodyStyle">
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tab',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, ref, watch, type CSSProperties } from 'vue'
+import { isDef, isNumber, isString, objToStyle } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { TABS_KEY } from '../wd-tabs/types'
+import { computed } from 'vue'
+import { tabProps } from './types'
+
+const props = defineProps(tabProps)
+
+const { proxy } = getCurrentInstance() as any
+const { parent: tabs, index } = useParent(TABS_KEY)
+
+// 激活项下标
+const active = computed(() => {
+  return isDef(tabs) ? tabs.state.activeIndex === index.value : false
+})
+
+const painted = ref<boolean>(active.value) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
+
+const tabBodyStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (!active.value && (!isDef(tabs) || !tabs.props.animated)) {
+    style.display = 'none'
+  }
+  return objToStyle(style)
+})
+
+const shouldBeRender = computed(() => !props.lazy || painted.value || active.value)
+
+watch(active, (val) => {
+  if (val) painted.value = true
+})
+
+watch(
+  () => props.name,
+  (newValue) => {
+    if (isDef(newValue) && !isNumber(newValue) && !isString(newValue)) {
+      console.error('[wot design] error(wd-tab): the type of name should be number or string')
+      return
+    }
+    if (tabs) {
+      checkName(proxy)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * @description 检测tab绑定的name是否和其它tab的name冲突
+ * @param {Object} self 自身
+ */
+function checkName(self: any) {
+  const { name: myName } = props
+  if (myName === undefined || myName === null || myName === '') {
+    return
+  }
+  tabs &&
+    tabs.children.forEach((child: any) => {
+      if (child.$.uid !== self.$.uid && child.name === myName) {
+        console.error(`The tab's bound value: ${myName} has been used`)
+      }
+    })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss
new file mode 100644
index 0000000..f4958b9
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss
@@ -0,0 +1,55 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(tabbar-item) {
+    @include e(body) {
+      :deep(){
+        @include when(inactive) {
+          color: $-dark-color-gray;
+        }
+      }
+    }
+  }
+}
+
+
+@include b(tabbar-item) {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include e(body) {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    line-height: 1;
+    padding: 0;
+    position: relative;
+    
+    :deep(){
+      @include when(active) {
+        color: $-tabbar-active-color;
+      }
+  
+      @include when(inactive) {
+        color: $-tabbar-inactive-color;
+      }
+    }
+  }
+
+
+  @include e(body-title) {
+    font-size: $-tabbar-item-title-font-size;
+    line-height: $-tabbar-item-title-line-height;
+  }
+
+  @include edeep(body-icon) {
+    font-size: $-tabbar-item-icon-size;
+  }
+  
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts
new file mode 100644
index 0000000..f620eda
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts
@@ -0,0 +1,51 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeNumberProp, numericProp } from '../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+/**
+ * 折叠面板子项
+ */
+export interface TabbarItem {
+  // 唯一标识
+  name: string | number
+}
+
+export const tabbarItemProps = {
+  ...baseProps,
+  /**
+   * 标签页的标题
+   */
+  title: String,
+  /**
+   * 唯一标识符
+   */
+  name: numericProp,
+  /**
+   * 图标
+   */
+  icon: String,
+  /**
+   * 徽标显示值
+   */
+  value: {
+    type: [Number, String, null] as PropType<number | string | null>,
+    default: null
+  },
+  /**
+   * 是否点状徽标
+   */
+  isDot: {
+    type: Boolean,
+    default: undefined
+  },
+  /**
+   * 徽标最大值
+   */
+  max: Number,
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<BadgeProps>
+}
+
+export type TabbarItemProps = ExtractPropTypes<typeof tabbarItemProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue
new file mode 100644
index 0000000..e14f9ba
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue
@@ -0,0 +1,99 @@
+<template>
+  <view :class="`wd-tabbar-item ${customClass}`" :style="customStyle" @click="handleClick">
+    <wd-badge v-bind="customBadgeProps">
+      <view class="wd-tabbar-item__body">
+        <slot name="icon" :active="active"></slot>
+        <template v-if="!$slots.icon && icon">
+          <wd-icon
+            :name="icon"
+            :custom-style="textStyle"
+            :custom-class="`wd-tabbar-item__body-icon ${active ? 'is-active' : 'is-inactive'}`"
+          ></wd-icon>
+        </template>
+        <text v-if="title" :style="textStyle" :class="`wd-tabbar-item__body-title ${active ? 'is-active' : 'is-inactive'}`">
+          {{ title }}
+        </text>
+      </view>
+    </wd-badge>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tabbar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdBadge from '../wd-badge/wd-badge.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { type CSSProperties, computed } from 'vue'
+import { deepAssign, isDef, isUndefined, objToStyle, omitBy } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { TABBAR_KEY } from '../wd-tabbar/types'
+import { tabbarItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+
+const props = defineProps(tabbarItemProps)
+
+const { parent: tabbar, index } = useParent(TABBAR_KEY)
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.value
+      },
+      isUndefined
+    )
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const textStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (tabbar) {
+    if (active.value && tabbar.props.activeColor) {
+      style['color'] = tabbar.props.activeColor
+    }
+    if (!active.value && tabbar.props.inactiveColor) {
+      style['color'] = tabbar.props.inactiveColor
+    }
+  }
+
+  return `${objToStyle(style)}`
+})
+
+const active = computed(() => {
+  const name = isDef(props.name) ? props.name : index.value
+  if (tabbar) {
+    if (tabbar.props.modelValue === name) {
+      return true
+    } else {
+      return false
+    }
+  } else {
+    return false
+  }
+})
+
+/**
+ * 点击tabbar选项
+ */
+function handleClick() {
+  const name: string | number = isDef(props.name) ? props.name : index.value
+  tabbar && tabbar.setChange({ name })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss b/src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss
new file mode 100644
index 0000000..aa54b07
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar/index.scss
@@ -0,0 +1,62 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(tabbar) {
+    background: $-dark-background;
+  }
+}
+
+@include b(tabbar) {
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  position: relative;
+  background: $-color-white;
+  height: $-tabbar-height;
+
+  @include e(placeholder) {
+    box-sizing: content-box;
+    padding-bottom: constant(safe-area-inset-bottom);
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  @include m(round) {
+    margin-left: 32rpx;
+    margin-right: 32rpx;
+    border-radius: 999px;
+    box-shadow: $-tabbar-box-shadow;
+
+    @include when(fixed) {
+      @include when(safe) {
+        bottom: constant(safe-area-inset-bottom);
+        bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+  }
+
+  @include m(default) {
+
+    @include when(fixed) {
+      @include when(safe) {
+        box-sizing: content-box;
+        padding-bottom: constant(safe-area-inset-bottom);
+        padding-bottom: env(safe-area-inset-bottom);
+      }
+    }
+
+
+    @include when(border) {
+      @include halfPixelBorder('top');
+    }
+  }
+
+  @include when(fixed) {
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 500;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar/types.ts b/src/uni_modules/wot-design-uni/components/wd-tabbar/types.ts
new file mode 100644
index 0000000..d3fb28a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar/types.ts
@@ -0,0 +1,73 @@
+import { type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import type { TabbarItem } from '../wd-tabbar-item/types'
+
+type TabbarShape = 'default' | 'round'
+
+export type TabbarProvide = {
+  props: {
+    // 选中标签的索引值或者名称
+    modelValue?: number | string
+    // 是否固定在底部
+    fixed?: boolean
+    // 是否设置底部安全距离（iphone X 类型的机型）
+    safeAreaInsetBottom?: boolean
+    // 是否显示顶部边框
+    bordered?: boolean
+    // 标签栏的形状。可选项：default/round
+    shape?: TabbarShape
+    // 激活标签的颜色
+    activeColor?: string
+    // 未激活标签的颜色
+    inactiveColor?: string
+    // 固定在底部时，是否在标签位置生成一个等高的占位元素
+    placeholder?: boolean
+    // 自定义组件的层级
+    zIndex?: number
+  }
+  setChange: (child: TabbarItem) => void
+}
+
+export const TABBAR_KEY: InjectionKey<TabbarProvide> = Symbol('wd-tabbar')
+
+export const tabbarProps = {
+  ...baseProps,
+  /**
+   * 选中标签的索引值或者名称
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 是否固定在底部
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 是否显示顶部边框
+   */
+  bordered: makeBooleanProp(true),
+  /**
+   * 是否设置底部安全距离（iPhone X 类型的机型）
+   */
+  safeAreaInsetBottom: makeBooleanProp(false),
+  /**
+   * 标签栏的形状。可选项：default/round
+   */
+  shape: makeStringProp<TabbarShape>('default'),
+  /**
+   * 激活标签的颜色
+   */
+  activeColor: String,
+  /**
+   * 未激活标签的颜色
+   */
+  inactiveColor: String,
+  /**
+   * 固定在底部时，是否在标签位置生成一个等高的占位元素
+   */
+  placeholder: makeBooleanProp(false),
+  /**
+   * 自定义组件的层级
+   */
+  zIndex: makeNumberProp(99)
+}
+
+export type TabbarProps = ExtractPropTypes<typeof tabbarProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue b/src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue
new file mode 100644
index 0000000..85a42ee
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabbar/wd-tabbar.vue
@@ -0,0 +1,91 @@
+<template>
+  <view :class="{ 'wd-tabbar__placeholder': fixed && placeholder && safeAreaInsetBottom && shape === 'round' }" :style="{ height: addUnit(height) }">
+    <view
+      :class="`wd-tabbar wd-tabbar--${shape} ${customClass} ${fixed ? 'is-fixed' : ''} ${safeAreaInsetBottom ? 'is-safe' : ''} ${
+        bordered ? 'is-border' : ''
+      }`"
+      :style="rootStyle"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tabbar',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, onMounted, ref, watch, nextTick, computed, type CSSProperties } from 'vue'
+import type { TabbarItem } from '../wd-tabbar-item/types'
+import { addUnit, getRect, isDef, objToStyle } from '../common/util'
+import { useChildren } from '../composables/useChildren'
+import { TABBAR_KEY, tabbarProps } from './types'
+
+const props = defineProps(tabbarProps)
+const emit = defineEmits(['change', 'update:modelValue'])
+
+const height = ref<number | string>('') // 占位高度
+const { proxy } = getCurrentInstance() as any
+
+const { linkChildren } = useChildren(TABBAR_KEY)
+
+linkChildren({
+  props,
+  setChange
+})
+
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.zIndex)) {
+    style['z-index'] = props.zIndex
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+watch(
+  [() => props.fixed, () => props.placeholder],
+  () => {
+    setPlaceholderHeight()
+  },
+  { deep: true, immediate: false }
+)
+
+onMounted(() => {
+  if (props.fixed && props.placeholder) {
+    nextTick(() => {
+      setPlaceholderHeight()
+    })
+  }
+})
+
+/**
+ * 子项状态变更
+ * @param child 子项
+ */
+function setChange(child: TabbarItem) {
+  let active = child.name
+  emit('update:modelValue', active)
+  emit('change', {
+    value: active
+  })
+}
+
+function setPlaceholderHeight() {
+  if (!props.fixed || !props.placeholder) {
+    return
+  }
+
+  getRect('.wd-tabbar', false, proxy).then((res) => {
+    height.value = Number(res.height)
+  })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-table-col/index.scss b/src/uni_modules/wot-design-uni/components/wd-table-col/index.scss
new file mode 100644
index 0000000..d1d1f35
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-table-col/index.scss
@@ -0,0 +1,46 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@import '../wd-table/index';
+
+.wot-theme-dark {
+  @include b(table-col) {
+    @include when(shadow) {
+      &::after {
+        background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+      }
+    }
+  }
+}
+
+
+@include b(table-col) {
+  .wd-table__cell {
+    width: 100%;
+  }
+
+  @include m(fixed) {
+    position: sticky;
+    z-index: 1;
+    left: 0;
+  }
+
+  @include when(shadow) {
+    &::after {
+      content: ' ';
+      position: absolute;
+      height: 100%;
+      right: -30rpx;
+      top: 0;
+      width: 30rpx;
+      height: 100%;
+      background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
+    }
+  }
+
+  .wd-table__cell:last-child {
+    @include when(border) {
+      border-bottom: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-table-col/types.ts b/src/uni_modules/wot-design-uni/components/wd-table-col/types.ts
new file mode 100644
index 0000000..4f067aa
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-table-col/types.ts
@@ -0,0 +1,54 @@
+import type { ComponentPublicInstance, ExtractPropTypes } from 'vue'
+import { makeBooleanProp, makeNumericProp, makeRequiredProp, makeStringProp } from '../common/props'
+
+export type AlignType = 'left' | 'center' | 'right' // 列的对齐方式
+
+export type SortDirection = 0 | 1 | -1 // 列的排序方向
+
+export interface TableColumn {
+  // 列对应字段
+  prop: string
+  // 列对应字段标题
+  label: string
+  // 列宽度
+  width: string | number
+  // 是否开启列排序
+  sortable?: boolean
+  // 列的对齐方式，可选值left,center,right
+  align?: AlignType
+  // 列的排序方向
+  sortDirection: SortDirection
+  // 是否i固定列
+  fixed?: boolean
+}
+
+export const tableColumnProps = {
+  /**
+   * 列对应字段
+   */
+  prop: makeRequiredProp(String),
+  /**
+   * 列对应字段标题
+   */
+  label: makeRequiredProp(String),
+  /**
+   * 列宽度，单位px
+   */
+  width: makeNumericProp(100),
+  /**
+   * 是否开启列排序
+   */
+  sortable: makeBooleanProp(false),
+  /**
+   * 是否固定本列
+   */
+  fixed: makeBooleanProp(false),
+  /**
+   * 列的对齐方式，可选值left,center,right
+   */
+  align: makeStringProp<AlignType>('left')
+}
+
+export type TableColumnProps = ExtractPropTypes<typeof tableColumnProps>
+
+export type TableColumnInstance = ComponentPublicInstance<TableColumnProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue b/src/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue
new file mode 100644
index 0000000..41abb8e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-table-col/wd-table-col.vue
@@ -0,0 +1,149 @@
+<template>
+  <view
+    :class="`wd-table-col ${fixed ? 'wd-table-col--fixed' : ''} ${isLastFixed && isDef(table) && table.state.scrollLeft ? 'is-shadow' : ''}`"
+    :style="columnStyle"
+  >
+    <view
+      :class="`wd-table__cell ${stripe && isOdd(index) ? 'is-stripe' : ''} ${border ? 'is-border' : ''} is-${align}`"
+      v-for="(row, index) in column"
+      :key="index"
+      :style="cellStyle"
+      @click="handleRowClick(index)"
+    >
+      <slot name="value" v-if="$slots.value" :row="getScope(index)" :index="index"></slot>
+      <text :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`" v-else>{{ row }}</text>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-table-col',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { type CSSProperties, computed, ref } from 'vue'
+import { addUnit, isDef, objToStyle, isOdd, isFunction } from '../common/util'
+import { tableColumnProps, type SortDirection } from './types'
+import { useParent } from '../composables/useParent'
+import { TABLE_KEY } from '../wd-table/types'
+
+const props = defineProps(tableColumnProps)
+
+const { parent: table, index: columnIndex } = useParent(TABLE_KEY)
+
+const sortDirection = ref<SortDirection>(0) // 排序方向
+
+// 是否开启斑马纹
+const stripe = computed(() => {
+  if (isDef(table)) {
+    return table.props.stripe
+  } else {
+    return false
+  }
+})
+
+/**
+ * 是否有边框
+ */
+const border = computed(() => {
+  if (isDef(table)) {
+    return table.props.border
+  } else {
+    return false
+  }
+})
+
+/**
+ * 是否超出省略
+ */
+const ellipsis = computed(() => {
+  if (isDef(table)) {
+    return table.props.ellipsis
+  } else {
+    return false
+  }
+})
+
+/**
+ * 是否最后一个固定元素
+ */
+const isLastFixed = computed(() => {
+  let isLastFixed: boolean = false
+  if (props.fixed && isDef(table)) {
+    isLastFixed = table.getIsLastFixed(props)
+  }
+  return isLastFixed
+})
+
+/**
+ * 列样式
+ */
+const columnStyle = computed(() => {
+  let style: CSSProperties = {}
+  if (isDef(props.width)) {
+    style['width'] = addUnit(props.width)
+  }
+  if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
+    style = table.getFixedStyle(columnIndex.value, style)
+  }
+  return style
+})
+
+/**
+ * 单元格样式
+ */
+const cellStyle = computed(() => {
+  let style: CSSProperties = {}
+  const rowHeight: string | number = isDef(table) && isDef(table.props) ? table.props.rowHeight : 50 // 自定义行高
+  if (isDef(rowHeight)) {
+    style['height'] = addUnit(rowHeight)
+  }
+  if (props.fixed && isDef(table) && isFunction(table.getFixedStyle)) {
+    style = table.getFixedStyle(columnIndex.value, style)
+  }
+  return objToStyle(style)
+})
+
+// 列数据
+const column = computed(() => {
+  if (!isDef(table) || !isDef(table.props) || !isDef(table.props.data) || !Array.isArray(table.props.data)) {
+    return []
+  }
+
+  const column: any[] = table.props.data.map((item) => {
+    return item[props.prop]
+  })
+  return column
+})
+
+/**
+ * 行点击事件
+ * @param index 行下标
+ */
+function handleRowClick(index: number) {
+  if (!isDef(table)) {
+    return
+  }
+  isFunction(table.rowClick) && table.rowClick(index)
+}
+
+// 行数据
+function getScope(index: number) {
+  if (!isDef(table) || !isDef(table.props) || !isDef(table.props.data) || !Array.isArray(table.props.data)) {
+    return {}
+  }
+  return table.props.data[index] || {}
+}
+
+defineExpose({ sortDirection: sortDirection })
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-table/index.scss b/src/uni_modules/wot-design-uni/components/wd-table/index.scss
new file mode 100644
index 0000000..32b0b0c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-table/index.scss
@@ -0,0 +1,162 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(table) {
+    background: $-dark-background;
+
+    @include when(border) {
+      border: 1px solid $-dark-border-color;
+    }
+
+    @include e(cell) {
+      color: $-dark-color;
+      background: $-dark-background2;
+
+      @include when(stripe) {
+        background: $-dark-background4;
+      }
+
+      @include when(border) {
+        border-right: 1px solid $-dark-border-color;
+        border-bottom: 1px solid $-dark-border-color;
+      }
+
+      @include when(shadow) {
+        &::after {
+          background: linear-gradient(270deg, rgba(17, 17, 17, 0.2) 0%, rgba(0, 0, 0, 0) 100%);
+        }
+      }
+    }
+  }
+}
+
+
+
+@include b(table) {
+  position: relative;
+  width: 100%;
+  overflow: auto;
+  background: $-table-bg;
+
+  @include when(border) {
+    border: 1px solid $-table-border-color;
+  }
+
+  :deep() {
+    .wd-table-col:last-child {
+      .wd-table__cell {
+        @include when(border) {
+          border-right: none;
+        }
+      }
+    }
+  }
+
+  @include e(header) {
+    width: 100%;
+    height: 50px;
+    position: sticky;
+    top: 0;
+    z-index: 2;
+    display: flex;
+    overflow-x: auto;
+    white-space: nowrap;
+  }
+
+  @include e(body) {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  @include e(content) {
+    display: flex;
+
+    @include m(header) {
+      position: sticky;
+      top: 0;
+      z-index: 2
+    }
+  }
+
+  @include e(cell) {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    background: $-table-bg;
+    width: 100px;
+    min-height: 50px;
+    padding: 8px 10px;
+    font-size: $-table-font-size;
+    color: $-table-color;
+    --wot-sort-button-height: 30px;
+
+    @include when(border) {
+      border-right: 1px solid $-table-border-color;
+      border-bottom: 1px solid $-table-border-color;
+    }
+
+    @include when(stripe) {
+      background: $-table-stripe-bg;
+    }
+
+    @include when(fixed) {
+      position: sticky;
+      z-index: 1;
+      left: 0;
+    }
+
+    @include when(shadow) {
+      &::after {
+        content: ' ';
+        position: absolute;
+        height: 100%;
+        right: -30rpx;
+        top: 0;
+        width: 30rpx;
+        height: 100%;
+        background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.04) 100%);
+      }
+    }
+
+    @include when(left) {
+      justify-content: flex-start;
+    }
+
+    @include when(center) {
+      justify-content: center;
+    }
+
+    @include when(right) {
+      justify-content: flex-end;
+    }
+  }
+
+  @include e(wrapper) {
+    width: 100%;
+    overflow: auto;
+  }
+
+  @include e(inner) {
+    display: flex;
+    flex-direction: column;
+  }
+
+  @include e(header-row) {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+  }
+
+  @include e(body) {
+    display: flex;
+    width: 100%;
+  }
+
+  @include e(value) {
+    @include when(ellipsis) {
+      word-break: break-all;
+      @include multiEllipsis(2);
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-table/types.ts b/src/uni_modules/wot-design-uni/components/wd-table/types.ts
new file mode 100644
index 0000000..f09d875
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-table/types.ts
@@ -0,0 +1,67 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-12-08 23:22:26
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-table/types.ts
+ * 记得注释
+ */
+import type { CSSProperties, ExtractPropTypes, InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumericProp, makeRequiredProp, numericProp } from '../common/props'
+import type { TableColumnProps } from '../wd-table-col/types'
+import type { PropType } from 'vue'
+
+export const tableProps = {
+  ...baseProps,
+  /**
+   * 显示的数据
+   */
+  data: makeRequiredProp(Array<Record<string, any>>),
+  /**
+   * 是否带有边框
+   */
+  border: makeBooleanProp(true),
+  /**
+   * 是否为斑马纹 table
+   */
+  stripe: makeBooleanProp(true),
+  /**
+   * Table 的高度
+   */
+  height: numericProp,
+  /**
+   * 行高
+   */
+  rowHeight: makeNumericProp(50),
+  /**
+   * 是否显示表头
+   */
+  showHeader: makeBooleanProp(true),
+  /**
+   * 是否超出2行隐藏
+   */
+  ellipsis: makeBooleanProp(true),
+  /**
+   * 是否显示索引列
+   */
+  index: {
+    type: [Object, Boolean] as PropType<boolean | Omit<Partial<TableColumnProps>, 'prop'>>,
+    default: false
+  },
+  fixedHeader: makeBooleanProp(true)
+}
+
+export type TableProps = ExtractPropTypes<typeof tableProps>
+
+export type TableProvide = {
+  props: Omit<TableProps, 'index' | 'customStyle' | 'customClass'>
+  state: {
+    scrollLeft: number
+  }
+  rowClick: (index: number) => void
+  getIsLastFixed: (column: { fixed: boolean; prop: string }) => boolean
+  getFixedStyle: (index: number, style: CSSProperties) => CSSProperties
+}
+
+export const TABLE_KEY: InjectionKey<TableProvide> = Symbol('wd-table')
diff --git a/src/uni_modules/wot-design-uni/components/wd-table/wd-table.vue b/src/uni_modules/wot-design-uni/components/wd-table/wd-table.vue
new file mode 100644
index 0000000..123d402
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-table/wd-table.vue
@@ -0,0 +1,284 @@
+<template>
+  <view :class="`wd-table ${border ? 'is-border' : ''} ${customClass}`" :style="tableStyle">
+    <template v-if="fixedHeader">
+      <scroll-view
+        :enable-flex="true"
+        :throttle="false"
+        :scrollLeft="state.scrollLeft"
+        :scroll-x="true"
+        class="wd-table__header"
+        @scroll="scroll"
+        v-if="showHeader"
+      >
+        <view id="table-header" class="wd-table__content wd-table__content--header" :style="realWidthStyle">
+          <view
+            :class="`wd-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${column.align} ${
+              getIsLastFixed(column) && state.scrollLeft ? 'is-shadow' : ''
+            }`"
+            :style="getCellStyle(index)"
+            v-for="(column, index) in children"
+            :key="index"
+          >
+            <wd-sort-button
+              v-model="column.$.exposed!.sortDirection.value"
+              allow-reset
+              :line="false"
+              :title="column.label"
+              @change="({ value }) => handleSortChange(value, index)"
+              v-if="column.sortable"
+            />
+            <text v-else :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text>
+          </view>
+        </view>
+      </scroll-view>
+      <scroll-view
+        class="wd-table__body"
+        :style="bodyStyle"
+        :enable-flex="true"
+        :throttle="false"
+        :scroll-x="true"
+        @scroll="scroll"
+        :scrollLeft="state.scrollLeft"
+      >
+        <view id="table-body" class="wd-table__content" :style="realWidthStyle">
+          <wd-table-col
+            v-if="index !== false"
+            :prop="indexColumn.prop"
+            :label="indexColumn.label"
+            :width="indexColumn.width"
+            :sortable="indexColumn.sortable"
+            :fixed="indexColumn.fixed"
+            :align="indexColumn.align"
+          >
+            <template #value="{ index }">
+              <text>{{ index + 1 }}</text>
+            </template>
+          </wd-table-col>
+          <slot></slot>
+        </view>
+      </scroll-view>
+    </template>
+    <!-- 非固定表头时使用单个scroll-view -->
+    <template v-else>
+      <scroll-view class="wd-table__wrapper" :enable-flex="true" :throttle="false" :scroll-x="true" @scroll="scroll" :scrollLeft="state.scrollLeft">
+        <view class="wd-table__inner" :style="realWidthStyle">
+          <!-- 表头部分 -->
+          <view v-if="showHeader" class="wd-table__header-row">
+            <view
+              v-for="(column, index) in children"
+              :key="index"
+              :class="`wd-table__cell ${border ? 'is-border' : ''} ${column.fixed ? 'is-fixed' : ''} ${stripe ? 'is-stripe' : ''} is-${
+                column.align
+              } ${getIsLastFixed(column) && state.scrollLeft ? 'is-shadow' : ''}`"
+              :style="getCellStyle(index)"
+            >
+              <wd-sort-button
+                v-if="column.sortable"
+                v-model="column.$.exposed!.sortDirection.value"
+                allow-reset
+                :line="false"
+                :title="column.label"
+                @change="({ value }) => handleSortChange(value, index)"
+              />
+              <text v-else :class="`wd-table__value ${ellipsis ? 'is-ellipsis' : ''}`">{{ column.label }}</text>
+            </view>
+          </view>
+
+          <!-- 表格内容部分 -->
+          <view class="wd-table__content" :style="bodyStyle">
+            <wd-table-col
+              v-if="index !== false"
+              :prop="indexColumn.prop"
+              :label="indexColumn.label"
+              :width="indexColumn.width"
+              :sortable="indexColumn.sortable"
+              :fixed="indexColumn.fixed"
+              :align="indexColumn.align"
+            >
+              <template #value="{ index }">
+                <text>{{ index + 1 }}</text>
+              </template>
+            </wd-table-col>
+            <slot></slot>
+          </view>
+        </view>
+      </scroll-view>
+    </template>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-table',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdTableCol from '../wd-table-col/wd-table-col.vue'
+import wdSortButton from '../wd-sort-button/wd-sort-button.vue'
+import { type CSSProperties, computed, reactive, ref } from 'vue'
+import { addUnit, debounce, isDef, isObj, objToStyle, uuid } from '../common/util'
+import type { SortDirection, TableColumn, TableColumnInstance, TableColumnProps } from '../wd-table-col/types'
+import { TABLE_KEY, tableProps, type TableProvide } from './types'
+import WdTableCol from '../wd-table-col/wd-table-col.vue'
+import { useTranslate } from '../composables/useTranslate'
+import { useChildren } from '../composables/useChildren'
+
+const { translate } = useTranslate('tableCol')
+
+const props = defineProps(tableProps)
+const emit = defineEmits(['sort-method', 'row-click'])
+
+const state = reactive({
+  scrollLeft: 0
+})
+
+const { linkChildren, children } = useChildren<TableColumnInstance, TableProvide>(TABLE_KEY)
+
+linkChildren({ props, state, rowClick, getIsLastFixed, getFixedStyle })
+
+const indexUUID = uuid()
+const indexColumn = ref<TableColumnProps>({
+  prop: indexUUID,
+  label: translate('indexLabel'),
+  width: '100rpx',
+  sortable: false,
+  fixed: false,
+  align: 'left',
+  ...(isObj(props.index) ? props.index : {})
+})
+
+const scroll = debounce(handleScroll, 100, { leading: false }) // 滚动事件
+
+/**
+ * 容器样式
+ */
+const tableStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.height)) {
+    style['max-height'] = addUnit(props.height)
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const realWidthStyle = computed(() => {
+  const style: CSSProperties = {
+    display: 'flex'
+  }
+  let width: string | number = ''
+  children.forEach((child) => {
+    width = width ? `${width} + ${addUnit(child.width)}` : addUnit(child.width)
+  })
+  style['width'] = `calc(${width})`
+  return objToStyle(style)
+})
+
+const bodyStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.height)) {
+    style['height'] = isDef(props.rowHeight) ? `calc(${props.data.length} * ${addUnit(props.rowHeight)})` : `calc(${props.data.length} * 50px)`
+  }
+  return `${objToStyle(style)}`
+})
+
+/**
+ * 是否最后一个固定元素
+ * @param column 列数据
+ */
+function getIsLastFixed(column: { fixed: boolean; prop: string }) {
+  let isLastFixed: boolean = false
+  if (column.fixed && isDef(children)) {
+    const columns = children.filter((child) => {
+      return child.fixed
+    })
+    if (columns.length && columns[columns.length - 1].prop === column.prop) {
+      isLastFixed = true
+    }
+  }
+  return isLastFixed
+}
+
+/**
+ * 表头单元格样式
+ */
+function getCellStyle(columnIndex: number) {
+  let style: CSSProperties = {}
+  if (isDef(children[columnIndex].width)) {
+    style['width'] = addUnit(children[columnIndex].width)
+  }
+  if (children[columnIndex].fixed) {
+    style = getFixedStyle(columnIndex, style)
+  }
+  return objToStyle(style)
+}
+
+/**
+ * 获取固定列样式
+ * @param columnIndex
+ */
+function getFixedStyle(columnIndex: number, style: CSSProperties) {
+  if (columnIndex > 0) {
+    let left: string | number = ''
+    children.forEach((column, index) => {
+      if (index < columnIndex) {
+        left = left ? `${left} + ${addUnit(column.width)}` : addUnit(column.width)
+      }
+    })
+    style['left'] = `calc(${left})`
+  } else {
+    style['left'] = 0
+  }
+  return style
+}
+
+/**
+ * 排序
+ * @param value
+ * @param index
+ */
+function handleSortChange(value: SortDirection, index: number) {
+  children[index].$.exposed!.sortDirection.value = value
+  children.forEach((col, i) => {
+    if (index != i) {
+      col.$.exposed!.sortDirection.value = 0
+    }
+  })
+  const column: TableColumn = {
+    // 列对应字段
+    prop: children[index].prop,
+    // 列对应字段标题
+    label: children[index].label,
+    // 列宽度
+    width: children[index].width,
+    // 是否开启列排序
+    sortable: children[index].sortable,
+    // 列的对齐方式，可选值left,center,right
+    align: children[index].align,
+    // 列的排序方向
+    sortDirection: value,
+    // 是否i固定列
+    fixed: children[index].fixed
+  }
+  emit('sort-method', column)
+}
+
+/**
+ * 滚动事件
+ */
+function handleScroll(event: any) {
+  state.scrollLeft = event.detail.scrollLeft
+}
+
+function rowClick(index: number) {
+  emit('row-click', { rowIndex: index })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/index.scss b/src/uni_modules/wot-design-uni/components/wd-tabs/index.scss
new file mode 100644
index 0000000..54e0295
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabs/index.scss
@@ -0,0 +1,299 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+
+.wot-theme-dark {
+  @include b(tabs) {
+    background: $-dark-background2;
+
+    @include e(nav) {
+      background: $-dark-background2;
+    }
+
+    @include e(nav-item) {
+      color: $-dark-color3;
+
+      @include when(active) {
+        font-weight: 600;
+        color: $-dark-color;
+      }
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+
+    }
+
+    @include e(map-nav-btn) {
+      background-color: $-dark-background4;
+      color: $-dark-color3;
+
+      @include when(active) {
+        color: $-dark-color;
+        border: 1px solid $-tabs-nav-active-color;
+        background-color: $-dark-background;
+      }
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+        border-color: #f4f4f4;
+      }
+    }
+
+    @include e(map-btn) {
+      background: $-dark-background2;
+      color: $-dark-color3;
+    }
+
+    @include e(map-header) {
+      background: $-dark-background2;
+      color: $-dark-color;
+
+      &::after {
+        background: $-dark-background4;
+      }
+    }
+
+    @include e(map-body) {
+      background: $-dark-background2;
+    }
+
+  }
+}
+
+@include b(tabs) {
+  position: relative;
+  background: #fff;
+  width: 100%;
+
+  @include e(nav) {
+    left: 0;
+    right: 0;
+    height: $-tabs-nav-height;
+    background-color: #fff;
+    width: 100%;
+    position: relative;
+
+    @include m(wrap) {
+      height: 100%;
+      overflow: hidden;
+    }
+
+    @include m(sticky) {
+      width: 100vw;
+    }
+  }
+
+  @include e(nav-container) {
+    position: relative;
+    display: flex;
+    user-select: none;
+  }
+
+  @include e(nav-item) {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex: 1;
+    min-width: 0;
+    height: $-tabs-nav-height;
+    font-size: $-tabs-nav-fs;
+    color: $-tabs-nav-color;
+    transition: color .3s;
+
+    @include when(active) {
+      font-weight: 600;
+    }
+
+    @include when(disabled) {
+      color: $-tabs-nav-disabled-color;
+    }
+  }
+
+  @include e(nav-item-text) {
+    @include lineEllipsis();
+  }
+
+  @include edeep(nav-item-badge){
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  @include e(line) {
+    position: absolute;
+    bottom: 4px;
+    left: 0;
+    z-index: 1;
+    height: $-tabs-nav-line-height;
+    width: $-tabs-nav-line-width;
+    background: $-tabs-nav-line-bg-color;
+    border-radius: calc($-tabs-nav-line-height / 2);
+
+    @include m(inner) {
+      left: 50%;
+      transform: translateX(-50%)
+    }
+  }
+
+  @include e(container) {
+    overflow: hidden;
+  }
+
+  @include e(body) {
+    position: relative;
+    width: 100%;
+    height: 100%;
+
+    @include when(animated) {
+      display: flex;
+      transition-property: left;
+    }
+  }
+
+  @include e(map) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 1;
+  }
+
+  @include e(map-btn) {
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: $-tabs-nav-height;
+    height: $-tabs-nav-height;
+    line-height: $-tabs-nav-height;
+    text-align: center;
+    color: $-tabs-nav-map-arrow-color;
+    z-index: 1;
+    background: $-tabs-nav-bg;
+    -webkit-tap-highlight-color: transparent;
+
+    &::before {
+      position: absolute;
+      content: '';
+      top: 0;
+      left: -24px;
+      width: 24px;
+      height: $-tabs-nav-height - 1;
+      background: $-tabs-nav-map-btn-before-bg;
+    }
+  }
+
+  @include e(map-arrow) {
+    display: block;
+    transition: transform .3s;
+
+    @include when(open) {
+      transform: rotate(180deg);
+    }
+  }
+
+  @include e(map-header) {
+    position: relative;
+    padding-left: 17px;
+    height: $-tabs-nav-height;
+    line-height: $-tabs-nav-height;
+    font-size: $-tabs-nav-map-fs;
+    color: $-tabs-nav-map-color;
+    transition: opacity .3s;
+    background: #fff;
+    opacity: 0;
+
+    @include halfPixelBorder;
+
+    &::after {
+      z-index: 3;
+    }
+  }
+
+  @include e(map-body) {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 20px 15px 10px;
+    background: #fff;
+    transition: transform .3s;
+    transform: scaleY(0);
+    transform-origin: center top;
+
+    @include when(open) {
+      transform: scaleY(1);
+    }
+  }
+
+  @include e(map-nav-item) {
+    flex-basis: 33%;
+
+    &:nth-child(3n + 2) {
+      text-align: center;
+    }
+
+    &:nth-child(3n + 3) {
+      text-align: right;
+    }
+  }
+
+  @include e(map-nav-btn) {
+    @include buttonClear;
+    @include lineEllipsis;
+    display: inline-block;
+    width: 107px;
+    height: 32px;
+    line-height: 32px;
+    background-color: $-tabs-nav-map-button-back-color;
+    border-color: transparent;
+    margin-bottom: 10px;
+    border-radius: $-tabs-nav-map-button-radius;
+    color: $-tabs-nav-map-color;
+    font-size: $-tabs-nav-map-fs;
+    text-align: center;
+    transition: color .3s, border-color .3s;
+
+    @include when(active) {
+      color: $-tabs-nav-active-color;
+      border: 1px solid $-tabs-nav-active-color;
+      background-color: $-tabs-nav-bg
+    }
+
+    @include when(disabled) {
+      color: $-tabs-nav-disabled-color;
+      border-color: #f4f4f4;
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: $-tabs-nav-height;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: $-tabs-nav-map-modal-bg;
+    opacity: 0;
+    transition: opacity .3s;
+  }
+
+  @include when(slide) {
+    .wd-tabs__nav-item {
+      flex: 0 0 auto;
+      padding: 0 17px;
+    }
+  }
+
+  @include when(map) {
+    .wd-tabs__nav--wrap {
+      padding-right: 40px;
+    }
+  }
+}
+
+@media screen and (max-width: 330px) {
+  .wd-tabs__map-nav-btn {
+    width: 90px;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts b/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts
new file mode 100644
index 0000000..7d4f144
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabs/types.ts
@@ -0,0 +1,107 @@
+import { type ComponentPublicInstance, type ExtractPropTypes, type InjectionKey } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp, numericProp } from '../common/props'
+
+export type TabsProvide = {
+  state: {
+    activeIndex: number
+    lineStyle: string // 激活项边框线样式
+    inited: boolean // 是否初始化
+    animating: boolean // 是否动画中
+    mapShow: boolean // map的开关
+    scrollLeft: number // scroll-view偏移量
+  }
+  props: Partial<TabsProps>
+}
+
+export type TabsSlidable = 'auto' | 'always'
+
+export const TABS_KEY: InjectionKey<TabsProvide> = Symbol('wd-tabs')
+
+export const tabsProps = {
+  ...baseProps,
+  /**
+   * 绑定值
+   */
+  modelValue: makeNumericProp(0),
+  /**
+   * 标签数超过阈值可滑动
+   */
+  slidableNum: makeNumberProp(6),
+  /**
+   * 标签数超过阈值显示导航地图
+   */
+  mapNum: makeNumberProp(10),
+  /**
+   * 导航地图的标题
+   */
+  mapTitle: String,
+  /**
+   * 粘性布局
+   */
+  sticky: makeBooleanProp(false),
+  /**
+   * 粘性布局吸顶位置
+   */
+  offsetTop: makeNumberProp(0),
+  /**
+   * 开启手势滑动
+   */
+  swipeable: makeBooleanProp(false),
+  /**
+   * 自动调整底部条宽度，设置了 lineWidth 后无效
+   */
+  autoLineWidth: makeBooleanProp(false),
+  /**
+   * 底部条宽度，单位像素
+   */
+  lineWidth: numericProp,
+  /**
+   * 底部条高度，单位像素
+   */
+  lineHeight: numericProp,
+  /**
+   * 颜色
+   */
+  color: makeStringProp(''),
+  /**
+   * 非活动状态颜色
+   */
+  inactiveColor: makeStringProp(''),
+  /**
+   * 是否开启切换标签内容时的过渡动画
+   */
+  animated: makeBooleanProp(false),
+  /**
+   * 切换动画过渡时间，单位毫秒
+   */
+  duration: makeNumberProp(300),
+  /**
+   * 是否开启滚动导航
+   * 可选值：'auto' | 'always'
+   * @default auto
+   */
+  slidable: makeStringProp<TabsSlidable>('auto')
+}
+
+export type TabsExpose = {
+  /**
+   * 设置激活项
+   * @param value 激活值
+   * @param init 是否已初始化
+   * @param setScroll 是否设置scroll-view滚动
+   */
+  setActive: (value: number | string, init: boolean, setScroll: boolean) => void
+  /**
+   * 使选中项滚动到可视区域
+   */
+  scrollIntoView: () => void
+  /**
+   * 更新激活项边框线样式
+   * @param animation 是否开启动画，默认开启
+   */
+  updateLineStyle: (animation?: boolean) => void
+}
+
+export type TabsProps = ExtractPropTypes<typeof tabsProps>
+
+export type TabsInstance = ComponentPublicInstance<TabsProps, TabsExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue b/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue
new file mode 100644
index 0000000..bf0fe27
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tabs/wd-tabs.vue
@@ -0,0 +1,439 @@
+<template>
+  <template v-if="sticky">
+    <wd-sticky-box>
+      <view
+        :class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`"
+        :style="customStyle"
+      >
+        <wd-sticky :offset-top="offsetTop">
+          <view class="wd-tabs__nav wd-tabs__nav--sticky">
+            <view class="wd-tabs__nav--wrap">
+              <scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">
+                <view class="wd-tabs__nav-container">
+                  <view
+                    @click="handleSelect(index)"
+                    v-for="(item, index) in children"
+                    :key="index"
+                    :class="`wd-tabs__nav-item  ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                    :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
+                  >
+                    <wd-badge v-if="item.badgeProps" v-bind="item.badgeProps">
+                      <text class="wd-tabs__nav-item-text">{{ item.title }}</text>
+                    </wd-badge>
+                    <text v-else class="wd-tabs__nav-item-text">{{ item.title }}</text>
+
+                    <view class="wd-tabs__line wd-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+                  </view>
+                  <view class="wd-tabs__line" :style="state.lineStyle"></view>
+                </view>
+              </scroll-view>
+            </view>
+            <view class="wd-tabs__map" v-if="mapNum < children.length && mapNum !== 0">
+              <view :class="`wd-tabs__map-btn  ${state.animating ? 'is-open' : ''}`" @click="toggleMap">
+                <view :class="`wd-tabs__map-arrow  ${state.animating ? 'is-open' : ''}`">
+                  <wd-icon name="arrow-down" />
+                </view>
+              </view>
+              <view class="wd-tabs__map-header" :style="`${state.mapShow ? '' : 'display:none;'}  ${state.animating ? 'opacity:1;' : ''}`">
+                {{ mapTitle || translate('all') }}
+              </view>
+              <view :class="`wd-tabs__map-body  ${state.animating ? 'is-open' : ''}`" :style="state.mapShow ? '' : 'display:none'">
+                <view class="wd-tabs__map-nav-item" v-for="(item, index) in children" :key="index" @click="handleSelect(index)">
+                  <view
+                    :class="`wd-tabs__map-nav-btn ${state.activeIndex === index ? 'is-active' : ''}  ${item.disabled ? 'is-disabled' : ''}`"
+                    :style="
+                      state.activeIndex === index
+                        ? color
+                          ? 'color:' + color + ';border-color:' + color
+                          : ''
+                        : inactiveColor
+                        ? 'color:' + inactiveColor
+                        : ''
+                    "
+                  >
+                    {{ item.title }}
+                  </view>
+                </view>
+              </view>
+            </view>
+          </view>
+        </wd-sticky>
+
+        <view class="wd-tabs__container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
+          <view :class="['wd-tabs__body', animated ? 'is-animated' : '']" :style="bodyStyle">
+            <slot />
+          </view>
+        </view>
+
+        <view
+          class="wd-tabs__mask"
+          :style="`${state.mapShow ? '' : 'display:none;'} ${state.animating ? 'opacity:1;' : ''}`"
+          @click="toggleMap"
+        ></view>
+      </view>
+    </wd-sticky-box>
+  </template>
+
+  <template v-else>
+    <view :class="`wd-tabs ${customClass} ${innerSlidable ? 'is-slide' : ''} ${mapNum < children.length && mapNum !== 0 ? 'is-map' : ''}`">
+      <view class="wd-tabs__nav">
+        <view class="wd-tabs__nav--wrap">
+          <scroll-view :scroll-x="innerSlidable" scroll-with-animation :scroll-left="state.scrollLeft">
+            <view class="wd-tabs__nav-container">
+              <view
+                v-for="(item, index) in children"
+                @click="handleSelect(index)"
+                :key="index"
+                :class="`wd-tabs__nav-item ${state.activeIndex === index ? 'is-active' : ''} ${item.disabled ? 'is-disabled' : ''}`"
+                :style="state.activeIndex === index ? (color ? 'color:' + color : '') : inactiveColor ? 'color:' + inactiveColor : ''"
+              >
+                <wd-badge custom-class="wd-tabs__nav-item-badge" v-if="item.badgeProps" v-bind="item.badgeProps">
+                  <text class="wd-tabs__nav-item-text">{{ item.title }}</text>
+                </wd-badge>
+                <text v-else class="wd-tabs__nav-item-text">{{ item.title }}</text>
+                <view class="wd-tabs__line wd-tabs__line--inner" v-if="state.activeIndex === index && state.useInnerLine"></view>
+              </view>
+              <view class="wd-tabs__line" :style="state.lineStyle"></view>
+            </view>
+          </scroll-view>
+        </view>
+        <view class="wd-tabs__map" v-if="mapNum < children.length && mapNum !== 0">
+          <view class="wd-tabs__map-btn" @click="toggleMap">
+            <view :class="`wd-tabs__map-arrow ${state.animating ? 'is-open' : ''}`">
+              <wd-icon name="arrow-down" />
+            </view>
+          </view>
+          <view class="wd-tabs__map-header" :style="`${state.mapShow ? '' : 'display:none;'}  ${state.animating ? 'opacity:1;' : ''}`">
+            {{ mapTitle || translate('all') }}
+          </view>
+          <view :class="`wd-tabs__map-body ${state.animating ? 'is-open' : ''}`" :style="state.mapShow ? '' : 'display:none'">
+            <view class="wd-tabs__map-nav-item" v-for="(item, index) in children" :key="index" @click="handleSelect(index)">
+              <view :class="`wd-tabs__map-nav-btn ${state.activeIndex === index ? 'is-active' : ''}  ${item.disabled ? 'is-disabled' : ''}`">
+                {{ item.title }}
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="wd-tabs__container" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
+        <view :class="['wd-tabs__body', animated ? 'is-animated' : '']" :style="bodyStyle">
+          <slot />
+        </view>
+      </view>
+
+      <view class="wd-tabs__mask" :style="`${state.mapShow ? '' : 'display:none;'}  ${state.animating ? 'opacity:1' : ''}`" @click="toggleMap"></view>
+    </view>
+  </template>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tabs',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdSticky from '../wd-sticky/wd-sticky.vue'
+import wdStickyBox from '../wd-sticky-box/wd-sticky-box.vue'
+import { computed, getCurrentInstance, onMounted, watch, nextTick, reactive, type CSSProperties, type ComponentInstance } from 'vue'
+import { addUnit, checkNumRange, debounce, getRect, isDef, isNumber, isString, objToStyle } from '../common/util'
+import { useTouch } from '../composables/useTouch'
+import { TABS_KEY, tabsProps, type TabsExpose } from './types'
+import { useChildren } from '../composables/useChildren'
+import { useTranslate } from '../composables/useTranslate'
+
+const $item = '.wd-tabs__nav-item'
+const $itemText = '.wd-tabs__nav-item-text'
+const $container = '.wd-tabs__nav-container'
+
+const props = defineProps(tabsProps)
+const emit = defineEmits(['change', 'disabled', 'click', 'update:modelValue'])
+
+const { translate } = useTranslate('tabs')
+
+const state = reactive({
+  activeIndex: 0, // 选中值的索引，默认第一个
+  lineStyle: 'display:none;', // 激活项边框线样式
+  useInnerLine: false, // 是否使用内部激活项边框线，当外部激活下划线未成功渲染时显示内部定位的
+  inited: false, // 是否初始化
+  animating: false, // 是否动画中
+  mapShow: false, // map的开关
+  scrollLeft: 0 // scroll-view偏移量
+})
+
+const { children, linkChildren } = useChildren(TABS_KEY)
+linkChildren({ state, props })
+
+const { proxy } = getCurrentInstance() as any
+
+const touch = useTouch()
+
+const innerSlidable = computed(() => {
+  return props.slidable === 'always' || children.length > props.slidableNum
+})
+
+const bodyStyle = computed(() => {
+  if (!props.animated) {
+    return ''
+  }
+
+  return objToStyle({
+    left: -100 * state.activeIndex + '%',
+    'transition-duration': props.duration + 'ms',
+    '-webkit-transition-duration': props.duration + 'ms'
+  })
+})
+
+const getTabName = (tab: ComponentInstance<any>, index: number) => {
+  return isDef(tab.name) ? tab.name : index
+}
+
+/**
+ * 更新激活项
+ * @param value 激活值
+ * @param init 是否已初始化
+ * @param setScroll // 是否设置scroll-view滚动
+ */
+const updateActive = (value: number | string = 0, init: boolean = false, setScroll: boolean = true) => {
+  // 没有tab子元素，不执行任何操作
+  if (children.length === 0) return
+
+  value = getActiveIndex(value)
+  // 被禁用，不执行任何操作
+  if (children[value].disabled) return
+  state.activeIndex = value
+  if (setScroll) {
+    updateLineStyle(init === false)
+    scrollIntoView()
+  }
+  setActiveTab()
+}
+
+/**
+ * @description 修改选中的tab Index
+ * @param {String |Number } value - radio绑定的value或者tab索引，默认值0
+ * @param {Boolean } init - 是否伴随初始化操作
+ */
+const setActive = debounce(updateActive, 100, { leading: true })
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    if (!isNumber(newValue) && !isString(newValue)) {
+      console.error('[wot design] error(wd-tabs): the type of value should be number or string')
+    }
+    // 保证不为非空字符串，小于0的数字
+    if (newValue === '' || !isDef(newValue)) {
+      // eslint-disable-next-line quotes
+      console.error("[wot design] error(wd-tabs): tabs's value cannot be '' null or undefined")
+    }
+    if (typeof newValue === 'number' && newValue < 0) {
+      // eslint-disable-next-line quotes
+      console.error("[wot design] error(wd-tabs): tabs's value cannot be less than zero")
+    }
+  },
+  {
+    immediate: true,
+    deep: true
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    const index = getActiveIndex(newValue)
+    setActive(newValue, false, index !== state.activeIndex)
+  },
+  {
+    immediate: false,
+    deep: true
+  }
+)
+
+watch(
+  () => children.length,
+  () => {
+    if (state.inited) {
+      nextTick(() => {
+        setActive(props.modelValue)
+      })
+    }
+  }
+)
+
+watch(
+  () => props.slidableNum,
+  (newValue) => {
+    checkNumRange(newValue, 'slidableNum')
+  }
+)
+
+watch(
+  () => props.mapNum,
+  (newValue) => {
+    checkNumRange(newValue, 'mapNum')
+  }
+)
+
+onMounted(() => {
+  state.inited = true
+  nextTick(() => {
+    updateActive(props.modelValue, true)
+    state.useInnerLine = true
+  })
+})
+
+function toggleMap() {
+  if (state.mapShow) {
+    state.animating = false
+    setTimeout(() => {
+      state.mapShow = false
+    }, 300)
+  } else {
+    state.mapShow = true
+    setTimeout(() => {
+      state.animating = true
+    }, 100)
+  }
+}
+
+/**
+ * 更新 underline的偏移量
+ * @param animation 是否开启动画
+ */
+async function updateLineStyle(animation: boolean = true) {
+  if (!state.inited) return
+  const { autoLineWidth, lineWidth, lineHeight } = props
+  try {
+    const lineStyle: CSSProperties = {}
+    if (isDef(lineWidth)) {
+      lineStyle.width = addUnit(lineWidth)
+    } else {
+      if (autoLineWidth) {
+        const textRects = await getRect($itemText, true, proxy)
+        const textWidth = Number(textRects[state.activeIndex].width)
+        lineStyle.width = addUnit(textWidth)
+      }
+    }
+    if (isDef(lineHeight)) {
+      lineStyle.height = addUnit(lineHeight)
+      lineStyle.borderRadius = `calc(${addUnit(lineHeight)} / 2)`
+    }
+    const rects = await getRect($item, true, proxy)
+    const rect = rects[state.activeIndex]
+    let left = rects.slice(0, state.activeIndex).reduce((prev, curr) => prev + Number(curr.width), 0) + Number(rect.width) / 2
+    if (left) {
+      lineStyle.transform = `translateX(${left}px) translateX(-50%)`
+      if (animation) {
+        lineStyle.transition = 'width 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);'
+      }
+      state.useInnerLine = false
+      state.lineStyle = objToStyle(lineStyle)
+    }
+  } catch (error) {
+    console.error('[wot design] error(wd-tabs): update line style failed', error)
+  }
+}
+
+function setActiveTab() {
+  if (!state.inited) return
+  const name = getTabName(children[state.activeIndex], state.activeIndex)
+  if (name !== props.modelValue) {
+    emit('change', {
+      index: state.activeIndex,
+      name: name
+    })
+    emit('update:modelValue', name)
+  }
+}
+
+function scrollIntoView() {
+  if (!state.inited) return
+  Promise.all([getRect($item, true, proxy), getRect($container, false, proxy)]).then(([navItemsRects, navRect]) => {
+    // 选中元素
+    const selectItem = navItemsRects[state.activeIndex]
+    // 选中元素之前的节点的宽度总和
+    const offsetLeft = (navItemsRects as any).slice(0, state.activeIndex).reduce((prev: any, curr: any) => prev + curr.width, 0)
+    // scroll-view滑动到selectItem的偏移量
+    const left = offsetLeft - ((navRect as any).width - Number(selectItem.width)) / 2
+    if (left === state.scrollLeft) {
+      state.scrollLeft = left + Math.random() / 10000
+    } else {
+      state.scrollLeft = left
+    }
+  })
+}
+
+/**
+ * @description 单击tab的处理
+ * @param index
+ */
+function handleSelect(index: number) {
+  if (index === undefined) return
+  const { disabled } = children[index]
+  const name = getTabName(children[index], index)
+
+  if (disabled) {
+    emit('disabled', {
+      index,
+      name
+    })
+    return
+  }
+  state.mapShow && toggleMap()
+  setActive(index)
+  emit('click', {
+    index,
+    name
+  })
+}
+function onTouchStart(event: any) {
+  if (!props.swipeable) return
+  touch.touchStart(event)
+}
+function onTouchMove(event: any) {
+  if (!props.swipeable) return
+  touch.touchMove(event)
+}
+function onTouchEnd() {
+  if (!props.swipeable) return
+  const { direction, deltaX, offsetX } = touch
+  const minSwipeDistance = 50
+  if (direction.value === 'horizontal' && offsetX.value >= minSwipeDistance) {
+    if (deltaX.value > 0 && state.activeIndex !== 0) {
+      setActive(state.activeIndex - 1)
+    } else if (deltaX.value < 0 && state.activeIndex !== children.length - 1) {
+      setActive(state.activeIndex + 1)
+    }
+  }
+}
+function getActiveIndex(value: number | string) {
+  // name代表的索引超过了children长度的边界，自动用0兜底
+  if (isNumber(value) && value >= children.length) {
+    // eslint-disable-next-line prettier/prettier
+    console.error('[wot design] warning(wd-tabs): the type of tabs\' value is Number shouldn\'t be less than its children')
+    value = 0
+  }
+  // 如果是字符串直接匹配，匹配不到用0兜底
+  if (isString(value)) {
+    const index = children.findIndex((item) => item.name === value)
+    value = index === -1 ? 0 : index
+  }
+
+  return value
+}
+
+defineExpose<TabsExpose>({
+  setActive,
+  scrollIntoView,
+  updateLineStyle
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tag/index.scss b/src/uni_modules/wot-design-uni/components/wd-tag/index.scss
new file mode 100644
index 0000000..3285d58
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tag/index.scss
@@ -0,0 +1,115 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+@mixin tag-type-style ($normalColor, $normalBg) {
+  background: $normalBg;
+
+  @include when(plain) {
+    background: transparent;
+    color: $normalColor;
+    border: 1px solid $normalColor;
+    padding: 0 4px;
+  }
+  @include when(round) {
+    line-height: 1.2;
+    font-size: $-tag-fs;
+    padding: 4px 11px;
+    background: transparent;
+    color: if($normalColor != $-tag-info-color, $normalColor, $-tag-round-color);
+    border: 1px solid if($normalColor != $-tag-info-color, $normalColor, $-tag-round-border-color);
+    border-radius: $-tag-round-radius;
+  }
+  @include when(mark) {
+    padding: 1px 6px;
+    border-radius: $-tag-mark-radius;
+
+    @include when(plain) {
+      padding: 0 6px;
+    }
+  }
+  @include when(active) {
+    color: $-tag-primary-color;
+    border-color: $-tag-primary-color;
+  }
+}
+@include b(tag) {
+  font-size: $-tag-small-fs;
+  display: inline-block;
+  color: $-tag-color;
+  padding: 0 3px;
+  border-radius: 2px;
+  transition: opacity .3s;
+  vertical-align: middle;
+  line-height: initial;
+
+  @include when(default) {
+    @include tag-type-style($-tag-info-color, $-tag-info-bg);
+  }
+  @include when(primary) {
+    @include tag-type-style($-tag-primary-color, $-tag-primary-bg);
+  }
+  @include when(danger) {
+    @include tag-type-style($-tag-danger-color, $-tag-danger-bg);
+  }
+  @include when(warning) {
+    @include tag-type-style($-tag-warning-color, $-tag-warning-bg);
+  }
+  @include when(success) {
+    @include tag-type-style($-tag-success-color, $-tag-success-bg);
+  }
+  @include when(icon) {
+    font-size: $-tag-fs;
+    line-height: 1.2;
+    padding: 2px 5px;
+  }
+  @include when(dynamic) {
+    box-sizing: border-box;
+    width: 88px;
+    transition: .3s;
+
+    &:active {
+      color: $-tag-primary-color;
+      border-color: $-tag-primary-color;
+    }
+  }
+  @include when(dynamic-input) {
+    border-color: $-tag-primary-color;
+  }
+  @include edeep(icon) {
+    display: inline-block;
+    margin-right: 4px;
+    font-size: $-tag-fs;
+    line-height: 1.2;
+    vertical-align: baseline;
+  }
+  @include e(text) {
+    display: inline-block;
+    vertical-align: text-top;
+  }
+  @include e(add-text) {
+    width: 60px;
+    height: 14px;
+    min-height: 14px;
+    display: inline-block;
+    font-size: $-tag-fs;
+    vertical-align: middle;
+    padding: 0;
+  }
+  @include e(close) {
+    display: inline-block;
+    margin-left: 24px;
+    margin-right: -4px;
+    font-size: $-tag-close-size;
+    height: 14px;
+    line-height: 1.1;
+    vertical-align: text-bottom;
+    color: $-tag-close-color;
+
+    &:active {
+      color: $-tag-close-active-color;
+    }
+  }
+  @include edeep(add) {
+    vertical-align: bottom;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-tag/types.ts b/src/uni_modules/wot-design-uni/components/wd-tag/types.ts
new file mode 100644
index 0000000..39cc0e9
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tag/types.ts
@@ -0,0 +1,81 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type TagType = 'default' | 'primary' | 'success' | 'warning' | 'danger'
+
+export const tagProps = {
+  ...baseProps,
+
+  /**
+   * 是否开启图标插槽
+   * 类型：boolean
+   * 默认值：false
+   */
+  useIconSlot: makeBooleanProp(false),
+
+  /**
+   * 标签类型
+   * 类型：string
+   * 可选值：'default' / 'primary' / 'danger' / 'warning' / 'success'
+   * 默认值：'default'
+   */
+  type: makeStringProp<TagType>('default'),
+
+  /**
+   * 左侧图标
+   * 类型：string
+   * 默认值：空字符串
+   */
+  icon: makeStringProp(''),
+
+  /**
+   * 是否可关闭（只对圆角类型支持）
+   * 类型：boolean
+   * 默认值：false
+   */
+  closable: makeBooleanProp(false),
+
+  /**
+   * 幽灵类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  plain: makeBooleanProp(false),
+
+  /**
+   * 是否为新增标签
+   * 类型：boolean
+   * 默认值：false
+   */
+  dynamic: makeBooleanProp(false),
+
+  /**
+   * 文字颜色
+   * 类型：string
+   * 默认值：空字符串
+   */
+  color: makeStringProp(''),
+
+  /**
+   * 背景色和边框色
+   * 类型：string
+   * 默认值：空字符串
+   */
+  bgColor: makeStringProp(''),
+
+  /**
+   * 圆角类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  round: makeBooleanProp(false),
+
+  /**
+   * 标记类型
+   * 类型：boolean
+   * 默认值：false
+   */
+  mark: makeBooleanProp(false)
+}
+
+export type TagProps = ExtractPropTypes<typeof tagProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tag/wd-tag.vue b/src/uni_modules/wot-design-uni/components/wd-tag/wd-tag.vue
new file mode 100644
index 0000000..3944bd8
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tag/wd-tag.vue
@@ -0,0 +1,148 @@
+<template>
+  <view :class="rootClass" :style="rootStyle" @click="handleClick">
+    <view v-if="useIconSlot" class="wd-tag__icon">
+      <slot name="icon" />
+    </view>
+    <wd-icon v-else-if="icon" :name="icon" custom-class="wd-tag__icon" />
+    <view class="wd-tag__text" :style="textStyle">
+      <slot />
+    </view>
+    <view class="wd-tag__close" v-if="closable && round" @click.stop="handleClose">
+      <wd-icon name="error-fill" />
+    </view>
+    <input
+      v-if="dynamicInput && dynamic"
+      class="wd-tag__add-text"
+      :placeholder="translate('placeholder')"
+      type="text"
+      :focus="true"
+      v-model="dynamicValue"
+      @blur="handleBlur"
+      @confirm="handleConfirm"
+    />
+    <view v-else-if="dynamic" class="wd-tag__text" :style="textStyle" @click.stop="handleAdd">
+      <slot name="add" v-if="$slots.add"></slot>
+      <template v-else>
+        <wd-icon name="add" custom-class="wd-tag__add wd-tag__icon" />
+        <text>{{ translate('add') }}</text>
+      </template>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-tag',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { objToStyle } from '../common/util'
+import { computed, ref, watch } from 'vue'
+import { useTranslate } from '../composables/useTranslate'
+import { tagProps } from './types'
+
+const props = defineProps(tagProps)
+const emit = defineEmits(['click', 'close', 'confirm'])
+
+const { translate } = useTranslate('tag')
+
+const tagClass = ref<string>('')
+const dynamicValue = ref<string>('')
+const dynamicInput = ref<boolean>(false)
+
+watch(
+  [() => props.useIconSlot, () => props.icon, () => props.plain, () => props.dynamic, () => props.round, () => props.mark],
+  () => {
+    computeTagClass()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.type,
+  (newValue) => {
+    if (!newValue) return
+    // type: 'primary', 'danger', 'warning', 'success'
+    const type = ['primary', 'danger', 'warning', 'success', 'default']
+    if (type.indexOf(newValue) === -1) console.error(`type must be one of ${type.toString()}`)
+    computeTagClass()
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => dynamicInput.value,
+  () => {
+    computeTagClass()
+  },
+  { deep: true, immediate: true }
+)
+
+const rootClass = computed(() => {
+  return `wd-tag ${props.customClass} ${tagClass.value}`
+})
+
+const rootStyle = computed(() => {
+  const rootStyle: Record<string, any> = {}
+  if (!props.plain && props.bgColor) {
+    rootStyle['background'] = props.bgColor
+  }
+  if (props.bgColor) {
+    rootStyle['border-color'] = props.bgColor
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+const textStyle = computed(() => {
+  const textStyle: Record<string, any> = {}
+  if (props.color) {
+    textStyle['color'] = props.color
+  }
+  return objToStyle(textStyle)
+})
+
+function computeTagClass() {
+  const { type, plain, round, mark, dynamic, icon, useIconSlot } = props
+  let tagClassList: string[] = []
+  type && tagClassList.push(`is-${type}`)
+  plain && tagClassList.push('is-plain')
+  round && tagClassList.push('is-round')
+  mark && tagClassList.push('is-mark')
+  dynamic && tagClassList.push('is-dynamic')
+  dynamicInput.value && tagClassList.push('is-dynamic-input')
+  if (icon || useIconSlot) tagClassList.push('is-icon')
+  tagClass.value = tagClassList.join(' ')
+}
+
+function handleClick(event: any) {
+  emit('click', event)
+}
+function handleClose(event: any) {
+  emit('close', event)
+}
+function handleAdd() {
+  dynamicInput.value = true
+  dynamicValue.value = ''
+}
+function handleBlur() {
+  setDynamicInput()
+}
+function handleConfirm(event: any) {
+  setDynamicInput()
+  emit('confirm', {
+    value: event.detail.value
+  })
+}
+function setDynamicInput() {
+  dynamicInput.value = false
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-text/index.scss b/src/uni_modules/wot-design-uni/components/wd-text/index.scss
new file mode 100644
index 0000000..888649d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-text/index.scss
@@ -0,0 +1,37 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+
+
+@include b(text) {
+
+  @include when(bold) {
+    font-weight: bold;
+  }
+
+  @for $i from 1 through 5 {
+    &.is-lines-#{$i} {
+      @include multiEllipsis($i);
+    }
+  }
+
+  @include when(default) {
+    color: $-text-info-color;
+  }
+
+  @include when(primary) {
+    color: $-text-primary-color;
+  }
+
+  @include when(error) {
+    color: $-text-error-color;
+  }
+
+  @include when(warning) {
+    color: $-text-warning-color;
+  }
+
+  @include when(success) {
+    color: $-text-success-color;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-text/types.ts b/src/uni_modules/wot-design-uni/components/wd-text/types.ts
new file mode 100644
index 0000000..6aacac8
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-text/types.ts
@@ -0,0 +1,98 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export type TextType = 'default' | 'primary' | 'success' | 'warning' | 'error'
+
+export const textProps = {
+  ...baseProps,
+  /**
+   * 主题类型
+   * 类型：string
+   * 可选值：'default' /'primary' / 'error' / 'warning' / 'success'
+   * 默认值：'default'
+   */
+  type: makeStringProp<TextType>('default'),
+  /**
+   * 文字
+   * 类型：string | number
+   * 默认值：'空字符串'
+   */
+  text: makeNumericProp(''),
+  /**
+   * 字体大小
+   * 类型：string
+   * 默认值：'空字符串'
+   */
+  size: makeStringProp(''),
+  /**
+   * 文本处理的匹配模式
+   * 可选值：'text-普通文本' / 'date - 日期' / 'phone - 手机号' / 'name - 姓名' / 'price - 金额'
+   * 类型：string
+   * 默认值：'text'
+   */
+  mode: makeStringProp('text'),
+  /**
+   * 文字装饰，下划线，中划线等
+   * 可选值：'underline/line-through/overline'
+   * 类型：string
+   * 默认值：'none'
+   */
+  decoration: makeStringProp('none'),
+
+  /**
+   * mode=phone时，点击文本是否拨打电话
+   * 类型：boolean
+   * 默认值：false
+   */
+  call: makeBooleanProp(false),
+  /**
+   * 是否粗体，默认normal
+   * 类型：boolean
+   * 默认值：false
+   */
+  bold: makeBooleanProp(false),
+  /**
+   * 是否脱敏,当mode为phone和name时生效
+   * 类型：boolean
+   * 默认值：false
+   */
+  format: makeBooleanProp(false),
+  /**
+   * 文本颜色
+   * 类型：string
+   * 默认值：''
+   */
+  color: makeStringProp(''),
+  /**
+   * 前置插槽
+   * 类型：string
+   * 默认值：''
+   */
+  prefix: String,
+  /**
+   * 后置插槽
+   * 类型：string
+   * 默认值：''
+   */
+  suffix: String,
+  /**
+   * 文本显示的行数，如果设置，超出此行数，将会显示省略号。最大值为5。
+   */
+  lines: Number,
+  /**
+   * 文本行高
+   * 类型：string
+   * 默认值：''
+   */
+  lineHeight: makeStringProp(''),
+  /**
+   * 自定义根节点样式
+   */
+  customStyle: makeStringProp(''),
+  /**
+   * 自定义根节点样式类
+   */
+  customClass: makeStringProp('')
+}
+
+export type TextProps = ExtractPropTypes<typeof textProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-text/wd-text.vue b/src/uni_modules/wot-design-uni/components/wd-text/wd-text.vue
new file mode 100644
index 0000000..599ad66
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-text/wd-text.vue
@@ -0,0 +1,139 @@
+<template>
+  <text @click="handleClick" :class="rootClass" :style="rootStyle">
+    <slot v-if="$slots.prefix || prefix" name="prefix">{{ prefix }}</slot>
+    <text>{{ formattedText }}</text>
+    <slot v-if="$slots.suffix || suffix" name="suffix">{{ suffix }}</slot>
+  </text>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-text',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue'
+import { isDef, objToStyle } from '../common/util'
+import { textProps } from './types'
+import { dayjs } from '../common/dayjs'
+
+// 获取组件的 props 和 emit 函数
+const props = defineProps(textProps)
+const emit = defineEmits(['click'])
+
+// 存储文本类名的响应式变量
+const textClass = ref<string>('')
+
+// 监听 props 变化，合并 watch 逻辑
+watch(
+  () => ({
+    type: props.type,
+    text: props.text,
+    mode: props.mode,
+    color: props.color,
+    bold: props.bold,
+    lines: props.lines,
+    format: props.format
+  }),
+  ({ type }) => {
+    // 验证 type 属性
+    const types = ['primary', 'error', 'warning', 'success', 'default']
+    if (type && !types.includes(type)) {
+      console.error(`type must be one of ${types.toString()}`)
+    }
+    computeTextClass()
+  },
+  { deep: true, immediate: true }
+)
+
+// 计算根元素的类名
+const rootClass = computed(() => {
+  return `wd-text ${props.customClass} ${textClass.value}`
+})
+
+// 计算根元素的样式
+const rootStyle = computed(() => {
+  const rootStyle: Record<string, any> = {}
+  if (props.color) {
+    rootStyle['color'] = props.color
+  }
+  if (props.size) {
+    rootStyle['font-size'] = `${props.size}`
+  }
+  if (props.lineHeight) {
+    rootStyle['line-height'] = `${props.lineHeight}`
+  }
+  if (props.decoration) {
+    rootStyle['text-decoration'] = `${props.decoration}`
+  }
+  return `${objToStyle(rootStyle)}${props.customStyle}`
+})
+
+// 计算文本类名的函数
+function computeTextClass() {
+  const { type, color, bold, lines } = props
+  const textClassList: string[] = []
+  if (!color) {
+    textClassList.push(`is-${type}`)
+  }
+  if (isDef(lines)) {
+    textClassList.push(`is-lines-${lines}`)
+  }
+  bold && textClassList.push('is-bold')
+  textClass.value = textClassList.join(' ')
+}
+
+// 格式化文本的函数
+function formatText(text: string, format: boolean, mode: string): string {
+  if (format) {
+    if (mode === 'phone') {
+      return text.replace(/^(\d{3})\d{4}(\d{4})$/, '$1****$2')
+    } else if (mode === 'name') {
+      return text.replace(/^(.).*(.)$/, '$1**$2')
+    } else {
+      throw new Error('mode must be one of phone or name for encryption')
+    }
+  }
+  return text
+}
+
+// 格式化数字的函数
+function formatNumber(num: number | string): string {
+  num = Number(num).toFixed(2)
+  const x = num.split('.')
+  let x1 = x[0]
+  const x2 = x.length > 1 ? '.' + x[1] : ''
+  const rgx = /(\d+)(\d{3})/
+  while (rgx.test(x1)) {
+    x1 = x1.replace(rgx, '$1,$2')
+  }
+  return x1 + x2
+}
+
+// 计算格式化后的文本
+const formattedText = computed(() => {
+  const { text, mode, format } = props
+  if (mode === 'date') {
+    return dayjs(Number(text)).format('YYYY-MM-DD')
+  }
+  if (mode === 'price') {
+    return formatNumber(text)
+  }
+  return formatText(`${text}`, format, mode)
+})
+
+// 处理点击事件
+function handleClick(event: Event) {
+  emit('click', event)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-textarea/index.scss b/src/uni_modules/wot-design-uni/components/wd-textarea/index.scss
new file mode 100644
index 0000000..7179c05
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-textarea/index.scss
@@ -0,0 +1,339 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(textarea) {
+    background: $-dark-background2;
+
+    &::after {
+      background: $-dark-color-gray;
+    }
+
+    @include when(not-empty) {
+      &:not(.is-disabled) {
+        &::after {
+          background-color: $-dark-color;
+        }
+      }
+    }
+
+    @include e(value) {
+      background: $-dark-background2;
+    }
+
+    @include e(inner) {
+      color: $-dark-color;
+
+      &::-webkit-input-placeholder {
+        color: $-dark-color3;
+      }
+    }
+
+    @include e(count) {
+      color: $-dark-color3;
+      background: transparent;
+    }
+
+    @include e(count-current) {
+      color: $-dark-color;
+    }
+
+    :deep(.wd-textarea__icon),
+    :deep(.wd-textarea__clear) {
+      color: $-dark-color;
+      background: transparent;
+    }
+
+    @include when(cell) {
+      background-color: $-dark-background2;
+
+      @include when(border) {
+        @include halfPixelBorder("top", $-textarea-cell-padding, $-dark-border-color);
+      }
+    }
+
+    @include when(disabled) {
+
+      .wd-textarea__inner {
+        color: $-dark-color-gray;
+        background: transparent;
+      }
+    }
+
+
+    @include e(label) {
+      color: $-dark-color;
+    }
+  }
+}
+
+@include b(textarea) {
+  position: relative;
+  -webkit-tap-highlight-color: transparent;
+  text-align: left;
+  background: $-textarea-bg;
+  padding: $-textarea-cell-padding $-textarea-padding;
+
+  &::after {
+    position: absolute;
+    display: none;
+    content: "";
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background: $-textarea-border-color;
+    transform: scaleY(0.5);
+    transition: background-color 0.2s ease-in-out;
+  }
+
+
+
+  @include e(label) {
+    position: relative;
+    display: flex;
+    width: $-input-cell-label-width;
+    color: $-cell-title-color;
+    margin-right: $-cell-padding;
+    box-sizing: border-box;
+    font-size: $-textarea-fs;
+    flex-shrink: 0;
+
+    @include when(required) {
+      padding-left: 12px;
+
+      &::after {
+        position: absolute;
+        left: 0;
+        top: 2px;
+        content: "*";
+        font-size: $-cell-required-size;
+        line-height: 1.1;
+        color: $-cell-required-color;
+      }
+    }
+  }
+
+  @include e(label-inner) {
+    display: inline-block;
+    line-height: $-cell-line-height;
+    font-size: $-textarea-fs;
+  }
+
+  @include e(prefix) {
+    margin-right: $-textarea-icon-margin;
+    font-size: $-textarea-fs;
+    line-height: initial;
+
+    :deep(.wd-textarea__icon) {
+      margin-left: 0;
+    }
+  }
+
+  @include e(suffix) {
+    flex-shrink: 0;
+    line-height: initial;
+  }
+
+  @include e(value) {
+    position: relative;
+    padding: 0;
+    font-size: 0;
+    background: $-textarea-bg;
+    box-sizing: border-box;
+
+    @include when(show-limit) {
+      padding-bottom: 36px;
+    }
+
+    @include when(suffix) {
+      padding-right: calc($-textarea-icon-size + 8px);
+    }
+  }
+
+
+  @include e(inner) {
+    padding: 0;
+    width: 100%;
+    font-size: $-textarea-fs;
+    line-height: $-cell-line-height;
+    color: $-textarea-color;
+    outline: none;
+    background: none;
+    border: none;
+    box-sizing: border-box;
+    word-break: break-word;
+    min-height: 24px;
+
+    &::-webkit-input-placeholder {
+      color: $-input-placeholder-color;
+    }
+  }
+
+  @include e(suffix) {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    top: 0;
+    bottom: 0;
+  }
+
+  @include edeep(icon) {
+    margin-left: $-textarea-icon-margin;
+    font-size: $-textarea-icon-size;
+    color: $-textarea-icon-color;
+    background: $-textarea-bg;
+  }
+
+  @include edeep(clear) {
+    margin-left: $-textarea-icon-margin;
+    font-size: $-textarea-icon-size;
+    color: $-textarea-clear-color;
+    vertical-align: middle;
+    background: $-textarea-bg;
+    line-height: $-cell-line-height;
+  }
+
+
+  @include e(count) {
+    position: absolute;
+    bottom: 8px;
+    right: 0;
+    font-size: $-textarea-count-fs;
+    color: $-textarea-count-color;
+    background: $-textarea-bg;
+    line-height: 20px;
+    display: inline-flex;
+  }
+
+  @include e(count-current) {
+    color: $-textarea-count-current-color;
+
+    @include when(error) {
+      color: $-input-error-color;
+    }
+  }
+
+  @include e(readonly-mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(error-message) {
+    color: $-form-item-error-message-color;
+    font-size: $-form-item-error-message-font-size;
+    line-height: $-form-item-error-message-line-height;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  @include when(not-empty) {
+    &:not(.is-disabled) {
+      &::after {
+        background-color: $-textarea-not-empty-border-color;
+      }
+    }
+  }
+
+  @include when(disabled) {
+
+    .wd-textarea__inner {
+      color: $-input-disabled-color;
+      background: transparent;
+    }
+  }
+
+  @include when(error) {
+
+    .wd-textarea__inner {
+      color: $-input-error-color;
+      background: transparent;
+    }
+  }
+
+  @include when(auto-height) {
+    &:not(.is-cell) {
+      padding: 5px 0;
+    }
+
+    &::after {
+      display: block;
+    }
+  }
+
+  @include when(no-border) {
+    &::after {
+      display: none;
+    }
+  }
+
+  @include when(cell) {
+    display: flex;
+    line-height: $-cell-line-height;
+
+    &.is-error::after {
+      background: $-textarea-cell-border-color;
+    }
+
+    .wd-textarea__value {
+      flex: 1;
+    }
+
+    :deep(.wd-textarea__icon) {
+      display: inline-flex;
+      align-items: center;
+      height: $-textarea-cell-height;
+      line-height: $-textarea-cell-height;
+    }
+
+    .wd-textarea__prefix {
+      display: inline-block;
+      margin-right: $-cell-icon-right;
+    }
+
+    &.wd-textarea::after {
+      display: none;
+    }
+
+    .wd-textarea__suffix {
+      right: 0;
+    }
+
+    @include when(center) {
+      align-items: center;
+    }
+
+    @include when(border) {
+      @include halfPixelBorder("top", $-textarea-cell-padding);
+    }
+  }
+
+  @include when(large) {
+    padding: $-textarea-cell-padding-large;
+
+    .wd-textarea__prefix {
+      font-size: $-textarea-fs-large;
+    }
+
+    .wd-textarea__label-inner {
+      font-size: $-textarea-fs-large;
+    }
+
+    .wd-textarea__inner {
+      font-size: $-textarea-fs-large;
+    }
+
+    .wd-textarea__count {
+      font-size: $-textarea-count-fs-large;
+    }
+
+    :deep(.wd-textarea__icon),
+    :deep(.wd-textarea__clear) {
+      font-size: $-textarea-icon-size-large;
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-textarea/placeholder.scss b/src/uni_modules/wot-design-uni/components/wd-textarea/placeholder.scss
new file mode 100644
index 0000000..8abd57a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-textarea/placeholder.scss
@@ -0,0 +1,20 @@
+@import "../common/abstracts/variable";
+@import "../common/abstracts/mixin";
+
+.wot-theme-dark {
+  @include b(textarea) {
+    @include e(placeholder) {
+      color: $-dark-color3;
+    }
+  }
+}
+
+@include b(textarea) {
+  @include e(placeholder) {
+    color: $-input-placeholder-color;
+
+    &.is-error {
+      color: $-input-error-color;
+    }
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-textarea/types.ts b/src/uni_modules/wot-design-uni/components/wd-textarea/types.ts
new file mode 100644
index 0000000..689ad88
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-textarea/types.ts
@@ -0,0 +1,284 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+import type { FormItemRule } from '../wd-form/types'
+import type { InputClearTrigger, InputMode } from '../wd-input/types'
+
+export type ConfirmType = 'send' | 'search' | 'next' | 'go' | 'done'
+
+export const textareaProps = {
+  ...baseProps,
+  /**
+   * * 自定义文本域容器class名称。
+   * 类型：string
+   */
+  customTextareaContainerClass: makeStringProp(''),
+
+  /**
+   * * 自定义文本域class名称。
+   * 类型：string
+   */
+  customTextareaClass: makeStringProp(''),
+
+  /**
+   * * 自定义标签class名称。
+   * 类型：string
+   */
+  customLabelClass: makeStringProp(''),
+  // 原生属性
+  /**
+   * * 绑定值。
+   * 类型：string | number
+   */
+  modelValue: makeNumericProp(''),
+
+  /**
+   * * 占位文本。
+   * 类型：string
+   * 默认值：'请输入...'
+   */
+  placeholder: String,
+
+  /**
+   * 指定placeholder的样式。
+   * 类型：string
+   */
+  placeholderStyle: String,
+
+  /**
+   * * 指定placeholder的样式类。
+   * 类型：string
+   * 默认值：空字符串
+   */
+  placeholderClass: makeStringProp(''),
+
+  /**
+   * * 禁用输入框。
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * * 最大输入长度，设置为-1表示不限制最大长度。
+   * 类型：number
+   * 默认值：-1
+   */
+  maxlength: makeNumberProp(-1),
+
+  /**
+   * * 自动聚焦并拉起键盘。
+   * 类型：boolean
+   * 默认值：false
+   */
+  autoFocus: makeBooleanProp(false),
+
+  /**
+   * * 获取焦点。
+   * 类型：boolean
+   * 默认值：false
+   */
+  focus: makeBooleanProp(false),
+
+  /**
+   * * 是否自动增高输入框高度，style.height属性在auto-height生效时不生效。
+   * 类型：boolean
+   * 默认值：false
+   */
+  autoHeight: makeBooleanProp(false),
+
+  /**
+   * * 如果textarea处于position:fixed区域，需要设置此属性为true。
+   * 类型：boolean
+   * 默认值：false
+   */
+  fixed: makeBooleanProp(false),
+
+  /**
+   * * 指定光标与键盘的距离，取textarea距离底部的距离和cursor-spacing指定的距离的最小值作为实际距离。
+   * 类型：number
+   * 默认值：0
+   */
+  cursorSpacing: makeNumberProp(0),
+
+  /**
+   * * 指定focus时的光标位置。
+   * 类型：number
+   * 默认值：-1
+   */
+  cursor: makeNumberProp(-1),
+
+  /**
+   * * 设置键盘右下角按钮的文字。
+   * 类型：string
+   * 默认值：'done'
+   * 可选值有'done', 'go', 'next', 'search', 'send'
+   */
+  confirmType: String as PropType<ConfirmType>,
+
+  /**
+   * * 点击键盘右下角按钮时是否保持键盘不收起。
+   * 类型：boolean
+   * 默认值：false
+   */
+  confirmHold: makeBooleanProp(false),
+
+  /**
+   * * 是否显示键盘上方带有“完成”按钮那一栏。
+   * 类型：boolean
+   * 默认值：true
+   */
+  showConfirmBar: makeBooleanProp(true),
+
+  /**
+   * * 光标起始位置，自动聚集时有效，需与selection-end搭配使用。
+   * 类型：number
+   * 默认值：-1
+   */
+  selectionStart: makeNumberProp(-1),
+
+  /**
+   * * 光标结束位置，自动聚集时有效，需与selection-start搭配使用。
+   * 类型：number
+   * 默认值：-1
+   */
+  selectionEnd: makeNumberProp(-1),
+
+  /**
+   * * 键盘弹起时是否自动上推页面。
+   * 类型：boolean
+   * 默认值：true
+   */
+  adjustPosition: makeBooleanProp(true),
+
+  /**
+   * * 是否去掉iOS下的默认内边距。
+   * 类型：boolean
+   * 默认值：false
+   */
+  disableDefaultPadding: makeBooleanProp(false),
+
+  /**
+   * * focus状态下点击页面时是否不收起键盘。
+   * 类型：boolean
+   * 默认值：false
+   */
+  holdKeyboard: makeBooleanProp(false),
+
+  // 非原生属性
+  /**
+   * * 显示为密码框。
+   * 类型：boolean
+   * 默认值：false
+   */
+  showPassword: makeBooleanProp(false),
+
+  /**
+   * * 是否显示清空按钮。
+   * 类型：boolean
+   * 默认值：false
+   */
+  clearable: makeBooleanProp(false),
+
+  /**
+   * * 输入框只读状态。
+   * 类型：boolean
+   * 默认值：false
+   */
+  readonly: makeBooleanProp(false),
+
+  /**
+   * * 前置图标，icon组件中的图标类名。
+   * 类型：string
+   */
+  prefixIcon: String,
+  /**
+   * * 是否显示字数限制，需要同时设置maxlength。
+   * 类型：boolean
+   * 默认值：false
+   */
+  showWordLimit: makeBooleanProp(false),
+  /**
+   * 设置左侧标题。
+   * 类型：string
+   */
+  label: String,
+
+  /**
+   * 设置左侧标题宽度。
+   * 类型：string
+   */
+  labelWidth: makeStringProp(''),
+  /**
+   * * 设置输入框大小。
+   * 类型：string
+   */
+  size: String,
+
+  /**
+   * * 设置输入框错误状态（红色）。
+   * 类型：boolean
+   * 默认值：false
+   */
+  error: makeBooleanProp(false),
+
+  /**
+   * * 当存在label属性时，设置标题和输入框垂直居中，默认为顶部居中。
+   * 类型：boolean
+   * 默认值：false
+   */
+  center: makeBooleanProp(false),
+
+  /**
+   * * 非cell类型下是否隐藏下划线。
+   * 类型：boolean
+   * 默认值：false
+   */
+  noBorder: makeBooleanProp(false),
+
+  /**
+   * * cell类型下必填样式。
+   * 类型：boolean
+   * 默认值：false
+   */
+  required: makeBooleanProp(false),
+
+  /**
+   * * 表单域model字段名，在使用表单校验功能的情况下，该属性是必填的。
+   * 类型：string
+   */
+  prop: makeStringProp(''),
+
+  /**
+   * * 表单验证规则。
+   * 类型：FormItemRule[]
+   * 默认值：[]
+   */
+  rules: makeArrayProp<FormItemRule>(),
+  /**
+   * 显示清除图标的时机，always 表示输入框不为空时展示，focus 表示输入框聚焦且不为空时展示
+   * 类型: "focus" | "always"
+   * 默认值: "always"
+   */
+  clearTrigger: makeStringProp<InputClearTrigger>('always'),
+  /**
+   * 是否在点击清除按钮时聚焦输入框
+   * 类型: boolean
+   * 默认值: true
+   */
+  focusWhenClear: makeBooleanProp(true),
+  /**
+   * 是否忽略组件内对文本合成系统事件的处理。为 false 时将触发 compositionstart、compositionend、compositionupdate 事件，且在文本合成期间会触发 input 事件
+   * 类型: boolean
+   * 默认值: true
+   */
+  ignoreCompositionEvent: makeBooleanProp(true),
+  /**
+   * 它提供了用户在编辑元素或其内容时可能输入的数据类型的提示。在符合条件的高版本webview里，uni-app的web和app-vue平台中可使用本属性。
+   * 类型: InputMode
+   * 可选值: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | "password"
+   * 默认值: "text"
+   */
+  inputmode: makeStringProp<InputMode>('text')
+}
+
+export type TextareaProps = ExtractPropTypes<typeof textareaProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue b/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue
new file mode 100644
index 0000000..0a04af3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-textarea/wd-textarea.vue
@@ -0,0 +1,294 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <view v-if="label || $slots.label" :class="labelClass" :style="labelStyle">
+      <view v-if="prefixIcon || $slots.prefix" class="wd-textarea__prefix">
+        <wd-icon v-if="prefixIcon && !$slots.prefix" custom-class="wd-textarea__icon" :name="prefixIcon" @click="onClickPrefixIcon" />
+        <slot v-else name="prefix"></slot>
+      </view>
+      <view class="wd-textarea__label-inner">
+        <text v-if="label && !$slots.label">{{ label }}</text>
+        <slot v-else name="label"></slot>
+      </view>
+    </view>
+
+    <!-- 文本域 -->
+    <view :class="`wd-textarea__value ${showClear ? 'is-suffix' : ''} ${customTextareaContainerClass} ${showWordCount ? 'is-show-limit' : ''}`">
+      <textarea
+        :class="`wd-textarea__inner ${customTextareaClass}`"
+        v-model="inputValue"
+        :show-count="false"
+        :placeholder="placeholderValue"
+        :disabled="disabled || readonly"
+        :maxlength="maxlength"
+        :focus="focused"
+        :auto-focus="autoFocus"
+        :placeholder-style="placeholderStyle"
+        :placeholder-class="inputPlaceholderClass"
+        :auto-height="autoHeight"
+        :cursor-spacing="cursorSpacing"
+        :fixed="fixed"
+        :cursor="cursor"
+        :show-confirm-bar="showConfirmBar"
+        :selection-start="selectionStart"
+        :selection-end="selectionEnd"
+        :adjust-position="adjustPosition"
+        :hold-keyboard="holdKeyboard"
+        :confirm-type="confirmType"
+        :confirm-hold="confirmHold"
+        :disable-default-padding="disableDefaultPadding"
+        :ignoreCompositionEvent="ignoreCompositionEvent"
+        :inputmode="inputmode"
+        @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @confirm="handleConfirm"
+        @linechange="handleLineChange"
+        @keyboardheightchange="handleKeyboardheightchange"
+      />
+      <view v-if="errorMessage" class="wd-textarea__error-message">{{ errorMessage }}</view>
+
+      <view v-if="props.readonly" class="wd-textarea__readonly-mask" />
+      <view class="wd-textarea__suffix">
+        <wd-icon v-if="showClear" custom-class="wd-textarea__clear" name="error-fill" @click="handleClear" />
+        <view v-if="showWordCount" class="wd-textarea__count">
+          <text :class="countClass">
+            {{ currentLength }}
+          </text>
+          /{{ maxlength }}
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-textarea',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch, useSlots, type Slots } from 'vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { objToStyle, isDef, pause } from '../common/util'
+import { useCell } from '../composables/useCell'
+import { FORM_KEY, type FormItemRule } from '../wd-form/types'
+import { useParent } from '../composables/useParent'
+import { useTranslate } from '../composables/useTranslate'
+import { textareaProps } from './types'
+
+interface TextareaSlots extends Slots {
+  prefix?: () => any
+  label?: () => any
+}
+
+const { translate } = useTranslate('textarea')
+
+const props = defineProps(textareaProps)
+const emit = defineEmits([
+  'update:modelValue',
+  'clear',
+  'blur',
+  'focus',
+  'input',
+  'keyboardheightchange',
+  'confirm',
+  'linechange',
+  'clickprefixicon',
+  'click'
+])
+const slots = useSlots() as TextareaSlots
+
+const placeholderValue = computed(() => {
+  return isDef(props.placeholder) ? props.placeholder : translate('placeholder')
+})
+
+const clearing = ref<boolean>(false)
+const focused = ref<boolean>(false) // 控制聚焦
+const focusing = ref<boolean>(false) // 当前是否激活状态
+const inputValue = ref<string>('') // 输入框的值
+const cell = useCell()
+
+watch(
+  () => props.focus,
+  (newValue) => {
+    focused.value = newValue
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    inputValue.value = isDef(newValue) ? String(newValue) : ''
+  },
+  { immediate: true, deep: true }
+)
+
+const { parent: form } = useParent(FORM_KEY)
+
+/**
+ * 展示清空按钮
+ */
+const showClear = computed(() => {
+  const { disabled, readonly, clearable, clearTrigger } = props
+  if (clearable && !readonly && !disabled && inputValue.value && (clearTrigger === 'always' || (props.clearTrigger === 'focus' && focusing.value))) {
+    return true
+  } else {
+    return false
+  }
+})
+
+/**
+ * 展示字数统计
+ */
+const showWordCount = computed(() => {
+  const { disabled, readonly, maxlength, showWordLimit } = props
+  return Boolean(!disabled && !readonly && isDef(maxlength) && maxlength > -1 && showWordLimit)
+})
+
+// 表单校验错误信息
+const errorMessage = computed(() => {
+  if (form && props.prop && form.errorMessages && form.errorMessages[props.prop]) {
+    return form.errorMessages[props.prop]
+  } else {
+    return ''
+  }
+})
+
+// 是否展示必填
+const isRequired = computed(() => {
+  let formRequired = false
+  if (form && form.props.rules) {
+    const rules = form.props.rules
+    for (const key in rules) {
+      if (Object.prototype.hasOwnProperty.call(rules, key) && key === props.prop && Array.isArray(rules[key])) {
+        formRequired = rules[key].some((rule: FormItemRule) => rule.required)
+      }
+    }
+  }
+  return props.required || props.rules.some((rule) => rule.required) || formRequired
+})
+
+// 当前文本域文字长度
+const currentLength = computed(() => {
+  /**
+   * 使用Array.from处理多码元字符以获取正确的长度
+   * @link https://github.com/Moonofweisheng/wot-design-uni/issues/933
+   */
+  return Array.from(String(formatValue(props.modelValue))).length
+})
+
+const rootClass = computed(() => {
+  return `wd-textarea   ${props.label || slots.label ? 'is-cell' : ''} ${props.center ? 'is-center' : ''} ${cell.border.value ? 'is-border' : ''} ${
+    props.size ? 'is-' + props.size : ''
+  } ${props.error ? 'is-error' : ''} ${props.disabled ? 'is-disabled' : ''} ${props.autoHeight ? 'is-auto-height' : ''} ${
+    currentLength.value > 0 ? 'is-not-empty' : ''
+  }  ${props.noBorder ? 'is-no-border' : ''} ${props.customClass}`
+})
+
+const labelClass = computed(() => {
+  return `wd-textarea__label ${props.customLabelClass} ${isRequired.value ? 'is-required' : ''}`
+})
+
+const inputPlaceholderClass = computed(() => {
+  return `wd-textarea__placeholder  ${props.placeholderClass}`
+})
+
+const countClass = computed(() => {
+  return `${currentLength.value > 0 ? 'wd-textarea__count-current' : ''} ${currentLength.value > props.maxlength ? 'is-error' : ''}`
+})
+
+const labelStyle = computed(() => {
+  return props.labelWidth
+    ? objToStyle({
+        'min-width': props.labelWidth,
+        'max-width': props.labelWidth
+      })
+    : ''
+})
+
+onBeforeMount(() => {
+  initState()
+})
+
+// 状态初始化
+function initState() {
+  inputValue.value = formatValue(inputValue.value)
+  emit('update:modelValue', inputValue.value)
+}
+
+function formatValue(value: string | number) {
+  if (value === null || value === undefined) return ''
+  const { maxlength, showWordLimit } = props
+  if (showWordLimit && maxlength !== -1 && String(value).length > maxlength) {
+    return value.toString().substring(0, maxlength)
+  }
+  return `${value}`
+}
+
+async function handleClear() {
+  clearing.value = true
+  focusing.value = false
+  inputValue.value = ''
+  if (props.focusWhenClear) {
+    focused.value = false
+  }
+  await pause()
+  if (props.focusWhenClear) {
+    focused.value = true
+    focusing.value = true
+  }
+  emit('update:modelValue', inputValue.value)
+  emit('clear')
+}
+async function handleBlur({ detail }: any) {
+  // 等待150毫秒，clear执行完毕
+  await pause(150)
+
+  if (clearing.value) {
+    clearing.value = false
+    return
+  }
+
+  focusing.value = false
+  emit('blur', {
+    value: inputValue.value,
+    cursor: detail.cursor ? detail.cursor : null
+  })
+}
+function handleFocus({ detail }: any) {
+  focusing.value = true
+  emit('focus', detail)
+}
+function handleInput({ detail }: any) {
+  inputValue.value = formatValue(inputValue.value as string)
+  emit('update:modelValue', inputValue.value)
+  emit('input', detail)
+}
+function handleKeyboardheightchange({ detail }: any) {
+  emit('keyboardheightchange', detail)
+}
+function handleConfirm({ detail }: any) {
+  emit('confirm', detail)
+}
+function handleLineChange({ detail }: any) {
+  emit('linechange', detail)
+}
+function onClickPrefixIcon() {
+  emit('clickprefixicon')
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
+
+<style lang="scss">
+@import './placeholder.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/index.scss b/src/uni_modules/wot-design-uni/components/wd-toast/index.scss
new file mode 100644
index 0000000..fe1c8bc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/index.scss
@@ -0,0 +1,74 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+@include b(toast) {
+  display: inline-block;
+  max-width: $-toast-max-width;
+  padding: $-toast-padding;
+  background-color: $-toast-bg;
+  border-radius: $-toast-radius;
+  color: #fff;
+  transition: all 0.2s;
+  font-size: $-toast-fs;
+  box-sizing: border-box;
+  box-shadow: $-toast-box-shadow;
+
+  @include when(vertical) {
+    flex-direction: column;
+  }
+
+  @include e(msg) {
+    font-size: $-toast-fs;
+    line-height: 20px;
+    text-align: left;
+    font-family: "San Francisco", Rotobo, arial, "PingFang SC", "Noto SansCJK", "Microsoft Yahei", sans-serif;
+  }
+  @include edeep(icon) {
+    display: inline-block;
+    margin-right: $-toast-icon-margin-right;
+    font-size: $-toast-icon-size;
+
+    @include when(vertical) {
+      margin-right: 0;
+      margin-bottom: $-toast-icon-margin-bottom;
+    }
+  }
+  @include e(iconWrap){
+    font-size: 0;
+    line-height: 0;
+    vertical-align: middle;
+  }
+  @include e(iconBox){
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  @include e(iconSvg){
+    width: $-toast-icon-size;
+    height: $-toast-icon-size;
+    background-size: cover;
+    background-repeat: no-repeat;
+  }
+  @include e(loading) {
+    margin-bottom: 16px;
+    display: inline-block;
+  }
+  @include m(top) {
+    transform: translate3d(0, -40vh, 0);
+  }
+  @include m(middle-top){
+    transform: translate3d(0%,-18.8vh,0);
+  }
+  @include m(bottom) {
+    transform: translate3d(0, 40vh, 0);
+  }
+  @include m(with-icon) {
+    min-width: $-toast-with-icon-min-width;
+    display: inline-flex;
+    align-items: center;
+  }
+  @include m(loading) {
+    min-width: auto;
+    padding: $-toast-loading-padding;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/index.ts b/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
new file mode 100644
index 0000000..0264e62
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/index.ts
@@ -0,0 +1,92 @@
+import { inject, provide, ref } from 'vue'
+import type { Toast, ToastOptions } from './types'
+import { deepMerge } from '../common/util'
+
+/**
+ * useToast 用到的key
+ */
+const toastDefaultOptionKey = '__TOAST_OPTION__'
+
+// 默认模板
+export const defaultOptions: ToastOptions = {
+  duration: 2000,
+  show: false
+}
+
+const None = Symbol('None')
+
+export function useToast(selector: string = ''): Toast {
+  const toastOptionKey = getToastOptionKey(selector)
+  const toastOption = inject(toastOptionKey, ref<ToastOptions | typeof None>(None)) // toast选项
+  if (toastOption.value === None) {
+    toastOption.value = defaultOptions
+    provide(toastOptionKey, toastOption)
+  }
+  let timer: ReturnType<typeof setTimeout> | null = null
+
+  const createMethod = (toastOptions: ToastOptions) => {
+    return (options: ToastOptions | string) => {
+      return show(deepMerge(toastOptions, typeof options === 'string' ? { msg: options } : options) as ToastOptions)
+    }
+  }
+
+  const show = (option: ToastOptions | string) => {
+    const options = deepMerge(defaultOptions, typeof option === 'string' ? { msg: option } : option) as ToastOptions
+    toastOption.value = deepMerge(options, {
+      show: true
+    }) as ToastOptions
+    // 开始渲染，并在 duration ms之后执行清除
+    timer && clearTimeout(timer)
+    if (toastOption.value.duration && toastOption.value.duration > 0) {
+      timer = setTimeout(() => {
+        timer && clearTimeout(timer)
+        close()
+      }, options.duration)
+    }
+  }
+
+  const loading = createMethod({
+    iconName: 'loading',
+    duration: 0,
+    cover: true
+  })
+  const success = createMethod({
+    iconName: 'success',
+    duration: 1500
+  })
+  const error = createMethod({ iconName: 'error' })
+  const warning = createMethod({ iconName: 'warning' })
+  const info = createMethod({ iconName: 'info' })
+
+  const close = () => {
+    toastOption.value = { show: false }
+  }
+  return {
+    show,
+    loading,
+    success,
+    error,
+    warning,
+    info,
+    close
+  }
+}
+
+export const getToastOptionKey = (selector: string) => {
+  return selector ? `${toastDefaultOptionKey}${selector}` : toastDefaultOptionKey
+}
+
+export const toastIcon = {
+  success() {
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>成功</title><desc>Created with Sketch.</desc><defs><filter x="-63.2%" y="-80.0%" width="226.3%" height="260.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.122733141   0 0 0 0 0.710852582   0 0 0 0 0.514812768  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><rect id="path-2" x="3.4176226" y="5.81442199" width="3" height="8.5" rx="1.5"></rect><linearGradient x1="50%" y1="0.126649064%" x2="50%" y2="100%" id="linearGradient-4"><stop stop-color="#ACFFBD" stop-opacity="0.208123907" offset="0%"></stop><stop stop-color="#10B87C" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-388.000000, -538.000000)"><g id="成功" transform="translate(388.000000, 538.000000)"><circle id="Oval" fill="#34D19D" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#34D19D" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(11.500000, 14.000000)"><mask id="mask-3" fill="white"><use xlink:href="#path-2"></use></mask><use id="Rectangle-Copy-24" fill="#C4FFEB" transform="translate(4.917623, 10.064422) rotate(-45.000000) translate(-4.917623, -10.064422) " xlink:href="#path-2"></use><rect id="Rectangle" fill="url(#linearGradient-4)" mask="url(#mask-3)" transform="translate(6.215869, 11.372277) rotate(-45.000000) translate(-6.215869, -11.372277) " x="4.71586891" y="9.52269089" width="3" height="3.69917136"></rect><rect id="Rectangle" fill="#FFFFFF" transform="translate(11.636236, 7.232744) scale(1, -1) rotate(-45.000000) translate(-11.636236, -7.232744) " x="10.1362361" y="-1.02185365" width="3" height="16.5091951" rx="1.5"></rect></g></g></g></g></svg>'
+  },
+  warning() {
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>警告</title><desc>Created with Sketch.</desc> <defs> <filter x="-240.0%" y="-60.0%" width="580.0%" height="220.0%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.824756567   0 0 0 0 0.450356612   0 0 0 0 0.168550194  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode> <feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-580.000000, -538.000000)"> <g id="警告" transform="translate(580.000000, 538.000000)"><circle id="Oval" fill="#F0883A" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#F0883A" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 10.800000)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(2.492935, 7.171583) scale(1, -1) rotate(-360.000000) translate(-2.492935, -7.171583) " x="0.992934699" y="0.955464537" width="3" height="12.4322365" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#FFDEC5" transform="translate(2.508751, 17.202636) scale(1, -1) rotate(-360.000000) translate(-2.508751, -17.202636) " x="1.00875134" y="15.200563" width="3" height="4.00414639" rx="1.5"></rect></g></g></g></g></svg>'
+  },
+  info() {
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>常规</title><desc>Created with Sketch.</desc><defs><filter x="-300.0%" y="-57.1%" width="700.0%" height="214.3%" filterUnits="objectBoundingBox" id="filter-1"><feOffset dx="0" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset><feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur><feColorMatrix values="0 0 0 0 0.362700096   0 0 0 0 0.409035039   0 0 0 0 0.520238904  0 0 0 1 0" type="matrix" in="shadowBlurOuter1" result="shadowMatrixOuter1"></feColorMatrix><feMerge><feMergeNode in="shadowMatrixOuter1"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-772.000000, -538.000000)"><g id="常规" transform="translate(772.000000, 538.000000)"><circle id="Oval" fill="#909CB7" opacity="0.4" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#909CB7" cx="21" cy="21" r="16"></circle><g id="Group-6" filter="url(#filter-1)" transform="translate(18.500000, 9.800000)"><g id="编组-2" transform="translate(2.492935, 10.204709) rotate(-180.000000) translate(-2.492935, -10.204709) translate(0.992935, 0.204709)"><rect id="Rectangle" fill="#FFFFFF" transform="translate(1.500000, 7.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -7.000000) " x="0" y="0" width="3" height="14" rx="1.5"></rect><rect id="Rectangle-Copy-25" fill="#EEEEEE" transform="translate(1.500000, 18.000000) scale(1, -1) rotate(-360.000000) translate(-1.500000, -18.000000) " x="0" y="16" width="3" height="4" rx="1.5"></rect></g></g></g></g></g></svg>'
+  },
+  error() {
+    return '<svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><title>toast</title><desc>Created with Sketch.</desc><defs><linearGradient x1="99.6229896%" y1="50.3770104%" x2="0.377010363%" y2="50.3770104%" id="linearGradient-1"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient><linearGradient x1="0.377010363%" y1="50.3770104%" x2="99.6229896%" y2="50.3770104%" id="linearGradient-2"><stop stop-color="#FFDFDF" offset="0%"></stop><stop stop-color="#F9BEBE" offset="100%"></stop></linearGradient></defs><g id="规范" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g id="反馈-轻提示" transform="translate(-196.000000, -538.000000)"> <g id="toast" transform="translate(196.000000, 538.000000)"><circle id="Oval" fill="#FA4350" opacity="0.400000006" cx="21" cy="21" r="20"></circle><circle id="Oval" fill="#FA4350" opacity="0.900000036" cx="21" cy="21" r="16"></circle><rect id="矩形" fill="#FFDFDF" transform="translate(21.071068, 21.071068) rotate(-225.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect><rect id="矩形" fill="url(#linearGradient-1)" transform="translate(19.303301, 22.838835) rotate(-225.000000) translate(-19.303301, -22.838835) " x="17.3033009" y="21.3388348" width="4" height="3"></rect><rect id="矩形" fill="url(#linearGradient-2)" transform="translate(22.838835, 19.303301) rotate(-225.000000) translate(-22.838835, -19.303301) " x="20.8388348" y="17.8033009" width="4" height="3"></rect><rect id="矩形" fill="#FFFFFF" transform="translate(21.071068, 21.071068) rotate(-315.000000) translate(-21.071068, -21.071068) " x="12.5710678" y="19.5710678" width="17" height="3" rx="1.5"></rect></g></g></g></svg>'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/types.ts b/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
new file mode 100644
index 0000000..7209aed
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
@@ -0,0 +1,190 @@
+/*
+ * @Author: weisheng
+ * @Date: 2023-06-19 12:47:57
+ * @LastEditTime: 2025-02-16 15:52:17
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-toast/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeStringProp } from '../common/props'
+import type { LoadingType } from '../wd-loading/types'
+
+export type ToastIconType = 'success' | 'error' | 'warning' | 'loading' | 'info' // 图标类型
+
+export type ToastPositionType = 'top' | 'middle-top' | 'middle' | 'bottom' // 提示信息框的位置类型
+
+export type ToastDirection = 'vertical' | 'horizontal' // 提示信息框的排列方向
+
+export type ToastLoadingType = LoadingType // 提示信息加载状态类型
+
+export type ToastOptions = {
+  msg?: string
+  duration?: number
+  direction?: ToastDirection
+  iconName?: ToastIconType
+  iconSize?: number
+  loadingType?: ToastLoadingType
+  loadingColor?: string
+  loadingSize?: number
+  iconColor?: string
+  position?: ToastPositionType
+  show?: boolean
+  zIndex?: number
+  /**
+   * 是否存在遮罩层
+   */
+  cover?: boolean
+  /**
+   * 图标类名
+   */
+  iconClass?: string
+  /**
+   * 类名前缀，用于使用自定义图标
+   */
+  classPrefix?: string
+  /**
+   * 完全展示后的回调函数
+   */
+  opened?: () => void
+  /**
+   * 完全关闭时的回调函数
+   */
+  closed?: () => void
+}
+
+export interface Toast {
+  // 打开Toast
+  show(toastOptions: ToastOptions | string): void
+  // 成功提示
+  success(toastOptions: ToastOptions | string): void
+  // 关闭提示
+  error(toastOptions: ToastOptions | string): void
+  // 常规提示
+  info(toastOptions: ToastOptions | string): void
+  // 警告提示
+  warning(toastOptions: ToastOptions | string): void
+  // 加载提示
+  loading(toastOptions: ToastOptions | string): void
+  // 关闭Toast
+  close(): void
+}
+
+export const toastProps = {
+  ...baseProps,
+  /**
+   * 选择器
+   * @type {string}
+   * @default ''
+   */
+  selector: makeStringProp(''),
+  /**
+   * 提示信息
+   * @type {string}
+   * @default ''
+   */
+  msg: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 排列方向
+   * @type {'vertical' | 'horizontal'}
+   * @default 'horizontal'
+   */
+  direction: makeStringProp<ToastDirection>('horizontal'),
+  /**
+   * 图标名称
+   * @type {'success' | 'error' | 'warning' | 'loading' | 'info'}
+   * @default ''
+   */
+  iconName: {
+    type: String as PropType<ToastIconType>,
+    default: ''
+  },
+  /**
+   * 图标大小
+   * @type {number}
+   */
+  iconSize: Number,
+  /**
+   * 加载类型
+   * @type {'outline' | 'ring'}
+   * @default 'outline'
+   */
+  loadingType: makeStringProp<ToastLoadingType>('outline'),
+  /**
+   * 加载颜色
+   * @type {string}
+   * @default '#4D80F0'
+   */
+  loadingColor: {
+    type: String,
+    default: '#4D80F0'
+  },
+  /**
+   * 加载大小
+   * @type {number}
+   */
+  loadingSize: Number,
+  /**
+   * 图标颜色
+   * @type {string}
+   */
+  iconColor: String,
+  /**
+   * 位置
+   * @type {'top' | 'middle-top' | 'middle' | 'bottom'}
+   * @default 'middle-top'
+   */
+  position: makeStringProp<ToastPositionType>('middle-top'),
+  /**
+   * 层级
+   * @type {number}
+   * @default 100
+   */
+  zIndex: {
+    type: Number,
+    default: 100
+  },
+  /**
+   * 是否存在遮罩层
+   * @type {boolean}
+   * @default false
+   */
+  cover: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * 图标类名
+   * @type {string}
+   * @default ''
+   */
+  iconClass: {
+    type: String,
+    default: ''
+  },
+  /**
+   * 类名前缀
+   * @type {string}
+   * @default 'wd-icon'
+   */
+  classPrefix: {
+    type: String,
+    default: 'wd-icon'
+  },
+  /**
+   * 完全展示后的回调函数
+   * @type {Function}
+   */
+  opened: Function as PropType<() => void>,
+  /**
+   * 完全关闭时的回调函数
+   * @type {Function}
+   */
+  closed: Function as PropType<() => void>
+}
+
+export type ToastProps = ExtractPropTypes<typeof toastProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue b/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
new file mode 100644
index 0000000..78c43b0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-toast/wd-toast.vue
@@ -0,0 +1,192 @@
+<template>
+  <wd-overlay v-if="cover" :z-index="zIndex" lock-scroll :show="show" custom-style="background-color: transparent;pointer-events: auto;"></wd-overlay>
+  <wd-transition name="fade" :show="show" :custom-style="transitionStyle" @after-enter="handleAfterEnter" @after-leave="handleAfterLeave">
+    <view :class="rootClass">
+      <!--iconName优先级更高-->
+      <wd-loading
+        v-if="iconName === 'loading'"
+        :type="loadingType"
+        :color="loadingColor"
+        :size="loadingSize"
+        :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+      />
+      <view
+        :class="`wd-toast__iconWrap wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+        v-else-if="iconName === 'success' || iconName === 'warning' || iconName === 'info' || iconName === 'error'"
+      >
+        <view class="wd-toast__iconBox">
+          <view class="wd-toast__iconSvg" :style="svgStyle"></view>
+        </view>
+      </view>
+      <wd-icon
+        v-else-if="iconClass"
+        :custom-class="`wd-toast__icon ${direction === 'vertical' ? 'is-vertical' : ''}`"
+        :size="iconSize"
+        :class-prefix="classPrefix"
+        :name="iconClass"
+      ></wd-icon>
+      <!--文本-->
+      <view v-if="msg" class="wd-toast__msg">{{ msg }}</view>
+    </view>
+  </wd-transition>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-toast',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+import wdOverlay from '../wd-overlay/wd-overlay.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+
+import { computed, inject, onBeforeMount, ref, watch, type CSSProperties } from 'vue'
+import base64 from '../common/base64'
+import { defaultOptions, getToastOptionKey, toastIcon } from '.'
+import { toastProps, type ToastDirection, type ToastLoadingType, type ToastOptions, type ToastProps } from './types'
+import { addUnit, isDef, isFunction, objToStyle } from '../common/util'
+
+const props = defineProps(toastProps)
+const iconName = ref<string>('') // 图标类型
+const msg = ref<string>('') // 消息内容
+const position = ref<string>('middle')
+const show = ref<boolean>(false)
+const zIndex = ref<number>(100)
+const loadingType = ref<ToastLoadingType>('outline')
+const loadingColor = ref<string>('#4D80F0')
+const iconSize = ref<string>() // 图标大小
+const loadingSize = ref<string>() // loading大小
+const svgStr = ref<string>('') // 图标
+const cover = ref<boolean>(false) // 是否存在遮罩层
+const classPrefix = ref<string>('wd-icon') // 图标前缀
+const iconClass = ref<string>('') // 图标类名
+const direction = ref<ToastDirection>('horizontal') // toast布局方向
+
+let opened: (() => void) | null = null
+
+let closed: (() => void) | null = null
+
+const toastOptionKey = getToastOptionKey(props.selector)
+const toastOption = inject(toastOptionKey, ref<ToastOptions>(defaultOptions)) // toast选项
+
+// 监听options变化展示
+watch(
+  () => toastOption.value,
+  (newVal: ToastOptions) => {
+    reset(newVal)
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+// 监听options变化展示
+watch(
+  () => iconName.value,
+  () => {
+    buildSvg()
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * 动画自定义样式
+ */
+const transitionStyle = computed(() => {
+  const style: CSSProperties = {
+    'z-index': zIndex.value,
+    position: 'fixed',
+    top: '50%',
+    left: 0,
+    width: '100%',
+    transform: 'translate(0, -50%)',
+    'text-align': 'center',
+    'pointer-events': 'none'
+  }
+  return objToStyle(style)
+})
+
+const rootClass = computed(() => {
+  return `wd-toast ${props.customClass} wd-toast--${position.value} ${
+    (iconName.value !== 'loading' || msg.value) && (iconName.value || iconClass.value) ? 'wd-toast--with-icon' : ''
+  } ${iconName.value === 'loading' && !msg.value ? 'wd-toast--loading' : ''} ${direction.value === 'vertical' ? 'is-vertical' : ''}`
+})
+
+const svgStyle = computed(() => {
+  const style: CSSProperties = {
+    backgroundImage: `url(${svgStr.value})`
+  }
+  if (isDef(iconSize.value)) {
+    style.width = iconSize.value
+    style.height = iconSize.value
+  }
+  return objToStyle(style)
+})
+
+onBeforeMount(() => {
+  buildSvg()
+})
+
+function handleAfterEnter() {
+  if (isFunction(opened)) {
+    opened()
+  }
+}
+
+function handleAfterLeave() {
+  if (isFunction(closed)) {
+    closed()
+  }
+}
+
+function buildSvg() {
+  if (iconName.value !== 'success' && iconName.value !== 'warning' && iconName.value !== 'info' && iconName.value !== 'error') return
+  const iconSvg = toastIcon[iconName.value]()
+  const iconSvgStr = `"data:image/svg+xml;base64,${base64(iconSvg)}"`
+  svgStr.value = iconSvgStr
+}
+
+/**
+ * 重置toast选项值
+ * @param option toast选项值
+ */
+function reset(option: ToastOptions) {
+  show.value = isDef(option.show) ? option.show : false
+
+  if (show.value) {
+    mergeOptionsWithProps(option, props)
+  }
+}
+
+function mergeOptionsWithProps(option: ToastOptions, props: ToastProps) {
+  iconName.value = isDef(option.iconName!) ? option.iconName! : props.iconName
+  iconClass.value = isDef(option.iconClass!) ? option.iconClass! : props.iconClass
+  msg.value = isDef(option.msg!) ? option.msg! : props.msg
+  position.value = isDef(option.position!) ? option.position! : props.position
+  zIndex.value = isDef(option.zIndex!) ? option.zIndex! : props.zIndex
+  loadingType.value = isDef(option.loadingType!) ? option.loadingType! : props.loadingType
+  loadingColor.value = isDef(option.loadingColor!) ? option.loadingColor! : props.loadingColor
+  iconSize.value = isDef(option.iconSize) ? addUnit(option.iconSize) : isDef(props.iconSize) ? addUnit(props.iconSize) : undefined
+  loadingSize.value = isDef(option.loadingSize) ? addUnit(option.loadingSize) : isDef(props.loadingSize) ? addUnit(props.loadingSize) : undefined
+  cover.value = isDef(option.cover!) ? option.cover! : props.cover
+  classPrefix.value = isDef(option.classPrefix) ? option.classPrefix : props.classPrefix
+  direction.value = isDef(option.direction) ? option.direction : props.direction
+  closed = isFunction(option.closed) ? option.closed : isFunction(props.closed) ? props.closed : null
+  opened = isFunction(option.opened) ? option.opened : isFunction(props.opened) ? props.opened : null
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tooltip/index.scss b/src/uni_modules/wot-design-uni/components/wd-tooltip/index.scss
new file mode 100644
index 0000000..c16949f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tooltip/index.scss
@@ -0,0 +1,66 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+.wot-theme-dark {
+
+  @include b(tooltip) {
+
+    @include e(pos) {
+      background: $-dark-background4;
+      color: $-tooltip-color;
+    }
+
+    @include triangleArrow($-tooltip-arrow-size, $-dark-background4);
+
+  }
+
+}
+
+@include b(tooltip) {
+  position: relative;
+  display: inline-block;
+
+  @include edeep(pos) {
+    position: absolute;
+    min-width: 138px;
+    min-height: 36px;
+    font-size: $-tooltip-fs;
+    backdrop-filter: blur($-tooltip-blur);
+    background-clip: padding-box;
+    border-radius: $-tooltip-radius;
+    background: $-tooltip-bg;
+    color: $-tooltip-color;
+    text-align: center;
+    box-sizing: border-box;
+    z-index: $-tooltip-z-index;
+  }
+
+
+  @include e(hidden) {
+    left: -100vw;
+    bottom: -100vh;
+    visibility: hidden;
+  }
+
+  @include e(container) {
+    line-height: $-tooltip-line-height;
+    font-size: $-tooltip-fs;
+  }
+
+  @include e(inner) {
+    padding: $-tooltip-padding;
+    white-space: nowrap;
+    line-height: $-tooltip-line-height;
+  }
+
+  @include edeep(close-icon) {
+    font-size: 12px;
+    position: absolute;
+    right: -8px;
+    top: -10px;
+    transform: scale(0.5);
+    padding: 10px;
+  }
+
+  @include triangleArrow($-tooltip-arrow-size, $-tooltip-bg);
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-tooltip/types.ts b/src/uni_modules/wot-design-uni/components/wd-tooltip/types.ts
new file mode 100644
index 0000000..585b4f1
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tooltip/types.ts
@@ -0,0 +1,107 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+
+export type PlacementType =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+
+export const tooltipProps = {
+  ...baseProps,
+
+  /**
+   * 自定义箭头内容
+   * 类型：string
+   */
+  customArrow: makeStringProp(''),
+
+  /**
+   * 自定义弹出内容
+   * 类型：string
+   */
+  customPop: makeStringProp(''),
+
+  /**
+   * 是否显示Tooltip箭头
+   * 类型：boolean
+   * 默认值：true
+   */
+  visibleArrow: makeBooleanProp(true),
+
+  /**
+   * 显示的内容，也可以通过`slot#content`传入
+   * 类型：string | Array<Record<string, any>>
+   * 默认值：无（根据传入值而定）
+   */
+  content: {
+    type: [String, Array] as PropType<string | Array<Record<string, any>>>
+  },
+
+  /**
+   * Tooltip的出现位置
+   * 类型：string
+   * 可选值：top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
+   * 默认值：'bottom'
+   */
+  placement: makeStringProp<PlacementType>('bottom'),
+
+  /**
+   * 出现位置的偏移量
+   * 类型：number
+   * 默认值：0
+   */
+  // offset: makeNumberProp(0),
+  offset: {
+    // 需要支持数字、数组、对象类型
+    type: [Number, Array, Object] as PropType<number | Array<number> | Record<'x' | 'y', number>>,
+    default: 0
+  },
+
+  /**
+   * 是否使用slot来传入content内容
+   * 类型：boolean
+   * 默认值：false
+   */
+  useContentSlot: makeBooleanProp(false),
+
+  /**
+   * Tooltip是否可用
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+
+  /**
+   * 是否显示Tooltip内部的关闭按钮
+   * 类型：boolean
+   * 默认值：false
+   */
+  showClose: makeBooleanProp(false),
+
+  /**
+   * Tooltip的状态是否可见，通过v-model绑定
+   * 类型：boolean
+   * 默认值：false
+   */
+  modelValue: makeBooleanProp(false)
+}
+
+export type TooltipProps = ExtractPropTypes<typeof tooltipProps>
+
+export type TooltipExpose = {
+  // 打开tooltip
+  open: () => void
+  // 关闭tooltip
+  close: () => void
+}
+
+export type TooltipInstance = ComponentPublicInstance<TooltipProps, TooltipExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-tooltip/wd-tooltip.vue b/src/uni_modules/wot-design-uni/components/wd-tooltip/wd-tooltip.vue
new file mode 100644
index 0000000..368885c
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-tooltip/wd-tooltip.vue
@@ -0,0 +1,141 @@
+<template>
+  <view :class="`wd-tooltip ${customClass}`" :style="customStyle" id="tooltip" @click.stop="popover.noop">
+    <!-- 用于为渲染获取宽高的元素 -->
+    <view class="wd-tooltip__pos wd-tooltip__hidden" id="pos">
+      <view class="wd-tooltip__container custom-pop">
+        <view v-if="!useContentSlot" class="wd-tooltip__inner">{{ content }}</view>
+      </view>
+    </view>
+    <wd-transition custom-class="wd-tooltip__pos" :custom-style="popover.popStyle.value" :show="showTooltip" name="fade" :duration="200">
+      <view class="wd-tooltip__container custom-pop">
+        <view v-if="visibleArrow" :class="`wd-tooltip__arrow ${popover.arrowClass.value} ${customArrow}`" :style="popover.arrowStyle.value"></view>
+        <!-- 普通模式 -->
+        <view v-if="!useContentSlot" class="wd-tooltip__inner">{{ content }}</view>
+        <!-- 用户自定义样式 -->
+        <slot name="content" v-else />
+      </view>
+      <wd-icon v-if="showClose" name="close" custom-class="wd-tooltip__close-icon" @click="toggle"></wd-icon>
+    </wd-transition>
+    <view @click="toggle" class="wd-tooltip__target" id="target">
+      <slot />
+    </view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-tooltip',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdTransition from '../wd-transition/wd-transition.vue'
+import { getCurrentInstance, inject, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { usePopover } from '../composables/usePopover'
+import { closeOther, pushToQueue, removeFromQueue } from '../common/clickoutside'
+import { type Queue, queueKey } from '../composables/useQueue'
+import { tooltipProps, type TooltipExpose } from './types'
+
+const props = defineProps(tooltipProps)
+const emit = defineEmits(['update:modelValue', 'menuclick', 'change', 'open', 'close'])
+
+const popover = usePopover(props.visibleArrow)
+const queue = inject<Queue | null>(queueKey, null)
+const selector: string = 'tooltip'
+const { proxy } = getCurrentInstance() as any
+const showTooltip = ref<boolean>(false) // 控制tooltip显隐
+
+watch(
+  () => props.content,
+  (newVal) => {
+    if (newVal === null || newVal === undefined) {
+      // eslint-disable-next-line prettier/prettier
+      console.error('[wot-design] warning(wd-tooltip): content can\'t be null or undefined')
+    }
+  }
+)
+
+watch(
+  () => props.placement,
+  () => {
+    popover.init(props.placement, props.visibleArrow, selector)
+  }
+)
+
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    showTooltip.value = newValue
+  }
+)
+
+watch(
+  () => showTooltip.value,
+  (newValue) => {
+    if (newValue) {
+      popover.control(props.placement, props.offset)
+      if (queue && queue.closeOther) {
+        queue.closeOther(proxy)
+      } else {
+        closeOther(proxy)
+      }
+    }
+    popover.showStyle.value = newValue ? 'display: inline-block;' : 'display: none;'
+    emit('change', { show: newValue })
+    emit(`${newValue ? 'open' : 'close'}`)
+  }
+)
+
+onMounted(() => {
+  popover.init(props.placement, props.visibleArrow, selector)
+})
+
+onBeforeMount(() => {
+  if (queue && queue.pushToQueue) {
+    queue.pushToQueue(proxy)
+  } else {
+    pushToQueue(proxy)
+  }
+  popover.showStyle.value = props.modelValue ? 'opacity: 1;' : 'opacity: 0;'
+})
+
+onBeforeUnmount(() => {
+  if (queue && queue.removeFromQueue) {
+    queue.removeFromQueue(proxy)
+  } else {
+    removeFromQueue(proxy)
+  }
+})
+
+function toggle() {
+  if (props.disabled) return
+  updateModelValue(!showTooltip.value)
+}
+
+function open() {
+  updateModelValue(true)
+}
+
+function close() {
+  updateModelValue(false)
+}
+
+function updateModelValue(value: boolean) {
+  showTooltip.value = value
+  emit('update:modelValue', value)
+}
+
+defineExpose<TooltipExpose>({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-transition/index.scss b/src/uni_modules/wot-design-uni/components/wd-transition/index.scss
new file mode 100644
index 0000000..3f8a056
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-transition/index.scss
@@ -0,0 +1,95 @@
+.wd-transition {
+  transition-timing-function: ease;
+}
+
+.wd-fade-enter,
+.wd-fade-leave-to {
+  opacity: 0;
+}
+
+.wd-fade-enter-active,
+.wd-fade-leave-active {
+  transition-property: opacity;
+}
+
+.wd-fade-up-enter,
+.wd-fade-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+  opacity: 0;
+}
+
+.wd-fade-down-enter,
+.wd-fade-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+  opacity: 0;
+}
+
+.wd-fade-left-enter,
+.wd-fade-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+  opacity: 0;
+}
+
+.wd-fade-right-enter,
+.wd-fade-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+  opacity: 0;
+}
+
+.wd-slide-up-enter,
+.wd-slide-up-leave-to {
+  transform: translate3d(0, 100%, 0);
+}
+
+.wd-slide-down-enter,
+.wd-slide-down-leave-to {
+  transform: translate3d(0, -100%, 0);
+}
+
+.wd-slide-left-enter,
+.wd-slide-left-leave-to {
+  transform: translate3d(-100%, 0, 0);
+}
+
+.wd-slide-right-enter,
+.wd-slide-right-leave-to {
+  transform: translate3d(100%, 0, 0);
+}
+
+.wd-zoom-in-enter,
+.wd-zoom-in-leave-to {
+  opacity: 0;
+  transform: scale(0.8);
+}
+
+.wd-zoom-out-enter,
+.wd-zoom-out-leave-to {
+  transform: scale(1.2);
+  opacity: 0;
+}
+
+.wd-zoom-in-enter-active,
+.wd-zoom-in-leave-active,
+.wd-zoom-out-enter-active,
+.wd-zoom-out-leave-active,
+.wd-fade-up-enter-active,
+.wd-fade-up-leave-active,
+.wd-fade-down-enter-active,
+.wd-fade-down-leave-active,
+.wd-fade-left-enter-active,
+.wd-fade-left-leave-active,
+.wd-fade-right-enter-active,
+.wd-fade-right-leave-active {
+  transition-property: opacity, transform;
+}
+
+.wd-slide-up-enter-active,
+.wd-slide-up-leave-active,
+.wd-slide-down-enter-active,
+.wd-slide-down-leave-active,
+.wd-slide-left-enter-active,
+.wd-slide-left-leave-active,
+.wd-slide-right-enter-active,
+.wd-slide-right-leave-active {
+  transition-property: transform;
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-transition/types.ts b/src/uni_modules/wot-design-uni/components/wd-transition/types.ts
new file mode 100644
index 0000000..e668d58
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-transition/types.ts
@@ -0,0 +1,101 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-09-01 15:42:04
+ * @LastEditTime: 2024-11-06 23:50:08
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wd-transition\types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
+
+export type TransitionName =
+  | 'fade'
+  | 'fade-down'
+  | 'fade-left'
+  | 'fade-right'
+  | 'fade-up'
+  | 'slide-down'
+  | 'slide-left'
+  | 'slide-right'
+  | 'slide-up'
+  | 'zoom-in'
+  | 'zoom-out'
+
+export const transitionProps = {
+  ...baseProps,
+
+  /**
+   * 是否展示组件
+   * 类型：boolean
+   * 默认值：false
+   */
+  show: makeBooleanProp(false),
+
+  /**
+   * 动画执行时间
+   * 类型：number | boolean | Record<string, number>
+   * 默认值：300 (毫秒)
+   */
+  duration: {
+    type: [Object, Number, Boolean] as PropType<Record<string, number> | number | boolean>,
+    default: 300
+  },
+  /**
+   * 弹层内容懒渲染，触发展示时才渲染内容
+   * 类型：boolean
+   * 默认值：false
+   */
+  lazyRender: makeBooleanProp(false),
+  /**
+   * 动画类型
+   * 类型：string
+   * 可选值：fade / fade-up / fade-down / fade-left / fade-right / slide-up / slide-down / slide-left / slide-right / zoom-in
+   * 默认值：'fade'
+   */
+  name: [String, Array] as PropType<TransitionName | TransitionName[]>,
+  /**
+   * 是否在动画结束时销毁子节点（display: none)
+   * 类型：boolean
+   * 默认值：false
+   */
+  destroy: makeBooleanProp(true),
+  /**
+   * 进入过渡的开始状态
+   * 类型：string
+   */
+  enterClass: makeStringProp(''),
+
+  /**
+   * 进入过渡的激活状态
+   * 类型：string
+   */
+  enterActiveClass: makeStringProp(''),
+
+  /**
+   * 进入过渡的结束状态
+   * 类型：string
+   */
+  enterToClass: makeStringProp(''),
+
+  /**
+   * 离开过渡的开始状态
+   * 类型：string
+   */
+  leaveClass: makeStringProp(''),
+
+  /**
+   * 离开过渡的激活状态
+   * 类型：string
+   */
+  leaveActiveClass: makeStringProp(''),
+
+  /**
+   * 离开过渡的结束状态
+   * 类型：string
+   */
+  leaveToClass: makeStringProp('')
+}
+
+export type TransitionProps = ExtractPropTypes<typeof transitionProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue b/src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue
new file mode 100644
index 0000000..f0e3cf0
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-transition/wd-transition.vue
@@ -0,0 +1,216 @@
+<template>
+  <view v-if="!lazyRender || inited" :class="rootClass" :style="style" @transitionend="onTransitionEnd" @click="handleClick">
+    <slot />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-transition',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onBeforeMount, ref, watch } from 'vue'
+import { isObj, isPromise, pause } from '../common/util'
+import { transitionProps, type TransitionName } from './types'
+import { AbortablePromise } from '../common/AbortablePromise'
+
+const getClassNames = (name?: TransitionName | TransitionName[]) => {
+  let enter: string = `${props.enterClass} ${props.enterActiveClass}`
+  let enterTo: string = `${props.enterToClass} ${props.enterActiveClass}`
+  let leave: string = `${props.leaveClass} ${props.leaveActiveClass}`
+  let leaveTo: string = `${props.leaveToClass} ${props.leaveActiveClass}`
+
+  if (Array.isArray(name)) {
+    for (let index = 0; index < name.length; index++) {
+      enter = `wd-${name[index]}-enter wd-${name[index]}-enter-active ${enter}`
+      enterTo = `wd-${name[index]}-enter-to wd-${name[index]}-enter-active ${enterTo}`
+      leave = `wd-${name[index]}-leave wd-${name[index]}-leave-active ${leave}`
+      leaveTo = `wd-${name[index]}-leave-to wd-${name[index]}-leave-active ${leaveTo}`
+    }
+  } else if (name) {
+    enter = `wd-${name}-enter wd-${name}-enter-active ${enter}`
+    enterTo = `wd-${name}-enter-to wd-${name}-enter-active ${enterTo}`
+    leave = `wd-${name}-leave wd-${name}-leave-active ${leave}`
+    leaveTo = `wd-${name}-leave-to wd-${name}-leave-active ${leaveTo}`
+  }
+  return {
+    enter: enter,
+    'enter-to': enterTo,
+    leave: leave,
+    'leave-to': leaveTo
+  }
+}
+
+const props = defineProps(transitionProps)
+const emit = defineEmits(['click', 'before-enter', 'enter', 'before-leave', 'leave', 'after-leave', 'after-enter'])
+
+// 初始化是否完成
+const inited = ref<boolean>(false)
+// 是否显示
+const display = ref<boolean>(false)
+// 当前动画状态
+const status = ref<string>('')
+// 动画是否结束
+const transitionEnded = ref<boolean>(false)
+// 动画持续时间
+const currentDuration = ref<number>(300)
+// 类名
+const classes = ref<string>('')
+// 用于控制enter和leave的顺序执行
+const enterPromise = ref<AbortablePromise<void> | null>(null)
+
+// 动画进入的生命周期
+const enterLifeCyclePromises = ref<AbortablePromise<unknown> | null>(null)
+
+// 动画离开的生命周期
+const leaveLifeCyclePromises = ref<AbortablePromise<unknown> | null>(null)
+
+const style = computed(() => {
+  return `-webkit-transition-duration:${currentDuration.value}ms;transition-duration:${currentDuration.value}ms;${
+    display.value || !props.destroy ? '' : 'display: none;'
+  }${props.customStyle}`
+})
+
+const rootClass = computed(() => {
+  return `wd-transition ${props.customClass}  ${classes.value}`
+})
+
+onBeforeMount(() => {
+  if (props.show) {
+    enter()
+  }
+})
+
+watch(
+  () => props.show,
+  (newVal) => {
+    handleShow(newVal)
+  },
+  { deep: true }
+)
+
+function handleClick() {
+  emit('click')
+}
+
+function handleShow(value: boolean) {
+  if (value) {
+    handleAbortPromise()
+    enter()
+  } else {
+    leave()
+  }
+}
+/**
+ * 取消所有的promise
+ */
+function handleAbortPromise() {
+  isPromise(enterPromise.value) && enterPromise.value.abort()
+  isPromise(enterLifeCyclePromises.value) && enterLifeCyclePromises.value.abort()
+  isPromise(leaveLifeCyclePromises.value) && leaveLifeCyclePromises.value.abort()
+  enterPromise.value = null
+  enterLifeCyclePromises.value = null
+  leaveLifeCyclePromises.value = null
+}
+
+function enter() {
+  enterPromise.value = new AbortablePromise(async (resolve) => {
+    try {
+      const classNames = getClassNames(props.name)
+      const duration = isObj(props.duration) ? (props.duration as any).enter : props.duration
+      status.value = 'enter'
+      emit('before-enter')
+      enterLifeCyclePromises.value = pause()
+      await enterLifeCyclePromises.value
+      emit('enter')
+      classes.value = classNames.enter
+      currentDuration.value = duration
+      enterLifeCyclePromises.value = pause()
+      await enterLifeCyclePromises.value
+      inited.value = true
+      display.value = true
+      enterLifeCyclePromises.value = pause()
+      await enterLifeCyclePromises.value
+      enterLifeCyclePromises.value = null
+      transitionEnded.value = false
+      classes.value = classNames['enter-to']
+      resolve()
+    } catch (error) {
+      /**
+       *
+       */
+    }
+  })
+}
+async function leave() {
+  if (!enterPromise.value) {
+    transitionEnded.value = false
+    return onTransitionEnd()
+  }
+  try {
+    await enterPromise.value
+    if (!display.value) return
+    const classNames = getClassNames(props.name)
+    const duration = isObj(props.duration) ? (props.duration as any).leave : props.duration
+    status.value = 'leave'
+    emit('before-leave')
+    currentDuration.value = duration
+    leaveLifeCyclePromises.value = pause()
+    await leaveLifeCyclePromises.value
+    emit('leave')
+    classes.value = classNames.leave
+    leaveLifeCyclePromises.value = pause()
+    await leaveLifeCyclePromises.value
+    transitionEnded.value = false
+    classes.value = classNames['leave-to']
+    leaveLifeCyclePromises.value = setPromise(currentDuration.value)
+    await leaveLifeCyclePromises.value
+    leaveLifeCyclePromises.value = null
+    onTransitionEnd()
+    enterPromise.value = null
+  } catch (error) {
+    /**
+     *
+     */
+  }
+}
+
+/**
+ * 定时器promise化
+ * @param duration 持续时间ms
+ */
+function setPromise(duration: number) {
+  return new AbortablePromise<void>((resolve) => {
+    const timer = setTimeout(() => {
+      clearTimeout(timer)
+      resolve()
+    }, duration)
+  })
+}
+function onTransitionEnd() {
+  if (transitionEnded.value) return
+
+  transitionEnded.value = true
+  if (status.value === 'leave') {
+    // 离开后触发
+    emit('after-leave')
+  } else if (status.value === 'enter') {
+    // 进入后触发
+    emit('after-enter')
+  }
+
+  if (!props.show && display.value) {
+    display.value = false
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/index.scss b/src/uni_modules/wot-design-uni/components/wd-upload/index.scss
new file mode 100644
index 0000000..14cec12
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-upload/index.scss
@@ -0,0 +1,175 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+.wot-theme-dark {
+  @include b(upload) {
+    @include e(evoke) {
+      background-color: $-dark-background4;
+      color: $-dark-color3;
+
+      @include when(disabled) {
+        color: $-dark-color-gray;
+      }
+    }
+
+    @include e(file) {
+      background-color: $-dark-background4;
+    }
+
+    @include e(file-name) {
+      color: $-dark-color3;
+    }
+  }
+
+}
+
+@include b(upload) {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+
+  @include e(evoke) {
+    position: relative;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: $-upload-size;
+    height: $-upload-size;
+    font-size: $-upload-evoke-icon-size;
+    background-color: $-upload-evoke-bg;
+    color: $-upload-evoke-color;
+    margin-bottom: 12px;
+
+    @include when(disabled) {
+      color: $-upload-evoke-disabled-color;
+    }
+  }
+
+  @include e(evoke-num) {
+    font-size: 14px;
+    line-height: 14px;
+    margin-top: 8px;
+  }
+
+  @include edeep(evoke-icon) {
+    width: 32px;
+    height: 32px;
+  }
+
+  @include e(input) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    opacity: 0;
+  }
+
+  @include e(preview) {
+    position: relative;
+    width: $-upload-size;
+    height: $-upload-size;
+    margin: 0 12px 12px 0;
+  }
+
+  @include e(preview-list) {
+    display: flex;
+  }
+
+  @include e(picture, file, video) {
+    position: relative;
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  @include e(file, video) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    background-color: $-upload-evoke-bg;
+  }
+
+  @include e(video-icon, file-icon) {
+    font-size: $-upload-cover-icon-size;
+  }
+
+  @include e(file-name, video-name) {
+    width: 100%;
+    font-size: $-upload-file-fs;
+    color: $-upload-file-color;
+    box-sizing: border-box;
+    padding: 0 4px;
+    text-align: center;
+    margin-top: 8px;
+    @include lineEllipsis()
+  }
+
+  @include edeep(video-paly) {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 24px;
+    color: $-color-white;
+
+    &::before {
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+    }
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    right: calc($-upload-close-icon-size / 2 * -1);
+    top: calc($-upload-close-icon-size / 2 * -1);
+    font-size: $-upload-close-icon-size;
+    z-index: 1;
+    color: $-upload-close-icon-color;
+    width: $-upload-close-icon-size;
+    height: $-upload-close-icon-size;
+    line-height: $-upload-close-icon-size;
+
+    &::after {
+      position: absolute;
+      content: "";
+      width: 100%;
+      height: 100%;
+      border-radius: 50%;
+      background-color: $-color-white;
+      left: 0;
+      z-index: -1;
+    }
+  }
+
+  @include e(mask) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background-color: $-upload-preview-name-bg;
+  }
+
+  @include e(progress-txt) {
+    font-size: $-upload-progress-fs;
+    line-height: $-upload-progress-fs;
+    margin-top: 9px;
+    color: $-color-white;
+  }
+
+  @include edeep(icon) {
+    font-size: $-upload-preview-icon-size;
+    color: $-color-white;
+  }
+
+  @include e(status-content) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/types.ts b/src/uni_modules/wot-design-uni/components/wd-upload/types.ts
new file mode 100644
index 0000000..6cc93d9
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-upload/types.ts
@@ -0,0 +1,391 @@
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeArrayProp, makeBooleanProp, makeNumberProp, makeStringProp } from '../common/props'
+import type { LoadingType } from '../wd-loading/types'
+import type { ImageMode } from '../wd-img/types'
+
+export interface ChooseFileOption {
+  // 是否支持多选文件
+  multiple?: boolean
+  // 所选的图片的尺寸
+  sizeType?: UploadSizeType[]
+  // 选择文件的来源
+  sourceType?: UploadSourceType[]
+  // 最大允许上传个数
+  maxCount?: number
+  // 接受文件类型
+  accept?: UploadFileType
+  /**
+   * 是否压缩视频，当 accept 为 video 时生效。
+   */
+  compressed?: boolean
+  /**
+   * 拍摄视频最长拍摄时间，当 accept 为 video | media 时生效，单位秒。
+   */
+  maxDuration?: number
+  /**
+   * 使用前置或者后置相机，当 accept 为 video | media 时生效，可选值为：back｜front。
+   */
+  camera?: UploadCameraType
+  /**
+   * 根据文件拓展名过滤,H5、微信小程序支持
+   * 每一项都不能是空字符串, 默认不过滤
+   * 例如: ['.jpg'] 表示只选择.jpg文件
+   */
+  extension?: string[]
+}
+
+export type UploadFileItem = {
+  [key: string]: any
+  // 	当前上传文件在列表中的唯一标识
+  uid: number
+  // 缩略图地址
+  thumb?: string
+  // 当前文件名称，仅h5支持
+  name?: string
+  // 上传状态。若自定义了status-key，应取对应字段
+  status?: UploadStatusType
+  // 文件大小
+  size?: number
+  // 上传图片/视频的本地地址
+  url: string
+  // 上传进度
+  percent?: number
+  // 后端返回的内容，可能是对象，也可能是字符串
+  response?: string | Record<string, any>
+}
+
+export interface ChooseFile {
+  path: string // 上传临时地址
+  size?: number // 上传大小
+  name?: string // 当前文件名称，仅h5支持
+  type: 'image' | 'video' | 'file' // 上传类型
+  duration?: number // 上传时间
+  thumb?: string // 缩略图地址
+}
+
+export type UploadSourceType = 'album' | 'camera'
+export type UploadSizeType = 'original' | 'compressed'
+export type UploadFileType = 'image' | 'video' | 'media' | 'all' | 'file'
+export type UploadCameraType = 'front' | 'back'
+export type UploadStatusType = 'pending' | 'loading' | 'success' | 'fail'
+
+export type UploadBeforePreviewOption = {
+  file: UploadFileItem
+  index: number
+  imgList: string[]
+  fileList: UploadFileItem[]
+  resolve: (isPass: boolean) => void
+}
+export type UploadBeforePreview = (option: UploadBeforePreviewOption) => void
+
+export type UploadOnPreviewFailOption = {
+  index: number
+  imgList: string[]
+}
+export type UploadOnPreviewFail = (option: UploadOnPreviewFailOption) => void
+
+export type UploadBeforeRemoveOption = {
+  file: UploadFileItem
+  index: number
+  fileList: UploadFileItem[]
+  resolve: (isPass: boolean) => void
+}
+export type UploadBeforeRemove = (option: UploadBeforeRemoveOption) => void
+
+export type UploadBeforeChooseOption = {
+  fileList: UploadFileItem[]
+  resolve: (isPass: boolean) => void
+}
+export type UploadBeforeChoose = (option: UploadBeforeChooseOption) => void
+
+export type UploadBeforeUploadOption = {
+  files: Record<string, any>[]
+  fileList: UploadFileItem[]
+  resolve: (isPass: boolean) => void
+}
+export type UploadBeforeUpload = (options: UploadBeforeUploadOption) => void
+
+export type UploadFormData = Record<string, any>
+
+export type UploadBuildFormDataOption = {
+  file: UploadFileItem
+  formData: UploadFormData
+  resolve: (formData: Record<string, any>) => void
+}
+export type UploadBuildFormData = (options: UploadBuildFormDataOption) => void
+
+export type UploadFile = Partial<UploadFileItem> & { url: string }
+
+export type UploadMethod = (
+  uploadFile: UploadFileItem,
+  formData: UploadFormData,
+  options: {
+    action: string
+    header: Record<string, any>
+    name: string
+    fileName: string
+    fileType: 'image' | 'video' | 'audio'
+    statusCode: number
+    // 添加是否自动中断之前上传的选项
+    abortPrevious?: boolean
+    onSuccess: (res: UniApp.UploadFileSuccessCallbackResult, file: UploadFileItem, formData: UploadFormData) => void
+    onError: (res: UniApp.GeneralCallbackResult, file: UploadFileItem, formData: UploadFormData) => void
+    onProgress: (res: UniApp.OnProgressUpdateResult, file: UploadFileItem) => void
+  }
+) => UniApp.UploadTask | void | Promise<void> // 修改这里,支持返回 UploadTask 类型
+
+export const uploadProps = {
+  ...baseProps,
+  /**
+   * 上传的文件列表,例如:[{name:'food.jpg',url:'https://xxx.cdn.com/xxx.jpg'}]
+   * 类型：array
+   * 默认值：[]
+   */
+  fileList: makeArrayProp<UploadFile>(),
+  /**
+   * 必选参数，上传的地址
+   * 类型：string
+   * 默认值：''
+   */
+  action: makeStringProp(''),
+  /**
+   * 设置上传的请求头部
+   * 类型：object
+   * 默认值：{}
+   */
+  header: { type: Object as PropType<Record<string, any>>, default: () => ({}) },
+  /**
+   * 是否支持多选文件
+   * 类型：boolean
+   * 默认值：false
+   */
+  multiple: makeBooleanProp(false),
+  /**
+   * 是否禁用
+   * 类型：boolean
+   * 默认值：false
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 最大允许上传个数
+   * 类型：number
+   * 默认值：无
+   */
+  limit: Number,
+  /**
+   * 限制上传个数的情况下，是否展示当前上传的个数
+   * 类型：boolean
+   * 默认值：true
+   */
+  showLimitNum: makeBooleanProp(true),
+  /**
+   * 文件大小限制，单位为byte
+   * 类型：number
+   * 默认值：Number.MAX_VALUE
+   */
+  maxSize: makeNumberProp(Number.MAX_VALUE),
+  /**
+   * 选择图片的来源，chooseImage接口详细参数，查看官方手册
+   * 类型：array
+   * 默认值：['album','camera']
+   */
+  sourceType: {
+    type: Array as PropType<UploadSourceType[]>,
+    default: () => ['album', 'camera']
+  },
+  /**
+   * 所选的图片的尺寸，chooseImage接口详细参数，查看官方手册
+   * 类型：array
+   * 默认值：['original','compressed']
+   */
+  sizeType: {
+    type: Array as PropType<UploadSizeType[]>,
+    // #ifndef MP-DINGTALK
+    default: () => ['original', 'compressed']
+    // #endif
+  },
+  /**
+   * 文件对应的key，开发者在服务端可以通过这个key获取文件的二进制内容，uploadFile接口详细参数，查看官方手册
+   * 类型：string
+   * 默认值：'file'
+   */
+  name: makeStringProp('file'),
+  /**
+   * HTTP请求中其他额外的formdata，uploadFile接口详细参数，查看官方手册
+   * 类型：object
+   * 默认值：{}
+   */
+  formData: { type: Object as PropType<UploadFormData>, default: () => {} },
+  /**
+   * 预览失败执行操作
+   * 类型：function({index,imgList})
+   * 默认值：-
+   */
+  onPreviewFail: Function as PropType<UploadOnPreviewFail>,
+  /**
+   * 上传文件之前的钩子，参数为上传的文件和文件列表，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({files,fileList,resolve})
+   * 默认值：-
+   */
+  beforeUpload: Function as PropType<UploadBeforeUpload>,
+  /**
+   * 选择图片之前的钩子，参数为文件列表，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({fileList,resolve})
+   * 默认值：-
+   */
+  beforeChoose: Function as PropType<UploadBeforeChoose>,
+  /**
+   * 删除文件之前的钩子，参数为要删除的文件和文件列表，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({file,fileList,resolve})
+   * 默认值：-
+   */
+  beforeRemove: Function as PropType<UploadBeforeRemove>,
+  /**
+   * 图片预览前的钩子，参数为预览的图片下标和图片列表，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({index,imgList,resolve})
+   * 默认值：-
+   */
+  beforePreview: Function as PropType<UploadBeforePreview>,
+  /**
+   * 构建上传formData的钩子，参数为上传的文件、待处理的formData，返回值为处理后的formData，若返回false或者返回Promise且被reject，则停止上传。
+   * 类型：function({file,formData,resolve})
+   * 默认值：-
+   * 最低版本：0.1.61
+   */
+  buildFormData: Function as PropType<UploadBuildFormData>,
+  /**
+   * 加载中图标类型
+   * 类型：string
+   * 默认值：'ring'
+   */
+  loadingType: makeStringProp<LoadingType>('ring'),
+  /**
+   * 加载中图标颜色
+   * 类型：string
+   * 默认值：'#ffffff'
+   */
+  loadingColor: makeStringProp('#ffffff'),
+  /**
+   * 文件类型，可选值：'image' | 'video' | 'media' | 'all' | 'file'
+   * 默认值：image
+   * 描述：'media'表示同时支持'image'和'video'，'file'表示支持除'image'和'video'外的所有文件类型，'all'标识支持全部类型文件
+   * 'media'和'file'仅微信支持，'all'仅微信和H5支持
+   */
+  accept: makeStringProp<UploadFileType>('image'),
+  /**
+   * file 数据结构中，status 对应的 key
+   * 类型：string
+   * 默认值：'status'
+   */
+  statusKey: makeStringProp('status'),
+  /**
+   * 加载中图标尺寸
+   * 类型：string
+   * 默认值：'24px'
+   */
+  loadingSize: makeStringProp('24px'),
+  /**
+   * 是否压缩视频，当 accept 为 video 时生效。
+   * 类型：boolean
+   * 默认值：true
+   */
+  compressed: makeBooleanProp(true),
+  /**
+   * 拍摄视频最长拍摄时间，当 accept 为 video | media 时生效，单位秒。
+   * 类型：number
+   * 默认值：60
+   */
+  maxDuration: makeNumberProp(60),
+  /**
+   * 使用前置或者后置相机，当 accept 为 video | media 时生效，可选值为：back｜front。
+   * 类型：UploadCameraType
+   * 默认值：'back'
+   */
+  camera: makeStringProp<UploadCameraType>('back'),
+  /**
+   * 预览图片的mode属性
+   */
+  imageMode: makeStringProp<ImageMode>('aspectFit'),
+  /**
+   * 接口响应的成功状态（statusCode）值
+   */
+  successStatus: makeNumberProp(200),
+  /**
+   * 自定义上传按钮样式
+   * 类型：string
+   */
+  customEvokeClass: makeStringProp(''),
+  /**
+   * 自定义预览图片列表样式
+   * 类型：string
+   */
+  customPreviewClass: makeStringProp(''),
+  /**
+   * 是否选择文件后自动上传
+   * 类型：boolean
+   */
+  autoUpload: makeBooleanProp(true),
+  /**
+   * 点击已上传时是否可以重新上传
+   * 类型：boolean
+   * 默认值：false
+   */
+  reupload: makeBooleanProp(false),
+  /**
+   * 自定义上传文件的请求方法
+   * 类型：UploadMethod
+   * 默认值：-
+   */
+  uploadMethod: Function as PropType<UploadMethod>,
+  /**
+   * 根据文件拓展名过滤,每一项都不能是空字符串。默认不过滤。
+   * H5支持全部类型过滤。
+   * 微信小程序支持all和file时过滤,其余平台不支持。
+   */
+  extension: Array as PropType<string[]>
+}
+
+export type UploadProps = ExtractPropTypes<typeof uploadProps>
+
+export type UploadExpose = {
+  /**
+   * 手动触发上传
+   */
+  submit: () => void
+  /**
+   * 取消上传
+   * @param task 上传任务
+   */
+  abort: (task?: UniApp.UploadTask) => void
+}
+
+export type UploadErrorEvent = {
+  error: any
+  file: UploadFileItem
+  formData: UploadFormData
+}
+
+export type UploadChangeEvent = {
+  fileList: UploadFileItem[]
+}
+
+export type UploadSuccessEvent = {
+  file: UploadFileItem
+  fileList: UploadFileItem[]
+  formData: UploadFormData
+}
+
+export type UploadProgressEvent = {
+  response: UniApp.OnProgressUpdateResult
+  file: UploadFileItem
+}
+
+export type UploadOversizeEvent = {
+  file: ChooseFile
+}
+
+export type UploadRemoveEvent = {
+  file: UploadFileItem
+}
+
+export type UploadInstance = ComponentPublicInstance<UploadProps, UploadExpose>
diff --git a/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue b/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
new file mode 100644
index 0000000..0f7842f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-upload/wd-upload.vue
@@ -0,0 +1,667 @@
+<template>
+  <view :class="['wd-upload', customClass]" :style="customStyle">
+    <!-- 预览列表 -->
+    <view :class="['wd-upload__preview', customPreviewClass]" v-for="(file, index) in uploadFiles" :key="index">
+      <!-- 成功时展示图片 -->
+      <view class="wd-upload__status-content">
+        <image v-if="isImage(file)" :src="file.url" :mode="imageMode" class="wd-upload__picture" @click="onPreviewImage(file)" />
+        <template v-else-if="isVideo(file)">
+          <view class="wd-upload__video" v-if="file.thumb" @click="onPreviewVideo(file)">
+            <image :src="file.thumb" :mode="imageMode" class="wd-upload__picture" />
+            <wd-icon name="play-circle-filled" custom-class="wd-upload__video-paly"></wd-icon>
+          </view>
+          <view v-else class="wd-upload__video" @click="onPreviewVideo(file)">
+            <!-- #ifdef APP-PLUS || MP-DINGTALK -->
+            <wd-icon custom-class="wd-upload__video-icon" name="video"></wd-icon>
+            <!-- #endif -->
+            <!-- #ifndef APP-PLUS -->
+            <!-- #ifndef MP-DINGTALK -->
+            <video
+              :src="file.url"
+              :title="file.name || '视频' + index"
+              object-fit="contain"
+              :controls="false"
+              :poster="file.thumb"
+              :autoplay="false"
+              :show-center-play-btn="false"
+              :show-fullscreen-btn="false"
+              :show-play-btn="false"
+              :show-loading="false"
+              :show-progress="false"
+              :show-mute-btn="false"
+              :enable-progress-gesture="false"
+              :enableNative="true"
+              class="wd-upload__video"
+            ></video>
+            <wd-icon name="play-circle-filled" custom-class="wd-upload__video-paly"></wd-icon>
+            <!-- #endif -->
+            <!-- #endif -->
+          </view>
+        </template>
+
+        <view v-else class="wd-upload__file" @click="onPreviewFile(file)">
+          <wd-icon name="file" custom-class="wd-upload__file-icon"></wd-icon>
+          <view class="wd-upload__file-name">{{ file.name || file.url }}</view>
+        </view>
+      </view>
+
+      <view v-if="file[props.statusKey] !== 'success'" class="wd-upload__mask wd-upload__status-content">
+        <!-- loading时展示loading图标和进度 -->
+        <view v-if="file[props.statusKey] === 'loading'" class="wd-upload__status-content">
+          <wd-loading :type="loadingType" :size="loadingSize" :color="loadingColor" />
+          <text class="wd-upload__progress-txt">{{ file.percent }}%</text>
+        </view>
+        <!-- 失败时展示失败图标以及失败信息 -->
+        <view v-if="file[props.statusKey] === 'fail'" class="wd-upload__status-content">
+          <wd-icon name="close-outline" custom-class="wd-upload__icon"></wd-icon>
+          <text class="wd-upload__progress-txt">{{ file.error || translate('error') }}</text>
+        </view>
+      </view>
+      <!-- 上传状态为上传中时不展示移除按钮 -->
+      <wd-icon
+        v-if="file[props.statusKey] !== 'loading' && !disabled"
+        name="error-fill"
+        custom-class="wd-upload__close"
+        @click="removeFile(index)"
+      ></wd-icon>
+      <!-- 自定义预览样式 -->
+      <slot name="preview-cover" v-if="$slots['preview-cover']" :file="file" :index="index"></slot>
+    </view>
+
+    <block v-if="showUpload">
+      <view :class="['wd-upload__evoke-slot', customEvokeClass]" v-if="$slots.default" @click="handleChoose">
+        <slot></slot>
+      </view>
+      <!-- 唤起项 -->
+      <view v-else @click="handleChoose" :class="['wd-upload__evoke', disabled ? 'is-disabled' : '', customEvokeClass]">
+        <!-- 唤起项图标 -->
+        <wd-icon class="wd-upload__evoke-icon" name="fill-camera"></wd-icon>
+        <!-- 有限制个数时确认是否展示限制个数 -->
+        <view v-if="limit && showLimitNum" class="wd-upload__evoke-num">（{{ uploadFiles.length }}/{{ limit }}）</view>
+      </view>
+    </block>
+  </view>
+  <wd-video-preview ref="videoPreview"></wd-video-preview>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-upload',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdVideoPreview from '../wd-video-preview/wd-video-preview.vue'
+import wdLoading from '../wd-loading/wd-loading.vue'
+
+import { computed, ref, watch } from 'vue'
+import { context, isEqual, isImageUrl, isVideoUrl, isFunction, isDef, deepClone } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { useUpload } from '../composables/useUpload'
+import {
+  uploadProps,
+  type UploadFileItem,
+  type ChooseFile,
+  type UploadExpose,
+  type UploadErrorEvent,
+  type UploadChangeEvent,
+  type UploadSuccessEvent,
+  type UploadProgressEvent,
+  type UploadOversizeEvent,
+  type UploadRemoveEvent,
+  type UploadMethod
+} from './types'
+import type { VideoPreviewInstance } from '../wd-video-preview/types'
+
+const props = defineProps(uploadProps)
+
+const emit = defineEmits<{
+  (e: 'fail', value: UploadErrorEvent): void
+  (e: 'change', value: UploadChangeEvent): void
+  (e: 'success', value: UploadSuccessEvent): void
+  (e: 'progress', value: UploadProgressEvent): void
+  (e: 'oversize', value: UploadOversizeEvent): void
+  (e: 'chooseerror', value: any): void
+  (e: 'remove', value: UploadRemoveEvent): void
+  (e: 'update:fileList', value: UploadFileItem[]): void
+}>()
+
+defineExpose<UploadExpose>({
+  submit: () => startUploadFiles(),
+  abort: () => abort()
+})
+
+const { translate } = useTranslate('upload')
+
+const uploadFiles = ref<UploadFileItem[]>([])
+
+const showUpload = computed(() => !props.limit || uploadFiles.value.length < props.limit)
+
+const videoPreview = ref<VideoPreviewInstance>()
+
+const { startUpload, abort, chooseFile, UPLOAD_STATUS } = useUpload()
+
+watch(
+  () => props.fileList,
+  (val) => {
+    const { statusKey } = props
+    if (isEqual(val, uploadFiles.value)) return
+    const uploadFileList: UploadFileItem[] = val.map((item) => {
+      item[statusKey] = item[statusKey] || 'success'
+      item.response = item.response || ''
+      return { ...item, uid: context.id++ }
+    })
+    uploadFiles.value = uploadFileList
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.limit,
+  (val) => {
+    if (val && val < uploadFiles.value.length) {
+      console.error('[wot-design]Error: props limit must less than fileList.length')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.beforePreview,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforePreview must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.onPreviewFail,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of onPreviewFail must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.beforeRemove,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforeRemove must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.beforeUpload,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforeUpload must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.beforeChoose,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of beforeChoose must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+watch(
+  () => props.buildFormData,
+  (fn) => {
+    if (fn && !isFunction(fn)) {
+      console.error('The type of buildFormData must be Function')
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+function emitFileList() {
+  emit('update:fileList', uploadFiles.value)
+}
+
+/**
+ *  开始上传文件
+ */
+function startUploadFiles() {
+  const { buildFormData, formData = {}, statusKey } = props
+  const { action, name, header = {}, accept, successStatus, uploadMethod } = props
+  const statusCode = isDef(successStatus) ? successStatus : 200
+
+  for (const uploadFile of uploadFiles.value) {
+    // 仅开始未上传的文件
+    if (uploadFile[statusKey] === UPLOAD_STATUS.PENDING) {
+      if (buildFormData) {
+        buildFormData({
+          file: uploadFile,
+          formData,
+          resolve: (formData: Record<string, any>) => {
+            formData &&
+              startUpload(uploadFile, {
+                action,
+                header,
+                name,
+                formData,
+                fileType: accept as 'image' | 'video' | 'audio',
+                statusCode,
+                statusKey,
+                uploadMethod,
+                onSuccess: handleSuccess,
+                onError: handleError,
+                onProgress: handleProgress
+              })
+          }
+        })
+      } else {
+        startUpload(uploadFile, {
+          action,
+          header,
+          name,
+          formData,
+          fileType: accept as 'image' | 'video' | 'audio',
+          statusCode,
+          statusKey,
+          uploadMethod,
+          onSuccess: handleSuccess,
+          onError: handleError,
+          onProgress: handleProgress
+        })
+      }
+    }
+  }
+}
+
+/**
+ * 获取图片信息
+ * @param img
+ */
+function getImageInfo(img: string) {
+  return new Promise<UniApp.GetImageInfoSuccessData>((resolve, reject) => {
+    uni.getImageInfo({
+      src: img,
+      success: (res) => {
+        resolve(res)
+      },
+      fail: (error) => {
+        reject(error)
+      }
+    })
+  })
+}
+
+/**
+ * @description 初始化文件数据
+ * @param {Object} file 上传的文件
+ */
+function initFile(file: ChooseFile, currentIndex?: number) {
+  const { statusKey } = props
+  // 状态初始化
+  const initState: UploadFileItem = {
+    uid: context.id++,
+    // 仅h5支持 name
+    name: file.name || '',
+    thumb: file.thumb || '',
+    [statusKey]: 'pending',
+    size: file.size || 0,
+    url: file.path,
+    percent: 0
+  }
+  if (typeof currentIndex === 'number') {
+    uploadFiles.value.splice(currentIndex, 1, initState)
+  } else {
+    uploadFiles.value.push(initState)
+  }
+  if (props.autoUpload) {
+    startUploadFiles()
+  }
+}
+
+/**
+ * @description 上传失败捕获
+ * @param {Object} err 错误返回信息
+ * @param {Object} file 上传的文件
+ */
+function handleError(err: Record<string, any>, file: UploadFileItem, formData: Record<string, any>) {
+  const { statusKey } = props
+  const index = uploadFiles.value.findIndex((item) => item.uid === file.uid)
+  if (index > -1) {
+    uploadFiles.value[index][statusKey] = 'fail'
+    uploadFiles.value[index].error = err.message
+    uploadFiles.value[index].response = err
+    emit('fail', { error: err, file, formData })
+    emitFileList()
+  }
+}
+
+/**
+ * @description 上传成功捕获
+ * @param {Object} res 接口返回信息
+ * @param {Object} file 上传的文件
+ */
+function handleSuccess(res: Record<string, any>, file: UploadFileItem, formData: Record<string, any>) {
+  const { statusKey } = props
+  const index = uploadFiles.value.findIndex((item) => item.uid === file.uid)
+  if (index > -1) {
+    uploadFiles.value[index][statusKey] = 'success'
+    uploadFiles.value[index].response = res.data
+    emit('change', { fileList: uploadFiles.value })
+    emit('success', { file, fileList: uploadFiles.value, formData })
+    emitFileList()
+  }
+}
+
+/**
+ * @description 上传中捕获
+ * @param {Object} res 接口返回信息
+ * @param {Object} file 上传的文件
+ */
+function handleProgress(res: UniApp.OnProgressUpdateResult, file: UploadFileItem) {
+  const index = uploadFiles.value.findIndex((item) => item.uid === file.uid)
+  if (index > -1) {
+    uploadFiles.value[index].percent = res.progress
+    emit('progress', { response: res, file })
+  }
+}
+
+/**
+ * @description 选择文件的实际操作，将chooseFile自己用promise包了一层
+ */
+function onChooseFile(currentIndex?: number) {
+  const { multiple, maxSize, accept, sizeType, limit, sourceType, compressed, maxDuration, camera, beforeUpload, extension } = props
+
+  chooseFile({
+    multiple,
+    sizeType,
+    sourceType,
+    maxCount: limit ? limit - uploadFiles.value.length : 9,
+    accept,
+    compressed,
+    maxDuration,
+    camera,
+    extension
+  })
+    .then((res) => {
+      // 成功选择初始化file
+      let files = res
+      // 单选只有一个
+      if (!multiple) {
+        files = files.slice(0, 1)
+      }
+      // 遍历列表逐个初始化上传参数
+      const mapFiles = async (files: ChooseFile[]) => {
+        for (let index = 0; index < files.length; index++) {
+          const file = files[index]
+          if (file.type === 'image' && !file.size) {
+            const imageInfo = await getImageInfo(file.path)
+            file.size = imageInfo.width * imageInfo.height
+          }
+          Number(file.size) <= maxSize ? initFile(file, currentIndex) : emit('oversize', { file })
+        }
+      }
+
+      // 上传前的钩子
+      if (beforeUpload) {
+        beforeUpload({
+          files,
+          fileList: uploadFiles.value,
+          resolve: (isPass: boolean) => {
+            isPass && mapFiles(files)
+          }
+        })
+      } else {
+        mapFiles(files)
+      }
+    })
+    .catch((error) => {
+      emit('chooseerror', { error })
+    })
+}
+
+/**
+ * @description 选择文件，内置拦截选择操作
+ */
+function handleChoose(index?: number) {
+  if (props.disabled) return
+  const { beforeChoose } = props
+
+  // 选择图片前的钩子
+  if (beforeChoose) {
+    beforeChoose({
+      fileList: uploadFiles.value,
+      resolve: (isPass: boolean) => {
+        isPass && onChooseFile(index)
+      }
+    })
+  } else {
+    onChooseFile(index)
+  }
+}
+
+/**
+ * @description 移除文件
+ * @param {Object} file 上传的文件
+ * @param {Number} index 删除
+ */
+function handleRemove(file: UploadFileItem) {
+  uploadFiles.value.splice(
+    uploadFiles.value.findIndex((item) => item.uid === file.uid),
+    1
+  )
+  emit('change', {
+    fileList: uploadFiles.value
+  })
+  emit('remove', { file })
+  emitFileList()
+}
+
+function removeFile(index: number) {
+  const { beforeRemove } = props
+  const intIndex: number = index
+  const file = uploadFiles.value[intIndex]
+  if (beforeRemove) {
+    beforeRemove({
+      file,
+      index: intIndex,
+      fileList: uploadFiles.value,
+      resolve: (isPass: boolean) => {
+        isPass && handleRemove(file)
+      }
+    })
+  } else {
+    handleRemove(file)
+  }
+}
+
+/**
+ * 预览文件
+ * @param file
+ */
+function handlePreviewFile(file: UploadFileItem) {
+  uni.openDocument({
+    filePath: file.url,
+    showMenu: true
+  })
+}
+
+/**
+ * 预览图片
+ * @param index
+ * @param lists
+ */
+function handlePreviewImage(index: number, lists: string[]) {
+  const { onPreviewFail } = props
+  uni.previewImage({
+    urls: lists,
+    current: lists[index],
+    fail() {
+      if (onPreviewFail) {
+        onPreviewFail({
+          index,
+          imgList: lists
+        })
+      } else {
+        uni.showToast({ title: '预览图片失败', icon: 'none' })
+      }
+    }
+  })
+}
+
+/**
+ * 预览视频
+ * @param index
+ * @param lists
+ */
+function handlePreviewVieo(index: number, lists: UploadFileItem[]) {
+  const { onPreviewFail } = props
+  // #ifdef MP-WEIXIN
+  uni.previewMedia({
+    current: index,
+    sources: lists.map((file) => {
+      return {
+        url: file.url,
+        type: 'video',
+        poster: file.thumb
+      }
+    }),
+    fail() {
+      if (onPreviewFail) {
+        onPreviewFail({
+          index,
+          imgList: []
+        })
+      } else {
+        uni.showToast({ title: '预览视频失败', icon: 'none' })
+      }
+    }
+  })
+  // #endif
+
+  // #ifndef MP-WEIXIN
+  videoPreview.value?.open({ url: lists[index].url, poster: lists[index].thumb, title: lists[index].name })
+  // #endif
+}
+
+function onPreviewImage(file: UploadFileItem) {
+  const { beforePreview, reupload } = props
+  const fileList = deepClone(uploadFiles.value)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
+  const imgList = fileList.filter((file) => isImage(file)).map((file) => file.url)
+  const imgIndex: number = imgList.findIndex((item) => item === file.url)
+  if (reupload) {
+    handleChoose(index)
+  } else {
+    if (beforePreview) {
+      beforePreview({
+        file,
+        index,
+        fileList: fileList,
+        imgList: imgList,
+        resolve: (isPass: boolean) => {
+          isPass && handlePreviewImage(imgIndex, imgList)
+        }
+      })
+    } else {
+      handlePreviewImage(imgIndex, imgList)
+    }
+  }
+}
+
+function onPreviewVideo(file: UploadFileItem) {
+  const { beforePreview, reupload } = props
+  const fileList = deepClone(uploadFiles.value)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
+  const videoList = fileList.filter((file) => isVideo(file))
+  const videoIndex: number = videoList.findIndex((item) => item.url === file.url)
+  if (reupload) {
+    handleChoose(index)
+  } else {
+    if (beforePreview) {
+      beforePreview({
+        file,
+        index,
+        imgList: [],
+        fileList,
+        resolve: (isPass: boolean) => {
+          isPass && handlePreviewVieo(videoIndex, videoList)
+        }
+      })
+    } else {
+      handlePreviewVieo(videoIndex, videoList)
+    }
+  }
+}
+
+function onPreviewFile(file: UploadFileItem) {
+  const { beforePreview, reupload } = props
+  const fileList = deepClone(uploadFiles.value)
+  const index: number = fileList.findIndex((item) => item.url === file.url)
+  if (reupload) {
+    handleChoose(index)
+  } else {
+    if (beforePreview) {
+      beforePreview({
+        file,
+        index,
+        imgList: [],
+        fileList,
+        resolve: (isPass: boolean) => {
+          isPass && handlePreviewFile(file)
+        }
+      })
+    } else {
+      handlePreviewFile(file)
+    }
+  }
+}
+
+function isVideo(file: UploadFileItem) {
+  return (file.name && isVideoUrl(file.name)) || isVideoUrl(file.url)
+}
+
+function isImage(file: UploadFileItem) {
+  return (file.name && isImageUrl(file.name)) || isImageUrl(file.url)
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss b/src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss
new file mode 100644
index 0000000..1e3a2dc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-video-preview/index.scss
@@ -0,0 +1,34 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+@include b(video-preview) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background: $-video-preview-bg;
+
+  @include e(video) {
+    width: 100%;
+    height: 242px;
+    transition: all 0.3s ease;
+  }
+
+  @include edeep(close) {
+    position: absolute;
+    box-sizing: border-box;
+    top: 0px;
+    right: 0px;
+    padding: 12px;
+    text-align: center;
+    cursor: pointer;
+    font-size: $-video-preview-close-font-size;
+    color: $-video-preview-close-color;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-video-preview/types.ts b/src/uni_modules/wot-design-uni/components/wd-video-preview/types.ts
new file mode 100644
index 0000000..f4814cc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-video-preview/types.ts
@@ -0,0 +1,32 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-06-30 23:09:08
+ * @LastEditTime: 2024-07-01 21:47:34
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-video-preview/types.ts
+ * 记得注释
+ */
+import type { ComponentPublicInstance, ExtractPropTypes, PropType } from 'vue'
+import { baseProps } from '../common/props'
+
+export const videoPreviewProps = {
+  ...baseProps
+}
+
+export type PreviewVideo = {
+  url: string // 视频资源地址
+  poster?: string // 视频封面
+  title?: string // 视频标题
+}
+
+export type VideoPreviewProps = ExtractPropTypes<typeof videoPreviewProps>
+
+export type VideoPreviewExpose = {
+  // 打开弹框
+  open: (video: PreviewVideo) => void
+  // 关闭弹框
+  close: () => void
+}
+
+export type VideoPreviewInstance = ComponentPublicInstance<VideoPreviewExpose, VideoPreviewProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue b/src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue
new file mode 100644
index 0000000..66ecea3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-video-preview/wd-video-preview.vue
@@ -0,0 +1,72 @@
+<template>
+  <view :class="`wd-video-preview ${customClass}`" :style="customStyle" v-if="showPopup" @click="close">
+    <view class="wd-video-preview__video" @click.stop="">
+      <video
+        class="wd-video-preview__video"
+        v-if="previdewVideo.url"
+        :controls="true"
+        :poster="previdewVideo.poster"
+        :title="previdewVideo.title"
+        play-btn-position="center"
+        :enableNative="true"
+        :src="previdewVideo.url"
+        :enable-progress-gesture="false"
+      ></video>
+    </view>
+    <wd-icon name="close" :custom-class="`wd-video-preview__close`" @click="close" />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-video-preview',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { nextTick, reactive, ref } from 'vue'
+import { videoPreviewProps, type PreviewVideo, type VideoPreviewExpose } from './types'
+import useLockScroll from '../composables/useLockScroll'
+defineProps(videoPreviewProps)
+
+const showPopup = ref<boolean>(false)
+const previdewVideo = reactive<PreviewVideo>({ url: '', poster: '', title: '' })
+
+function open(video: PreviewVideo) {
+  showPopup.value = true
+  previdewVideo.url = video.url
+  previdewVideo.poster = video.poster
+  previdewVideo.title = video.title
+}
+
+function close() {
+  showPopup.value = false
+  nextTick(() => {
+    handleClosed()
+  })
+}
+
+function handleClosed() {
+  previdewVideo.url = ''
+  previdewVideo.poster = ''
+  previdewVideo.title = ''
+}
+
+// #ifdef H5
+useLockScroll(() => showPopup.value)
+// #endif
+
+defineExpose<VideoPreviewExpose>({
+  open,
+  close
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wd-watermark/index.scss b/src/uni_modules/wot-design-uni/components/wd-watermark/index.scss
new file mode 100644
index 0000000..8bfa97d
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-watermark/index.scss
@@ -0,0 +1,18 @@
+@import "../common/abstracts/variable.scss";
+@import "../common/abstracts/_mixin.scss";
+
+@include b(watermark) {
+  position: absolute;
+  z-index: 1100;
+  opacity: 0.5;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+  background-repeat: repeat;
+
+  @include when(fullscreen) {
+    position: fixed;
+  }
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/components/wd-watermark/types.ts b/src/uni_modules/wot-design-uni/components/wd-watermark/types.ts
new file mode 100644
index 0000000..8c91dff
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-watermark/types.ts
@@ -0,0 +1,76 @@
+import type { ExtractPropTypes } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeNumericProp, makeStringProp } from '../common/props'
+
+export const watermarkProps = {
+  ...baseProps,
+  /**
+   * 显示内容
+   */
+  content: makeStringProp(''),
+  /**
+   * 显示图片的地址，支持网络图片和base64（钉钉小程序仅支持网络图片）
+   */
+  image: makeStringProp(''),
+  /**
+   * 图片高度
+   */
+  imageHeight: makeNumberProp(100),
+  /**
+   * 图片高度
+   */
+  imageWidth: makeNumberProp(100),
+  /**
+   * X轴间距，单位px
+   */
+  gutterX: makeNumberProp(0),
+  /**
+   * Y轴间距，单位px
+   */
+  gutterY: makeNumberProp(0),
+  /**
+   * canvas画布宽度，单位px
+   */
+  width: makeNumberProp(100),
+  /**
+   * canvas画布高度，单位px
+   */
+  height: makeNumberProp(100),
+  /**
+   * 是否为全屏水印
+   */
+  fullScreen: makeBooleanProp(true),
+  /**
+   * 水印字体颜色
+   */
+  color: makeStringProp('#8c8c8c'),
+  /**
+   * 水印字体大小，单位px
+   */
+  size: makeNumberProp(14),
+  /**
+   * 水印字体样式（仅微信和h5支持），可能的值：normal、italic、oblique
+   */
+  fontStyle: makeStringProp('normal'),
+  /**
+   * 水印字体的粗细（仅微信和h5支持）
+   */
+  fontWeight: makeNumericProp('normal'),
+  /**
+   * 水印字体系列（仅微信和h5支持）
+   */
+  fontFamily: makeStringProp('PingFang SC'),
+  /**
+   * 水印旋转角度
+   */
+  rotate: makeNumberProp(-25),
+  /**
+   * 自定义层级
+   */
+  zIndex: makeNumberProp(1100),
+  /**
+   * 自定义透明度，取值 0~1
+   */
+  opacity: makeNumberProp(0.5)
+}
+
+export type WatermarkProps = ExtractPropTypes<typeof watermarkProps>
diff --git a/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue b/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
new file mode 100644
index 0000000..097a5cc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
@@ -0,0 +1,495 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-04-05 21:32:56
+ * @LastEditTime: 2025-04-28 19:41:17
+ * @LastEditors: weisheng
+ * @Description: 水印组件
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-watermark/wd-watermark.vue
+ * 记得注释
+-->
+<template>
+  <view :class="rootClass" :style="rootStyle">
+    <canvas
+      v-if="!canvasOffScreenable && showCanvas"
+      type="2d"
+      :style="{ height: canvasHeight + 'px', width: canvasWidth + 'px', visibility: 'hidden' }"
+      :canvas-id="canvasId"
+      :id="canvasId"
+    />
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-watermark',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch, nextTick, type CSSProperties } from 'vue'
+import { addUnit, buildUrlWithParams, isBase64Image, objToStyle, uuid } from '../common/util'
+import { watermarkProps } from './types'
+
+const props = defineProps(watermarkProps)
+
+watch(
+  () => props,
+  () => {
+    doReset()
+  },
+  { deep: true }
+)
+
+const canvasId = ref<string>(`water${uuid()}`) // canvas 组件的唯一标识符
+const waterMarkUrl = ref<string>('') // canvas生成base64水印
+const canvasOffScreenable = ref<boolean>(uni.canIUse('createOffscreenCanvas') && Boolean(uni.createOffscreenCanvas)) // 是否可以使用离屏canvas
+const pixelRatio = ref<number>(uni.getSystemInfoSync().pixelRatio) // 像素比
+const canvasHeight = ref<number>((props.height + props.gutterY) * pixelRatio.value) // canvas画布高度
+const canvasWidth = ref<number>((props.width + props.gutterX) * pixelRatio.value) // canvas画布宽度
+const showCanvas = ref<boolean>(true) // 是否展示canvas
+
+/**
+ * 水印css类
+ */
+const rootClass = computed(() => {
+  let classess: string = 'wd-watermark'
+  if (props.fullScreen) {
+    classess = `${classess} is-fullscreen`
+  }
+  return `${classess} ${props.customClass}`
+})
+
+/**
+ * 水印样式
+ */
+const rootStyle = computed(() => {
+  const style: CSSProperties = {
+    opacity: props.opacity,
+    backgroundSize: addUnit(props.width + props.gutterX)
+  }
+  if (waterMarkUrl.value) {
+    style['backgroundImage'] = `url('${waterMarkUrl.value}')`
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+onMounted(() => {
+  doInit()
+})
+
+function doReset() {
+  showCanvas.value = true
+  canvasHeight.value = (props.height + props.gutterY) * pixelRatio.value
+  canvasWidth.value = (props.width + props.gutterX) * pixelRatio.value
+  nextTick(() => {
+    doInit()
+  })
+}
+
+function doInit() {
+  // #ifdef H5
+  // h5使用document.createElement创建canvas，不用展示canvas标签
+  showCanvas.value = false
+  // #endif
+  const { width, height, color, size, fontStyle, fontWeight, fontFamily, content, rotate, gutterX, gutterY, image, imageHeight, imageWidth } = props
+
+  // 创建水印
+  createWaterMark(width, height, color, size, fontStyle, fontWeight, fontFamily, content, rotate, gutterX, gutterY, image, imageHeight, imageWidth)
+}
+
+/**
+ * 创建水印图片
+ * @param width canvas宽度
+ * @param height canvas高度
+ * @param color canvas字体颜色
+ * @param size canvas字体大小
+ * @param fontStyle canvas字体样式
+ * @param fontWeight canvas字体字重
+ * @param fontFamily canvas字体系列
+ * @param content canvas内容
+ * @param rotate 倾斜角度
+ * @param gutterX X轴间距
+ * @param gutterY Y轴间距
+ * @param image canvas图片
+ * @param imageHeight canvas图片高度
+ * @param imageWidth canvas图片宽度
+ */
+function createWaterMark(
+  width: number,
+  height: number,
+  color: string,
+  size: number,
+  fontStyle: string,
+  fontWeight: number | string,
+  fontFamily: string,
+  content: string,
+  rotate: number,
+  gutterX: number,
+  gutterY: number,
+  image: string,
+  imageHeight: number,
+  imageWidth: number
+) {
+  const canvasHeight = (height + gutterY) * pixelRatio.value
+  const canvasWidth = (width + gutterX) * pixelRatio.value
+  const contentWidth = width * pixelRatio.value
+  const contentHeight = height * pixelRatio.value
+  const fontSize = size * pixelRatio.value
+  // #ifndef H5
+  if (canvasOffScreenable.value) {
+    createOffscreenCanvas(
+      canvasHeight,
+      canvasWidth,
+      contentWidth,
+      contentHeight,
+      rotate,
+      fontSize,
+      fontFamily,
+      fontStyle,
+      fontWeight,
+      color,
+      content,
+      image,
+      imageHeight,
+      imageWidth
+    )
+  } else {
+    createCanvas(canvasHeight, contentWidth, rotate, fontSize, color, content, image, imageHeight, imageWidth)
+  }
+  // #endif
+  // #ifdef H5
+  createH5Canvas(
+    canvasHeight,
+    canvasWidth,
+    contentWidth,
+    contentHeight,
+    rotate,
+    fontSize,
+    fontFamily,
+    fontStyle,
+    fontWeight,
+    color,
+    content,
+    image,
+    imageHeight,
+    imageWidth
+  )
+  // #endif
+}
+
+/**
+ * 创建离屏canvas
+ * @param canvasHeight canvas高度
+ * @param canvasWidth canvas宽度
+ * @param contentWidth 内容宽度
+ * @param contentHeight 内容高度
+ * @param rotate 内容倾斜角度
+ * @param fontSize 字体大小
+ * @param fontFamily 字体系列
+ * @param fontStyle 字体样式
+ * @param fontWeight 字体字重
+ * @param color 字体颜色
+ * @param content 内容
+ * @param image canvas图片
+ * @param imageHeight canvas图片高度
+ * @param imageWidth canvas图片宽度
+ */
+function createOffscreenCanvas(
+  canvasHeight: number,
+  canvasWidth: number,
+  contentWidth: number,
+  contentHeight: number,
+  rotate: number,
+  fontSize: number,
+  fontFamily: string,
+  fontStyle: string,
+  fontWeight: string | number,
+  color: string,
+  content: string,
+  image: string,
+  imageHeight: number,
+  imageWidth: number
+) {
+  // 创建离屏canvas
+  const canvas: any = uni.createOffscreenCanvas({ height: canvasHeight, width: canvasWidth, type: '2d' })
+  const ctx: any = canvas.getContext('2d')
+  if (ctx) {
+    if (image) {
+      const img = canvas.createImage() as HTMLImageElement
+      drawImageOffScreen(ctx, img, image, imageHeight, imageWidth, rotate, contentWidth, contentHeight, canvas)
+    } else {
+      drawTextOffScreen(ctx, content, contentWidth, contentHeight, rotate, fontSize, fontFamily, fontStyle, fontWeight, color, canvas)
+    }
+  } else {
+    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+  }
+}
+
+/**
+ * 非H5创建canvas
+ * 不支持创建离屏canvas时调用
+ * @param contentHeight 内容高度
+ * @param contentWidth 内容宽度
+ * @param rotate 内容倾斜角度
+ * @param fontSize 字体大小
+ * @param color 字体颜色
+ * @param content 内容
+ * @param image canvas图片
+ * @param imageHeight canvas图片高度
+ * @param imageWidth canvas图片宽度
+ */
+function createCanvas(
+  contentHeight: number,
+  contentWidth: number,
+  rotate: number,
+  fontSize: number,
+  color: string,
+  content: string,
+  image: string,
+  imageHeight: number,
+  imageWidth: number
+) {
+  const ctx = uni.createCanvasContext(canvasId.value)
+  if (ctx) {
+    if (image) {
+      drawImageOnScreen(ctx, image, imageHeight, imageWidth, rotate, contentWidth, contentHeight)
+    } else {
+      drawTextOnScreen(ctx, content, contentWidth, rotate, fontSize, color)
+    }
+  } else {
+    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+  }
+}
+
+/**
+ * h5创建canvas
+ * @param canvasHeight canvas高度
+ * @param canvasWidth canvas宽度
+ * @param contentWidth 水印内容宽度
+ * @param contentHeight 水印内容高度
+ * @param rotate 水印内容倾斜角度
+ * @param fontSize 水印字体大小
+ * @param fontFamily 水印字体系列
+ * @param fontStyle 水印字体样式
+ * @param fontWeight 水印字体字重
+ * @param color 水印字体颜色
+ * @param content 水印内容
+ */
+function createH5Canvas(
+  canvasHeight: number,
+  canvasWidth: number,
+  contentWidth: number,
+  contentHeight: number,
+  rotate: number,
+  fontSize: number,
+  fontFamily: string,
+  fontStyle: string,
+  fontWeight: string | number,
+  color: string,
+  content: string,
+  image: string,
+  imageHeight: number,
+  imageWidth: number
+) {
+  const canvas = document.createElement('canvas')
+  const ctx = canvas.getContext('2d')
+  canvas.setAttribute('width', `${canvasWidth}px`)
+  canvas.setAttribute('height', `${canvasHeight}px`)
+  if (ctx) {
+    if (image) {
+      const img = new Image()
+      drawImageOffScreen(ctx, img, image, imageHeight, imageWidth, rotate, contentWidth, contentHeight, canvas)
+    } else {
+      drawTextOffScreen(ctx, content, contentWidth, contentHeight, rotate, fontSize, fontFamily, fontStyle, fontWeight, color, canvas)
+    }
+  } else {
+    console.error('无法获取canvas上下文，请确认当前环境是否支持canvas')
+  }
+}
+
+/**
+ * 绘制离屏文字canvas
+ * @param ctx canvas上下文
+ * @param content 水印内容
+ * @param contentWidth 水印宽度
+ * @param contentHeight 水印高度
+ * @param rotate 水印内容倾斜角度
+ * @param fontSize 水印字体大小
+ * @param fontFamily 水印字体系列
+ * @param fontStyle 水印字体样式
+ * @param fontWeight 水印字体字重
+ * @param color 水印字体颜色
+ * @param canvas canvas实例
+ */
+function drawTextOffScreen(
+  ctx: CanvasRenderingContext2D,
+  content: string,
+  contentWidth: number,
+  contentHeight: number,
+  rotate: number,
+  fontSize: number,
+  fontFamily: string,
+  fontStyle: string,
+  fontWeight: string | number,
+  color: string,
+  canvas: HTMLCanvasElement
+) {
+  ctx.textBaseline = 'middle'
+  ctx.textAlign = 'center'
+  ctx.translate(contentWidth / 2, contentWidth / 2)
+  ctx.rotate((Math.PI / 180) * rotate)
+  ctx.font = `${fontStyle} normal ${fontWeight} ${fontSize}px/${contentHeight}px ${fontFamily}`
+  ctx.fillStyle = color
+  ctx.fillText(content, 0, 0)
+  ctx.restore()
+  waterMarkUrl.value = canvas.toDataURL()
+}
+
+/**
+ * 绘制在屏文字canvas
+ * @param ctx canvas上下文
+ * @param content 水印内容
+ * @param contentWidth 水印宽度
+ * @param rotate 水印内容倾斜角度
+ * @param fontSize 水印字体大小
+ * @param color 水印字体颜色
+ */
+function drawTextOnScreen(ctx: UniApp.CanvasContext, content: string, contentWidth: number, rotate: number, fontSize: number, color: string) {
+  ctx.setTextBaseline('middle')
+  ctx.setTextAlign('center')
+  ctx.translate(contentWidth / 2, contentWidth / 2)
+  ctx.rotate((Math.PI / 180) * rotate)
+  ctx.setFillStyle(color)
+  ctx.setFontSize(fontSize)
+  ctx.fillText(content, 0, 0)
+  ctx.restore()
+  ctx.draw()
+  // #ifdef MP-DINGTALK
+  // 钉钉小程序的canvasToTempFilePath接口与其他平台不一样
+  ;(ctx as any).toTempFilePath({
+    success(res: any) {
+      showCanvas.value = false
+      waterMarkUrl.value = res.filePath
+    }
+  })
+  // #endif
+  // #ifndef MP-DINGTALK
+  uni.canvasToTempFilePath({
+    canvasId: canvasId.value,
+    success: (res) => {
+      showCanvas.value = false
+      waterMarkUrl.value = res.tempFilePath
+    }
+  })
+  // #endif
+}
+
+/**
+ * 绘制离屏图片canvas
+ * @param ctx canvas上下文
+ * @param img 水印图片对象
+ * @param image 水印图片地址
+ * @param imageHeight 水印图片高度
+ * @param imageWidth 水印图片宽度
+ * @param rotate 水印内容倾斜角度
+ * @param contentWidth 水印宽度
+ * @param contentHeight 水印高度
+ * @param canvas canvas实例
+ */
+async function drawImageOffScreen(
+  ctx: CanvasRenderingContext2D,
+  img: HTMLImageElement,
+  image: string,
+  imageHeight: number,
+  imageWidth: number,
+  rotate: number,
+  contentWidth: number,
+  contentHeight: number,
+  canvas: HTMLCanvasElement
+) {
+  ctx.translate(contentWidth / 2, contentHeight / 2)
+  ctx.rotate((Math.PI / 180) * Number(rotate))
+  img.crossOrigin = 'anonymous'
+  img.referrerPolicy = 'no-referrer'
+
+  if (isBase64Image(image)) {
+    img.src = image
+  } else {
+    img.src = buildUrlWithParams(image, {
+      timestamp: `${new Date().getTime()}`
+    })
+  }
+  img.onload = () => {
+    ctx.drawImage(
+      img,
+      (-imageWidth * pixelRatio.value) / 2,
+      (-imageHeight * pixelRatio.value) / 2,
+      imageWidth * pixelRatio.value,
+      imageHeight * pixelRatio.value
+    )
+    ctx.restore()
+    waterMarkUrl.value = canvas.toDataURL()
+  }
+}
+
+/**
+ * 绘制在屏图片canvas
+ * @param ctx canvas上下文
+ * @param image 水印图片地址
+ * @param imageHeight 水印图片高度
+ * @param imageWidth 水印图片宽度
+ * @param rotate 水印内容倾斜角度
+ * @param contentWidth 水印宽度
+ * @param contentHeight 水印高度
+ */
+function drawImageOnScreen(
+  ctx: UniApp.CanvasContext,
+  image: string,
+  imageHeight: number,
+  imageWidth: number,
+  rotate: number,
+  contentWidth: number,
+  contentHeight: number
+) {
+  ctx.translate(contentWidth / 2, contentHeight / 2)
+  ctx.rotate((Math.PI / 180) * Number(rotate))
+
+  ctx.drawImage(
+    image,
+    (-imageWidth * pixelRatio.value) / 2,
+    (-imageHeight * pixelRatio.value) / 2,
+    imageWidth * pixelRatio.value,
+    imageHeight * pixelRatio.value
+  )
+  ctx.restore()
+  ctx.draw(false, () => {
+    // #ifdef MP-DINGTALK
+    // 钉钉小程序的canvasToTempFilePath接口与其他平台不一样
+    ;(ctx as any).toTempFilePath({
+      success(res: any) {
+        showCanvas.value = false
+        waterMarkUrl.value = res.filePath
+      }
+    })
+    // #endif
+    // #ifndef MP-DINGTALK
+    uni.canvasToTempFilePath({
+      canvasId: canvasId.value,
+      success: (res) => {
+        showCanvas.value = false
+        waterMarkUrl.value = res.tempFilePath
+      }
+    })
+    // #endif
+  })
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>
diff --git a/src/uni_modules/wot-design-uni/components/wot-design-uni/wot-design-uni.vue b/src/uni_modules/wot-design-uni/components/wot-design-uni/wot-design-uni.vue
new file mode 100644
index 0000000..a8da816
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/components/wot-design-uni/wot-design-uni.vue
@@ -0,0 +1,14 @@
+<!--
+ * @Author: weisheng
+ * @Date: 2023-07-20 00:34:54
+ * @LastEditTime: 2023-07-21 17:52:56
+ * @LastEditors: weisheng
+ * @Description: 
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\components\wot-design-uni\wot-design-uni.vue
+ * 记得注释
+-->
+<template>
+  <view></view>
+</template>
+<script></script>
+<style lang="scss" scoped></style>
diff --git a/src/uni_modules/wot-design-uni/global.d.ts b/src/uni_modules/wot-design-uni/global.d.ts
new file mode 100644
index 0000000..f2ed467
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/global.d.ts
@@ -0,0 +1,100 @@
+declare module 'vue' {
+  // Helper for Volar
+  export interface GlobalComponents {
+    WdActionSheet: typeof import('./components/wd-action-sheet/wd-action-sheet.vue')['default']
+    WdBadge: typeof import('./components/wd-badge/wd-badge.vue')['default']
+    WdButton: typeof import('./components/wd-button/wd-button.vue')['default']
+    WdCalendar: typeof import('./components/wd-calendar/wd-calendar.vue')['default']
+    WdCalendarView: typeof import('./components/wd-calendar-view/wd-calendar-view.vue')['default']
+    WdCard: typeof import('./components/wd-card/wd-card.vue')['default']
+    WdCell: typeof import('./components/wd-cell/wd-cell.vue')['default']
+    WdCellGroup: typeof import('./components/wd-cell-group/wd-cell-group.vue')['default']
+    WdCheckbox: typeof import('./components/wd-checkbox/wd-checkbox.vue')['default']
+    WdCheckboxGroup: typeof import('./components/wd-checkbox-group/wd-checkbox-group.vue')['default']
+    WdCol: typeof import('./components/wd-col/wd-col.vue')['default']
+    WdColPicker: typeof import('./components/wd-col-picker/wd-col-picker.vue')['default']
+    WdCollapse: typeof import('./components/wd-collapse/wd-collapse.vue')['default']
+    WdCollapseItem: typeof import('./components/wd-collapse-item/wd-collapse-item.vue')['default']
+    WdConfigProvider: typeof import('./components/wd-config-provider/wd-config-provider.vue')['default']
+    WdCurtain: typeof import('./components/wd-curtain/wd-curtain.vue')['default']
+    WdDatetimePicker: typeof import('./components/wd-datetime-picker/wd-datetime-picker.vue')['default']
+    WdDatetimePickerView: typeof import('./components/wd-datetime-picker-view/wd-datetime-picker-view.vue')['default']
+    WdDivider: typeof import('./components/wd-divider/wd-divider.vue')['default']
+    WdDropMenu: typeof import('./components/wd-drop-menu/wd-drop-menu.vue')['default']
+    WdDropMenuItem: typeof import('./components/wd-drop-menu-item/wd-drop-menu-item.vue')['default']
+    WdGrid: typeof import('./components/wd-grid/wd-grid.vue')['default']
+    WdGridItem: typeof import('./components/wd-grid-item/wd-grid-item.vue')['default']
+    WdIcon: typeof import('./components/wd-icon/wd-icon.vue')['default']
+    WdImg: typeof import('./components/wd-img/wd-img.vue')['default']
+    WdImgCropper: typeof import('./components/wd-img-cropper/wd-img-cropper.vue')['default']
+    WdInput: typeof import('./components/wd-input/wd-input.vue')['default']
+    WdInputNumber: typeof import('./components/wd-input-number/wd-input-number.vue')['default']
+    WdLoading: typeof import('./components/wd-loading/wd-loading.vue')['default']
+    WdLoadmore: typeof import('./components/wd-loadmore/wd-loadmore.vue')['default']
+    WdMessageBox: typeof import('./components/wd-message-box/wd-message-box.vue')['default']
+    WdOverlay: typeof import('./components/wd-overlay/wd-overlay.vue')['default']
+    WdNoticeBar: typeof import('./components/wd-notice-bar/wd-notice-bar.vue')['default']
+    WdPagination: typeof import('./components/wd-pagination/wd-pagination.vue')['default']
+    WdPicker: typeof import('./components/wd-picker/wd-picker.vue')['default']
+    WdPickerView: typeof import('./components/wd-picker-view/wd-picker-view.vue')['default']
+    WdPopover: typeof import('./components/wd-popover/wd-popover.vue')['default']
+    WdPopup: typeof import('./components/wd-popup/wd-popup.vue')['default']
+    WdProgress: typeof import('./components/wd-progress/wd-progress.vue')['default']
+    WdRadio: typeof import('./components/wd-radio/wd-radio.vue')['default']
+    WdRadioGroup: typeof import('./components/wd-radio-group/wd-radio-group.vue')['default']
+    WdRate: typeof import('./components/wd-rate/wd-rate.vue')['default']
+    WdResize: typeof import('./components/wd-resize/wd-resize.vue')['default']
+    WdRow: typeof import('./components/wd-row/wd-row.vue')['default']
+    WdSearch: typeof import('./components/wd-search/wd-search.vue')['default']
+    WdSelectPicker: typeof import('./components/wd-select-picker/wd-select-picker.vue')['default']
+    WdSlider: typeof import('./components/wd-slider/wd-slider.vue')['default']
+    WdSortButton: typeof import('./components/wd-sort-button/wd-sort-button.vue')['default']
+    WdStatusTip: typeof import('./components/wd-status-tip/wd-status-tip.vue')['default']
+    WdStep: typeof import('./components/wd-step/wd-step.vue')['default']
+    WdSteps: typeof import('./components/wd-steps/wd-steps.vue')['default']
+    WdSticky: typeof import('./components/wd-sticky/wd-sticky.vue')['default']
+    WdStickyBox: typeof import('./components/wd-sticky-box/wd-sticky-box.vue')['default']
+    WdSwipeAction: typeof import('./components/wd-swipe-action/wd-swipe-action.vue')['default']
+    WdSwitch: typeof import('./components/wd-switch/wd-switch.vue')['default']
+    WdTab: typeof import('./components/wd-tab/wd-tab.vue')['default']
+    WdTabs: typeof import('./components/wd-tabs/wd-tabs.vue')['default']
+    WdTag: typeof import('./components/wd-tag/wd-tag.vue')['default']
+    WdToast: typeof import('./components/wd-toast/wd-toast.vue')['default']
+    WdTooltip: typeof import('./components/wd-tooltip/wd-tooltip.vue')['default']
+    WdTransition: typeof import('./components/wd-transition/wd-transition.vue')['default']
+    WdUpload: typeof import('./components/wd-upload/wd-upload.vue')['default']
+    WdNotify: typeof import('./components/wd-notify/wd-notify.vue')['default']
+    WdWatermark: typeof import('./components/wd-watermark/wd-watermark.vue')['default']
+    WdCircle: typeof import('./components/wd-circle/wd-circle.vue')['default']
+    WdSwiper: typeof import('./components/wd-swiper/wd-swiper.vue')['default']
+    WdSwiperNav: typeof import('./components/wd-swiper-nav/wd-swiper-nav.vue')['default']
+    WdSegmented: typeof import('./components/wd-segmented/wd-segmented.vue')['default']
+    WdTabbar: typeof import('./components/wd-tabbar/wd-tabbar.vue')['default']
+    WdTabbarItem: typeof import('./components/wd-tabbar-item/wd-tabbar-item.vue')['default']
+    WdNavbar: typeof import('./components/wd-navbar/wd-navbar.vue')['default']
+    WdNavbarCapsule: typeof import('./components/wd-navbar-capsule/wd-navbar-capsule.vue')['default']
+    WdTable: typeof import('./components/wd-table/wd-table.vue')['default']
+    WdTableCol: typeof import('./components/wd-table-col/wd-table-col.vue')['default']
+    WdSidebar: typeof import('./components/wd-sidebar/wd-sidebar.vue')['default']
+    WdSidebarItem: typeof import('./components/wd-sidebar-item/wd-sidebar-item.vue')['default']
+    WdFab: typeof import('./components/wd-fab/wd-fab.vue')['default']
+    WdCountDown: typeof import('./components/wd-count-down/wd-count-down.vue')['default']
+    WdNumberKeyboard: typeof import('./components/wd-number-keyboard/wd-number-keyboard.vue')['default']
+    WdKeyboard: typeof import('./components/wd-keyboard/wd-keyboard.vue')['default']
+    WdGap: typeof import('./components/wd-gap/wd-gap.vue')['default']
+    WdPasswordInput: typeof import('./components/wd-password-input/wd-password-input.vue')['default']
+    WdForm: typeof import('./components/wd-form/wd-form.vue')['default']
+    WdTextarea: typeof import('./components/wd-textarea/wd-textarea.vue')['default']
+    WdVideoPreview: typeof import('./components/wd-video-preview/wd-video-preview.vue')['default']
+    WdBacktop: typeof import('./components/wd-backtop/wd-backtop.vue')['default']
+    WdSkeleton: typeof import('./components/wd-skeleton/wd-skeleton.vue')['default']
+    WdIndexBar: typeof import('./components/wd-index-bar/wd-index-bar.vue')['default']
+    WdIndexAnchor: typeof import('./components/wd-index-anchor/wd-index-anchor.vue')['default']
+    WdText: typeof import('./components/wd-text/wd-text.vue')['default']
+    WdCountTo: typeof import('./components/wd-count-to/wd-count-to.vue')['default']
+    WdFloatingPanel: typeof import('./components/wd-floating-panel/wd-floating-panel.vue')['default']
+    WdSignature: typeof import('./components/wd-signature/wd-signature.vue')['default']
+  }
+}
+
+export {}
diff --git a/src/uni_modules/wot-design-uni/index.ts b/src/uni_modules/wot-design-uni/index.ts
new file mode 100644
index 0000000..e9cf51e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/index.ts
@@ -0,0 +1,24 @@
+/*
+ * @Author: weisheng
+ * @Date: 2021-12-21 14:22:03
+ * @LastEditTime: 2025-03-25 14:01:43
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/index.ts
+ * 记得注释
+ */
+
+export { useToast } from './components/wd-toast'
+export { useMessage } from './components/wd-message-box'
+export { useQueue } from './components/composables/useQueue'
+export { useUpload } from './components/composables/useUpload'
+export { useTouch } from './components/composables/useTouch'
+export * from './components/wd-notify'
+
+export { dayjs } from './components/common/dayjs'
+
+export * as CommonUtil from './components/common/util'
+export * as clickOut from './components/common/clickoutside'
+
+export * from './locale'
+export type { ConfigProviderThemeVars } from './components/wd-config-provider/types'
diff --git a/src/uni_modules/wot-design-uni/locale/index.ts b/src/uni_modules/wot-design-uni/locale/index.ts
new file mode 100644
index 0000000..7688ddb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/index.ts
@@ -0,0 +1,41 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-01-25 23:06:48
+ * @LastEditTime: 2024-03-30 11:30:55
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/locale/index.ts
+ * 记得注释
+ */
+import { reactive, ref } from 'vue'
+import zhCN from './lang/zh-CN'
+import { deepAssign } from '../components/common/util'
+
+type Message = Record<string, any>
+type Messages = Record<string, Message>
+
+const lang = ref<string>('zh-CN')
+const messages = reactive<Messages>({
+  'zh-CN': zhCN
+})
+
+export const Locale = {
+  messages(): Message {
+    return messages[lang.value]
+  },
+
+  use(newLang: string, newMessage?: Message) {
+    lang.value = newLang
+    if (newMessage) {
+      this.add({ [newLang]: newMessage })
+    }
+  },
+
+  add(newMessages: Messages = {}) {
+    deepAssign(messages, newMessages)
+  }
+}
+
+export const useCurrentLang = () => lang
+
+export default Locale
diff --git a/src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts b/src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts
new file mode 100644
index 0000000..93ecaec
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/ar-SA.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: 'حدد التاريخ',
+    title: 'حدد التاريخ',
+    day: 'يوم',
+    week: 'أسبوع',
+    month: 'شهر',
+    confirm: 'تأكيد',
+    startTime: 'وقت البداية',
+    endTime: 'وقت النهاية',
+    to: 'إلى',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `${year} الأسبوع ${week}`,
+    startWeek: 'بداية الأسبوع',
+    endWeek: 'نهاية الأسبوع',
+    startMonth: 'بداية الشهر',
+    endMonth: 'نهاية الشهر',
+    monthFormat: 'YYYY-MM'
+  },
+  calendarView: {
+    startTime: 'وقت البداية',
+    endTime: 'وقت النهاية',
+    weeks: {
+      sun: 'الأحد',
+      mon: 'الاثنين',
+      tue: 'الثلاثاء',
+      wed: 'الأربعاء',
+      thu: 'الخميس',
+      fri: 'الجمعة',
+      sat: 'السبت'
+    },
+    rangePrompt: (maxRange: number) => `لا يمكن أن تزيد الأيام المحددة عن ${maxRange} يوم`,
+    rangePromptWeek: (maxRange: number) => `لا يمكن أن تزيد الأسابيع المحددة عن ${maxRange} أسبوع`,
+    rangePromptMonth: (maxRange: number) => `لا يمكن أن تزيد الشهور المحددة عن ${maxRange} شهر`,
+    monthTitle: 'YYYY-MM',
+    yearTitle: 'YYYY',
+    month: 'MM',
+    hour: (value: number) => `${value} ساعة`,
+    minute: (value: number) => `${value} دقيقة`,
+    second: (value: number) => `${value} ثانية`
+  },
+  datetimePicker: {
+    start: 'من',
+    end: 'إلى',
+    to: 'إلى',
+    placeholder: 'حدد التاريخ والوقت',
+    confirm: 'تأكيد',
+    cancel: 'إلغاء'
+  },
+  collapse: {
+    expand: 'توسيع',
+    retract: 'طي'
+  },
+  colPicker: {
+    title: 'حدد لون',
+    placeholder: 'حدد لون',
+    select: 'حدد'
+  },
+  loadmore: {
+    loading: 'جارٍ التحميل...',
+    finished: 'التحميل قد انتهى',
+    error: 'فشل التحميل...',
+    retry: 'إعادة المحاولة'
+  },
+  imgCropper: {
+    confirm: 'تأكيد',
+    cancel: 'إلغاء'
+  },
+  messageBox: {
+    inputPlaceholder: 'الرجاء إدخال المعلومات',
+    confirm: 'تأكيد',
+    cancel: 'إلغاء',
+    inputNoValidate: 'الرجاء التأكد من إدخال المعلومات الصحيحة'
+  },
+  numberKeyboard: {
+    confirm: 'إنهاء'
+  },
+  pagination: {
+    prev: 'السابق',
+    next: 'التالي',
+    page: (value: number) => `صفحة: ${value}`,
+    total: (total: number) => `المجموع: ${total}`,
+    size: (size: number) => `${size} / صفحة`
+  },
+  picker: {
+    cancel: 'إلغاء',
+    done: 'إنهاء',
+    placeholder: 'حدد'
+  },
+  search: {
+    search: 'بحث',
+    cancel: 'إلغاء'
+  },
+  steps: {
+    wait: 'لم يبدأ',
+    finished: 'تم',
+    process: 'جاري',
+    failed: 'فشل'
+  },
+  tabs: {
+    all: 'الجميع'
+  },
+  upload: {
+    error: 'فشل التحميل'
+  },
+  input: {
+    placeholder: 'الرجاء إدخال المعلومات...'
+  },
+  selectPicker: {
+    title: 'حدد',
+    placeholder: 'حدد',
+    select: 'حدد',
+    confirm: 'تأكيد',
+    filterPlaceholder: 'بحث'
+  },
+  tag: {
+    placeholder: 'إدخال',
+    add: 'إضافة وسم'
+  },
+  textarea: {
+    placeholder: 'الرجاء إدخال نص متعدد الأسطر هنا...'
+  },
+  tableCol: {
+    indexLabel: 'فهرس'
+  },
+  signature: {
+    confirmText: 'تأكيد',
+    clearText: 'مسح',
+    revokeText: 'تراجع',
+    restoreText: 'استعادة'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/de-DE.ts b/src/uni_modules/wot-design-uni/locale/lang/de-DE.ts
new file mode 100644
index 0000000..c36703f
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/de-DE.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: 'Wählen Sie',
+    title: 'Datum auswählen',
+    day: 'Tag',
+    week: 'Woche',
+    month: 'Monat',
+    confirm: 'Bestätigen',
+    startTime: 'Startdatum',
+    endTime: 'Enddatum',
+    to: 'bis',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `Woche ${week} ${year}`,
+    startWeek: 'Startwoche',
+    endWeek: 'Endwoche',
+    startMonth: 'Startmonat',
+    endMonth: 'Endmonat',
+    monthFormat: 'YYYY-MM'
+  },
+  calendarView: {
+    startTime: 'Startzeit',
+    endTime: 'Endzeit',
+    weeks: {
+      sun: 'So',
+      mon: 'Mo',
+      tue: 'Di',
+      wed: 'Mi',
+      thu: 'Do',
+      fri: 'Fr',
+      sat: 'Sa'
+    },
+    rangePrompt: (maxRange: number) => `Die Anzahl der ausgewählte Tage darf ${maxRange} Tage nicht überschreiten`,
+    rangePromptWeek: (maxRange: number) => `Die Anzahl der ausgewählte Wochen darf ${maxRange} Wochen nicht überschreiten`,
+    rangePromptMonth: (maxRange: number) => `Die Anzahl der ausgewählte Monate darf ${maxRange} Monate nicht überschreiten`,
+    monthTitle: 'YYYY-MM',
+    yearTitle: 'YYYY',
+    month: 'MM',
+    hour: (value: number) => `${value} Stunde`,
+    minute: (value: number) => `${value} Minute`,
+    second: (value: number) => `${value} Sekunde`
+  },
+  datetimePicker: {
+    start: 'Von',
+    end: 'Bis',
+    to: 'bis',
+    placeholder: 'Wählen Sie',
+    confirm: 'Bestätigen',
+    cancel: 'Abbrechen'
+  },
+  collapse: {
+    expand: 'Expandieren',
+    retract: 'Falten'
+  },
+  colPicker: {
+    title: 'Wählen',
+    placeholder: 'Wählen',
+    select: 'Wählen'
+  },
+  loadmore: {
+    loading: 'Laden...',
+    finished: 'Das Laden ist abgeschlossen',
+    error: 'Laden fehlgeschlagen...',
+    retry: 'Aktualisieren'
+  },
+  imgCropper: {
+    confirm: 'OK',
+    cancel: 'Stornieren'
+  },
+  messageBox: {
+    inputPlaceholder: 'Bitte geben Sie Informationen ein',
+    confirm: 'OK',
+    cancel: 'Stornieren',
+    inputNoValidate: 'Bitte geben Sie gültige Informationen ein'
+  },
+  numberKeyboard: {
+    confirm: 'OK'
+  },
+  pagination: {
+    prev: 'Vorherige',
+    next: 'Nächste',
+    page: (value: number) => `Seite: ${value}`,
+    total: (total: number) => `Gesamt: ${total}`,
+    size: (size: number) => `${size}/Seite`
+  },
+  picker: {
+    cancel: 'Stornieren',
+    done: 'OK',
+    placeholder: 'Wählen'
+  },
+  search: {
+    search: 'Suchen',
+    cancel: 'Stornieren'
+  },
+  steps: {
+    wait: 'Nicht gestartet',
+    finished: 'Abgelaufen',
+    process: 'Im Gange',
+    failed: 'Fehlgeschlagen'
+  },
+  tabs: {
+    all: 'Alle'
+  },
+  upload: {
+    error: 'Hochladen fehlgeschlagen'
+  },
+  input: {
+    placeholder: 'Bitte geben Sie Informationen ein...'
+  },
+  selectPicker: {
+    title: 'Auswählen',
+    placeholder: 'Wählen Sie',
+    select: 'Auswählen',
+    confirm: 'Bestätigen',
+    filterPlaceholder: 'Suchen'
+  },
+  tag: {
+    placeholder: 'Eingeben',
+    add: 'Tag hinzufügen'
+  },
+  textarea: {
+    placeholder: 'Bitte geben Sie Informationen ein...'
+  },
+  tableCol: {
+    indexLabel: 'Index'
+  },
+  signature: {
+    confirmText: 'Bestätigen',
+    clearText: 'Löschen',
+    revokeText: 'Rückgängig machen',
+    restoreText: 'Wiederherstellen'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/en-US.ts b/src/uni_modules/wot-design-uni/locale/lang/en-US.ts
new file mode 100644
index 0000000..d354723
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/en-US.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: 'Select',
+    title: 'Select Date',
+    day: 'Date',
+    week: 'Week',
+    month: 'Month',
+    confirm: 'OK',
+    startTime: 'Start Date',
+    endTime: 'End Date',
+    to: 'To',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `${year} W${week}`,
+    startWeek: 'Start Week',
+    endWeek: 'End Week',
+    startMonth: 'Start Month',
+    endMonth: 'End Month',
+    monthFormat: 'YYYY-MM'
+  },
+  calendarView: {
+    startTime: 'Start Time',
+    endTime: 'End Time',
+    weeks: {
+      sun: 'Sun',
+      mon: 'Mon',
+      tue: 'Tue',
+      wed: 'Wed',
+      thu: 'Thu',
+      fri: 'Fri',
+      sat: 'Sat'
+    },
+    rangePrompt: (maxRange: number) => `The number of selected days cannot exceed ${maxRange} days`,
+    rangePromptWeek: (maxRange: number) => `The number of weeks selected cannot exceed ${maxRange} weeks`,
+    rangePromptMonth: (maxRange: number) => `The selected month cannot exceed ${maxRange} months`,
+    monthTitle: 'YYYY-MM',
+    yearTitle: 'YYYY',
+    month: 'MM',
+    hour: (value: number) => `${value}`,
+    minute: (value: number) => `${value}`,
+    second: (value: number) => `${value}`
+  },
+  datetimePicker: {
+    start: 'From',
+    end: 'To',
+    to: 'To',
+    placeholder: 'Select',
+    confirm: 'OK',
+    cancel: 'Cancel'
+  },
+  collapse: {
+    expand: 'Expand',
+    retract: 'Fold'
+  },
+  colPicker: {
+    title: 'Select',
+    placeholder: 'Select',
+    select: 'Select'
+  },
+  loadmore: {
+    loading: 'Loading...',
+    finished: 'Finished loading',
+    error: 'Failed to load...',
+    retry: 'Refresh'
+  },
+  imgCropper: {
+    confirm: 'OK',
+    cancel: 'Cancel'
+  },
+  messageBox: {
+    inputPlaceholder: 'Please input information',
+    confirm: 'OK',
+    cancel: 'Cancel',
+    inputNoValidate: 'Please ensure you input correct information'
+  },
+  numberKeyboard: {
+    confirm: 'done'
+  },
+  pagination: {
+    prev: 'Previous',
+    next: 'Next',
+    page: (value: number) => `Page: ${value}`,
+    total: (total: number) => `Total: ${total}`,
+    size: (size: number) => `${size}/page`
+  },
+  picker: {
+    cancel: 'Cancel',
+    done: 'Done',
+    placeholder: 'Select'
+  },
+  search: {
+    search: 'Search',
+    cancel: 'Cancel'
+  },
+  steps: {
+    wait: 'Not Started',
+    finished: 'Expired',
+    process: 'In Progress',
+    failed: 'Failed'
+  },
+  tabs: {
+    all: 'All'
+  },
+  upload: {
+    error: 'Failed to upload'
+  },
+  input: {
+    placeholder: 'Please input information...'
+  },
+  selectPicker: {
+    title: 'Select',
+    placeholder: 'Select',
+    select: 'Select',
+    confirm: 'Ok',
+    filterPlaceholder: 'Search'
+  },
+  tag: {
+    placeholder: 'Enter',
+    add: 'Add Tag'
+  },
+  textarea: {
+    placeholder: 'Please input information...'
+  },
+  tableCol: {
+    indexLabel: 'index'
+  },
+  signature: {
+    confirmText: 'OK',
+    clearText: 'Clear',
+    revokeText: 'Undo',
+    restoreText: 'Restore'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/es-ES.ts b/src/uni_modules/wot-design-uni/locale/lang/es-ES.ts
new file mode 100644
index 0000000..d333c39
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/es-ES.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: 'Seleccionar',
+    title: 'Seleccionar Fecha',
+    day: 'Día',
+    week: 'Semana',
+    month: 'Mes',
+    confirm: 'Confirmar',
+    startTime: 'Hora de Inicio',
+    endTime: 'Hora de Fin',
+    to: 'a',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `Semana ${week}, ${year}`,
+    startWeek: 'Inicio de Semana',
+    endWeek: 'Fin de Semana',
+    startMonth: 'Inicio de Mes',
+    endMonth: 'Fin de Mes',
+    monthFormat: 'YYYY-MM'
+  },
+  calendarView: {
+    startTime: 'Inicio',
+    endTime: 'Fin',
+    weeks: {
+      sun: 'Dom',
+      mon: 'Lun',
+      tue: 'Mar',
+      wed: 'Mié',
+      thu: 'Jue',
+      fri: 'Vie',
+      sat: 'Sáb'
+    },
+    rangePrompt: (maxRange: number) => `No se puede seleccionar más de ${maxRange} días`,
+    rangePromptWeek: (maxRange: number) => `No se puede seleccionar más de ${maxRange} semanas`,
+    rangePromptMonth: (maxRange: number) => `No se puede seleccionar más de ${maxRange} meses`,
+    monthTitle: 'YYYY-MM',
+    yearTitle: 'YYYY',
+    month: 'MM',
+    hour: (value: number) => `${value}h`,
+    minute: (value: number) => `${value}min`,
+    second: (value: number) => `${value}seg`
+  },
+  collapse: {
+    expand: 'Expandir',
+    retract: 'Contraer'
+  },
+  colPicker: {
+    title: 'Seleccionar',
+    placeholder: 'Seleccionar',
+    select: 'Seleccionar'
+  },
+  datetimePicker: {
+    start: 'Inicio',
+    end: 'Fin',
+    to: 'a',
+    placeholder: 'Seleccionar',
+    confirm: 'Confirmar',
+    cancel: 'Cancelar'
+  },
+  loadmore: {
+    loading: 'Cargando...',
+    finished: 'Carga Completa',
+    error: 'Error al Cargar',
+    retry: 'Reintentar'
+  },
+  messageBox: {
+    inputPlaceholder: 'Por favor ingrese información',
+    confirm: 'Confirmar',
+    cancel: 'Cancelar',
+    inputNoValidate: 'Por favor ingrese información válida'
+  },
+  numberKeyboard: {
+    confirm: 'Confirmar'
+  },
+  pagination: {
+    prev: 'Anterior',
+    next: 'Siguiente',
+    page: (value: number) => `Página: ${value}`,
+    total: (total: number) => `Total: ${total}`,
+    size: (size: number) => `${size}/Página`
+  },
+  picker: {
+    cancel: 'Cancelar',
+    done: 'Hecho',
+    placeholder: 'Seleccionar'
+  },
+  imgCropper: {
+    confirm: 'Confirmar',
+    cancel: 'Cancelar'
+  },
+  search: {
+    search: 'Buscar',
+    cancel: 'Cancelar'
+  },
+  steps: {
+    wait: 'Pendiente',
+    finished: 'Completado',
+    process: 'En Proceso',
+    failed: 'Fallido'
+  },
+  tabs: {
+    all: 'Todos'
+  },
+  upload: {
+    error: 'Error al Subir'
+  },
+  input: {
+    placeholder: 'Por favor ingrese información...'
+  },
+  selectPicker: {
+    title: 'Seleccionar',
+    placeholder: 'Seleccionar',
+    select: 'Seleccionar',
+    confirm: 'Confirmar',
+    filterPlaceholder: 'Buscar'
+  },
+  tag: {
+    placeholder: 'Ingresar',
+    add: 'Agregar Etiqueta'
+  },
+  textarea: {
+    placeholder: 'Por favor ingrese información...'
+  },
+  tableCol: {
+    indexLabel: 'Índice'
+  },
+  signature: {
+    confirmText: 'Confirmar',
+    clearText: 'Limpiar',
+    revokeText: 'Deshacer',
+    restoreText: 'Restaurar'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts b/src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts
new file mode 100644
index 0000000..ead9854
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/fr-FR.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: 'Sélectionner',
+    title: 'Sélectionner une date',
+    day: 'Jour',
+    week: 'Semaine',
+    month: 'Mois',
+    confirm: 'Confirmer',
+    startTime: 'Heure de début',
+    endTime: 'Heure de fin',
+    to: 'à',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `Semaine ${week}, ${year}`,
+    startWeek: 'Début de la semaine',
+    endWeek: 'Fin de la semaine',
+    startMonth: 'Début du mois',
+    endMonth: 'Fin du mois',
+    monthFormat: 'YYYY-MM'
+  },
+  calendarView: {
+    startTime: 'Début',
+    endTime: 'Fin',
+    weeks: {
+      sun: 'Dim',
+      mon: 'Lun',
+      tue: 'Mar',
+      wed: 'Mer',
+      thu: 'Jeu',
+      fri: 'Ven',
+      sat: 'Sam'
+    },
+    rangePrompt: (maxRange: number) => `La sélection de jours ne peut pas dépasser ${maxRange} jours`,
+    rangePromptWeek: (maxRange: number) => `La sélection de semaines ne peut pas dépasser ${maxRange} semaines`,
+    rangePromptMonth: (maxRange: number) => `La sélection de mois ne peut pas dépasser ${maxRange} mois`,
+    monthTitle: 'YYYY-MM',
+    yearTitle: 'YYYY',
+    month: 'MM',
+    hour: (value: number) => `${value}h`,
+    minute: (value: number) => `${value}min`,
+    second: (value: number) => `${value}sec`
+  },
+  collapse: {
+    expand: 'Développer',
+    retract: 'Réduire'
+  },
+  colPicker: {
+    title: 'Sélectionner',
+    placeholder: 'Sélectionner',
+    select: 'Sélectionner'
+  },
+  datetimePicker: {
+    start: 'Début',
+    end: 'Fin',
+    to: 'à',
+    placeholder: 'Sélectionner',
+    confirm: 'Confirmer',
+    cancel: 'Annuler'
+  },
+  loadmore: {
+    loading: 'Chargement en cours...',
+    finished: 'Chargement terminé',
+    error: 'Échec du chargement',
+    retry: 'Réessayer'
+  },
+  messageBox: {
+    inputPlaceholder: 'Veuillez entrer des informations',
+    confirm: 'Confirmer',
+    cancel: 'Annuler',
+    inputNoValidate: 'Veuillez entrer des informations valides'
+  },
+  numberKeyboard: {
+    confirm: 'Confirmer'
+  },
+  pagination: {
+    prev: 'Précédent',
+    next: 'Suivant',
+    page: (value: number) => `Page: ${value}`,
+    total: (total: number) => `Total: ${total}`,
+    size: (size: number) => `${size}/Page`
+  },
+  picker: {
+    cancel: 'Annuler',
+    done: 'Terminé',
+    placeholder: 'Sélectionner'
+  },
+  imgCropper: {
+    confirm: 'Confirmer',
+    cancel: 'Annuler'
+  },
+  search: {
+    search: 'Rechercher',
+    cancel: 'Annuler'
+  },
+  steps: {
+    wait: 'En attente',
+    finished: 'Terminé',
+    process: 'En cours',
+    failed: 'Échec'
+  },
+  tabs: {
+    all: 'Tous'
+  },
+  upload: {
+    error: 'Échec du téléchargement'
+  },
+  input: {
+    placeholder: 'Veuillez entrer des informations...'
+  },
+  selectPicker: {
+    title: 'Sélectionner',
+    placeholder: 'Sélectionner',
+    select: 'Sélectionner',
+    confirm: 'Confirmer',
+    filterPlaceholder: 'Rechercher'
+  },
+  tag: {
+    placeholder: 'Entrer',
+    add: 'Ajouter une étiquette'
+  },
+  textarea: {
+    placeholder: 'Veuillez entrer des informations...'
+  },
+  tableCol: {
+    indexLabel: 'Indice'
+  },
+  signature: {
+    confirmText: 'Signer',
+    clearText: 'Effacer',
+    revokeText: 'Annuler',
+    restoreText: 'Restaurer'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts b/src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts
new file mode 100644
index 0000000..af4dff3
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/ja-JP.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: '選択してください',
+    title: '日付を選択',
+    day: '日',
+    week: '週',
+    month: '月',
+    confirm: '確認',
+    startTime: '開始時間',
+    endTime: '終了時間',
+    to: '〜',
+    timeFormat: 'YY年MM月DD日 HH:mm:ss',
+    dateFormat: 'YYYY年MM月DD日',
+    weekFormat: (year: number, week: number) => `${year}年 第${week}週`,
+    startWeek: '開始週',
+    endWeek: '終了週',
+    startMonth: '開始月',
+    endMonth: '終了月',
+    monthFormat: 'YYYY年MM月'
+  },
+  calendarView: {
+    startTime: '開始',
+    endTime: '終了',
+    weeks: {
+      sun: '日',
+      mon: '月',
+      tue: '火',
+      wed: '水',
+      thu: '木',
+      fri: '金',
+      sat: '土'
+    },
+    rangePrompt: (maxRange: number) => `選択できる日数は最大${maxRange}日です`,
+    rangePromptWeek: (maxRange: number) => `選択できる週数は最大${maxRange}週です`,
+    rangePromptMonth: (maxRange: number) => `選択できる月数は最大${maxRange}ヶ月です`,
+    monthTitle: 'YYYY年MM月',
+    yearTitle: 'YYYY年',
+    month: 'MM月',
+    hour: (value: number) => `${value}時`,
+    minute: (value: number) => `${value}分`,
+    second: (value: number) => `${value}秒`
+  },
+  collapse: {
+    expand: '展開',
+    retract: '折りたたむ'
+  },
+  colPicker: {
+    title: '選択してください',
+    placeholder: '選択してください',
+    select: '選択'
+  },
+  datetimePicker: {
+    start: '開始時間',
+    end: '終了時間',
+    to: '〜',
+    placeholder: '選択してください',
+    confirm: '完了',
+    cancel: 'キャンセル'
+  },
+  loadmore: {
+    loading: '読み込み中...',
+    finished: '読み込み完了',
+    error: '読み込みエラー',
+    retry: '再試行'
+  },
+  messageBox: {
+    inputPlaceholder: '入力してください',
+    confirm: '確認',
+    cancel: 'キャンセル',
+    inputNoValidate: '無効なデータが入力されました'
+  },
+  numberKeyboard: {
+    confirm: '完了'
+  },
+  pagination: {
+    prev: '前へ',
+    next: '次へ',
+    page: (value: number) => `ページ: ${value}`,
+    total: (total: number) => `合計: ${total}`,
+    size: (size: number) => `ページサイズ: ${size}`
+  },
+  picker: {
+    cancel: 'キャンセル',
+    done: '完了',
+    placeholder: '選択してください'
+  },
+  imgCropper: {
+    confirm: '完了',
+    cancel: 'キャンセル'
+  },
+  search: {
+    search: '検索',
+    cancel: 'キャンセル'
+  },
+  steps: {
+    wait: '未開始',
+    finished: '完了',
+    process: '進行中',
+    failed: '失敗'
+  },
+  tabs: {
+    all: 'すべて'
+  },
+  upload: {
+    error: 'アップロードエラー'
+  },
+  input: {
+    placeholder: '入力してください...'
+  },
+  selectPicker: {
+    title: '選択してください',
+    placeholder: '選択してください',
+    select: '選択',
+    confirm: '確認',
+    filterPlaceholder: '検索'
+  },
+  tag: {
+    placeholder: '入力してください',
+    add: 'タグを追加'
+  },
+  textarea: {
+    placeholder: '入力してください...'
+  },
+  tableCol: {
+    indexLabel: '索引'
+  },
+  signature: {
+    confirmText: '確認',
+    clearText: 'クリア',
+    revokeText: '元に戻す',
+    restoreText: '復元'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts b/src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts
new file mode 100644
index 0000000..3332267
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/ko-KR.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: '선택',
+    title: '날짜 선택',
+    day: '일',
+    week: '주',
+    month: '월',
+    confirm: '확인',
+    startTime: '시작 시간',
+    endTime: '종료 시간',
+    to: '~',
+    timeFormat: 'YY년 MM월 DD일 HH:mm:ss',
+    dateFormat: 'YYYY년 MM월 DD일',
+    weekFormat: (year: number, week: number) => `${year}년 ${week}주`,
+    startWeek: '주 시작',
+    endWeek: '주 종료',
+    startMonth: '월 시작',
+    endMonth: '월 종료',
+    monthFormat: 'YYYY년 MM월'
+  },
+  calendarView: {
+    startTime: '시작',
+    endTime: '종료',
+    weeks: {
+      sun: '일',
+      mon: '월',
+      tue: '화',
+      wed: '수',
+      thu: '목',
+      fri: '금',
+      sat: '토'
+    },
+    rangePrompt: (maxRange: number) => `최대 ${maxRange}일까지 선택할 수 있습니다`,
+    rangePromptWeek: (maxRange: number) => `최대 ${maxRange}주까지 선택할 수 있습니다`,
+    rangePromptMonth: (maxRange: number) => `최대 ${maxRange}개월까지 선택할 수 있습니다`,
+    monthTitle: 'YYYY년 MM월',
+    yearTitle: 'YYYY년',
+    month: 'MM월',
+    hour: (value: number) => `${value}시`,
+    minute: (value: number) => `${value}분`,
+    second: (value: number) => `${value}초`
+  },
+  collapse: {
+    expand: '확장',
+    retract: '축소'
+  },
+  colPicker: {
+    title: '선택',
+    placeholder: '선택',
+    select: '선택'
+  },
+  datetimePicker: {
+    start: '시작',
+    end: '종료',
+    to: '~',
+    placeholder: '선택',
+    confirm: '확인',
+    cancel: '취소'
+  },
+  loadmore: {
+    loading: '로딩 중...',
+    finished: '로딩 완료',
+    error: '로딩 오류',
+    retry: '재시도'
+  },
+  messageBox: {
+    inputPlaceholder: '정보를 입력해주세요',
+    confirm: '확인',
+    cancel: '취소',
+    inputNoValidate: '유효한 정보를 입력해주세요'
+  },
+  numberKeyboard: {
+    confirm: '확인'
+  },
+  pagination: {
+    prev: '이전',
+    next: '다음',
+    page: (value: number) => `페이지: ${value}`,
+    total: (total: number) => `총: ${total}`,
+    size: (size: number) => `${size}/페이지`
+  },
+  picker: {
+    cancel: '취소',
+    done: '완료',
+    placeholder: '선택'
+  },
+  imgCropper: {
+    confirm: '확인',
+    cancel: '취소'
+  },
+  search: {
+    search: '검색',
+    cancel: '취소'
+  },
+  steps: {
+    wait: '대기 중',
+    finished: '완료',
+    process: '진행 중',
+    failed: '실패'
+  },
+  tabs: {
+    all: '모두'
+  },
+  upload: {
+    error: '업로드 오류'
+  },
+  input: {
+    placeholder: '정보를 입력해주세요...'
+  },
+  selectPicker: {
+    title: '선택',
+    placeholder: '선택',
+    select: '선택',
+    confirm: '확인',
+    filterPlaceholder: '검색'
+  },
+  tag: {
+    placeholder: '입력',
+    add: '태그 추가'
+  },
+  textarea: {
+    placeholder: '정보를 입력해주세요...'
+  },
+  tableCol: {
+    indexLabel: '인덱스'
+  },
+  signature: {
+    confirmText: '확인',
+    clearText: '지우기',
+    revokeText: '실행 취소',
+    restoreText: '복원'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts b/src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts
new file mode 100644
index 0000000..9c0c294
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/pt-PT.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: 'Por favor selecione',
+    title: 'Selecione a data',
+    day: 'Dia',
+    week: 'Semana',
+    month: 'Mês',
+    confirm: 'Confirmar',
+    startTime: 'Hora de início',
+    endTime: 'Hora de término',
+    to: 'até',
+    timeFormat: 'DD/MM/YYYY HH:mm:ss',
+    dateFormat: 'DD/MM/YYYY',
+    weekFormat: (year: number, week: number) => `${year} Semana ${week}`,
+    startWeek: 'Semana de início',
+    endWeek: 'Semana de término',
+    startMonth: 'Mês de início',
+    endMonth: 'Mês de término',
+    monthFormat: 'MM/YYYY'
+  },
+  calendarView: {
+    startTime: 'Início',
+    endTime: 'Término',
+    weeks: {
+      sun: 'Dom',
+      mon: 'Seg',
+      tue: 'Ter',
+      wed: 'Qua',
+      thu: 'Qui',
+      fri: 'Sex',
+      sat: 'Sáb'
+    },
+    rangePrompt: (maxRange: number) => `Não pode selecionar mais que ${maxRange} dias`,
+    rangePromptWeek: (maxRange: number) => `Não pode selecionar mais que ${maxRange} semanas`,
+    rangePromptMonth: (maxRange: number) => `Não pode selecionar mais que ${maxRange} meses`,
+    monthTitle: 'MM/YYYY',
+    yearTitle: 'YYYY',
+    month: 'Mês',
+    hour: (value: number) => `${value} horas`,
+    minute: (value: number) => `${value} minutos`,
+    second: (value: number) => `${value} segundos`
+  },
+  collapse: {
+    expand: 'Expandir',
+    retract: 'Retrair'
+  },
+  colPicker: {
+    title: 'Por favor selecione',
+    placeholder: 'Por favor selecione',
+    select: 'Por favor selecione'
+  },
+  datetimePicker: {
+    start: 'Hora de início',
+    end: 'Hora de término',
+    to: 'até',
+    placeholder: 'Por favor selecione',
+    confirm: 'Concluir',
+    cancel: 'Cancelar'
+  },
+  loadmore: {
+    loading: 'Carregando...',
+    finished: 'Carregamento concluído',
+    error: 'Falha ao carregar',
+    retry: 'Clique para tentar novamente'
+  },
+  messageBox: {
+    inputPlaceholder: 'Por favor insira',
+    confirm: 'Confirmar',
+    cancel: 'Cancelar',
+    inputNoValidate: 'Dados inseridos inválidos'
+  },
+  numberKeyboard: {
+    confirm: 'Concluir'
+  },
+  pagination: {
+    prev: 'Página anterior',
+    next: 'Próxima página',
+    page: (value: number) => `Página atual: ${value}`,
+    total: (total: number) => `Total de dados: ${total}`,
+    size: (size: number) => `Tamanho da página: ${size}`
+  },
+  picker: {
+    cancel: 'Cancelar',
+    done: 'Concluir',
+    placeholder: 'Por favor selecione'
+  },
+  imgCropper: {
+    confirm: 'Concluir',
+    cancel: 'Cancelar'
+  },
+  search: {
+    search: 'Buscar',
+    cancel: 'Cancelar'
+  },
+  steps: {
+    wait: 'Não iniciado',
+    finished: 'Concluído',
+    process: 'Em progresso',
+    failed: 'Falhou'
+  },
+  tabs: {
+    all: 'Todos'
+  },
+  upload: {
+    error: 'Falha ao carregar'
+  },
+  input: {
+    placeholder: 'Por favor insira...'
+  },
+  selectPicker: {
+    title: 'Por favor selecione',
+    placeholder: 'Por favor selecione',
+    select: 'Por favor selecione',
+    confirm: 'Confirmar',
+    filterPlaceholder: 'Buscar'
+  },
+  tag: {
+    placeholder: 'Por favor insira',
+    add: 'Adicionar etiqueta'
+  },
+  textarea: {
+    placeholder: 'Por favor insira...'
+  },
+  tableCol: {
+    indexLabel: 'Número'
+  },
+  signature: {
+    confirmText: 'Concluir',
+    clearText: 'Limpar',
+    revokeText: 'Desfazer',
+    restoreText: 'Restaurar'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts b/src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts
new file mode 100644
index 0000000..b85eb1a
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/ru-RU.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: 'Выберите, пожалуйста',
+    title: 'Выбор даты',
+    day: 'День',
+    week: 'Неделя',
+    month: 'Месяц',
+    confirm: 'Ок',
+    startTime: 'Начало',
+    endTime: 'Конец',
+    to: 'до',
+    timeFormat: 'DD.MM.YY HH:mm:ss',
+    dateFormat: 'DD.MM.YYYY',
+    weekFormat: (year: number, week: number) => `${year} Неделя ${week}`,
+    startWeek: 'Начало недели',
+    endWeek: 'Конец недели',
+    startMonth: 'Начало месяца',
+    endMonth: 'Конец месяца',
+    monthFormat: 'MM.YYYY'
+  },
+  calendarView: {
+    startTime: 'Начало',
+    endTime: 'Конец',
+    weeks: {
+      sun: 'Вс',
+      mon: 'Пн',
+      tue: 'Вт',
+      wed: 'Ср',
+      thu: 'Чт',
+      fri: 'Пт',
+      sat: 'Сб'
+    },
+    rangePrompt: (maxRange: number) => `Выбор не должен превышать ${maxRange} дня`,
+    rangePromptWeek: (maxRange: number) => `Выбор не должен превышать ${maxRange} недели`,
+    rangePromptMonth: (maxRange: number) => `Выбор не должен превышать ${maxRange} месяца`,
+    monthTitle: 'Месяц YYYY-MM',
+    yearTitle: 'Год YYYY',
+    month: 'Месяц MM',
+    hour: (value: number) => `${value} час`,
+    minute: (value: number) => `${value} минут`,
+    second: (value: number) => `${value} секунд`
+  },
+  collapse: {
+    expand: 'Развернуть',
+    retract: 'Свернуть'
+  },
+  colPicker: {
+    title: 'Выберите, пожалуйста',
+    placeholder: 'Выберите, пожалуйста',
+    select: 'Выберите'
+  },
+  datetimePicker: {
+    start: 'Начало',
+    end: 'Конец',
+    to: 'до',
+    placeholder: 'Выберите, пожалуйста',
+    confirm: 'Готово',
+    cancel: 'Отмена'
+  },
+  loadmore: {
+    loading: 'Загрузка...',
+    finished: 'Загрузка завершена',
+    error: 'Ошибка загрузки',
+    retry: 'Повторить'
+  },
+  messageBox: {
+    inputPlaceholder: 'Введите, пожалуйста',
+    confirm: 'Ок',
+    cancel: 'Отмена',
+    inputNoValidate: 'Неверные данные'
+  },
+  numberKeyboard: {
+    confirm: 'Готово'
+  },
+  pagination: {
+    prev: 'Предыдущая',
+    next: 'Следующая',
+    page: (value: number) => `Страница: ${value}`,
+    total: (total: number) => `Всего: ${total} записи`,
+    size: (size: number) => `Размер страницы: ${size}`
+  },
+  picker: {
+    cancel: 'Отмена',
+    done: 'Готово',
+    placeholder: 'Выберите, пожалуйста'
+  },
+  imgCropper: {
+    confirm: 'Готово',
+    cancel: 'Отмена'
+  },
+  search: {
+    search: 'Поиск',
+    cancel: 'Отмена'
+  },
+  steps: {
+    wait: 'Не началось',
+    finished: 'Завершено',
+    process: 'В процессе',
+    failed: 'Неудачно'
+  },
+  tabs: {
+    all: 'Все'
+  },
+  upload: {
+    error: 'Ошибка загрузки'
+  },
+  input: {
+    placeholder: 'Введите...'
+  },
+  selectPicker: {
+    title: 'Выберите, пожалуйста',
+    placeholder: 'Выберите, пожалуйста',
+    select: 'Выберите',
+    confirm: 'Подтвердить',
+    filterPlaceholder: 'Поиск'
+  },
+  tag: {
+    placeholder: 'Введите',
+    add: 'Добавить тег'
+  },
+  textarea: {
+    placeholder: 'Введите...'
+  },
+  tableCol: {
+    indexLabel: '№'
+  },
+  signature: {
+    confirmText: 'Подтвердить',
+    clearText: 'Очистить',
+    revokeText: 'Отменить',
+    restoreText: 'Восстановить'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/th-TH.ts b/src/uni_modules/wot-design-uni/locale/lang/th-TH.ts
new file mode 100644
index 0000000..d34a71e
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/th-TH.ts
@@ -0,0 +1,133 @@
+export default {
+  calendar: {
+    placeholder: 'เลือก',
+    title: 'เลือกวันที่',
+    day: 'วันที่',
+    week: 'สัปดาห์',
+    month: 'เดือน',
+    confirm: 'ยืนยัน',
+    startTime: 'วันที่เริ่มต้น',
+    endTime: 'วันที่สิ้นสุด',
+    to: 'ถึง',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `${year} W${week}`,
+    startWeek: 'เริ่มต้นสัปดาห์',
+    endWeek: 'สิ้นสุดสัปดาห์',
+    startMonth: 'เดือนเริ่มต้น',
+    endMonth: 'สิ้นเดือน',
+    monthFormat: 'YYYY-MM'
+  },
+  calendarView: {
+    startTime: 'เวลาเริ่มต้น',
+    endTime: 'เวลาสิ้นสุด',
+    weeks: {
+      sun: 'อา',
+      mon: 'จ',
+      tue: 'อ',
+      wed: 'พ',
+      thu: 'พฤ',
+      fri: 'ศ',
+      sat: 'ส'
+    },
+    rangePrompt: (maxRange: number) => `จำนวนวันที่เลือกต้องไม่เกิน ${maxRange} วัน`,
+    rangePromptWeek: (maxRange: number) => `จำนวนสัปดาห์ที่เลือกต้องไม่เกิน ${maxRange} สัปดาห์`,
+    rangePromptMonth: (maxRange: number) => `เดือนที่เลือกต้องไม่เกิน ${maxRange} เดือน`,
+    monthTitle: 'YYYY-MM',
+    yearTitle: 'YYYY',
+    month: 'MM',
+    hour: (value: number) => `${value}`,
+    minute: (value: number) => `${value}`,
+    second: (value: number) => `${value}`
+  },
+  collapse: {
+    expand: 'ดูเพิ่มเติม',
+    retract: 'ย่อ'
+  },
+  colPicker: {
+    title: 'เลือก',
+    placeholder: 'เลือก',
+    select: 'เลือก'
+  },
+  datetimePicker: {
+    start: 'จาก',
+    end: 'ถึง',
+    to: 'ถึง',
+    placeholder: 'เลือก',
+    confirm: 'ยืนยัน',
+    cancel: 'ยกเลิก'
+  },
+  loadmore: {
+    loading: 'กำลังโหลด.. รอสักครู่..',
+    finished: 'โหลดสำเร็จ',
+    error: 'โหลดไม่สำเร็จ',
+    retry: 'รีเฟรช'
+  },
+  imgCropper: {
+    confirm: 'ยืนยัน',
+    cancel: 'ยกเลิก'
+  },
+  messageBox: {
+    inputPlaceholder: 'กรุณาใส่ข้อมูล',
+    confirm: 'ยืนยัน',
+    cancel: 'ยกเลิก',
+    inputNoValidate: 'กรุณาตรวจสอบว่าคุณได้ใส่ข้อมูลที่ถูกต้อง'
+  },
+  numberKeyboard: {
+    confir: 'ตกลง'
+  },
+  pagination: {
+    prev: 'ก่อนหน้า',
+    next: 'หน้าต่อไป',
+    page: (value: number) => `หน้า: ${value}`,
+    total: (total: number) => `ทั้งหมด: ${total} หน้า`,
+    size: (size: number) => `${size}/ ต่อหน้า`
+  },
+  picker: {
+    cancel: 'ยกเลิก',
+    done: 'ตกลง',
+    placeholder: 'เลือก'
+  },
+  search: {
+    search: 'ค้นหา',
+    cancel: 'ยกเลิก'
+  },
+  steps: {
+    wait: 'ยังไม่เริ่ม',
+    finished: 'เสร็จสิ้น',
+    process: 'กำลังดำเนินการ',
+    failed: 'ไม่ผ่าน'
+  },
+  tabs: {
+    all: 'ทั้งหมด'
+  },
+  upload: {
+    error: 'อัปโหลดไม่สำเร็จ'
+  },
+  input: {
+    placeholder: 'กรุณาใส่ข้อมูล...'
+  },
+  selectPicker: {
+    title: 'เลือก',
+    placeholder: 'เลือก',
+    select: 'เลือก',
+    confirm: 'ยืนยัน',
+    filterPlaceholder: 'ค้นหา'
+  },
+  tag: {
+    placeholder: 'กรุณาใส่',
+    add: 'ป้ายใหม่'
+  },
+  textarea: {
+    placeholder: 'กรุณาใส่ข้อมูล...'
+  },
+  tableCol: {
+    indexLabel: 'หมายเลขซีเรียล'
+  },
+  signature: {
+    confirmText: 'ยืนยัน',
+    clearText: 'ล้าง',
+    revokeText: 'ย้อนกลับ',
+    restoreText: 'เรียกคืน'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts b/src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts
new file mode 100644
index 0000000..cea15cc
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/tr-TR.ts
@@ -0,0 +1,138 @@
+/**
+ * This file contains the default export for the Turkish localization of the application.
+ * It includes translations for various components such as calendar, datetime picker, pagination, etc.
+ */
+
+export default {
+  calendar: {
+    placeholder: 'Lütfen seçin',
+    title: 'Tarih seç',
+    day: 'Gün',
+    week: 'Hafta',
+    month: 'Ay',
+    confirm: 'Tamam',
+    startTime: 'Başlangıç zamanı',
+    endTime: 'Bitiş zamanı',
+    to: 'ile',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `${year} ${week}. Hafta`,
+    startWeek: 'Başlangıç hafta',
+    endWeek: 'Bitiş hafta',
+    startMonth: 'Başlangıç ay',
+    endMonth: 'Bitiş ay',
+    monthFormat: 'YYYY-MM'
+  },
+  calendarView: {
+    startTime: 'Başlangıç',
+    endTime: 'Bitiş',
+    weeks: {
+      sun: 'Paz',
+      mon: 'Pzt',
+      tue: 'Sal',
+      wed: 'Çar',
+      thu: 'Per',
+      fri: 'Cum',
+      sat: 'Cts'
+    },
+    rangePrompt: (maxRange: number) => `Seçilen gün sayısı ${maxRange} günü geçemez`,
+    rangePromptWeek: (maxRange: number) => `Seçilen hafta sayısı ${maxRange} haftayı geçemez`,
+    rangePromptMonth: (maxRange: number) => `Seçilen ay sayısı ${maxRange} ayı geçemez`,
+    monthTitle: 'YYYY-MM',
+    yearTitle: 'YYYY Yılı',
+    month: 'MM Ay',
+    hour: (value: number) => `${value} Saat`,
+    minute: (value: number) => `${value} Dakika`,
+    second: (value: number) => `${value} Saniye`
+  },
+  collapse: {
+    expand: 'Genişlet',
+    retract: 'Daralt'
+  },
+  colPicker: {
+    title: 'Lütfen seçin',
+    placeholder: 'Lütfen seçin',
+    select: 'Seç'
+  },
+  datetimePicker: {
+    start: 'Başlangıç zamanı',
+    end: 'Bitiş zamanı',
+    to: 'ile',
+    placeholder: 'Lütfen seçin',
+    confirm: 'Tamam',
+    cancel: 'İptal'
+  },
+  loadmore: {
+    loading: 'Yükleniyor...',
+    finished: 'Yüklenme tamamlandı',
+    error: 'Yükleme başarısız',
+    retry: 'Tekrar deneyin'
+  },
+  messageBox: {
+    inputPlaceholder: 'Lütfen girin',
+    confirm: 'Tamam',
+    cancel: 'İptal',
+    inputNoValidate: 'Girilen veriler geçerli değil'
+  },
+  numberKeyboard: {
+    confirm: 'Tamam'
+  },
+  pagination: {
+    prev: 'Önceki Sayfa',
+    next: 'Sonraki Sayfa',
+    page: (value: number) => `Şu anki Sayfa: ${value}`,
+    total: (total: number) => `Toplam Veri: ${total} adet`,
+    size: (size: number) => `Sayfa Boyutu: ${size}`
+  },
+  picker: {
+    cancel: 'İptal',
+    done: 'Tamam',
+    placeholder: 'Lütfen seçin'
+  },
+  imgCropper: {
+    confirm: 'Tamam',
+    cancel: 'İptal'
+  },
+  search: {
+    search: 'Ara',
+    cancel: 'İptal'
+  },
+  steps: {
+    wait: 'Başlamadı',
+    finished: 'Tamamlandı',
+    process: 'Süreçte',
+    failed: 'Başarısız'
+  },
+  tabs: {
+    all: 'Hepsi'
+  },
+  upload: {
+    error: 'Yükleme başarısız'
+  },
+  input: {
+    placeholder: 'Lütfen girin...'
+  },
+  selectPicker: {
+    title: 'Lütfen seçin',
+    placeholder: 'Lütfen seçin',
+    select: 'Seç',
+    confirm: 'Onayla',
+    filterPlaceholder: 'Ara'
+  },
+  tag: {
+    placeholder: 'Lütfen girin',
+    add: 'Yeni Etiket Ekle'
+  },
+  textarea: {
+    placeholder: 'Lütfen girin...'
+  },
+  tableCol: {
+    indexLabel: 'Sıra No'
+  },
+  signature: {
+    confirmText: 'İmzala',
+    clearText: 'Temizle',
+    revokeText: 'Geri Al',
+    restoreText: 'Geri Yükle'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts b/src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts
new file mode 100644
index 0000000..e4ba484
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/vi-VN.ts
@@ -0,0 +1,86 @@
+/*
+ * @Author: 810505339
+ * @Date: 2025-02-11 21:17:21
+ * @LastEditors: 810505339
+ * @LastEditTime: 2025-02-15 21:32:57
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\locale\lang\vi-VN.ts
+ * 记得注释
+ */
+/**
+ * This file contains localization strings for various components in Vietnamese.
+ */
+
+export default {
+  calendar: {
+    placeholder: 'Vui lòng chọn',
+    title: 'Chọn ngày',
+    day: 'Ngày',
+    week: 'Tuần',
+    month: 'Tháng',
+    confirm: 'Xác nhận',
+    startTime: 'Thời gian bắt đầu',
+    endTime: 'Thời gian kết thúc',
+    to: 'đến',
+    timeFormat: 'YY-MM-DD HH:mm:ss',
+    dateFormat: 'YYYY-MM-DD',
+    weekFormat: (year: number, week: number) => `Tuần thứ ${week} năm ${year}`,
+    startWeek: 'Tuần bắt đầu',
+    endWeek: 'Tuần kết thúc',
+    startMonth: 'Tháng bắt đầu',
+    endMonth: 'Tháng kết thúc',
+    monthFormat: 'Tháng YYYY MM'
+  },
+  calendarView: {
+    startTime: 'Bắt đầu',
+    endTime: 'Kết thúc',
+    weeks: { sun: 'CN', mon: 'T2', tue: 'T3', wed: 'T4', thu: 'T5', fri: 'T6', sat: 'T7' },
+    rangePrompt: (maxRange: number) => `Không thể chọn quá ${maxRange} ngày`,
+    rangePromptWeek: (maxRange: number) => `Không thể chọn quá ${maxRange} tuần`,
+    rangePromptMonth: (maxRange: number) => `Không thể chọn quá ${maxRange} tháng`,
+    monthTitle: 'Tháng YYYY M',
+    yearTitle: 'Năm YYYY',
+    month: 'MM',
+    hour: (value: number) => `${value} giờ`,
+    minute: (value: number) => `${value} phút`,
+    second: (value: number) => `${value} giây`
+  },
+  collapse: { expand: 'Mở rộng', retract: 'Thu gọn' },
+  colPicker: { title: 'Vui lòng chọn', placeholder: 'Vui lòng chọn', select: 'Vui lòng chọn' },
+  datetimePicker: {
+    start: 'Thời gian bắt đầu',
+    end: 'Thời gian kết thúc',
+    to: 'đến',
+    placeholder: 'Vui lòng chọn',
+    confirm: 'Hoàn thành',
+    cancel: 'Hủy bỏ'
+  },
+  loadmore: { loading: 'Đang tải...', finished: 'Đã tải xong', error: 'Tải thất bại', retry: 'Nhấp để thử lại' },
+  messageBox: { inputPlaceholder: 'Vui lòng nhập', confirm: 'Xác nhận', cancel: 'Hủy bỏ', inputNoValidate: 'Dữ liệu không hợp lệ' },
+  numberKeyboard: { confirm: 'Hoàn thành' },
+  pagination: {
+    prev: 'Trang trước',
+    next: 'Trang sau',
+    page: (value: number) => `Trang hiện tại: ${value}`,
+    total: (total: number) => `Tổng số dữ liệu: ${total}`,
+    size: (size: number) => `Kích thước trang: ${size}`
+  },
+  picker: { cancel: 'Hủy bỏ', done: 'Hoàn thành', placeholder: 'Vui lòng chọn' },
+  imgCropper: { confirm: 'Hoàn thành', cancel: 'Hủy bỏ' },
+  search: { search: 'Tìm kiếm', cancel: 'Hủy bỏ' },
+  steps: { wait: 'Chưa bắt đầu', finished: 'Đã hoàn thành', process: 'Đang tiến hành', failed: 'Thất bại' },
+  tabs: { all: 'Tất cả' },
+  upload: { error: 'Tải lên thất bại' },
+  input: { placeholder: 'Vui lòng nhập...' },
+  selectPicker: { title: 'Vui lòng chọn', placeholder: 'Vui lòng chọn', select: 'Xác nhận', confirm: 'Xác nhận', filterPlaceholder: 'Tìm kiếm' },
+  tag: { placeholder: 'Vui lòng nhập', add: 'thêm' },
+  textarea: { placeholder: 'Vui lòng nhập...' },
+  tableCol: {
+    indexLabel: 'Số sê-ri'
+  },
+  signature: {
+    confirmText: 'Xác nhận',
+    clearText: 'Xóa',
+    revokeText: 'Hoàn tác',
+    restoreText: 'Khôi phục'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts b/src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts
new file mode 100644
index 0000000..67ce8e7
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/zh-CN.ts
@@ -0,0 +1,137 @@
+/**
+ * This file contains localization strings for various components.
+ */
+
+export default {
+  calendar: {
+    placeholder: '请选择',
+    title: '选择日期',
+    day: '日',
+    week: '周',
+    month: '月',
+    confirm: '确定',
+    startTime: '开始时间',
+    endTime: '结束时间',
+    to: '至',
+    timeFormat: 'YY年MM月DD日 HH:mm:ss',
+    dateFormat: 'YYYY年MM月DD日',
+    weekFormat: (year: number, week: number) => `${year} 第 ${week} 周`,
+    startWeek: '开始周',
+    endWeek: '结束周',
+    startMonth: '开始月',
+    endMonth: '结束月',
+    monthFormat: 'YYYY年MM月'
+  },
+  calendarView: {
+    startTime: '开始',
+    endTime: '结束',
+    weeks: {
+      sun: '日',
+      mon: '一',
+      tue: '二',
+      wed: '三',
+      thu: '四',
+      fri: '五',
+      sat: '六'
+    },
+    rangePrompt: (maxRange: number) => `选择天数不能超过${maxRange}天`,
+    rangePromptWeek: (maxRange: number) => `选择周数不能超过${maxRange}周`,
+    rangePromptMonth: (maxRange: number) => `选择月份不能超过${maxRange}个月`,
+    monthTitle: 'YYYY年M月',
+    yearTitle: 'YYYY年',
+    month: 'M月',
+    hour: (value: number) => `${value}时`,
+    minute: (value: number) => `${value}分`,
+    second: (value: number) => `${value}秒`
+  },
+  collapse: {
+    expand: '展开',
+    retract: '收起'
+  },
+  colPicker: {
+    title: '请选择',
+    placeholder: '请选择',
+    select: '请选择'
+  },
+  datetimePicker: {
+    start: '开始时间',
+    end: '结束时间',
+    to: '至',
+    placeholder: '请选择',
+    confirm: '完成',
+    cancel: '取消'
+  },
+  loadmore: {
+    loading: '正在努力加载中...',
+    finished: '已加载完毕',
+    error: '加载失败',
+    retry: '点击重试'
+  },
+  messageBox: {
+    inputPlaceholder: '请输入',
+    confirm: '确定',
+    cancel: '取消',
+    inputNoValidate: '输入的数据不合法'
+  },
+  numberKeyboard: {
+    confirm: '完成'
+  },
+  pagination: {
+    prev: '上一页',
+    next: '下一页',
+    page: (value: number) => `当前页：${value}`,
+    total: (total: number) => `当前数据：${total}条`,
+    size: (size: number) => `分页大小：${size}`
+  },
+  picker: {
+    cancel: '取消',
+    done: '完成',
+    placeholder: '请选择'
+  },
+  imgCropper: {
+    confirm: '完成',
+    cancel: '取消'
+  },
+  search: {
+    search: '搜索',
+    cancel: '取消'
+  },
+  steps: {
+    wait: '未开始',
+    finished: '已完成',
+    process: '进行中',
+    failed: '失败'
+  },
+  tabs: {
+    all: '全部'
+  },
+  upload: {
+    error: '上传失败'
+  },
+  input: {
+    placeholder: '请输入...'
+  },
+  selectPicker: {
+    title: '请选择',
+    placeholder: '请选择',
+    select: '请选择',
+    confirm: '确认',
+    filterPlaceholder: '搜索'
+  },
+  tag: {
+    placeholder: '请输入',
+    add: '新增标签'
+  },
+  textarea: {
+    placeholder: '请输入...'
+  },
+  tableCol: {
+    indexLabel: '序号'
+  },
+  signature: {
+    confirmText: '确认',
+    clearText: '清空',
+    revokeText: '撤销',
+    restoreText: '恢复'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts b/src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts
new file mode 100644
index 0000000..79939bb
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/zh-HK.ts
@@ -0,0 +1,71 @@
+/**
+ * This file contains the default export for various UI components in Traditional Chinese.
+ */
+
+export default {
+  calendar: {
+    placeholder: '請選擇',
+    title: '選擇日期',
+    day: '日',
+    week: '週',
+    month: '月',
+    confirm: '確定',
+    startTime: '開始時間',
+    endTime: '結束時間',
+    to: '至',
+    timeFormat: 'YY年MM月DD日 HH:mm:ss',
+    dateFormat: 'YYYY年MM月DD日',
+    weekFormat: (year: number, week: number) => `${year} 第 ${week} 週`,
+    startWeek: '開始週',
+    endWeek: '結束週',
+    startMonth: '開始月',
+    endMonth: '結束月',
+    monthFormat: 'YYYY年MM月'
+  },
+  calendarView: {
+    startTime: '開始',
+    endTime: '結束',
+    weeks: { sun: '日', mon: '一', tue: '二', wed: '三', thu: '四', fri: '五', sat: '六' },
+    rangePrompt: (maxRange: number) => `選擇天數不能超過${maxRange}天`,
+    rangePromptWeek: (maxRange: number) => `選擇週數不能超過${maxRange}週`,
+    rangePromptMonth: (maxRange: number) => `選擇月份不能超過${maxRange}個月`,
+    monthTitle: 'YYYY年M月',
+    yearTitle: 'YYYY年',
+    month: 'M月',
+    hour: (value: number) => `${value}時`,
+    minute: (value: number) => `${value}分`,
+    second: (value: number) => `${value}秒`
+  },
+  collapse: { expand: '展開', retract: '收起' },
+  colPicker: { title: '請選擇', placeholder: '請選擇', select: '請選擇' },
+  datetimePicker: { start: '開始時間', end: '結束時間', to: '至', placeholder: '請選擇', confirm: '完成', cancel: '取消' },
+  loadmore: { loading: '正在努力加載中...', finished: '已加載完畢', error: '加載失敗', retry: '點擊重試' },
+  messageBox: { inputPlaceholder: '請輸入', confirm: '確定', cancel: '取消', inputNoValidate: '輸入的數據不合法' },
+  numberKeyboard: { confirm: '完成' },
+  pagination: {
+    prev: '上一頁',
+    next: '下一頁',
+    page: (value: number) => `當前頁：${value}`,
+    total: (total: number) => `當前數據：${total}條`,
+    size: (size: number) => `分頁大小：${size}`
+  },
+  picker: { cancel: '取消', done: '完成', placeholder: '請選擇' },
+  imgCropper: { confirm: '完成', cancel: '取消' },
+  search: { search: '搜索', cancel: '取消' },
+  steps: { wait: '未開始', finished: '已完成', process: '進行中', failed: '失敗' },
+  tabs: { all: '全部' },
+  upload: { error: '上傳失敗' },
+  input: { placeholder: '請輸入...' },
+  selectPicker: { title: '請選擇', placeholder: '請選擇', select: '確認', confirm: '確認', filterPlaceholder: '搜索' },
+  tag: { placeholder: '請輸入', add: '新增標籤' },
+  textarea: { placeholder: '請輸入...' },
+  tableCol: {
+    indexLabel: '序號'
+  },
+  signature: {
+    confirmText: '確認',
+    clearText: '清空',
+    revokeText: '撤銷',
+    restoreText: '恢復'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts b/src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts
new file mode 100644
index 0000000..c7dc671
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/locale/lang/zh-TW.ts
@@ -0,0 +1,75 @@
+/*
+ * @Author: 810505339
+ * @Date: 2025-02-11 21:17:21
+ * @LastEditors: 810505339
+ * @LastEditTime: 2025-02-18 13:05:10
+ * @FilePath: \wot-design-uni\src\uni_modules\wot-design-uni\locale\lang\zh-TW.ts
+ * 记得注释
+ */
+export default {
+  calendar: {
+    placeholder: '請選擇',
+    title: '選擇日期',
+    day: '日',
+    week: '週',
+    month: '月',
+    confirm: '確定',
+    startTime: '開始時間',
+    endTime: '結束時間',
+    to: '至',
+    timeFormat: 'YY年MM月DD日 HH:mm:ss',
+    dateFormat: 'YYYY年MM月DD日',
+    weekFormat: (year: number, week: number) => `${year} 第 ${week} 週`,
+    startWeek: '開始週',
+    endWeek: '結束週',
+    startMonth: '開始月',
+    endMonth: '結束月',
+    monthFormat: 'YYYY年MM月'
+  },
+  calendarView: {
+    startTime: '開始',
+    endTime: '結束',
+    weeks: { sun: '日', mon: '一', tue: '二', wed: '三', thu: '四', fri: '五', sat: '六' },
+    rangePrompt: (maxRange: number) => `選擇天數不能超過${maxRange} 天`,
+    rangePromptWeek: (maxRange: number) => `選擇週數不能超過${maxRange} 週`,
+    rangePromptMonth: (maxRange: number) => `選擇月份不能超過${maxRange} 個月`,
+    monthTitle: 'YYYY年M月',
+    yearTitle: 'YYYY年',
+    month: 'M月',
+    hour: (value: number) => `${value} 時`,
+    minute: (value: number) => `${value} 分`,
+    second: (value: number) => `${value} 秒`
+  },
+  collapse: { expand: '展開', retract: '收起' },
+  colPicker: { title: '請選擇', placeholder: '請選擇', select: '請選擇' },
+  datetimePicker: { start: '開始時間', end: '結束時間', to: '至', placeholder: '請選擇', confirm: '完成', cancel: '取消' },
+  loadmore: { loading: '正在努力加載中...', finished: '已加載完畢', error: '加載失敗', retry: '點擊重試' },
+  messageBox: { inputPlaceholder: '請輸入', confirm: '確定', cancel: '取消', inputNoValidate: '輸入的數據不合法' },
+  numberKeyboard: { confirm: '完成' },
+  pagination: {
+    prev: '上一頁',
+    next: '下一頁',
+    page: (value: number) => `當前頁：${value}`,
+    total: (total: number) => `當前數據：${total}條`,
+    size: (size: number) => `分頁大小：${size}`
+  },
+  picker: { cancel: '取消', done: '完成', placeholder: '請選擇' },
+  imgCropper: { confirm: '完成', cancel: '取消' },
+  search: { search: '搜索', cancel: '取消' },
+  steps: { wait: '未開始', finished: '已完成', process: '進行中', failed: '失敗' },
+  tabs: { all: '全部' },
+  upload: { error: '上傳失敗' },
+  input: { placeholder: '請輸入...' },
+  selectPicker: { title: '請選擇', placeholder: '請選擇', select: '確認', confirm: '確認', filterPlaceholder: '搜索' },
+  tag: { placeholder: '請輸入', add: '新增標籤' },
+  textarea: { placeholder: '請輸入...' },
+  tableCol: {
+    indexLabel: '序號'
+  },
+  signature: {
+    confirmText: '確認',
+    clearText: '清空',
+    revokeText: '撤銷',
+    restoreText: '恢復'
+  }
+}
diff --git a/src/uni_modules/wot-design-uni/package.json b/src/uni_modules/wot-design-uni/package.json
new file mode 100644
index 0000000..a5fe4c2
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/package.json
@@ -0,0 +1,99 @@
+{
+	"id": "wot-design-uni",
+	"name": "wot-design-uni",
+	"displayName": "wot-design-uni 基于vue3+Typescript的高颜值组件库",
+	"version": "1.9.1",
+	"license": "MIT",
+	"description": "一个基于Vue3+TS开发的uni-app组件库，提供70+高质量组件，支持暗黑模式、国际化和自定义主题。",
+	"keywords": [
+        "wot-design-uni",
+        "国际化",
+        "组件库",
+        "vue3",
+        "暗黑模式"
+    ],
+	"main": "index.ts",
+	"repository": "https://github.com/Moonofweisheng/wot-design-uni.git",
+	"engines": {
+		"HBuilderX": "^3.8.7"
+	},
+	"dcloudext": {
+		"type": "component-vue",
+		"sale": {
+			"regular": {
+				"price": "0.00"
+			},
+			"sourcecode": {
+				"price": "0.00"
+			}
+		},
+		"contact": {
+			"qq": ""
+		},
+		"declaration": {
+			"ads": "无",
+			"data": "插件不采集任何数据",
+			"permissions": "无"
+		},
+		"npmurl": "https://www.npmjs.com/package/wot-design-uni"
+	},
+	"vetur": {
+		"tags": "tags.json",
+		"attributes": "attributes.json"
+	},
+	"web-types": "web-types.json",
+	"uni_modules": {
+		"dependencies": [],
+		"encrypt": [],
+		"platforms": {
+			"cloud": {
+				"tcb": "y",
+				"aliyun": "y",
+				"alipay": "n"
+			},
+			"client": {
+				"Vue": {
+					"vue2": "n",
+					"vue3": "y"
+				},
+				"App": {
+                    "app-vue": "y",
+                    "app-nvue": "n",
+                    "app-uvue": "n",
+                    "app-harmony": "u"
+                },
+				"H5-mobile": {
+					"Safari": "y",
+					"Android Browser": "y",
+					"微信浏览器(Android)": "y",
+					"QQ浏览器(Android)": "y"
+				},
+				"H5-pc": {
+					"Chrome": "y",
+					"IE": "u",
+					"Edge": "y",
+					"Firefox": "y",
+					"Safari": "y"
+				},
+				"小程序": {
+					"微信": "y",
+					"阿里": "y",
+					"百度": "u",
+					"字节跳动": "u",
+					"QQ": "y",
+					"钉钉": "y",
+					"快手": "u",
+					"飞书": "u",
+					"京东": "u"
+				},
+				"快应用": {
+					"华为": "u",
+					"联盟": "u"
+				}
+			}
+		}
+	},
+	"peerDependencies": {
+		"vue": ">=3.2.47"
+	}
+}
\ No newline at end of file
diff --git a/src/uni_modules/wot-design-uni/readme.md b/src/uni_modules/wot-design-uni/readme.md
new file mode 100644
index 0000000..8026b76
--- /dev/null
+++ b/src/uni_modules/wot-design-uni/readme.md
@@ -0,0 +1,145 @@
+<p align="center">
+    <img alt="logo" src="https://wot-design-uni.cn/logo.png" width="200">
+</p>
+<h1 align="center">Wot Design Uni</h1>
+
+<p align="center">📱 一个基于vue3+Typescript构建，参照<a href="https://ftf.jd.com/wot-design/">wot-design</a>打造的uni-app组件库</p>
+
+<p align="center">
+
+<a href="https://github.com/Moonofweisheng/wot-design-uni">
+  <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/Moonofweisheng/wot-design-uni?logo=github&color=%234d80f0&link=https%3A%2F%2Fgithub.com%2FMoonofweisheng%2Fwot-design-uni&style=flat-square">
+ </a>
+
+
+<a href="https://github.com/Moonofweisheng/wot-design-uni">
+  <img alt="GitHub" src="https://img.shields.io/codecov/c/github/Moonofweisheng/wot-design-uni?style=flat-square">
+ </a>
+
+<a href="https://www.npmjs.com/package/wot-design-uni">
+  <img alt="npm" src="https://img.shields.io/npm/dm/wot-design-uni?logo=npm&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni&style=flat-square">
+</a>
+
+ <a href="https://www.npmjs.com/package/wot-design-uni">
+  <img alt="npm" src="https://img.shields.io/npm/v/wot-design-uni?logo=npm&color=%234d80f0&link=https%3A%2F%2Fwww.npmjs.com%2Fpackage%2Fwot-design-uni&style=flat-square">
+</a>
+
+<a href="https://github.com/actions-cool/" target="_blank" referrerpolicy="no-referrer">
+  <img src="https://img.shields.io/badge/using-actions--cool-red?style=flat-square" alt="actions-cool" />
+</a>
+
+<a href="https://app.netlify.com/sites/wot-design-uni/deploys" target="_blank" referrerpolicy="no-referrer">
+  <img src="https://api.netlify.com/api/v1/badges/0991d8a9-0fb0-483b-8961-5bde066bbd50/deploy-status" alt="deploy-status" />
+</a>
+
+</p>
+
+<p align="center">
+  🚀 <a href="https://wot-design-uni.cn">文档网站 (推荐)</a>&nbsp;
+  ✈️ <a href="https://wot-design-uni.pages.dev/">文档网站 (cloudflare)</a>&nbsp;
+  🔥 <a href="https://wot-design-uni.netlify.app/">文档网站 (Netlify)</a>&nbsp;
+  🚫 <a href="https://wot-design-uni.gitee.io/">文档网站 (Gitee暂时下线)</a>
+</p>
+
+## ✨ 特性
+
+- 🎯 多平台覆盖，支持 微信小程序、支付宝小程序、钉钉小程序、H5、APP 等.
+- 🚀 70+ 个高质量组件，覆盖移动端主流场景.
+- 💪 使用 Typescript 构建，提供良好的组件类型系统.
+- 🌍 支持国际化，内置 15 种语言包.
+- 📖 提供丰富的文档和组件示例.
+- 🎨 支持修改 CSS 变量实现主题定制.
+- 🍭 支持暗黑模式
+
+## 📱 预览
+
+扫描二维码访问演示，注意：因微信审核机制限制，当前的微信小程序示例可能不是最新版本，可以clone代码到本地预览。
+
+<p style="display:flex;gap:24px">
+<img src="https://wot-design-uni.cn/wx.jpg" width="200" height="200"/>
+<img src="https://wot-design-uni.cn/alipay.png" width="200" height="200" />
+<img src="https://wot-design-uni.cn/h5.png" width="200" height="200" />
+<img src="https://wot-design-uni.cn/android.png" width="200" height="200" />
+
+</p>
+
+## 快速上手
+
+详细说明见 [快速上手](https://wot-design-uni.cn/guide/quick-use.html)。
+
+## 链接
+
+- [常见问题](https://wot-design-uni.cn/guide/common-problems.html)
+- [更新日志](https://wot-design-uni.cn/guide/changelog.html)
+- [Discussions 讨论区](https://github.com/Moonofweisheng/wot-design-uni/discussions)
+- [QQ 群](https://wot-design-uni.cn/guide/join-group.html)
+
+## 优秀案例
+
+[这里](https://wot-design-uni.cn/guide/cases.html)我们收集了一些优秀的案例，欢迎大家体验！
+
+我们也非常欢迎大家一起贡献优秀的 Demo 与案例，欢迎在此 [issue](https://github.com/Moonofweisheng/wot-design-uni/issues/16) 提交案例。
+
+
+## 周边生态
+
+| 项目                                                                                                        | 描述                                                 |
+| ----------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- |
+| [awesome-uni-app](https://github.com/uni-helper/awesome-uni-app)                                            | 多端统一开发框架 uni-app 优秀开发资源汇总            |
+| [create-uni](https://github.com/uni-helper/create-uni)                                                      | 快速创建 uni-app 项目                                |
+| [wot-demo](https://github.com/Moonofweisheng/wot-demo)                  | 基于 [vitesse-uni-app](https://github.com/uni-helper/vitesse-uni-app) 的wot-design-uni快速起手demo     |
+| [wot-starter-retail](https://github.com/Moonofweisheng/wot-starter-retail)                                  | 基于 wot-design-uni 的 uni-app 零售行业模板          |
+| [Wot Design Uni Snippets](https://marketplace.visualstudio.com/items?itemName=kiko.wot-design-uni-snippets) | Wot Design Uni 代码块提示                            |
+| [uni-mini-ci](https://github.com/Moonofweisheng/uni-mini-ci)                                                | 一个 uni-app 小程序端构建后支持 CI（持续集成）的插件 |
+| [uni-mini-router](https://github.com/Moonofweisheng/uni-mini-router)                                        | 一个基于 vue3 和 Typescript 的轻量级 uni-app 路由库  |
+| [unibest](https://github.com/codercup/unibest)                                                              | 基于 wot-design-uni 的 uni-app 模板                  |
+| [wot-design-uni AI 助手](https://www.coze.cn/store/bot/7347916532258701363)                                 | 一个能回答你关于 wot-design-uni 组件库问题的智能助手 |
+| [uni-ku-root](https://github.com/uni-ku/root)                                                               | 一个模拟 App.vue 原有能力的根组件插件                  |
+
+
+## 贡献指南
+
+修改代码请阅读我们的 [贡献指南](https://github.com/Moonofweisheng/wot-design-uni/blob/develop/.github/CONTRIBUTING.md)。
+
+使用过程中发现任何问题都可以提 [Issue](https://github.com/Moonofweisheng/wot-design-uni/issues) 给我们，当然，我们也非常欢迎你给我们发 [PR](https://github.com/Moonofweisheng/wot-design-uni/pulls)。
+
+## 贡献者们
+感谢以下所有给 Wot Design Uni 贡献过代码的 [开发者](https://github.com/Moonofweisheng/wot-design-uni/graphs/contributors)。
+
+
+<a href="https://github.com/Moonofweisheng/wot-design-uni/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=Moonofweisheng/wot-design-uni" />
+</a>
+
+
+## 捐赠本项目
+
+开发一个 UI 组件库是一项耗时的工作，尤其是要多端适配。为此 Wot Design Uni 经常肝到深夜 ……  
+
+如果您认为 Wot Design Uni 帮助到了您的开发工作，您可以捐赠 Wot Design Uni 的研发工作，捐赠无门槛，哪怕是一杯可乐也好。
+
+捐赠后您的昵称、留言等将会展示在[捐赠榜单](https://wot-design-uni.cn/reward/donor.html)中。
+
+
+### 爱发电捐赠
+
+<a href="https://afdian.com/a/weisheng233">https://afdian.com/a/weisheng233</a>
+
+### 扫码捐赠
+
+<p>
+<img src="https://wot-design-uni.cn/weixinQrcode.jpg" width="200" height="200" style="margin-right:30px"/>
+<img src="https://wot-design-uni.cn/alipayQrcode.jpg" width="200" height="200" />
+</p>
+
+
+## 鸣谢
+
+- [wot-design](https://github.com/jd-ftf/wot-design-mini) - 感谢 wot-design 团队多年来的不断维护，让 wot-design-uni 能够站在巨人的肩膀上。
+- [uni-helper](https://github.com/uni-helper) - 感谢 uni-helper 团队提供的 uni-app 工具库，让 wot-design-uni 能够更方便地使用。
+- [捐赠者](https://wot-design-uni.cn/reward/donor.html) - 感谢所有捐赠者，是你们的捐赠让 wot-design-uni 能够更好地发展。
+
+
+## 开源协议
+
+本项目基于 [MIT](https://zh.wikipedia.org/wiki/MIT%E8%A8%B1%E5%8F%AF%E8%AD%89) 协议，请自由地享受和参与开源。
\ No newline at end of file