commit d2f735d2f6f45ada2dece4fc4354ab1985470a5e
Author: lixin <shinisbigdevil@hotmail.com>
Date:   Thu Jan 9 16:16:11 2025 +0800

    init

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..06d3451
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,31 @@
+.DS_Store
+node_modules/
+unpackage/
+dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.project
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*
+
+yarn.lock
+package-lock.json
+pnpm-lock.yaml
+
+
+
+types/auto-imports.d.ts
+types/components.d.ts
diff --git a/.hbuilderx/launch.json b/.hbuilderx/launch.json
new file mode 100644
index 0000000..b0d1694
--- /dev/null
+++ b/.hbuilderx/launch.json
@@ -0,0 +1,36 @@
+{
+    // launch.json 配置了启动调试时相关设置，configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
+    // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
+    "version" : "0.0",
+    "configurations" : [
+        {
+            "app-plus" : {
+                "launchtype" : "local"
+            },
+            "default" : {
+                "launchtype" : "local"
+            },
+            "h5" : {
+                "launchtype" : "local"
+            },
+            "mp-alipay" : {
+                "launchtype" : "local"
+            },
+            "mp-toutiao" : {
+                "launchtype" : "local"
+            },
+            "mp-weixin" : {
+                "launchtype" : "local"
+            },
+            "type" : "uniCloud"
+        },
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-ios"
+        },
+        {
+            "playground" : "standard",
+            "type" : "uni-app:app-android"
+        }
+    ]
+}
diff --git a/.hintrc b/.hintrc
new file mode 100644
index 0000000..d5bb468
--- /dev/null
+++ b/.hintrc
@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "typescript-config/is-valid": "off"
+  }
+}
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..5305129
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+	"tabWidth": 4,
+	"useTabs": true,
+	"semi": true,
+	"jsxBracketSameLine": true,
+	"singleQuote": false,
+	"printWidth": 100
+}
diff --git a/App.vue b/App.vue
new file mode 100644
index 0000000..d6cd1d8
--- /dev/null
+++ b/App.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { useStore } from "/@/cool";
+import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
+
+onLaunch(() => {
+	console.log("App Launch");
+
+	const { dict, user } = useStore();
+
+	// 获取字典
+	dict.refresh();
+
+	if (user.token) {
+		// 获取登录用户信息
+		user.get();
+	}
+});
+
+onShow(() => {
+	console.log("App Show");
+});
+
+onHide(() => {
+	console.log("App Hide");
+});
+</script>
+
+<style lang="scss">
+@import "/static/css/iconfont/index.scss";
+@import "/$/cool-ui/index.scss";
+@import "/@/static/css/index.scss";
+</style>
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..f79f067
--- /dev/null
+++ b/README.md
@@ -0,0 +1,67 @@
+# COOL-UNI
+
+让你不用想太多就能开发完功能，7.0 携带 vue3、vite、ts、pinia 等众多新特性细节曝光！！[文档地址](https://cool-js.com/uni/introduce.html)
+
+## 更快
+
+-   启动快：基于 `vite`，快速的冷启动，不需要等待打包，即时的热模块更新，真正的按需编译。
+
+-   开发快：`eps` 模式下，无须手动添加接口请求方法。
+
+## 更强
+
+内置请求、路由、文件上传、组件通信、缓存等方法及 ui 库和 hooks
+
+```html
+<script lang="ts" setup>
+	import { useCool } from "/@/cool";
+	import { useUi } from "/$/cool-ui";
+
+	const { service, router, mitt, storage, upload } = useCool();
+	const ui = useUi();
+
+	// 请求
+	service.test.page().then((res) => {
+		consoe.log(res);
+	});
+
+	// 跳转
+	router.push({
+		path: "/pages/goods/info",
+		// 方式1
+		query: {
+			id: 1,
+		},
+		// 方式2
+		params: {
+			id: 2,
+		},
+	});
+
+	// ui全局事件
+	ui.showLoading();
+	ui.showToast();
+
+	// 通信
+	mitt.emit("refresh", { page: 1 });
+	mitt.on("refresh", (params) => {});
+
+	// 储存
+	storage.set("token", "a123huis");
+
+	// 文件上传
+	uni.chooseImage({
+		count: 1,
+		sourceType: ["album", "camera"],
+		success(res) {
+			upload(res.tempFiles[0]).then((url) => {
+				console.log(url);
+			});
+		},
+	});
+</script>
+```
+
+## 更细
+
+全面的代码描述
diff --git a/androidPrivacy.json b/androidPrivacy.json
new file mode 100644
index 0000000..0d726ca
--- /dev/null
+++ b/androidPrivacy.json
@@ -0,0 +1,3 @@
+{
+    "prompt" : "template"
+}
diff --git a/build/cool/eps.d.ts b/build/cool/eps.d.ts
new file mode 100644
index 0000000..2c2da2a
--- /dev/null
+++ b/build/cool/eps.d.ts
@@ -0,0 +1,1687 @@
+declare namespace Eps {
+	interface AppComplainEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 用户ID
+		 */
+		userId?: number;
+		/**
+		 * 类型
+		 */
+		type?: number;
+		/**
+		 * 联系方式
+		 */
+		contact?: string;
+		/**
+		 * 内容
+		 */
+		content?: string;
+		/**
+		 * 图片
+		 */
+		images?: json;
+		/**
+		 * 状态 0-未处理 1-已处理
+		 */
+		status?: number;
+		/**
+		 * 处理人ID
+		 */
+		handlerId?: number;
+		/**
+		 * 备注
+		 */
+		remark?: string;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface AppFeedbackEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 用户ID
+		 */
+		userId?: number;
+		/**
+		 * 联系方式
+		 */
+		contact?: string;
+		/**
+		 * 类型
+		 */
+		type?: number;
+		/**
+		 * 内容
+		 */
+		content?: string;
+		/**
+		 * 图片
+		 */
+		images?: json;
+		/**
+		 * 状态 0-未处理 1-已处理
+		 */
+		status?: number;
+		/**
+		 * 处理人ID
+		 */
+		handlerId?: number;
+		/**
+		 * 备注
+		 */
+		remark?: string;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface AppGoodsEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 标题
+		 */
+		title?: string;
+		/**
+		 * 价格
+		 */
+		price?: number;
+		/**
+		 * 原价
+		 */
+		originalPrice?: number;
+		/**
+		 * 描述
+		 */
+		description?: string;
+		/**
+		 * 状态 0-禁用 1-启用
+		 */
+		status?: number;
+		/**
+		 * 排序
+		 */
+		sort?: number;
+		/**
+		 * 类型 0-天 1-月 2-年 3-永久
+		 */
+		type?: number;
+		/**
+		 * 时长
+		 */
+		duration?: number;
+		/**
+		 * 标签
+		 */
+		tag?: string;
+		/**
+		 * 标签颜色
+		 */
+		tagColor?: string;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface AppVersionEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 名称
+		 */
+		name?: string;
+		/**
+		 * 版本号
+		 */
+		version?: string;
+		/**
+		 * 类型
+		 */
+		type?: number;
+		/**
+		 * 下载地址
+		 */
+		url?: string;
+		/**
+		 * 强制更新 0-否 1-是
+		 */
+		forceUpdate?: number;
+		/**
+		 * 状态 0-禁用 1-启用
+		 */
+		status?: number;
+		/**
+		 * 热更新 0-否 1-是
+		 */
+		hotUpdate?: number;
+		/**
+		 * 描述
+		 */
+		description?: string;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface CsMsgEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 用户ID
+		 */
+		userId?: number;
+		/**
+		 * 会话ID
+		 */
+		sessionId?: number;
+		/**
+		 * 消息内容
+		 */
+		content?: json;
+		/**
+		 * 类型 0-反馈 1-回复
+		 */
+		type?: number;
+		/**
+		 * 状态 0-未读 1-已读
+		 */
+		status?: number;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface GoodsCommentEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 用户ID
+		 */
+		userId?: number;
+		/**
+		 * 商品ID
+		 */
+		goodsId?: number;
+		/**
+		 * 订单ID
+		 */
+		orderId?: number;
+		/**
+		 * 内容
+		 */
+		content?: string;
+		/**
+		 * 星数
+		 */
+		starCount?: number;
+		/**
+		 * 图片
+		 */
+		pics?: json;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface GoodsInfoEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 类型ID
+		 */
+		typeId?: number;
+		/**
+		 * 标题
+		 */
+		title?: string;
+		/**
+		 * 副标题
+		 */
+		subTitle?: string;
+		/**
+		 * 主图
+		 */
+		mainPic?: string;
+		/**
+		 * 图片
+		 */
+		pics?: json;
+		/**
+		 * 价格
+		 */
+		price?: number;
+		/**
+		 * 已售
+		 */
+		sold?: number;
+		/**
+		 * 详情
+		 */
+		content?: string;
+		/**
+		 * 状态 0-下架 1-上架
+		 */
+		status?: number;
+		/**
+		 * 排序
+		 */
+		sortNum?: number;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface GoodsSearchKeywordEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 名称
+		 */
+		name?: string;
+		/**
+		 * 排序
+		 */
+		sortNum?: number;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface GoodsSpecEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 商品ID
+		 */
+		goodsId?: number;
+		/**
+		 * 名称
+		 */
+		name?: string;
+		/**
+		 * 价格
+		 */
+		price?: number;
+		/**
+		 * 库存
+		 */
+		stock?: number;
+		/**
+		 * 排序
+		 */
+		sortNum?: number;
+		/**
+		 * 图片
+		 */
+		images?: json;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface GoodsTypeEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 名称
+		 */
+		name?: string;
+		/**
+		 * 父ID
+		 */
+		parentId?: number;
+		/**
+		 * 排序
+		 */
+		sortNum?: number;
+		/**
+		 * 图片
+		 */
+		pic?: string;
+		/**
+		 * 状态  0-禁用 1-启用
+		 */
+		status?: number;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface InfoBannerEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 描述
+		 */
+		description?: string;
+		/**
+		 * 跳转路径
+		 */
+		path?: string;
+		/**
+		 * 图片
+		 */
+		pic?: string;
+		/**
+		 * 排序
+		 */
+		sortNum?: number;
+		/**
+		 * 状态 1:启用 2:禁用
+		 */
+		status?: number;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface MarketCouponInfoEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 标题
+		 */
+		title?: string;
+		/**
+		 * 描述
+		 */
+		description?: string;
+		/**
+		 * 类型 0-满减
+		 */
+		type?: number;
+		/**
+		 * 金额
+		 */
+		amount?: number;
+		/**
+		 * 数量
+		 */
+		num?: number;
+		/**
+		 * 已领取
+		 */
+		receivedNum?: number;
+		/**
+		 * 开始时间
+		 */
+		startTime?: Date;
+		/**
+		 * 结束时间
+		 */
+		endTime?: Date;
+		/**
+		 * 状态 0-禁用 1-启用
+		 */
+		status?: number;
+		/**
+		 * 条件
+		 */
+		condition?: json;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface MarketCouponUserEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 用户ID
+		 */
+		userId?: number;
+		/**
+		 * 优惠券ID
+		 */
+		couponId?: number;
+		/**
+		 * 状态 0-未使用 1-已使用
+		 */
+		status?: number;
+		/**
+		 * 使用时间
+		 */
+		useTime?: Date;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface OrderInfoEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 用户ID
+		 */
+		userId?: number;
+		/**
+		 * 标题
+		 */
+		title?: string;
+		/**
+		 * 支付方式 0-待支付 1-微信 2-支付宝
+		 */
+		payType?: number;
+		/**
+		 * 支付时间
+		 */
+		payTime?: Date;
+		/**
+		 * 订单号
+		 */
+		orderNum?: string;
+		/**
+		 * 状态 0-待付款 1-待发货 2-待收货 3-待评价 4-交易完成 5-退款中 6-已退款 7-已关闭
+		 */
+		status?: number;
+		/**
+		 * 价格
+		 */
+		price?: number;
+		/**
+		 * 优惠金额
+		 */
+		discountPrice?: number;
+		/**
+		 * 优惠来源
+		 */
+		discountSource?: json;
+		/**
+		 * 地址
+		 */
+		address?: json;
+		/**
+		 * 物流信息
+		 */
+		logistics?: json;
+		/**
+		 * 退款
+		 */
+		refund?: json;
+		/**
+		 * 退款状态
+		 */
+		refundStatus?: number;
+		/**
+		 * 退款申请时间
+		 */
+		refundApplyTime?: Date;
+		/**
+		 * 备注
+		 */
+		remark?: string;
+		/**
+		 * 关闭备注
+		 */
+		closeRemark?: string;
+		/**
+		 * 已开票: 0-未开票 1-已开票
+		 */
+		invoice?: number;
+		/**
+		 * 微信类型 0-小程序 1-公众号 2-App
+		 */
+		wxType?: number;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface UserAddressEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 用户ID
+		 */
+		userId?: number;
+		/**
+		 * 联系人
+		 */
+		contact?: string;
+		/**
+		 * 手机号
+		 */
+		phone?: string;
+		/**
+		 * 省
+		 */
+		province?: string;
+		/**
+		 * 市
+		 */
+		city?: string;
+		/**
+		 * 区
+		 */
+		district?: string;
+		/**
+		 * 地址
+		 */
+		address?: string;
+		/**
+		 * 是否默认
+		 */
+		isDefault?: boolean;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface UserInfoEntity {
+		/**
+		 * ID
+		 */
+		id?: number;
+		/**
+		 * 登录唯一ID
+		 */
+		unionid?: string;
+		/**
+		 * 头像
+		 */
+		avatarUrl?: string;
+		/**
+		 * 昵称
+		 */
+		nickName?: string;
+		/**
+		 * 手机号
+		 */
+		phone?: string;
+		/**
+		 * 性别 0-未知 1-男 2-女
+		 */
+		gender?: number;
+		/**
+		 * 状态 0-禁用 1-正常 2-已注销
+		 */
+		status?: number;
+		/**
+		 * 登录方式 0-小程序 1-公众号 2-H5
+		 */
+		loginType?: number;
+		/**
+		 * 密码
+		 */
+		password?: string;
+		/**
+		 * 创建时间
+		 */
+		createTime?: Date;
+		/**
+		 * 更新时间
+		 */
+		updateTime?: Date;
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+
+	interface TestEntity {
+		/**
+		 * 任意键值
+		 */
+		[key: string]: any;
+	}
+	interface AppComplain {
+		/**
+		 * 提交投诉举报
+		 */
+		submit(data?: any): Promise<any>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: AppComplainEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<AppComplainEntity>;
+		/**
+		 * 权限标识
+		 */
+		permission: { submit: string; page: string; info: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { submit: boolean; page: boolean; info: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface AppFeedback {
+		/**
+		 * 提交意见反馈
+		 */
+		submit(data?: any): Promise<any>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: AppFeedbackEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<AppFeedbackEntity>;
+		/**
+		 * 权限标识
+		 */
+		permission: { submit: string; page: string; info: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { submit: boolean; page: boolean; info: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface AppGoods {
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<AppGoodsEntity[]>;
+		/**
+		 * 权限标识
+		 */
+		permission: { list: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { list: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface AppVersion {
+		/**
+		 * 检查版本
+		 */
+		check(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: { check: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { check: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface BaseComm {
+		/**
+		 * 文件上传模式
+		 */
+		uploadMode(data?: any): Promise<any>;
+		/**
+		 * 文件上传
+		 */
+		upload(data?: any): Promise<any>;
+		/**
+		 * 参数配置
+		 */
+		param(data?: any): Promise<any>;
+		/**
+		 * 实体信息与路径
+		 */
+		eps(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: { uploadMode: string; upload: string; param: string; eps: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { uploadMode: boolean; upload: boolean; param: boolean; eps: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface CsMsg {
+		/**
+		 * 未读消息数
+		 */
+		unreadCount(data?: any): Promise<any>;
+		/**
+		 * 标记已读
+		 */
+		read(data?: any): Promise<any>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: CsMsgEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 权限标识
+		 */
+		permission: { unreadCount: string; read: string; page: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { unreadCount: boolean; read: boolean; page: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface CsSession {
+		/**
+		 * 会话详情
+		 */
+		detail(data?: any): Promise<any>;
+		/**
+		 * 创建会话
+		 */
+		create(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: { detail: string; create: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { detail: boolean; create: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface DictInfo {
+		/**
+		 * 获得字典数据
+		 */
+		data(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: { data: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { data: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface GoodsComment {
+		/**
+		 * 提交评论
+		 */
+		submit(data?: any): Promise<any>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: GoodsCommentEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 权限标识
+		 */
+		permission: { submit: string; page: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { submit: boolean; page: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface GoodsInfo {
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: GoodsInfoEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<GoodsInfoEntity>;
+		/**
+		 * 权限标识
+		 */
+		permission: { page: string; info: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { page: boolean; info: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface GoodsSearchKeyword {
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<GoodsSearchKeywordEntity>;
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<GoodsSearchKeywordEntity[]>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: GoodsSearchKeywordEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			add: string;
+		};
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			add: boolean;
+		};
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface GoodsSpec {
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<GoodsSpecEntity>;
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<GoodsSpecEntity[]>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: GoodsSpecEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			add: string;
+		};
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			add: boolean;
+		};
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface GoodsType {
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<GoodsTypeEntity[]>;
+		/**
+		 * 权限标识
+		 */
+		permission: { list: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { list: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface InfoBanner {
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<InfoBannerEntity[]>;
+		/**
+		 * 权限标识
+		 */
+		permission: { list: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { list: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface MarketCouponInfo {
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: MarketCouponInfoEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 权限标识
+		 */
+		permission: { page: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { page: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface MarketCouponUser {
+		/**
+		 * 领取优惠券
+		 */
+		receive(data?: any): Promise<any>;
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<MarketCouponUserEntity>;
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<MarketCouponUserEntity[]>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: MarketCouponUserEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			receive: string;
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			add: string;
+		};
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			receive: boolean;
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			add: boolean;
+		};
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface OrderInfo {
+		/**
+		 * 物流信息
+		 */
+		logistics(data?: any): Promise<any>;
+		/**
+		 * 用户订单统计
+		 */
+		userCount(data?: any): Promise<any>;
+		/**
+		 * 确认收货
+		 */
+		confirm(data?: any): Promise<any>;
+		/**
+		 * 创建订单
+		 */
+		create(data?: any): Promise<any>;
+		/**
+		 * 取消订单
+		 */
+		cancel(data?: any): Promise<any>;
+		/**
+		 * 退款
+		 */
+		refund(data?: any): Promise<any>;
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<OrderInfoEntity>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: OrderInfoEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			logistics: string;
+			userCount: string;
+			confirm: string;
+			create: string;
+			cancel: string;
+			refund: string;
+			update: string;
+			info: string;
+			page: string;
+		};
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			logistics: boolean;
+			userCount: boolean;
+			confirm: boolean;
+			create: boolean;
+			cancel: boolean;
+			refund: boolean;
+			update: boolean;
+			info: boolean;
+			page: boolean;
+		};
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface OrderPay {
+		/**
+		 * 微信小程序支付
+		 */
+		wxMiniPay(data?: any): Promise<any>;
+		/**
+		 * 微信支付回调
+		 */
+		wxNotify(data?: any): Promise<any>;
+		/**
+		 * 微信APP支付
+		 */
+		wxAppPay(data?: any): Promise<any>;
+		/**
+		 * 微信公众号支付
+		 */
+		wxMpPay(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: { wxMiniPay: string; wxNotify: string; wxAppPay: string; wxMpPay: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { wxMiniPay: boolean; wxNotify: boolean; wxAppPay: boolean; wxMpPay: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface UserAddress {
+		/**
+		 * 默认地址
+		 */
+		default(data?: any): Promise<any>;
+		/**
+		 * 删除
+		 */
+		delete(data?: any): Promise<any>;
+		/**
+		 * 修改
+		 */
+		update(data?: any): Promise<any>;
+		/**
+		 * 单个信息
+		 */
+		info(data?: any): Promise<UserAddressEntity>;
+		/**
+		 * 列表查询
+		 */
+		list(data?: any): Promise<UserAddressEntity[]>;
+		/**
+		 * 分页查询
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: UserAddressEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * 新增
+		 */
+		add(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			default: string;
+			delete: string;
+			update: string;
+			info: string;
+			list: string;
+			page: string;
+			add: string;
+		};
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			default: boolean;
+			delete: boolean;
+			update: boolean;
+			info: boolean;
+			list: boolean;
+			page: boolean;
+			add: boolean;
+		};
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface UserComm {
+		/**
+		 * 获取微信公众号配置
+		 */
+		wxMpConfig(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: { wxMpConfig: string };
+		/**
+		 * 权限状态
+		 */
+		_permission: { wxMpConfig: boolean };
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface UserInfo {
+		/**
+		 * 更新用户密码
+		 */
+		updatePassword(data?: any): Promise<any>;
+		/**
+		 * 更新用户信息
+		 */
+		updatePerson(data?: any): Promise<any>;
+		/**
+		 * 绑定手机号
+		 */
+		bindPhone(data?: any): Promise<any>;
+		/**
+		 * 绑定小程序手机号
+		 */
+		miniPhone(data?: any): Promise<any>;
+		/**
+		 * 获取用户信息
+		 */
+		person(data?: any): Promise<any>;
+		/**
+		 * 注销
+		 */
+		logoff(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			updatePassword: string;
+			updatePerson: string;
+			bindPhone: string;
+			miniPhone: string;
+			person: string;
+			logoff: string;
+		};
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			updatePassword: boolean;
+			updatePerson: boolean;
+			bindPhone: boolean;
+			miniPhone: boolean;
+			person: boolean;
+			logoff: boolean;
+		};
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface UserLogin {
+		/**
+		 * 刷新token
+		 */
+		refreshToken(data?: any): Promise<any>;
+		/**
+		 * 密码登录
+		 */
+		password(data?: any): Promise<any>;
+		/**
+		 * 图片验证码
+		 */
+		captcha(data?: any): Promise<any>;
+		/**
+		 * 验证码
+		 */
+		smsCode(data?: any): Promise<any>;
+		/**
+		 * 微信APP授权登录
+		 */
+		wxApp(data?: any): Promise<any>;
+		/**
+		 * 手机号登录
+		 */
+		phone(data?: any): Promise<any>;
+		/**
+		 * 小程序登录
+		 */
+		mini(data?: any): Promise<any>;
+		/**
+		 * 公众号登录
+		 */
+		mp(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			refreshToken: string;
+			password: string;
+			captcha: string;
+			smsCode: string;
+			wxApp: string;
+			phone: string;
+			mini: string;
+			mp: string;
+		};
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			refreshToken: boolean;
+			password: boolean;
+			captcha: boolean;
+			smsCode: boolean;
+			wxApp: boolean;
+			phone: boolean;
+			mini: boolean;
+			mp: boolean;
+		};
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	interface Test {
+		/**
+		 * page
+		 */
+		page(data?: any): Promise<{
+			pagination: { size: number; page: number; total: number; [key: string]: any };
+			list: TestEntity[];
+			[key: string]: any;
+		}>;
+		/**
+		 * list
+		 */
+		list(data?: any): Promise<TestEntity[]>;
+		/**
+		 * info
+		 */
+		info(data?: any): Promise<TestEntity>;
+		/**
+		 * delete
+		 */
+		delete(data?: any): Promise<any>;
+		/**
+		 * update
+		 */
+		update(data?: any): Promise<any>;
+		/**
+		 * add
+		 */
+		add(data?: any): Promise<any>;
+		/**
+		 * 权限标识
+		 */
+		permission: {
+			page: string;
+			list: string;
+			info: string;
+			delete: string;
+			update: string;
+			add: string;
+		};
+		/**
+		 * 权限状态
+		 */
+		_permission: {
+			page: boolean;
+			list: boolean;
+			info: boolean;
+			delete: boolean;
+			update: boolean;
+			add: boolean;
+		};
+		/**
+		 * 请求
+		 */
+		request: Service["request"];
+	}
+
+	type json = any;
+
+	type Service = {
+		request(options?: {
+			url: string;
+			method?: "POST" | "GET" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS";
+			data?: any;
+			params?: any;
+			headers?: {
+				[key: string]: any;
+			};
+			timeout?: number;
+			proxy?: boolean;
+			[key: string]: any;
+		}): Promise<any>;
+		app: { complain: AppComplain; feedback: AppFeedback; goods: AppGoods; version: AppVersion };
+		base: { comm: BaseComm };
+		cs: { msg: CsMsg; session: CsSession };
+		dict: { info: DictInfo };
+		goods: {
+			comment: GoodsComment;
+			info: GoodsInfo;
+			searchKeyword: GoodsSearchKeyword;
+			spec: GoodsSpec;
+			type: GoodsType;
+		};
+		info: { banner: InfoBanner };
+		market: { coupon: { info: MarketCouponInfo; user: MarketCouponUser } };
+		order: { info: OrderInfo; pay: OrderPay };
+		user: { address: UserAddress; comm: UserComm; info: UserInfo; login: UserLogin };
+		test: Test;
+	};
+}
diff --git a/build/cool/eps.json b/build/cool/eps.json
new file mode 100644
index 0000000..2069768
--- /dev/null
+++ b/build/cool/eps.json
@@ -0,0 +1 @@
+[{"prefix":"/app/app/complain","name":"AppComplainEntity","api":[{"method":"post","path":"/submit"},{"method":"post","path":"/page"},{"method":"get","path":"/info"}]},{"prefix":"/app/app/feedback","name":"AppFeedbackEntity","api":[{"method":"post","path":"/submit"},{"method":"post","path":"/page"},{"method":"get","path":"/info"}]},{"prefix":"/app/app/goods","name":"AppGoodsEntity","api":[{"method":"post","path":"/list"}]},{"prefix":"/app/app/version","name":"AppVersionEntity","api":[{"method":"get","path":"/check"}]},{"prefix":"/app/base/comm","name":"","api":[{"method":"get","path":"/uploadMode"},{"method":"post","path":"/upload"},{"method":"get","path":"/param"},{"method":"get","path":"/eps"}]},{"prefix":"/app/cs/msg","name":"CsMsgEntity","api":[{"method":"get","path":"/unreadCount"},{"method":"post","path":"/read"},{"method":"post","path":"/page"}]},{"prefix":"/app/cs/session","name":"","api":[{"method":"get","path":"/detail"},{"method":"post","path":"/create"}]},{"prefix":"/app/dict/info","name":"","api":[{"method":"post","path":"/data"}]},{"prefix":"/app/goods/comment","name":"GoodsCommentEntity","api":[{"method":"post","path":"/submit"},{"method":"post","path":"/page"}]},{"prefix":"/app/goods/info","name":"GoodsInfoEntity","api":[{"method":"post","path":"/page"},{"method":"get","path":"/info"}]},{"prefix":"/app/goods/searchKeyword","name":"GoodsSearchKeywordEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/app/goods/spec","name":"GoodsSpecEntity","api":[{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/app/goods/type","name":"GoodsTypeEntity","api":[{"method":"post","path":"/list"}]},{"prefix":"/app/info/banner","name":"InfoBannerEntity","api":[{"method":"post","path":"/list"}]},{"prefix":"/app/market/coupon/info","name":"MarketCouponInfoEntity","api":[{"method":"post","path":"/page"}]},{"prefix":"/app/market/coupon/user","name":"MarketCouponUserEntity","api":[{"method":"post","path":"/receive"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/app/order/info","name":"OrderInfoEntity","api":[{"method":"get","path":"/logistics"},{"method":"get","path":"/userCount"},{"method":"get","path":"/confirm"},{"method":"post","path":"/create"},{"method":"post","path":"/cancel"},{"method":"post","path":"/refund"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/page"}]},{"prefix":"/app/order/pay","name":"","api":[{"method":"post","path":"/wxMiniPay"},{"method":"post","path":"/wxNotify"},{"method":"post","path":"/wxAppPay"},{"method":"post","path":"/wxMpPay"}]},{"prefix":"/app/user/address","name":"UserAddressEntity","api":[{"method":"get","path":"/default"},{"method":"post","path":"/delete"},{"method":"post","path":"/update"},{"method":"get","path":"/info"},{"method":"post","path":"/list"},{"method":"post","path":"/page"},{"method":"post","path":"/add"}]},{"prefix":"/app/user/comm","name":"","api":[{"method":"post","path":"/wxMpConfig"}]},{"prefix":"/app/user/info","name":"UserInfoEntity","api":[{"method":"post","path":"/updatePassword"},{"method":"post","path":"/updatePerson"},{"method":"post","path":"/bindPhone"},{"method":"post","path":"/miniPhone"},{"method":"get","path":"/person"},{"method":"post","path":"/logoff"}]},{"prefix":"/app/user/login","name":"","api":[{"method":"post","path":"/refreshToken"},{"method":"post","path":"/password"},{"method":"get","path":"/captcha"},{"method":"post","path":"/smsCode"},{"method":"post","path":"/wxApp"},{"method":"post","path":"/phone"},{"method":"post","path":"/mini"},{"method":"post","path":"/mp"}]},{"prefix":"/","name":"","api":[{"method":"get","path":"/"}]},{"prefix":"/app/test","name":"TestEntity","api":[{"path":"/page"},{"path":"/list"},{"path":"/info"},{"path":"/delete"},{"path":"/update"},{"path":"/add"}]}]
\ No newline at end of file
diff --git a/components/address/item.vue b/components/address/item.vue
new file mode 100644
index 0000000..31c6fe2
--- /dev/null
+++ b/components/address/item.vue
@@ -0,0 +1,71 @@
+<template>
+	<view
+		class="address-item"
+		:style="{
+			backgroundColor,
+		}"
+	>
+		<view class="address-item__inner">
+			<template v-if="item">
+				<cl-text block color="info" :size="24"
+					>{{ item?.province }}{{ item?.city }}{{ item?.district }}</cl-text
+				>
+				<cl-text block bold :size="30" :line-height="1.2" :margin="[14, 0, 14, 0]">{{
+					item?.address
+				}}</cl-text>
+
+				<cl-row type="flex">
+					<cl-text>{{ item?.contact }}</cl-text>
+					<cl-text type="phone" :margin="[0, 20, 0, 100]" :value="item?.phone" />
+					<cl-tag size="small" type="primary" round v-if="item?.isDefault"
+						>默认地址</cl-tag
+					>
+				</cl-row>
+			</template>
+
+			<template v-else>
+				<cl-text block bold :size="30" :margin="[6, 0, 14, 0]">选择地址</cl-text>
+				<cl-text color="info" :size="24">设置默认地址后优先使用</cl-text>
+			</template>
+		</view>
+
+		<view class="address-item__icon">
+			<slot name="icon"> </slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+
+const props = defineProps({
+	item: Object as PropType<Eps.UserAddressEntity>,
+	backgroundColor: {
+		type: String,
+		default: "#ffffff",
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+.address-item {
+	display: flex;
+	box-sizing: border-box;
+	width: 100%;
+	border-radius: 24rpx;
+	padding: 24rpx;
+
+	&__inner {
+		flex: 1;
+	}
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: initial;
+		font-size: 32rpx;
+		margin-left: 24rpx;
+	}
+}
+</style>
diff --git a/components/address/select.vue b/components/address/select.vue
new file mode 100644
index 0000000..20307c5
--- /dev/null
+++ b/components/address/select.vue
@@ -0,0 +1,150 @@
+<template>
+	<view class="select-address" @tap="open()">
+		<address-item :item="data || address.info">
+			<template #icon>
+				<text class="cl-icon-arrow-right" v-if="!disabled"></text>
+			</template>
+		</address-item>
+	</view>
+
+	<cl-popup
+		v-model="visible"
+		direction="bottom"
+		:border-radius="[32, 32, 0, 0]"
+		:padding="0"
+		show-close-btn
+	>
+		<view class="select-address__popup">
+			<cl-text :size="30" block bold :margin="[30, 0, 30, 30]">选择地址</cl-text>
+
+			<cl-loading-mask :loading="loading">
+				<scroll-view scroll-y class="scroller">
+					<view class="list">
+						<view
+							class="item"
+							v-for="item in list"
+							:key="item.id"
+							:class="{
+								'is-active': item.id == address.info?.id,
+							}"
+							@tap="select(item)"
+						>
+							<address-item :item="item" background-color="#f7f7f7">
+								<template #icon>
+									<text class="cl-icon-check-border"></text>
+								</template>
+							</address-item>
+						</view>
+					</view>
+
+					<cl-empty icon="address" :fixed="false" text="暂无地址" v-if="isEmpty(list)" />
+				</scroll-view>
+			</cl-loading-mask>
+
+			<cl-footer :fixed="false" :vt="[visible]">
+				<cl-button custom type="primary" @tap="router.push('/pages/user/address-edit')"
+					>添加收货地址</cl-button
+				>
+			</cl-footer>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useAddress } from "/@/hooks";
+import { useCool } from "/@/cool";
+import { onShow } from "@dcloudio/uni-app";
+import AddressItem from "./item.vue";
+import { isEmpty } from "lodash-es";
+
+const props = defineProps({
+	disabled: Boolean,
+	data: Object,
+});
+
+const { service, router } = useCool();
+const address = useAddress();
+
+const visible = ref(false);
+const loading = ref(false);
+
+// 地址列表
+const list = ref<Eps.UserAddressEntity[]>([]);
+
+// 获取地址
+async function refresh() {
+	loading.value = true;
+
+	await service.user.address.list().then((res) => {
+		list.value = res;
+	});
+
+	loading.value = false;
+}
+
+function select(item: Eps.UserAddressEntity) {
+	address.set(item);
+	close();
+}
+
+function open() {
+	if (!props.disabled) {
+		visible.value = true;
+	}
+}
+
+function close() {
+	visible.value = false;
+}
+
+onShow(() => {
+	refresh();
+	address.getDefault();
+});
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.select-address {
+	margin-bottom: 24rpx;
+
+	&__popup {
+		.scroller {
+			height: 50vh;
+
+			.list {
+				padding: 0 32rpx;
+
+				.item {
+					border: 2rpx solid #f7f7f7;
+					border-radius: 24rpx;
+					margin-bottom: 24rpx;
+
+					.cl-icon-check-border {
+						display: none;
+						color: $cl-color-primary;
+						font-size: 46rpx;
+					}
+
+					&.is-active {
+						border-color: $cl-color-primary;
+
+						.cl-icon-check-border {
+							display: block;
+						}
+					}
+
+					&:last-child {
+						margin-bottom: 0;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/components/agree-btn.vue b/components/agree-btn.vue
new file mode 100644
index 0000000..80dd6ad
--- /dev/null
+++ b/components/agree-btn.vue
@@ -0,0 +1,58 @@
+<template>
+	<cl-checkbox :size="34" v-model="agree" round>
+		<view class="agree-btn">
+			已阅读并同意
+			<text @tap.stop="toDoc('用户协议', 'userAgreement')">用户协议</text>
+			和
+			<text @tap.stop="toDoc('隐私政策', 'privacyPolicy')">隐私政策</text>
+		</view>
+	</cl-checkbox>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useCool } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+
+const { router } = useCool();
+const ui = useUi();
+
+const agree = ref(false);
+
+function toDoc(title: string, key: string) {
+	router.push({
+		path: "/pages/user/doc",
+		query: {
+			title,
+			key,
+		},
+	});
+}
+
+function check() {
+	if (!agree.value) {
+		ui.showToast("请先勾选同意后再进行登录");
+	}
+
+	return agree.value;
+}
+
+defineExpose({
+	check,
+});
+</script>
+
+<style lang="scss" scoped>
+.agree-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: #999999;
+	letter-spacing: 1rpx;
+
+	text {
+		color: $cl-color-primary;
+		padding: 0 10rpx;
+	}
+}
+</style>
diff --git a/components/coupon/get.vue b/components/coupon/get.vue
new file mode 100644
index 0000000..4f52545
--- /dev/null
+++ b/components/coupon/get.vue
@@ -0,0 +1,166 @@
+<template>
+	<view class="coupon-get__btns">
+		<cl-skeleton
+			v-for="item in list"
+			:key="item.id"
+			:margin="[0, 10, 0, 0]"
+			:height="46"
+			:loading-style="{
+				width: '150rpx',
+			}"
+			:loading="loading"
+		>
+			<view class="item" @tap="open">
+				<text class="shop-icon-coupon"></text>
+				<text>{{ item.text }}</text>
+			</view>
+		</cl-skeleton>
+	</view>
+
+	<cl-popup
+		v-model="visible"
+		direction="bottom"
+		:border-radius="[32, 32, 0, 0]"
+		:padding="0"
+		title="领取优惠券"
+		show-close-btn
+	>
+		<view class="coupon-get">
+			<scroll-view class="scroller" scroll-y>
+				<view class="list">
+					<coupon-item :item="item" v-for="item in list" :key="item.id">
+						<template #btn>
+							<cl-button
+								type="primary"
+								:height="46"
+								:width="116"
+								:font-size="22"
+								:disabled="!!item.userId"
+								size="small"
+								:margin="[0, 0, 0, 20]"
+								@tap="toGet(item)"
+							>
+								{{ item.userId ? "已领取" : "立即领取" }}
+							</cl-button>
+						</template>
+					</coupon-item>
+				</view>
+
+				<cl-empty :fixed="false" :margin="[-40, 0, 0, 0]" v-if="isEmpty(list)" />
+			</scroll-view>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from "vue";
+import { useCool } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+import CouponItem from "./item/index.vue";
+import { isEmpty } from "lodash-es";
+
+const emit = defineEmits(["success"]);
+
+const { service } = useCool();
+const ui = useUi();
+
+// 是否可见
+const visible = ref(false);
+
+// 获取中
+const loading = ref(false);
+
+// 优惠券列表
+const list = ref<CouponInfo[]>([{}, {}]);
+
+// 获取列表
+async function refresh() {
+	await service.market.coupon.info.page({ page: 1, size: 100 }).then((res) => {
+		list.value = res.list.map((e) => {
+			switch (e.type) {
+				case 0:
+					e.text = `满${e.condition?.fullAmount}减${Math.floor(e.amount!)}元`;
+					break;
+				default:
+					e.text = "";
+					break;
+			}
+
+			return e;
+		});
+	});
+}
+
+// 打开弹窗
+function open() {
+	visible.value = true;
+	refresh();
+}
+
+// 关闭弹窗
+function close() {
+	visible.value = false;
+}
+
+// 领券
+async function toGet(item: CouponInfo) {
+	item.userId = true;
+
+	service.market.coupon.user
+		.receive({
+			couponId: item.id,
+		})
+		.then(() => {
+			ui.showToast("领取成功");
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+			item.userId = null;
+		});
+}
+
+onMounted(async () => {
+	loading.value = true;
+	await refresh();
+	loading.value = false;
+});
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.coupon-get {
+	&__btns {
+		display: flex;
+		flex-wrap: wrap;
+
+		.item {
+			display: inline-flex;
+			align-items: center;
+			padding: 0 6rpx;
+			height: 100%;
+			border: 2rpx solid $cl-color-primary;
+			box-sizing: border-box;
+			border-radius: 8rpx;
+			font-size: 22rpx;
+			line-height: 1;
+
+			.shop-icon-coupon {
+				font-size: 36rpx;
+				margin-right: 2rpx;
+			}
+		}
+	}
+
+	.scroller {
+		height: 60vh;
+
+		.list {
+			padding: 0 32rpx;
+		}
+	}
+}
+</style>
diff --git a/components/coupon/item/bg.png b/components/coupon/item/bg.png
new file mode 100644
index 0000000..d15f48a
Binary files /dev/null and b/components/coupon/item/bg.png differ
diff --git a/components/coupon/item/index.vue b/components/coupon/item/index.vue
new file mode 100644
index 0000000..3095936
--- /dev/null
+++ b/components/coupon/item/index.vue
@@ -0,0 +1,168 @@
+<template>
+	<view
+		class="coupon-item"
+		:class="{
+			'is-disabled': info.useStatus == 1 || disabled,
+		}"
+	>
+		<image :src="Bg" class="bg" />
+
+		<view class="a">
+			<text class="amount">{{ info.amount }}</text>
+			<text class="doc">{{ doc }}</text>
+		</view>
+
+		<view class="b">
+			<view class="top">
+				<view class="text">
+					<cl-text :ellipsis="1" bold :size="30" :margin="[0, 0, 10, 0]">{{
+						info.title
+					}}</cl-text>
+					<cl-text :ellipsis="1" color="info" :size="24">{{ info.description }}</cl-text>
+				</view>
+
+				<slot name="btn"></slot>
+			</view>
+
+			<view class="bottom">
+				<text class="time">有效期：{{ info.time }}</text>
+			</view>
+		</view>
+
+		<view class="status" v-if="info.useStatus == 1">已使用</view>
+		<view class="status" v-if="checked">使用中</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType } from "vue";
+import Bg from "./bg.png";
+import dayjs from "dayjs";
+
+const props = defineProps({
+	item: {
+		type: Object as PropType<CouponInfo>,
+		default: () => ({}),
+	},
+	checked: Boolean,
+	disabled: Boolean,
+});
+
+// 详情
+const info = computed(() => {
+	return {
+		...props.item,
+		amount: Math.floor(props.item.amount!),
+		useStatus: props.item.useStatus,
+		time:
+			dayjs(props.item.startTime).format("YYYY-MM-DD") +
+			" ~ " +
+			dayjs(props.item.endTime).format("YYYY-MM-DD"),
+	};
+});
+
+// 使用说明
+const doc = computed(() => {
+	const { type, condition } = props.item || {};
+
+	switch (type) {
+		case 0:
+			return `满${condition.fullAmount}可用`;
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.coupon-item {
+	display: flex;
+	height: 200rpx;
+	position: relative;
+	margin-bottom: 24rpx;
+	overflow: hidden;
+
+	.bg {
+		height: 100%;
+		width: 100%;
+		position: absolute;
+	}
+
+	.status {
+		transform: rotate(45deg);
+		height: 46rpx;
+		width: 200rpx;
+		background-color: #2b2e3d;
+		position: absolute;
+		right: -60rpx;
+		top: 20rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		font-size: 22rpx;
+		line-height: 46rpx;
+	}
+
+	.a {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		position: relative;
+		color: #fff;
+		height: 100%;
+		width: 172rpx;
+		margin-left: 10rpx;
+		padding: 0 20rpx;
+		box-sizing: border-box;
+
+		.amount {
+			font-size: 50rpx;
+			font-weight: 500;
+			margin-bottom: 10rpx;
+			line-height: 1;
+
+			&::before {
+				content: "￥";
+				font-size: 38rpx;
+				position: relative;
+				top: -1rpx;
+			}
+		}
+
+		.doc {
+			font-size: 22rpx;
+			color: #ddd;
+		}
+	}
+
+	.b {
+		display: flex;
+		flex-direction: column;
+		flex: 1;
+		position: relative;
+		padding: 0 20rpx;
+
+		.top {
+			display: flex;
+			align-items: center;
+			flex: 1;
+		}
+
+		.bottom {
+			display: flex;
+			align-items: center;
+			border-top: 1rpx solid #ddd;
+			height: 54rpx;
+
+			.time {
+				font-size: 22rpx;
+				color: #999;
+			}
+		}
+	}
+
+	&.is-disabled {
+		opacity: 0.4;
+	}
+}
+</style>
diff --git a/components/coupon/select.vue b/components/coupon/select.vue
new file mode 100644
index 0000000..a4add51
--- /dev/null
+++ b/components/coupon/select.vue
@@ -0,0 +1,134 @@
+<template>
+	<view class="coupon-select__inner" @tap="open">
+		<template v-if="checked">
+			<cl-text :size="28" color="error">-</cl-text>
+			<cl-text :size="28" type="price" color="error" :value="checked.amount" />
+		</template>
+
+		<cl-text color="info" v-else>选择优惠券</cl-text>
+	</view>
+
+	<cl-popup
+		v-model="visible"
+		direction="bottom"
+		:border-radius="[32, 32, 0, 0]"
+		:padding="0"
+		title="选择优惠券"
+		show-close-btn
+	>
+		<view class="coupon-select">
+			<scroll-view class="scroller" scroll-y>
+				<view class="list">
+					<view class="item" v-for="item in checkList" :key="item.id" @tap="select(item)">
+						<coupon-item
+							:item="item"
+							:checked="checked?.id == item.id"
+							:disabled="item.disabled"
+						/>
+					</view>
+				</view>
+
+				<cl-empty :fixed="false" :margin="[-40, 0, 0, 0]" v-if="isEmpty(list)" />
+			</scroll-view>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useCool } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import CouponItem from "./item/index.vue";
+import { useUi } from "/$/cool-ui";
+
+const props = defineProps({
+	totalAmount: {
+		type: Number,
+		default: 0,
+	},
+});
+
+const emit = defineEmits(["success"]);
+
+const { service } = useCool();
+const ui = useUi();
+
+// 是否可见
+const visible = ref(false);
+
+// 选中值
+const checked = ref<CouponInfo>();
+
+// 优惠券列表
+const list = ref<CouponInfo[]>();
+
+// 待选列表
+const checkList = computed(() => {
+	return list.value?.map((e) => {
+		let disabled = true;
+
+		switch (e.type) {
+			case 0:
+				if (props.totalAmount >= e.condition?.fullAmount!) {
+					disabled = false;
+				}
+				break;
+		}
+
+		return {
+			...e,
+			disabled,
+		};
+	});
+});
+
+// 打开弹窗
+function open() {
+	visible.value = true;
+
+	// 获取未使用的优惠券
+	service.market.coupon.user.page({ page: 1, size: 100, status: 0 }).then((res) => {
+		list.value = res.list;
+	});
+}
+
+// 关闭弹窗
+function close() {
+	visible.value = false;
+}
+
+// 选择
+function select(item: CouponInfo) {
+	if (item.disabled) {
+		ui.showToast("优惠券不可用");
+	} else {
+		if (checked.value?.id == item.id) {
+			checked.value = undefined;
+		} else {
+			checked.value = item;
+		}
+
+		close();
+	}
+}
+
+defineExpose({
+	open,
+	close,
+	checked,
+});
+</script>
+
+<style lang="scss" scoped>
+.coupon-select {
+	height: 60vh;
+
+	.scroller {
+		height: 100%;
+
+		.list {
+			padding: 0 32rpx;
+		}
+	}
+}
+</style>
diff --git a/components/goods/cover.vue b/components/goods/cover.vue
new file mode 100644
index 0000000..f6a1c49
--- /dev/null
+++ b/components/goods/cover.vue
@@ -0,0 +1,96 @@
+<template>
+	<cl-image
+		:src="resizeImage(current, 300)"
+		:radius="radius"
+		:size="size"
+		:background-color="backgroundColor"
+		@tap="toGoods"
+	>
+		<view class="zoom" @tap.stop="preview()" v-if="zoom">
+			<text class="shop-icon-zoom"></text>
+		</view>
+	</cl-image>
+</template>
+
+<script lang="ts" setup>
+import { isEmpty } from "lodash-es";
+import { computed, type PropType } from "vue";
+import { useCool, useUpload } from "/@/cool";
+
+const props = defineProps({
+	item: {
+		type: Object as PropType<Eps.GoodsInfoEntity>,
+		default: () => ({}),
+	},
+	spec: {
+		type: Object as PropType<Eps.GoodsSpecEntity>,
+		default: () => ({}),
+	},
+	size: [Number, String, Array],
+	radius: {
+		type: [Number, String],
+		default: 24,
+	},
+	backgroundColor: String,
+	link: {
+		type: Boolean,
+		default: true,
+	},
+	zoom: Boolean,
+});
+
+const { router } = useCool();
+const { resizeImage } = useUpload();
+
+const urls = computed(() => {
+	if (props.spec) {
+		const arr = props.spec.images || [];
+
+		if (!isEmpty(arr)) {
+			return arr;
+		}
+	}
+
+	return [props.item.mainPic];
+});
+
+const current = computed(() => urls.value[0]);
+
+// 商品详情
+function toGoods() {
+	if (props.link) {
+		router.push({
+			path: "/pages/goods/detail",
+			query: {
+				id: props.item.id,
+				specId: props.spec?.id,
+			},
+		});
+	}
+}
+
+// 大图预览
+function preview() {
+	uni.previewImage({
+		urls: urls.value,
+		current: current.value,
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.zoom {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	position: absolute;
+	right: 8rpx;
+	top: 8rpx;
+	height: 30rpx;
+	width: 30rpx;
+	background-color: rgba(60, 60, 60, 0.7);
+	color: #fff;
+	font-size: 18rpx;
+	border-radius: 100%;
+}
+</style>
diff --git a/components/goods/group.vue b/components/goods/group.vue
new file mode 100644
index 0000000..f931058
--- /dev/null
+++ b/components/goods/group.vue
@@ -0,0 +1,202 @@
+<template>
+	<view
+		class="goods-group"
+		:class="{
+			'is-border': border,
+		}"
+	>
+		<view class="goods" v-for="goods in list" :key="goods.id">
+			<!-- 名称 -->
+			<view
+				class="name"
+				@tap="
+					router.push({
+						path: '/pages/goods/detail',
+						query: {
+							id: goods.id,
+						},
+					})
+				"
+			>
+				<cl-text :ellipsis="1" :value="goods.name" bold />
+				<cl-icon name="arrow-right" :size="20" :margin="[0, 0, 0, 6]" />
+			</view>
+
+			<!-- 规格 -->
+			<view class="specs">
+				<view class="item" v-for="item in goods.children" :key="item.id">
+					<view class="checkbox" v-if="showCheckbox">
+						<cl-checkbox round v-model="item.checked" />
+					</view>
+
+					<goods-cover :size="140" :item="item.goodsInfo" :spec="item.spec" />
+
+					<view class="det">
+						<cl-row>
+							<view class="spec" @tap="onSpec(item)">
+								<cl-text :size="24" :ellipsis="1">{{ item.spec?.name }}</cl-text>
+								<cl-icon
+									name="arrow-bottom"
+									:size="20"
+									:margin="[0, 0, 0, 10]"
+									v-if="specEdit"
+								/>
+							</view>
+						</cl-row>
+
+						<view class="flex1" />
+
+						<cl-row type="flex" justify="space-between">
+							<cl-text
+								type="price"
+								color="error"
+								:size="36"
+								:value="item.spec?.price"
+							/>
+
+							<slot name="count" :item="item">
+								<cl-text color="info" v-if="readonly">x{{ item.count }}</cl-text>
+
+								<cl-input-number
+									v-model="item.count"
+									:min="1"
+									:max="item.spec?.stock"
+									v-else
+								/>
+							</slot>
+						</cl-row>
+					</view>
+				</view>
+			</view>
+
+			<slot name="goods" :goods="goods"></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType } from "vue";
+import { useCool } from "/@/cool";
+import GoodsCover from "/@/components/goods/cover.vue";
+
+interface Item {
+	id: number;
+	name: string;
+	children: OrderGoods[];
+	[key: string]: any;
+}
+
+const props = defineProps({
+	// 商品数据
+	data: {
+		type: Array as PropType<OrderGoods[]>,
+		default: () => [],
+	},
+	// 能否编辑规格
+	specEdit: Boolean,
+	// 显示多选框
+	showCheckbox: Boolean,
+	// 带边框
+	border: Boolean,
+	// 是否只读
+	readonly: Boolean,
+});
+
+const emit = defineEmits(["spec"]);
+
+const { router } = useCool();
+
+const list = computed(() => {
+	const arr: Item[] = [];
+
+	props.data
+		.filter((e) => !!e)
+		.forEach((e) => {
+			const d = arr.find((a) => a.id == e.goodsInfo.id);
+
+			if (d) {
+				d.children?.push(e);
+			} else {
+				arr.push({
+					id: e.goodsInfo.id!,
+					name: e.goodsInfo.title!,
+					children: [e],
+				});
+			}
+		});
+
+	return arr;
+});
+
+function onSpec(item: OrderGoods) {
+	if (props.specEdit) {
+		emit("spec", item);
+	}
+}
+
+defineExpose({
+	list,
+});
+</script>
+
+<style lang="scss" scoped>
+.goods-group {
+	.goods {
+		background-color: #ffffff;
+		border-radius: 24rpx;
+		padding: 24rpx;
+		margin-bottom: 24rpx;
+
+		.name {
+			display: flex;
+			align-items: center;
+			margin-bottom: 24rpx;
+		}
+
+		.specs {
+			.item {
+				display: flex;
+				margin-bottom: 24rpx;
+
+				.checkbox {
+					display: flex;
+					align-items: center;
+					width: 34rpx;
+					margin-right: 24rpx;
+
+					.cl-checkbox {
+						position: absolute;
+					}
+				}
+
+				.det {
+					display: flex;
+					flex-direction: column;
+					margin-left: 24rpx;
+					padding: 10rpx 0;
+					flex: 1;
+
+					.spec {
+						display: inline-flex;
+						align-items: center;
+						height: 46rpx;
+						padding: 0 16rpx;
+						border-radius: 10rpx;
+						background-color: $cl-color-bg;
+					}
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+			}
+		}
+	}
+
+	&.is-border {
+		.goods {
+			border: $cl-border-width solid $cl-border-color;
+		}
+	}
+}
+</style>
diff --git a/components/goods/item.vue b/components/goods/item.vue
new file mode 100644
index 0000000..4c25343
--- /dev/null
+++ b/components/goods/item.vue
@@ -0,0 +1,68 @@
+<template>
+	<view class="goods-item" @tap="toDetail">
+		<cl-image
+			mode="aspectFill"
+			background-color="#fff"
+			:size="[350, '100%']"
+			:radius="[16, 16, 0, 0]"
+			:src="resizeImage(item.mainPic!, 360)"
+		/>
+
+		<view class="goods-item__det">
+			<cl-text
+				:value="item.title"
+				block
+				:margin="[0, 0, 16, 0]"
+				:ellipsis="2"
+				:line-height="1.4"
+			/>
+
+			<cl-row>
+				<cl-text type="price" color="#333" :size="34" :value="item.price" bold />
+				<cl-text
+					color="info"
+					:size="22"
+					:margin="[0, 0, 0, 10]"
+					:value="`${item.sold || 0}件已售`"
+				/>
+			</cl-row>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+import { useCool, useUpload } from "/@/cool";
+
+const props = defineProps({
+	item: {
+		type: Object as PropType<Eps.GoodsInfoEntity>,
+		default: () => ({}),
+	},
+});
+
+const { router } = useCool();
+const { resizeImage } = useUpload();
+
+function toDetail() {
+	router.push({
+		path: "/pages/goods/detail",
+		query: {
+			id: props.item.id,
+		},
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.goods-item {
+	position: relative;
+	background-color: #ffffff;
+	border-radius: 16rpx;
+	margin-bottom: 20rpx;
+
+	.goods-item__det {
+		padding: 20rpx;
+	}
+}
+</style>
diff --git a/components/goods/spec.vue b/components/goods/spec.vue
new file mode 100644
index 0000000..a5b4d5e
--- /dev/null
+++ b/components/goods/spec.vue
@@ -0,0 +1,393 @@
+<template>
+	<cl-popup
+		v-model="spec.visible"
+		direction="bottom"
+		:border-radius="[32, 32, 0, 0]"
+		:padding="0"
+		show-close-btn
+		@open="onOpen"
+	>
+		<view class="goods-spec">
+			<view class="goods">
+				<goods-cover :item="spec.goods" :spec="spec.info" :link="false" :size="160" />
+
+				<view class="det">
+					<cl-row :margin="[0, 0, 16, 0]">
+						<cl-text
+							:value="spec.info?.price || spec.goods?.price"
+							type="price"
+							color="error"
+							:size="40"
+							bold
+						/>
+						<cl-text
+							color="info"
+							:size="24"
+							:margin="[0, 0, 0, 30]"
+							:value="`库存：${stock}`"
+							v-if="spec.info"
+						/>
+					</cl-row>
+
+					<cl-text
+						:ellipsis="2"
+						:line-height="1.2"
+						:color="spec.info ? 'primary' : 'info'"
+						:value="spec.text"
+					/>
+				</view>
+			</view>
+
+			<cl-row type="flex" justify="space-between" :margin="[0, 24, 16, 24]">
+				<cl-text bold>规格分类（{{ list.length + 1 }}）</cl-text>
+
+				<cl-icon
+					:size="40"
+					:class-name="`${isGrid ? 'shop-icon-list' : 'shop-icon-list2'}`"
+					@tap="isGrid = !isGrid"
+				/>
+			</cl-row>
+
+			<!-- 规格列表 -->
+			<cl-loading-mask :loading="loading">
+				<scroll-view scroll-y class="scroller">
+					<view
+						class="list"
+						:class="{
+							'is-grid': isGrid,
+						}"
+					>
+						<cl-row :gutter="20">
+							<cl-col
+								v-for="(item, label) in list"
+								:key="label"
+								:span="isGrid ? 8 : 24"
+							>
+								<view
+									class="item"
+									:class="{
+										'is-active': spec.info?.id == item.id,
+										'is-disabled': !item.stock,
+									}"
+									@tap="select(item)"
+								>
+									<view class="cover">
+										<goods-cover
+											:item="spec.goods"
+											:spec="item"
+											:link="false"
+											:radius="isGrid ? 24 : 12"
+											:zoom="isGrid"
+										/>
+									</view>
+
+									<view class="name">
+										<text>{{ item.name }}</text>
+									</view>
+								</view>
+							</cl-col>
+						</cl-row>
+
+						<cl-list-item
+							label="数量"
+							:arrow-icon="false"
+							:margin="[0, -10, 0, -10]"
+							v-if="spec.info"
+						>
+							<cl-input-number v-model="spec.num" :min="1" :max="stock" />
+						</cl-list-item>
+					</view>
+				</scroll-view>
+			</cl-loading-mask>
+
+			<!-- 底部按钮 -->
+			<cl-footer :fixed="false" :vt="[spec.action]">
+				<!-- 加入购物车 -->
+				<template v-if="spec.action == 'spCart'">
+					<cl-button custom type="primary" :disabled="disabled" @tap="toAdd"
+						>确定</cl-button
+					>
+				</template>
+
+				<!-- 选规格的时候 -->
+				<template v-else-if="spec.action == 'select'">
+					<cl-button custom :disabled="disabled" @tap="toAdd">加入购物车</cl-button>
+					<cl-button custom type="primary" :disabled="disabled" @tap="toBuy"
+						>立即购买</cl-button
+					>
+				</template>
+
+				<!-- 立即购买 -->
+				<template v-else-if="spec.action == 'buy'">
+					<cl-button custom type="primary" :disabled="disabled" @tap="toBuy"
+						>立即购买</cl-button
+					>
+				</template>
+
+				<!-- 编辑 -->
+				<template v-else-if="spec.action == 'edit'">
+					<cl-button custom type="primary" :disabled="disabled" @tap="toEdit"
+						>确定</cl-button
+					>
+				</template>
+			</cl-footer>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts" setup>
+import { isEmpty } from "lodash-es";
+import { computed, nextTick, onUnmounted, ref } from "vue";
+import { useCool } from "/@/cool";
+import { useSpec } from "/@/hooks";
+import { useShoppingCart } from "/@/hooks";
+import { useUi } from "/$/cool-ui";
+import GoodsCover from "/@/components/goods/cover.vue";
+
+const { service, router } = useCool();
+const spec = useSpec();
+const spCart = useShoppingCart();
+const ui = useUi();
+
+// 列表是否格子布局
+const isGrid = ref(true);
+
+// 加载规格中
+const loading = ref(false);
+
+// 规格列表
+const list = ref<Eps.GoodsSpecEntity[]>([]);
+
+// 库存数，减去购物车数量
+const stock = computed(() => {
+	const a = spec.info?.stock || 0;
+	const b = spCart.list.find((e) => e.spec?.id == spec.info?.id)?.count || 0;
+
+	if (spec.action == "edit") {
+		return a;
+	}
+
+	let d = a - b;
+
+	if (d < 0) {
+		d = 0;
+	}
+
+	return d;
+});
+
+// 是否能下单
+const disabled = computed(() => {
+	return !stock.value;
+});
+
+// 获取规格列表
+async function refresh(params?: any) {
+	loading.value = true;
+
+	await service.goods.spec
+		.list({
+			goodsId: spec.goods?.id,
+			order: "sortNum",
+			sort: "desc",
+			...params,
+		})
+		.then((res) => {
+			list.value = res.map((e) => {
+				let arr = e.images || [];
+
+				if (isEmpty(arr)) {
+					arr = [spec.goods?.mainPic];
+				}
+
+				return {
+					...e,
+					cover: arr[0],
+				};
+			});
+
+			// 设置规格
+			spec.set(list.value.find((e) => e.id == spec.specId));
+		});
+
+	loading.value = false;
+}
+
+// 监听打开
+function onOpen() {
+	refresh();
+}
+
+// 选择规格
+function select(item: Eps.GoodsSpecEntity) {
+	if (spec.info?.id == item.id) {
+		spec.set();
+	} else {
+		spec.set(item);
+	}
+
+	nextTick(() => {
+		spec.setNum(1);
+	});
+}
+
+// 购买
+function toBuy() {
+	spec.close();
+
+	router.push({
+		path: "/pages/order/submit",
+		params: {
+			buyList: [
+				{
+					spec: spec.info!,
+					goodsInfo: spec.goods!,
+					count: spec.num,
+				},
+			],
+		},
+	});
+}
+
+// 编辑
+function toEdit() {
+	spec.emit("edit");
+	spec.close();
+}
+
+// 加入购物车
+function toAdd() {
+	spCart.add({
+		count: spec.num,
+		spec: spec.info!,
+		goodsInfo: spec.goods!,
+	});
+
+	ui.showToast("添加购物车成功");
+	spec.close();
+}
+
+onUnmounted(() => {
+	spec.clear();
+	spec.close();
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.goods-spec {
+	.goods {
+		display: flex;
+		padding: 24rpx;
+
+		.det {
+			flex: 1;
+			padding: 24rpx 24rpx 0 24rpx;
+		}
+	}
+
+	.scroller {
+		height: 50vh;
+
+		.list {
+			padding: 0 24rpx;
+
+			.item {
+				display: flex;
+				align-items: center;
+				margin-bottom: 16rpx;
+				border-radius: 12rpx;
+				border: 2rpx solid #eeeeee;
+				padding: 12rpx;
+
+				.cover {
+					height: 80rpx;
+					width: 80rpx;
+					flex-shrink: 0;
+					position: relative;
+				}
+
+				.name {
+					display: flex;
+					align-items: center;
+					padding: 0 16rpx;
+					font-size: 24rpx;
+					line-height: 1.4;
+					flex: 1;
+
+					text {
+						word-break: break-all;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						display: -webkit-box;
+						-webkit-box-orient: vertical;
+						-webkit-line-clamp: 2;
+					}
+				}
+
+				&.is-active {
+					border-color: $cl-color-primary;
+				}
+
+				&.is-disabled {
+					.cover {
+						&::after {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							height: 100rpx;
+							width: 100rpx;
+							content: "无货";
+							color: #fff;
+							background-color: rgba(50, 50, 50, 0.6);
+							border-radius: 100%;
+							position: absolute;
+							left: calc(50% - 50rpx);
+							top: calc(50% - 50rpx);
+							font-size: 26rpx;
+							border: 1rpx solid currentColor;
+							box-sizing: border-box;
+							transform: scale(0.6);
+						}
+					}
+
+					.name {
+						color: $cl-color-disabled;
+					}
+				}
+			}
+
+			&.is-grid {
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					width: 100%;
+					border-radius: 28rpx;
+					padding: 0;
+					margin-bottom: 24rpx;
+
+					.cover {
+						height: 216rpx;
+						width: 100%;
+
+						&::after {
+							transform: scale(1);
+						}
+					}
+
+					.name {
+						flex: none;
+						height: 70rpx;
+						line-height: 1.2;
+					}
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/components/sms-btn.vue b/components/sms-btn.vue
new file mode 100644
index 0000000..87b64d0
--- /dev/null
+++ b/components/sms-btn.vue
@@ -0,0 +1,229 @@
+<template>
+	<view class="sms-btn">
+		<slot :disabled="isDisabled" :countdown="countdown" :btnText="btnText">
+			<cl-button
+				:border="false"
+				background-color="transparent"
+				color="#FE6B03"
+				:height="height"
+				:font-size="fontSize"
+				fill
+				:size="size"
+				:disabled="isDisabled"
+				@tap="open"
+			>
+				{{ btnText }}
+			</cl-button>
+		</slot>
+
+		<cl-popup
+			v-model="captcha.visible"
+			:ref="setRefs('popup')"
+			:padding="40"
+			border-radius="24rpx"
+		>
+			<cl-loading-mask :loading="captcha.loading">
+				<view class="sms-popup">
+					<view class="head">
+						<cl-text bold :size="28" value="获取短信验证码"></cl-text>
+						<cl-icon :size="32" name="close" @tap="close"></cl-icon>
+					</view>
+
+					<view class="row">
+						<cl-input
+							type="number"
+							v-model="form.code"
+							placeholder="验证码"
+							:maxlength="4"
+							:height="70"
+							:clearable="false"
+							:focus="refs.popup?.isFocus"
+							:border="false"
+							background-color="#f7f7f7"
+							@confirm="send"
+						/>
+
+						<image :src="captcha.img" mode="aspectFit" @tap="getCaptcha" />
+					</view>
+
+					<cl-button
+						type="primary"
+						fill
+						:disabled="!form.code"
+						:loading="captcha.sending"
+						:height="70"
+						@tap="send"
+					>
+						发送短信
+					</cl-button>
+				</view>
+			</cl-loading-mask>
+		</cl-popup>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType, reactive, ref } from "vue";
+import { useCool } from "../cool";
+import { useUi } from "/$/cool-ui";
+
+const props = defineProps({
+	phone: String,
+	type: String,
+	height: Number,
+	fontSize: Number,
+	size: String as PropType<"large" | "default" | "small">,
+	border: {
+		type: Boolean,
+		default: true,
+	},
+	plain: Boolean,
+});
+
+const emit = defineEmits(["success"]);
+
+const { service, refs, setRefs } = useCool();
+const ui = useUi();
+
+// 验证码
+const captcha = reactive({
+	visible: false,
+	loading: false,
+	sending: false,
+	img: "",
+});
+
+// 倒计时
+const countdown = ref(0);
+
+// 是否禁用
+const isDisabled = computed(() => countdown.value > 0 || !props.phone);
+
+// 按钮文案
+const btnText = computed(() =>
+	countdown.value > 0 ? `${countdown.value}s后重新获取` : "获取验证码",
+);
+
+// 表单
+const form = reactive({
+	code: "",
+	captchaId: "",
+});
+
+// 开始倒计时
+function startCountdown() {
+	countdown.value = 60;
+
+	function fn() {
+		countdown.value--;
+
+		if (countdown.value < 1) {
+			clearInterval(timer);
+		}
+	}
+
+	const timer = setInterval(fn, 1000);
+	fn();
+}
+
+// 发送短信
+async function send() {
+	if (form.code) {
+		captcha.sending = true;
+
+		await service.user.login
+			.smsCode({
+				phone: props.phone,
+				...form,
+			})
+			.then(() => {
+				ui.showToast("短信已发送，请查收");
+				startCountdown();
+				close();
+				emit("success");
+			})
+			.catch((err) => {
+				ui.showToast(err.message);
+				getCaptcha();
+			});
+
+		captcha.sending = false;
+	} else {
+		ui.showToast("请填写验证码");
+	}
+}
+
+// 获取图片验证码
+async function getCaptcha() {
+	clear();
+	captcha.loading = true;
+
+	await service.user.login
+		.captcha({ type: "png", color: "#000000", phone: props.phone })
+		.then((res) => {
+			form.captchaId = res.captchaId;
+			captcha.img = res.data;
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+		});
+
+	captcha.loading = false;
+}
+
+// 打开
+function open() {
+	if (props.phone) {
+		if (/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(props.phone)) {
+			captcha.visible = true;
+			getCaptcha();
+		} else {
+			ui.showToast("请填写正确的手机号格式");
+		}
+	}
+}
+
+// 关闭
+function close() {
+	captcha.visible = false;
+	clear();
+}
+
+// 清空
+function clear() {
+	form.code = "";
+	form.captchaId = "";
+}
+
+defineExpose({
+	open,
+	send,
+	getCaptcha,
+	startCountdown,
+});
+</script>
+
+<style lang="scss" scoped>
+.sms-popup {
+	width: 400rpx;
+
+	.head {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 30rpx;
+	}
+
+	.row {
+		display: flex;
+		align-items: center;
+		margin-bottom: 30rpx;
+
+		image {
+			height: 70rpx;
+			width: 200rpx;
+			flex-shrink: 0;
+		}
+	}
+}
+</style>
diff --git a/config/dev.ts b/config/dev.ts
new file mode 100644
index 0000000..7d7ea94
--- /dev/null
+++ b/config/dev.ts
@@ -0,0 +1,17 @@
+import { proxy } from "./proxy";
+
+export default {
+	// 根地址
+	host: proxy["/dev/"].target,
+
+	// 请求地址
+	get baseUrl() {
+		// #ifdef H5
+		return "/dev";
+		// #endif
+
+		// #ifndef H5
+		return this.host + "";
+		// #endif
+	},
+};
diff --git a/config/index.ts b/config/index.ts
new file mode 100644
index 0000000..41652ef
--- /dev/null
+++ b/config/index.ts
@@ -0,0 +1,40 @@
+import dev from "./dev";
+import prod from "./prod";
+
+// 是否开发模式
+export const isDev = import.meta.env.MODE === "development";
+
+// 配置
+export const config = {
+	// 应用信息
+	app: {
+		// 应用名称
+		name: "酷卖",
+		// 应用描述
+		desc: "能用钱解决的事，就不要客气",
+		// 页面配置
+		pages: {
+			login: "/pages/user/login",
+		},
+		wx: {
+			debug: false,
+		},
+	},
+
+	// 调试
+	test: {
+		token: "",
+		mock: false,
+		eps: true,
+	},
+
+	// 忽略
+	ignore: {
+		token: [],
+	},
+
+	// 当前环境
+	...(isDev ? dev : prod),
+};
+
+export * from "./proxy";
diff --git a/config/prod.ts b/config/prod.ts
new file mode 100644
index 0000000..138645d
--- /dev/null
+++ b/config/prod.ts
@@ -0,0 +1,18 @@
+import { proxy } from "./proxy";
+
+export default {
+	// 根地址
+	host: proxy["/prod/"].target,
+
+	// 请求地址
+	get baseUrl() {
+		// #ifdef H5
+		return "/api";
+		// #endif
+
+		// #ifndef H5
+		return "https://cool-mall-dev.cool-js.cloud";
+		// return this.host + "/api";
+		// #endif
+	},
+};
diff --git a/config/proxy.ts b/config/proxy.ts
new file mode 100644
index 0000000..1305315
--- /dev/null
+++ b/config/proxy.ts
@@ -0,0 +1,13 @@
+export const proxy = {
+	"/dev/": {
+		target: "http://127.0.0.1:8001",
+		changeOrigin: true,
+		rewrite: (path: string) => path.replace(/^\/dev/, ""),
+	},
+
+	"/prod/": {
+		target: "https://cool-mall-dev.cool-js.cloud",
+		changeOrigin: true,
+		rewrite: (path: string) => path.replace(/^\/prod/, ""),
+	},
+};
diff --git a/cool/bootstrap/eps.ts b/cool/bootstrap/eps.ts
new file mode 100644
index 0000000..9a4f57b
--- /dev/null
+++ b/cool/bootstrap/eps.ts
@@ -0,0 +1,138 @@
+import { merge } from "lodash-es";
+import { BaseService, service } from "../service";
+import { path2Obj } from "../utils";
+import { config, isDev } from "/@/config";
+import { eps } from "virtual:eps";
+
+// 读取本地所有 service
+const files = import.meta.glob("/service/**/*", {
+	eager: true,
+});
+
+// 数据集合
+const services: any[] = [];
+
+// 取值
+for (const i in files) {
+	try {
+		// @ts-ignore
+		services.push(new files[i].default());
+	} catch (e) {
+		console.error(`[service] ${i} error: `, e);
+	}
+}
+
+// 更新事件
+function onUpdate() {
+	// 设置 request 方法
+	function set(d: any) {
+		if (d.namespace) {
+			const a: any = new BaseService(d.namespace);
+
+			for (const i in d) {
+				const { path, method = "get" } = d[i];
+
+				if (path) {
+					a.request = a.request;
+
+					a[i] = function (data?: any) {
+						return this.request({
+							url: path,
+							method,
+							[method.toLocaleLowerCase() == "post" ? "data" : "params"]: data,
+						});
+					};
+				}
+			}
+
+			for (const i in a) {
+				d[i] = a[i];
+			}
+		} else {
+			for (const i in d) {
+				set(d[i]);
+			}
+		}
+	}
+
+	// 遍历每一个方法
+	set(eps.service);
+
+	// 合并 eps
+	merge(service, eps.service);
+
+	// 合并[local]
+	merge(
+		service,
+		path2Obj(
+			services.map((e) => {
+				return {
+					path: (e.namespace || "").replace("app/", ""),
+					value: e,
+				};
+			}),
+		),
+	);
+
+	// 提示
+	if (isDev) {
+		console.log("[cool-eps] updated");
+	}
+}
+
+export function createEps() {
+	// 更新 eps
+	onUpdate();
+
+	// #ifdef H5
+	// 开发环境下，生成本地 service 的类型描述文件
+	if (isDev && config.test.eps) {
+		const list = services.map((s) => {
+			const api = Array.from(
+				new Set([
+					...Object.getOwnPropertyNames(s.constructor.prototype),
+					"page",
+					"list",
+					"info",
+					"delete",
+					"update",
+					"add",
+				]),
+			)
+				.filter((e) => !["constructor", "namespace"].includes(e))
+				.map((e) => {
+					return {
+						path: `/${e}`,
+					};
+				});
+
+			return {
+				api,
+				module: s.namespace.split("/")[0],
+				name: s.constructor.name + "Entity",
+				prefix: `/app/${s.namespace}`,
+			};
+		});
+
+		service.request({
+			url: "/__cool_eps",
+			method: "POST",
+			proxy: false,
+			data: {
+				list,
+			},
+		});
+	}
+	// #endif
+}
+
+// 监听 vite 触发事件
+if (import.meta.hot) {
+	import.meta.hot.on("eps-update", ({ service }) => {
+		if (service) {
+			eps.service = service;
+		}
+
+		onUpdate();
+	});
+}
diff --git a/cool/bootstrap/index.ts b/cool/bootstrap/index.ts
new file mode 100644
index 0000000..eda703e
--- /dev/null
+++ b/cool/bootstrap/index.ts
@@ -0,0 +1,15 @@
+import { createPinia } from "pinia";
+import { createEps } from "./eps";
+import { createModules } from "./modules";
+import { type App } from "vue";
+
+export async function bootstrap(app: App) {
+	// 状态共享存储
+	app.use(createPinia());
+
+	// 创建 EPS
+	createEps();
+
+	// 创建 uni_modules
+	createModules();
+}
diff --git a/cool/bootstrap/modules.ts b/cool/bootstrap/modules.ts
new file mode 100644
index 0000000..7a48445
--- /dev/null
+++ b/cool/bootstrap/modules.ts
@@ -0,0 +1,38 @@
+import { keys, orderBy } from "lodash-es";
+import { module } from "../module";
+
+export async function createModules() {
+	// 加载 uni_modules 插件
+	const files: any = import.meta.glob("/uni_modules/cool-*/config.ts", {
+		eager: true,
+	});
+
+	const modules = orderBy(
+		keys(files).map((k) => {
+			const [, , name] = k.split("/");
+
+			return {
+				name,
+				value: files[k]?.default,
+			};
+		}),
+		"order",
+		"desc",
+	);
+
+	for (let i in modules) {
+		const { name, value } = modules[i];
+		const data = value ? value() : undefined;
+
+		// 添加模块
+		module.add({
+			name,
+			...data,
+		});
+
+		// 触发加载事件
+		if (data) {
+			await data.onLoad?.(data.options);
+		}
+	}
+}
diff --git a/cool/hooks/app.ts b/cool/hooks/app.ts
new file mode 100644
index 0000000..317f494
--- /dev/null
+++ b/cool/hooks/app.ts
@@ -0,0 +1,28 @@
+import { reactive, ref } from "vue";
+import { storage } from "../utils";
+import { config } from "/@/config";
+import { defineStore } from "pinia";
+
+// 主题
+export const useTheme = defineStore("theme", () => {
+	const name = ref(storage.get("theme") || "default");
+
+	function set(value: string) {
+		name.value = value;
+		storage.set("theme", value);
+	}
+
+	return {
+		name,
+		set,
+	};
+});
+
+export function useApp() {
+	const info = reactive(config.app);
+
+	return {
+		info,
+		theme: useTheme(),
+	};
+}
diff --git a/cool/hooks/comm.ts b/cool/hooks/comm.ts
new file mode 100644
index 0000000..520ca45
--- /dev/null
+++ b/cool/hooks/comm.ts
@@ -0,0 +1,11 @@
+import { reactive } from "vue";
+export function useRefs() {
+	const refs = reactive<{ [key: string]: any }>({});
+	function setRefs(name: string) {
+		return (el: any) => {
+			refs[name] = el;
+		};
+	}
+
+	return { refs, setRefs };
+}
diff --git a/cool/hooks/hmr.ts b/cool/hooks/hmr.ts
new file mode 100644
index 0000000..e7526ae
--- /dev/null
+++ b/cool/hooks/hmr.ts
@@ -0,0 +1,23 @@
+// 解决热更新后失效问题;
+const data = import.meta.hot?.data.getData?.() || {};
+
+if (import.meta.hot) {
+	import.meta.hot.data.getData = () => {
+		return data;
+	};
+}
+
+export const hmr = {
+	data,
+
+	setData(key: string, value: any) {
+		data[key] = value;
+	},
+
+	getData(key: string, defaultValue?: any) {
+		if (defaultValue !== undefined && !data[key]) {
+			this.setData(key, defaultValue);
+		}
+		return data[key];
+	}
+};
diff --git a/cool/hooks/index.ts b/cool/hooks/index.ts
new file mode 100644
index 0000000..5ce6407
--- /dev/null
+++ b/cool/hooks/index.ts
@@ -0,0 +1,21 @@
+import { router } from "../router";
+import { service } from "../service";
+import { upload } from "../upload";
+import { storage } from "../utils";
+import { useRefs } from "./comm";
+
+export function useCool() {
+	return {
+		router,
+		service,
+		upload,
+		storage,
+		...useRefs(),
+	};
+}
+
+export * from "./app";
+export * from "./comm";
+export * from "./hmr";
+export * from "./pager";
+export * from "./wx";
diff --git a/cool/hooks/pager.ts b/cool/hooks/pager.ts
new file mode 100644
index 0000000..b8993fa
--- /dev/null
+++ b/cool/hooks/pager.ts
@@ -0,0 +1,168 @@
+import { computed, getCurrentInstance, onUnmounted, reactive } from "vue";
+import { onPullDownRefresh, onReachBottom, onUnload } from "@dcloudio/uni-app";
+import { useUi } from "/$/cool-ui";
+
+interface Res {
+	list: any[];
+	pagination: {
+		total: number;
+		page: number;
+		size: number;
+		[key: string]: any;
+	};
+	[key: string]: any;
+}
+
+export function usePager<T = any>() {
+	const { proxy }: any = getCurrentInstance();
+	const ui = useUi();
+
+	// 分页信息
+	const pager = reactive({
+		params: {},
+		pagination: {
+			page: 1,
+			size: 20,
+			total: 0,
+		},
+		list: [] as T[],
+		loading: false,
+		finished: false,
+	});
+
+	// 事件
+	const events: any = {};
+
+	// 列表
+	const list = computed(() => pager.list);
+
+	// 刷新
+	async function refresh(params?: any) {
+		if (pager.loading) {
+			return false;
+		}
+
+		if (proxy.refresh) {
+			await proxy.refresh(params);
+		} else if (proxy.$.exposed.refresh) {
+			await proxy.$.exposed.refresh(params);
+		} else {
+			console.log("use defineExpose({ refresh })");
+		}
+	}
+
+	// 数据
+	function onData(cb: (list: T[]) => void) {
+		events.onData = cb;
+	}
+
+	// 刷新
+	function onRefresh(params: any = {}, options?: { clear?: boolean; loading?: boolean }) {
+		const { clear, loading = true } = options || {};
+
+		// 是否清空
+		if (clear) {
+			if (params.page == 1) {
+				pager.list = [];
+				pager.finished = false;
+			}
+		}
+
+		// 合并请求参数
+		Object.assign(pager.params, params);
+
+		const data = {
+			...pager.pagination,
+			...pager.params,
+			total: undefined,
+		};
+
+		// 是否显示加载动画
+		if (data.page == 1 && loading) {
+			ui.showLoading();
+		}
+
+		pager.loading = true;
+
+		// 完成
+		function done() {
+			ui.hideLoading();
+			pager.loading = false;
+		}
+
+		return {
+			data,
+			done,
+			next: (req: Promise<Res>) => {
+				return new Promise((resolve, reject) => {
+					req.then((res: Res) => {
+						// 设置列表数据
+						if (data.page == 1) {
+							pager.list = res.list;
+						} else {
+							pager.list.push(...res.list);
+						}
+
+						// 追加事件
+						if (events.onData) {
+							events.onData(res.list);
+						}
+
+						// 是否加载完成
+						pager.finished = pager.list.length === res.pagination.total;
+						// 分页信息
+						pager.pagination = res.pagination;
+
+						done();
+						resolve(res);
+					}).catch((err) => {
+						done();
+						ui.showToast(err.message);
+						reject(err);
+					});
+				});
+			},
+		};
+	}
+
+	// 关闭
+	function close() {
+		isReg = false;
+		ui.hideLoading();
+	}
+
+	// 是否注册，避免在组件中重复注入事件问题
+	let isReg = true;
+
+	// 上拉加载
+	onReachBottom(() => {
+		if (isReg) {
+			if (!pager.finished) {
+				refresh({ page: pager.pagination.page + 1 });
+			}
+		}
+	});
+
+	// 下拉刷新
+	onPullDownRefresh(async () => {
+		if (isReg) {
+			await refresh({ page: 1 });
+			uni.stopPullDownRefresh();
+		}
+	});
+
+	// 组件销毁
+	onUnmounted(close);
+
+	// 离开页面
+	onUnload(close);
+
+	return {
+		pager,
+		list,
+		onData,
+		onRefresh,
+		onPullDownRefresh,
+		onReachBottom,
+	};
+}
diff --git a/cool/hooks/wx.ts b/cool/hooks/wx.ts
new file mode 100644
index 0000000..7ac051e
--- /dev/null
+++ b/cool/hooks/wx.ts
@@ -0,0 +1,288 @@
+import { ref } from "vue";
+import { onReady, onShow } from "@dcloudio/uni-app";
+import { config } from "/@/config";
+import { getUrlParam, storage } from "../utils";
+import { service } from "../service";
+
+// #ifdef H5
+import wx from "weixin-js-sdk";
+// #endif
+
+export function useWx() {
+	const { platform } = uni.getSystemInfoSync();
+
+	// 授权码
+	const code = ref("");
+
+	// 获取授权码
+	async function getCode() {
+		return new Promise((resolve) => {
+			// #ifdef MP-WEIXIN
+			uni.login({
+				provider: "weixin",
+				success: (res) => {
+					code.value = res.code;
+					resolve(res.code);
+				},
+			});
+			// #endif
+		});
+	}
+
+	// 是否微信浏览器
+	function isWxBrowser() {
+		// #ifdef H5
+		const ua: any = window.navigator.userAgent.toLowerCase();
+		if (ua.match(/MicroMessenger/i) == "micromessenger") {
+			return true;
+		} else {
+			return false;
+		}
+		// #endif
+
+		// #ifndef H5
+		return false;
+		// #endif
+	}
+
+	// 是否安装了微信
+	function hasApp() {
+		// #ifdef APP
+		return plus.runtime.isApplicationExist({ pname: "com.tencent.mm", action: "weixin://" });
+		// #endif
+
+		// #ifndef APP
+		return true;
+		// #endif
+	}
+
+	// 下载微信
+	function downloadApp() {
+		// #ifdef APP
+		if (platform == "android") {
+			const Uri: any = plus.android.importClass("android.net.Uri");
+			const uri: any = Uri.parse("market://details?id=" + "com.tencent.mm");
+			const Intent: any = plus.android.importClass("android.content.Intent");
+			const intent: any = new Intent(Intent.ACTION_VIEW, uri);
+			const main: any = plus.android.runtimeMainActivity();
+			main.startActivity(intent);
+		} else {
+			plus.runtime.openURL(
+				"itms-apps://" + "itunes.apple.com/cn/app/wechat/id414478124?mt=8",
+			);
+		}
+		// #endif
+	}
+
+	// 微信公众号配置
+	const mpConfig = {
+		appId: "",
+	};
+
+	// 获取微信公众号配置
+	function getMpConfig() {
+		// #ifdef H5
+		if (isWxBrowser()) {
+			service.user.comm
+				.wxMpConfig({
+					url: `${location.origin}${location.pathname}`,
+				})
+				.then((res) => {
+					wx.config({
+						debug: config.app.wx.debug,
+						jsApiList: ["chooseWXPay"],
+						...res,
+					});
+
+					Object.assign(mpConfig, res);
+				});
+		}
+		// #endif
+	}
+
+	// 微信公众号授权
+	function mpAuth() {
+		const redirect_uri = encodeURIComponent(
+			`${location.origin}${location.pathname}#/pages/user/login`,
+		);
+		const response_type = "code";
+		const scope = "snsapi_userinfo";
+		const state = "STATE";
+
+		const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${mpConfig.appId}&redirect_uri=${redirect_uri}&response_type=${response_type}&scope=${scope}&state=${state}#wechat_redirect`;
+
+		location.href = url;
+	}
+
+	// 微信公众号登录
+	async function mpLogin() {
+		return new Promise((resolve) => {
+			const code = getUrlParam("code");
+			const mpCode = storage.get("mpCode");
+
+			let url = window.location.href;
+			url = url.replace(/(\?[^#]*)#/, "#");
+			window.history.replaceState({}, "", url);
+
+			if (code != mpCode) {
+				storage.set("mpCode", code);
+				resolve(code);
+			} else {
+				resolve(null);
+			}
+		});
+	}
+
+	// 微信公众号支付
+	async function mpPay(params: wx.IchooseWXPay & { timeStamp: number }): Promise<void> {
+		return new Promise((resolve, reject) => {
+			if (!isWxBrowser()) {
+				return reject({
+					message: "请在微信浏览器中打开",
+				});
+			}
+
+			wx.chooseWXPay({
+				...params,
+				timestamp: params.timeStamp,
+				success() {
+					resolve();
+				},
+				complete(e: { errMsg: string }) {
+					switch (e.errMsg) {
+						case "chooseWXPay:cancel":
+							reject({ message: "已取消支付" });
+							break;
+
+						default:
+							reject({ message: "支付失败" });
+					}
+				},
+			});
+		});
+	}
+
+	// 微信app登录
+	function appLogin(): Promise<string> {
+		let all: any;
+		let Service: any;
+		return new Promise((resolve, reject) => {
+			plus.oauth.getServices((Services: any) => {
+				all = Services;
+				Object.keys(all).some((key) => {
+					if (all[key].id == "weixin") {
+						Service = all[key];
+					}
+				});
+				Service.authorize(resolve, reject);
+			}, reject);
+		});
+	}
+
+	// 微信app支付
+	function appPay(orderInfo: {
+		appid: string;
+		noncestr: string;
+		package: string;
+		partnerid: string;
+		prepayid: string;
+		timestamp: string;
+		sign: string;
+		[key: string]: any;
+	}): Promise<void> {
+		return new Promise((resolve, reject) => {
+			uni.requestPayment({
+				provider: "wxpay",
+				orderInfo,
+				success() {
+					resolve();
+				},
+				fail() {
+					reject({ message: "已取消支付" });
+				},
+			});
+		});
+	}
+
+	// 微信小程序登录
+	async function miniLogin(): Promise<{ code: string; [key: string]: any }> {
+		return new Promise((resolve, reject) => {
+			// 兼容 Mac
+			const k = platform === "mac" ? "getUserInfo" : "getUserProfile";
+
+			uni[k]({
+				lang: "zh_CN",
+				desc: "授权信息仅用于用户登录",
+				success({ iv, encryptedData, signature, rawData }) {
+					function next() {
+						resolve({
+							iv,
+							encryptedData,
+							signature,
+							rawData,
+							code: code.value,
+						});
+					}
+
+					// 检查登录状态是否过期
+					uni.checkSession({
+						success() {
+							next();
+						},
+						fail() {
+							getCode().then(next);
+						},
+					});
+				},
+				fail(err) {
+					console.error(err);
+					getCode();
+
+					reject({
+						message: "登录授权失败",
+					});
+				},
+			});
+		});
+	}
+
+	// 微信小程序支付
+	function miniPay(params: any): Promise<void> {
+		return new Promise((resolve, reject) => {
+			uni.requestPayment({
+				provider: "wxpay",
+				...params,
+				success() {
+					resolve();
+				},
+				fail() {
+					reject({ message: "已取消支付" });
+				},
+			});
+		});
+	}
+
+	onShow(() => {
+		getCode();
+	});
+
+	onReady(() => {
+		getMpConfig();
+	});
+
+	return {
+		code,
+		getCode,
+		isWxBrowser,
+		hasApp,
+		downloadApp,
+		mpConfig,
+		mpAuth,
+		mpLogin,
+		mpPay,
+		miniLogin,
+		miniPay,
+		appLogin,
+		appPay,
+	};
+}
diff --git a/cool/index.ts b/cool/index.ts
new file mode 100644
index 0000000..550ef18
--- /dev/null
+++ b/cool/index.ts
@@ -0,0 +1,9 @@
+export * from "./hooks";
+export * from "./router";
+export * from "./store";
+export * from "./upload";
+export * from "./service";
+export * from "./module";
+export * from "../config";
+export type * from "./types";
+export { storage } from "./utils";
diff --git a/cool/module/index.ts b/cool/module/index.ts
new file mode 100644
index 0000000..c24aa68
--- /dev/null
+++ b/cool/module/index.ts
@@ -0,0 +1,21 @@
+import type { Module } from "../types";
+import { hmr } from "../hooks";
+
+// 模块列表
+const list: Module[] = hmr.getData("modules", []);
+
+// 模块对象
+const module = {
+	list,
+	get(name: string): Module {
+		return this.list.find((e) => e.name == name)!;
+	},
+	config(name: string) {
+		return this.get(name).options || {};
+	},
+	add(data: Module) {
+		this.list.push(data);
+	},
+};
+
+export { module };
diff --git a/cool/router/index.ts b/cool/router/index.ts
new file mode 100644
index 0000000..2bca00c
--- /dev/null
+++ b/cool/router/index.ts
@@ -0,0 +1,325 @@
+import { last } from "lodash-es";
+import { ctx } from "virtual:ctx";
+import { storage } from "../utils";
+import { config } from "../../config";
+
+type PushOptions =
+	| string
+	| {
+			path: string;
+			mode?: "navigateTo" | "redirectTo" | "reLaunch" | "switchTab" | "preloadPage";
+			events?: {
+				[key: string]: (data: any) => void;
+			};
+			query?: {
+				[key: string]: any;
+			};
+			params?: {
+				[key: string]: any;
+			};
+			isGuard?: boolean;
+			[key: string]: any;
+	  };
+
+type Tabs = {
+	text?: string;
+	pagePath: string;
+	iconPath?: string;
+	selectedIconPath?: string;
+	[key: string]: any;
+}[];
+
+// 路由列表
+const routes = [...ctx.pages];
+
+// 子包
+if (ctx.subPackages) {
+	ctx.subPackages.forEach((a: { pages: any[]; root: string }) => {
+		a.pages.forEach((b) => {
+			routes.push({
+				...b,
+				path: a.root + "/" + b.path,
+			});
+		});
+	});
+}
+
+// 钩子函数
+const fn: { [key: string]: (...args: any[]) => any } = {};
+
+// 路由
+const router = {
+	// 底部导航
+	get tabs(): Tabs {
+		if (ctx.tabBar) {
+			return ctx.tabBar.list || [];
+		} else {
+			return [];
+		}
+	},
+
+	// 全局样式配置
+	globalStyle: ctx.globalStyle,
+
+	// 路由列表
+	routes,
+
+	// 地址栏参数
+	get query() {
+		const info = this.info();
+
+		return {
+			...info?.query,
+		};
+	},
+
+	// 临时参数
+	get params() {
+		return storage.get("router-params") || {};
+	},
+
+	// 页面地址
+	get pages() {
+		return {
+			home: "/" + (ctx.tabBar ? this.tabs[0].pagePath : ctx.pages[0].path),
+			...config.app.pages,
+		};
+	},
+
+	// 当前页
+	currentPage(): { [key: string]: any } {
+		return last(getCurrentPages())!;
+	},
+
+	// 当前页
+	get path() {
+		return router.info()?.path;
+	},
+
+	// 当前路由信息
+	info() {
+		const page = last(getCurrentPages());
+
+		if (page) {
+			const { route, $page, $vm, $getAppWebview }: any = page;
+
+			const q: any = {};
+
+			try {
+				$page?.fullPath
+					.split("?")[1]
+					.split("&")
+					.forEach((e: string) => {
+						const [k, v] = e.split("=");
+						q[k] = decodeURIComponent(v);
+					});
+			} catch (e) {}
+
+			// 页面配置
+			const style = this.routes.find((e) => e.path == route)?.style;
+
+			let d = {
+				$vm,
+				$getAppWebview,
+				path: `/${route}`,
+				fullPath: $page?.fullPath,
+				query: q || {},
+				isTab: this.isTab(route),
+				style,
+				isCustomNavbar: style?.navigationStyle == "custom",
+			};
+
+			return d;
+		} else {
+			return null;
+		}
+	},
+
+	// 跳转
+	push(options: PushOptions) {
+		if (typeof options == "string") {
+			options = {
+				path: options,
+				mode: "navigateTo",
+			};
+		}
+
+		let {
+			path,
+			mode = "navigateTo",
+			animationType,
+			animationDuration,
+			events,
+			success,
+			fail,
+			complete,
+			query,
+			params,
+			isGuard = true,
+		} = options || {};
+
+		if (query) {
+			let arr = [];
+
+			for (let i in query) {
+				if (query[i] !== undefined) {
+					arr.push(`${i}=${query[i]}`);
+				}
+			}
+
+			path += "?" + arr.join("&");
+		}
+
+		if (params) {
+			storage.set("router-params", params);
+		}
+
+		let data = {
+			url: path,
+			animationType,
+			animationDuration,
+			events,
+			success,
+			fail,
+			complete,
+		};
+
+		if (this.isTab(path)) {
+			mode = "switchTab";
+		}
+
+		const next = () => {
+			switch (mode) {
+				case "navigateTo":
+					uni.navigateTo(data);
+					break;
+
+				case "redirectTo":
+					uni.redirectTo(data);
+					break;
+
+				case "reLaunch":
+					uni.reLaunch(data);
+					break;
+
+				case "switchTab":
+					uni.switchTab(data);
+					break;
+
+				case "preloadPage":
+					uni.preloadPage(data);
+					break;
+			}
+		};
+
+		if (fn.beforeEach && isGuard) {
+			fn.beforeEach({ path: options.path, query }, next, (options: PushOptions) => {
+				this.push(options);
+			});
+		} else {
+			next();
+		}
+	},
+
+	// 后退
+	back(options?: UniApp.NavigateBackOptions) {
+		if (this.isFirstPage()) {
+			this.home();
+		} else {
+			uni.navigateBack(options || {});
+		}
+	},
+
+	// 执行当前页面的某个方法
+	callMethod(name: string, data?: any) {
+		const { $vm } = this.info()!;
+
+		if ($vm) {
+			if ($vm.$.exposed?.[name]) {
+				return $vm.$.exposed[name](data);
+			}
+		}
+	},
+
+	// 页面栈长度是否只有1
+	isFirstPage() {
+		return getCurrentPages().length == 1;
+	},
+
+	// 是否当前页
+	isCurrentPage(path: string) {
+		return this.info()?.path == path;
+	},
+
+	// 回到首页
+	home() {
+		this.push(this.pages.home);
+	},
+
+	// tabbar
+	switchTab(name: string) {
+		let item = this.tabs.find((e) => e.pagePath.includes(name));
+
+		if (item) {
+			this.push({
+				path: `/${item.pagePath}`,
+				mode: "switchTab",
+			});
+		} else {
+			console.error("不存在Tab页", name);
+		}
+	},
+
+	// 是否是Tab页
+	isTab(path: string) {
+		return !!this.tabs.find((e) => path == `/${e.pagePath}`);
+	},
+
+	// 去登陆
+	login(options?: { reLaunch: boolean }) {
+		const { reLaunch = false } = options || {};
+
+		this.push({
+			path: this.pages.login,
+			mode: reLaunch ? "reLaunch" : "navigateTo",
+			isGuard: false,
+		});
+	},
+
+	// 登录成功后操作
+	nextLogin(type?: string) {
+		const pages = getCurrentPages();
+		const index = pages.findIndex((e) => this.pages.login.includes(e.route!));
+
+		if (index <= 0) {
+			this.home();
+		} else {
+			router.back({
+				delta: pages.length - index,
+			});
+		}
+
+		// 登录方式
+		storage.set("loginType", type);
+
+		// 登录回调
+		if (fn.afterLogin) {
+			fn.afterLogin();
+		}
+
+		// 事件
+		uni.$emit("afterLogin", { type });
+	},
+
+	// 跳转前钩子
+	beforeEach(callback: (to: any, next: () => void) => void) {
+		fn.beforeEach = callback;
+	},
+
+	// 登录后回调
+	afterLogin(callback: () => void) {
+		fn.afterLogin = callback;
+	},
+};
+
+export { router };
diff --git a/cool/service/base.ts b/cool/service/base.ts
new file mode 100644
index 0000000..3411af4
--- /dev/null
+++ b/cool/service/base.ts
@@ -0,0 +1,123 @@
+// @ts-nocheck
+import { has } from "lodash-es";
+import { isDev, config } from "../../config";
+import request from "./request";
+
+export function Service(
+	value:
+		| {
+				namespace?: string;
+				url?: string;
+				mock?: boolean;
+		  }
+		| string
+) {
+	return function (target: any) {
+		// 命名
+		if (typeof value == "string") {
+			target.prototype.namespace = value;
+		}
+
+		// 复杂项
+		if (has(value, "namespace")) {
+			target.prototype.namespace = value.namespace;
+			target.prototype.mock = value.mock;
+
+			if (value.url) {
+				target.prototype.url = value.url;
+			}
+		}
+	};
+}
+
+export class BaseService {
+	constructor(
+		options = {} as {
+			namespace?: string;
+		}
+	) {
+		if (options?.namespace) {
+			this.namespace = options.namespace;
+		}
+	}
+
+	request(options: any = {}) {
+		if (!options.params) options.params = {};
+
+		let ns = "";
+
+		// 是否 mock 模式
+		if (this.mock || config.test.mock) {
+			// 测试
+		} else {
+			if (isDev) {
+				ns = this.proxy || config.baseUrl;
+			} else {
+				ns = this.proxy ? this.url : config.baseUrl;
+			}
+		}
+
+		// 拼接前缀
+		if (this.namespace) {
+			ns += "/" + this.namespace;
+		}
+
+		// 处理地址
+		if (options.proxy === undefined || options.proxy) {
+			options.url = ns + options.url;
+		}
+
+		// 处理参数
+		options.data =
+			options.method?.toLocaleUpperCase() == "POST" ? options.data : options.params;
+
+		return request(options);
+	}
+
+	list(data: any) {
+		return this.request({
+			url: "/list",
+			method: "POST",
+			data,
+		});
+	}
+
+	page(data: any) {
+		return this.request({
+			url: "/page",
+			method: "POST",
+			data,
+		});
+	}
+
+	info(params: any) {
+		return this.request({
+			url: "/info",
+			params,
+		});
+	}
+
+	update(data: any) {
+		return this.request({
+			url: "/update",
+			method: "POST",
+			data,
+		});
+	}
+
+	delete(data: any) {
+		return this.request({
+			url: "/delete",
+			method: "POST",
+			data,
+		});
+	}
+
+	add(data: any) {
+		return this.request({
+			url: "/add",
+			method: "POST",
+			data,
+		});
+	}
+}
diff --git a/cool/service/index.ts b/cool/service/index.ts
new file mode 100644
index 0000000..8b6c684
--- /dev/null
+++ b/cool/service/index.ts
@@ -0,0 +1,9 @@
+import { BaseService } from "./base";
+
+// service 数据集合
+// @ts-ignore
+export const service: Eps.Service = {
+	request: new BaseService().request,
+};
+
+export * from "./base";
diff --git a/cool/service/request.ts b/cool/service/request.ts
new file mode 100644
index 0000000..ce69a75
--- /dev/null
+++ b/cool/service/request.ts
@@ -0,0 +1,132 @@
+import { useStore } from "../store";
+import { router } from "../router";
+import { isDev, config } from "../../config";
+import { storage } from "../utils";
+
+// 请求队列
+let requests: any[] = [];
+
+// Token 是否刷新中
+let isRefreshing = false;
+
+export default function request(options: any) {
+	// 缓存信息
+	const { user } = useStore();
+
+	// 标识
+	let Authorization = user.token || "";
+
+	// 忽略标识
+	config.ignore.token.forEach((e) => {
+		if (options.url.includes(e)) {
+			Authorization = "";
+		}
+	});
+
+	if (isDev) {
+		console.log(`[${options.method || "GET"}] ${options.url}`);
+	}
+
+	return new Promise(async (resolve, reject) => {
+		// 继续请求
+		function next() {
+			uni.request({
+				...options,
+
+				header: {
+					Authorization,
+					...options.header,
+				},
+
+				success(res) {
+					const { code, data, message } = res.data as {
+						code: number;
+						message: string;
+						data: any;
+					};
+
+					// 无权限
+					if (res.statusCode === 401) {
+						if (router.info()?.path == router.pages.login) {
+							return reject({ message });
+						} else {
+							user.logout();
+						}
+					}
+
+					// 服务异常
+					if (res.statusCode === 502) {
+						return reject({
+							message: "服务异常",
+						});
+					}
+
+					// 未找到
+					if (res.statusCode === 404) {
+						return reject({
+							message: `[404] ${options.url}`,
+						});
+					}
+
+					// 成功
+					if (res.statusCode === 200) {
+						switch (code) {
+							case 1000:
+								resolve(data);
+								break;
+							default:
+								reject({ message, code });
+						}
+					} else {
+						reject({ message: "服务异常" });
+					}
+				},
+
+				fail(err) {
+					reject({ message: err.errMsg });
+				},
+			});
+		}
+
+		// 刷新token处理
+		if (!options.url.includes("refreshToken")) {
+			if (Authorization) {
+				// 判断 token 是否过期
+				if (storage.isExpired("token")) {
+					// 判断 refreshToken 是否过期
+					if (storage.isExpired("refreshToken")) {
+						// 退出登录
+						return user.logout();
+					}
+
+					// 是否在刷新中
+					if (!isRefreshing) {
+						isRefreshing = true;
+						user.refreshToken()
+							.then((token) => {
+								requests.forEach((cb) => cb(token));
+								requests = [];
+								isRefreshing = false;
+							})
+							.catch((err) => {
+								user.logout();
+								reject(err);
+							});
+					}
+
+					return new Promise((resolve) => {
+						// 继续请求
+						requests.push((token: string) => {
+							// 重新设置 token
+							Authorization = token;
+							next();
+							resolve();
+						});
+					});
+				}
+			}
+		}
+
+		next();
+	});
+}
diff --git a/cool/service/sign.ts b/cool/service/sign.ts
new file mode 100644
index 0000000..c4a7b15
--- /dev/null
+++ b/cool/service/sign.ts
@@ -0,0 +1,22 @@
+import md5 from "md5";
+
+function useSign(params: any) {
+	const timestamp = new Date().getTime();
+
+	let arr = [`timestamp=${timestamp}`];
+
+	for (const i in params) {
+		arr.push(`${i}=${decodeURIComponent(params[i])}`);
+	}
+
+	arr.sort();
+
+	const sign = md5(arr.join("&"));
+
+	return {
+		timestamp,
+		sign,
+	};
+}
+
+export { useSign };
diff --git a/cool/store/dict.ts b/cool/store/dict.ts
new file mode 100644
index 0000000..804d929
--- /dev/null
+++ b/cool/store/dict.ts
@@ -0,0 +1,66 @@
+import { defineStore } from "pinia";
+import { computed, reactive, toRaw } from "vue";
+import { deepTree } from "../utils";
+import { service } from "../service";
+import { isDev } from "/@/config";
+import { isString } from "lodash-es";
+import type { Dict } from "../types";
+
+const useDictStore = defineStore("dict", () => {
+	// 对象数据
+	const data = reactive<Dict.Data>({});
+
+	function get(name: string) {
+		return computed(() => data[name]).value || [];
+	}
+
+	// 获取名称
+	function getLabel(name: string | any[], value: any): string {
+		const arr: any[] = String(value)?.split(",") || [];
+
+		return arr
+			.map((e) => {
+				return (isString(name) ? get(name) : name).find((a) => a.value == e)?.label;
+			})
+			.filter(Boolean)
+			.join(",");
+	}
+
+	// 刷新
+	async function refresh(types?: string[]) {
+		return service.dict.info
+			.data({
+				types,
+			})
+			.then((res: Dict.Data) => {
+				const d: any = {};
+
+				for (const [i, arr] of Object.entries(res)) {
+					arr.forEach((e) => {
+						e.label = e.name;
+						e.value = e.value !== undefined ? e.value : e.id;
+					});
+
+					d[i] = deepTree(arr, "desc");
+				}
+
+				Object.assign(data, d);
+
+				if (isDev) {
+					console.log("字典数据：");
+					console.log(toRaw(data));
+				}
+
+				return data;
+			});
+	}
+
+	return {
+		data,
+		get,
+		getLabel,
+		refresh,
+	};
+});
+
+export { useDictStore };
diff --git a/cool/store/index.ts b/cool/store/index.ts
new file mode 100644
index 0000000..f84ee40
--- /dev/null
+++ b/cool/store/index.ts
@@ -0,0 +1,9 @@
+import { useUserStore } from "./user";
+import { useDictStore } from "./dict";
+
+export function useStore() {
+	return {
+		user: useUserStore(),
+		dict: useDictStore(),
+	};
+}
diff --git a/cool/store/user.ts b/cool/store/user.ts
new file mode 100644
index 0000000..39b3c8c
--- /dev/null
+++ b/cool/store/user.ts
@@ -0,0 +1,94 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { deepMerge, storage } from "../utils";
+import { router } from "../router";
+import { service } from "../service";
+import type { User } from "../types";
+
+// 本地缓存
+const data = storage.info();
+
+const useUserStore = defineStore("user", function () {
+	// 标识
+	const token = ref(data.token || "");
+
+	// 设置标识
+	function setToken(data: User.Token) {
+		token.value = data.token;
+
+		// 访问
+		storage.set("token", data.token, data.expire - 5);
+		// 刷新
+		storage.set("refreshToken", data.refreshToken, data.refreshExpire - 5);
+	}
+
+	// 刷新标识
+	async function refreshToken() {
+		return service.user.login
+			.refreshToken({
+				refreshToken: storage.get("refreshToken"),
+			})
+			.then((res) => {
+				setToken(res);
+				return res.token;
+			});
+	}
+
+	// 用户信息
+	const info = ref<User.Info | undefined>(data.userInfo);
+
+	// 设置用户信息
+	function set(value: User.Info) {
+		info.value = value;
+		storage.set("userInfo", value);
+	}
+
+	// 更新用户信息
+	async function update(data: User.Info & { [key: string]: any }) {
+		set(deepMerge(info.value, data));
+		return service.user.info.updatePerson(data);
+	}
+
+	// 清除用户
+	function clear() {
+		storage.remove("userInfo");
+		storage.remove("token");
+		storage.remove("refreshToken");
+		token.value = "";
+		info.value = undefined;
+	}
+
+	// 退出
+	function logout() {
+		clear();
+		router.login({ reLaunch: true });
+	}
+
+	// 获取用户信息
+	async function get() {
+		return service.user.info
+			.person()
+			.then((res) => {
+				if (res) {
+					set(res);
+				}
+				return res;
+			})
+			.catch(() => {
+				logout();
+			});
+	}
+
+	return {
+		token,
+		setToken,
+		refreshToken,
+		info,
+		get,
+		set,
+		update,
+		logout,
+	};
+});
+
+export { useUserStore };
diff --git a/cool/types/index.d.ts b/cool/types/index.d.ts
new file mode 100644
index 0000000..923b8ce
--- /dev/null
+++ b/cool/types/index.d.ts
@@ -0,0 +1,43 @@
+export declare interface ModuleConfig {
+	name?: string;
+	description?: string;
+	order?: number;
+	demo?: { label: string; path: string };
+	options?: {
+		[key: string]: any;
+	};
+	onLoad?(options?: any): any;
+}
+
+export declare interface Module extends ModuleConfig {
+	name: string;
+	options: {
+		[key: string]: any;
+	};
+	[key: string]: any;
+}
+
+export namespace User {
+	interface Token {
+		token: string;
+		expire: number;
+		refreshToken: string;
+		refreshExpire: number;
+	}
+
+	interface Info extends Eps.UserInfoEntity {}
+}
+
+export namespace Dict {
+	interface Item {
+		id: string;
+		label: string;
+		value: any;
+		children?: Item[];
+		[key: string]: any;
+	}
+
+	interface Data {
+		[key: string]: Item[];
+	}
+}
diff --git a/cool/upload/comm.ts b/cool/upload/comm.ts
new file mode 100644
index 0000000..c99fa46
--- /dev/null
+++ b/cool/upload/comm.ts
@@ -0,0 +1,48 @@
+import { isArray, has } from "lodash-es";
+
+function parse(rules: string[], { url, size }: any) {
+	if (!url) {
+		return "";
+	}
+
+	let h = 0;
+	let w = 0;
+
+	if (isArray(size)) {
+		h = size[0];
+		w = size[1];
+	} else if (has(size, "h")) {
+		h = size.h;
+		w = size.w;
+
+		if (size.m) {
+			rules.push(`m_${size.m}`);
+		}
+	} else {
+		h = w = size;
+	}
+
+	url += url.includes("?") ? "&" : "?";
+
+	if (h) {
+		rules.push(`h_${h}`);
+	}
+
+	if (w) {
+		rules.push(`w_${w}`);
+	}
+
+	return `${url}${rules.join(",")}`;
+}
+
+type Size = number | number[] | { h?: number; w?: number; m?: string };
+
+function videoPoster(url: string, size: Size) {
+	return parse(["x-oss-process=video/snapshot,t_1000,f_jpg,m_fast"], { url, size });
+}
+
+function resizeImage(url: string, size: Size) {
+	return parse(["x-oss-process=image/resize"], { url, size });
+}
+
+export { videoPoster, resizeImage };
diff --git a/cool/upload/index.ts b/cool/upload/index.ts
new file mode 100644
index 0000000..df2bb2f
--- /dev/null
+++ b/cool/upload/index.ts
@@ -0,0 +1,141 @@
+import dayjs from "dayjs";
+import { config } from "../../config";
+import { service } from "../service";
+import { basename, pathJoin, uuid } from "../utils";
+import { useStore } from "../store";
+import { videoPoster, resizeImage } from "./comm";
+
+declare interface UploadCallback {
+	onProgressUpdate?(options: UniApp.OnProgressUpdateResult): void;
+	onTask?(task: UniApp.UploadTask): void;
+}
+
+export async function upload(file: any, cb?: UploadCallback): Promise<string> {
+	const { onProgressUpdate, onTask } = cb || {};
+
+	// 获取上传模式
+	const { mode, type } = await service.base.comm.uploadMode();
+
+	// 用户缓存
+	const { user } = useStore();
+
+	// 本地上传
+	const isLocal = mode == "local";
+
+	// 文件名
+	const fileName = uuid() + "_" + (file.name || basename(file.path));
+
+	// Key
+	const key = isLocal ? fileName : pathJoin("app", dayjs().format("YYYY-MM-DD"), fileName);
+
+	// 多种上传请求
+	return new Promise((resolve, reject) => {
+		// 上传文件
+		function next({ host, preview, data }: { host: string; preview?: string; data?: any }) {
+			// 签名数据
+			const fd = {
+				...data,
+				key,
+			};
+
+			// 上传
+			const task = uni.uploadFile({
+				url: host,
+				filePath: file.path,
+				name: "file",
+				header: isLocal
+					? {
+							Authorization: user.token,
+					  }
+					: {},
+				formData: fd,
+				success(res) {
+					if (isLocal) {
+						const { code, data, message } = JSON.parse(res.data);
+						if (code == 1000) {
+							resolve(data);
+						} else {
+							reject(message);
+						}
+					} else {
+						resolve(pathJoin(preview || host, fd.key));
+					}
+				},
+				fail(err) {
+					reject(err);
+				},
+			});
+
+			if (onTask) {
+				onTask(task);
+			}
+
+			if (onProgressUpdate) {
+				task.onProgressUpdate(onProgressUpdate);
+			}
+		}
+
+		if (isLocal) {
+			next({
+				host: config.baseUrl + "/app/base/comm/upload",
+			});
+		} else {
+			service.base.comm
+				.upload(
+					type == "aws"
+						? {
+								key,
+						  }
+						: {}
+				)
+				.then((res) => {
+					switch (type) {
+						// 腾讯
+						case "cos":
+							next({
+								host: res.url,
+								data: res.credentials,
+							});
+							break;
+						// 阿里
+						case "oss":
+							next({
+								host: res.host,
+								data: {
+									OSSAccessKeyId: res.OSSAccessKeyId,
+									policy: res.policy,
+									signature: res.signature,
+								},
+							});
+							break;
+						// 七牛
+						case "qiniu":
+							next({
+								host: res.uploadUrl,
+								preview: res.publicDomain,
+								data: {
+									token: res.token,
+								},
+							});
+							break;
+						// aws
+						case "aws":
+							next({
+								host: res.url,
+								data: res.fields,
+							});
+							break;
+					}
+				})
+				.catch(reject);
+		}
+	});
+}
+
+export function useUpload() {
+	return {
+		upload,
+		videoPoster,
+		resizeImage,
+	};
+}
diff --git a/cool/utils/canvas.ts b/cool/utils/canvas.ts
new file mode 100644
index 0000000..e6cecc2
--- /dev/null
+++ b/cool/utils/canvas.ts
@@ -0,0 +1,603 @@
+import { getCurrentInstance } from "vue";
+import { isEmpty, isString, cloneDeep, isObject } from "lodash-es";
+
+// 渲染参数
+declare interface RenderOptions {
+	x: number;
+	y: number;
+	height?: number;
+	width?: number;
+	[key: string]: any;
+}
+
+// 文本渲染参数
+declare interface TextRenderOptions extends RenderOptions {
+	text: string;
+	color?: string;
+	fontSize?: number;
+	textAlign?: "left" | "right" | "center";
+	overflow?: "ellipsis";
+	lineClamp?: number;
+	letterSpace?: number;
+	lineHeight?: number;
+}
+
+// 图片渲染参数
+declare interface ImageRenderOptions extends RenderOptions {
+	url: string;
+	mode?: "aspectFill" | "aspectFit";
+	radius?: number;
+}
+
+// 块渲染参数
+declare interface DivRenderOptions extends RenderOptions {
+	radius?: number;
+	backgroundColor?: string;
+	border?: {
+		width: number;
+		color: string;
+	};
+}
+
+// 导出图片参数
+declare interface CreateImageOptins {
+	x?: number;
+	y?: number;
+	width?: number;
+	height?: number;
+	destWidth?: number;
+	destHeight?: number;
+	fileType?: "jpg" | "png";
+	quality?: number;
+}
+
+class Canvas {
+	ctx: any;
+	canvasId: any;
+	scope: any;
+	renderQuene: any;
+	imageQueue: any;
+
+	constructor(canvasId: string) {
+		// 绘图上下文
+		this.ctx = null;
+
+		// canvas id
+		this.canvasId = canvasId;
+
+		// 当前页面作用域
+		const { proxy }: any = getCurrentInstance();
+		this.scope = proxy;
+
+		// 渲染队列
+		this.renderQuene = [];
+
+		// 图片队列
+		this.imageQueue = [];
+
+		// 创建画布
+		this.create();
+	}
+
+	// 创建画布
+	create() {
+		this.ctx = uni.createCanvasContext(this.canvasId, this.scope);
+		return this;
+	}
+
+	// 块
+	div(options: DivRenderOptions) {
+		let render = () => {
+			this.divRender(options);
+		};
+		this.renderQuene.push(render);
+		return this;
+	}
+
+	// 文本
+	text(options: TextRenderOptions) {
+		let render = () => {
+			this.textRender(options);
+		};
+		this.renderQuene.push(render);
+		return this;
+	}
+
+	// 图片
+	image(options: ImageRenderOptions) {
+		let render = () => {
+			this.imageRender(options);
+		};
+		this.imageQueue.push(options);
+		this.renderQuene.push(render);
+		return this;
+	}
+
+	// 绘画
+	draw(save = false) {
+		return new Promise((resolve) => {
+			let next = () => {
+				this.render();
+				this.ctx.draw(save, () => {
+					resolve(true);
+				});
+			};
+
+			if (!isEmpty(this.imageQueue)) {
+				this.preLoadImage().then(next);
+			} else {
+				next();
+			}
+		});
+	}
+
+	// 生成图片
+	createImage(options?: CreateImageOptins): Promise<string> {
+		return new Promise((resolve, reject) => {
+			let data = {
+				canvasId: this.canvasId,
+				...options,
+				success: (res: any) => {
+					// #ifdef MP-ALIPAY
+					resolve(res.apFilePath);
+					// #endif
+
+					// #ifndef MP-ALIPAY
+					resolve(res.tempFilePath);
+					// #endif
+				},
+				fail: reject,
+			};
+
+			// #ifdef MP-ALIPAY
+			this.ctx.toTempFilePath(data);
+			// #endif
+
+			// #ifndef MP-ALIPAY
+			uni.canvasToTempFilePath(data, this.scope);
+			// #endif
+		});
+	}
+
+	// 保存图片
+	saveImage(options?: CreateImageOptins) {
+		uni.showLoading({
+			title: "图片下载中...",
+		});
+		this.createImage(options).then((path: any) => {
+			return new Promise((resolve) => {
+				uni.hideLoading();
+				uni.saveImageToPhotosAlbum({
+					filePath: path,
+					success: () => {
+						uni.showToast({
+							title: "保存图片成功",
+						});
+						resolve(path);
+					},
+					fail: (err) => {
+						// #ifdef MP-ALIPAY
+						uni.showToast({
+							title: "保存图片成功",
+						});
+						// #endif
+
+						// #ifndef MP-ALIPAY
+						uni.showToast({
+							title: "保存图片失败",
+							icon: "none",
+						});
+						// #endif
+					},
+				});
+			});
+		});
+	}
+
+	// 预览图片
+	previewImage(options?: CreateImageOptins) {
+		this.createImage(options).then((url: string | any) => {
+			uni.previewImage({
+				urls: [url],
+			});
+		});
+	}
+
+	// 下载图片
+	downLoadImage(item: any) {
+		return new Promise((resolve, reject) => {
+			if (!item.url) {
+				return reject("url 不能为空");
+			}
+
+			// 处理base64
+			// #ifdef MP
+			if (item.url.indexOf("data:image") >= 0) {
+				let extName = item.url.match(/data\:\S+\/(\S+);/);
+				if (extName) {
+					extName = extName[1];
+				}
+				const fs = uni.getFileSystemManager();
+				const fileName = Date.now() + "." + extName;
+				// @ts-ignore
+				const filePath = wx.env.USER_DATA_PATH + "/" + fileName;
+
+				return fs.writeFile({
+					filePath,
+					data: item.url.replace(/^data:\S+\/\S+;base64,/, ""),
+					encoding: "base64",
+					success: () => {
+						item.url = filePath;
+						resolve(filePath);
+					},
+				});
+			}
+			// #endif
+
+			// 是否网络图片
+			const isHttp = item.url.includes("http");
+
+			uni.getImageInfo({
+				src: item.url,
+				success: (result) => {
+					item.sheight = result.height;
+					item.swidth = result.width;
+
+					if (isHttp) {
+						item.url = result.path;
+					}
+
+					resolve(item.url);
+				},
+				fail: (err) => {
+					console.log(err, item.url);
+					reject(err);
+				},
+			});
+
+			return 1;
+		});
+	}
+
+	// 预加载图片
+	async preLoadImage() {
+		await Promise.all(this.imageQueue.map(this.downLoadImage));
+	}
+
+	// 设置背景颜色
+	setBackground(options: any) {
+		if (!options) return null;
+
+		let backgroundColor;
+
+		if (!isString(options)) {
+			backgroundColor = options;
+		}
+
+		if (isString(options.backgroundColor)) {
+			backgroundColor = options.backgroundColor;
+		}
+
+		if (isObject(options.backgroundColor)) {
+			let { startX, startY, endX, endY, gradient } = options.backgroundColor;
+			const rgb = this.ctx.createLinearGradient(startX, startY, endX, endY);
+			for (let i = 0, l = gradient.length; i < l; i++) {
+				rgb.addColorStop(gradient[i].step, gradient[i].color);
+			}
+			backgroundColor = rgb;
+		}
+
+		this.ctx.setFillStyle(backgroundColor);
+
+		return this;
+	}
+
+	// 设置边框
+	setBorder(options: any) {
+		if (!options.border) return this;
+
+		let { x, y, width: w, height: h, border, radius: r } = options;
+
+		if (border.width) {
+			this.ctx.setLineWidth(border.width);
+		}
+
+		if (border.color) {
+			this.ctx.setStrokeStyle(border.color);
+		}
+
+		// 偏移距离
+		let p = border.width / 2;
+
+		// 是否有圆角
+		if (r) {
+			this.drawRadiusRoute(x - p, y - p, w + 2 * p, h + 2 * p, r + p);
+			this.ctx.stroke();
+		} else {
+			this.ctx.strokeRect(x - p, y - p, w + 2 * p, h + 2 * p);
+		}
+
+		return this;
+	}
+
+	// 设置缩放，旋转
+	setTransform(options: any) {
+		if (options.scale) {
+		}
+		if (options.rotate) {
+		}
+	}
+
+	// 带有圆角的路径绘制
+	drawRadiusRoute(x: number, y: number, w: number, h: number, r: number) {
+		this.ctx.beginPath();
+		this.ctx.moveTo(x + r, y, y);
+		this.ctx.lineTo(x + w - r, y);
+		this.ctx.arc(x + w - r, y + r, r, 1.5 * Math.PI, 0);
+		this.ctx.lineTo(x + w, y + h - r);
+		this.ctx.arc(x + w - r, y + h - r, r, 0, 0.5 * Math.PI);
+		this.ctx.lineTo(x + r, y + h);
+		this.ctx.arc(x + r, y + h - r, r, 0.5 * Math.PI, Math.PI);
+		this.ctx.lineTo(x, y + r);
+		this.ctx.arc(x + r, y + r, r, Math.PI, 1.5 * Math.PI);
+		this.ctx.closePath();
+	}
+
+	// 裁剪图片
+	cropImage(
+		mode: "aspectFill" | "aspectFit",
+		width: number,
+		height: number,
+		sWidth: number,
+		sHeight: number,
+		x: number,
+		y: number
+	) {
+		let cx, cy, cw, ch, sx, sy, sw, sh;
+		switch (mode) {
+			case "aspectFill":
+				if (width <= height) {
+					let p = width / sWidth;
+					cw = width;
+					ch = sHeight * p;
+					cx = 0;
+					cy = (height - ch) / 2;
+				} else {
+					let p = height / sHeight;
+					cw = sWidth * p;
+					ch = height;
+					cx = (width - cw) / 2;
+					cy = 0;
+				}
+				break;
+			case "aspectFit":
+				if (width <= height) {
+					let p = height / sHeight;
+					sw = width / p;
+					sh = sHeight;
+					sx = x + (sWidth - sw) / 2;
+					sy = y;
+				} else {
+					let p = width / sWidth;
+					sw = sWidth;
+					sh = height / p;
+					sx = x;
+					sy = y + (sHeight - sh) / 2;
+				}
+				break;
+		}
+		return { cx, cy, cw, ch, sx, sy, sw, sh };
+	}
+
+	// 获取文本内容
+	getTextRows({
+		text,
+		fontSize = 14,
+		width = 100,
+		lineClamp = 1,
+		overflow,
+		letterSpace = 0,
+	}: any) {
+		let arr: any[] = [[]];
+		let a = 0;
+
+		for (let i = 0; i < text.length; i++) {
+			let b = this.getFontPx(text[i], { fontSize, letterSpace });
+
+			if (a + b > width) {
+				a = b;
+				arr.push(text[i]);
+			} else {
+				// 最后一行且设置超出省略号
+				if (
+					overflow == "ellipsis" &&
+					arr.length == lineClamp &&
+					a + 3 * this.getFontPx(".", { fontSize, letterSpace }) > width - 5
+				) {
+					arr[arr.length - 1] += "...";
+					break;
+				} else {
+					a += b;
+					arr[arr.length - 1] += text[i];
+				}
+			}
+		}
+
+		return arr;
+	}
+
+	// 获取单个字体像素大小
+	getFontPx(text: string, { fontSize = 14, letterSpace }: any) {
+		if (!text) {
+			return fontSize / 2 + fontSize / 14 + letterSpace;
+		}
+
+		let ch = text.charCodeAt(0);
+
+		if ((ch >= 0x0001 && ch <= 0x007e) || (0xff60 <= ch && ch <= 0xff9f)) {
+			return fontSize / 2 + fontSize / 14 + letterSpace;
+		} else {
+			return fontSize + letterSpace;
+		}
+	}
+
+	// 渲染块
+	divRender(options: DivRenderOptions) {
+		this.ctx.save();
+		this.setBackground(options);
+		this.setBorder(options);
+		this.setTransform(options);
+
+		// 区分是否有圆角采用不同模式渲染
+		if (options.radius) {
+			let { x, y } = options;
+			let w = options.width || 0;
+			let h = options.height || 0;
+			let r = options.radius || 0;
+			// 画路径
+			this.drawRadiusRoute(x, y, w, h, r);
+			// 填充
+			this.ctx.fill();
+		} else {
+			this.ctx.fillRect(options.x, options.y, options.width, options.height);
+		}
+		this.ctx.restore();
+	}
+
+	// 渲染文本
+	textRender(options: TextRenderOptions) {
+		let {
+			fontSize = 14,
+			textAlign,
+			width,
+			color = "#000000",
+			x,
+			y,
+			letterSpace,
+			lineHeight = 14,
+		} = options || {};
+
+		this.ctx.save();
+
+		// 设置字体大小
+		this.ctx.setFontSize(fontSize);
+
+		// 设置字体颜色
+		this.ctx.setFillStyle(color);
+
+		// 获取文本内容
+		let rows = this.getTextRows(options);
+
+		// 获取文本行高
+		let lh = lineHeight - fontSize;
+
+		// 左偏移
+		let offsetLeft = 0;
+
+		// 字体对齐
+		if (textAlign && width) {
+			this.ctx.textAlign = textAlign;
+
+			switch (textAlign) {
+				case "left":
+					break;
+				case "center":
+					offsetLeft = width / 2;
+					break;
+				case "right":
+					offsetLeft = width;
+					break;
+			}
+		}
+
+		// 逐行写入
+		for (let i = 0; i < rows.length; i++) {
+			let d = offsetLeft;
+
+			if (letterSpace) {
+				for (let j = 0; j < rows[i].length; j++) {
+					// 写入文字
+					this.ctx.fillText(rows[i][j], x + d, (i + 1) * fontSize + y + lh * i);
+
+					// 设置偏移
+					d += this.getFontPx(rows[i][j], options);
+				}
+			} else {
+				// 写入文字
+				this.ctx.fillText(rows[i], x + offsetLeft, (i + 1) * fontSize + y + lh * i);
+			}
+		}
+
+		this.ctx.restore();
+	}
+
+	// 渲染图片
+	imageRender(options: ImageRenderOptions) {
+		this.ctx.save();
+
+		if (options.radius) {
+			// 画路径
+			this.drawRadiusRoute(
+				options.x,
+				options.y,
+				options.width || options.swidth,
+				options.height || options.sHeight,
+				options.radius
+			);
+			// 填充
+			this.ctx.fill();
+			// 裁剪
+			this.ctx.clip();
+		}
+		let temp = cloneDeep(this.imageQueue[0]);
+
+		if (options.mode) {
+			let { cx, cy, cw, ch, sx, sy, sw, sh } = this.cropImage(
+				options.mode,
+				temp.swidth,
+				temp.sheight,
+				temp.width,
+				temp.height,
+				temp.x,
+				temp.y
+			);
+			switch (options.mode) {
+				case "aspectFit":
+					this.ctx.drawImage(temp.url, sx, sy, sw, sh);
+					break;
+				case "aspectFill":
+					this.ctx.drawImage(
+						temp.url,
+						cx,
+						cy,
+						cw,
+						ch,
+						temp.x,
+						temp.y,
+						temp.width,
+						temp.height
+					);
+					break;
+			}
+		} else {
+			this.ctx.drawImage(
+				temp.url,
+				temp.x,
+				temp.y,
+				temp.width || temp.swidth,
+				temp.height || temp.sheight
+			);
+		}
+		this.imageQueue.shift();
+		this.ctx.restore();
+	}
+
+	// 渲染全部
+	render() {
+		this.renderQuene.forEach((ele: any) => {
+			ele();
+		});
+	}
+}
+
+export { Canvas };
diff --git a/cool/utils/comm.ts b/cool/utils/comm.ts
new file mode 100644
index 0000000..ff4619f
--- /dev/null
+++ b/cool/utils/comm.ts
@@ -0,0 +1,163 @@
+import { orderBy } from "lodash-es";
+
+export const { platform } = uni.getSystemInfoSync();
+
+// 是否安卓
+export const isAndroid = platform == "android";
+
+// 是否苹果
+export const isIos = platform == "ios";
+
+// 是否小数
+export function isDecimal(value: any): boolean {
+	return String(value).length - String(value).indexOf(".") + 1 > 0;
+}
+
+// 首字母大写
+export function firstUpperCase(value: string): string {
+	return value.replace(/\b(\w)(\w*)/g, function ($0, $1, $2) {
+		return $1.toUpperCase() + $2;
+	});
+}
+
+// 深度合并
+export function deepMerge(a: any, b: any) {
+	let k;
+	for (k in b) {
+		a[k] =
+			a[k] && a[k].toString() === "[object Object]" ? deepMerge(a[k], b[k]) : (a[k] = b[k]);
+	}
+	return a;
+}
+
+// 获取地址栏参数
+export function getUrlParam(name: string): string | null {
+	const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+	const r = window.location.search.substr(1).match(reg);
+	if (r != null) return decodeURIComponent(r[2]);
+	return null;
+}
+
+// 列表转树形
+export function deepTree(list: any[], sort?: "desc" | "asc"): any[] {
+	const newList: any[] = [];
+	const map: any = {};
+
+	orderBy(list, "orderNum", sort)
+		.map((e) => {
+			map[e.id] = e;
+			return e;
+		})
+		.forEach((e) => {
+			const parent = map[e.parentId];
+
+			if (parent) {
+				(parent.children || (parent.children = [])).push(e);
+			} else {
+				newList.push(e);
+			}
+		});
+
+	return newList;
+}
+
+// 路径转对象
+export function path2Obj(list: any[]) {
+	const data: any = {};
+
+	list.forEach(({ path, value }) => {
+		const arr: string[] = path.split("/");
+		const parents = arr.slice(0, arr.length - 1);
+		const name = basename(path).replace(".ts", "");
+
+		let curr = data;
+
+		parents.forEach((k) => {
+			if (!curr[k]) {
+				curr[k] = {};
+			}
+
+			curr = curr[k];
+		});
+
+		curr[name] = value;
+	});
+
+	return data;
+}
+
+// 路径拼接
+export function pathJoin(...parts: string[]): string {
+	if (parts.length === 0) {
+		return "";
+	}
+
+	const firstPart = parts[0];
+	let isAbsolute = false;
+
+	// 检查第一个部分是否以 "http" 开头，以确定路径类型（绝对还是相对）
+	if (firstPart.startsWith("http")) {
+		isAbsolute = true;
+	}
+
+	// 标准化路径，去除任何开头或结尾的斜杠
+	const normalizedParts = parts.map((part) => part.replace(/(^\/+|\/+$)/g, ""));
+
+	if (isAbsolute) {
+		// 如果是绝对路径，使用斜杠连接部分
+		return normalizedParts.join("/");
+	} else {
+		// 如果是相对路径，使用平台特定的分隔符连接部分
+		return normalizedParts.join("/");
+	}
+}
+
+// 文件名
+export function filename(path: string): string {
+	return basename(path.substring(0, path.lastIndexOf(".")));
+}
+
+// 路径名称
+export function basename(path: string): string {
+	let index = path.lastIndexOf("/");
+	index = index > -1 ? index : path.lastIndexOf("\\");
+	if (index < 0) {
+		return path;
+	}
+	return path.substring(index + 1);
+}
+
+// 文件扩展名
+export function extname(path: string): string {
+	return path.substring((path || "").lastIndexOf(".") + 1);
+}
+
+// 横杠转驼峰
+export function toCamel(str: string): string {
+	return str.replace(/([^-])(?:-+([^-]))/g, function ($0, $1, $2) {
+		return $1 + $2.toUpperCase();
+	});
+}
+
+// uuid
+export function uuid(): string {
+	const s: any[] = [];
+	const hexDigits = "0123456789abcdef";
+	for (let i = 0; i < 36; i++) {
+		s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
+	}
+	s[14] = "4";
+	s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
+	s[8] = s[13] = s[18] = s[23] = "-";
+
+	return s.join("");
+}
+
+// 延迟
+export function sleep(duration: number) {
+	return new Promise((resolve) => {
+		setTimeout(() => {
+			resolve(true);
+		}, duration);
+	});
+}
diff --git a/cool/utils/index.ts b/cool/utils/index.ts
new file mode 100644
index 0000000..873f805
--- /dev/null
+++ b/cool/utils/index.ts
@@ -0,0 +1,4 @@
+export * from "./comm";
+export * from "./ui";
+export * from "./canvas";
+export * from "./storage";
diff --git a/cool/utils/storage.ts b/cool/utils/storage.ts
new file mode 100644
index 0000000..d12606b
--- /dev/null
+++ b/cool/utils/storage.ts
@@ -0,0 +1,75 @@
+export const storage = {
+	// 后缀标识
+	suffix: "_deadtime",
+
+	/**
+	 * 获取
+	 * @param {*} key 关键字
+	 */
+	get(key: string): any {
+		return uni.getStorageSync(key);
+	},
+
+	/**
+	 * 获取全部
+	 */
+	info() {
+		const { keys } = uni.getStorageInfoSync();
+		const d: any = {};
+
+		keys.forEach((e: string) => {
+			d[e] = uni.getStorageSync(e);
+		});
+
+		return d;
+	},
+
+	/**
+	 * 设置
+	 * @param {*} key 关键字
+	 * @param {*} value 值
+	 * @param {*} expires 过期时间
+	 */
+	set(key: string, value: any, expires?: number): void {
+		uni.setStorageSync(key, value);
+
+		if (expires) {
+			uni.setStorageSync(
+				`${key}${this.suffix}`,
+				Date.parse(String(new Date())) + expires * 1000
+			);
+		}
+	},
+
+	/**
+	 * 是否过期
+	 * @param {*} key 关键字
+	 */
+	isExpired(key: string): boolean {
+		return uni.getStorageSync(`${key}${this.suffix}`) - Date.parse(String(new Date())) <= 0;
+	},
+
+	/**
+	 * 删除
+	 * @param {*} key 关键字
+	 */
+	remove(key: string) {
+		return uni.removeStorageSync(key);
+	},
+
+	/**
+	 * 清理
+	 */
+	clear() {
+		uni.clearStorageSync();
+	},
+
+	/**
+	 * 获取一次后删除
+	 */
+	once(key: string) {
+		const value = this.get(key);
+		this.remove(key);
+		return value;
+	},
+};
diff --git a/cool/utils/ui.ts b/cool/utils/ui.ts
new file mode 100644
index 0000000..16b94e9
--- /dev/null
+++ b/cool/utils/ui.ts
@@ -0,0 +1,78 @@
+import { isArray, isEmpty, isNumber } from "lodash-es";
+import { computed, getCurrentInstance, nextTick, ref } from "vue";
+
+// 获取父组件
+export function getParent(name: string, k1: string[], k2?: string[]) {
+	const { proxy }: any = getCurrentInstance();
+
+	const d = ref();
+	let n = 10;
+
+	const next = () => {
+		let parent = proxy.$parent;
+
+		while (parent) {
+			if (parent.$options.name !== name) {
+				parent = parent.$parent;
+			} else {
+				if (isArray(k2)) {
+					nextTick(() => {
+						const child: any = {};
+
+						(k2 || []).map((key: string) => {
+							if (proxy[key]) {
+								child[key] = proxy[key];
+							}
+						});
+
+						if (!parent.__children) {
+							parent.__children = [];
+						}
+
+						if (!isEmpty(child)) {
+							parent.__children.push(child);
+						}
+					});
+				}
+
+				return (k1 || []).reduce((res: any, key: string) => {
+					res[key] = parent[key];
+
+					return res;
+				}, {});
+			}
+		}
+
+		// if (!d.value && n-- > 0) {
+		// 	setTimeout(() => {
+		// 		d.value = next();
+		// 	}, 50);
+		// }
+
+		return parent || d.value;
+	};
+
+	return computed(() => next());
+}
+
+// 获取元素位置信息
+export async function getRect(selector: string): Promise<any> {
+	return new Promise((resolve) => {
+		uni.createSelectorQuery()
+			.select(selector)
+			.boundingClientRect((res) => {
+				resolve(res);
+			})
+			.exec();
+	});
+}
+
+// 解析rpx
+export function parseRpx(val: any): string {
+	return isArray(val) ? val.map(parseRpx).join(" ") : isNumber(val) ? `${val}rpx` : val;
+}
+
+// px 转 rpx
+export function px2Rpx(px: number) {
+	return px / (uni.upx2px(100) / 100);
+}
diff --git a/hooks/index.ts b/hooks/index.ts
new file mode 100644
index 0000000..1d68a8c
--- /dev/null
+++ b/hooks/index.ts
@@ -0,0 +1,29 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { service } from "/@/cool";
+
+export const useAddress = defineStore("address", () => {
+	const info = ref<Eps.UserAddressEntity>();
+
+	function set(data: Eps.UserAddressEntity) {
+		info.value = data;
+	}
+
+	function getDefault() {
+		if (!info.value || info.value?.isDefault) {
+			service.user.address.default().then((res) => {
+				info.value = res;
+			});
+		}
+	}
+
+	return {
+		info,
+		set,
+		getDefault,
+	};
+});
+
+export * from "./shopping-cart";
+export * from "./spec";
+export * from "./order";
diff --git a/hooks/order.ts b/hooks/order.ts
new file mode 100644
index 0000000..f55f85d
--- /dev/null
+++ b/hooks/order.ts
@@ -0,0 +1,47 @@
+import { service, useWx } from "/@/cool";
+
+export function useOrder() {
+	const wx = useWx();
+
+	const payTypes = [
+		{
+			label: "微信支付",
+			value: 1,
+			key: "wxpay",
+			icon: "/static/icon/wxpay.png",
+		},
+		// {
+		// 	label: "支付宝支付",
+		// 	value: 2,
+		// 	key: "alipay",
+		// 	icon: "/static/icon/alipay.png",
+		// },
+	];
+
+	async function toPay(orderId: number, type = "wxpay") {
+		// #ifdef MP-WEIXIN
+		return service.order.pay.wxMiniPay({ orderId }).then((res) => {
+			return wx.miniPay(res.data);
+		});
+		// #endif
+
+		// #ifdef H5
+		if (wx.isWxBrowser()) {
+			return service.order.pay.wxMpPay({ orderId }).then((res) => {
+				return wx.mpPay(res.data);
+			});
+		}
+		// #endif
+
+		// #ifdef APP
+		return service.order.pay.wxAppPay({ orderId }).then((res) => {
+			return wx.appPay(res.data);
+		});
+		// #endif
+	}
+
+	return {
+		toPay,
+		payTypes,
+	};
+}
diff --git a/hooks/shopping-cart.ts b/hooks/shopping-cart.ts
new file mode 100644
index 0000000..e40bc85
--- /dev/null
+++ b/hooks/shopping-cart.ts
@@ -0,0 +1,70 @@
+import { defineStore } from "pinia";
+import { computed, ref, watch } from "vue";
+import { storage } from "/@/cool";
+import { uuid } from "/@/cool/utils";
+
+// 购物车
+export const useShoppingCart = defineStore("shopping-cart", () => {
+	const list = ref<OrderGoods[]>(storage.get("shopping-cart.list") || []);
+
+	// 购物车数量
+	const num = computed(() => {
+		return list.value.length;
+	});
+
+	// 数量+1
+	function add(data: OrderGoods) {
+		const d = list.value.find((e) => e.spec?.id == data.spec?.id);
+
+		if (d) {
+			// 判定库存
+			d.count += data.count || 1;
+
+			if (d.count > data.spec.stock!) {
+				d.count = data.spec.stock || 1;
+			}
+		} else {
+			list.value.push({
+				...data,
+				id: uuid(),
+			});
+		}
+	}
+
+	// 删除规格
+	function del(id: string) {
+		const i = list.value.findIndex((e) => e.id == id);
+
+		if (i >= 0) {
+			list.value.splice(i, 1);
+		}
+	}
+
+	// 删除规格根据 specId
+	function delBySpecId(id: number) {
+		const i = list.value.findIndex((e) => e.spec?.id == id);
+
+		if (i >= 0) {
+			list.value.splice(i, 1);
+		}
+	}
+
+	// 监听更新
+	watch(
+		list,
+		(val) => {
+			storage.set("shopping-cart.list", val);
+		},
+		{
+			deep: true,
+		},
+	);
+
+	return {
+		list,
+		num,
+		add,
+		del,
+		delBySpecId,
+	};
+});
diff --git a/hooks/spec.ts b/hooks/spec.ts
new file mode 100644
index 0000000..02fb13d
--- /dev/null
+++ b/hooks/spec.ts
@@ -0,0 +1,115 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+
+type Action = "select" | "spCart" | "buy" | "edit";
+
+export const useSpec = defineStore("goods.spec", () => {
+	const visible = ref(false);
+
+	// 打开类型
+	const action = ref<Action>("select");
+
+	// 商品信息
+	const goods = ref<Eps.GoodsInfoEntity>();
+
+	// 已选规格信息
+	const info = ref<Eps.GoodsSpecEntity>();
+
+	// 已选数量
+	const num = ref(1);
+
+	// 指定规格id
+	const specId = ref();
+
+	// 回调函数
+	let cb: ((action: Action) => void) | undefined;
+
+	// 选中文案
+	const text = computed(() => {
+		return info.value ? `已选：${info.value.name}` : "选择规格";
+	});
+
+	// 打开弹窗
+	function open(options: {
+		action: Action;
+		goods: Eps.GoodsInfoEntity;
+		spec?: Eps.GoodsSpecEntity;
+		specId?: number;
+		count?: number;
+		item?: OrderGoods;
+		callback?: typeof cb;
+	}) {
+		if (!options.goods) {
+			return false;
+		}
+
+		visible.value = true;
+		action.value = options.action || "select";
+		goods.value = options.goods;
+		specId.value = options.specId || options.spec?.id || specId.value;
+
+		if (options.spec) {
+			info.value = options.spec;
+		}
+
+		cb = options.callback;
+
+		if (options.action == "edit") {
+			num.value = options.count || 0;
+		}
+	}
+
+	// 关闭弹窗
+	function close() {
+		visible.value = false;
+	}
+
+	// 设置选中规格
+	function set(data?: Eps.GoodsSpecEntity) {
+		info.value = data;
+		setId(data?.id!);
+	}
+
+	// 设置规格id
+	function setId(id: number) {
+		specId.value = id;
+	}
+
+	// 设置数量
+	function setNum(val?: number) {
+		num.value = val || 0;
+	}
+
+	// 回调
+	function emit(action: Action) {
+		if (cb) {
+			cb(action);
+		}
+	}
+
+	// 清空选项
+	function clear() {
+		num.value = 1;
+		info.value = undefined;
+		goods.value = undefined;
+		specId.value = undefined;
+		cb = undefined;
+	}
+
+	return {
+		visible,
+		action,
+		goods,
+		info,
+		emit,
+		num,
+		setNum,
+		specId,
+		text,
+		open,
+		close,
+		set,
+		setId,
+		clear,
+	};
+});
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b61f63e
--- /dev/null
+++ b/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
+    <title></title>
+    <!--preload-links-->
+    <!--app-context-->
+  </head>
+  <body>
+    <div id="app"><!--app-html--></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..d22761a
--- /dev/null
+++ b/main.js
@@ -0,0 +1,18 @@
+import { createSSRApp } from "vue";
+import { bootstrap } from "/@/cool/bootstrap";
+import App from "./App.vue";
+import "./router";
+
+export function createApp() {
+	const app = createSSRApp(App);
+
+	// 启动
+	bootstrap(app);
+
+	// 隐藏底部导航栏
+	uni.hideTabBar();
+
+	return {
+		app,
+	};
+}
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 0000000..4f9e44b
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,174 @@
+{
+    "name" : "酷卖",
+    "appid" : "__UNI__75A96B5",
+    "description" : "",
+    "versionName" : "1.0.0",
+    "versionCode" : 100,
+    "transformPx" : false,
+    "app-plus" : {
+        "usingComponents" : true,
+        "splashscreen" : {
+            "alwaysShowBeforeRender" : true,
+            "waiting" : true,
+            "autoclose" : true,
+            "delay" : 0
+        },
+        "modules" : {
+            "VideoPlayer" : {},
+            "Share" : {},
+            "Payment" : {},
+            "OAuth" : {},
+            "Geolocation" : {},
+            "Camera" : {}
+        },
+        "distribute" : {
+            "android" : {
+                "permissions" : [
+                    "<uses-feature android:name=\"android.hardware.camera\"/>",
+                    "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_COARSE_LOCATION\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CAMERA\"/>",
+                    "<uses-permission android:name=\"android.permission.CAPTURE_VIDEO_OUTPUT\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
+                    "<uses-permission android:name=\"android.permission.INTERNET\"/>",
+                    "<uses-permission android:name=\"android.permission.MODIFY_AUDIO_SETTINGS\"/>",
+                    "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
+                    "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
+                    "<uses-permission android:name=\"android.permission.RECORD_AUDIO\"/>",
+                    "<uses-permission android:name=\"android.permission.STATUS_BAR\"/>",
+                    "<uses-permission android:name=\"android.permission.VIBRATE\"/>",
+                    "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_EXTERNAL_STORAGE\"/>",
+                    "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+                ],
+                "abiFilters" : [ "armeabi-v7a", "arm64-v8a", "x86" ]
+            },
+            "ios" : {
+                "capabilities" : {
+                    "entitlements" : {
+                        "com.apple.developer.associated-domains" : []
+                    }
+                },
+                "idfa" : true,
+                "privacyDescription" : {
+                    "NSUserTrackingUsageDescription" : "请放心，开启权限不会获取您在其他站点的隐私信息，该权限仅用于标识设备并保障服务安全与提示浏览体验"
+                }
+            },
+            "sdkConfigs" : {
+                "payment" : {
+                    "alipay" : {
+                        "__platform__" : [ "ios", "android" ]
+                    },
+                    "weixin" : {
+                        "__platform__" : [ "ios", "android" ],
+                        "appid" : "wx348f72db1512fa2e",
+                        "UniversalLinks" : ""
+                    }
+                },
+                "ad" : {},
+                "share" : {
+                    "weixin" : {
+                        "appid" : "wx348f72db1512fa2e",
+                        "UniversalLinks" : ""
+                    }
+                },
+                "oauth" : {
+                    "weixin" : {
+                        "appid" : "wx348f72db1512fa2e",
+                        "appsecret" : "test",
+                        "UniversalLinks" : ""
+                    },
+                    "apple" : {}
+                },
+                "geolocation" : {
+                    "system" : {
+                        "__platform__" : [ "ios", "android" ]
+                    }
+                },
+                "push" : {
+                    "unipush" : {}
+                },
+                "maps" : {}
+            },
+            "icons" : {
+                "android" : {
+                    "hdpi" : "unpackage/res/icons/72x72.png",
+                    "xhdpi" : "unpackage/res/icons/96x96.png",
+                    "xxhdpi" : "unpackage/res/icons/144x144.png",
+                    "xxxhdpi" : "unpackage/res/icons/192x192.png"
+                },
+                "ios" : {
+                    "appstore" : "unpackage/res/icons/1024x1024.png",
+                    "ipad" : {
+                        "app" : "unpackage/res/icons/76x76.png",
+                        "app@2x" : "unpackage/res/icons/152x152.png",
+                        "notification" : "unpackage/res/icons/20x20.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "proapp@2x" : "unpackage/res/icons/167x167.png",
+                        "settings" : "unpackage/res/icons/29x29.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "spotlight" : "unpackage/res/icons/40x40.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png"
+                    },
+                    "iphone" : {
+                        "app@2x" : "unpackage/res/icons/120x120.png",
+                        "app@3x" : "unpackage/res/icons/180x180.png",
+                        "notification@2x" : "unpackage/res/icons/40x40.png",
+                        "notification@3x" : "unpackage/res/icons/60x60.png",
+                        "settings@2x" : "unpackage/res/icons/58x58.png",
+                        "settings@3x" : "unpackage/res/icons/87x87.png",
+                        "spotlight@2x" : "unpackage/res/icons/80x80.png",
+                        "spotlight@3x" : "unpackage/res/icons/120x120.png"
+                    }
+                }
+            },
+            "splashscreen" : {
+                "useOriginalMsgbox" : true
+            }
+        },
+        "safearea" : {
+            "bottom" : {
+                "offset" : "none"
+            }
+        },
+        "uniStatistics" : {
+            "enable" : true
+        }
+    },
+    "quickapp" : {},
+    "mp-weixin" : {
+        "appid" : "wxdebc4de0b5584ca4",
+        "setting" : {
+            "urlCheck" : false,
+            "es6" : true
+        },
+        "usingComponents" : true
+    },
+    "mp-alipay" : {
+        "usingComponents" : true
+    },
+    "mp-baidu" : {
+        "usingComponents" : true
+    },
+    "mp-toutiao" : {
+        "usingComponents" : true
+    },
+    "uniStatistics" : {
+        "enable" : false
+    },
+    "vueVersion" : "3",
+    "h5" : {
+        "router" : {
+            "base" : "./",
+            "mode" : "hash"
+        },
+        "devServer" : {
+            "https" : false
+        }
+    }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..bce91e0
--- /dev/null
+++ b/package.json
@@ -0,0 +1,29 @@
+{
+	"name": "cool-uni",
+	"version": "7.3.0",
+	"license": "MIT",
+	"dependencies": {
+		"@dcloudio/uni-app": "3.0.0-3081220230817001",
+		"@hyoga/uni-socket.io": "^3.0.4",
+		"dayjs": "^1.11.10",
+		"js-pinyin": "^0.2.5",
+		"lodash-es": "^4.17.21",
+		"md5": "^2.3.0",
+		"pinia": "^2.1.7",
+		"vue": "^3.4.21",
+		"weixin-js-sdk": "^1.6.5"
+	},
+	"engines": {
+		"node": ">= 16"
+	},
+	"devDependencies": {
+		"@cool-vue/vite-plugin": "7.1.3",
+		"@dcloudio/types": "^3.4.8",
+		"@types/lodash-es": "^4.17.12",
+		"@types/md5": "^2.3.2",
+		"@types/node": "^20.11.26",
+		"@vue/tsconfig": "^0.5.1",
+		"typescript": "^5.2.2",
+		"vite": "^5.1.6"
+	}
+}
diff --git a/pages.json b/pages.json
new file mode 100644
index 0000000..3692d75
--- /dev/null
+++ b/pages.json
@@ -0,0 +1,268 @@
+{
+    "pages": [
+        {
+            "path": "pages/index/home",
+            "style": {
+                "enablePullDownRefresh": true
+            }
+        },
+        {
+            "path": "pages/index/category",
+            "style": {
+                "disableScroll": true,
+                "navigationBarTitleText": "分类"
+            }
+        },
+        {
+            "path": "pages/index/shopping-cart",
+            "style": {
+                "navigationStyle": "custom",
+                "navigationBarTitleText": "购物车"
+            }
+        },
+        {
+            "path": "pages/index/my",
+            "style": {
+                "navigationStyle": "custom",
+                "navigationBarTitleText": "我的",
+                "navigationBarTextStyle": "white"
+            }
+        }
+    ],
+    "subPackages": [
+        {
+            "root": "uni_modules/cool-app/pages",
+            "pages": [
+                {
+                    "path": "version/demo",
+                    "style": {
+                        "navigationBarTitleText": "版本升级"
+                    }
+                },
+                {
+                    "path": "complain/detail",
+                    "style": {
+                        "navigationBarTitleText": "投诉详情"
+                    }
+                },
+                {
+                    "path": "complain/list",
+                    "style": {
+                        "navigationBarTitleText": "投诉列表"
+                    }
+                },
+                {
+                    "path": "complain/submit",
+                    "style": {
+                        "navigationStyle": "custom"
+                    }
+                },
+                {
+                    "path": "feedback/detail",
+                    "style": {
+                        "navigationBarTitleText": "反馈详情"
+                    }
+                },
+                {
+                    "path": "feedback/list",
+                    "style": {
+                        "navigationBarTitleText": "反馈列表"
+                    }
+                },
+                {
+                    "path": "feedback/submit",
+                    "style": {
+                        "navigationStyle": "custom"
+                    }
+                }
+            ],
+            "isTemp": true
+        },
+        {
+            "root": "uni_modules/cool-cs/pages",
+            "pages": [
+                {
+                    "path": "chat",
+                    "style": {
+                        "navigationBarTitleText": "客服聊天"
+                    }
+                }
+            ],
+            "isTemp": true
+        },
+        {
+            "root": "pages/market",
+            "pages": [
+                {
+                    "path": "coupon",
+                    "style": {
+                        "navigationBarTitleText": "我的优惠券",
+                        "enablePullDownRefresh": true
+                    }
+                }
+            ]
+        },
+        {
+            "root": "pages/order",
+            "pages": [
+                {
+                    "path": "refund",
+                    "style": {
+                        "navigationBarTitleText": "退款申请"
+                    }
+                },
+                {
+                    "path": "comment",
+                    "style": {
+                        "navigationBarTitleText": "商品评价"
+                    }
+                },
+                {
+                    "path": "logistics",
+                    "style": {
+                        "navigationBarTitleText": "物流详情",
+                        "enablePullDownRefresh": true
+                    }
+                },
+                {
+                    "path": "list",
+                    "style": {
+                        "navigationBarTitleText": "订单列表",
+                        "enablePullDownRefresh": true
+                    }
+                },
+                {
+                    "path": "detail",
+                    "style": {
+                        "navigationBarTitleText": "订单详情",
+                        "enablePullDownRefresh": true,
+                        "navigationStyle": "custom"
+                    }
+                },
+                {
+                    "path": "submit",
+                    "style": {
+                        "navigationBarTitleText": "订单提交"
+                    }
+                }
+            ]
+        },
+        {
+            "root": "pages/goods",
+            "pages": [
+                {
+                    "path": "search",
+                    "style": {
+                        "navigationStyle": "custom"
+                    }
+                },
+                {
+                    "path": "list",
+                    "style": {
+                        "navigationStyle": "custom",
+                        "enablePullDownRefresh": true
+                    }
+                },
+                {
+                    "path": "detail",
+                    "style": {
+                        "navigationStyle": "custom",
+                        "enablePullDownRefresh": true
+                    }
+                },
+                {
+                    "path": "comment",
+                    "style": {
+                        "navigationBarTitleText": "商品评价"
+                    }
+                }
+            ]
+        },
+        {
+            "root": "pages/user",
+            "pages": [
+                {
+                    "path": "address-list",
+                    "style": {
+                        "navigationBarTitleText": "收货地址",
+                        "enablePullDownRefresh": true
+                    }
+                },
+                {
+                    "path": "address-edit",
+                    "style": {
+                        "navigationBarTitleText": ""
+                    }
+                },
+                {
+                    "path": "doc",
+                    "style": {
+                        "navigationBarTitleText": ""
+                    }
+                },
+                {
+                    "path": "set",
+                    "style": {
+                        "navigationBarTitleText": "设置"
+                    }
+                },
+                {
+                    "path": "edit",
+                    "style": {
+                        "navigationBarTitleText": "编辑"
+                    }
+                },
+                {
+                    "path": "login",
+                    "style": {
+                        "navigationStyle": "custom"
+                    }
+                },
+                {
+                    "path": "captcha",
+                    "style": {
+                        "navigationStyle": "custom"
+                    }
+                },
+                {
+                    "path": "about",
+                    "style": {
+                        "navigationBarTitleText": ""
+                    }
+                }
+            ]
+        }
+    ],
+    "globalStyle": {
+        "navigationBarTextStyle": "black",
+        "navigationBarTitleText": "酷卖",
+        "navigationBarBackgroundColor": "#ffffff",
+        "backgroundColor": "#f6f7fa"
+    },
+    "tabBar": {
+        "backgroundColor": "#ffffff",
+        "borderStyle": "white",
+        "list": [
+            {
+                "pagePath": "pages/index/home",
+                "iconPath": "static/icon/tabbar/home.png",
+                "selectedIconPath": "static/icon/tabbar/home2.png"
+            },
+            {
+                "pagePath": "pages/index/category",
+                "iconPath": "static/icon/tabbar/category.png",
+                "selectedIconPath": "static/icon/tabbar/category2.png"
+            },
+            {
+                "pagePath": "pages/index/shopping-cart",
+                "iconPath": "static/icon/tabbar/shopping-cart.png",
+                "selectedIconPath": "static/icon/tabbar/shopping-cart2.png"
+            },
+            {
+                "pagePath": "pages/index/my",
+                "iconPath": "static/icon/tabbar/my.png",
+                "selectedIconPath": "static/icon/tabbar/my2.png"
+            }
+        ]
+    }
+}
\ No newline at end of file
diff --git a/pages/goods/comment.vue b/pages/goods/comment.vue
new file mode 100644
index 0000000..8369a57
--- /dev/null
+++ b/pages/goods/comment.vue
@@ -0,0 +1,57 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<view class="list">
+				<view class="item" v-for="item in list">
+					<comment-item :item="item" />
+				</view>
+
+				<cl-empty text="暂无评论" icon="message" v-if="isEmpty(list)" />
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onMounted } from "vue";
+import { useCool, usePager } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import CommentItem from "./components/comment-item.vue";
+
+const { service, router } = useCool();
+const { list, onRefresh } = usePager<Eps.GoodsCommentEntity>();
+
+function refresh(params?: any) {
+	const { next, data } = onRefresh(params);
+	next(service.goods.comment.page(data));
+}
+
+onMounted(() => {
+	refresh({
+		goodsId: router.query.goodsId,
+	});
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.list {
+		.item {
+			background-color: #fff;
+			padding: 24rpx;
+			border-radius: 24rpx;
+			margin-bottom: 24rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/goods/components/comment-item.vue b/pages/goods/components/comment-item.vue
new file mode 100644
index 0000000..cee703d
--- /dev/null
+++ b/pages/goods/components/comment-item.vue
@@ -0,0 +1,81 @@
+<template>
+	<view class="comment-item">
+		<view class="inner">
+			<view class="user">
+				<cl-avatar :size="70" :src="item.avatarUrl" />
+
+				<cl-row :margin="[4, 0, 0, 20]">
+					<cl-text :size="24" block :margin="[0, 0, 4, 0]">{{ item.nickName }}</cl-text>
+					<cl-rate disabled :size="24" v-model="item.starCount" />
+				</cl-row>
+			</view>
+
+			<cl-text
+				:ellipsis="demo ? 2 : undefined"
+				block
+				:line-height="1.5"
+				:margin="[20, 0, 0, 0]"
+				>{{ item.content }}</cl-text
+			>
+		</view>
+
+		<view class="pics" v-if="!isEmpty(item.pics)">
+			<cl-image
+				:size="120"
+				:src="resizeImage(item.pics[0], 120)"
+				:preview-list="item.pics"
+				:radius="12"
+			/>
+			<text class="num" v-if="1 || item.pics.length > 1">+{{ item.pics.length }}</text>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { type PropType } from "vue";
+import { isEmpty } from "lodash-es";
+import { useUpload } from "/@/cool";
+
+defineProps({
+	item: {
+		type: Object as PropType<Eps.GoodsCommentEntity>,
+		default: () => ({}),
+	},
+	demo: Boolean,
+});
+
+const { resizeImage } = useUpload();
+</script>
+
+<style lang="scss" scoped>
+.comment-item {
+	display: flex;
+
+	.inner {
+		flex: 1;
+
+		.user {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	.pics {
+		position: relative;
+		margin-left: 24rpx;
+
+		.num {
+			position: absolute;
+			top: 84rpx;
+			right: 10rpx;
+			font-size: 20rpx;
+			background-color: rgba(0, 0, 0, 0.6);
+			color: #fff;
+			padding: 4rpx;
+			border-radius: 6rpx;
+			letter-spacing: 1rpx;
+			line-height: 1;
+		}
+	}
+}
+</style>
diff --git a/pages/goods/components/filter-bar.vue b/pages/goods/components/filter-bar.vue
new file mode 100644
index 0000000..1b7bbd7
--- /dev/null
+++ b/pages/goods/components/filter-bar.vue
@@ -0,0 +1,350 @@
+<template>
+	<view class="filter-bar">
+		<cl-filter-bar v-model="flt.form" @change="flt.onChange">
+			<cl-filter-item label="综合" prop="score" type="switch" />
+			<cl-filter-item label="销量" prop="sold" type="order" />
+			<cl-filter-item label="价格" prop="price" type="order" />
+
+			<view class="cl-filter-item" @tap="adv.open">
+				<text>筛选</text>
+				<cl-icon class-name="shop-icon-filter" :size="36" />
+			</view>
+		</cl-filter-bar>
+	</view>
+
+	<!-- 侧边筛选 -->
+	<cl-popup v-model="adv.visible" direction="right" :size="600" :padding="0">
+		<view class="filter-adv">
+			<!-- 筛选内容 -->
+			<scroll-view scroll-y class="filter-adv__container">
+				<view class="filter-adv__list">
+					<!-- 价格 -->
+					<view class="filter-adv__item">
+						<text class="label">价格区间</text>
+
+						<cl-row type="flex" justify="space-between">
+							<cl-input
+								v-model="adv.form.minPrice"
+								placeholder="最低价"
+								type="number"
+								round
+								align="center"
+								@confirm="toSearch"
+							/>
+
+							<cl-icon name="minus" :margin="[0, 20, 0, 20]" />
+
+							<cl-input
+								v-model="adv.form.maxPrice"
+								placeholder="最高价"
+								type="number"
+								round
+								align="center"
+								@confirm="toSearch"
+							/>
+						</cl-row>
+					</view>
+
+					<!-- 分类 -->
+					<view class="filter-adv__item">
+						<cl-loading-mask :loading="type.loading">
+							<view class="category">
+								<!-- 一级 -->
+								<template v-for="m1 in type.list">
+									<view class="m1" :key="m1.id" v-if="m1.children">
+										<text class="label">
+											{{ m1.name }}
+										</text>
+
+										<view class="m1-list">
+											<!-- 二级 -->
+											<view
+												class="m2"
+												v-for="m2 in m1.children"
+												:key="m2.id"
+												:class="{
+													'is-active': adv.form.typeId.includes(m2.id!),
+												}"
+												@tap="type.select(m2)"
+											>
+												{{ m2.name }}
+											</view>
+										</view>
+									</view>
+								</template>
+							</view>
+						</cl-loading-mask>
+					</view>
+				</view>
+			</scroll-view>
+
+			<!-- 操作按钮 -->
+			<view class="filter-adv__footer">
+				<view class="inner">
+					<button class="reset" @tap="adv.reset">重置</button>
+					<button class="confirm" @tap="adv.confirm">确定</button>
+				</view>
+			</view>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts" setup>
+import { cloneDeep, isEmpty } from "lodash-es";
+import { useCool } from "/@/cool";
+import { deepTree } from "/@/cool/utils";
+import { onMounted, reactive } from "vue";
+
+interface Type extends Eps.GoodsTypeEntity {
+	children?: Eps.GoodsTypeEntity[];
+}
+
+const emit = defineEmits(["search"]);
+
+const { service, router } = useCool();
+
+// 高级搜索
+const adv = reactive({
+	visible: false,
+
+	form: {
+		minPrice: "",
+		maxPrice: "",
+		typeId: [] as number[],
+	},
+	_form: null as any,
+
+	open() {
+		adv.visible = true;
+
+		// 默认表单
+		if (!adv._form) {
+			adv._form = cloneDeep(adv.form);
+		}
+
+		// 获取分类
+		type.refresh();
+	},
+
+	close() {
+		adv.visible = false;
+	},
+
+	reset() {
+		adv.form = cloneDeep(adv._form);
+		adv.confirm();
+	},
+
+	confirm() {
+		adv.close();
+		toSearch();
+	},
+});
+
+// 过滤栏
+const flt = reactive({
+	form: {
+		sold: "",
+		price: "desc",
+		score: false,
+	},
+
+	onChange({ prop, value }: { prop: "sold" | "price" | "score"; value: never }) {
+		flt.form.sold = "";
+		flt.form.price = "";
+		flt.form.score = false;
+		flt.form[prop] = value;
+
+		switch (prop) {
+			case "score":
+				toSearch({
+					order: undefined,
+					sort: undefined,
+				});
+				break;
+
+			case "price":
+			case "sold":
+				toSearch({
+					order: value ? prop : undefined,
+					sort: value || undefined,
+				});
+				break;
+		}
+	},
+});
+
+// 商品分类
+const type = reactive({
+	list: [] as Type[],
+	loading: false,
+
+	async refresh() {
+		type.loading = true;
+
+		await service.goods.type.list().then((res) => {
+			type.list = deepTree(res);
+		});
+
+		type.loading = false;
+	},
+
+	select(item: Type) {
+		const i = adv.form.typeId.indexOf(item.id!);
+
+		if (i >= 0) {
+			adv.form.typeId.splice(i, 1);
+		} else {
+			adv.form.typeId.push(item.id!);
+		}
+	},
+});
+
+// 搜索
+function toSearch(params?: any) {
+	const { minPrice, maxPrice, typeId } = adv.form;
+
+	const data = {
+		page: 1,
+		minPrice: minPrice === "" ? undefined : minPrice,
+		maxPrice: maxPrice === "" ? undefined : maxPrice,
+		typeId: isEmpty(typeId) ? undefined : typeId,
+		...params,
+	};
+
+	emit("search", data);
+}
+
+onMounted(() => {
+	const { typeId } = router.query;
+
+	if (typeId) {
+		adv.form.typeId = typeId.split(",").map(Number);
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.filter-adv {
+	background-color: $cl-color-bg;
+	height: 100%;
+
+	&__container {
+		height: calc(100% - 100rpx);
+	}
+
+	&__list {
+		padding: 24rpx;
+	}
+
+	&__item {
+		background-color: #fff;
+		margin-bottom: 24rpx;
+		padding: 24rpx;
+		border-radius: 24rpx;
+
+		.label {
+			display: block;
+			font-size: 26rpx;
+			margin-bottom: 24rpx;
+			line-height: 1;
+		}
+
+		.category {
+			min-height: 200rpx;
+
+			.m1 {
+				margin-bottom: 30rpx;
+
+				&-name {
+					display: flex;
+					align-items: center;
+					height: 80rpx;
+					font-size: 28rpx;
+				}
+
+				&-list {
+					width: 100%;
+					line-height: normal;
+					border: 2rpx solid #f7f7f7;
+					padding: 5rpx 20rpx;
+					box-sizing: border-box;
+					border-radius: 24rpx;
+				}
+
+				&:last-child {
+					margin-bottom: 0;
+				}
+
+				.m2 {
+					display: inline-flex;
+					justify-content: center;
+					align-items: center;
+					border-radius: 10rpx;
+					margin: 10rpx 20rpx 10rpx 0;
+					padding: 0 25rpx;
+					font-size: 22rpx;
+					height: 50rpx;
+					text-align: center;
+					border-radius: 50rpx;
+					color: #444;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					border: 2rpx solid #f7f7f7;
+					background-color: #f7f7f7;
+
+					&.is-active {
+						color: $cl-color-primary;
+						border-color: $cl-color-primary;
+						background-color: rgba($cl-color-primary, 0.1);
+					}
+				}
+			}
+		}
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100rpx;
+		padding: 0 30rpx;
+		background-color: #fff;
+
+		.inner {
+			display: inline-flex;
+			border: 2rpx solid $cl-color-primary;
+			background-color: $cl-color-primary;
+			border-radius: 80rpx;
+			overflow: hidden;
+			flex: 1;
+
+			button {
+				height: 64rpx;
+				line-height: 64rpx;
+				padding: 0;
+				margin: 0;
+				font-size: 28rpx;
+				flex: 1;
+				background-color: transparent;
+				color: #fff;
+
+				&::after {
+					border: 0;
+				}
+
+				&.reset {
+					color: $cl-color-primary;
+					background-color: #fff;
+					border-radius: 80rpx 0 80rpx 80rpx;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/goods/components/goods-comment.vue b/pages/goods/components/goods-comment.vue
new file mode 100644
index 0000000..2316d97
--- /dev/null
+++ b/pages/goods/components/goods-comment.vue
@@ -0,0 +1,90 @@
+<template>
+	<view class="goods-comment">
+		<cl-row type="flex" justify="space-between" :height="90">
+			<cl-text :size="28" bold :value="`商品评论（${total}）`"></cl-text>
+
+			<cl-text :size="24" color="info" @tap="toAll">
+				全部
+				<text class="cl-icon-arrow-right"></text>
+			</cl-text>
+		</cl-row>
+
+		<view class="list">
+			<view class="item" v-for="item in list" :key="item.id" @tap="toAll">
+				<comment-item :item="item" demo />
+			</view>
+
+			<cl-empty
+				text="暂无评论"
+				icon="message"
+				:icon-size="200"
+				:fixed="false"
+				:padding="[30, 0, 130, 0]"
+				v-if="isEmpty(list)"
+			/>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref, type PropType } from "vue";
+import { useCool } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import CommentItem from "./comment-item.vue";
+
+const props = defineProps({
+	info: Object as PropType<Eps.GoodsInfoEntity>,
+});
+
+const { service, router } = useCool();
+
+const list = ref<Eps.GoodsCommentEntity[]>([]);
+const total = ref(0);
+
+function refresh() {
+	service.goods.comment
+		.page({
+			goodsId: router.query.id,
+			page: 1,
+			size: 2,
+			order: "createTime",
+			sort: "desc",
+		})
+		.then((res) => {
+			list.value = res.list;
+			total.value = res.pagination.total || 0;
+		});
+}
+
+function toAll() {
+	router.push({
+		path: "/pages/goods/comment",
+		query: {
+			goodsId: router.query.id,
+		},
+	});
+}
+
+onMounted(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.goods-comment {
+	position: relative;
+	background-color: #fff;
+	padding: 0 30rpx 24rpx 30rpx;
+	margin-bottom: 24rpx;
+
+	.list {
+		.item {
+			margin-bottom: 24rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/goods/components/goods-detail.vue b/pages/goods/components/goods-detail.vue
new file mode 100644
index 0000000..e98977b
--- /dev/null
+++ b/pages/goods/components/goods-detail.vue
@@ -0,0 +1,36 @@
+<template>
+	<view class="goods-detail">
+		<cl-row type="flex" :height="90" :padding="[0, 30, 0, 30]">
+			<cl-text :size="28" bold value="商品详情"></cl-text>
+		</cl-row>
+
+		<view class="mp-html" v-if="info?.content">
+			<mp-html :content="info?.content"></mp-html>
+		</view>
+
+		<cl-empty
+			icon="comm"
+			text="暂无描述"
+			:icon-size="200"
+			:fixed="false"
+			:padding="[30, 0, 130, 0]"
+			v-else
+		/>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { type PropType } from "vue";
+
+defineProps({
+	info: Object as PropType<Eps.GoodsInfoEntity>,
+});
+</script>
+
+<style lang="scss" scoped>
+.goods-detail {
+	position: relative;
+	background-color: #fff;
+	margin-bottom: 24rpx;
+}
+</style>
diff --git a/pages/goods/components/goods-info.vue b/pages/goods/components/goods-info.vue
new file mode 100644
index 0000000..01bcc35
--- /dev/null
+++ b/pages/goods/components/goods-info.vue
@@ -0,0 +1,158 @@
+<template>
+	<view class="goods-info">
+		<view class="banner">
+			<swiper class="cl-banner" indicator-dots>
+				<swiper-item v-for="(item, index) in banner" :key="index">
+					<image class="cl-banner-item__image" mode="aspectFill" :src="item" />
+				</swiper-item>
+			</swiper>
+		</view>
+
+		<view class="content">
+			<!-- 售价 -->
+			<cl-row type="flex" justify="space-between" :padding="[20, 0, 20, 0]">
+				<cl-skeleton
+					:height="54"
+					:loading="!info"
+					:loading-style="{
+						width: '200rpx',
+					}"
+				>
+					<cl-text
+						type="price"
+						bold
+						color="error"
+						:size="50"
+						:value="spec.info?.price || info?.price"
+					/>
+				</cl-skeleton>
+
+				<cl-skeleton
+					:loading-style="{
+						height: '38rpx',
+						width: '90rpx',
+						borderRadius: '38rpx',
+					}"
+					:loading="!info"
+				>
+					<cl-tag round size="small">已售 {{ info?.sold || 0 }}</cl-tag>
+				</cl-skeleton>
+			</cl-row>
+
+			<!-- 优惠券 -->
+			<cl-row :margin="[0, 0, 20, 0]">
+				<coupon-get />
+			</cl-row>
+
+			<!-- 标题 -->
+			<cl-skeleton
+				:margin="[0, 0, 20, 0]"
+				:loading-style="{
+					height: '48rpx',
+				}"
+				:loading="!info"
+			>
+				<cl-text bold block :line-height="1.5" :size="32">
+					{{ info?.title }} {{ spec.info?.name }}
+				</cl-text>
+			</cl-skeleton>
+
+			<!-- 其他 -->
+			<view class="menu">
+				<!-- 规格 -->
+				<view
+					class="item"
+					@tap="
+						spec.open({
+							action: 'select',
+							goods: info!,
+						})
+					"
+				>
+					<cl-icon class-name="shop-icon-sku" :size="52" :margin="[0, 10, 0, 0]" />
+					<cl-text :ellipsis="1">
+						{{ spec.text }}
+					</cl-text>
+
+					<text
+						class="cl-icon-close-border"
+						@tap.stop="spec.clear"
+						v-if="!!spec.info"
+					></text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType } from "vue";
+import { useUpload } from "/@/cool";
+import { useSpec } from "/@/hooks";
+import { isEmpty } from "lodash-es";
+import CouponGet from "/@/components/coupon/get.vue";
+
+const props = defineProps({
+	info: Object as PropType<Eps.GoodsInfoEntity>,
+});
+
+const { resizeImage } = useUpload();
+const spec = useSpec();
+
+// 轮播图列表
+const banner = computed(() => {
+	// 规格图
+	if (!isEmpty(spec.info?.images)) {
+		return spec.info?.images;
+	}
+
+	// 商品示例图
+	if (!isEmpty(props.info?.pics)) {
+		return props.info?.pics;
+	}
+
+	// 主图
+	return [props.info?.mainPic];
+});
+</script>
+
+<style lang="scss" scoped>
+.goods-info {
+	margin-bottom: 24rpx;
+
+	.banner {
+		.cl-banner {
+			height: 760rpx;
+
+			.cl-banner-item__image {
+				border-radius: 0;
+			}
+		}
+	}
+
+	.content {
+		padding: 10rpx 30rpx;
+		background-color: #fff;
+
+		.menu {
+			.item {
+				display: flex;
+				align-items: center;
+				height: 80rpx;
+				background-color: $cl-color-bg;
+				padding: 0 16rpx;
+				border-radius: 12rpx;
+				margin-bottom: 20rpx;
+				padding-right: 60rpx;
+				position: relative;
+
+				.cl-icon-close-border {
+					position: absolute;
+					right: 20rpx;
+					color: $cl-color-info;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/goods/detail.vue b/pages/goods/detail.vue
new file mode 100644
index 0000000..d2bdcf1
--- /dev/null
+++ b/pages/goods/detail.vue
@@ -0,0 +1,250 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<cl-sticky>
+				<cl-topbar :border="false">
+					<cl-tabs
+						v-model="tabs.active"
+						:list="tabs.list"
+						justify="center"
+						un-color="#777"
+						@change="tabs.onChange"
+						v-if="tabs.scrollTop >= 200"
+					/>
+
+					<view class="cl-topbar__text" v-else>
+						<text class="cl-topbar__title">商品详情</text>
+					</view>
+				</cl-topbar>
+			</cl-sticky>
+
+			<!-- 商品信息 -->
+			<goods-info :info="info" />
+
+			<!-- 商品评论 -->
+			<goods-comment :info="info" />
+
+			<!-- 商品详情 -->
+			<goods-detail :info="info" />
+
+			<!-- 商品规格 -->
+			<goods-spec :ref="setRefs('goodsSpec')" />
+
+			<cl-footer border :flex="false" :padding="0">
+				<view class="footer">
+					<view class="icons">
+						<view class="item" @tap="toCs">
+							<cl-icon
+								class-name="shop-icon-message"
+								:size="56"
+								:margin="[0, 0, 8, 0]"
+							/>
+							<cl-text :size="22" value="客服" />
+						</view>
+
+						<view class="item" @tap="router.push('/pages/index/shopping-cart')">
+							<cl-badge :value="spCart.num" :margin="[10, 6, 0, 0]">
+								<cl-icon
+									class-name="shop-icon-q-order"
+									:size="56"
+									:margin="[0, 0, 8, 0]"
+								/>
+							</cl-badge>
+							<cl-text :size="22" value="购物车" />
+						</view>
+					</view>
+
+					<cl-button :disabled="!info" @tap="openSpec('spCart')">加入购物车</cl-button>
+					<cl-button :disabled="!info" type="primary" @tap="openSpec('buy')"
+						>立即购买</cl-button
+					>
+				</view>
+			</cl-footer>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { useCool } from "/@/cool";
+import { onPageScroll, onReady } from "@dcloudio/uni-app";
+import { last } from "lodash-es";
+import { useShoppingCart, useSpec } from "/@/hooks";
+import GoodsInfo from "./components/goods-info.vue";
+import GoodsComment from "./components/goods-comment.vue";
+import GoodsDetail from "./components/goods-detail.vue";
+import GoodsSpec from "/@/components/goods/spec.vue";
+
+const { service, router, refs, setRefs } = useCool();
+const spec = useSpec();
+const spCart = useShoppingCart();
+const { statusBarHeight = 0 } = uni.getSystemInfoSync();
+
+// 顶部选项栏
+const tabs = reactive({
+	scrollTop: 0,
+	active: "info",
+
+	list: [
+		{
+			label: "信息",
+			value: "info",
+			top: 0,
+		},
+		{
+			label: "评论",
+			value: "comment",
+			top: 0,
+		},
+		{
+			label: "详情",
+			value: "detail",
+			top: 0,
+		},
+	],
+
+	getSelector(name: string) {
+		let selector = `.goods-${name}`;
+
+		// #ifdef MP
+		selector = ".page >>> " + selector;
+		// #endif
+
+		return selector;
+	},
+
+	async getTop() {
+		return Promise.all(
+			tabs.list.map((e) => {
+				return new Promise((resolve) => {
+					uni.createSelectorQuery()
+						.select(tabs.getSelector(e.value))
+						.boundingClientRect((res) => {
+							e.top = res.top || 0 - 44;
+							resolve(true);
+						})
+						.exec();
+				});
+			}),
+		);
+	},
+
+	lock: null as any,
+
+	async onScroll(top: number) {
+		tabs.scrollTop = top;
+
+		if (!tabs.lock) {
+			if (!last(tabs.list)?.top) {
+				await tabs.getTop();
+			}
+
+			const d = last(tabs.list.filter((e) => top + 44 >= e.top));
+
+			if (d) {
+				tabs.active = d.value;
+			}
+		}
+	},
+
+	onChange(name: string) {
+		if (tabs.lock) {
+			clearTimeout(tabs.lock);
+		}
+
+		uni.createSelectorQuery()
+			.select(tabs.getSelector(name))
+			.boundingClientRect((res) => {
+				uni.pageScrollTo({
+					scrollTop: (res.top || 0) - statusBarHeight - 44 + tabs.scrollTop,
+					duration: 200,
+				});
+
+				tabs.lock = setTimeout(() => {
+					tabs.lock = null;
+				}, 500);
+			})
+			.exec();
+	},
+});
+
+// 商品详情
+const info = ref<Eps.GoodsInfoEntity>();
+
+// 获取详情
+async function refresh() {
+	await service.goods.info
+		.info({
+			id: router.query.id,
+		})
+		.then((res) => {
+			info.value = res;
+		});
+}
+
+// 联系客服
+function toCs() {
+	router.push({
+		path: "/uni_modules/cool-cs/pages/chat",
+		query: {
+			goodsId: info.value?.id,
+		},
+	});
+}
+
+// 打开规格
+function openSpec(action: any) {
+	spec.open({
+		action,
+		goods: info.value!,
+	});
+}
+
+onReady(async () => {
+	const { id, specId } = router.query || {};
+
+	// 清空规格信息
+	spec.clear();
+
+	// 获取商品信息
+	await refresh();
+
+	// 当带入指定规格参数 specId 时
+	if (specId) {
+		// 设置规格
+		spec.setId(specId);
+
+		// 获取列表
+		refs.goodsSpec.refresh({
+			goodsId: id,
+		});
+	}
+});
+
+onPageScroll((e) => {
+	tabs.onScroll(e.scrollTop);
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	.footer {
+		display: flex;
+		align-items: center;
+		padding: 24rpx 24rpx 24rpx 0;
+
+		.icons {
+			display: flex;
+			flex: 1;
+
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				width: 120rpx;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/goods/list.vue b/pages/goods/list.vue
new file mode 100644
index 0000000..8d0dd16
--- /dev/null
+++ b/pages/goods/list.vue
@@ -0,0 +1,84 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<cl-sticky>
+				<!-- 搜索栏 -->
+				<cl-topbar :border="false" :show-back="false" :ref="setRefs('topbar')" with-mp>
+					<cl-search
+						v-model="keyWord"
+						placeholder="搜索商品名称"
+						@search="refresh({ page: 1 })"
+					>
+						<template #prepend>
+							<cl-icon name="arrow-left" size="22px" @tap="refs.topbar?.back" />
+						</template>
+					</cl-search>
+				</cl-topbar>
+
+				<!-- 筛选栏 -->
+				<filter-bar @search="refresh" />
+			</cl-sticky>
+
+			<!-- 商品列表 -->
+			<view class="list">
+				<cl-waterfall :ref="setRefs('list')" :column="2">
+					<template #default="{ list }">
+						<cl-waterfall-column v-for="(columns, index) in list" :key="index">
+							<goods-item :item="item" v-for="item in columns" :key="item.id" />
+						</cl-waterfall-column>
+					</template>
+				</cl-waterfall>
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { onReady } from "@dcloudio/uni-app";
+import { useCool, usePager } from "/@/cool";
+import GoodsItem from "/@/components/goods/item.vue";
+import FilterBar from "./components/filter-bar.vue";
+
+const { router, service, refs, setRefs } = useCool();
+const { onRefresh, onData } = usePager();
+
+const keyWord = ref("");
+
+// 获取列表
+function refresh(params?: any) {
+	const { data, next } = onRefresh(params);
+
+	onData((list) => {
+		if (data.page == 1) {
+			refs.list.refresh(list);
+		} else {
+			refs.list.append(list);
+		}
+	});
+
+	return next(
+		service.goods.info.page({
+			...data,
+			keyWord: keyWord.value,
+		}),
+	);
+}
+
+onReady(() => {
+	keyWord.value = router.query.keyWord || "";
+	refresh({ order: "sortNum", sort: "desc", ...router.query });
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	.list {
+		padding: 24rpx 14rpx;
+	}
+}
+</style>
diff --git a/pages/goods/search.vue b/pages/goods/search.vue
new file mode 100644
index 0000000..c697192
--- /dev/null
+++ b/pages/goods/search.vue
@@ -0,0 +1,164 @@
+<template>
+	<cl-page status-bar-background="transparent">
+		<cl-topbar
+			background-color="transparent"
+			:border="false"
+			:show-back="false"
+			:ref="setRefs('topbar')"
+			with-mp
+		>
+			<cl-search v-model="keyWord" placeholder="搜索商品名称" @search="toSearch(keyWord)">
+				<template #prepend>
+					<cl-icon name="arrow-left" size="22px" @tap="refs.topbar?.back" />
+				</template>
+			</cl-search>
+		</cl-topbar>
+
+		<view class="page">
+			<view class="history">
+				<view class="head">
+					<text class="label">搜索历史</text>
+					<cl-icon class-name="shop-icon-delete" :size="36" @tap="history.clear()" />
+				</view>
+
+				<view class="list">
+					<text
+						class="item"
+						v-for="(item, index) in history.list"
+						:key="index"
+						@tap="toSearch(item)"
+					>
+						{{ item }}
+					</text>
+
+					<text class="item" v-if="isEmpty(history.list)">无</text>
+				</view>
+			</view>
+
+			<view class="search">
+				<view class="head">
+					<text class="label">搜索发现</text>
+				</view>
+
+				<view class="list">
+					<text
+						class="item"
+						v-for="(item, index) in recommend.list"
+						:key="index"
+						@tap="toSearch(item.name!)"
+					>
+						{{ item.name }}
+					</text>
+				</view>
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { storage, useCool } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import { onReady } from "@dcloudio/uni-app";
+import { useUi } from "/$/cool-ui";
+
+const { router, service, refs, setRefs } = useCool();
+const ui = useUi();
+
+// 搜索关键字
+const keyWord = ref("");
+
+// 搜索历史
+const history = reactive({
+	list: (storage.get("search.history") || []) as string[],
+
+	add() {
+		if (!keyWord.value || history.list.includes(keyWord.value)) {
+			return false;
+		}
+
+		history.list.push(keyWord.value);
+		history.update();
+	},
+
+	clear() {
+		ui.showConfirm({
+			title: "提示",
+			message: "确定要清空搜索历史吗？",
+			callback(action) {
+				if (action == "confirm") {
+					history.list = [];
+					history.update();
+				}
+			},
+		});
+	},
+
+	update() {
+		storage.set("search.history", history.list);
+	},
+});
+
+// 推荐
+const recommend = reactive({
+	list: [] as Eps.GoodsSearchKeywordEntity[],
+
+	get() {
+		service.goods.searchKeyword.list().then((res) => {
+			recommend.list = res;
+		});
+	},
+});
+
+// 搜索
+function toSearch(val: string) {
+	history.add();
+
+	router.push({
+		path: "/pages/goods/list",
+		query: {
+			keyWord: val,
+		},
+	});
+}
+
+onReady(() => {
+	recommend.get();
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	.history,
+	.search {
+		padding: 0 24rpx;
+		margin-bottom: 24rpx;
+
+		.head {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			height: 80rpx;
+
+			.label {
+				display: inline-block;
+				font-size: 28rpx;
+				font-weight: bold;
+			}
+		}
+
+		.list {
+			.item {
+				display: inline-flex;
+				align-items: center;
+				height: 46rpx;
+				padding: 0 24rpx;
+				margin: 0 24rpx 24rpx 0;
+				font-size: 24rpx;
+				border-radius: 40rpx;
+				background-color: #fff;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/index/category.vue b/pages/index/category.vue
new file mode 100644
index 0000000..02f2891
--- /dev/null
+++ b/pages/index/category.vue
@@ -0,0 +1,243 @@
+<template>
+	<cl-page background-color="#fff" fullscreen>
+		<view class="page-category">
+			<view class="menu-a">
+				<scroll-view class="scroller" scroll-y>
+					<view class="list">
+						<view
+							class="item"
+							v-for="(item, index) in list"
+							:key="index"
+							:class="{
+								'is-active': index == active,
+								'is-prev': index == active - 1,
+								'is-next': index == active + 1,
+							}"
+							@tap="toView(index)"
+						>
+							{{ item.name }}
+						</view>
+
+						<view class="flex1"></view>
+					</view>
+				</scroll-view>
+			</view>
+
+			<view class="menu-b">
+				<scroll-view
+					class="scroller"
+					scroll-y
+					:scroll-into-view="view"
+					scroll-with-animation
+					enable-back-to-top
+					@scroll="onScroll"
+				>
+					<view
+						class="group"
+						v-for="(group, index) in list"
+						:key="group.id"
+						:id="`group-${index}`"
+					>
+						<view class="label">
+							<cl-divider background-color="#ffffff">{{ group.name }}</cl-divider>
+						</view>
+
+						<view class="list">
+							<cl-row>
+								<cl-col :span="8" v-for="item in group.children" :key="item.id">
+									<view class="item" @tap="toSearch(item)">
+										<cl-image
+											mode="aspectFit"
+											:size="120"
+											:radius="24"
+											:src="resizeImage(item.pic, 200)"
+											:margin="[0, 0, 20, 0]"
+										/>
+										<cl-text :size="24" :ellipsis="1" :value="item.name" />
+									</view>
+								</cl-col>
+							</cl-row>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+		</view>
+
+		<tabbar />
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import Tabbar from "./components/tabbar.vue";
+import { useCool, useUpload } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+import { deepTree } from "/@/cool/utils";
+import { ref } from "vue";
+import { onPullDownRefresh, onReady } from "@dcloudio/uni-app";
+
+const { service, router } = useCool();
+const { resizeImage } = useUpload();
+const ui = useUi();
+
+const list = ref<Eps.GoodsTypeEntity[]>();
+const view = ref("");
+const active = ref(0);
+
+// 获取分类
+async function refresh() {
+	ui.showLoading();
+
+	await service.goods.type.list().then((res) => {
+		list.value = deepTree(res);
+
+		list.value.reduce((a, b) => {
+			b.top = uni.upx2px(Math.ceil((b.children || []).length / 3) * 224 + 80) + a;
+			return b.top;
+		}, 0);
+	});
+
+	ui.hideLoading();
+}
+
+// 滚动时的锁
+let lock: any;
+function clearLock() {
+	if (lock) {
+		clearTimeout(lock);
+		lock = null;
+	}
+}
+
+// 监听滚动
+function onScroll(e: { detail: { scrollTop: number } }) {
+	if (!lock) {
+		list.value?.find((a, i) => {
+			if (a.top >= e.detail.scrollTop) {
+				active.value = i;
+				return true;
+			}
+		});
+	}
+}
+
+// 滚动到指定分类
+function toView(index: number) {
+	clearLock();
+
+	active.value = index;
+	view.value = `group-${index}`;
+
+	lock = setTimeout(() => {
+		clearLock();
+	}, 500);
+}
+
+// 搜索
+function toSearch(item: Eps.GoodsTypeEntity) {
+	router.push({
+		path: "/pages/goods/list",
+		query: {
+			typeId: item.id,
+		},
+	});
+}
+
+onPullDownRefresh(async () => {
+	await refresh();
+	uni.stopPullDownRefresh();
+});
+
+onReady(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.page-category {
+	display: flex;
+	height: calc(100% - 120rpx);
+
+	.scroller {
+		height: 100%;
+	}
+
+	.menu-a {
+		width: 180rpx;
+		flex-shrink: 0;
+		overflow: hidden;
+		border-radius: 0 24rpx 0 0;
+
+		.list {
+			display: flex;
+			flex-direction: column;
+			height: 100%;
+
+			.flex1 {
+				background-color: #f7f7f7;
+				flex: 1;
+			}
+		}
+
+		.item {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+			padding: 30rpx 0;
+			font-size: 26rpx;
+			position: relative;
+			color: $cl-color-placeholder;
+			background-color: #f7f7f7;
+
+			&.is-active {
+				background-color: #fff;
+				color: $cl-color-primary;
+				font-weight: 500;
+
+				&::after {
+					content: "";
+					height: 34rpx;
+					width: 6rpx;
+					background-color: currentColor;
+					border-radius: 10rpx;
+					position: absolute;
+					left: 0;
+					top: calc(50% - 17rpx);
+				}
+
+				& + .flex1 {
+					border-top-right-radius: 24rpx;
+				}
+			}
+
+			&.is-prev {
+				border-bottom-right-radius: 24rpx;
+			}
+
+			&.is-next {
+				border-top-right-radius: 24rpx;
+			}
+		}
+	}
+
+	.menu-b {
+		flex: 1;
+
+		.group {
+			.label {
+				padding: 0 30rpx;
+			}
+
+			.list {
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					padding: 10rpx;
+					margin-bottom: 40rpx;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/index/components/banner.vue b/pages/index/components/banner.vue
new file mode 100644
index 0000000..601eb71
--- /dev/null
+++ b/pages/index/components/banner.vue
@@ -0,0 +1,57 @@
+<template>
+	<view class="banner">
+		<cl-banner :list="list" type="card" :height="300" @select="toPath">
+			<template #item="{ item }">
+				<cl-skeleton
+					height="100%"
+					:loading="!item.pic"
+					:loading-style="{
+						borderRadius: '24rpx',
+					}"
+				>
+					<image mode="aspectFill" :src="item.pic" />
+				</cl-skeleton>
+			</template>
+		</cl-banner>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { onShow } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { useCool } from "/@/cool";
+
+const { service, router } = useCool();
+
+const list = ref<Eps.InfoBannerEntity[]>([{}, {}, {}]);
+
+function refresh() {
+	service.info.banner.list({ order: "sortNum", sort: "desc" }).then((res) => {
+		list.value = res;
+	});
+}
+
+function toPath(index: number) {
+	const { path } = list.value[index];
+
+	if (path) {
+		router.push(path);
+	}
+}
+
+onShow(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.banner {
+	margin: 32rpx 0;
+
+	image {
+		height: 100%;
+		width: 100%;
+		border-radius: 24rpx;
+	}
+}
+</style>
diff --git a/pages/index/components/coupon-activity.vue b/pages/index/components/coupon-activity.vue
new file mode 100644
index 0000000..20e3ec8
--- /dev/null
+++ b/pages/index/components/coupon-activity.vue
@@ -0,0 +1,179 @@
+<template>
+	<view class="coupon-activity" @tap="toGet" v-if="info">
+		<view class="a">
+			<view class="text">
+				<text class="name">{{ info?.title }}</text>
+				<text class="desc">{{ info?.description }}</text>
+			</view>
+
+			<text class="tag" v-if="info">点击领券</text>
+		</view>
+
+		<view class="b">
+			<template v-if="info">
+				<text class="amount">{{ info?.amount || 0 }}</text>
+				<text class="doc">
+					{{ doc }}
+				</text>
+			</template>
+		</view>
+
+		<view class="c"></view>
+
+		<text class="d">* 更多精选，尽在酷卖！</text>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { onShow } from "@dcloudio/uni-app";
+import { computed, ref } from "vue";
+import { useCool } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+
+const { service } = useCool();
+const ui = useUi();
+
+// 优惠券信息
+const info = ref<CouponInfo>();
+
+// 使用说明
+const doc = computed(() => {
+	const { type, condition } = info.value || {};
+
+	switch (type) {
+		case 0:
+			return `满${condition?.fullAmount}可用`;
+	}
+});
+
+// 获取优惠券
+function refresh() {
+	service.market.coupon.info
+		.page({ size: 1, page: 1, order: "createTime", sort: "asc" })
+		.then((res) => {
+			info.value = res.list[0];
+			info.value.amount = Math.floor(info.value.amount!);
+		});
+}
+
+// 领取
+function toGet() {
+	service.market.coupon.user
+		.receive({
+			couponId: info.value?.id,
+		})
+		.then(() => {
+			ui.showToast("领取成功");
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+		});
+}
+
+onShow(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.coupon-activity {
+	display: flex;
+	position: relative;
+	height: 160rpx;
+	letter-spacing: 1rpx;
+	margin: 50rpx 0 100rpx 0;
+
+	.a {
+		background: linear-gradient(140deg, rgba(#2b2e3d, 0.7), #2b2e3d 60%);
+		height: 140rpx;
+		width: calc(100% - 250rpx);
+		border-radius: 12rpx;
+		position: absolute;
+		left: 24rpx;
+		bottom: 1rpx;
+		z-index: 2;
+		color: #fff;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 24rpx;
+		box-sizing: border-box;
+
+		.name {
+			display: block;
+			font-size: 28rpx;
+			font-weight: 500;
+		}
+
+		.desc {
+			font-size: 20rpx;
+			color: #ccc;
+		}
+
+		.tag {
+			padding: 2rpx 10rpx;
+			border-radius: 4rpx;
+			background-color: #eb10ab;
+			color: #fff;
+			font-size: 20rpx;
+			margin-right: 16rpx;
+		}
+	}
+
+	.b {
+		height: 160rpx;
+		width: 220rpx;
+		background-color: #e2e2e2;
+		box-sizing: border-box;
+		position: absolute;
+		right: 24rpx;
+		bottom: 0;
+		border-radius: 12rpx;
+		z-index: 3;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		.amount {
+			font-size: 60rpx;
+			font-weight: bold;
+			line-height: 1;
+			color: #2b2e3d;
+
+			&::after {
+				content: "元";
+				font-size: 48rpx;
+				position: relative;
+				top: -4rpx;
+			}
+		}
+
+		.doc {
+			font-size: 22rpx;
+			color: #666;
+		}
+	}
+
+	.c {
+		content: "";
+		display: block;
+		height: 40rpx;
+		width: 40rpx;
+		background-color: #868686;
+		border-radius: 40rpx;
+		z-index: 1;
+		position: absolute;
+		right: 216rpx;
+		top: 2rpx;
+	}
+
+	.d {
+		font-size: 22rpx;
+		font-weight: 500;
+		position: absolute;
+		bottom: -46rpx;
+		left: 30rpx;
+	}
+}
+</style>
diff --git a/pages/index/components/hot-category.vue b/pages/index/components/hot-category.vue
new file mode 100644
index 0000000..02a1d0f
--- /dev/null
+++ b/pages/index/components/hot-category.vue
@@ -0,0 +1,93 @@
+<template>
+	<view class="hot-types">
+		<scroll-view scroll-x class="scroller">
+			<view class="inner">
+				<view class="item" v-for="item in list" :key="item.id" @tap="toPath(item)">
+					<cl-skeleton
+						:height="120"
+						:width="120"
+						:margin="[0, 0, 20, 0]"
+						:loading="!item.id"
+						:loading-style="{
+							borderRadius: '100%',
+						}"
+					>
+						<cl-image :radius="120" :src="item.pic" background-color="#fff" />
+					</cl-skeleton>
+
+					<cl-skeleton
+						:height="28"
+						:loading="!item.id"
+						:loading-style="{
+							width: '90rpx',
+							borderRadius: '6rpx',
+						}"
+					>
+						<cl-text :size="24" align="center" block>{{ item.name }}</cl-text>
+					</cl-skeleton>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { onShow } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { useCool } from "/@/cool";
+import { deepTree } from "/@/cool/utils";
+
+interface Item extends Eps.GoodsTypeEntity {
+	children?: Item[];
+}
+
+const { service, router } = useCool();
+
+const list = ref<Item[]>([{}, {}, {}, {}, {}]);
+
+function refresh() {
+	service.goods.type.list({ order: "sortNum", sort: "desc" }).then((res) => {
+		list.value = deepTree(res);
+	});
+}
+
+function toPath(item: Item) {
+	if (item.id) {
+		router.push({
+			path: "/pages/goods/list",
+			query: {
+				typeId: item.children?.map((e) => e.id).join(","),
+			},
+		});
+	}
+}
+
+onShow(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.hot-types {
+	height: 180rpx;
+	overflow: hidden;
+	margin: 50rpx 0 50rpx 0;
+
+	.scroller {
+		height: 200rpx;
+
+		.inner {
+			display: flex;
+			align-items: center;
+
+			.item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				padding: 0 24rpx;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/index/components/tabbar.vue b/pages/index/components/tabbar.vue
new file mode 100644
index 0000000..48be5cc
--- /dev/null
+++ b/pages/index/components/tabbar.vue
@@ -0,0 +1,146 @@
+<template>
+	<cl-footer :flex="false" border :z-index="399" :padding="0">
+		<view class="tabbar">
+			<view
+				class="item"
+				v-for="(item, index) in list"
+				:key="index"
+				:class="{
+					'is-active': item.active,
+				}"
+				@tap="toLink(item.pagePath)"
+			>
+				<view class="custom" v-if="item.pagePath == 'custom'">
+					<view class="icon">
+						<image src="/static/chat.png" mode="aspectFit" />
+					</view>
+				</view>
+
+				<template v-else>
+					<view class="icon">
+						<image :src="item.icon" mode="aspectFit" />
+					</view>
+					<text class="label">{{ item.text }}</text>
+					<view class="badge" v-if="item.number > 0">{{ item.number || 0 }}</view>
+				</template>
+			</view>
+		</view>
+	</cl-footer>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useCool } from "/@/cool";
+import { useShoppingCart } from "/@/hooks";
+
+const { router } = useCool();
+const spCart = useShoppingCart();
+
+const pagePath = router.path;
+
+const list = computed(() => {
+	const arr = [...router.tabs];
+
+	return arr.map((e, i) => {
+		const active = pagePath?.includes(e.pagePath);
+
+		return {
+			icon: "/" + (active ? e.selectedIconPath : e.iconPath),
+			active,
+			number: i == 2 ? spCart.num : 0,
+			...e,
+		};
+	});
+});
+
+function toLink(pagePath: string) {
+	if (pagePath == "custom") {
+		// #ifdef H5
+		location.href = "https://cool-js.com/";
+		// #endif
+	} else {
+		router.push("/" + pagePath);
+	}
+}
+
+uni.hideTabBar();
+
+onMounted(() => {});
+</script>
+
+<style lang="scss" scoped>
+.tabbar {
+	display: flex;
+	height: 120rpx;
+	width: 100%;
+
+	.item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		position: relative;
+
+		.icon {
+			height: 46rpx;
+			width: 46rpx;
+
+			image {
+				height: 100%;
+				width: 100%;
+			}
+		}
+
+		.label {
+			font-size: 24rpx;
+			color: #bfbfbf;
+		}
+
+		.badge {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: absolute;
+			top: 20rpx;
+			transform: translateX(20rpx);
+			font-size: 20rpx;
+			height: 36rpx;
+			min-width: 36rpx;
+			padding: 0 6rpx;
+			background-color: #f56c6c;
+			border: 4rpx solid #fff;
+			color: #fff;
+			border-radius: 18rpx;
+			font-weight: bold;
+			box-sizing: border-box;
+		}
+
+		&.is-active {
+			.label {
+				color: $cl-color-primary;
+			}
+		}
+
+		.custom {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+
+			.icon {
+				background: linear-gradient(
+					to bottom right,
+					#408fff,
+					#6b69f8,
+					#a35df2,
+					#d14bd8,
+					#e9388a
+				);
+				border-radius: 100%;
+				padding: 16rpx;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/index/home.vue b/pages/index/home.vue
new file mode 100644
index 0000000..94d7ff2
--- /dev/null
+++ b/pages/index/home.vue
@@ -0,0 +1,147 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<!-- 搜索 -->
+			<cl-sticky>
+				<view class="search-bar" @tap="toSearch">
+					<view class="search-bar__inner">
+						<cl-icon name="search" :margin="[0, 12, 0, 0]"> </cl-icon>
+						<cl-text value="搜索商品名称"></cl-text>
+					</view>
+				</view>
+			</cl-sticky>
+
+			<!-- 轮播图 -->
+			<banner />
+
+			<!-- 热门分类 -->
+			<hot-category />
+
+			<!-- 优惠券活动 -->
+			<coupon-activity />
+
+			<!-- 热门推荐 -->
+			<view class="hot">
+				<view class="hot__header">
+					<text class="hot__title">热门推荐</text>
+					<text class="hot__desc">TOP PICKS</text>
+				</view>
+
+				<view class="hot__container">
+					<cl-waterfall :ref="setRefs('list')" :column="2">
+						<template #default="{ list }">
+							<cl-waterfall-column v-for="(columns, index) in list" :key="index">
+								<goods-item :item="item" v-for="item in columns" :key="item.id" />
+							</cl-waterfall-column>
+						</template>
+
+						<template #empty>
+							<cl-empty :fixed="false" :height="500" />
+						</template>
+					</cl-waterfall>
+				</view>
+			</view>
+
+			<!-- 版本检测 -->
+			<cl-version-upgrade :ref="setRefs('versionUpgrade')" />
+		</view>
+
+		<tabbar />
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { router, useCool, usePager } from "/@/cool";
+import { onReady, onShareAppMessage } from "@dcloudio/uni-app";
+import Tabbar from "./components/tabbar.vue";
+import GoodsItem from "/@/components/goods/item.vue";
+import CouponActivity from "./components/coupon-activity.vue";
+import HotCategory from "./components/hot-category.vue";
+import Banner from "./components/banner.vue";
+
+const { service, refs, setRefs } = useCool();
+const { onRefresh, onData } = usePager();
+
+// 获取热门推荐
+function refresh(params?: any) {
+	const { data, next } = onRefresh(params, { loading: false });
+
+	onData((list) => {
+		if (data.page == 1) {
+			refs.list.refresh(list);
+		} else {
+			refs.list.append(list);
+		}
+	});
+
+	return next(service.goods.info.page(data));
+}
+
+// 商品搜索
+function toSearch() {
+	router.push("/pages/goods/search");
+}
+
+onReady(() => {
+	refresh({ order: "sortNum", sort: "desc" });
+
+	// #ifdef APP
+	refs.versionUpgrade?.check();
+	// #endif
+});
+
+onShareAppMessage(() => {
+	return {
+		title: "能用钱解决的事，就不要客气",
+		path: "/pages/index/home",
+	};
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	.search-bar {
+		background-color: #fff;
+		padding: 24rpx;
+
+		&__inner {
+			display: flex;
+			align-items: center;
+			height: 70rpx;
+			width: 100%;
+			border-radius: 70rpx;
+			background-color: #f7f7f7;
+			box-sizing: border-box;
+			padding: 0 24rpx;
+		}
+	}
+
+	.hot {
+		&__header {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin: 40rpx 0;
+		}
+
+		&__title {
+			font-size: 32rpx;
+			margin-bottom: 10rpx;
+		}
+
+		&__desc {
+			font-size: 22rpx;
+			color: #999;
+			letter-spacing: 5rpx;
+		}
+
+		&__container {
+			padding: 0 14rpx;
+		}
+	}
+}
+</style>
diff --git a/pages/index/my.vue b/pages/index/my.vue
new file mode 100644
index 0000000..d871cc2
--- /dev/null
+++ b/pages/index/my.vue
@@ -0,0 +1,298 @@
+<template>
+	<cl-page status-bar-background="#2b2e3d">
+		<view class="page-my">
+			<view class="bg"></view>
+
+			<view class="container">
+				<view class="info">
+					<!-- 头像 -->
+					<view class="avatar">
+						<cl-avatar :size="100" :src="user.info?.avatarUrl" />
+					</view>
+
+					<view class="det">
+						<!-- 昵称 -->
+						<cl-text :size="36" bold block color="#fff" @tap="toLogin">
+							{{ user.info?.nickName || "-" }}
+						</cl-text>
+
+						<!-- 手机号 -->
+						<button
+							class="phone"
+							:open-type="user.info?.phone ? '' : 'getPhoneNumber'"
+							@getphonenumber="toBindPhone"
+						>
+							<cl-text color="info">手机号：</cl-text>
+							<cl-text color="info">
+								{{ user.info?.phone || "未绑定，点击获取" }}
+							</cl-text>
+						</button>
+					</view>
+
+					<!-- 设置 -->
+					<!-- #ifndef MP-WEIXIN -->
+					<text class="cl-icon-set" @tap="router.push('/pages/user/set')"></text>
+					<!-- #endif -->
+				</view>
+
+				<!-- 我的订单 -->
+				<view class="order">
+					<view class="label">
+						<cl-text :size="28" bold>我的订单</cl-text>
+
+						<view class="more" @tap="order.toList()">
+							<cl-text color="info" :size="24"> 全部 </cl-text>
+							<cl-icon color="info" name="arrow-right"></cl-icon>
+						</view>
+					</view>
+
+					<view class="status">
+						<view
+							class="item"
+							v-for="(item, index) in order.types"
+							:key="index"
+							@tap="order.toList(item.value)"
+						>
+							<cl-badge
+								:value="item.number"
+								:max="99"
+								:margin="14"
+								type="error"
+								plain
+							>
+								<cl-icon :class-name="item.icon" :size="70" color="primary" />
+							</cl-badge>
+
+							<cl-text color="info" :size="24" :margin="[10, 0, 0, 0]">
+								{{ item.label }}
+							</cl-text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 菜单 -->
+				<cl-list :radius="24" :border="false">
+					<cl-list-item label="我的优惠券" @tap="router.push('/pages/market/coupon')">
+						<template #icon>
+							<cl-icon class-name="shop-icon-coupon" :size="50" />
+						</template>
+					</cl-list-item>
+
+					<cl-list-item
+						label="在线客服"
+						@tap="router.push('/uni_modules/cool-cs/pages/chat')"
+					>
+						<template #icon>
+							<cl-icon class-name="shop-icon-custom" :size="50" />
+						</template>
+					</cl-list-item>
+
+					<cl-list-item label="收货地址" @tap="router.push('/pages/user/address-list')">
+						<template #icon>
+							<cl-icon class-name="shop-icon-location" :size="50" />
+						</template>
+					</cl-list-item>
+				</cl-list>
+
+				<!-- 设置 -->
+				<cl-list :radius="24" :border="false">
+					<cl-list-item label="设置" @tap="router.push('/pages/user/set')">
+						<template #icon>
+							<cl-icon class-name="shop-icon-set" :size="50" />
+						</template>
+					</cl-list-item>
+				</cl-list>
+			</view>
+		</view>
+
+		<tabbar />
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from "vue";
+import { useCool, useStore, useWx } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+import { onShow } from "@dcloudio/uni-app";
+import Tabbar from "./components/tabbar.vue";
+
+const { service, router } = useCool();
+const { user } = useStore();
+const ui = useUi();
+const wx = useWx();
+
+// 订单
+const order = reactive({
+	types: [
+		{
+			label: "待付款",
+			icon: "shop-icon-order-paid",
+			value: 0,
+			number: 0,
+		},
+		{
+			label: "待发货",
+			icon: "shop-icon-order-not-shipped",
+			value: 1,
+			number: 0,
+		},
+		{
+			label: "待收货",
+			icon: "shop-icon-order-received",
+			value: 2,
+			number: 0,
+		},
+		{
+			label: "待评价",
+			icon: "shop-icon-order-comment",
+			value: 3,
+			number: 0,
+		},
+		{
+			label: "退款/售后",
+			icon: "shop-icon-order-refund",
+			value: "5,6",
+			number: 0,
+		},
+	],
+
+	// 查看订单
+	toList(status?: string | number) {
+		router.push({
+			path: "/pages/order/list",
+			query: {
+				status,
+			},
+		});
+	},
+
+	// 获取订单统计
+	refresh() {
+		service.order.info.userCount().then((res) => {
+			order.types[0].number = res["待付款"];
+			order.types[1].number = res["待发货"];
+			order.types[2].number = res["待收货"];
+			order.types[3].number = res["待评价"];
+			order.types[4].number = Number(res["退款中"]) + Number(res["已退款"]);
+		});
+	},
+});
+
+// 去登录
+function toLogin() {
+	if (!user.token) {
+		user.logout();
+	}
+}
+
+// 绑定手机号
+function toBindPhone(e: { detail: any }) {
+	service.user.info
+		.miniPhone({
+			...e.detail,
+			code: wx.code.value,
+		})
+		.then((phone) => {
+			ui.showToast("手机号绑定成功");
+
+			user.update({
+				phone,
+			});
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+		});
+}
+
+onShow(() => {
+	order.refresh();
+	toLogin();
+});
+</script>
+
+<style lang="scss" scoped>
+.page-my {
+	position: relative;
+	overflow: hidden;
+
+	.bg {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 700rpx;
+		width: 100%;
+		background: linear-gradient(to bottom, #2b2e3d, rgba(#2b2e3d, 0.8), #f6f7fa);
+	}
+
+	.container {
+		padding: 0 24rpx;
+		position: relative;
+
+		.info {
+			display: flex;
+			align-items: center;
+			position: relative;
+			padding: 40rpx 10rpx;
+
+			.avatar {
+				margin-right: 30rpx;
+			}
+
+			.phone {
+				display: inline-block;
+				border: 0;
+				padding: 0;
+				margin: 0;
+				line-height: normal;
+				font-size: 24rpx;
+				margin-top: 14rpx;
+				background-color: transparent;
+
+				&::after {
+					border: 0;
+				}
+			}
+
+			.cl-icon-set {
+				position: absolute;
+				right: 10rpx;
+				top: 34rpx;
+				font-size: 40rpx;
+				color: #fff;
+			}
+		}
+
+		.order {
+			padding: 24rpx;
+			margin-bottom: 24rpx;
+			border-radius: 24rpx;
+			background-color: #ffffff;
+
+			.label {
+				display: flex;
+				justify-content: space-between;
+				margin-bottom: 12rpx;
+
+				.more {
+					display: flex;
+					align-items: center;
+				}
+			}
+
+			.status {
+				display: flex;
+				padding: 24rpx 0;
+
+				.item {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					flex: 1;
+					position: relative;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/index/shopping-cart.vue b/pages/index/shopping-cart.vue
new file mode 100644
index 0000000..d454e21
--- /dev/null
+++ b/pages/index/shopping-cart.vue
@@ -0,0 +1,239 @@
+<template>
+	<cl-page status-bar-background="#f6f7fa">
+		<view class="page">
+			<cl-sticky>
+				<cl-topbar
+					title="购物车"
+					:border="false"
+					:show-back="false"
+					background-color="#f6f7fa"
+				>
+					<template #prepend>
+						<cl-row :margin="[0, 0, 0, 30]" v-if="!isEmpty(spCart.list)">
+							<cl-text
+								value="完成"
+								@tap="op.command('delete-confirm')"
+								v-if="op.mode == 'delete'"
+							/>
+
+							<cl-text value="管理" @tap="op.change('delete')" v-else />
+						</cl-row>
+					</template>
+				</cl-topbar>
+			</cl-sticky>
+
+			<view class="list">
+				<template v-if="!isEmpty(spCart.list)">
+					<goods-group :data="spCart.list" spec-edit show-checkbox @spec="toEdit">
+						<template #count="{ item }">
+							<cl-input-number
+								v-model="item.count"
+								:min="0"
+								:max="item.spec?.stock"
+								@change="onStockChange(item)"
+							/>
+						</template>
+					</goods-group>
+				</template>
+
+				<cl-empty
+					icon="spopping-cart"
+					text="购物车竟然是空的"
+					height="calc(100% - 120rpx)"
+					v-else
+				>
+					<cl-button round type="primary" @tap="router.push('/pages/goods/list')"
+						>去逛逛</cl-button
+					>
+				</cl-empty>
+			</view>
+
+			<!-- 底部操作按钮 -->
+			<cl-footer
+				:flex="false"
+				:bottom="120"
+				:height="104"
+				padding="20rpx 24rpx"
+				v-if="!isEmpty(spCart.list)"
+			>
+				<cl-row type="flex">
+					<cl-checkbox round :model-value="selectAll" @change="onSelectAllChange">
+						全选
+					</cl-checkbox>
+
+					<view class="flex1" />
+
+					<template v-if="op.mode == 'settle'">
+						<cl-text value="合计：" />
+						<cl-text type="price" color="error" :value="settleAmount" :size="40" />
+
+						<cl-button round type="primary" :margin="[0, 0, 0, 20]" @tap="toSettle"
+							>去结算</cl-button
+						>
+					</template>
+
+					<template v-else-if="op.mode == 'delete'">
+						<cl-button round @tap="toDel()">删除</cl-button>
+					</template>
+				</cl-row>
+			</cl-footer>
+		</view>
+
+		<!-- 商品规格 -->
+		<goods-spec />
+
+		<tabbar />
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive } from "vue";
+import { useShoppingCart, useSpec } from "/@/hooks";
+import { assign, isEmpty } from "lodash-es";
+import { useCool } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+import GoodsSpec from "/@/components/goods/spec.vue";
+import GoodsGroup from "/@/components/goods/group.vue";
+import Tabbar from "./components/tabbar.vue";
+
+type OpMode = "settle" | "delete";
+
+const { router } = useCool();
+const spCart = useShoppingCart();
+const spec = useSpec();
+const ui = useUi();
+
+// 操作
+const op = reactive({
+	mode: "settle" as OpMode,
+
+	change(key: OpMode) {
+		op.mode = key;
+	},
+
+	command(key: string) {
+		switch (key) {
+			case "delete-confirm":
+				op.done();
+				break;
+		}
+	},
+
+	done() {
+		op.mode = "settle";
+	},
+});
+
+// 结算金额
+const settleAmount = computed(() => {
+	return spCart.list
+		.filter((e) => e.checked)
+		.reduce((a, b) => {
+			return a + b.count * (b.spec.price || 0);
+		}, 0);
+});
+
+// 全选开关
+const selectAll = computed(() => {
+	return !isEmpty(spCart.list) && !spCart.list.find((e) => !e.checked);
+});
+
+// 监听全选切换
+function onSelectAllChange(val?: boolean) {
+	spCart.list.forEach((e) => {
+		e.checked = val;
+	});
+}
+
+// 编辑规格
+function toEdit(item: OrderGoods) {
+	spec.open({
+		action: "edit",
+		goods: item.goodsInfo,
+		specId: item.spec.id,
+		count: item.count,
+		callback(action) {
+			if (action == "edit") {
+				// 同个规格
+				if (spec.info?.id == item.spec.id) {
+					assign(item, spec.info);
+					assign(item.goodsInfo, spec.goods);
+					item.count = spec.num;
+				}
+				// 不同规格
+				else {
+					// 移除当前
+					spCart.del(item.id!);
+
+					// 添加新规格
+					spCart.add({
+						count: spec.num,
+						spec: spec.info!,
+						goodsInfo: spec.goods!,
+					});
+				}
+			}
+		},
+	});
+}
+
+// 删除商品
+function toDel() {
+	const ids = spCart.list.filter((e) => e.checked).map((e) => e.id);
+
+	if (isEmpty(ids)) {
+		ui.showToast("请先选择商品");
+	} else {
+		ui.showConfirm({
+			title: "提示",
+			message: "确定删除选中商品吗？",
+			callback(action) {
+				if (action == "confirm") {
+					ids.forEach((id) => {
+						spCart.del(id!);
+					});
+				}
+			},
+		});
+	}
+}
+
+// 去结算
+function toSettle() {
+	const buyList = spCart.list.filter((e) => e.checked);
+
+	if (isEmpty(buyList)) {
+		ui.showToast("请先选择商品");
+	} else {
+		router.push({
+			path: "/pages/order/submit",
+			params: {
+				buyList,
+			},
+		});
+	}
+}
+
+// 监听库存变化
+function onStockChange(item: OrderGoods) {
+	if (item.count == 0) {
+		ui.showConfirm({
+			title: "提示",
+			message: "确定删除该商品吗？",
+			callback(action) {
+				if (action == "confirm") {
+					spCart.del(item.id!);
+				} else {
+					item.count = 1;
+				}
+			},
+		});
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+	padding: 0 24rpx;
+}
+</style>
diff --git a/pages/market/coupon.vue b/pages/market/coupon.vue
new file mode 100644
index 0000000..5596a14
--- /dev/null
+++ b/pages/market/coupon.vue
@@ -0,0 +1,40 @@
+<template>
+	<cl-page background-color="#fff">
+		<view class="page">
+			<view class="list">
+				<coupon-item v-for="item in list" :key="item.id" :item="item" />
+			</view>
+
+			<cl-empty icon="coupon" v-if="isEmpty(list)" />
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onReady } from "@dcloudio/uni-app";
+import { useCool, usePager } from "/@/cool";
+import CouponItem from "/@/components/coupon/item/index.vue";
+import { isEmpty } from "lodash-es";
+
+const { service } = useCool();
+const { list, onRefresh } = usePager();
+
+function refresh(params?: any) {
+	const { data, next } = onRefresh(params);
+	next(service.market.coupon.user.page(data));
+}
+
+onReady(() => {
+	refresh();
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+}
+</style>
diff --git a/pages/order/comment.vue b/pages/order/comment.vue
new file mode 100644
index 0000000..7d99e33
--- /dev/null
+++ b/pages/order/comment.vue
@@ -0,0 +1,99 @@
+<template>
+	<cl-page background-color="#fff">
+		<view class="page">
+			<view class="star">
+				<cl-text block :margin="[0, 0, 24, 0]">{{ text }}</cl-text>
+				<cl-rate v-model="form.starCount" />
+			</view>
+
+			<cl-textarea
+				v-model="form.content"
+				:height="300"
+				count
+				:radius="24"
+				:border="false"
+				:maxlength="300"
+				:margin="[24, 0, 24, 0]"
+				background-color="#f6f7fa"
+				placeholder="请输入您的评论内容"
+			/>
+
+			<cl-upload :ref="setRefs('upload')" v-model="form.pics" multiple :size="[200, 200]" />
+		</view>
+
+		<cl-footer>
+			<cl-button custom type="primary" :loading="loading" @tap="submit">提交</cl-button>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref } from "vue";
+import { useCool } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+
+const { service, router, refs, setRefs } = useCool();
+const ui = useUi();
+
+const form = reactive({
+	content: "",
+	starCount: 5,
+	pics: [],
+});
+
+// 提交中
+const loading = ref(false);
+
+// 评分文案
+const text = computed(() => {
+	return ["太差了！", "不好用！", "还可以！", "推荐！", "强力推荐！"][form.starCount - 1];
+});
+
+async function submit() {
+	const { orderId, goodsId } = router.query;
+
+	if (!form.content) {
+		return ui.showToast("请输入评论内容");
+	}
+
+	if (refs.upload.check()) {
+		return ui.showToast("图片上传中，请稍等");
+	}
+
+	loading.value = true;
+
+	await service.goods.comment
+		.submit({
+			orderId,
+			data: {
+				orderId,
+				goodsId,
+				...form,
+			},
+		})
+		.then(() => {
+			ui.showTips("评价已提交，感谢您的反馈", () => {
+				router.back();
+			});
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+		});
+
+	loading.value = false;
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.star {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 24rpx 0;
+	}
+}
+</style>
diff --git a/pages/order/components/cancel.vue b/pages/order/components/cancel.vue
new file mode 100644
index 0000000..6501161
--- /dev/null
+++ b/pages/order/components/cancel.vue
@@ -0,0 +1,113 @@
+<template>
+	<cl-popup
+		v-model="visible"
+		direction="bottom"
+		:border-radius="[32, 32, 0, 0]"
+		:padding="0"
+		title="请选择取消订单原因（必选）"
+		show-close-btn
+	>
+		<view class="order-cancel">
+			<scroll-view class="scroller" scroll-y>
+				<view class="list">
+					<cl-radio-group v-model="remark" fill>
+						<cl-radio
+							v-for="(item, index) in dict.get('orderCancelReason')"
+							:key="index"
+							:label="item.label"
+							:height="80"
+						>
+							{{ item.label }}
+						</cl-radio>
+					</cl-radio-group>
+				</view>
+			</scroll-view>
+
+			<cl-footer :fixed="false" :vt="[visible]">
+				<cl-button
+					custom
+					type="primary"
+					:loading="loading"
+					:disabled="!remark"
+					@tap="submit"
+				>
+					提交
+				</cl-button>
+			</cl-footer>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useCool, useStore } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+
+const emit = defineEmits(["success"]);
+
+const { service } = useCool();
+const { dict } = useStore();
+const ui = useUi();
+
+// 是否可见
+const visible = ref(false);
+
+// 取消中
+const loading = ref(false);
+
+// 备注
+const remark = ref();
+
+// 订单id
+const orderId = ref();
+
+// 打开弹窗
+function open(data: OrderInfo) {
+	visible.value = true;
+	remark.value = "";
+	orderId.value = data.id;
+}
+
+// 关闭弹窗
+function close() {
+	visible.value = false;
+}
+
+// 提交表单
+async function submit() {
+	loading.value = true;
+
+	await service.order.info
+		.cancel({
+			orderId: orderId.value,
+			remark: remark.value,
+		})
+		.then(() => {
+			ui.showToast("订单取消成功");
+			emit("success");
+			close();
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+		});
+
+	loading.value = false;
+}
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.order-cancel {
+	.scroller {
+		max-height: 60vh;
+
+		.list {
+			padding: 0 32rpx;
+		}
+	}
+}
+</style>
diff --git a/pages/order/components/comment.vue b/pages/order/components/comment.vue
new file mode 100644
index 0000000..86ee711
--- /dev/null
+++ b/pages/order/components/comment.vue
@@ -0,0 +1,121 @@
+<template>
+	<cl-popup
+		v-model="visible"
+		direction="bottom"
+		:border-radius="[32, 32, 0, 0]"
+		:padding="0"
+		title="商品评价"
+		show-close-btn
+	>
+		<view class="order-comment">
+			<view class="list">
+				<view class="item" v-for="(item, index) in list" :key="index">
+					<cl-image
+						:src="resizeImage(item.mainPic!, 200)"
+						:size="[140, 140]"
+						:radius="24"
+					/>
+
+					<cl-row :margin="[0, 0, 0, 32]">
+						<cl-text
+							block
+							bold
+							:size="28"
+							:margin="[0, 0, 10, 0]"
+							:line-height="1.2"
+							:ellipsis="2"
+						>
+							{{ item.title }}
+						</cl-text>
+
+						<cl-button disabled type="info" size="small" v-if="item.isComment">
+							已评价
+						</cl-button>
+
+						<cl-button type="primary" size="small" @tap="toComment(item)" v-else>
+							去评价
+						</cl-button>
+					</cl-row>
+				</view>
+			</view>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref } from "vue";
+import { useCool, useUpload } from "/@/cool";
+import { uniqBy } from "lodash-es";
+
+const emit = defineEmits(["success"]);
+
+const { router } = useCool();
+const { resizeImage } = useUpload();
+
+// 是否可见
+const visible = ref(false);
+
+// 订单详情
+const info = ref<OrderInfo>();
+
+// 商品列表
+const list = computed(() => {
+	return uniqBy(info.value?.goodsList, "goodsId").map((e) => {
+		return {
+			isComment: e.isComment,
+			...e?.goodsInfo,
+		};
+	});
+});
+
+// 打开弹窗
+function open(data: OrderInfo) {
+	info.value = data;
+
+	nextTick(() => {
+		// 只有一个的时候直接去提交页面
+		if (list.value.length == 1) {
+			toComment(list.value[0]);
+		} else {
+			visible.value = true;
+		}
+	});
+}
+
+// 关闭弹窗
+function close() {
+	visible.value = false;
+}
+
+// 去评价
+function toComment(item: Eps.GoodsInfoEntity) {
+	close();
+
+	router.push({
+		path: "/pages/order/comment",
+		query: {
+			goodsId: item.id,
+			orderId: info.value?.id,
+		},
+	});
+}
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.order-comment {
+	.list {
+		padding: 0 32rpx;
+
+		.item {
+			display: flex;
+			align-items: center;
+			margin-bottom: 32rpx;
+		}
+	}
+}
+</style>
diff --git a/pages/order/components/op-btns.vue b/pages/order/components/op-btns.vue
new file mode 100644
index 0000000..3d25e4a
--- /dev/null
+++ b/pages/order/components/op-btns.vue
@@ -0,0 +1,41 @@
+<template>
+	<cl-row type="flex" justify="end">
+		<template v-if="info?.status == 0">
+			<cl-button @tap.stop="command('cancel')">取消订单</cl-button>
+			<cl-button type="primary" @tap.stop="command('pay')">立即支付</cl-button>
+		</template>
+
+		<template v-if="[2, 3, 4, 5, 6].includes(info.status!)">
+			<cl-button @tap.stop="command('logistics')">查看物流</cl-button>
+		</template>
+
+		<template v-if="[1, 2].includes(info.status!)">
+			<cl-button @tap.stop="command('refund')"> 售后\退款 </cl-button>
+		</template>
+
+		<template v-if="info.status == 2">
+			<cl-button type="primary" @tap.stop="command('confirm')">确认收货</cl-button>
+		</template>
+
+		<template v-if="[3, 4].includes(info.status!)">
+			<cl-button type="primary" @tap.stop="command('comment')">评价</cl-button>
+		</template>
+	</cl-row>
+</template>
+
+<script lang="ts" setup>
+import type { PropType } from "vue";
+
+const props = defineProps({
+	info: {
+		type: Object as PropType<OrderInfo>,
+		default: () => ({}),
+	},
+});
+
+const emit = defineEmits(["command"]);
+
+function command(key: string) {
+	emit("command", key, props.info);
+}
+</script>
diff --git a/pages/order/components/op.vue b/pages/order/components/op.vue
new file mode 100644
index 0000000..b0a47ce
--- /dev/null
+++ b/pages/order/components/op.vue
@@ -0,0 +1,80 @@
+<template>
+	<view class="order-op">
+		<order-cancel :ref="setRefs('cancel')" @success="onSuccess" />
+		<order-pay :ref="setRefs('pay')" @success="onSuccess" />
+		<order-comment :ref="setRefs('comment')" @success="onSuccess" />
+	</view>
+</template>
+
+<script lang="ts" setup>
+import { useUi } from "/$/cool-ui";
+import { useCool } from "/@/cool";
+import OrderCancel from "./cancel.vue";
+import OrderPay from "./pay.vue";
+import OrderComment from "./comment.vue";
+
+const emit = defineEmits(["success"]);
+
+const { refs, setRefs, router, service } = useCool();
+const ui = useUi();
+
+function open(key: string, data: OrderInfo) {
+	const orderId = data.id;
+
+	if (refs[key]) {
+		refs[key].open(data);
+	} else {
+		switch (key) {
+			case "confirm":
+				ui.showConfirm({
+					title: "确认已收到货",
+					message: "确认收货后无法发起退款等售后申请，请谨慎操作",
+					async beforeClose(action, { done, hideLoading, showLoading }) {
+						if (action == "confirm") {
+							showLoading();
+
+							await service.order.info
+								.confirm({
+									orderId,
+								})
+								.then(() => {
+									ui.showToast("确认收货成功");
+									onSuccess();
+								})
+								.catch((err) => {
+									ui.showToast(err.message);
+								});
+
+							hideLoading();
+						}
+
+						done();
+					},
+				});
+				break;
+
+			default:
+				router.push({
+					path: `/pages/order/${key}`,
+					query: {
+						orderId,
+					},
+				});
+				break;
+		}
+	}
+}
+
+function close(key: string) {
+	refs[key].close();
+}
+
+function onSuccess(data?: any) {
+	emit("success", data);
+}
+
+defineExpose({
+	open,
+	close,
+});
+</script>
diff --git a/pages/order/components/pay.vue b/pages/order/components/pay.vue
new file mode 100644
index 0000000..b718469
--- /dev/null
+++ b/pages/order/components/pay.vue
@@ -0,0 +1,110 @@
+<template>
+	<cl-popup
+		v-model="visible"
+		direction="bottom"
+		:border-radius="[32, 32, 0, 0]"
+		:padding="0"
+		title="支付"
+		show-close-btn
+	>
+		<view class="order-pay">
+			<cl-row :margin="[16, 0, 32, 32]">
+				<cl-text :size="22" color="info">合计费用</cl-text>
+				<cl-text :size="46" bold :margin="[0, 6, 0, 6]">{{ paidAmount }}</cl-text>
+				<cl-text :size="22" color="info">元</cl-text>
+			</cl-row>
+
+			<view class="list">
+				<cl-radio-group fill v-model="type">
+					<cl-radio
+						v-for="item in order.payTypes"
+						:key="item.key"
+						:label="item.key"
+						:height="80"
+					>
+						{{ item.label }}
+						<image class="icon" mode="aspectFill" :src="item.icon" />
+					</cl-radio>
+				</cl-radio-group>
+			</view>
+
+			<cl-footer :fixed="false" :vt="[visible]">
+				<cl-button custom type="primary" @tap="toPay">
+					确认支付{{ paidAmount }}元
+				</cl-button>
+			</cl-footer>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from "vue";
+import { useOrder } from "/@/hooks";
+import { useUi } from "/$/cool-ui";
+
+const emit = defineEmits(["success"]);
+
+const ui = useUi();
+const order = useOrder();
+
+// 是否可见
+const visible = ref(false);
+
+// 支付方式
+const type = ref();
+
+// 订单详情
+const info = ref<OrderInfo>();
+
+// 支付金额
+const paidAmount = computed(() => {
+	return (Number(info.value?.price) - Number(info.value?.discountPrice)).toFixed(2);
+});
+
+// 打开弹窗
+function open(data: OrderInfo) {
+	visible.value = true;
+	info.value = data;
+	type.value = order.payTypes[0].key;
+}
+
+// 关闭弹窗
+function close() {
+	visible.value = false;
+}
+
+// 提交支付
+function toPay() {
+	close();
+
+	order
+		.toPay(info.value?.id!, type.value)
+		.then(() => {
+			emit("success");
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+		});
+}
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style lang="scss" scoped>
+.order-pay {
+	.list {
+		padding: 0 32rpx 32rpx 32rpx;
+	}
+
+	.icon {
+		height: 56rpx;
+		width: 56rpx;
+		position: absolute;
+		right: 0;
+		top: calc(50% - 28rpx);
+	}
+}
+</style>
diff --git a/pages/order/components/status-tag.vue b/pages/order/components/status-tag.vue
new file mode 100644
index 0000000..a0406a0
--- /dev/null
+++ b/pages/order/components/status-tag.vue
@@ -0,0 +1,23 @@
+<template>
+	<cl-text :size="24" :color="status?.color || 'primary'">{{ status?.label }}</cl-text>
+</template>
+
+<script lang="ts" setup>
+import { computed, type PropType } from "vue";
+import { OrderStatus, RefundStatus } from "../dict";
+
+const props = defineProps({
+	item: {
+		type: Object as PropType<OrderInfo>,
+		default: () => ({}),
+	},
+});
+
+const status = computed(() => {
+	if (props.item.refund) {
+		return RefundStatus.find((e) => e.value == props.item.refund?.status);
+	}
+
+	return OrderStatus.find((e) => e.value == props.item.status);
+});
+</script>
diff --git a/pages/order/detail.vue b/pages/order/detail.vue
new file mode 100644
index 0000000..e4e3591
--- /dev/null
+++ b/pages/order/detail.vue
@@ -0,0 +1,231 @@
+<template>
+	<cl-page>
+		<cl-sticky>
+			<cl-topbar>
+				<cl-row type="flex" justify="center">
+					<cl-icon :class-name="status?.icon" :size="60" :margin="[0, 6, 0, 0]" />
+					<cl-text :size="28">{{ status?.desc }}</cl-text>
+				</cl-row>
+			</cl-topbar>
+		</cl-sticky>
+
+		<view class="page">
+			<!-- 收货地址 -->
+			<address-select :data="info?.address" disabled />
+
+			<!-- 商品列表 -->
+			<goods-group :data="info?.goodsList" readonly />
+
+			<view class="card">
+				<text class="label">价格明细</text>
+
+				<cl-list-item
+					:label="`商品总价（共${info?.goodsList?.length || 0}件商品）`"
+					:arrow-icon="false"
+				>
+					<template #icon>
+						<cl-icon class-name="shop-icon-q-order" :size="40" />
+					</template>
+
+					<cl-text :size="28" type="price" :value="info?.price" />
+				</cl-list-item>
+
+				<cl-list-item
+					label="优惠金额"
+					:arrow-icon="false"
+					@tap="showDiscount = !showDiscount"
+				>
+					<template #icon>
+						<cl-icon class-name="shop-icon-coupon" :size="40" />
+					</template>
+
+					<cl-text :size="28" color="error">-</cl-text>
+					<cl-text :size="28" type="price" color="error" :value="info?.discountPrice" />
+
+					<cl-icon
+						name="arrow-bottom"
+						:margin="[0, 0, 0, 10]"
+						:size="24"
+						v-if="info?.discountSource"
+					/>
+				</cl-list-item>
+
+				<!-- 优惠信息 -->
+				<view class="discount-info" v-if="showDiscount && info?.discountSource">
+					{{ info?.discountSource?.info.title }}：满
+					{{ info?.discountSource?.info.condition?.fullAmount }} 元减
+					{{ info?.discountSource?.info.amount }} 元
+				</view>
+
+				<cl-list-item label="实付金额" :arrow-icon="false">
+					<template #icon>
+						<cl-icon class-name="shop-icon-q-pay" :size="40" />
+					</template>
+
+					<cl-text :size="32" type="price" :value="paidAmount" />
+				</cl-list-item>
+			</view>
+
+			<view class="card" v-if="info?.refund">
+				<text class="label">售后/退款</text>
+
+				<cl-list-item label="退款金额" :arrow-icon="false">
+					<cl-text
+						:size="32"
+						type="price"
+						color="error"
+						:value="info?.refund?.amount || 0"
+					/>
+				</cl-list-item>
+
+				<cl-list-item label="退款状态" :arrow-icon="false">
+					{{ dict.getLabel(RefundStatus, info.refund.status) }}
+				</cl-list-item>
+
+				<cl-list-item label="申请原因" :arrow-icon="false">
+					{{ info.refund.reason }}
+				</cl-list-item>
+
+				<template v-if="info.refund.status == 2">
+					<cl-list-item label="拒绝原因" :arrow-icon="false" />
+
+					<cl-text block color="error" :margin="[0, 0, 20, 0]" :line-height="1.4">{{
+						info.refund.refuseReason
+					}}</cl-text>
+				</template>
+			</view>
+
+			<view class="card">
+				<text class="label">订单信息</text>
+
+				<cl-list-item label="订单编号" :arrow-icon="false">
+					<cl-text copy>{{ info?.orderNum }} </cl-text>
+
+					<cl-button
+						size="small"
+						type="primary"
+						:height="40"
+						:width="70"
+						:font-size="22"
+						:margin="[0, 0, 0, 10]"
+						@tap="toCopy"
+						>复制</cl-button
+					>
+				</cl-list-item>
+
+				<cl-list-item label="支付方式" :arrow-icon="false">
+					{{ dict.getLabel(PayType, info?.payType) }}
+				</cl-list-item>
+
+				<cl-list-item label="支付时间" :arrow-icon="false" v-if="info?.payType">
+					{{ info?.payTime }}
+				</cl-list-item>
+
+				<cl-list-item label="下单时间" :arrow-icon="false">
+					{{ info?.createTime }}
+				</cl-list-item>
+
+				<cl-list-item label="订单备注" :arrow-icon="false">
+					{{ info?.remark || "暂无备注" }}
+				</cl-list-item>
+			</view>
+		</view>
+
+		<!-- 底部操作按钮 -->
+		<cl-footer :flex="false" border :vt="[info?.status]" v-if="info">
+			<order-op-btns :info="info" @command="refs.orderOp?.open" />
+		</cl-footer>
+
+		<!-- 订单操作 -->
+		<order-op :ref="setRefs('orderOp')" @success="refresh()" />
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onPullDownRefresh, onReady, onShow } from "@dcloudio/uni-app";
+import { useCool, useStore } from "/@/cool";
+import { computed, ref } from "vue";
+import { useUi } from "/$/cool-ui";
+import { OrderStatus, PayType, RefundStatus } from "./dict";
+import AddressSelect from "/@/components/address/select.vue";
+import GoodsGroup from "/@/components/goods/group.vue";
+import OrderOp from "./components/op.vue";
+import OrderOpBtns from "./components/op-btns.vue";
+
+const { router, service, refs, setRefs } = useCool();
+const { dict } = useStore();
+const ui = useUi();
+
+// 显示优惠信息
+const showDiscount = ref(false);
+
+// 订单详情
+const info = ref<OrderInfo>();
+
+// 订单状态
+const status = computed(() => {
+	return OrderStatus.find((e) => e.value == info.value?.status);
+});
+
+// 实付金额
+const paidAmount = computed(() => {
+	return Number(info.value?.price || 0) - Number(info.value?.discountPrice || 0);
+});
+
+// 获取订单详情
+async function refresh() {
+	ui.showLoading();
+
+	await service.order.info
+		.info({
+			id: router.query.id,
+		})
+		.then((res) => {
+			info.value = res;
+		})
+		.catch((err) => {
+			ui.showTips(err.message, () => {
+				router.back();
+			});
+		});
+
+	ui.hideLoading();
+}
+
+// 复制订单号
+function toCopy() {
+	uni.setClipboardData({
+		data: info.value?.orderNum!,
+	});
+}
+
+onPullDownRefresh(async () => {
+	await refresh();
+	uni.stopPullDownRefresh();
+});
+
+onReady(() => {
+	refresh();
+});
+
+onShow(() => {
+	if (ui.loaded) {
+		refresh();
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.discount-info {
+		background-color: $cl-color-bg;
+		color: #444;
+		padding: 12rpx;
+		border-radius: 12rpx;
+		font-size: 24rpx;
+		text-align: right;
+	}
+}
+</style>
diff --git a/pages/order/dict/index.ts b/pages/order/dict/index.ts
new file mode 100644
index 0000000..1311c2c
--- /dev/null
+++ b/pages/order/dict/index.ts
@@ -0,0 +1,92 @@
+export const OrderStatus = [
+	{
+		label: "待付款",
+		desc: "等待用户付款",
+		value: 0,
+		color: "info",
+		icon: "shop-icon-order-paid",
+	},
+	{
+		label: "待发货",
+		desc: "等待商家发货",
+		value: 1,
+		icon: "shop-icon-order-not-shipped",
+	},
+	{
+		label: "待收货",
+		desc: "等待用户收货",
+		value: 2,
+		icon: "shop-icon-order-received",
+	},
+	{
+		label: "待评价",
+		desc: "等待用户评价",
+		value: 3,
+		icon: "shop-icon-order-comment",
+	},
+	{
+		label: "已完成",
+		desc: "完成",
+		value: 4,
+		color: "success",
+		icon: "shop-icon-order-success",
+	},
+	{
+		label: "退款中",
+		desc: "后台退款中",
+		value: 5,
+		color: "error",
+		icon: "shop-icon-order-refund",
+	},
+	{
+		label: "已退款",
+		desc: "订单已退款",
+		value: 6,
+		color: "warning",
+		icon: "shop-icon-order-refund",
+	},
+	{
+		label: "已关闭",
+		desc: "订单已关闭",
+		value: 7,
+		color: "info",
+		icon: "shop-icon-order-close",
+	},
+];
+
+export const PayType = [
+	{
+		label: "未支付",
+		value: 0,
+	},
+	{
+		label: "微信",
+		value: 1,
+		key: "wxpay",
+		icon: "/static/icon/wxpay.png",
+	},
+	{
+		label: "支付宝",
+		value: 2,
+		key: "alipay",
+		icon: "/static/icon/alipay.png",
+	},
+];
+
+export const RefundStatus = [
+	{
+		label: "申请中",
+		value: 0,
+		color: "warning",
+	},
+	{
+		label: "已退款",
+		value: 1,
+		color: "success",
+	},
+	{
+		label: "拒绝退款",
+		value: 2,
+		color: "error",
+	},
+];
diff --git a/pages/order/list.vue b/pages/order/list.vue
new file mode 100644
index 0000000..81bfd6c
--- /dev/null
+++ b/pages/order/list.vue
@@ -0,0 +1,240 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<cl-sticky>
+				<cl-tabs
+					v-model="tabs.active"
+					un-color="#999"
+					:list="tabs.list"
+					fill
+					@change="tabs.onChange"
+				/>
+			</cl-sticky>
+
+			<view class="list">
+				<view
+					class="item"
+					v-for="item in list"
+					:key="item.id"
+					@tap="
+						router.push({
+							path: '/pages/order/detail',
+							query: {
+								id: item.id,
+							},
+						})
+					"
+				>
+					<!-- 订单号、状态 -->
+					<cl-row type="flex" justify="space-between" :margin="[0, 0, 32, 0]">
+						<cl-text :size="28" bold>{{ item.orderNum }}</cl-text>
+						<order-status-tag :item="item" />
+					</cl-row>
+
+					<!-- 退款、关闭原因 -->
+					<view class="reason" v-if="item.closeRemark || item.refund?.refuseReason">
+						<cl-text prefix-icon="cl-icon-warning-border" :size="24" :ellipsis="1">
+							{{ item.closeRemark || item.refund?.refuseReason }}
+						</cl-text>
+					</view>
+
+					<!-- 商品图片 -->
+					<view class="pics">
+						<scroll-view scroll-x class="scroller">
+							<view class="inner">
+								<cl-image
+									v-for="url in item.pics"
+									:key="url"
+									:src="resizeImage(url, 200)"
+									:size="[140, 140]"
+									:radius="24"
+									:margin="[0, 16, 0, 0]"
+								/>
+							</view>
+						</scroll-view>
+
+						<view class="cover">
+							<cl-text
+								type="price"
+								:size="30"
+								:value="item.price! - (item.discountPrice || 0)"
+								block
+								bold
+								:margin="[0, 0, 10, 0]"
+							/>
+							<cl-text :size="22" color="info">共 {{ item.pics.length }} 件</cl-text>
+						</view>
+					</view>
+
+					<!-- 操作按钮 -->
+					<order-op-btns :info="item" @command="refs.orderOp?.open" />
+				</view>
+
+				<cl-empty icon="order" text="暂无订单" v-if="isEmpty(list)" />
+			</view>
+		</view>
+
+		<!-- 订单操作 -->
+		<order-op :ref="setRefs('orderOp')" @success="refresh()" />
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onReady, onShow } from "@dcloudio/uni-app";
+import { useCool, usePager, useUpload } from "/@/cool";
+import { reactive } from "vue";
+import { isEmpty } from "lodash-es";
+import { useUi } from "/$/cool-ui";
+import OrderOp from "./components/op.vue";
+import OrderOpBtns from "./components/op-btns.vue";
+import OrderStatusTag from "./components/status-tag.vue";
+
+const { service, router, refs, setRefs } = useCool();
+const { resizeImage } = useUpload();
+const ui = useUi();
+const { list, onRefresh, onData } = usePager<OrderInfo>();
+
+// 状态选项卡
+const tabs = reactive({
+	active: "0",
+
+	list: [
+		{
+			label: "全部",
+		},
+		{
+			label: "待付款",
+			value: "0",
+		},
+		{
+			label: "待发货",
+			value: "1",
+		},
+		{
+			label: "待收货",
+			value: "2",
+		},
+		{
+			label: "售后/退款",
+			value: "5,6",
+		},
+		{
+			label: "待评价",
+			value: "3",
+		},
+		{
+			label: "已完成",
+			value: "4",
+		},
+	],
+
+	onChange() {
+		refresh({
+			page: 1,
+		});
+	},
+});
+
+// 获取订单列表
+function refresh(params?: any, loading?: boolean) {
+	const { data, next } = onRefresh(params, { loading });
+	next(
+		service.order.info.page({
+			status: tabs.active?.split(","),
+			...data,
+		}),
+	);
+}
+
+onData((list) => {
+	list.forEach((e) => {
+		e.pics = (e.goodsList || []).map((a) => {
+			let arr = a.spec.images || [];
+
+			if (isEmpty(arr)) {
+				arr = [a.goodsInfo?.mainPic];
+			}
+
+			return arr[0];
+		});
+	});
+});
+
+onReady(() => {
+	tabs.active = router.query.status || undefined;
+	refresh();
+});
+
+onShow(() => {
+	if (ui.loaded) {
+		refresh({}, false);
+	}
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	.list {
+		padding: 24rpx;
+
+		.item {
+			background-color: #fff;
+			padding: 32rpx;
+			border-radius: 24rpx;
+			margin-bottom: 24rpx;
+
+			.reason {
+				display: flex;
+				align-items: center;
+				border-radius: 16rpx;
+				background-color: $cl-color-bg;
+				padding: 16rpx;
+				margin-bottom: 32rpx;
+			}
+
+			.pics {
+				height: 140rpx;
+				margin-bottom: 32rpx;
+				overflow: hidden;
+				position: relative;
+
+				.scroller {
+					height: 160rpx;
+
+					.inner {
+						display: flex;
+
+						&::after {
+							content: "";
+							display: block;
+							width: 144rpx;
+							flex-shrink: 0;
+						}
+					}
+				}
+
+				.cover {
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: flex-end;
+					position: absolute;
+					right: 0;
+					top: 0;
+					height: 100%;
+					width: 160rpx;
+					background-color: rgba(255, 255, 255, 0.95);
+				}
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/order/logistics.vue b/pages/order/logistics.vue
new file mode 100644
index 0000000..60117c6
--- /dev/null
+++ b/pages/order/logistics.vue
@@ -0,0 +1,108 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<!-- 收货地址 -->
+			<address-select disabled />
+
+			<!-- 物流列表 -->
+			<view class="card">
+				<template v-if="logistics">
+					<cl-row type="flex" justify="space-between" :margin="[10, 0, 20, 0]">
+						<cl-text :size="24" color="info">
+							{{ logistics.expName }} {{ logistics.number }}
+						</cl-text>
+						<cl-text :size="24" color="info" @tap="toCopy">复制</cl-text>
+					</cl-row>
+
+					<!-- 运送记录 -->
+					<view class="record">
+						<cl-timeline>
+							<cl-timeline-item
+								v-for="(item, index) in logistics.list"
+								:key="index"
+								:timestamp="item.time"
+								:content="item.status"
+							/>
+						</cl-timeline>
+					</view>
+				</template>
+
+				<cl-empty :fixed="false" :height="600" text="暂无物流信息" v-else />
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onPullDownRefresh, onReady } from "@dcloudio/uni-app";
+import { useCool } from "/@/cool";
+import { ref } from "vue";
+import { useUi } from "/$/cool-ui";
+import AddressSelect from "/@/components/address/select.vue";
+
+const { router, service } = useCool();
+const ui = useUi();
+
+// 订单详情
+const info = ref<OrderInfo>();
+
+// 物流信息
+const logistics = ref();
+
+// 获取订单详情
+async function refresh() {
+	const { orderId } = router.query;
+
+	ui.showLoading();
+
+	try {
+		service.order.info
+			.info({
+				id: orderId,
+			})
+			.then((res) => {
+				info.value = res;
+			});
+
+		await service.order.info
+			.logistics({
+				orderId,
+			})
+			.then((res) => {
+				logistics.value = res;
+			});
+	} catch (err: any) {
+		ui.showTips(err.message, () => {
+			router.back();
+		});
+	}
+
+	ui.hideLoading();
+}
+
+// 复制物流单号
+function toCopy() {
+	uni.setClipboardData({
+		data: info.value?.logistics.num!,
+	});
+}
+
+onPullDownRefresh(async () => {
+	await refresh();
+	uni.stopPullDownRefresh();
+});
+
+onReady(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.record {
+		margin-top: 6rpx;
+	}
+}
+</style>
diff --git a/pages/order/refund.vue b/pages/order/refund.vue
new file mode 100644
index 0000000..dbcbffd
--- /dev/null
+++ b/pages/order/refund.vue
@@ -0,0 +1,126 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<view class="card">
+				<cl-list-item label="申请原因" :arrow-icon="false" :margin="[0, -20, 0, 0]">
+					<cl-select-popup
+						v-model="form.reason"
+						:border="false"
+						:options="list"
+						title="选择申请原因"
+					/>
+				</cl-list-item>
+
+				<cl-list-item label="退款金额" :arrow-icon="false">
+					<cl-text type="price" :size="40" color="error" :value="refundAmount || 0" />
+				</cl-list-item>
+			</view>
+
+			<goods-group :data="info?.goodsList" readonly />
+		</view>
+
+		<cl-footer>
+			<cl-button custom type="primary" :loading="loading" @tap="submit">提交</cl-button>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref } from "vue";
+import { useCool, useStore } from "/@/cool";
+import { onReady } from "@dcloudio/uni-app";
+import { useUi } from "/$/cool-ui";
+import GoodsGroup from "/@/components/goods/group.vue";
+
+const { service, router } = useCool();
+const ui = useUi();
+const { dict } = useStore();
+
+// 表单
+const form = reactive({
+	reason: "",
+});
+
+// 提交中
+const loading = ref(false);
+
+// 订单信息
+const info = ref<OrderInfo>();
+
+// 退款金额
+const refundAmount = computed(() => {
+	return info.value?.goodsList?.reduce((a, b) => {
+		return a + b.price * b.count;
+	}, 0);
+});
+
+// 原因列表
+const list = computed(() => {
+	return dict.get("orderRefundReason").map((e) => {
+		return {
+			label: e.label,
+			value: e.label,
+		};
+	});
+});
+
+// 获取订单信息
+async function refresh() {
+	ui.showLoading();
+
+	await service.order.info
+		.info({
+			id: router.query.orderId,
+		})
+		.then((res) => {
+			info.value = res;
+		})
+		.catch((err) => {
+			ui.showTips(err.message, () => {
+				router.back();
+			});
+		});
+
+	ui.hideLoading();
+}
+
+// 提交
+async function submit() {
+	if (!form.reason) {
+		return ui.showToast("请选择申请原因");
+	}
+
+	loading.value = true;
+
+	await service.order.info
+		.refund({
+			orderId: router.query.orderId,
+			reason: form.reason,
+		})
+		.then(() => {
+			ui.showTips("退款申请提交成功，等待商家处理", () => {
+				router.back();
+			});
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+		});
+
+	loading.value = false;
+}
+
+onReady(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.goods {
+		display: flex;
+		padding: 24rpx;
+	}
+}
+</style>
diff --git a/pages/order/submit.vue b/pages/order/submit.vue
new file mode 100644
index 0000000..33e56a8
--- /dev/null
+++ b/pages/order/submit.vue
@@ -0,0 +1,209 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<!-- 收货地址 -->
+			<address-select />
+
+			<!-- 商品列表 -->
+			<goods-group :data="list" />
+
+			<view class="card">
+				<text class="label">订单备注</text>
+
+				<cl-textarea
+					v-model="form.remark"
+					placeholder="选填，付款后商家可见"
+					background-color="#f7f7f7"
+					:border="false"
+					:margin="[8, 0, 10, 0]"
+					count
+				/>
+			</view>
+
+			<view class="card">
+				<text class="label">价格明细</text>
+
+				<cl-list-item :label="`商品总价（共${total}件商品）`" :arrow-icon="false">
+					<template #icon>
+						<cl-icon class-name="shop-icon-q-order" :size="40"></cl-icon>
+					</template>
+
+					<cl-text :size="28" type="price" :value="totalAmount"></cl-text>
+				</cl-list-item>
+
+				<cl-list-item label="优惠券">
+					<template #icon>
+						<cl-icon class-name="shop-icon-coupon" :size="40"></cl-icon>
+					</template>
+
+					<coupon-select :total-amount="totalAmount" :ref="setRefs('couponSelect')" />
+				</cl-list-item>
+
+				<cl-list-item label="合计" :arrow-icon="false">
+					<template #icon>
+						<cl-icon class-name="shop-icon-q-pay" :size="40"></cl-icon>
+					</template>
+
+					<cl-text :size="32" type="price" :value="paidAmount"></cl-text>
+				</cl-list-item>
+			</view>
+
+			<view class="card">
+				<text class="label">支付方式</text>
+
+				<cl-radio-group fill v-model="form.payType">
+					<cl-radio
+						v-for="item in order.payTypes"
+						:key="item.key"
+						:label="item.key"
+						:height="80"
+					>
+						{{ item.label }}
+						<image class="pay-icon" mode="aspectFill" :src="item.icon" />
+					</cl-radio>
+				</cl-radio-group>
+			</view>
+		</view>
+
+		<cl-footer :flex="false" border :padding="24">
+			<cl-row type="flex" justify="space-between">
+				<cl-text type="price" color="error" :size="50" :value="paidAmount" />
+				<cl-button type="primary" :width="200" :loading="loading" @tap="submit"
+					>提交订单</cl-button
+				>
+			</cl-row>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onReady } from "@dcloudio/uni-app";
+import { useCool } from "/@/cool";
+import { computed, reactive, ref } from "vue";
+import { useAddress, useShoppingCart } from "/@/hooks";
+import { useUi } from "/$/cool-ui";
+import AddressSelect from "/@/components/address/select.vue";
+import CouponSelect from "/@/components/coupon/select.vue";
+import GoodsGroup from "/@/components/goods/group.vue";
+import { useOrder } from "/@/hooks";
+
+const { router, service, refs, setRefs } = useCool();
+const address = useAddress();
+const ui = useUi();
+const spCart = useShoppingCart();
+const order = useOrder();
+
+// 表单
+const form = reactive({
+	payType: "wxpay" as "wxpay" | "alipay",
+	remark: "",
+});
+
+// 提交中
+const loading = ref(false);
+
+// 购买列表
+const list = ref<OrderGoods[]>([]);
+
+// 商品总数
+const total = computed(() => {
+	return list.value.reduce((a, b) => {
+		return a + b.count;
+	}, 0);
+});
+
+// 总金额
+const totalAmount = computed(() => {
+	return list.value.reduce((a, b) => {
+		return a + (b.spec.price || 0) * b.count;
+	}, 0);
+});
+
+// 实付金额
+const paidAmount = computed(() => {
+	return totalAmount.value - (refs.couponSelect?.checked?.amount || 0);
+});
+
+// 提交
+async function submit() {
+	if (!address.info?.id) {
+		return ui.showToast("请选择收货地址");
+	}
+
+	loading.value = true;
+
+	await service.order.info
+		.create({
+			data: {
+				remark: form.remark,
+				goodsList: list.value.map((e) => {
+					return {
+						goodsInfo: e.goodsInfo,
+						spec: e.spec,
+						count: e.count,
+						goodsId: e.goodsInfo.id,
+					};
+				}),
+				couponId: refs.couponSelect?.checked?.id,
+				addressId: address.info?.id,
+				title: "购买商品",
+			},
+		})
+		.then(async (res) => {
+			// 删除购物车数据
+			list.value.forEach((e) => {
+				spCart.delBySpecId(e.spec.id!);
+			});
+
+			// 跳转订单详情
+			function next() {
+				router.push({
+					path: "/pages/order/detail",
+					query: {
+						id: res.id,
+					},
+					mode: "redirectTo",
+				});
+			}
+
+			await order
+				.toPay(res.id)
+				.then(() => {
+					next();
+				})
+				.catch((err) => {
+					ui.showTips(err.message, () => {
+						next();
+					});
+				});
+		})
+		.catch((err) => {
+			ui.showTips(err.message, () => {
+				router.push({
+					path: "/pages/order/list",
+					mode: "redirectTo",
+				});
+			});
+		});
+
+	loading.value = false;
+}
+
+onReady(() => {
+	list.value = router.params.buyList;
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.pay-icon {
+		height: 56rpx;
+		width: 56rpx;
+		position: absolute;
+		right: 0;
+		top: calc(50% - 28rpx);
+	}
+}
+</style>
diff --git a/pages/user/about.vue b/pages/user/about.vue
new file mode 100644
index 0000000..db93eb9
--- /dev/null
+++ b/pages/user/about.vue
@@ -0,0 +1,57 @@
+<template>
+	<cl-page>
+		<view class="page-about">
+			<view class="logo">
+				<image src="/static/logo.png" />
+			</view>
+
+			<!-- 版本 -->
+			<cl-version-about />
+
+			<cl-list>
+				<cl-list-item label="联系我们" />
+			</cl-list>
+
+			<cl-text
+				block
+				align="center"
+				:size="24"
+				color="info"
+				:line-height="1.2"
+				:margin="[80, 0, 0, 0]"
+			>
+				{{ app.info.desc }}
+			</cl-text>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onReady } from "@dcloudio/uni-app";
+import { useApp } from "/@/cool";
+
+const app = useApp();
+
+onReady(() => {
+	uni.setNavigationBarTitle({
+		title: `关于${app.info.name}`,
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.page-about {
+	.logo {
+		display: flex;
+		justify-content: center;
+		padding: 100rpx 0;
+
+		image {
+			height: 160rpx;
+			width: 160rpx;
+			border-radius: 24rpx;
+			box-shadow: 0 25rpx 30rpx -25rpx #666666;
+		}
+	}
+}
+</style>
diff --git a/pages/user/address-edit.vue b/pages/user/address-edit.vue
new file mode 100644
index 0000000..9d919b0
--- /dev/null
+++ b/pages/user/address-edit.vue
@@ -0,0 +1,151 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<cl-form :ref="setRefs('form')" v-model="form" label-position="top">
+				<view class="card">
+					<cl-form-item
+						label="联系人"
+						prop="contact"
+						:rules="{
+							required: true,
+							message: '联系人不能为空',
+						}"
+					>
+						<cl-input v-model="form.contact" placeholder="请填写联系人" />
+					</cl-form-item>
+
+					<cl-form-item
+						label="手机号码"
+						prop="phone"
+						:rules="{
+							required: true,
+							message: '手机号码不能为空',
+						}"
+					>
+						<cl-input
+							v-model="form.phone"
+							:maxlength="11"
+							placeholder="请填写手机号码"
+						/>
+					</cl-form-item>
+
+					<cl-form-item
+						label="省市区"
+						prop="province"
+						required
+						:rules="{
+							required: true,
+							message: '省市区不能为空',
+						}"
+					>
+						<cl-select-city v-model="pca" @change="onPcaChange" />
+					</cl-form-item>
+
+					<cl-form-item
+						label="详细地址"
+						prop="address"
+						:rules="{
+							required: true,
+							message: '详细地址不能为空',
+						}"
+						:margin="[0, 0, 10, 0]"
+					>
+						<cl-textarea v-model="form.address" count placeholder="街道、楼牌号等" />
+					</cl-form-item>
+				</view>
+
+				<view class="card">
+					<cl-row type="flex" justify="space-between" :padding="[10, 0, 10, 0]">
+						<cl-row>
+							<cl-text :size="28" block :margin="[0, 0, 6, 0]">设置默认地址</cl-text>
+							<cl-text :size="22" color="info">提醒：下单会优先使用该地址</cl-text>
+						</cl-row>
+
+						<cl-switch v-model="form.isDefault" />
+					</cl-row>
+				</view>
+			</cl-form>
+		</view>
+
+		<cl-footer>
+			<cl-button custom type="primary" @tap="save">保存</cl-button>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useCool } from "/@/cool";
+import { onReady } from "@dcloudio/uni-app";
+import { useUi } from "/$/cool-ui";
+
+const { service, router, refs, setRefs } = useCool();
+const ui = useUi();
+
+// 省市区
+const pca = ref<string[]>([]);
+
+// 表单
+const form = ref<Eps.UserAddressEntity>({});
+
+// 监听省市区改变
+function onPcaChange([province, city, district]: string[]) {
+	form.value.province = province;
+	form.value.city = city;
+	form.value.district = district;
+}
+
+// 获取地址详情
+async function refresh() {
+	ui.showLoading();
+
+	await service.user.address
+		.info({
+			id: router.query.id,
+		})
+		.then((res) => {
+			form.value = res;
+			pca.value = [res.province!, res.city!, res.district!];
+		})
+		.catch((err) => {
+			ui.showToast(err.message);
+		});
+
+	ui.hideLoading();
+}
+
+// 保存
+function save() {
+	refs.form.validate((valid: boolean) => {
+		if (valid) {
+			service.user.address[form.value.id ? "update" : "add"](form.value)
+				.then(() => {
+					ui.showTips("地址保存成功", () => {
+						router.back();
+					});
+				})
+				.catch((err) => {
+					ui.showToast(err.message);
+				});
+		}
+	});
+}
+
+onReady(() => {
+	const { id } = router.query;
+
+	if (id) {
+		refresh();
+	}
+
+	uni.setNavigationBarTitle({
+		title: id ? "编辑地址" : "添加地址",
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+}
+</style>
diff --git a/pages/user/address-list.vue b/pages/user/address-list.vue
new file mode 100644
index 0000000..794a413
--- /dev/null
+++ b/pages/user/address-list.vue
@@ -0,0 +1,116 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<view class="list">
+				<view class="item" v-for="(item, index) in list" :key="item.id">
+					<cl-list-item swipe="right" :arrow-icon="false" :radius="16">
+						<template #menu>
+							<cl-button type="error" @tap="del(item.id!, index)">删除</cl-button>
+						</template>
+
+						<address-item :item="item">
+							<template #icon>
+								<cl-icon name="edit" :size="34" @tap="edit(item.id)" />
+							</template>
+						</address-item>
+					</cl-list-item>
+				</view>
+			</view>
+
+			<cl-empty icon="address" v-if="isEmpty(list)" />
+		</view>
+
+		<cl-footer>
+			<cl-button custom type="primary" @tap="edit()">添加收货地址</cl-button>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onReady, onShow } from "@dcloudio/uni-app";
+import { useCool, usePager } from "/@/cool";
+import { isEmpty } from "lodash-es";
+import { useUi } from "/$/cool-ui";
+import AddressItem from "/@/components/address/item.vue";
+
+const { service, router } = useCool();
+const { list, onRefresh } = usePager<Eps.UserAddressEntity>();
+const ui = useUi();
+
+// 刷新
+function refresh(params?: any, loading?: boolean) {
+	const { data, next } = onRefresh(params, { loading });
+	next(service.user.address.page(data));
+}
+
+// 添加、编辑
+function edit(id?: number) {
+	router.push({
+		path: "/pages/user/address-edit",
+		query: {
+			id,
+		},
+	});
+}
+
+// 删除
+function del(id: number, index: number) {
+	ui.showConfirm({
+		title: "提示",
+		message: "确定删除该地址吗？",
+		callback(action) {
+			if (action == "confirm") {
+				service.user.address
+					.delete({
+						ids: [id],
+					})
+					.then(() => {
+						list.value.splice(index, 1);
+						ui.showToast("删除成功");
+					})
+					.catch((err) => {
+						ui.showToast(err.message);
+					});
+			}
+		},
+	});
+}
+
+onShow(() => {
+	if (ui.loaded) {
+		refresh({}, false);
+	}
+});
+
+onReady(() => {
+	refresh();
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.list {
+		.item {
+			margin-bottom: 24rpx;
+
+			address-item {
+				flex: 1;
+			}
+
+			:deep(.address-item) {
+				padding: 14rpx 4rpx;
+			}
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/user/captcha.vue b/pages/user/captcha.vue
new file mode 100644
index 0000000..112924e
--- /dev/null
+++ b/pages/user/captcha.vue
@@ -0,0 +1,132 @@
+<template>
+	<cl-page background-color="#fff">
+		<view class="page-captcha">
+			<cl-topbar :border="false"> </cl-topbar>
+
+			<view class="container">
+				<text class="label">输入验证码</text>
+				<text class="tips">已发送至 +86 {{ form.phone }}</text>
+
+				<view class="code">
+					<cl-captcha
+						focus
+						v-model="form.smsCode"
+						:length="len"
+						:gutter="26"
+						@done="next"
+					/>
+				</view>
+
+				<cl-button
+					type="primary"
+					:disabled="form.smsCode.length !== len"
+					:loading="saving"
+					fill
+					:height="90"
+					:font-size="30"
+					@tap="next"
+				>
+					确定
+				</cl-button>
+
+				<view class="send">
+					<sms-btn
+						size="small"
+						:border="false"
+						:phone="form.phone"
+						:ref="setRefs('smsBtn')"
+					/>
+				</view>
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onReady } from "@dcloudio/uni-app";
+import { reactive, ref } from "vue";
+import { useCool, useStore } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+import SmsBtn from "/@/components/sms-btn.vue";
+
+const { service, router, refs, setRefs } = useCool();
+const { user } = useStore();
+const ui = useUi();
+
+// 验证码长度
+const len = 4;
+
+// 保存状态
+const saving = ref(false);
+
+// 表单
+const form = reactive({
+	smsCode: "",
+	phone: "",
+});
+
+// 下一步
+function next() {
+	saving.value = true;
+
+	service.user.login
+		.phone(form)
+		.then(async (res) => {
+			// 设置token
+			user.setToken(res);
+
+			// 设置用户信息
+			await user.get();
+
+			// 登录跳转
+			router.nextLogin();
+		})
+		.catch((err) => {
+			ui.showTips(err.message || "登录失效，请重试~");
+			saving.value = false;
+			form.smsCode = "";
+		});
+}
+
+onReady(() => {
+	form.phone = router.query.phone || "";
+	refs.smsBtn.startCountdown();
+});
+</script>
+
+<style lang="scss" scoped>
+.page-captcha {
+	.container {
+		display: flex;
+		flex-direction: column;
+		width: 80%;
+		margin: 0 auto;
+		padding-top: 140rpx;
+	}
+
+	.label {
+		font-size: 52rpx;
+		font-weight: 500;
+		margin-bottom: 44rpx;
+		font-weight: bold;
+		color: #151515;
+	}
+
+	.tips {
+		font-size: 28rpx;
+		color: #151515;
+		font-weight: 500;
+	}
+
+	.code {
+		margin: 34rpx -26rpx 62rpx -26rpx;
+	}
+
+	.send {
+		display: flex;
+		justify-content: center;
+		font-size: 24rpx;
+		margin-top: 30rpx;
+	}
+}
+</style>
diff --git a/pages/user/doc.vue b/pages/user/doc.vue
new file mode 100644
index 0000000..1bc5b51
--- /dev/null
+++ b/pages/user/doc.vue
@@ -0,0 +1,37 @@
+<template>
+	<view class="doc mp-html">
+		<mp-html :content="content"></mp-html>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { onReady } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import { useCool } from "/@/cool";
+
+const { router, service } = useCool();
+
+const content = ref("");
+
+onReady(() => {
+	const { title, key } = router.query;
+
+	uni.setNavigationBarTitle({
+		title,
+	});
+
+	service.base.comm
+		.param({
+			key,
+		})
+		.then((res) => {
+			content.value = res;
+		});
+});
+</script>
+
+<style lang="scss" scoped>
+.doc {
+	padding: 20rpx;
+}
+</style>
diff --git a/pages/user/edit.vue b/pages/user/edit.vue
new file mode 100644
index 0000000..a8b7b6d
--- /dev/null
+++ b/pages/user/edit.vue
@@ -0,0 +1,67 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<view class="form">
+				<cl-form label-position="top">
+					<cl-form-item label="昵称">
+						<cl-input
+							v-model="form.nickName"
+							type="nickname"
+							:border="false"
+							:height="80"
+							:border-radius="12"
+							placeholder="请填写昵称"
+						/>
+					</cl-form-item>
+				</cl-form>
+			</view>
+
+			<cl-footer>
+				<cl-button custom type="primary" :loading="loading" @tap="save"> 保存 </cl-button>
+			</cl-footer>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { useCool, useStore } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+import { onReady } from "@dcloudio/uni-app";
+
+const { router } = useCool();
+const { user } = useStore();
+const ui = useUi();
+
+const loading = ref(false);
+
+const form = reactive({
+	nickName: "",
+});
+
+async function save() {
+	loading.value = true;
+
+	await user.update(form).catch((err) => {
+		ui.showToast(err.message);
+	});
+
+	loading.value = false;
+
+	ui.showTips("用户信息保存成功", () => {
+		router.back();
+	});
+}
+
+onReady(() => {
+	form.nickName = user.info?.nickName || "";
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	.form {
+		padding: 20rpx 24rpx;
+	}
+}
+</style>
diff --git a/pages/user/login.vue b/pages/user/login.vue
new file mode 100644
index 0000000..acecfd9
--- /dev/null
+++ b/pages/user/login.vue
@@ -0,0 +1,473 @@
+<template>
+	<cl-page background-color="#fff">
+		<cl-topbar :border="false" background-color="transparent" />
+
+		<view class="page-login">
+			<!-- Logo -->
+			<view class="logo">
+				<image src="/static/logo.png" mode="aspectFill" />
+				<text>{{ app.info.name }}</text>
+			</view>
+
+			<div class="container">
+				<!-- 登录方式 -->
+				<view class="mode" :class="[`is-${mode}`]">
+					<!-- 手机号 -->
+					<template v-if="mode == 'phone'">
+						<text class="label">手机号登录</text>
+
+						<view class="phone">
+							<text>+86</text>
+							<cl-input
+								v-model="phone"
+								type="number"
+								placeholder="请填写手机号码"
+								:border="false"
+								:maxlength="11"
+								:font-size="30"
+								background-color="transparent"
+							/>
+						</view>
+
+						<sms-btn
+							:ref="setRefs('smsBtn')"
+							:phone="phone"
+							@success="phoneLogin(false)"
+						>
+							<template #default="{ disabled, btnText }">
+								<cl-button
+									fill
+									type="primary"
+									:height="90"
+									:font-size="30"
+									:disabled="disabled"
+									@tap="phoneLogin"
+								>
+									{{ btnText }}
+								</cl-button>
+							</template>
+						</sms-btn>
+					</template>
+
+					<!-- 微信登录 -->
+					<template v-else-if="mode == 'wx'">
+						<cl-button
+							type="primary"
+							fill
+							:height="90"
+							:font-size="30"
+							:loading="loading"
+							@tap="wxLogin"
+						>
+							微信一键登录
+						</cl-button>
+					</template>
+
+					<!-- 协议 -->
+					<view class="agree">
+						<agree-btn :ref="setRefs('agreeBtn')" />
+					</view>
+				</view>
+			</div>
+
+			<!-- 其他登录方式 -->
+			<view class="other" v-if="!isEmpty(platformsEnv)">
+				<cl-divider width="400rpx" background-color="#ffffff">
+					<cl-text color="#ccc" value="其他登录方式" />
+				</cl-divider>
+
+				<view class="platform">
+					<view
+						class="platform__item"
+						v-for="(item, index) in platformsEnv"
+						:key="index"
+						@tap="changeMode(item)"
+					>
+						<image :src="item.icon" mode="aspectFit" v-if="item.icon" />
+						<text>{{ item.label }}</text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { computed, reactive, ref } from "vue";
+import { onReady } from "@dcloudio/uni-app";
+import { useApp, useCool, useStore, useWx } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+import SmsBtn from "/@/components/sms-btn.vue";
+import AgreeBtn from "/@/components/agree-btn.vue";
+import { config } from "/@/config";
+import { ctx } from "virtual:ctx";
+import { cloneDeep, isEmpty } from "lodash-es";
+
+interface Platform {
+	label: string;
+	value: any;
+	icon?: string;
+	hidden?: boolean;
+	onClick?: () => void;
+}
+
+const { service, router, refs, setRefs, storage } = useCool();
+const { user } = useStore();
+const app = useApp();
+const ui = useUi();
+const wx = useWx();
+
+// 登录中
+const loading = ref(false);
+
+// 手机号
+const phone = ref(storage.get("phone") || "");
+
+// 登录方式
+const mode = ref();
+
+// 登录平台
+const platforms = ref<Platform[]>([
+	{
+		label: "通过手机登录",
+		value: "phone",
+		icon: "/pages/user/static/icon/phone.png",
+		hidden: false,
+	},
+	{
+		label: "通过微信登录",
+		value: "wx",
+		icon: "/pages/user/static/icon/wx.png",
+		hidden: true,
+	},
+]);
+
+// 环境校验
+const platformsEnv = computed(() => {
+	let arr = cloneDeep(platforms.value);
+
+	// #ifdef H5
+	if (wx.isWxBrowser()) {
+		arr[1].hidden = false;
+	}
+	// #endif
+
+	// #ifdef MP-WEIXIN
+	arr[1].hidden = false;
+	// #endif
+
+	// 过滤隐藏的
+	arr = arr.filter((e) => !e.hidden);
+
+	// 默认第一个登录方式
+	if (!mode.value) {
+		mode.value = arr[0]?.value;
+	}
+
+	// 过滤不是当前登录方式
+	return arr.filter((e) => e.value != mode.value);
+});
+
+// 切换模式
+function changeMode(item: Platform) {
+	if (item.onClick) {
+		item.onClick();
+	} else {
+		mode.value = item.value;
+	}
+}
+
+// 登录请求
+async function nextLogin(key: "mini" | "mp" | "uniPhone", data: any) {
+	return service.user.login[key](data)
+		.then(async (res) => {
+			// 设置token
+			user.setToken(res);
+
+			// 获取用户信息
+			await user.get();
+
+			// 登录跳转
+			router.nextLogin(key);
+		})
+		.catch((err) => {
+			ui.showTips(err.message);
+		});
+}
+
+// 短信登录
+function phoneLogin(sms?: boolean) {
+	if (sms) {
+		check(() => {
+			refs.smsBtn.open();
+		});
+	} else {
+		storage.set("phone", phone.value);
+
+		router.push({
+			path: "/pages/user/captcha",
+			query: {
+				phone: phone.value,
+			},
+		});
+	}
+}
+
+// 微信登录
+function wxLogin() {
+	check(async () => {
+		// #ifdef APP
+		if (wx.hasApp()) {
+			wx.appLogin().then((code) => {
+				//
+			});
+		} else {
+			ui.showConfirm({
+				title: "温馨提示",
+				message: "您还未安装微信~",
+				showCancelButton: false,
+				confirmButtonText: "去下载",
+				callback(action) {
+					if (action == "confirm") {
+						wx.downloadApp();
+					}
+				},
+			});
+		}
+		// #endif
+
+		// #ifdef MP-WEIXIN
+		loading.value = true;
+
+		await wx
+			.miniLogin()
+			.then(async (res) => {
+				await nextLogin("mini", res);
+			})
+			.catch((err) => {
+				ui.showToast(err.message);
+			});
+
+		loading.value = false;
+		// #endif
+
+		// #ifdef H5
+		wx.mpAuth();
+		// #endif
+	});
+}
+
+// 公众号登录
+function mpLogin() {
+	// #ifdef H5
+	wx.mpLogin().then(async (code) => {
+		if (code) {
+			ui.showLoading();
+			await nextLogin("mp", { code });
+			ui.hideLoading();
+		}
+	});
+	// #endif
+}
+
+// 协议检测
+function check(cb: () => void) {
+	if (refs.agreeBtn.check()) {
+		cb();
+	}
+}
+
+// 手机号一键登录
+const univerify = reactive({
+	error: "",
+
+	check() {
+		// #ifdef APP
+		uni.preLogin({
+			provider: "univerify",
+			success() {
+				platforms.value.push({
+					label: "手机号一键登录",
+					value: "univerify",
+					onClick() {
+						univerify.login();
+					},
+				});
+			},
+			fail(err) {
+				univerify.error = err.metadata?.msg || "当前环境不支持一键登录，请切换至验证码登录";
+			},
+		});
+		// #endif
+	},
+
+	login() {
+		uni.login({
+			provider: "univerify",
+			univerifyStyle: {
+				authButton: {
+					normalColor: "#6b69f8",
+					highlightColor: "#6b69f8",
+					disabledColor: "#73aaf5",
+					textColor: "#ffffff",
+					title: "一键登录",
+					borderRadius: "12px",
+				},
+				privacyTerms: {
+					defaultCheckBoxState: true, // 条款勾选框初始状态
+					textColor: "#BBBBBB",
+					termsColor: "#5496E3",
+					prefix: "我已阅读并同意",
+					suffix: "并使用本机号码登录",
+					privacyItems: [
+						// 自定义协议条款，最大支持2个，需要同时设置url和title. 否则不生效
+						{
+							url: `${config.baseUrl}/app/base/comm/html?key=userAgreement`,
+							title: "用户协议",
+						},
+						{
+							url: `${config.baseUrl}/app/base/comm/html?key=privacyPolicy`,
+							title: "隐私政策",
+						},
+					],
+				},
+			},
+			async success(res: { authResult: any }) {
+				await nextLogin("uniPhone", {
+					appId: ctx.appid,
+					...res.authResult,
+				});
+
+				uni.closeAuthView();
+			},
+			fail() {
+				if (univerify.error) {
+					ui.showToast(univerify.error);
+				}
+			},
+		});
+	},
+});
+
+// 手机号一键登录环境检测
+univerify.check();
+
+onReady(() => {
+	// 公众号登录授权回调
+	mpLogin();
+});
+</script>
+
+<style lang="scss" scoped>
+.page-login {
+	.logo {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		padding-top: 20%;
+
+		image {
+			display: block;
+			height: 150rpx;
+			width: 150rpx;
+			border-radius: 24rpx;
+			margin-bottom: 30rpx;
+			box-shadow: 0 25rpx 30rpx -25rpx #666666;
+		}
+
+		text {
+			font-size: 36rpx;
+			font-weight: bold;
+			letter-spacing: 1rpx;
+			color: #333;
+		}
+	}
+
+	.container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin-top: 80rpx;
+
+		.mode {
+			width: 100%;
+			padding: 0 80rpx;
+			box-sizing: border-box;
+
+			.label {
+				display: block;
+				font-size: 36rpx;
+				font-weight: 500;
+				margin-bottom: 30rpx;
+			}
+
+			&.is-phone {
+				.phone {
+					display: flex;
+					align-items: center;
+					background-color: #eeeeee;
+					border-radius: 10rpx;
+					height: 90rpx;
+					margin-bottom: 30rpx;
+					font-size: 30rpx;
+
+					text {
+						display: inline-block;
+						padding: 0 40rpx;
+						border-right: $cl-border-width solid $cl-border-color;
+						font-weight: bold;
+						color: #404040;
+					}
+
+					input {
+						height: 100%;
+						flex: 1;
+						padding: 0 30rpx;
+					}
+				}
+			}
+		}
+
+		.agree {
+			text-align: center;
+			margin: 50rpx -60rpx 0 0;
+		}
+	}
+
+	.other {
+		margin-top: 100rpx;
+
+		.platform {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			margin: 20rpx 0 60rpx 0;
+
+			&__item {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border: 1px solid #000000;
+				height: 30px;
+				width: 130px;
+				margin-bottom: 28rpx;
+				border-radius: 6px;
+				background-color: #ffffff;
+
+				image {
+					height: 32rpx;
+					width: 32rpx;
+					margin-right: 10rpx;
+				}
+
+				text {
+					font-size: 24rpx;
+					color: #000000;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/user/set.vue b/pages/user/set.vue
new file mode 100644
index 0000000..6e09f09
--- /dev/null
+++ b/pages/user/set.vue
@@ -0,0 +1,154 @@
+<template>
+	<cl-page>
+		<view class="page-set">
+			<template v-if="user.info">
+				<cl-text value="账号" :margin="[0, 0, 20, 20]" block />
+
+				<cl-list :radius="16">
+					<cl-list-item label="头像" :arrow-icon="false">
+						<view class="avatar">
+							<!-- #ifdef MP-WEIXIN -->
+							<button open-type="chooseAvatar" @chooseavatar="uploadAvatar">
+								<cl-avatar round :size="88" :src="user.info.avatarUrl" />
+							</button>
+							<!-- #endif -->
+
+							<!-- #ifndef MP-WEIXIN -->
+							<cl-avatar
+								round
+								:size="88"
+								:src="user.info.avatarUrl"
+								@tap="uploadAvatar()"
+							/>
+							<!-- #endif -->
+						</view>
+					</cl-list-item>
+					<cl-list-item label="昵称" @tap="router.push('/pages/user/edit')">
+						<cl-text :value="user.info.nickName" />
+					</cl-list-item>
+					<cl-list-item label="手机号" :arrow-icon="false">
+						<cl-text :value="user.info.phone" />
+					</cl-list-item>
+					<cl-list-item label="ID" :arrow-icon="false" :border="false">
+						<cl-text :value="user.info.id" />
+					</cl-list-item>
+				</cl-list>
+			</template>
+
+			<cl-text value="关于" :margin="[30, 0, 20, 20]" block />
+
+			<cl-list :radius="16">
+				<cl-list-item
+					:label="`关于${app.info.name}`"
+					@tap="router.push('/pages/user/about')"
+				/>
+
+				<cl-list-item
+					label="用户协议"
+					@tap="
+						router.push({
+							path: '/pages/user/doc',
+							query: {
+								key: 'userAgreement',
+								title: '用户协议',
+							},
+						})
+					"
+				/>
+				<cl-list-item
+					label="隐私政策"
+					@tap="
+						router.push({
+							path: '/pages/user/doc',
+							query: {
+								key: 'privacyPolicy',
+								title: '隐私政策',
+							},
+						})
+					"
+				/>
+			</cl-list>
+
+			<cl-text value="反馈" :margin="[30, 0, 20, 20]" block />
+
+			<cl-list :radius="16">
+				<cl-list-item
+					label="意见反馈"
+					@tap="router.push('/uni_modules/cool-app/pages/feedback/list')"
+				/>
+				<cl-list-item
+					label="投诉举报"
+					@tap="router.push('/uni_modules/cool-app/pages/complain/list')"
+				/>
+			</cl-list>
+
+			<cl-list :radius="16">
+				<cl-list-item label="切换账号" @tap="router.push('/pages/user/login')" />
+				<cl-list-item label="退出登录" :arrow-icon="false" @tap="user.logout()">
+					<cl-icon :size="36" name="exit" />
+				</cl-list-item>
+			</cl-list>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onReady } from "@dcloudio/uni-app";
+import { useApp, useCool, useStore } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+
+const { router, upload } = useCool();
+const { user } = useStore();
+const ui = useUi();
+const app = useApp();
+
+// 上传头像
+function uploadAvatar(e?: { detail: { avatarUrl: string } }) {
+	function next(path: string) {
+		upload({ path }).then((url) => {
+			ui.showToast("头像更新成功");
+
+			user.update({
+				avatarUrl: url,
+			});
+		});
+	}
+
+	if (e) {
+		next(e.detail.avatarUrl);
+	} else {
+		uni.chooseImage({
+			count: 1,
+			success(res) {
+				next(res.tempFiles[0].path);
+			},
+		});
+	}
+}
+
+onReady(() => {
+	user.get();
+});
+</script>
+
+<style lang="scss" scoped>
+.page-set {
+	padding: 20rpx 24rpx;
+
+	.avatar {
+		padding: 10rpx 0;
+		height: 88rpx;
+
+		button {
+			padding: 0;
+			margin: 0;
+			line-height: normal;
+			background-color: transparent;
+
+			&::after {
+				border: 0;
+			}
+		}
+	}
+}
+</style>
diff --git a/pages/user/static/icon/apple.png b/pages/user/static/icon/apple.png
new file mode 100644
index 0000000..2d0586e
Binary files /dev/null and b/pages/user/static/icon/apple.png differ
diff --git a/pages/user/static/icon/phone.png b/pages/user/static/icon/phone.png
new file mode 100644
index 0000000..fae242b
Binary files /dev/null and b/pages/user/static/icon/phone.png differ
diff --git a/pages/user/static/icon/wx.png b/pages/user/static/icon/wx.png
new file mode 100644
index 0000000..edd8c90
Binary files /dev/null and b/pages/user/static/icon/wx.png differ
diff --git a/router/index.ts b/router/index.ts
new file mode 100644
index 0000000..4eb98c4
--- /dev/null
+++ b/router/index.ts
@@ -0,0 +1,27 @@
+import { router, useStore } from "/@/cool";
+
+const ignoreToken = [
+	"/pages/index/home",
+	"/pages/index/category",
+	"/pages/index/shopping-cart",
+	"/pages/goods/detail",
+	"/pages/goods/search",
+	"/pages/goods/list",
+	"/pages/user/login",
+	"/pages/user/captcha",
+	"/pages/user/doc",
+];
+
+router.beforeEach((to, next) => {
+	const { user } = useStore();
+
+	if (ignoreToken.includes(to.path) || to.path.startsWith("/pages/demo")) {
+		next();
+	} else {
+		if (user.token) {
+			next();
+		} else {
+			router.login();
+		}
+	}
+});
diff --git a/service/test.ts b/service/test.ts
new file mode 100644
index 0000000..5b6aa7b
--- /dev/null
+++ b/service/test.ts
@@ -0,0 +1,6 @@
+import { BaseService, Service } from "/@/cool";
+
+@Service("test")
+class Test extends BaseService {}
+
+export default Test;
diff --git a/static/css/common.scss b/static/css/common.scss
new file mode 100644
index 0000000..1bc6bbb
--- /dev/null
+++ b/static/css/common.scss
@@ -0,0 +1,47 @@
+.cl-button {
+	&.is-custom {
+		height: 80rpx;
+		font-size: 30rpx;
+		width: 100%;
+	}
+}
+
+.cl-empty {
+	&__icon {
+		height: 300rpx;
+	}
+}
+
+.card {
+	background-color: #ffffff;
+	padding: 14rpx 24rpx;
+	margin-bottom: 24rpx;
+	border-radius: 24rpx;
+
+	.label {
+		display: flex;
+		align-items: center;
+		font-size: 28rpx;
+		line-height: 1;
+		font-weight: 500;
+		padding: 10rpx 0 14rpx 0;
+	}
+
+	:deep(.cl-list-item) {
+		.cl-list-item__label {
+			font-size: 26rpx;
+		}
+
+		.cl-list-item__container {
+			padding: 0;
+		}
+
+		.cl-list-item__content {
+			min-height: auto;
+		}
+	}
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
diff --git a/static/css/iconfont/font.ttf b/static/css/iconfont/font.ttf
new file mode 100644
index 0000000..0d5b620
Binary files /dev/null and b/static/css/iconfont/font.ttf differ
diff --git a/static/css/iconfont/font.woff b/static/css/iconfont/font.woff
new file mode 100644
index 0000000..0ee4622
Binary files /dev/null and b/static/css/iconfont/font.woff differ
diff --git a/static/css/iconfont/font.woff2 b/static/css/iconfont/font.woff2
new file mode 100644
index 0000000..fe43698
Binary files /dev/null and b/static/css/iconfont/font.woff2 differ
diff --git a/static/css/iconfont/index.scss b/static/css/iconfont/index.scss
new file mode 100644
index 0000000..dc00689
--- /dev/null
+++ b/static/css/iconfont/index.scss
@@ -0,0 +1,134 @@
+@font-face {
+	font-family: "shop-iconfont"; /* Project id 1805670 */
+	src:
+		url("font.woff2") format("woff2"),
+		url("font.woff") format("woff"),
+		url("font.ttf") format("truetype");
+}
+
+[class*="shop-icon-"] {
+	font-family: "shop-iconfont";
+	font-size: inherit;
+	font-style: normal;
+	line-height: 1;
+}
+
+.shop-icon-list:before {
+	content: "\ec87";
+}
+
+.shop-icon-list2:before {
+	content: "\ec88";
+}
+
+.shop-icon-order-close:before {
+	content: "\ec86";
+}
+
+.shop-icon-order-success:before {
+	content: "\ec85";
+}
+
+.shop-icon-order-comment:before {
+	content: "\ec7b";
+}
+
+.shop-icon-order-received:before {
+	content: "\ec7d";
+}
+
+.shop-icon-order-paid:before {
+	content: "\ec7e";
+}
+
+.shop-icon-order-not-shipped:before {
+	content: "\ec7f";
+}
+
+.shop-icon-order-refund:before {
+	content: "\ec80";
+}
+
+.shop-icon-order-received2:before {
+	content: "\ec81";
+}
+
+.shop-icon-zoom:before {
+	content: "\ec82";
+}
+
+.shop-icon-sku:before {
+	content: "\e762";
+}
+
+.shop-icon-set:before {
+	content: "\e761";
+}
+
+.shop-icon-home:before {
+	content: "\ec7a";
+}
+
+.shop-icon-shopping-cart:before {
+	content: "\ec79";
+}
+
+.shop-icon-more:before {
+	content: "\e657";
+}
+
+.shop-icon-q-order:before {
+	content: "\e697";
+}
+
+.shop-icon-q-pay:before {
+	content: "\e698";
+}
+
+.shop-icon-q-refund:before {
+	content: "\e699";
+}
+
+.shop-icon-q-logistics:before {
+	content: "\e69a";
+}
+
+.shop-icon-setting:before {
+	content: "\e68b";
+}
+
+.shop-icon-coupon:before {
+	content: "\e68c";
+}
+
+.shop-icon-order:before {
+	content: "\e68d";
+}
+
+.shop-icon-location:before {
+	content: "\e68e";
+}
+
+.shop-icon-filter:before {
+	content: "\e68f";
+}
+
+.shop-icon-message:before {
+	content: "\e691";
+}
+
+.shop-icon-delete:before {
+	content: "\e693";
+}
+
+.shop-icon-sort:before {
+	content: "\e694";
+}
+
+.shop-icon-search:before {
+	content: "\e695";
+}
+
+.shop-icon-custom:before {
+	content: "\e696";
+}
diff --git a/static/css/index.scss b/static/css/index.scss
new file mode 100644
index 0000000..4d82f70
--- /dev/null
+++ b/static/css/index.scss
@@ -0,0 +1,43 @@
+/* #ifdef H5 */
+* {
+	font-family: Arial, "Microsoft Yahei", "微软雅黑";
+}
+
+.uni-page-head-btn {
+	display: inline-flex;
+	align-items: center;
+}
+/* #endif */
+
+// 主题
+.cl-page {
+	&.theme-default {
+		// 渐变色
+		.cl-tag.cl-tag--primary:not(.is-plain),
+		.cl-button--primary:not(.is-plain) {
+			background: linear-gradient(120deg, rgba($cl-color-primary, 0.7), $cl-color-primary);
+			border: 0;
+		}
+	}
+}
+
+// 其他
+.flex1 {
+	flex: 1;
+}
+
+.mp-html {
+	img,
+	image {
+		display: block;
+		max-width: 100%;
+	}
+
+	/* #ifndef MP */
+	* {
+		margin: revert !important;
+	}
+	/* #endif */
+}
+
+@import "./common.scss";
diff --git a/static/empty/address.png b/static/empty/address.png
new file mode 100644
index 0000000..f5edebb
Binary files /dev/null and b/static/empty/address.png differ
diff --git a/static/empty/comm.png b/static/empty/comm.png
new file mode 100644
index 0000000..2b72a95
Binary files /dev/null and b/static/empty/comm.png differ
diff --git a/static/empty/coupon.png b/static/empty/coupon.png
new file mode 100644
index 0000000..84471d3
Binary files /dev/null and b/static/empty/coupon.png differ
diff --git a/static/empty/message.png b/static/empty/message.png
new file mode 100644
index 0000000..09f8b9f
Binary files /dev/null and b/static/empty/message.png differ
diff --git a/static/empty/network.png b/static/empty/network.png
new file mode 100644
index 0000000..8c7b637
Binary files /dev/null and b/static/empty/network.png differ
diff --git a/static/empty/order.png b/static/empty/order.png
new file mode 100644
index 0000000..5c30fc3
Binary files /dev/null and b/static/empty/order.png differ
diff --git a/static/empty/spopping-cart.png b/static/empty/spopping-cart.png
new file mode 100644
index 0000000..6d574f3
Binary files /dev/null and b/static/empty/spopping-cart.png differ
diff --git a/static/icon/alipay.png b/static/icon/alipay.png
new file mode 100644
index 0000000..7f5b22c
Binary files /dev/null and b/static/icon/alipay.png differ
diff --git a/static/icon/tabbar/category.png b/static/icon/tabbar/category.png
new file mode 100644
index 0000000..309e9e6
Binary files /dev/null and b/static/icon/tabbar/category.png differ
diff --git a/static/icon/tabbar/category2.png b/static/icon/tabbar/category2.png
new file mode 100644
index 0000000..07c8606
Binary files /dev/null and b/static/icon/tabbar/category2.png differ
diff --git a/static/icon/tabbar/home.png b/static/icon/tabbar/home.png
new file mode 100644
index 0000000..ffc6ce3
Binary files /dev/null and b/static/icon/tabbar/home.png differ
diff --git a/static/icon/tabbar/home2.png b/static/icon/tabbar/home2.png
new file mode 100644
index 0000000..9959444
Binary files /dev/null and b/static/icon/tabbar/home2.png differ
diff --git a/static/icon/tabbar/my.png b/static/icon/tabbar/my.png
new file mode 100644
index 0000000..c2a4a75
Binary files /dev/null and b/static/icon/tabbar/my.png differ
diff --git a/static/icon/tabbar/my2.png b/static/icon/tabbar/my2.png
new file mode 100644
index 0000000..2c880a9
Binary files /dev/null and b/static/icon/tabbar/my2.png differ
diff --git a/static/icon/tabbar/shopping-cart.png b/static/icon/tabbar/shopping-cart.png
new file mode 100644
index 0000000..52cf657
Binary files /dev/null and b/static/icon/tabbar/shopping-cart.png differ
diff --git a/static/icon/tabbar/shopping-cart2.png b/static/icon/tabbar/shopping-cart2.png
new file mode 100644
index 0000000..ddfcbea
Binary files /dev/null and b/static/icon/tabbar/shopping-cart2.png differ
diff --git a/static/icon/wxpay.png b/static/icon/wxpay.png
new file mode 100644
index 0000000..044be3c
Binary files /dev/null and b/static/icon/wxpay.png differ
diff --git a/static/logo.png b/static/logo.png
new file mode 100644
index 0000000..587669e
Binary files /dev/null and b/static/logo.png differ
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..9086324
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,21 @@
+{
+	"extends": "@vue/tsconfig/tsconfig.json",
+	"compilerOptions": {
+		"ignoreDeprecations": "5.0",
+		"verbatimModuleSyntax": true,
+		"experimentalDecorators": true,
+		"sourceMap": true,
+		"resolveJsonModule": true,
+		"esModuleInterop": true,
+		"allowJs": true,
+		"paths": {
+			"/@/*": ["./*"],
+			"/$/*": ["./uni_modules/*"]
+		},
+		"lib": ["esnext", "dom"],
+		"types": ["@dcloudio/types"],
+		"outDir": "esbuild"
+	},
+	"include": ["**/*.ts", "**/*.vue", "main.js", "types/*.d.ts"],
+	"exclude": ["node_modules", "dist"]
+}
diff --git a/types/env.d.ts b/types/env.d.ts
new file mode 100644
index 0000000..0efc421
--- /dev/null
+++ b/types/env.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="vite/client" />
+/// <reference types="@dcloudio/types/uni-app/index.d.ts" />
+/// <reference types="../build/cool/eps.d.ts" />
+/// <reference types="../uni_modules/cool-ui/types/index.d.ts" />
+
+declare module "*.vue" {
+	import { DefineComponent } from "vue";
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+	const component: DefineComponent<{}, {}, any>;
+	export default component;
+}
+
+declare module "virtual:ctx";
+declare module "virtual:eps";
+declare module "@dcloudio/vite-plugin-uni";
diff --git a/types/shop.d.ts b/types/shop.d.ts
new file mode 100644
index 0000000..fec2de3
--- /dev/null
+++ b/types/shop.d.ts
@@ -0,0 +1,36 @@
+declare interface OrderGoods {
+	id?: any;
+	count: number;
+	isComment?: number;
+	orderId?: number;
+	price?: any;
+	spec: Eps.GoodsSpecEntity;
+	goodsInfo: Eps.GoodsInfoEntity;
+	[key: string]: any;
+}
+
+declare interface CouponInfo extends Eps.MarketCouponInfoEntity {
+	condition?: {
+		fullAmount: number;
+	};
+}
+
+declare interface OrderInfo extends Eps.OrderInfoEntity {
+	address?: Eps.UserAddressEntity;
+	discountSource?: {
+		type: number;
+		objectId: number;
+		info: CouponInfo;
+	};
+	goodsList?: OrderGoods[];
+	refund?: {
+		orderNum: string;
+		amount: number;
+		realAmount: number;
+		status: number;
+		applyTime: Date;
+		time: Date;
+		reason: string;
+		refuseReason: string;
+	};
+}
diff --git a/uni.scss b/uni.scss
new file mode 100644
index 0000000..31e990f
--- /dev/null
+++ b/uni.scss
@@ -0,0 +1,77 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+@import "/$/cool-ui/theme.scss";
+
+/* 行为相关颜色 */
+$uni-color-primary: #6b69f8;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color: #333; //基本色
+$uni-text-color-inverse: #fff; //反色
+$uni-text-color-grey: #999; //辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable: #c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color: #ffffff;
+$uni-bg-color-grey: #f8f8f8;
+$uni-bg-color-hover: #f1f1f1; //点击状态颜色
+$uni-bg-color-mask: rgba(0, 0, 0, 0.4); //遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color: #c8c7cc;
+
+/* 尺寸变量 */
+
+/* 文字尺寸 */
+$uni-font-size-sm: 24upx;
+$uni-font-size-base: 28upx;
+$uni-font-size-lg: 32upx;
+
+/* 图片尺寸 */
+$uni-img-size-sm: 40upx;
+$uni-img-size-base: 52upx;
+$uni-img-size-lg: 80upx;
+
+/* Border Radius */
+$uni-border-radius-sm: 4upx;
+$uni-border-radius-base: 6upx;
+$uni-border-radius-lg: 12upx;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 10px;
+$uni-spacing-row-base: 20upx;
+$uni-spacing-row-lg: 30upx;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 8upx;
+$uni-spacing-col-base: 16upx;
+$uni-spacing-col-lg: 24upx;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2c405a; // 文章标题颜色
+$uni-font-size-title: 40upx;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle: 36upx;
+$uni-color-paragraph: #3f536e; // 文章段落颜色
+$uni-font-size-paragraph: 30upx;
diff --git a/uni_modules/cool-app/components/cl-version-about/cl-version-about.vue b/uni_modules/cool-app/components/cl-version-about/cl-version-about.vue
new file mode 100644
index 0000000..c4c54a1
--- /dev/null
+++ b/uni_modules/cool-app/components/cl-version-about/cl-version-about.vue
@@ -0,0 +1,32 @@
+<template>
+	<!-- #ifdef APP -->
+	<cl-list>
+		<cl-list-item label="当前版本" :arrow-icon="false">
+			<cl-text color="info">{{ version.num }}</cl-text>
+		</cl-list-item>
+
+		<cl-list-item label="新版更新" :arrow-icon="false" :border="false" @tap="version.update()">
+			<cl-loading :size="36" v-if="version.loading" />
+
+			<template v-else>
+				<cl-tag type="error" v-if="version.isUpgrade">
+					{{ `新版本 ${version.updateInfo?.version}` }}
+				</cl-tag>
+
+				<cl-text color="info" value="无新版" v-else />
+			</template>
+		</cl-list-item>
+	</cl-list>
+	<!-- #endif -->
+</template>
+
+<script setup lang="ts">
+import { useVersion } from "../../hooks";
+import { onMounted } from "vue";
+
+const version = useVersion();
+
+onMounted(() => {
+	version.check();
+});
+</script>
diff --git a/uni_modules/cool-app/components/cl-version-upgrade/cl-version-upgrade.vue b/uni_modules/cool-app/components/cl-version-upgrade/cl-version-upgrade.vue
new file mode 100644
index 0000000..137a565
--- /dev/null
+++ b/uni_modules/cool-app/components/cl-version-upgrade/cl-version-upgrade.vue
@@ -0,0 +1,119 @@
+<template>
+	<cl-popup
+		v-model="visible"
+		:padding="0"
+		background-color="transparent"
+		:close-on-click-modal="!version.updateInfo?.forceUpdate"
+		@close="onClose"
+		@closed="onClosed"
+	>
+		<view class="cl-version-upgrade">
+			<image src="/uni_modules/cool-app/static/bg.png" class="bg" mode="widthFix" />
+
+			<view class="wrap">
+				<cl-text :size="32" bold block>
+					发现新版本 v{{ version.updateInfo?.version }}
+				</cl-text>
+
+				<text class="desc">{{ version.updateInfo?.description }}</text>
+
+				<cl-button
+					round
+					type="primary"
+					:height="80"
+					:width="300"
+					:font-size="30"
+					:margin="[0, 0, 50, 0]"
+					@tap="next()"
+				>
+					{{ version.progress ? `下载中 ${version.progress || 0}%` : "立即更新" }}
+				</cl-button>
+
+				<cl-text
+					color="primary"
+					v-if="!version.updateInfo?.forceUpdate"
+					:margin="[-10, 0, 50, 0]"
+					@tap="close"
+				>
+					稍后再说
+				</cl-text>
+			</view>
+		</view>
+	</cl-popup>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useVersion } from "../../hooks";
+
+const version = useVersion();
+
+const visible = ref(false);
+
+function close() {
+	visible.value = false;
+}
+
+function onClose() {
+	version.cancel();
+}
+
+function onClosed() {
+	version.clear();
+}
+
+async function check() {
+	await version.check();
+
+	if (version.isUpgrade) {
+		visible.value = true;
+	}
+}
+
+function next() {
+	version.update(false, () => {
+		close();
+	});
+}
+
+defineExpose({
+	check,
+});
+</script>
+
+<style lang="scss" scoped>
+.cl-version-upgrade {
+	border-radius: 26rpx;
+	background-color: #fff;
+	position: relative;
+	width: 600rpx;
+	padding-top: 260rpx;
+
+	.bg {
+		display: block;
+		position: absolute;
+		top: -70rpx;
+		left: 0;
+		width: 100%;
+		display: block;
+	}
+
+	.wrap {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+
+		.desc {
+			display: block;
+			font-size: 26rpx;
+			line-height: 1.4;
+			margin: 30rpx 0 50rpx 0;
+			padding: 0 50rpx;
+			width: 100%;
+			box-sizing: border-box;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-app/config.ts b/uni_modules/cool-app/config.ts
new file mode 100644
index 0000000..c6e38f9
--- /dev/null
+++ b/uni_modules/cool-app/config.ts
@@ -0,0 +1,14 @@
+import type { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+	return {
+		description: "APP应用管理模块：版本升级、意见反馈、投诉建议、套餐设置",
+
+		// #ifdef APP
+		demo: {
+			label: "Version 版本升级",
+			path: "/uni_modules/cool-app/pages/version/demo",
+		},
+		// #endif
+	};
+};
diff --git a/uni_modules/cool-app/hooks/cache.ts b/uni_modules/cool-app/hooks/cache.ts
new file mode 100644
index 0000000..0cfe626
--- /dev/null
+++ b/uni_modules/cool-app/hooks/cache.ts
@@ -0,0 +1,46 @@
+import { onShow } from "@dcloudio/uni-app";
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+// 缓存
+export const useCache = defineStore("app.cache", () => {
+	// 缓存大小
+	const size = ref("0KB");
+
+	// 获取缓存
+	function get() {
+		// #ifdef APP
+		// @ts-ignore
+		plus.cache.calculate(function (s: number) {
+			//size是多少个字节单位是b
+			if (s < 1024) {
+				size.value = s + "B";
+			} else if (s / 1024 >= 1 && s / 1024 / 1024 < 1) {
+				size.value = Math.floor((s / 1024) * 100) / 100 + "KB";
+			} else if (s / 1024 / 1024 >= 1) {
+				size.value = Math.floor((s / 1024 / 1024) * 100) / 100 + "M";
+			}
+		});
+		// #endif
+	}
+
+	// 清空缓存
+	function clear() {
+		// #ifdef APP
+		// @ts-ignore
+		plus.cache.clear(function () {
+			get();
+		});
+		// #endif
+	}
+
+	onShow(() => {
+		get();
+	});
+
+	return {
+		size,
+		get,
+		clear,
+	};
+});
diff --git a/uni_modules/cool-app/hooks/index.ts b/uni_modules/cool-app/hooks/index.ts
new file mode 100644
index 0000000..eb96e32
--- /dev/null
+++ b/uni_modules/cool-app/hooks/index.ts
@@ -0,0 +1,2 @@
+export * from "./version";
+export * from "./cache";
diff --git a/uni_modules/cool-app/hooks/version.ts b/uni_modules/cool-app/hooks/version.ts
new file mode 100644
index 0000000..1ddb53f
--- /dev/null
+++ b/uni_modules/cool-app/hooks/version.ts
@@ -0,0 +1,171 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import { service } from "/@/cool";
+import { useUi } from "/$/cool-ui";
+import { compareVersions, getVersion } from "../utils";
+import { isAndroid } from "/@/cool/utils";
+
+// 版本信息
+export function useVersion() {
+	const ui = useUi();
+
+	const store = defineStore("app.version", () => {
+		// 版本号
+		const num = ref();
+
+		// 是否能升级
+		const isUpgrade = ref(false);
+
+		// 检测状态
+		const loading = ref(false);
+
+		// 下载进度
+		const progress = ref();
+
+		// 新版本信息
+		const updateInfo = ref<Eps.AppVersionEntity>();
+
+		let req: any;
+		let task: UniApp.DownloadTask | null;
+
+		// 检测更新
+		async function check() {
+			// #ifdef APP
+			loading.value = true;
+
+			await req;
+
+			await service.app.version
+				.check({
+					version: num.value,
+					type: isAndroid ? 0 : 1,
+				})
+				.then((res) => {
+					if (res) {
+						console.log("[cool-app] 新版本信息", res);
+						updateInfo.value = res;
+						isUpgrade.value = compareVersions(res?.version, num.value) === 1;
+					}
+				})
+				.catch((err) => {
+					ui.showToast(err.message);
+				});
+
+			loading.value = false;
+			// #endif
+		}
+
+		// 更新资源包
+		function update(isConfirm: boolean = true, cb?: () => void) {
+			const { url, forceUpdate, version, description, hotUpdate } = updateInfo.value || {};
+
+			function next() {
+				if (!isUpgrade.value) {
+					return false;
+				}
+
+				if (!updateInfo.value) {
+					return ui.showToast("未检测到版本信息");
+				}
+
+				if (!url) {
+					return ui.showToast(hotUpdate ? "资源包错误" : "APP下载地址错误");
+				}
+
+				if (hotUpdate) {
+					ui.showLoading({
+						text: "下载资源包",
+						border: true,
+					});
+
+					task = uni.downloadFile({
+						url,
+						success(res) {
+							if (cb) {
+								cb();
+							}
+
+							ui.hideLoading();
+
+							if (res.statusCode == 200) {
+								plus.runtime.install(
+									res.tempFilePath,
+									{ force: !!forceUpdate },
+									() => {
+										num.value = version;
+										ui.showToast("更新成功，重启中");
+										plus.runtime.restart();
+									},
+								);
+							} else {
+								ui.showToast("下载资源包失败");
+							}
+						},
+						complete() {
+							ui.hideLoading();
+						},
+					});
+
+					task.onProgressUpdate((res) => {
+						progress.value = res.progress;
+					});
+				} else {
+					plus.runtime.openURL(url);
+				}
+			}
+
+			if (isUpgrade.value) {
+				if (isConfirm) {
+					ui.showConfirm({
+						title: "检查到新版本",
+						message: description,
+						confirmButtonText: "立即更新",
+						callback(action) {
+							if (action == "confirm") {
+								next();
+							}
+						},
+					});
+				} else {
+					next();
+				}
+			} else {
+				ui.showToast("当前已是最新版本");
+			}
+		}
+
+		// 取消下载
+		function cancel() {
+			task?.abort();
+		}
+
+		// 清空
+		function clear() {
+			progress.value = 0;
+		}
+
+		// 获取版本号
+		function get() {
+			req = getVersion().then((res) => {
+				num.value = res;
+			});
+		}
+
+		get();
+
+		return {
+			num,
+			progress,
+			updateInfo,
+			isUpgrade,
+			loading,
+			check,
+			update,
+			get,
+			clear,
+			cancel,
+		};
+	});
+
+	return store();
+}
diff --git a/uni_modules/cool-app/index.ts b/uni_modules/cool-app/index.ts
new file mode 100644
index 0000000..c2da53d
--- /dev/null
+++ b/uni_modules/cool-app/index.ts
@@ -0,0 +1,2 @@
+export * from "./hooks";
+export * from "./utils";
diff --git a/uni_modules/cool-app/pages/complain/detail.vue b/uni_modules/cool-app/pages/complain/detail.vue
new file mode 100644
index 0000000..faf6b6d
--- /dev/null
+++ b/uni_modules/cool-app/pages/complain/detail.vue
@@ -0,0 +1,100 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<view class="header">
+				<cl-tag type="info">{{ dict.getLabel("complainType", info?.type) }}</cl-tag>
+				<cl-text :value="info?.content" block :margin="[20, 0, 30, 0]" :line-height="1.5" />
+
+				<view class="pics">
+					<cl-image
+						v-for="(item, index) in info?.images"
+						:key="index"
+						:src="item"
+						:preview-list="info?.images"
+						:size="180"
+						:margin="[0, 20, 30, 0]"
+					/>
+				</view>
+
+				<cl-row type="flex" justify="space-between">
+					<cl-text :value="info?.createTime" color="info" block />
+
+					<cl-text :value="`${info?.status == 1 ? '已处理' : '核实中'}`" />
+				</cl-row>
+			</view>
+
+			<view class="container">
+				<view class="card">
+					<cl-text block bold value="受理完成" :margin="[0, 0, 20, 0]" :size="28" />
+
+					<cl-text
+						value="我们已收到您的反馈，平台将持续重点关注，一经核实将从严处理！"
+						:line-height="1.5"
+					/>
+				</view>
+
+				<view class="card" v-if="info?.remark">
+					<cl-text block bold value="处理结果" :margin="[0, 0, 20, 0]" :size="28" />
+
+					<cl-text :value="info?.remark" :line-height="1.5" />
+				</view>
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useCool, useStore } from "/@/cool";
+import { onReady } from "@dcloudio/uni-app";
+import { useUi } from "/$/cool-ui";
+
+const { service, router } = useCool();
+const ui = useUi();
+const { dict } = useStore();
+
+const info = ref<Eps.AppComplainEntity>();
+
+async function refresh() {
+	ui.showLoading();
+
+	await service.app.complain
+		.info({
+			id: router.query.id,
+		})
+		.then((res) => {
+			info.value = res;
+		});
+
+	ui.hideLoading();
+}
+
+onReady(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	.header {
+		background-color: #fff;
+		padding: 24rpx;
+
+		.pics {
+			display: flex;
+			flex-wrap: wrap;
+		}
+	}
+
+	.container {
+		padding: 24rpx;
+
+		.card {
+			border-radius: 16rpx;
+			background-color: #fff;
+			padding: 24rpx;
+			margin-bottom: 24rpx;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-app/pages/complain/list.vue b/uni_modules/cool-app/pages/complain/list.vue
new file mode 100644
index 0000000..69309de
--- /dev/null
+++ b/uni_modules/cool-app/pages/complain/list.vue
@@ -0,0 +1,75 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<view class="item" v-for="item in list" :key="item.id" @tap="toDetail(item)">
+				<cl-card :label="item.status ? '已处理' : '核实中'" more>
+					<cl-text
+						:value="item.content"
+						:line-height="1.4"
+						block
+						:size="28"
+						:ellipsis="3"
+					/>
+					<cl-text
+						:value="item.createTime"
+						block
+						:margin="[20, 0, 0, 0]"
+						color="info"
+						:size="24"
+					/>
+				</cl-card>
+			</view>
+
+			<cl-empty v-if="list.length == 0" />
+		</view>
+
+		<cl-footer>
+			<cl-button type="primary" custom @tap="router.push('./submit')">我要投诉</cl-button>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script setup lang="ts">
+import { onShow } from "@dcloudio/uni-app";
+import { useCool, usePager } from "/@/cool";
+
+const { service, router } = useCool();
+const { onRefresh, list } = usePager();
+
+function refresh(params?: any) {
+	const { data, next } = onRefresh(params);
+	next(service.app.complain.page(data));
+}
+
+function toDetail(item: Eps.AppComplainEntity) {
+	router.push({
+		path: "./detail",
+		query: {
+			id: item.id,
+		},
+	});
+}
+
+onShow(() => {
+	refresh();
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.list {
+		.item {
+			background-color: #fff;
+			border-radius: 16rpx;
+			margin-bottom: 24rpx;
+			padding: 30rpx;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-app/pages/complain/submit.vue b/uni_modules/cool-app/pages/complain/submit.vue
new file mode 100644
index 0000000..38958e1
--- /dev/null
+++ b/uni_modules/cool-app/pages/complain/submit.vue
@@ -0,0 +1,116 @@
+<template>
+	<cl-page>
+		<cl-topbar title="填写您的投诉">
+			<template #append>
+				<cl-text value="投诉历史" :margin="[0, 24, 0, 24]" @tap="router.push('./list')" />
+			</template>
+		</cl-topbar>
+
+		<view class="page">
+			<cl-form :ref="setRefs('form')" v-model="form" :rules="rules" label-position="top">
+				<cl-form-item label="投诉类型" prop="type" required>
+					<cl-radio-group v-model="form.type">
+						<view v-for="(item, index) in dict.get('complainType')" :key="index">
+							<cl-radio :label="item.value">{{ item.label }}</cl-radio>
+						</view>
+					</cl-radio-group>
+				</cl-form-item>
+
+				<cl-form-item label="投诉内容" prop="content">
+					<cl-textarea
+						v-model="form.content"
+						placeholder="请描述存在的问题，如：涉及的假货、违规广告是什么，哪里有明显的虚假夸张宣传，如何引导非法渠道问诊开药等。~"
+						:height="200"
+						count
+						:maxlength="300"
+					/>
+				</cl-form-item>
+
+				<cl-form-item label="图片材料提交" prop="images">
+					<cl-upload v-model="form.images" multiple :limit="6" />
+					<cl-text
+						block
+						value="上传照片 (最多6张)"
+						color="info"
+						:size="24"
+						:margin="[24, 0, 0, 0]"
+					/>
+				</cl-form-item>
+
+				<cl-form-item label="联系方式" prop="contact" label-position="top">
+					<cl-input
+						v-model="form.contact"
+						placeholder="QQ/微信号，手机号（选填）"
+						:maxlength="50"
+					/>
+				</cl-form-item>
+			</cl-form>
+		</view>
+
+		<cl-footer border>
+			<cl-button custom type="primary" :loading="saving" @tap="submit">提交</cl-button>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { useCool, useStore } from "/@/cool";
+import { reactive, ref } from "vue";
+import { useUi } from "/$/cool-ui";
+
+const { service, router, refs, setRefs } = useCool();
+const { dict } = useStore();
+const ui = useUi();
+
+const form = ref<Eps.AppComplainEntity>({
+	images: [],
+	contact: "",
+	type: 0,
+	content: "",
+});
+
+const rules = reactive({
+	content: [
+		{
+			required: true,
+			message: "请填写投诉内容",
+		},
+	],
+});
+
+const saving = ref(false);
+
+function submit() {
+	refs.form.validate(async (valid: boolean) => {
+		if (valid) {
+			saving.value = true;
+
+			await service.app.complain
+				.submit(form.value)
+				.then(() => {
+					ui.showTips("提交成功", () => {
+						router.back();
+					});
+				})
+				.catch((err) => {
+					ui.showTips(err.message);
+				});
+
+			saving.value = false;
+		}
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	:deep(.cl-form-item) {
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 0 30rpx 30rpx 30rpx;
+		margin-bottom: 24rpx;
+	}
+}
+</style>
diff --git a/uni_modules/cool-app/pages/feedback/detail.vue b/uni_modules/cool-app/pages/feedback/detail.vue
new file mode 100644
index 0000000..4a66266
--- /dev/null
+++ b/uni_modules/cool-app/pages/feedback/detail.vue
@@ -0,0 +1,91 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<view class="header">
+				<cl-tag type="info">{{ dict.getLabel("feedbackType", info?.type) }}</cl-tag>
+				<cl-text :value="info?.content" block :margin="[20, 0, 30, 0]" :line-height="1.5" />
+
+				<view class="pics">
+					<cl-image
+						v-for="(item, index) in info?.images"
+						:key="index"
+						:src="item"
+						:preview-list="info?.images"
+						:size="180"
+						:margin="[0, 20, 30, 0]"
+					/>
+				</view>
+
+				<cl-row type="flex" justify="space-between">
+					<cl-text :value="info?.createTime" color="info" block />
+
+					<cl-text :value="`${info?.status == 1 ? '已解决' : '待解决'}`" />
+				</cl-row>
+			</view>
+
+			<view class="container">
+				<view class="card" v-if="info?.remark">
+					<cl-text block bold value="回复内容" :margin="[0, 0, 20, 0]" :size="28" />
+
+					<cl-text :value="info?.remark" :line-height="1.5" />
+				</view>
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+import { useCool, useStore } from "/@/cool";
+import { onReady } from "@dcloudio/uni-app";
+import { useUi } from "/$/cool-ui";
+
+const { service, router } = useCool();
+const ui = useUi();
+const { dict } = useStore();
+
+const info = ref<Eps.AppFeedbackEntity>();
+
+async function refresh() {
+	ui.showLoading();
+
+	await service.app.feedback
+		.info({
+			id: router.query.id,
+		})
+		.then((res) => {
+			info.value = res;
+		});
+
+	ui.hideLoading();
+}
+
+onReady(() => {
+	refresh();
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	.header {
+		background-color: #fff;
+		padding: 24rpx;
+
+		.pics {
+			display: flex;
+			flex-wrap: wrap;
+		}
+	}
+
+	.container {
+		padding: 24rpx;
+
+		.card {
+			border-radius: 16rpx;
+			background-color: #fff;
+			padding: 24rpx;
+			margin-bottom: 24rpx;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-app/pages/feedback/list.vue b/uni_modules/cool-app/pages/feedback/list.vue
new file mode 100644
index 0000000..8fbe46c
--- /dev/null
+++ b/uni_modules/cool-app/pages/feedback/list.vue
@@ -0,0 +1,75 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<view class="item" v-for="item in list" :key="item.id" @tap="toDetail(item)">
+				<cl-card :label="item.status ? '已解决' : '待解决'" more>
+					<cl-text
+						:value="item.content"
+						:line-height="1.4"
+						block
+						:size="28"
+						:ellipsis="3"
+					/>
+					<cl-text
+						:value="item.createTime"
+						block
+						:margin="[20, 0, 0, 0]"
+						color="info"
+						:size="24"
+					/>
+				</cl-card>
+			</view>
+
+			<cl-empty v-if="list.length == 0" />
+		</view>
+
+		<cl-footer>
+			<cl-button type="primary" custom @tap="router.push('./submit')">我要反馈</cl-button>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script setup lang="ts">
+import { onShow } from "@dcloudio/uni-app";
+import { useCool, usePager } from "/@/cool";
+
+const { service, router } = useCool();
+const { onRefresh, list } = usePager();
+
+function refresh(params?: any) {
+	const { data, next } = onRefresh(params);
+	next(service.app.feedback.page(data));
+}
+
+function toDetail(item: Eps.AppFeedbackEntity) {
+	router.push({
+		path: "./detail",
+		query: {
+			id: item.id,
+		},
+	});
+}
+
+onShow(() => {
+	refresh();
+});
+
+defineExpose({
+	refresh,
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	.list {
+		.item {
+			background-color: #fff;
+			border-radius: 16rpx;
+			margin-bottom: 24rpx;
+			padding: 30rpx;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-app/pages/feedback/submit.vue b/uni_modules/cool-app/pages/feedback/submit.vue
new file mode 100644
index 0000000..948d431
--- /dev/null
+++ b/uni_modules/cool-app/pages/feedback/submit.vue
@@ -0,0 +1,116 @@
+<template>
+	<cl-page>
+		<cl-topbar title="填写您的反馈">
+			<template #append>
+				<cl-text value="反馈历史" :margin="[0, 24, 0, 24]" @tap="router.push('./list')" />
+			</template>
+		</cl-topbar>
+
+		<view class="page">
+			<cl-form :ref="setRefs('form')" v-model="form" :rules="rules" label-position="top">
+				<cl-form-item label="反馈类型" prop="type" required>
+					<cl-radio-group v-model="form.type">
+						<view v-for="(item, index) in dict.get('feedbackType')" :key="index">
+							<cl-radio :label="item.value">{{ item.label }}</cl-radio>
+						</view>
+					</cl-radio-group>
+				</cl-form-item>
+
+				<cl-form-item label="反馈内容" prop="content">
+					<cl-textarea
+						v-model="form.content"
+						placeholder="请尽量详细描述遇到的问题，操作步骤，并附上相关页面截图，以便更好定位问题哦，感谢~"
+						:height="200"
+						count
+						:maxlength="300"
+					/>
+				</cl-form-item>
+
+				<cl-form-item label="问题截图" prop="images">
+					<cl-upload v-model="form.images" multiple :limit="6" />
+					<cl-text
+						block
+						value="上传照片 (最多6张)"
+						color="info"
+						:size="24"
+						:margin="[24, 0, 0, 0]"
+					/>
+				</cl-form-item>
+
+				<cl-form-item label="联系方式" prop="contact" label-position="top">
+					<cl-input
+						v-model="form.contact"
+						placeholder="QQ/微信号，手机号（选填）"
+						:maxlength="50"
+					/>
+				</cl-form-item>
+			</cl-form>
+		</view>
+
+		<cl-footer border>
+			<cl-button custom type="primary" :loading="saving" @tap="submit">提交</cl-button>
+		</cl-footer>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { useCool, useStore } from "/@/cool";
+import { reactive, ref } from "vue";
+import { useUi } from "/$/cool-ui";
+
+const { service, router, refs, setRefs } = useCool();
+const { dict } = useStore();
+const ui = useUi();
+
+const form = ref<Eps.AppFeedbackEntity>({
+	images: [],
+	contact: "",
+	type: 0,
+	content: "",
+});
+
+const rules = reactive({
+	content: [
+		{
+			required: true,
+			message: "请填写反馈内容",
+		},
+	],
+});
+
+const saving = ref(false);
+
+function submit() {
+	refs.form.validate(async (valid: boolean) => {
+		if (valid) {
+			saving.value = true;
+
+			await service.app.feedback
+				.submit(form.value)
+				.then(() => {
+					ui.showTips("提交成功", () => {
+						router.back();
+					});
+				})
+				.catch((err) => {
+					ui.showTips(err.message);
+				});
+
+			saving.value = false;
+		}
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 24rpx;
+
+	:deep(.cl-form-item) {
+		background-color: #fff;
+		border-radius: 16rpx;
+		padding: 0 30rpx 30rpx 30rpx;
+		margin-bottom: 24rpx;
+	}
+}
+</style>
diff --git a/uni_modules/cool-app/pages/version/demo.vue b/uni_modules/cool-app/pages/version/demo.vue
new file mode 100644
index 0000000..b25369f
--- /dev/null
+++ b/uni_modules/cool-app/pages/version/demo.vue
@@ -0,0 +1,38 @@
+<template>
+	<cl-page>
+		<view class="page">
+			<cl-text block :margin="[0, 0, 20, 0]">当前版本：{{ version?.num }}</cl-text>
+			<cl-text block color="success"
+				>最新版本：{{ version.updateInfo?.version || "-" }}</cl-text
+			>
+
+			<cl-button :margin="[20, 0, 0, 0]" @tap="check">点击测试</cl-button>
+
+			<!-- 版本升级组件 -->
+			<cl-version-upgrade :ref="setRefs('versionUpgrade')" />
+		</view>
+	</cl-page>
+</template>
+
+<script lang="ts" setup>
+import { onReady } from "@dcloudio/uni-app";
+import { useCool } from "/@/cool";
+import { useVersion } from "../../hooks";
+
+const { refs, setRefs } = useCool();
+const version = useVersion();
+
+function check() {
+	refs.versionUpgrade?.check();
+}
+
+onReady(() => {
+	check();
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	padding: 20rpx;
+}
+</style>
diff --git a/uni_modules/cool-app/pages_init.json b/uni_modules/cool-app/pages_init.json
new file mode 100644
index 0000000..33ca272
--- /dev/null
+++ b/uni_modules/cool-app/pages_init.json
@@ -0,0 +1,51 @@
+{
+	"subPackages": [
+		{
+			"root": "uni_modules/cool-app/pages",
+			"pages": [
+				{
+					"path": "version/demo",
+					"style": {
+						"navigationBarTitleText": "版本升级"
+					}
+				},
+				{
+					"path": "complain/detail",
+					"style": {
+						"navigationBarTitleText": "投诉详情"
+					}
+				},
+				{
+					"path": "complain/list",
+					"style": {
+						"navigationBarTitleText": "投诉列表"
+					}
+				},
+				{
+					"path": "complain/submit",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				},
+				{
+					"path": "feedback/detail",
+					"style": {
+						"navigationBarTitleText": "反馈详情"
+					}
+				},
+				{
+					"path": "feedback/list",
+					"style": {
+						"navigationBarTitleText": "反馈列表"
+					}
+				},
+				{
+					"path": "feedback/submit",
+					"style": {
+						"navigationStyle": "custom"
+					}
+				}
+			]
+		}
+	]
+}
diff --git a/uni_modules/cool-app/static/bg.png b/uni_modules/cool-app/static/bg.png
new file mode 100644
index 0000000..bf114e0
Binary files /dev/null and b/uni_modules/cool-app/static/bg.png differ
diff --git a/uni_modules/cool-app/utils/index.ts b/uni_modules/cool-app/utils/index.ts
new file mode 100644
index 0000000..ab9ba3e
--- /dev/null
+++ b/uni_modules/cool-app/utils/index.ts
@@ -0,0 +1,97 @@
+import { isAndroid, uuid } from "/@/cool/utils";
+
+// 版本比较
+export function compareVersions(v1: string, v2: string) {
+	const arr1 = v1.split(".").map(Number);
+	const arr2 = v2.split(".").map(Number);
+	const maxLength = Math.max(arr1.length, arr2.length);
+
+	for (let i = 0; i < maxLength; i++) {
+		const num1 = arr1[i] || 0;
+		const num2 = arr2[i] || 0;
+
+		if (num1 > num2) return 1;
+		if (num2 > num1) return -1;
+	}
+
+	return 0;
+}
+
+// 获取版本号
+export function getVersion(): Promise<string> {
+	return new Promise((resolve) => {
+		// #ifdef APP
+		const packVersion: any = plus.runtime.version;
+		const appid: any = plus.runtime.appid;
+		plus.runtime.getProperty(appid, function (widgetInfo) {
+			resolve(
+				String(packVersion) > String(widgetInfo.version) ? packVersion : widgetInfo.version,
+			);
+		});
+		// #endif
+
+		// #ifndef APP
+		resolve("1.0.0");
+		// #endif
+	});
+}
+
+// 获取 deviceId
+export function getDeviceId(): string {
+	// #ifdef APP
+	return plus.device.uuid!;
+	// #endif
+
+	// #ifndef APP
+	return uuid();
+	// #endif
+}
+
+// 获取 oaid
+export function getOAID() {
+	return new Promise((resolve) => {
+		plus.device.getOAID({
+			success(res) {
+				resolve(res.oaid);
+			},
+			fail() {
+				resolve(0);
+			},
+		});
+	});
+}
+
+// 获取 androidId
+export function getAndroidId() {
+	if (isAndroid) {
+		const Settings = plus.android.importClass("android.provider.Settings");
+		const main = plus.android.runtimeMainActivity();
+		// @ts-ignore
+		return Settings.Secure.getString(main.getContentResolver(), Settings.Secure.ANDROID_ID);
+	}
+}
+
+// 获取 mac
+export function getMac() {
+	if (isAndroid) {
+		const net = plus.android.importClass("java.net.NetworkInterface");
+		// @ts-ignore
+		const wl0 = net.getByName("wlan0");
+		const macByte = wl0.getHardwareAddress();
+		let str = "";
+		for (let i = 0; i < macByte.length; i++) {
+			let tmp = "";
+			let num = macByte[i];
+			if (num < 0) {
+				tmp = (255 + num + 1).toString(16);
+			} else {
+				tmp = num.toString(16);
+			}
+			if (tmp.length == 1) {
+				tmp = "0" + tmp;
+			}
+			str += tmp;
+		}
+		return str;
+	}
+}
diff --git a/uni_modules/cool-cs/components/msg-item.vue b/uni_modules/cool-cs/components/msg-item.vue
new file mode 100644
index 0000000..788c57e
--- /dev/null
+++ b/uni_modules/cool-cs/components/msg-item.vue
@@ -0,0 +1,187 @@
+<template>
+	<view
+		class="msg-item"
+		:class="[
+			isR ? 'r' : 'l',
+			{
+				'is-animation': item.isAnimation,
+			},
+		]"
+	>
+		<view class="avatar">
+			<cl-avatar shape="square" :size="80" :src="item.avatarUrl"></cl-avatar>
+		</view>
+
+		<view class="det">
+			<view class="h" v-if="item.nickName">
+				<text class="name">{{ item.nickName }}</text>
+			</view>
+
+			<view class="content">
+				<view class="text" v-if="item.content.type == 'text'">
+					<text>{{ item.content.data }}</text>
+				</view>
+
+				<view class="emoji" v-else-if="item.content.type == 'emoji'">
+					<image
+						:src="`/uni_modules/cool-cs/static/emoji/${item.content.data}`"
+						mode="aspectFit"
+					/>
+				</view>
+
+				<view class="image" v-if="item.content.type == 'image'">
+					<cl-image
+						:src="item.content.data"
+						mode="heightFix"
+						:size="[200, 'auto']"
+						:custom-style="{
+							'text-align': isR ? 'right' : 'left',
+						}"
+						:preview-list="[item.content.data]"
+					/>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import type { Cs } from "../types";
+import { computed, onMounted, type PropType } from "vue";
+
+const props = defineProps({
+	item: {
+		type: Object as PropType<Cs.Msg>,
+		default: () => ({}),
+	},
+});
+
+const isR = computed(() => !props.item.type);
+
+onMounted(() => {
+	// 清除动画
+	setTimeout(() => {
+		props.item.isAnimation = false;
+	}, 500);
+});
+</script>
+
+<style lang="scss" scoped>
+.msg-item {
+	display: flex;
+	margin-bottom: 40rpx;
+
+	.avatar {
+		flex-shrink: 0;
+	}
+
+	.det {
+		flex: 1;
+		margin: 0 20rpx;
+
+		.h {
+			display: flex;
+			align-items: center;
+			margin: 8rpx 0 16rpx 0;
+
+			.name {
+				font-size: 24rpx;
+			}
+		}
+
+		.content {
+			display: inline-block;
+
+			.emoji {
+				padding: 18rpx;
+
+				image {
+					display: block;
+					height: 44rpx;
+					width: 44rpx;
+				}
+			}
+
+			.text {
+				display: flex;
+				align-items: center;
+				font-size: 28rpx;
+				letter-spacing: 2rpx;
+				padding: 16rpx 24rpx;
+				word-break: break-all;
+				word-wrap: break-word;
+				min-height: 80rpx;
+				box-sizing: border-box;
+			}
+
+			.emoji,
+			.text {
+				background-color: #fff;
+				border-radius: 0 16rpx 16rpx 16rpx;
+			}
+		}
+	}
+
+	&.r {
+		flex-direction: row-reverse;
+		text-align: right;
+
+		.h,
+		.content {
+			flex-direction: row-reverse;
+		}
+
+		.content {
+			.text,
+			.emoji {
+				border-radius: 16rpx 0 16rpx 16rpx;
+				background-color: $cl-color-primary;
+				color: #fff;
+			}
+
+			.image {
+				display: flex;
+				justify-content: flex-end;
+			}
+
+			.text {
+				text-align: left;
+			}
+		}
+	}
+
+	&.is-animation {
+		&.l {
+			animation: fadeInLeft 0.5s ease both;
+		}
+
+		&.r {
+			animation: fadeInRight 0.5s ease both;
+		}
+	}
+
+	@keyframes fadeInRight {
+		from {
+			opacity: 0;
+			transform: translate3d(100%, 0, 0);
+		}
+
+		to {
+			opacity: 1;
+			transform: translate3d(0, 0, 0);
+		}
+	}
+
+	@keyframes fadeInLeft {
+		from {
+			opacity: 0;
+			transform: translate3d(-100%, 0, 0);
+		}
+
+		to {
+			opacity: 1;
+			transform: translate3d(0, 0, 0);
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-cs/components/msg-list.vue b/uni_modules/cool-cs/components/msg-list.vue
new file mode 100644
index 0000000..13f0739
--- /dev/null
+++ b/uni_modules/cool-cs/components/msg-list.vue
@@ -0,0 +1,132 @@
+<template>
+	<view class="msg-list">
+		<view
+			v-for="(d, n) in message.list"
+			:key="d.id"
+			class="group"
+			:class="{
+				'is-show': message.list.length - n <= pagination.page,
+			}"
+		>
+			<block v-for="item in d.data" :key="item.id">
+				<!-- 日期 -->
+				<view class="date" v-if="item.date">
+					<text>{{ item.date }}</text>
+				</view>
+
+				<!-- 列表项 -->
+				<msg-item :item="item" />
+			</block>
+		</view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { reactive, getCurrentInstance, nextTick, ref } from "vue";
+import { useMessage, useScroller } from "../hooks";
+import MsgItem from "./msg-item.vue";
+
+const message = useMessage();
+const { proxy }: any = getCurrentInstance();
+const scroller = useScroller();
+
+// 分页
+const pagination = reactive({
+	page: 1,
+});
+
+// 加载中
+const loading = ref(false);
+
+// 滚动到顶部
+async function scrollToUpper() {
+	if (loading.value) {
+		return false;
+	}
+
+	loading.value = true;
+
+	// 没有更多了
+	if (pagination.page > message.list.length) {
+		return false;
+	}
+
+	// 计算当前的高度
+	const h1 = await getHeight();
+
+	// 预加载下一页
+	await message.refresh({
+		page: pagination.page + 1,
+	});
+
+	// 下一页
+	pagination.page += 1;
+
+	// 延迟
+	await nextTick();
+
+	// 计算页数增加后的高度
+	const h2 = await getHeight();
+
+	// 滚动到原来的位置
+	scroller.scrollTo(h2 - h1, false);
+
+	// 加载完成
+	loading.value = false;
+}
+
+// 获取高度
+function getHeight(): Promise<number> {
+	return new Promise((resolve) => {
+		uni.createSelectorQuery()
+			.in(proxy)
+			.select(".msg-list")
+			.boundingClientRect((rect) => {
+				resolve(rect?.height || 0);
+			})
+			.exec();
+	});
+}
+
+// 监听滚动
+function onScroll(scrollTop: number) {
+	if (scrollTop < 5) {
+		scrollToUpper();
+	}
+}
+
+defineExpose({
+	onScroll,
+});
+</script>
+
+<style lang="scss" scoped>
+.msg-list {
+	padding: 24rpx;
+
+	.group {
+		opacity: 0;
+		height: 0;
+		overflow: hidden;
+		transition: opacity 0.3s;
+
+		&.is-show {
+			height: auto;
+			opacity: 1;
+		}
+	}
+
+	.date {
+		margin: 20rpx;
+		text-align: center;
+
+		text {
+			background-color: #c9c9c9;
+			padding: 10rpx;
+			border-radius: 8rpx;
+			color: #fff;
+			font-size: 24rpx;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-cs/components/tools/emoji.vue b/uni_modules/cool-cs/components/tools/emoji.vue
new file mode 100644
index 0000000..4ad9a51
--- /dev/null
+++ b/uni_modules/cool-cs/components/tools/emoji.vue
@@ -0,0 +1,142 @@
+<template>
+	<view class="tools-emoji">
+		<cl-row>
+			<cl-col :span="4" v-for="(item, index) in list" :key="index">
+				<view class="item" @tap="check(item)">
+					<image :src="`/uni_modules/cool-cs/static/emoji/${item}`" mode="aspectFit" />
+				</view>
+			</cl-col>
+		</cl-row>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { useSocket } from "../../hooks";
+
+defineProps({
+	height: {
+		type: String,
+		default: "400rpx",
+	},
+});
+
+const socket = useSocket();
+
+// 列表
+const list = [
+	"angry-face.png",
+	"anguished-face.png",
+	"astonished-face.png",
+	"confounded-face.png",
+	"confused-face.png",
+	"crying-face.png",
+	"disappointed-but-relieved-face.png",
+	"disappointed-face.png",
+	"dizzy-face.png",
+	"drooling-face.png",
+	"expressionless-face.png",
+	"face-savouring-delicious-food.png",
+	"face-screaming-in-fear.png",
+	"face-throwing-a-kiss.png",
+	"face-with-cold-sweat.png",
+	"face-with-cowboy-hat.png",
+	"face-with-finger-covering-closed-lips.png",
+	"face-with-head-bandage.png",
+	"face-with-look-of-triumph.png",
+	"face-with-medical-mask.png",
+	"face-with-monocle.png",
+	"face-with-one-eyebrow-raised.png",
+	"face-with-open-mouth-and-cold-sweat.png",
+	"face-with-open-mouth-vomiting.png",
+	"face-with-open-mouth.png",
+	"face-with-party-horn-and-party-hat.png",
+	"face-with-pleading-eyes.png",
+	"face-with-rolling-eyes.png",
+	"face-with-stuck-out-tongue-and-tightly-closed-eyes.png",
+	"face-with-stuck-out-tongue-and-winking-eye.png",
+	"face-with-stuck-out-tongue.png",
+	"face-with-thermometer.png",
+	"face-with-uneven-eyes-and-wavy-mouth.png",
+	"face-without-mouth.png",
+	"fearful-face.png",
+	"flushed-face.png",
+	"freezing-face.png",
+	"frowning-face-with-open-mouth.png",
+	"grimacing-face.png",
+	"grinning-face-with-one-large-and-one-small-eye.png",
+	"grinning-face-with-smiling-eyes.png",
+	"grinning-face-with-star-eyes.png",
+	"grinning-face.png",
+	"hugging-face.png",
+	"hushed-face.png",
+	"imp.png",
+	"kissing-face-with-closed-eyes.png",
+	"kissing-face-with-smiling-eyes.png",
+	"kissing-face.png",
+	"loudly-crying-face.png",
+	"lying-face.png",
+	"money-mouth-face.png",
+	"nauseated-face.png",
+	"nerd-face.png",
+	"neutral-face.png",
+	"overheated-face.png",
+	"pensive-face.png",
+	"persevering-face.png",
+	"pouting-face.png",
+	"relieved-face.png",
+	"rolling-on-the-floor-laughing.png",
+	"serious-face-with-symbols-covering-mouth.png",
+	"shocked-face-with-exploding-head.png",
+	"sleeping-face.png",
+	"sleepy-face.png",
+	"slightly-frowning-face.png",
+	"slightly-smiling-face.png",
+	"smiling-face-with-halo.png",
+	"smiling-face-with-heart-shaped-eyes.png",
+	"smiling-face-with-horns.png",
+	"smiling-face-with-open-mouth-and-smiling-eyes.png",
+	"smiling-face-with-open-mouth-and-tightly-closed-eyes.png",
+	"smiling-face-with-open-mouth.png",
+	"smiling-face-with-smiling-eyes-and-hand-covering-mouth.png",
+	"smiling-face-with-smiling-eyes-and-three-hearts.png",
+	"smiling-face-with-smiling-eyes.png",
+	"smiling-face-with-sunglasses.png",
+	"smirking-face.png",
+	"sneezing-face.png",
+	"thinking-face.png",
+	"tired-face.png",
+	"upside-down-face.png",
+	"weary-face.png",
+	"white-frowning-face.png",
+	"white-smiling-face.png",
+	"winking-face.png",
+	"worried-face.png",
+	"zipper-mouth-face.png",
+];
+
+// 选择
+function check(item: any) {
+	socket.send({
+		type: "emoji",
+		data: item,
+	});
+}
+</script>
+
+<style lang="scss" scoped>
+.tools-emoji {
+	padding: 20rpx 0;
+
+	.item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		margin: 20rpx 0;
+
+		image {
+			height: 56rpx;
+			width: 56rpx;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-cs/components/tools/fn.vue b/uni_modules/cool-cs/components/tools/fn.vue
new file mode 100644
index 0000000..81c9e2e
--- /dev/null
+++ b/uni_modules/cool-cs/components/tools/fn.vue
@@ -0,0 +1,85 @@
+<template>
+	<view class="tools-fn">
+		<cl-row>
+			<cl-col :span="6">
+				<view class="item" @tap="chooseImage('album')">
+					<view class="icon">
+						<image src="/uni_modules/cool-cs/static/fn-pic.png" mode="aspectFit" />
+					</view>
+					<text>相册</text>
+				</view>
+			</cl-col>
+
+			<cl-col :span="6">
+				<view class="item" @tap="chooseImage('camera')">
+					<view class="icon">
+						<image src="/uni_modules/cool-cs/static/fn-camera.png" mode="aspectFit" />
+					</view>
+					<text>拍摄</text>
+				</view>
+			</cl-col>
+		</cl-row>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { useSocket, useTools } from "../../hooks";
+import { useUpload } from "/@/cool";
+
+const tools = useTools();
+const { upload } = useUpload();
+const socket = useSocket();
+
+// 选择
+function chooseImage(type: string) {
+	uni.chooseImage({
+		sourceType: [type],
+		success(res) {
+			(res.tempFiles as any[]).forEach(async (e) => {
+				const url = await upload(e);
+
+				socket.send({
+					type: "image",
+					data: url,
+				});
+			});
+		},
+	});
+	tools.close();
+}
+</script>
+
+<style lang="scss" scoped>
+.tools-fn {
+	padding: 20rpx;
+
+	.item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		margin: 20rpx 0;
+
+		.icon {
+			height: 130rpx;
+			width: 130rpx;
+			background-color: #fff;
+			border-radius: 16rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 20rpx;
+
+			image {
+				height: 60rpx;
+				width: 60rpx;
+			}
+		}
+
+		text {
+			font-size: 26rpx;
+			color: #666;
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-cs/components/tools/index.vue b/uni_modules/cool-cs/components/tools/index.vue
new file mode 100644
index 0000000..9f834a8
--- /dev/null
+++ b/uni_modules/cool-cs/components/tools/index.vue
@@ -0,0 +1,40 @@
+<template>
+	<view
+		class="cs-tools"
+		:style="{
+			height: tools.visible ? height : '0rpx',
+		}"
+	>
+		<scroll-view scroll-y class="scroller">
+			<emoji v-show="tools.mode == 'emoji'" />
+			<fn v-show="tools.mode == 'fn'" />
+		</scroll-view>
+	</view>
+</template>
+
+<script setup lang="ts">
+import { useTools } from "../../hooks";
+import Emoji from "./emoji.vue";
+import Fn from "./fn.vue";
+
+defineProps({
+	height: {
+		type: String,
+		default: "540rpx",
+	},
+});
+
+const tools = useTools();
+</script>
+
+<style lang="scss" scoped>
+.cs-tools {
+	transition: height 0.3s;
+	overflow: hidden;
+
+	.scroller {
+		height: 100%;
+		background-color: #f7f7f7;
+	}
+}
+</style>
diff --git a/uni_modules/cool-cs/config.ts b/uni_modules/cool-cs/config.ts
new file mode 100644
index 0000000..7934d87
--- /dev/null
+++ b/uni_modules/cool-cs/config.ts
@@ -0,0 +1,14 @@
+import { config, type ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+	return {
+		description: "客服聊天模块",
+		options: {
+			url: config.host + "/cs",
+		},
+		demo: {
+			label: "CS 客服聊天",
+			path: "/uni_modules/cool-cs/pages/chat",
+		},
+	};
+};
diff --git a/uni_modules/cool-cs/hooks/index.ts b/uni_modules/cool-cs/hooks/index.ts
new file mode 100644
index 0000000..54134f4
--- /dev/null
+++ b/uni_modules/cool-cs/hooks/index.ts
@@ -0,0 +1,4 @@
+export * from "./tools";
+export * from "./socket";
+export * from "./session";
+export * from "./message";
diff --git a/uni_modules/cool-cs/hooks/message.ts b/uni_modules/cool-cs/hooks/message.ts
new file mode 100644
index 0000000..da9fa2a
--- /dev/null
+++ b/uni_modules/cool-cs/hooks/message.ts
@@ -0,0 +1,120 @@
+import { defineStore } from "pinia";
+import { computed, ref } from "vue";
+import type { Cs } from "../types";
+import dayjs from "dayjs";
+import { service, useStore } from "/@/cool";
+import { last } from "lodash-es";
+import { useSession } from "./session";
+import { uuid } from "/@/cool/utils";
+import { useScroller } from "./tools";
+import { dateFormatter } from "../utils";
+
+export const useMessage = defineStore("cs.message", () => {
+	const session = useSession();
+	const scroller = useScroller();
+	const { user } = useStore();
+
+	// 加载中
+	const loading = ref(false);
+
+	// 所有页
+	const data = ref<{ id: string; data: Cs.Msg[] }[]>([]);
+
+	// 列表
+	const list = computed(() => {
+		data.value.forEach((e) => {
+			if (e.data[0]) {
+				let date = e.data[0].createTime;
+
+				if (date) {
+					e.data.forEach((a, i) => {
+						const d = dateFormatter(a.createTime);
+
+						if (i == 0) {
+							a.date = d;
+						}
+
+						if (dayjs(a.createTime).subtract(10, "minute").isAfter(dayjs(date))) {
+							a.date = d;
+							date = a.createTime;
+						}
+					});
+				}
+			}
+		});
+
+		return data.value;
+	});
+
+	// 追加消息
+	function append(item: Cs.Msg) {
+		const list = last(data.value)?.data;
+
+		if (list) {
+			list.push({
+				sessionId: session.info?.id,
+				type: 0,
+				nickName: user.info?.nickName,
+				avatarUrl: user.info?.avatarUrl,
+				...item,
+				isAnimation: true,
+			});
+
+			scroller.scrollToBottom();
+		}
+	}
+
+	// 清除消息
+	function clear() {
+		data.value = [];
+	}
+
+	// 读消息
+	function read(id: number) {
+		service.cs.msg.read({
+			msgIds: [id],
+		});
+	}
+
+	// 获取消息
+	async function refresh(params?: any) {
+		loading.value = true;
+
+		if (params.page == 1) {
+			data.value = [];
+		}
+
+		await service.cs.msg
+			.page({
+				sessionId: session.info?.id,
+				order: "createTime",
+				sort: "desc",
+				...params,
+			})
+			.then((res) => {
+				res.list.forEach((e) => {
+					if (e.type == 1) {
+						e.avatarUrl = e.adminUserHeadImg;
+						e.nickName = e.adminUserName;
+					}
+				});
+
+				data.value.unshift({
+					id: uuid(),
+					data: res.list.reverse() as any[],
+				});
+			});
+
+		loading.value = false;
+	}
+
+	return {
+		data,
+		list,
+		loading,
+		append,
+		clear,
+		read,
+		refresh,
+	};
+});
diff --git a/uni_modules/cool-cs/hooks/session.ts b/uni_modules/cool-cs/hooks/session.ts
new file mode 100644
index 0000000..f221f29
--- /dev/null
+++ b/uni_modules/cool-cs/hooks/session.ts
@@ -0,0 +1,24 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+import type { Cs } from "../types";
+
+export const useSession = defineStore("cs.session", () => {
+	// 详情
+	const info = ref<Cs.Session>();
+
+	// 设置会话
+	function set(data: Cs.Session) {
+		info.value = data;
+	}
+
+	// 清除会话
+	function clear() {
+		info.value = undefined;
+	}
+
+	return {
+		info,
+		set,
+		clear,
+	};
+});
diff --git a/uni_modules/cool-cs/hooks/socket.ts b/uni_modules/cool-cs/hooks/socket.ts
new file mode 100644
index 0000000..03324f0
--- /dev/null
+++ b/uni_modules/cool-cs/hooks/socket.ts
@@ -0,0 +1,96 @@
+import { defineStore } from "pinia";
+// @ts-ignore
+import io, { type Socket } from "@hyoga/uni-socket.io";
+import type { Cs } from "../types";
+import { useStore, module } from "/@/cool";
+import { useSession } from "./session";
+import { useMessage } from "./message";
+
+export const useSocket = defineStore("cs.socket", () => {
+	const config = module.config("cool-cs");
+	const { user } = useStore();
+	const session = useSession();
+	const message = useMessage();
+
+	let client = undefined as Socket | undefined;
+
+	// 连接
+	function connect() {
+		if (!user.token) {
+			return false;
+		}
+
+		if (client) {
+			disconnect();
+		}
+
+		if (!client) {
+			client = io(config.url, {
+				transports: ["websocket", "polling"],
+				auth: {
+					isAdmin: false,
+					token: user.token,
+				},
+			});
+
+			client.on("connect", () => {
+				console.log("[cs] connect");
+			});
+
+			client.on("disconnect", () => {
+				console.log("[cs] disconnect");
+			});
+
+			client.on("msg", (data: Cs.Msg) => {
+				if (data.type == 1) {
+					if (data.sessionId == session.info?.id) {
+						// 追加消息
+						message.append({
+							...data.user,
+							...data,
+							isAnimation: true,
+						});
+
+						// 读消息
+						message.read(data.id!);
+					}
+				}
+			});
+		}
+	}
+
+	// 断开连接
+	function disconnect() {
+		client?.disconnect();
+		client = undefined;
+	}
+
+	// 发送消息
+	function send(content: Cs.Content) {
+		if (client) {
+			// 发送事件
+			client.emit("send", {
+				sessionId: session.info?.id,
+				content,
+			});
+
+			// 追加消息
+			message.append({ content });
+		} else {
+			console.log("[cs] client error");
+		}
+	}
+
+	// 监听退出
+	uni.$on("user.logout", () => {
+		session.clear();
+		message.clear();
+		disconnect();
+	});
+
+	return {
+		connect,
+		client,
+		send,
+	};
+});
diff --git a/uni_modules/cool-cs/hooks/tools.ts b/uni_modules/cool-cs/hooks/tools.ts
new file mode 100644
index 0000000..bc06901
--- /dev/null
+++ b/uni_modules/cool-cs/hooks/tools.ts
@@ -0,0 +1,61 @@
+import { defineStore } from "pinia";
+import { nextTick, ref } from "vue";
+import { throttle } from "lodash-es";
+
+export const useTools = defineStore("cs.tools", () => {
+	const visible = ref(false);
+	const mode = ref("");
+
+	// 打开
+	function open(m: string) {
+		if (visible.value && mode.value === m) {
+			return close();
+		}
+
+		visible.value = true;
+		mode.value = m;
+	}
+
+	// 关闭
+	function close() {
+		visible.value = false;
+	}
+
+	return {
+		visible,
+		mode,
+		open,
+		close,
+	};
+});
+
+export const useScroller = defineStore("cs.scroller", () => {
+	// 滚动距离
+	const top = ref(0);
+
+	// 滚动动画
+	const animation = ref(true);
+
+	let n = 0;
+
+	// 滚动到指定位置
+	const scrollTo = throttle((scrollTop: number, smooth: boolean = true) => {
+		nextTick().then(() => {
+			top.value = scrollTop;
+
+			animation.value = smooth;
+		});
+	}, 500);
+
+	// 滚动到底部
+	const scrollToBottom = (smooth?: boolean) => {
+		scrollTo(100000 + n++, smooth);
+	};
+
+	return {
+		animation,
+		top,
+		scrollToBottom,
+		scrollTo,
+	};
+});
diff --git a/uni_modules/cool-cs/pages/chat.vue b/uni_modules/cool-cs/pages/chat.vue
new file mode 100644
index 0000000..bb2780a
--- /dev/null
+++ b/uni_modules/cool-cs/pages/chat.vue
@@ -0,0 +1,142 @@
+<template>
+	<cl-page fullscreen background-color="#fff">
+		<view class="page">
+			<view class="container">
+				<scroll-view
+					:scroll-top="scroller.top"
+					scroll-y
+					:scroll-with-animation="scroller.animation"
+					class="scroller"
+					@tap="tools.close()"
+					@scroll="onScroll"
+				>
+					<msg-list :ref="setRefs('msgList')" />
+				</scroll-view>
+			</view>
+
+			<view class="footer">
+				<view class="wrap">
+					<!-- 输入 -->
+					<view class="inner">
+						<cl-input
+							v-model="content"
+							round
+							:height="76"
+							placeholder="输入你想要咨询的问题"
+							:confirm-hold="true"
+							:adjust-position="true"
+							:cursor-spacing="10"
+							auto-blur
+							@focus="onFocus"
+							@confirm="onConfirm"
+						/>
+					</view>
+
+					<image src="/uni_modules/cool-cs/static/emoji.png" @tap="tools.open('emoji')" />
+					<image src="/uni_modules/cool-cs/static/plus.png" @tap="tools.open('fn')" />
+				</view>
+
+				<!-- 工具 -->
+				<tools />
+			</view>
+		</view>
+	</cl-page>
+</template>
+
+<script setup lang="ts">
+import { useSocket, useTools, useScroller, useSession, useMessage } from "../hooks";
+import { onReady } from "@dcloudio/uni-app";
+import { useCool } from "/@/cool";
+import { ref } from "vue";
+import Tools from "../components/tools/index.vue";
+import MsgList from "../components/msg-list.vue";
+
+const { service, refs, setRefs } = useCool();
+const socket = useSocket();
+const session = useSession();
+const message = useMessage();
+const scroller = useScroller();
+const tools = useTools();
+
+// 咨询内容
+const content = ref("");
+
+// 监听滚动
+function onScroll(e: { detail: { scrollTop: number } }) {
+	refs.msgList?.onScroll(e.detail.scrollTop);
+}
+
+// 聚焦
+function onFocus() {
+	scroller.scrollToBottom();
+}
+
+// 确认
+async function onConfirm() {
+	const data = content.value;
+
+	if (data) {
+		content.value = "";
+
+		socket.send({
+			type: "text",
+			data,
+		});
+	}
+}
+
+onReady(() => {
+	service.cs.session.create().then(async (res) => {
+		// 设置会话
+		session.set(res);
+
+		// 连接 socket
+		socket.connect();
+
+		// 获取消息列表
+		await message.refresh({
+			sessionId: res.id,
+		});
+
+		// 滚动到底
+		scroller.scrollToBottom(false);
+	});
+});
+</script>
+
+<style lang="scss" scoped>
+.page {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+
+	.container {
+		flex: 1;
+		overflow: hidden;
+		background-color: $cl-color-bg;
+
+		.scroller {
+			height: 100%;
+		}
+	}
+
+	.footer {
+		.wrap {
+			display: flex;
+			align-items: center;
+			padding: 24rpx 36rpx;
+			background-color: #fff;
+
+			.inner {
+				flex: 1;
+			}
+
+			image {
+				height: 46rpx;
+				width: 46rpx;
+				margin-left: 24rpx;
+			}
+		}
+	}
+}
+</style>
diff --git a/uni_modules/cool-cs/pages_init.json b/uni_modules/cool-cs/pages_init.json
new file mode 100644
index 0000000..fccd4e3
--- /dev/null
+++ b/uni_modules/cool-cs/pages_init.json
@@ -0,0 +1,15 @@
+{
+	"subPackages": [
+		{
+			"root": "uni_modules/cool-cs/pages",
+			"pages": [
+				{
+					"path": "chat",
+					"style": {
+						"navigationBarTitleText": "客服聊天"
+					}
+				}
+			]
+		}
+	]
+}
diff --git a/uni_modules/cool-cs/static/add.png b/uni_modules/cool-cs/static/add.png
new file mode 100644
index 0000000..38acc2c
Binary files /dev/null and b/uni_modules/cool-cs/static/add.png differ
diff --git a/uni_modules/cool-cs/static/emoji.png b/uni_modules/cool-cs/static/emoji.png
new file mode 100644
index 0000000..fb49e09
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji.png differ
diff --git a/uni_modules/cool-cs/static/emoji/angry-face.png b/uni_modules/cool-cs/static/emoji/angry-face.png
new file mode 100644
index 0000000..bd0b383
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/angry-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/anguished-face.png b/uni_modules/cool-cs/static/emoji/anguished-face.png
new file mode 100644
index 0000000..fa4678b
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/anguished-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/astonished-face.png b/uni_modules/cool-cs/static/emoji/astonished-face.png
new file mode 100644
index 0000000..41dc2b6
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/astonished-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/confounded-face.png b/uni_modules/cool-cs/static/emoji/confounded-face.png
new file mode 100644
index 0000000..7e1b967
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/confounded-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/confused-face.png b/uni_modules/cool-cs/static/emoji/confused-face.png
new file mode 100644
index 0000000..b01d70e
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/confused-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/crying-face.png b/uni_modules/cool-cs/static/emoji/crying-face.png
new file mode 100644
index 0000000..c5aae1c
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/crying-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/disappointed-but-relieved-face.png b/uni_modules/cool-cs/static/emoji/disappointed-but-relieved-face.png
new file mode 100644
index 0000000..f4f6e3e
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/disappointed-but-relieved-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/disappointed-face.png b/uni_modules/cool-cs/static/emoji/disappointed-face.png
new file mode 100644
index 0000000..aa3e501
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/disappointed-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/dizzy-face.png b/uni_modules/cool-cs/static/emoji/dizzy-face.png
new file mode 100644
index 0000000..9bd63d4
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/dizzy-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/drooling-face.png b/uni_modules/cool-cs/static/emoji/drooling-face.png
new file mode 100644
index 0000000..a7e2545
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/drooling-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/expressionless-face.png b/uni_modules/cool-cs/static/emoji/expressionless-face.png
new file mode 100644
index 0000000..a39bc99
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/expressionless-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-savouring-delicious-food.png b/uni_modules/cool-cs/static/emoji/face-savouring-delicious-food.png
new file mode 100644
index 0000000..7f3d434
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-savouring-delicious-food.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-screaming-in-fear.png b/uni_modules/cool-cs/static/emoji/face-screaming-in-fear.png
new file mode 100644
index 0000000..0458687
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-screaming-in-fear.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-throwing-a-kiss.png b/uni_modules/cool-cs/static/emoji/face-throwing-a-kiss.png
new file mode 100644
index 0000000..15220bf
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-throwing-a-kiss.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-cold-sweat.png b/uni_modules/cool-cs/static/emoji/face-with-cold-sweat.png
new file mode 100644
index 0000000..c91ab17
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-cold-sweat.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-cowboy-hat.png b/uni_modules/cool-cs/static/emoji/face-with-cowboy-hat.png
new file mode 100644
index 0000000..5801afc
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-cowboy-hat.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-finger-covering-closed-lips.png b/uni_modules/cool-cs/static/emoji/face-with-finger-covering-closed-lips.png
new file mode 100644
index 0000000..3e37c47
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-finger-covering-closed-lips.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-head-bandage.png b/uni_modules/cool-cs/static/emoji/face-with-head-bandage.png
new file mode 100644
index 0000000..00471c0
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-head-bandage.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-look-of-triumph.png b/uni_modules/cool-cs/static/emoji/face-with-look-of-triumph.png
new file mode 100644
index 0000000..fa3bb8e
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-look-of-triumph.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-medical-mask.png b/uni_modules/cool-cs/static/emoji/face-with-medical-mask.png
new file mode 100644
index 0000000..8b237f5
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-medical-mask.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-monocle.png b/uni_modules/cool-cs/static/emoji/face-with-monocle.png
new file mode 100644
index 0000000..12982a9
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-monocle.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-one-eyebrow-raised.png b/uni_modules/cool-cs/static/emoji/face-with-one-eyebrow-raised.png
new file mode 100644
index 0000000..c14f913
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-one-eyebrow-raised.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-open-mouth-and-cold-sweat.png b/uni_modules/cool-cs/static/emoji/face-with-open-mouth-and-cold-sweat.png
new file mode 100644
index 0000000..9359dd9
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-open-mouth-and-cold-sweat.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-open-mouth-vomiting.png b/uni_modules/cool-cs/static/emoji/face-with-open-mouth-vomiting.png
new file mode 100644
index 0000000..637be5f
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-open-mouth-vomiting.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-open-mouth.png b/uni_modules/cool-cs/static/emoji/face-with-open-mouth.png
new file mode 100644
index 0000000..6b9af1e
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-open-mouth.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-party-horn-and-party-hat.png b/uni_modules/cool-cs/static/emoji/face-with-party-horn-and-party-hat.png
new file mode 100644
index 0000000..d1d3f27
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-party-horn-and-party-hat.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-pleading-eyes.png b/uni_modules/cool-cs/static/emoji/face-with-pleading-eyes.png
new file mode 100644
index 0000000..3901299
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-pleading-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-rolling-eyes.png b/uni_modules/cool-cs/static/emoji/face-with-rolling-eyes.png
new file mode 100644
index 0000000..3c1c933
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-rolling-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue-and-tightly-closed-eyes.png b/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue-and-tightly-closed-eyes.png
new file mode 100644
index 0000000..13e5574
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue-and-tightly-closed-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue-and-winking-eye.png b/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue-and-winking-eye.png
new file mode 100644
index 0000000..3c6c276
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue-and-winking-eye.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue.png b/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue.png
new file mode 100644
index 0000000..9b040b3
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-stuck-out-tongue.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-thermometer.png b/uni_modules/cool-cs/static/emoji/face-with-thermometer.png
new file mode 100644
index 0000000..407c0c8
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-thermometer.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-with-uneven-eyes-and-wavy-mouth.png b/uni_modules/cool-cs/static/emoji/face-with-uneven-eyes-and-wavy-mouth.png
new file mode 100644
index 0000000..3777295
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-with-uneven-eyes-and-wavy-mouth.png differ
diff --git a/uni_modules/cool-cs/static/emoji/face-without-mouth.png b/uni_modules/cool-cs/static/emoji/face-without-mouth.png
new file mode 100644
index 0000000..8a2fbf3
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/face-without-mouth.png differ
diff --git a/uni_modules/cool-cs/static/emoji/fearful-face.png b/uni_modules/cool-cs/static/emoji/fearful-face.png
new file mode 100644
index 0000000..f1927f0
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/fearful-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/flushed-face.png b/uni_modules/cool-cs/static/emoji/flushed-face.png
new file mode 100644
index 0000000..adad5ca
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/flushed-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/freezing-face.png b/uni_modules/cool-cs/static/emoji/freezing-face.png
new file mode 100644
index 0000000..97a9310
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/freezing-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/frowning-face-with-open-mouth.png b/uni_modules/cool-cs/static/emoji/frowning-face-with-open-mouth.png
new file mode 100644
index 0000000..1ec8ac6
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/frowning-face-with-open-mouth.png differ
diff --git a/uni_modules/cool-cs/static/emoji/grimacing-face.png b/uni_modules/cool-cs/static/emoji/grimacing-face.png
new file mode 100644
index 0000000..82ca911
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/grimacing-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/grinning-face-with-one-large-and-one-small-eye.png b/uni_modules/cool-cs/static/emoji/grinning-face-with-one-large-and-one-small-eye.png
new file mode 100644
index 0000000..7f3ec34
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/grinning-face-with-one-large-and-one-small-eye.png differ
diff --git a/uni_modules/cool-cs/static/emoji/grinning-face-with-smiling-eyes.png b/uni_modules/cool-cs/static/emoji/grinning-face-with-smiling-eyes.png
new file mode 100644
index 0000000..d90a62d
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/grinning-face-with-smiling-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/grinning-face-with-star-eyes.png b/uni_modules/cool-cs/static/emoji/grinning-face-with-star-eyes.png
new file mode 100644
index 0000000..9d3a098
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/grinning-face-with-star-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/grinning-face.png b/uni_modules/cool-cs/static/emoji/grinning-face.png
new file mode 100644
index 0000000..56e7da7
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/grinning-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/hugging-face.png b/uni_modules/cool-cs/static/emoji/hugging-face.png
new file mode 100644
index 0000000..edc9e01
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/hugging-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/hushed-face.png b/uni_modules/cool-cs/static/emoji/hushed-face.png
new file mode 100644
index 0000000..f236530
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/hushed-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/imp.png b/uni_modules/cool-cs/static/emoji/imp.png
new file mode 100644
index 0000000..7a4bcdb
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/imp.png differ
diff --git a/uni_modules/cool-cs/static/emoji/kissing-face-with-closed-eyes.png b/uni_modules/cool-cs/static/emoji/kissing-face-with-closed-eyes.png
new file mode 100644
index 0000000..a16080e
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/kissing-face-with-closed-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/kissing-face-with-smiling-eyes.png b/uni_modules/cool-cs/static/emoji/kissing-face-with-smiling-eyes.png
new file mode 100644
index 0000000..f041364
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/kissing-face-with-smiling-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/kissing-face.png b/uni_modules/cool-cs/static/emoji/kissing-face.png
new file mode 100644
index 0000000..7f57e24
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/kissing-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/loudly-crying-face.png b/uni_modules/cool-cs/static/emoji/loudly-crying-face.png
new file mode 100644
index 0000000..37bc4fd
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/loudly-crying-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/lying-face.png b/uni_modules/cool-cs/static/emoji/lying-face.png
new file mode 100644
index 0000000..a7af452
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/lying-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/money-mouth-face.png b/uni_modules/cool-cs/static/emoji/money-mouth-face.png
new file mode 100644
index 0000000..e72b3b8
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/money-mouth-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/nauseated-face.png b/uni_modules/cool-cs/static/emoji/nauseated-face.png
new file mode 100644
index 0000000..2b30261
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/nauseated-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/nerd-face.png b/uni_modules/cool-cs/static/emoji/nerd-face.png
new file mode 100644
index 0000000..c915863
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/nerd-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/neutral-face.png b/uni_modules/cool-cs/static/emoji/neutral-face.png
new file mode 100644
index 0000000..8fc3f3e
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/neutral-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/overheated-face.png b/uni_modules/cool-cs/static/emoji/overheated-face.png
new file mode 100644
index 0000000..b8c9f63
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/overheated-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/pensive-face.png b/uni_modules/cool-cs/static/emoji/pensive-face.png
new file mode 100644
index 0000000..1eefb52
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/pensive-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/persevering-face.png b/uni_modules/cool-cs/static/emoji/persevering-face.png
new file mode 100644
index 0000000..daa2cc0
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/persevering-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/pouting-face.png b/uni_modules/cool-cs/static/emoji/pouting-face.png
new file mode 100644
index 0000000..398f18a
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/pouting-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/relieved-face.png b/uni_modules/cool-cs/static/emoji/relieved-face.png
new file mode 100644
index 0000000..502f517
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/relieved-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/rolling-on-the-floor-laughing.png b/uni_modules/cool-cs/static/emoji/rolling-on-the-floor-laughing.png
new file mode 100644
index 0000000..2eabc38
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/rolling-on-the-floor-laughing.png differ
diff --git a/uni_modules/cool-cs/static/emoji/serious-face-with-symbols-covering-mouth.png b/uni_modules/cool-cs/static/emoji/serious-face-with-symbols-covering-mouth.png
new file mode 100644
index 0000000..c5c95e0
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/serious-face-with-symbols-covering-mouth.png differ
diff --git a/uni_modules/cool-cs/static/emoji/shocked-face-with-exploding-head.png b/uni_modules/cool-cs/static/emoji/shocked-face-with-exploding-head.png
new file mode 100644
index 0000000..c939400
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/shocked-face-with-exploding-head.png differ
diff --git a/uni_modules/cool-cs/static/emoji/sleeping-face.png b/uni_modules/cool-cs/static/emoji/sleeping-face.png
new file mode 100644
index 0000000..749e4ee
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/sleeping-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/sleepy-face.png b/uni_modules/cool-cs/static/emoji/sleepy-face.png
new file mode 100644
index 0000000..21b72c1
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/sleepy-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/slightly-frowning-face.png b/uni_modules/cool-cs/static/emoji/slightly-frowning-face.png
new file mode 100644
index 0000000..8608109
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/slightly-frowning-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/slightly-smiling-face.png b/uni_modules/cool-cs/static/emoji/slightly-smiling-face.png
new file mode 100644
index 0000000..a0d68d1
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/slightly-smiling-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-halo.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-halo.png
new file mode 100644
index 0000000..0cd0b3d
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-halo.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-heart-shaped-eyes.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-heart-shaped-eyes.png
new file mode 100644
index 0000000..2cefcb5
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-heart-shaped-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-horns.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-horns.png
new file mode 100644
index 0000000..f0b56af
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-horns.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth-and-smiling-eyes.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth-and-smiling-eyes.png
new file mode 100644
index 0000000..a702c93
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth-and-smiling-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth-and-tightly-closed-eyes.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth-and-tightly-closed-eyes.png
new file mode 100644
index 0000000..83ebaa5
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth-and-tightly-closed-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth.png
new file mode 100644
index 0000000..7798b41
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-open-mouth.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes-and-hand-covering-mouth.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes-and-hand-covering-mouth.png
new file mode 100644
index 0000000..27777df
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes-and-hand-covering-mouth.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes-and-three-hearts.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes-and-three-hearts.png
new file mode 100644
index 0000000..d621f0d
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes-and-three-hearts.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes.png
new file mode 100644
index 0000000..69700dc
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-smiling-eyes.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smiling-face-with-sunglasses.png b/uni_modules/cool-cs/static/emoji/smiling-face-with-sunglasses.png
new file mode 100644
index 0000000..2a70eff
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smiling-face-with-sunglasses.png differ
diff --git a/uni_modules/cool-cs/static/emoji/smirking-face.png b/uni_modules/cool-cs/static/emoji/smirking-face.png
new file mode 100644
index 0000000..430d45b
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/smirking-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/sneezing-face.png b/uni_modules/cool-cs/static/emoji/sneezing-face.png
new file mode 100644
index 0000000..18f5b95
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/sneezing-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/thinking-face.png b/uni_modules/cool-cs/static/emoji/thinking-face.png
new file mode 100644
index 0000000..7431ed0
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/thinking-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/tired-face.png b/uni_modules/cool-cs/static/emoji/tired-face.png
new file mode 100644
index 0000000..ff0898f
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/tired-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/upside-down-face.png b/uni_modules/cool-cs/static/emoji/upside-down-face.png
new file mode 100644
index 0000000..677f746
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/upside-down-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/weary-face.png b/uni_modules/cool-cs/static/emoji/weary-face.png
new file mode 100644
index 0000000..74325b9
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/weary-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/white-frowning-face.png b/uni_modules/cool-cs/static/emoji/white-frowning-face.png
new file mode 100644
index 0000000..3644ff5
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/white-frowning-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/white-smiling-face.png b/uni_modules/cool-cs/static/emoji/white-smiling-face.png
new file mode 100644
index 0000000..082b271
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/white-smiling-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/winking-face.png b/uni_modules/cool-cs/static/emoji/winking-face.png
new file mode 100644
index 0000000..59c99e0
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/winking-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/worried-face.png b/uni_modules/cool-cs/static/emoji/worried-face.png
new file mode 100644
index 0000000..8638920
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/worried-face.png differ
diff --git a/uni_modules/cool-cs/static/emoji/zipper-mouth-face.png b/uni_modules/cool-cs/static/emoji/zipper-mouth-face.png
new file mode 100644
index 0000000..79e02a3
Binary files /dev/null and b/uni_modules/cool-cs/static/emoji/zipper-mouth-face.png differ
diff --git a/uni_modules/cool-cs/static/fn-camera.png b/uni_modules/cool-cs/static/fn-camera.png
new file mode 100644
index 0000000..9593ed6
Binary files /dev/null and b/uni_modules/cool-cs/static/fn-camera.png differ
diff --git a/uni_modules/cool-cs/static/fn-pic.png b/uni_modules/cool-cs/static/fn-pic.png
new file mode 100644
index 0000000..2584560
Binary files /dev/null and b/uni_modules/cool-cs/static/fn-pic.png differ
diff --git a/uni_modules/cool-cs/static/minus.png b/uni_modules/cool-cs/static/minus.png
new file mode 100644
index 0000000..723dbd8
Binary files /dev/null and b/uni_modules/cool-cs/static/minus.png differ
diff --git a/uni_modules/cool-cs/static/plus.png b/uni_modules/cool-cs/static/plus.png
new file mode 100644
index 0000000..38acc2c
Binary files /dev/null and b/uni_modules/cool-cs/static/plus.png differ
diff --git a/uni_modules/cool-cs/types/index.d.ts b/uni_modules/cool-cs/types/index.d.ts
new file mode 100644
index 0000000..ec31c09
--- /dev/null
+++ b/uni_modules/cool-cs/types/index.d.ts
@@ -0,0 +1,16 @@
+export declare namespace Cs {
+	interface Content {
+		type: "text" | "image" | "voice" | "video" | "file" | "link" | "location" | "emoji";
+		data: string;
+	}
+
+	interface Msg extends Eps.CsMsgEntity {
+		content: Content;
+		sessionId?: number;
+	}
+
+	interface Session {
+		id: number;
+		[key: string]: any;
+	}
+}
diff --git a/uni_modules/cool-cs/utils/index.ts b/uni_modules/cool-cs/utils/index.ts
new file mode 100644
index 0000000..40f3e27
--- /dev/null
+++ b/uni_modules/cool-cs/utils/index.ts
@@ -0,0 +1,13 @@
+import dayjs from "dayjs";
+
+// 日期格式化
+export function dateFormatter(date?: Date) {
+	const t = dayjs(date);
+
+	// 在今天之前
+	if (t.isBefore(dayjs().hour(0).minute(0).second(0))) {
+		return t.format("YYYY-MM-DD HH:mm");
+	} else {
+		return t.format("HH:mm");
+	}
+}
diff --git a/uni_modules/cool-ui/changelog.md b/uni_modules/cool-ui/changelog.md
new file mode 100644
index 0000000..832eea8
--- /dev/null
+++ b/uni_modules/cool-ui/changelog.md
@@ -0,0 +1,16 @@
+## 2024-4-27
+
+-   优化 cl-switch 组件
+
+## 2024-3-13
+
+-   添加 cl-select-city 组件
+
+## 2024-3-8
+
+-   部分组件重构
+-   更新 icon
+
+## 2024-3-1
+
+-   [cl-select-date] 解决切换日期时，列数据显示问题
diff --git a/uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.vue b/uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.vue
new file mode 100644
index 0000000..41a9e49
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-action-sheet/cl-action-sheet.vue
@@ -0,0 +1,132 @@
+<template>
+	<view class="cl-action-sheet">
+		<cl-popup
+			v-model="visible"
+			direction="bottom"
+			:padding="0"
+			border-radius="32rpx 32rpx 0 0"
+			:close-on-click-modal="conf.closeOnClickModal"
+		>
+			<view class="cl-action-sheet__title" v-if="conf.title">
+				{{ conf.title }}
+			</view>
+
+			<!-- 列表 -->
+			<button
+				class="cl-action-sheet__item"
+				v-for="(item, index) in conf.list"
+				:key="index"
+				:class="[item.disabled ? 'is-disabled' : '']"
+				:style="{
+					color: item.color,
+					fontSize: item.size,
+				}"
+				:open-type="item.openType"
+				@getphonenumber="onEvent(item, 'getphonenumber')"
+				@getuserinfo="onEvent(item, 'getuserinfo')"
+				@contact="onEvent(item, 'contact')"
+				@error="onEvent(item, 'error')"
+				@opensetting="onEvent(item, 'opensetting')"
+				@tap="select(index, item)"
+			>
+				<cl-icon
+					:class-name="item.icon"
+					:size="34"
+					:margin="[0, 10, 0, 0]"
+					v-if="item.icon"
+				/>
+				<text class="cl-action-sheet__label">{{ item.label }}</text>
+			</button>
+
+			<!-- 取消按钮 -->
+			<button
+				class="cl-action-sheet__item cl-action-sheet__item--cancel"
+				@tap="close('cancel')"
+				v-if="conf.showCancel"
+			>
+				{{ conf.cancelText }}
+			</button>
+		</cl-popup>
+	</view>
+</template>
+
+<script lang="ts">
+import { ref, defineComponent } from "vue";
+
+export default defineComponent({
+	name: "cl-action-sheet",
+
+	setup() {
+		// 是否可见
+		const visible = ref(false);
+
+		// 配置
+		const conf = ref<any>({});
+
+		// 打开
+		function open(options: ClActionSheet.Options) {
+			conf.value = Object.assign(
+				{
+					title: "",
+					list: [],
+					callback: null,
+					closeOnClickModal: true,
+					showCancel: true,
+					cancelText: "取消",
+				},
+				options,
+			);
+
+			visible.value = true;
+		}
+
+		// 关闭
+		function close(action: ClActionSheet.Action) {
+			const done = () => {
+				visible.value = false;
+
+				if (conf.value.callback) {
+					conf.value.callback(action);
+				}
+			};
+
+			if (conf.value.beforeClose) {
+				conf.value.beforeClose(action, done);
+			} else {
+				done();
+			}
+		}
+
+		// 选择
+		function select(index: number, item: any) {
+			if (item.disabled) {
+				return false;
+			}
+
+			if (item.click) {
+				item.click(() => {
+					visible.value = false;
+				});
+			} else {
+				close(index);
+			}
+		}
+
+		// 事件
+		function onEvent(item: any, name: string) {
+			if (item[name]) {
+				item[name]();
+			}
+		}
+
+		return {
+			visible,
+			conf,
+			open,
+			close,
+			select,
+			onEvent,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-avatar-group/cl-avatar-group.vue b/uni_modules/cool-ui/components/cl-avatar-group/cl-avatar-group.vue
new file mode 100644
index 0000000..c71c87c
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-avatar-group/cl-avatar-group.vue
@@ -0,0 +1,61 @@
+<template>
+	<view class="cl-avatar-group">
+		<template v-for="(item, index) in urls" :key="index">
+			<cl-avatar v-if="index < max" :size="size" :mode="mode" :shape="shape" :src="item" />
+		</template>
+
+		<cl-avatar :size="size" v-if="overLen > 0 && showMore">
+			<view class="cl-avatar-group__more"> {{ overLen }} </view>
+		</cl-avatar>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { type PropType } from "vue";
+
+export default defineComponent({
+	name: "cl-avatar-group",
+
+	props: {
+		// 多个地址
+		urls: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
+		// 大小
+		size: {
+			type: Number,
+			default: 80,
+		},
+		// 最大数量
+		max: {
+			type: Number,
+			default: 5,
+		},
+		// 显示更多
+		showMore: {
+			type: Boolean,
+			default: true,
+		},
+		// 形状
+		shape: {
+			type: String as PropType<"circle" | "square">,
+			default: "circle",
+		},
+		// 裁剪模式
+		mode: {
+			type: String,
+			default: "scaleToFill",
+		},
+	},
+
+	setup(props) {
+		const overLen = computed(() => props.urls.length - props.max);
+
+		return {
+			overLen,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-avatar/cl-avatar.vue b/uni_modules/cool-ui/components/cl-avatar/cl-avatar.vue
new file mode 100644
index 0000000..22a2fc4
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-avatar/cl-avatar.vue
@@ -0,0 +1,101 @@
+<template>
+	<view
+		:class="['cl-avatar', `cl-avatar--${shape}`]"
+		:style="[{ height: parseRpx(size), width: parseRpx(size) }, baseStyle]"
+		@click="tap"
+	>
+		<slot v-if="$slots.default || $slots.$default"> </slot>
+
+		<template v-else>
+			<slot name="placeholder" v-if="!src">
+				<view class="cl-avatar__placeholder">
+					<text
+						:class="{
+							'cl-icon-my': !name,
+						}"
+						:style="{ fontSize: parseRpx(size / 2) }"
+						>{{ name[0] }}</text
+					>
+				</view>
+			</slot>
+
+			<slot name="error" v-else-if="isError">
+				<view class="cl-avatar__error"> Error </view>
+			</slot>
+
+			<image
+				class="cl-avatar__target"
+				:src="src"
+				:mode="mode"
+				:lazy-load="lazyLoad"
+				@error="handleError"
+				@load="handleLoad"
+				v-else
+			/>
+		</template>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { type PropType } from "vue";
+import { useStyle, useTap } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-avatar",
+
+	props: {
+		// 图片地址
+		src: String,
+		// 名称
+		name: {
+			type: String,
+			default: "",
+		},
+		// 懒加载
+		lazyLoad: Boolean,
+		// 头像大小
+		size: {
+			type: Number,
+			default: 80,
+		},
+		// 形状
+		shape: {
+			type: String as PropType<"circle" | "square">,
+			default: "circle",
+		},
+		// 裁剪模式
+		mode: {
+			type: String,
+			default: "scaleToFill",
+		},
+	},
+
+	emits: ["error", "load"],
+
+	setup(_, { emit }) {
+		// 是否加载失败
+		const isError = ref(false);
+
+		// 处理加载
+		function handleLoad(e: Event) {
+			isError.value = false;
+			emit("load", e);
+		}
+
+		// 处理错误
+		function handleError(e: Event) {
+			isError.value = true;
+			emit("error", e);
+		}
+
+		return {
+			isError,
+			handleLoad,
+			handleError,
+			...useTap(emit),
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-badge/cl-badge.vue b/uni_modules/cool-ui/components/cl-badge/cl-badge.vue
new file mode 100644
index 0000000..e7fe5d5
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-badge/cl-badge.vue
@@ -0,0 +1,77 @@
+<template>
+	<view
+		class="cl-badge"
+		:class="[
+			`cl-badge--${type}`,
+			{
+				'is-dot': isDot,
+				'is-plain': plain,
+			},
+		]"
+		v-if="$slots.default"
+	>
+		<slot></slot>
+		<text
+			class="cl-badge__content"
+			:style="[
+				baseStyle,
+				{
+					backgroundColor: color,
+				},
+			]"
+			v-if="!hidden && ((content && content != 0) || isDot)"
+			>{{ content }}</text
+		>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { type PropType } from "vue";
+import { isNumber } from "lodash-es";
+import { useStyle } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-badge",
+
+	props: {
+		// 文本内容
+		value: [String, Number],
+		// 最大值
+		max: Number,
+		// 是否点状
+		isDot: Boolean,
+		// 是否隐藏
+		hidden: Boolean,
+		// 类型
+		type: {
+			type: String as PropType<"primary" | "success" | "warning" | "error">,
+			default: "error",
+		},
+		// 颜色
+		color: String,
+		// 朴素
+		plain: Boolean,
+	},
+
+	setup(props) {
+		const content = computed(() => {
+			if (props.isDot) return "";
+
+			const value: any = props.value;
+			const max: any = props.max;
+
+			if (isNumber(value) && isNumber(max) && max > 0) {
+				return max < value ? `${max}+` : value;
+			}
+
+			return value;
+		});
+
+		return {
+			content,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-banner/cl-banner.vue b/uni_modules/cool-ui/components/cl-banner/cl-banner.vue
new file mode 100644
index 0000000..aa857e8
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-banner/cl-banner.vue
@@ -0,0 +1,280 @@
+<template>
+	<view
+		class="cl-banner"
+		:class="[`cl-banner--${type}`, `cl-banner--dot-${dotType}`]"
+		:style="{ height: parseRpx(height) }"
+		@tap="onTap"
+	>
+		<swiper
+			:indicator-dots="indicatorDots"
+			:indicator-color="indicatorColor"
+			:indicator-active-color="indicatorActiveColor"
+			:active-class="activeClass"
+			:changing-class="changingClass"
+			:autoplay="autoplay"
+			:current="current"
+			:interval="interval"
+			:duration="duration"
+			:circular="circular"
+			:vertical="vertical"
+			:previous-margin="previousMargin"
+			:next-margin="nextMargin"
+			:acceleration="acceleration"
+			:disable-programmatic-animation="disableProgrammaticAnimation"
+			:display-multiple-items="displayMultipleItems"
+			:skip-hidden-item-layout="skipHiddenItemLayout"
+			:disable-touch="disableTouch"
+			:easing-function="easingFunction"
+			@change="onChange"
+			@transition="onTransition"
+			@animationfinish="onAnimationfinish"
+		>
+			<swiper-item v-for="(item, index) in list" :key="index">
+				<view
+					class="cl-banner-item"
+					:class="[
+						{
+							'is-active': current === index,
+						},
+					]"
+				>
+					<slot name="item" :item="item" :index="index">
+						<image
+							class="cl-banner-item__image"
+							:style="{
+								'border-radius': parseRpx(radius),
+							}"
+							:mode="imageMode"
+							:src="item.url"
+						/>
+					</slot>
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<view class="cl-banner__btn" v-if="arrow">
+			<button class="cl-banner__btn-prev" @tap="onPrev" v-if="isPrev">
+				<i class="cl-icon-arrow-left"></i>
+			</button>
+			<button class="cl-banner__btn-next" @tap="onNext" v-if="isNext">
+				<i class="cl-icon-arrow-right"></i>
+			</button>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+import type { PropType } from "vue";
+import { parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-banner",
+
+	props: {
+		// 绑定值
+		modelValue: Number,
+		// 类型
+		type: String as PropType<"chain" | "card" | "">,
+		// 是否显示切换箭头
+		arrow: Boolean,
+		list: {
+			type: Array as PropType<{ url: string }[]>,
+			default: () => [],
+		},
+		// 图片裁剪, 缩放模式
+		imageMode: {
+			type: String,
+			default: "aspectFill",
+		},
+		// 高
+		height: {
+			type: [String, Number],
+			default: 300,
+		},
+		// 圆角
+		radius: {
+			type: [String, Number],
+			default: 10,
+		},
+		// 间距
+		margin: {
+			type: Array,
+			default: () => [],
+		},
+		indicatorDots: Boolean,
+		indicatorColor: {
+			type: String,
+			default: "rgba(0, 0, 0, .3)",
+		},
+		indicatorActiveColor: {
+			type: String,
+			default: "#000000",
+		},
+		// 指示器类型
+		dotType: {
+			type: String as PropType<"round" | "circle" | "square">,
+			default: "round",
+		},
+		activeClass: String,
+		changingClass: String,
+		autoplay: Boolean,
+		currentItemId: String,
+		interval: {
+			type: Number,
+			default: 5000,
+		},
+		duration: {
+			type: Number,
+			default: 500,
+		},
+		circular: Boolean,
+		vertical: Boolean,
+		acceleration: Boolean,
+		disableProgrammaticAnimation: Boolean,
+		displayMultipleItems: Number,
+		skipHiddenItemLayout: Boolean,
+		disableTouch: Boolean,
+		touchable: {
+			type: Boolean,
+			default: true,
+		},
+		easingFunction: {
+			type: String,
+			default: "default",
+		},
+	},
+
+	emits: ["update:modelValue", "change", "select", "transition", "animationfinish"],
+
+	setup(props, { emit }) {
+		const current = ref(0);
+
+		watch(
+			() => props.modelValue,
+			(val: any) => {
+				current.value = val || 0;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 上一个间距
+		const previousMargin = computed(() => {
+			let [a, b, c] = props.margin;
+
+			switch (props.type) {
+				case "chain":
+					switch (current.value) {
+						case 0:
+							return a || "0";
+						case (props.list || []).length - 1:
+							return c || "120rpx";
+						default:
+							return b || "70rpx";
+					}
+				case "card":
+					return a || "80rpx";
+				default:
+					return a || "0";
+			}
+		});
+
+		// 下一个间距
+		const nextMargin = computed(() => {
+			let [a, b, c] = props.margin;
+
+			switch (props.type) {
+				case "chain":
+					switch (current.value) {
+						case 0:
+							return c || "120rpx";
+						case (props.list || []).length - 1:
+							return a || "0";
+						default:
+							return b || "70rpx";
+					}
+				case "card":
+					return b || "80rpx";
+				default:
+					return b || "0";
+			}
+		});
+
+		// 是否采用衔接滑动
+		const circular = computed(() => {
+			switch (props.type) {
+				case "card":
+					return true;
+				default:
+					return props.circular;
+			}
+		});
+
+		// 指示点颜色
+		const indicatorColor = computed(() => (props.dotType ? "" : props.indicatorColor));
+
+		// 当前选中的指示点颜色
+		const indicatorActiveColor = computed(() =>
+			props.dotType ? "" : props.indicatorActiveColor,
+		);
+
+		// 是否有上一个
+		const isPrev = computed(() => circular.value || current.value > 0);
+
+		// 是否有下一个
+		const isNext = computed(() => circular.value || current.value < props.list.length - 1);
+
+		// 监听值变化
+		function onChange(e: any) {
+			current.value = e.detail.current;
+			emit("update:modelValue", current.value);
+			emit("change", current.value);
+		}
+
+		// swiper-item 的位置发生改变时会触发
+		function onTransition(e: any) {
+			emit("transition", e);
+		}
+
+		// 动画结束时会触发
+		function onAnimationfinish(e: any) {
+			emit("animationfinish", e);
+		}
+
+		// 上一个
+		function onPrev() {
+			current.value -= isPrev.value ? 1 : 0;
+		}
+
+		// 下一个
+		function onNext() {
+			current.value += isNext.value ? 1 : 0;
+		}
+
+		// 点击，返回序号
+		function onTap() {
+			emit("select", current.value);
+		}
+
+		return {
+			current,
+			isPrev,
+			isNext,
+			circular,
+			previousMargin,
+			nextMargin,
+			indicatorColor,
+			indicatorActiveColor,
+			onChange,
+			onTransition,
+			onAnimationfinish,
+			onPrev,
+			onNext,
+			onTap,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-button/cl-button.vue b/uni_modules/cool-ui/components/cl-button/cl-button.vue
new file mode 100644
index 0000000..2f90066
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-button/cl-button.vue
@@ -0,0 +1,179 @@
+<template>
+	<button
+		:class="[
+			'cl-button',
+			type && `cl-button--${type}`,
+			size && `cl-button--${size}`,
+			{
+				'is-round': round,
+				'is-loading': loading,
+				'is-plain': plain,
+				'is-fill': fill,
+				'is-disabled': disabled,
+				'is-border': border,
+				'is-bold': bold,
+				'is-custom': custom,
+			},
+		]"
+		:style="[
+			baseStyle,
+			{
+				color,
+			},
+		]"
+		:size="size"
+		:disabled="disabled || loading"
+		:form-type="formType"
+		:open-type="openType"
+		:hover-class="hoverClass"
+		:hover-start-time="hoverStartTime"
+		:hover-stay-time="hoverStayTime"
+		:app-parameter="appParameter"
+		:hover-stop-propagation="hoverStopPropagation"
+		:lang="lang"
+		:session-form="sessionForm"
+		:send-message-title="sendMessageTitle"
+		:send-message-path="sendMessagePath"
+		:send-message-img="sendMessageImg"
+		:show-message-card="showMessageCard"
+		@getphonenumber="getPhoneNumber"
+		@getuserinfo="getUserInfo"
+		@error="error"
+		@opensetting="openSetting"
+		@launchapp="launchApp"
+		@click="click"
+	>
+		<!-- 加载框 -->
+		<cl-loading :size="32" :color="loadingColor" :theme="loadingTheme" v-if="loading" />
+
+		<!-- 图标 -->
+		<view class="cl-button__icon" v-if="icon">
+			<image :src="icon" mode="aspectFit" v-if="isImg" />
+			<text :class="[icon]" v-else></text>
+		</view>
+
+		<!-- 本文 -->
+		<view class="cl-button__text" :style="{ color }">
+			<slot></slot>
+		</view>
+	</button>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { type PropType } from "vue";
+import { useTap } from "../../hooks";
+import { useStyle } from "../../hooks/style";
+
+export default defineComponent({
+	name: "cl-button",
+
+	props: {
+		// 按钮大小
+		size: String as PropType<"large" | "default" | "small">,
+		// 按钮类型
+		type: {
+			type: String as PropType<
+				"default" | "primary" | "success" | "danger" | "warning" | "info"
+			>,
+			default: "default",
+		},
+		// 是否朴素
+		plain: Boolean,
+		// 是否禁用
+		disabled: Boolean,
+		// 是否加载
+		loading: Boolean,
+		// 加载图标主题
+		loadingTheme: String,
+		// 加载图标颜色
+		loadingColor: String,
+		// 是否圆角
+		round: Boolean,
+		// 是否带有边框
+		border: {
+			type: Boolean,
+			default: true,
+		},
+		// 图标
+		icon: String,
+		// 水平填充
+		fill: Boolean,
+		// 字体颜色
+		color: String,
+		// 是否粗字体
+		bold: Boolean,
+		// 是否自定义
+		custom: Boolean,
+		// 以下查看 uniapp 文档：https://uniapp.dcloud.net.cn/component/button.html
+		formType: String,
+		openType: String,
+		hoverClass: {
+			type: String,
+			default: "button-hover",
+		},
+		hoverStartTime: {
+			type: Number,
+			default: 20,
+		},
+		hoverStayTime: {
+			type: Number,
+			default: 70,
+		},
+		appParameter: String,
+		hoverStopPropagation: Boolean,
+		lang: {
+			type: String,
+			default: "en",
+		},
+		sessionForm: String,
+		sendMessageTitle: String,
+		sendMessagePath: String,
+		sendMessageImg: String,
+		showMessageCard: Boolean,
+	},
+
+	setup(props, { emit }) {
+		const { tap } = useTap(emit);
+
+		// 是否图片
+		const isImg = computed(() => props.icon?.includes("/"));
+
+		// 事件
+		function getPhoneNumber(e: any) {
+			emit("getphonenumber", e);
+		}
+
+		function getUserInfo(e: any) {
+			emit("getuserinfo", e);
+		}
+
+		function error(e: any) {
+			emit("error", e);
+		}
+
+		function openSetting(e: any) {
+			emit("opensetting", e);
+		}
+
+		function launchApp(e: any) {
+			emit("launchapp", e);
+		}
+
+		function click(e: Event) {
+			tap(e);
+		}
+
+		return {
+			getPhoneNumber,
+			getUserInfo,
+			error,
+			openSetting,
+			launchApp,
+			click,
+			isImg,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-captcha/cl-captcha.vue b/uni_modules/cool-ui/components/cl-captcha/cl-captcha.vue
new file mode 100644
index 0000000..50b3612
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-captcha/cl-captcha.vue
@@ -0,0 +1,123 @@
+<template>
+	<view
+		class="cl-captcha"
+		:class="{
+			'is-border': border,
+		}"
+	>
+		<input
+			class="cl-captcha__input"
+			v-model="value"
+			type="number"
+			:focus="focus"
+			:maxlength="len"
+			@focus="onFocus"
+			@blur="onBlur"
+			@input="onInput"
+		/>
+
+		<view class="cl-captcha__code">
+			<view
+				class="cl-captcha__item"
+				:style="{
+					height: parseRpx(height),
+					margin: `0 ${parseRpx(gutter)}`,
+					backgroundColor,
+				}"
+				v-for="(_, index) in list"
+				:key="index"
+			>
+				<text class="cl-captcha__value">{{ value[index] }}</text>
+				<view class="cl-captcha__cursor" v-if="value.length == index && isFocus"></view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+import { parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-captcha",
+
+	props: {
+		// 绑定值
+		modelValue: String,
+		// 是否自动聚焦
+		focus: Boolean,
+		// 验证码高度
+		height: {
+			type: [String, Number],
+			default: 140,
+		},
+		// 验证码位数
+		len: {
+			type: Number,
+			default: 4,
+		},
+		// 间隔
+		gutter: {
+			type: Number,
+			default: 20,
+		},
+		// 带边框
+		border: Boolean,
+		// 背景色
+		backgroundColor: {
+			type: String,
+			default: "#ebecee",
+		},
+	},
+
+	emits: ["update:modelValue", "done"],
+
+	setup(props, { emit }) {
+		const value = ref();
+
+		// 是否聚焦
+		const isFocus = ref(props.focus);
+
+		// 头条小程序下，无法 v-for 数字
+		const list = computed(() => new Array(props.len).fill(1));
+
+		watch(
+			() => props.modelValue,
+			(val) => {
+				value.value = val || "";
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		function onFocus() {
+			isFocus.value = true;
+		}
+
+		function onBlur() {
+			isFocus.value = false;
+		}
+
+		function onInput(e: any) {
+			const val = e.detail.value;
+
+			emit("update:modelValue", val);
+
+			if (val.length === props.len) {
+				emit("done", val);
+			}
+		}
+
+		return {
+			value,
+			isFocus,
+			list,
+			parseRpx,
+			onFocus,
+			onBlur,
+			onInput,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-card/cl-card.vue b/uni_modules/cool-ui/components/cl-card/cl-card.vue
new file mode 100644
index 0000000..b184e2c
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-card/cl-card.vue
@@ -0,0 +1,67 @@
+<template>
+	<view
+		class="cl-card"
+		:style="{
+			backgroundColor,
+		}"
+	>
+		<view class="cl-card__header" v-if="label">
+			<cl-text :size="28" bold :value="label"></cl-text>
+
+			<view class="cl-card__loading" v-if="loading">
+				<cl-loading :size="36" :loading="loading"></cl-loading>
+			</view>
+
+			<template v-else>
+				<view class="cl-card__more" v-if="more" @tap="toMore">
+					<slot name="more">
+						<text class="text">{{ moreText }}</text>
+						<text class="cl-icon-arrow-right"></text>
+					</slot>
+				</view>
+			</template>
+		</view>
+
+		<view class="cl-card__container">
+			<slot></slot>
+		</view>
+
+		<view class="cl-card__footer" v-if="$slots.footer">
+			<slot name="footer"></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "cl-card",
+
+	props: {
+		// 标签内容
+		label: String,
+		// 是否加载中
+		loading: Boolean,
+		// 是否显示查看更多
+		more: Boolean,
+		// 更多的文本内容
+		moreText: String,
+		// 背景色
+		backgroundColor: {
+			type: String,
+			default: "#ffffff",
+		},
+	},
+
+	setup(_, { emit }) {
+		function toMore() {
+			emit("more");
+		}
+
+		return {
+			toMore,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-checkbox-group/cl-checkbox-group.vue b/uni_modules/cool-ui/components/cl-checkbox-group/cl-checkbox-group.vue
new file mode 100644
index 0000000..42a4dbf
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-checkbox-group/cl-checkbox-group.vue
@@ -0,0 +1,61 @@
+<template>
+	<view
+		class="cl-checkbox-group"
+		:class="{
+			'is-fill': fill,
+		}"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { cloneDeep } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-checkbox-group",
+
+	props: {
+		// 绑定值
+		modelValue: {
+			type: Array,
+			default: () => [],
+		},
+		// 是否边框样式
+		border: Boolean,
+		// 是否禁用
+		disabled: Boolean,
+		// 是否圆角
+		round: Boolean,
+		// 是否宽度填充
+		fill: Boolean,
+		// 是否只显示文字
+		text: Boolean,
+		// 图标大小
+		size: [String, Number],
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		function onChange(label: string) {
+			const index = props.modelValue.findIndex((e) => e == label);
+			let list = cloneDeep(props.modelValue);
+
+			if (index >= 0) {
+				list.splice(index, 1);
+			} else {
+				list.push(label);
+			}
+
+			emit("update:modelValue", list);
+			emit("change", list);
+		}
+
+		return {
+			onChange,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-checkbox/cl-checkbox.vue b/uni_modules/cool-ui/components/cl-checkbox/cl-checkbox.vue
new file mode 100644
index 0000000..998f80d
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-checkbox/cl-checkbox.vue
@@ -0,0 +1,148 @@
+<template>
+	<view class="cl-checkbox" :class="[classList]" :style="[baseStyle]" @tap.stop="change">
+		<slot name="icon" :checked="checked">
+			<view
+				class="cl-checkbox__input"
+				:style="{
+					height: size,
+					width: size,
+				}"
+			>
+				<text class="cl-icon-toast-success" v-if="checked"></text>
+			</view>
+		</slot>
+
+		<view class="cl-checkbox__label">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+import { isArray, isBoolean } from "lodash-es";
+import { getParent, parseRpx } from "/@/cool/utils";
+import { useForm, useStyle } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-checkbox",
+
+	props: {
+		// 绑定值
+		modelValue: [String, Number, Boolean],
+		// 标识
+		label: [String, Number, Boolean],
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否边框样式
+		border: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否圆角
+		round: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否只显示文字
+		text: {
+			type: Boolean,
+			default: null,
+		},
+		// 图标大小
+		size: [String, Number],
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		const { disabled } = useForm();
+
+		// <cl-checkbox-group />
+		const parent = getParent("cl-checkbox-group", [
+			"modelValue",
+			"round",
+			"border",
+			"fill",
+			"disabled",
+			"size",
+			"text",
+			"onChange",
+		]);
+
+		// 是否选中
+		const checked = ref(false);
+
+		// 是否禁用
+		const isDisabled = computed(() => {
+			return (
+				disabled.value ||
+				(isBoolean(props.disabled) ? props.disabled : parent.value?.disabled)
+			);
+		});
+
+		// 大小
+		const size = computed(() => {
+			return parseRpx(props.size || parent.value?.size);
+		});
+
+		// 样式
+		const classList = computed(() => {
+			const d = {
+				"is-disabled": isDisabled.value,
+				"is-checked": checked.value,
+			};
+
+			["border", "fill", "text", "round"].forEach((k) => {
+				// @ts-ignore
+				d[`is-${k}`] = isBoolean(props[k]) ? props[k] : parent.value?.[k];
+			});
+
+			return d;
+		});
+
+		// 绑定值改变
+		function change() {
+			if (isDisabled.value) {
+				return false;
+			}
+
+			checked.value = !checked.value;
+
+			emit("update:modelValue", checked.value);
+			emit("change", checked.value);
+
+			// 传递给父组件
+			if (parent.value) {
+				parent.value.onChange(props.label);
+			}
+		}
+
+		// 监听绑定值变化
+		watch(
+			() => (parent.value ? parent.value.modelValue : props.modelValue),
+			(val: any) => {
+				if (isArray(val)) {
+					checked.value = val.includes(props.label);
+				} else {
+					checked.value = val;
+				}
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		return {
+			size,
+			checked,
+			classList,
+			change,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-col/cl-col.vue b/uni_modules/cool-ui/components/cl-col/cl-col.vue
new file mode 100644
index 0000000..9e69e8f
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-col/cl-col.vue
@@ -0,0 +1,65 @@
+<template>
+	<view
+		class="cl-col"
+		:class="[classList]"
+		:style="{
+			'padding-left': padding,
+			'padding-right': padding,
+		}"
+		@click="tap"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useTap } from "../../hooks";
+import { getParent } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-col",
+
+	props: {
+		// 栅格占据的列数
+		span: {
+			type: Number,
+			default: 24,
+		},
+		// 栅格左侧的间隔格数
+		offset: Number,
+		// 栅格向右移动格数
+		pull: Number,
+		// 栅格向左移动格数
+		push: Number,
+	},
+
+	setup(props, { emit }) {
+		// <cl-row />
+		const parent = getParent("cl-row", ["gutter"]);
+
+		// 间距
+		const padding = computed(() => (parent.value ? parent.value.gutter / 2 + "rpx" : 0));
+
+		// 样式
+		const classList = computed(() => {
+			let list: string[] = [];
+			const validProps: (keyof typeof props)[] = ["span", "offset", "pull", "push"];
+			validProps.forEach((k) => {
+				let value = props[k] as number;
+				if (value || value === 0) {
+					list.push(k !== "span" ? `cl-col-${k}-${value}` : `cl-col-${value}`);
+				}
+			});
+			return list.join(" ");
+		});
+
+		return {
+			classList,
+			parent,
+			padding,
+			...useTap(emit),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-confirm/cl-confirm.vue b/uni_modules/cool-ui/components/cl-confirm/cl-confirm.vue
new file mode 100644
index 0000000..715f232
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-confirm/cl-confirm.vue
@@ -0,0 +1,173 @@
+<template>
+	<view class="cl-confirm">
+		<cl-dialog
+			v-model="visible"
+			:title="conf.title"
+			:width="conf.width"
+			:close-on-click-modal="conf.closeOnClickModal"
+			@close="onClose"
+			@closed="onClosed"
+		>
+			<template #header>
+				<view class="cl-confirm__header">
+					<text class="cl-icon-toast-error" v-if="conf.type == 'error'"></text>
+					<text class="cl-icon-toast-warning" v-else-if="conf.type == 'warning'"></text>
+					<text class="cl-icon-toast-success" v-else-if="conf.type == 'success'"></text>
+					<text class="cl-confirm__title">{{ conf.title }}</text>
+				</view>
+			</template>
+
+			<view
+				class="cl-confirm__container"
+				:style="{
+					textAlign: conf.message ? 'center' : 'left',
+				}"
+			>
+				<slot>
+					<view class="cl-confirm__message">{{ conf.message }}</view>
+				</slot>
+			</view>
+
+			<template #footer v-if="conf.showCancelButton || conf.showConfirmButton">
+				<view class="cl-confirm__footer">
+					<view class="cl-confirm__footer-item" v-if="conf.showCancelButton">
+						<cl-button fill @tap="close('cancel')">
+							{{ conf.cancelButtonText }}</cl-button
+						>
+					</view>
+
+					<view class="cl-confirm__footer-item" v-if="conf.showConfirmButton">
+						<cl-button fill type="primary" :loading="loading" @tap="close('confirm')">
+							{{ conf.confirmButtonText }}
+						</cl-button>
+					</view>
+				</view>
+			</template>
+		</cl-dialog>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, nextTick, ref } from "vue";
+
+export default defineComponent({
+	name: "cl-confirm",
+
+	setup() {
+		// 是否可见
+		const visible = ref(false);
+
+		// 是否已关闭
+		const closed = ref(true);
+
+		// 是否加载中
+		const loading = ref(false);
+
+		// 配置
+		const conf = ref<ClConfirm.Options>({});
+
+		// 计时器
+		let timer: any;
+
+		// 锁
+		let lock = false;
+
+		// 打开
+		function open(options: ClConfirm.Options) {
+			lock = false;
+			visible.value = false;
+			clearTimeout(timer);
+
+			function next() {
+				visible.value = true;
+				closed.value = false;
+
+				// 设置选项
+				nextTick(() => {
+					conf.value = {
+						width: "500rpx",
+						showCancelButton: true,
+						showConfirmButton: true,
+						confirmButtonText: "确认",
+						cancelButtonText: "取消",
+						closeOnClickModal: true,
+						...options,
+					};
+
+					// 是否定时关闭
+					if (conf.value.duration) {
+						timer = setTimeout(() => {
+							close("close");
+						}, conf.value.duration);
+					}
+				});
+			}
+
+			if (!closed.value) {
+				setTimeout(() => {
+					next();
+				}, 350);
+			} else {
+				next();
+			}
+		}
+
+		// 关闭
+		function close(action: ClConfirm.Action = "close") {
+			lock = true;
+
+			// 完成
+			function done() {
+				if (conf.value.callback) {
+					conf.value.callback(action);
+				}
+
+				nextTick(() => {
+					visible.value = false;
+					hideLoading();
+				});
+			}
+
+			// 加载中
+			function showLoading() {
+				loading.value = true;
+			}
+
+			// 关闭加载
+			function hideLoading() {
+				loading.value = false;
+			}
+
+			if (conf.value.beforeClose) {
+				conf.value.beforeClose(action, { done, showLoading, hideLoading });
+			} else {
+				done();
+			}
+		}
+
+		// 监听关闭
+		function onClose() {
+			clearTimeout(timer);
+
+			if (!lock) {
+				close("close");
+			}
+		}
+
+		// 监听关闭后
+		function onClosed() {
+			closed.value = true;
+		}
+
+		return {
+			visible,
+			loading,
+			conf,
+			open,
+			close,
+			onClose,
+			onClosed,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-countdown/cl-countdown.vue b/uni_modules/cool-ui/components/cl-countdown/cl-countdown.vue
new file mode 100644
index 0000000..9624843
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-countdown/cl-countdown.vue
@@ -0,0 +1,273 @@
+<template>
+	<view
+		class="cl-countdown"
+		:style="{
+			'font-size': parseRpx(fontSize),
+		}"
+		v-if="visible"
+	>
+		<template v-for="(item, index) in list" :key="index">
+			<view class="cl-countdown__item" :style="item.ch ? textStyle : numberStyle">
+				{{ item.value }}
+			</view>
+		</template>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, nextTick, onBeforeUnmount, onBeforeMount } from "vue";
+import { parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-countdown",
+
+	props: {
+		// 格式化
+		format: {
+			type: String,
+			default: "{h}:{m}:{s}",
+		},
+		// 是否精简：为00时自动隐藏
+		simple: {
+			type: Boolean,
+			default: false,
+		},
+		// 还有多少天
+		day: {
+			type: Number,
+			default: 0,
+		},
+		// 还有多少小时
+		hour: {
+			type: Number,
+			default: 0,
+		},
+		// 还有多少分钟
+		minute: {
+			type: Number,
+			default: 0,
+		},
+		// 还有多少秒
+		second: {
+			type: Number,
+			default: 0,
+		},
+		// 结束时间
+		datetime: [Date, String],
+		// 数字样式
+		numberStyle: Object,
+		// 分隔符样式
+		textStyle: Object,
+		// 字体大小
+		fontSize: {
+			type: Number,
+			default: 26,
+		},
+	},
+
+	emits: ["stop", "done", "change"],
+
+	setup(props, { emit }) {
+		let timer: any = null;
+
+		// 秒
+		const seconds = ref(0);
+
+		// 状态
+		let status = false;
+
+		// 是否显示
+		const visible = ref(true);
+
+		// 列表
+		const list = ref<any[]>([]);
+
+		// 转成秒
+		function toSeconds({ day = 0, hour = 0, minute = 0, second = 0, datetime }: any) {
+			if (datetime) {
+				return (
+					(new Date(datetime.replace(/-/g, "/")).getTime() - new Date().getTime()) / 1000
+				);
+			} else {
+				return day * 60 * 60 * 24 + hour * 60 * 60 + minute * 60 + second;
+			}
+		}
+
+		// 开始倒计时
+		function start(options?: any) {
+			visible.value = true;
+
+			nextTick(() => {
+				let { day, hour, minute, second, datetime } = options || {};
+
+				if (!day) {
+					day = props.day;
+				}
+
+				if (!hour) {
+					hour = props.hour;
+				}
+
+				if (!minute) {
+					minute = props.minute;
+				}
+
+				if (!second) {
+					second = props.second;
+				}
+
+				if (!datetime) {
+					datetime = props.datetime;
+				}
+
+				seconds.value = toSeconds({
+					day,
+					hour,
+					minute,
+					second,
+					datetime,
+				});
+
+				next();
+			});
+		}
+
+		// 继续倒计时
+		function next() {
+			if (seconds.value <= 0) {
+				return;
+			}
+
+			if (status) {
+				return;
+			}
+
+			status = true;
+
+			// 开始
+			function next() {
+				countDown();
+
+				if (seconds.value <= 0) {
+					done();
+					return;
+				} else {
+					seconds.value--;
+					timer = setTimeout(next, 1000);
+				}
+			}
+
+			next();
+		}
+
+		// 停止
+		function stop() {
+			clear();
+			emit("stop");
+		}
+
+		// 结束
+		function done() {
+			visible.value = false;
+			clear();
+			emit("done");
+		}
+
+		// 清除定时器
+		function clear() {
+			clearTimeout(timer);
+
+			timer = null;
+			status = false;
+		}
+
+		// 倒计时执行
+		function countDown() {
+			let [day, hour, minute, second]: any = [0, 0, 0, 0];
+
+			day = Math.floor(seconds.value / (60 * 60 * 24));
+			hour = Math.floor(seconds.value / (60 * 60)) - day * 24;
+			minute = Math.floor(seconds.value / 60) - day * 24 * 60 - hour * 60;
+			second = Math.floor(seconds.value) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
+
+			if (day < 10) {
+				day = "0" + day;
+			}
+			if (hour < 10) {
+				hour = "0" + hour;
+			}
+			if (minute < 10) {
+				minute = "0" + minute;
+			}
+			if (second < 10) {
+				second = "0" + second;
+			}
+
+			const d: any = {
+				d: day,
+				h: hour,
+				m: minute,
+				s: second,
+			};
+
+			let arr: any[] = props.format
+				.split(/[{,}]/)
+				.filter(Boolean)
+				.map((e) => {
+					return {
+						value: d[e] ? d[e] : e,
+						ch: d[e] === undefined,
+					};
+				});
+
+			let f = true;
+			let n = -1;
+
+			list.value = arr
+				.map((e, i) => {
+					if (props.simple) {
+						if (!e.ch) {
+							if (f) {
+								if (e.value == "00") {
+									n = i;
+									f = true;
+								} else {
+									f = false;
+								}
+							}
+						}
+					}
+
+					return e;
+				})
+				.filter((_, i) => {
+					return n == -1 ? true : n + 1 < i;
+				});
+
+			emit(
+				"change",
+				list.value.map((e) => e.value),
+			);
+		}
+
+		onBeforeUnmount(clear);
+		onBeforeMount(start);
+
+		watch(() => props.day, start);
+		watch(() => props.hour, start);
+		watch(() => props.minute, start);
+		watch(() => props.second, start);
+		watch(() => props.datetime, start);
+
+		return {
+			visible,
+			seconds,
+			list,
+			start,
+			stop,
+			toSeconds,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-dialog/cl-dialog.vue b/uni_modules/cool-ui/components/cl-dialog/cl-dialog.vue
new file mode 100644
index 0000000..7ee6d63
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-dialog/cl-dialog.vue
@@ -0,0 +1,110 @@
+<template>
+	<view class="cl-dialog__wrapper">
+		<cl-popup
+			v-model="visible"
+			direction="center"
+			:close-on-click-modal="closeOnClickModal"
+			:size="width"
+			:border-radius="16"
+			:padding="0"
+			@close="onClose"
+			@closed="onClosed"
+		>
+			<view class="cl-dialog">
+				<!-- 顶部 -->
+				<view class="cl-dialog__header" v-if="title">
+					<slot name="header">
+						{{ title }}
+					</slot>
+				</view>
+
+				<!-- 内容 -->
+				<view class="cl-dialog__container" :style="{ textAlign }">
+					<slot> </slot>
+				</view>
+
+				<!-- 底部 -->
+				<view class="cl-dialog__footer" v-if="$slots.footer">
+					<slot name="footer"> </slot>
+				</view>
+
+				<!-- 关闭按钮 -->
+				<view class="cl-dialog__close" v-if="showCloseBtn" @tap="close">
+					<text class="cl-icon-close"></text>
+				</view>
+			</view>
+		</cl-popup>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from "vue";
+import type { PropType } from "vue";
+
+export default defineComponent({
+	name: "cl-dialog",
+
+	props: {
+		// 是否可见
+		modelValue: Boolean,
+		// 标题
+		title: String,
+		// 文字对齐
+		textAlign: {
+			type: String as PropType<"left" | "center" | "right">,
+			default: "left",
+		},
+		// 宽度
+		width: {
+			type: String,
+			default: "80%",
+		},
+		// 点击遮罩层是否关闭
+		closeOnClickModal: {
+			type: Boolean,
+			default: true,
+		},
+		// 显示关闭按钮
+		showCloseBtn: Boolean,
+	},
+
+	setup(props, { emit }) {
+		const visible = ref(false);
+
+		watch(
+			() => props.modelValue,
+			(val) => {
+				visible.value = val;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		function open() {
+			visible.value = true;
+		}
+
+		function close() {
+			visible.value = false;
+		}
+
+		function onClose() {
+			emit("update:modelValue", false);
+			emit("close");
+		}
+
+		function onClosed() {
+			emit("closed");
+		}
+
+		return {
+			visible,
+			open,
+			close,
+			onClose,
+			onClosed,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-divider/cl-divider.vue b/uni_modules/cool-ui/components/cl-divider/cl-divider.vue
new file mode 100644
index 0000000..cf75419
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-divider/cl-divider.vue
@@ -0,0 +1,53 @@
+<template>
+	<view class="cl-divider">
+		<view class="cl-divider__line" :style="{ background: lineColor, width }"></view>
+
+		<view
+			class="cl-divider__text"
+			:style="{
+				backgroundColor,
+			}"
+		>
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { isArray } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-divider",
+
+	props: {
+		// 背景颜色
+		backgroundColor: String,
+		// 线条颜色
+		color: {
+			type: [String, Array],
+			default: "#dcdfe6",
+		},
+		// 线条宽度
+		width: {
+			type: String,
+			default: "100%",
+		},
+	},
+
+	setup(props) {
+		const lineColor = computed(() => {
+			if (isArray(props.color)) {
+				const [a, b] = props.color || [];
+				return `linear-gradient(to right, ${a}, ${b}, ${b}, ${a})`;
+			} else {
+				return props.color;
+			}
+		});
+
+		return {
+			lineColor,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-empty/cl-empty.vue b/uni_modules/cool-ui/components/cl-empty/cl-empty.vue
new file mode 100644
index 0000000..1d54518
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-empty/cl-empty.vue
@@ -0,0 +1,67 @@
+<template>
+	<view
+		class="cl-empty"
+		:class="{
+			'is-fixed': fixed,
+		}"
+		:style="[baseStyle]"
+	>
+		<image
+			class="cl-empty__icon"
+			:src="`/static/empty/${icon}.png`"
+			:style="{
+				height: parseRpx(iconSize),
+			}"
+			mode="aspectFit"
+			v-if="showIcon"
+		/>
+
+		<text class="cl-empty__text" v-if="text">{{ text }}</text>
+
+		<view class="cl-empty__container" v-if="$slots.default">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent } from "vue";
+import { useStyle } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-empty",
+
+	props: {
+		// 图标
+		icon: {
+			type: String as PropType<"comm">,
+			default: "comm",
+		},
+		// 图标大小
+		iconSize: [String, Number],
+		// 暂无数据文案
+		text: {
+			type: String,
+			default: "暂无数据",
+		},
+		// 是否固定
+		fixed: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否显示图标
+		showIcon: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	setup() {
+		return {
+			...useStyle({
+				height: "100%",
+			}),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-filter-bar/cl-filter-bar.vue b/uni_modules/cool-ui/components/cl-filter-bar/cl-filter-bar.vue
new file mode 100644
index 0000000..588804a
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-filter-bar/cl-filter-bar.vue
@@ -0,0 +1,124 @@
+<template>
+	<view
+		class="cl-filter-bar__wrap"
+		:class="[
+			{
+				'is-expand': isExpand,
+			},
+		]"
+	>
+		<!-- 过滤栏 -->
+		<view class="cl-filter-bar" :style="{ zIndex }">
+			<slot></slot>
+		</view>
+
+		<!-- 遮罩层 -->
+		<view class="cl-filter-bar__mask" @tap="close" @touchmove.stop.prevent></view>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, getCurrentInstance, ref, watch } from "vue";
+
+export default defineComponent({
+	name: "cl-filter-bar",
+
+	props: {
+		// 绑定值
+		modelValue: {
+			type: Object,
+			default: () => {
+				return {};
+			},
+		},
+		// 兼容参数
+		num: Number,
+	},
+
+	setup(props, { emit }) {
+		const { proxy }: any = getCurrentInstance();
+
+		// 表单值
+		const form = ref<any>(props.modelValue);
+
+		watch(
+			() => props.modelValue,
+			(val: any) => {
+				form.value = val;
+			},
+			{
+				immediate: true,
+				deep: true,
+			},
+		);
+
+		// 计时器
+		let timer: any = null;
+
+		// 是否展开
+		const isExpand = ref(false);
+
+		// 层级
+		const zIndex = ref(1);
+
+		// 设置是否展开。收起延迟300，避免动画未结束导致层级低了问题
+		function setExpand(f: boolean) {
+			clearTimeout(timer);
+
+			if (f) {
+				zIndex.value = 999;
+			} else {
+				timer = setTimeout(() => {
+					zIndex.value = 1;
+				}, 300);
+			}
+
+			isExpand.value = f;
+		}
+
+		// 收起下拉框
+		function collapse(prop?: string) {
+			proxy.__children.forEach((e: any) => {
+				e.collapse(prop);
+			});
+		}
+
+		// 关闭当前遮罩层及收起下拉框
+		function close() {
+			setExpand(false);
+			collapse();
+		}
+
+		// cl-filter-item 数据发生改变时触发
+		function update(data: { prop: string; value: any; action?: "clear" }) {
+			form.value[data.prop] = data.value;
+
+			if (data.action != "clear") {
+				emit("update:modelValue", form.value);
+				emit("change", data);
+			}
+		}
+
+		// 清空
+		function clear() {
+			proxy.__children.forEach((e: any) => {
+				e.clear();
+			});
+
+			emit("update:modelValue", form.value);
+			emit("clear");
+		}
+
+		return {
+			form,
+			zIndex,
+			isExpand,
+			setExpand,
+			collapse,
+			close,
+			clear,
+			update,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-filter-item/cl-filter-item.vue b/uni_modules/cool-ui/components/cl-filter-item/cl-filter-item.vue
new file mode 100644
index 0000000..8e89c61
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-filter-item/cl-filter-item.vue
@@ -0,0 +1,343 @@
+<template>
+	<view class="cl-filter-item" :class="classList" @tap="tapItem">
+		<!-- 文本内容 -->
+		<text class="cl-filter-item__label">{{ dropdown.name || label }}</text>
+
+		<!-- 下拉菜单 -->
+		<template v-if="type == 'dropdown'">
+			<text class="cl-icon-caret-bottom cl-filter-item__dropdown-icon"></text>
+		</template>
+
+		<!-- 开关 -->
+		<template v-else-if="type == 'switch'"> </template>
+
+		<!-- 排序 -->
+		<template v-else-if="type == 'order'">
+			<view class="cl-filter-item__order" :class="[`is-${value}`]">
+				<!-- 升序，降序图标 -->
+				<text class="cl-filter-item__order-asc"></text>
+				<text class="cl-filter-item__order-desc"></text>
+			</view>
+		</template>
+
+		<!-- 展开内容 -->
+		<view class="cl-filter-item__dropdown-box" :class="[`theme-${theme}`]">
+			<slot name="dropdown">
+				<template v-if="dropdown.list">
+					<!-- 数据 -->
+					<template v-if="dropdown.list.length > 0">
+						<!-- 列表 -->
+						<scroll-view class="cl-filter-item__dropdown-box__list" scroll-y>
+							<view
+								class="cl-filter-item__dropdown-box__item"
+								:class="[
+									item.checked ? 'is-checked' : '',
+									item.disabled ? 'is-disabled' : '',
+								]"
+								:style="{
+									width: itemWidth,
+								}"
+								v-for="(item, index) in dropdown.list"
+								:key="index"
+								@tap.stop="checkItem(item)"
+							>
+								<text class="cl-filter-item__dropdown-box__label">{{
+									item.label
+								}}</text>
+								<text class="cl-icon-check"></text>
+							</view>
+						</scroll-view>
+
+						<!-- 多选下的操作按钮 -->
+						<view class="cl-filter-item__dropdown-box__btn" v-if="multiple">
+							<cl-row :gutter="30">
+								<cl-col :span="12">
+									<cl-button fill round @tap="clear">清空</cl-button>
+								</cl-col>
+
+								<cl-col :span="12">
+									<cl-button fill round type="primary" @tap="confirm"
+										>确认</cl-button
+									>
+								</cl-col>
+							</cl-row>
+						</view>
+					</template>
+
+					<!-- 空态 -->
+					<template v-else>
+						<slot name="empty">
+							<view class="cl-filter-item__dropdown-box__empty"> 暂无数据 </view>
+						</slot>
+					</template>
+				</template>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, reactive, watch } from "vue";
+import { getParent } from "/@/cool/utils";
+
+declare interface Item {
+	label: string;
+	value: any;
+	checked?: boolean;
+	[key: string]: any;
+}
+
+export default defineComponent({
+	name: "cl-filter-item",
+
+	props: {
+		// 唯一标识
+		prop: {
+			type: String,
+			required: true,
+		},
+		// 类型
+		type: {
+			type: String as PropType<"dropdown" | "order" | "switch">,
+			default: "switch",
+		},
+		// 标题
+		label: String,
+		// 是否禁用
+		disabled: Boolean,
+		// 下拉框是否多选
+		multiple: Boolean,
+		// 下拉框主题
+		theme: {
+			type: String as PropType<"default" | "grid">,
+			default: "default",
+		},
+		// 格布局下的列数
+		gridCols: {
+			type: Number,
+			default: 4,
+		},
+		// 下拉数据选项
+		options: {
+			type: Array as PropType<Item[]>,
+			default: () => [],
+		},
+	},
+
+	emits: ["change"],
+
+	setup(props, { emit }) {
+		// <cl-filter-bar />
+		const parent = getParent(
+			"cl-filter-bar",
+			["form", "setExpand", "update", "close", "collapse"],
+			["collapse", "clear"],
+		);
+
+		// 下拉框
+		const dropdown = reactive({
+			name: "",
+			list: [] as Item[],
+			isExpand: false,
+		});
+
+		watch(
+			() => props.options,
+			(val) => {
+				dropdown.list = val;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 绑定值
+		const value = computed(() => {
+			const v = parent.value?.form[props.prop];
+
+			switch (props.type) {
+				case "dropdown":
+					if (!props.multiple) {
+						const d = dropdown.list.find((e) => e.value == v);
+						if (d) {
+							dropdown.name = d.label;
+						}
+					}
+					break;
+			}
+
+			return v;
+		});
+
+		// 样式
+		const classList = computed(() => {
+			return [
+				{
+					"is-switch": value.value && props.type == "switch",
+					"is-expand": dropdown.isExpand,
+					"is-only": !parent.value,
+					"is-disabled": props.disabled,
+				},
+			];
+		});
+
+		// 每项宽度
+		const itemWidth = computed(() => {
+			return props.theme == "grid" ? `calc(${100 / props.gridCols}% - 20rpx)` : "auto";
+		});
+
+		// 点击项
+		function tapItem() {
+			// 已禁用
+			if (props.disabled) {
+				return false;
+			}
+
+			// 关闭其他遮罩层
+			if (parent.value) {
+				parent.value.collapse(props.prop);
+			}
+
+			switch (props.type) {
+				case "dropdown":
+					if (dropdown.isExpand) {
+						collapse();
+					} else {
+						let arr = props.multiple ? value.value || [] : [value.value];
+
+						dropdown.list.map((e) => {
+							e.checked = arr.includes(e.value);
+
+							// 设置单选的选中标题
+							if (e.checked) {
+								if (!props.multiple) {
+									dropdown.name = e.label;
+								}
+							}
+						});
+
+						expand();
+					}
+					break;
+
+				case "switch":
+					update(!value.value);
+					break;
+
+				case "order":
+					// 修改排序
+					if (!value.value) {
+						update("asc");
+					} else if (value.value == "asc") {
+						update("desc");
+					} else if (value.value == "desc") {
+						update("");
+					}
+					break;
+			}
+		}
+
+		// 选择项
+		function checkItem(item: Item) {
+			// 已禁用
+			if (item.disabled) {
+				return false;
+			}
+
+			if (props.multiple) {
+				item.checked = !item.checked;
+			} else {
+				if (item.checked) {
+					item.checked = false;
+
+					dropdown.name = props.label || "";
+					update(undefined);
+				} else {
+					dropdown.list.forEach((e) => {
+						e.checked = e.value == item.value;
+					});
+
+					// 更新标题
+					dropdown.name = item.label;
+					// 更新数据
+					update(item.value);
+				}
+
+				// 收起下拉框
+				collapse();
+			}
+		}
+
+		// 展开下拉框
+		function expand() {
+			if (!dropdown.isExpand) {
+				dropdown.isExpand = true;
+
+				if (parent.value) {
+					parent.value.setExpand(true);
+				}
+			}
+		}
+
+		// 收起下拉框：prop 为空收起当前，否则收起除 prop 外的所有
+		function collapse(prop?: string) {
+			if (prop == props.prop) {
+				return false;
+			}
+
+			if (dropdown.isExpand) {
+				dropdown.isExpand = false;
+
+				if (parent.value) {
+					parent.value.setExpand(false);
+				}
+			}
+		}
+
+		// 下拉框多选确认
+		function confirm() {
+			update(dropdown.list.filter((e) => e.checked).map((e) => e.value));
+			collapse();
+		}
+
+		// 清空
+		function clear() {
+			if (props.multiple) {
+				update([], "clear");
+			} else {
+				update(undefined, "clear");
+			}
+
+			dropdown.name = props.label || "";
+
+			collapse();
+		}
+
+		// 更新数据
+		function update(value?: string | number | boolean | any[], action?: string) {
+			emit("change", value);
+
+			// 更新 cl-filter-bar
+			if (parent.value) {
+				parent.value.update({
+					prop: props.prop,
+					value,
+					action,
+				});
+			}
+		}
+
+		return {
+			value,
+			classList,
+			dropdown,
+			itemWidth,
+			checkItem,
+			tapItem,
+			confirm,
+			clear,
+			collapse,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-footer/cl-footer.vue b/uni_modules/cool-ui/components/cl-footer/cl-footer.vue
new file mode 100644
index 0000000..66d4e94
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-footer/cl-footer.vue
@@ -0,0 +1,154 @@
+<template>
+	<view class="cl-footer__wrap">
+		<view
+			class="cl-footer__placeholder"
+			:style="{ height, padding: parseRpx(padding) }"
+			v-if="fixed && visible"
+		></view>
+
+		<view
+			class="cl-footer"
+			:class="{
+				'is-border': border,
+				'is-fixed': fixed,
+			}"
+			:style="{
+				backgroundColor,
+				visibility: visible ? 'visible' : 'hidden',
+				bottom: parseRpx(bottom),
+				zIndex,
+			}"
+		>
+			<view
+				class="cl-footer__wrap"
+				:style="{
+					padding: parseRpx(padding),
+				}"
+			>
+				<view
+					class="cl-footer__inner"
+					:class="{
+						'is-flex': flex,
+					}"
+				>
+					<slot> </slot>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import {
+	computed,
+	defineComponent,
+	getCurrentInstance,
+	nextTick,
+	onMounted,
+	ref,
+	watch,
+} from "vue";
+import { parseRpx, sleep } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-footer",
+
+	props: {
+		// 背景色
+		backgroundColor: {
+			type: String,
+			default: "#fff",
+		},
+		// 內间距
+		padding: {
+			type: [String, Number],
+			default: "24rpx 36rpx",
+		},
+		// 固定高
+		height: [String, Number],
+		// 层级
+		zIndex: {
+			type: Number,
+			default: 99,
+		},
+		// 距离底部多少
+		bottom: {
+			type: [String, Number],
+			default: 0,
+		},
+		// 是否带上边框
+		border: Boolean,
+		// 是否固定底部定位
+		fixed: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否 flex 布局
+		flex: {
+			type: Boolean,
+			default: true,
+		},
+		// 延迟获取
+		delay: {
+			type: Number,
+			default: 0,
+		},
+		// 监听对象
+		vt: null,
+	},
+
+	setup(props) {
+		const instance = getCurrentInstance();
+
+		// 底部高度
+		const height = ref();
+
+		// 是否可见
+		const visible = computed(() => {
+			return parseInt(height.value) != 0;
+		});
+
+		// 重新计算
+		async function update() {
+			if (props.height) {
+				height.value = parseRpx(props.height);
+				return false;
+			}
+
+			await sleep(props.delay);
+			await nextTick();
+
+			uni.createSelectorQuery()
+				.in(instance?.proxy)
+				.select(".cl-footer__inner")
+				.boundingClientRect((rect) => {
+					if (rect) {
+						height.value = Math.floor(rect.height || 0) + "px";
+					}
+				})
+				.exec();
+		}
+
+		watch(
+			() => props.vt,
+			() => {
+				update();
+			},
+			{
+				deep: true,
+			},
+		);
+
+		onMounted(() => {
+			update();
+		});
+
+		return {
+			height,
+			visible,
+			update,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-form-item/cl-form-item.vue b/uni_modules/cool-ui/components/cl-form-item/cl-form-item.vue
new file mode 100644
index 0000000..b78fa5c
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-form-item/cl-form-item.vue
@@ -0,0 +1,286 @@
+<template>
+	<view
+		class="cl-form-item"
+		:class="[
+			`is-${labelPosition}`,
+			{
+				'is-error': !!message,
+				'is-required': isRequired,
+			},
+		]"
+		:style="[baseStyle]"
+		:id="`cl-form-item--${id}`"
+		ref="cl-form-item"
+	>
+		<view
+			class="cl-form-item__label"
+			:style="{
+				width: parseRpx(labelWidth),
+			}"
+			v-if="label || $slots.label"
+		>
+			<slot name="label">
+				{{ label }}
+			</slot>
+		</view>
+
+		<view class="cl-form-item__container">
+			<view class="cl-form-item__content" :class="[justify]">
+				<slot></slot>
+			</view>
+
+			<view class="cl-form-item__append" v-if="$slots.append">
+				<slot name="append"></slot>
+			</view>
+		</view>
+
+		<slot name="error" :message="message" :error="!!message">
+			<text class="cl-form-item__message" v-if="showMessage">{{ message }}</text>
+		</slot>
+	</view>
+</template>
+
+<script lang="ts">
+import {
+	computed,
+	defineComponent,
+	onUnmounted,
+	ref,
+	watch,
+	getCurrentInstance,
+	type PropType,
+} from "vue";
+import { isArray, isBoolean } from "lodash-es";
+import { getParent, parseRpx } from "/@/cool/utils";
+import AsyncValidator from "../../utils/async-validator";
+import { useStyle } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-form-item",
+
+	props: {
+		// 字段
+		prop: String,
+		// 标签内容
+		label: String,
+		// 标签的宽度
+		labelWidth: [String, Number],
+		// 标签的位置
+		labelPosition: String as PropType<"left" | "right" | "top">,
+		// 水平布局
+		justify: String as PropType<"start" | "center" | "end">,
+		// 规则
+		rules: {
+			type: Object,
+			default: null,
+		},
+		// 是否在 rules 属性改变后立即触发一次验证
+		validateOnRuleChange: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否必填
+		required: Boolean,
+	},
+
+	setup(props) {
+		const { proxy }: any = getCurrentInstance();
+
+		// cl-form
+		const parent = getParent(
+			"cl-form",
+			[
+				"form",
+				"rules",
+				"tips",
+				"labelWidth",
+				"labelPosition",
+				"justify",
+				"addField",
+				"removeField",
+				"validateOnRuleChange",
+			],
+			["clearValidate", "onError", "scrollTo"],
+		);
+
+		// 避免多层级带 . 符号无法识别问题
+		const id = props.prop?.replace(/\./g, "-");
+
+		// 绑定值
+		const value = ref<any>();
+
+		// 消息提示
+		const message = ref("");
+
+		// 是否必填
+		const isRequired = ref(props.required || false);
+
+		// 标题位置
+		const labelPosition = computed(() => {
+			return props.labelPosition || parent.value?.labelPosition;
+		});
+
+		// 标题宽度
+		const labelWidth = computed(() => {
+			return labelPosition.value == "top"
+				? "auto"
+				: parseRpx(props.labelWidth || parent.value?.labelWidth);
+		});
+
+		// 内容布局
+		const justify = computed(() => {
+			return `is-justify--${props.justify || parent.value?.justify}`;
+		});
+
+		// 是否显示消息
+		const showMessage = computed(() => {
+			return parent.value?.tips == "inner" && message.value;
+		});
+
+		// 校验器
+		let validator: any = null;
+
+		// 监听规则校验
+		watch(() => [parent.value?.rules, props.rules], onRules, {
+			immediate: true,
+			deep: true,
+		});
+
+		// 监听规则
+		function onRules(rules: any) {
+			if (!props.prop) return;
+			const rule = props.rules || rules?.[props.prop];
+
+			if (rule) {
+				if (!isRequired.value) {
+					isRequired.value = false;
+
+					if (isArray(rule)) {
+						rule.forEach((e: any) => {
+							if (e.required) {
+								isRequired.value = e.required;
+							}
+						});
+					} else {
+						isRequired.value = rule.required;
+					}
+				}
+
+				// 检验器
+				//@ts-ignore
+				validator = new AsyncValidator({
+					[props.prop]: rule,
+				});
+
+				// 是否在 rules 属性改变后立即触发一次验证
+				if (
+					isBoolean(props.validateOnRuleChange)
+						? props.validateOnRuleChange
+						: parent.value?.validateOnRuleChange
+				) {
+					validate();
+				}
+			}
+		}
+
+		// 检验
+		function validate() {
+			if (isRequired.value) {
+				validator?.validate({ [props.prop as any]: value.value }, (errors: any) => {
+					message.value = errors ? errors[0].message : "";
+				});
+			} else {
+				clearValidate();
+			}
+		}
+
+		// 清空验证
+		function clearValidate() {
+			message.value = "";
+		}
+
+		// 滚动到此
+		function scrollTo(prop: string) {
+			if (prop == props.prop) {
+				uni.createSelectorQuery()
+					.in(proxy)
+					.select(`#cl-form-item--${id}`)
+					.boundingClientRect((res) => {
+						if (res) {
+							proxy.$root.scrollTo(res.top);
+						}
+					})
+					.exec();
+			}
+		}
+
+		// 错误提示
+		function onError(errors: any[]) {
+			const item = errors.find((e) => e.field == props.prop);
+
+			if (item) {
+				message.value = item.message;
+			}
+		}
+
+		// 监听值变化
+		watch(
+			() => {
+				if (parent.value) {
+					let d: any = parent.value?.form;
+
+					if (props.prop?.includes(".")) {
+						props.prop.split(".").forEach((e) => {
+							if (d[e] !== undefined) {
+								d = d[e];
+							}
+						});
+
+						return d;
+					} else {
+						return d[props.prop as any];
+					}
+				}
+			},
+			(val: any) => {
+				value.value = val;
+				validate();
+			},
+			{
+				deep: true,
+			},
+		);
+
+		// 监听cl-form加载完
+		watch(
+			parent,
+			(val) => {
+				if (val) {
+					parent.value?.addField(props.prop, props.rules);
+				}
+			},
+			{ immediate: true },
+		);
+
+		onUnmounted(() => {
+			// 移除字段
+			parent.value?.removeField(props.prop);
+		});
+
+		return {
+			id,
+			message,
+			isRequired,
+			labelWidth,
+			labelPosition,
+			justify,
+			showMessage,
+			validate,
+			clearValidate,
+			scrollTo,
+			onError,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-form/cl-form.vue b/uni_modules/cool-ui/components/cl-form/cl-form.vue
new file mode 100644
index 0000000..5d0908b
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-form/cl-form.vue
@@ -0,0 +1,244 @@
+<template>
+	<view
+		:class="[
+			'cl-form',
+			{
+				'is-border': border,
+			},
+		]"
+	>
+		<slot></slot>
+
+		<!-- 提示 -->
+		<cl-toast :ref="setRefs('toast')"></cl-toast>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, getCurrentInstance, ref, watch, type PropType } from "vue";
+import { cloneDeep, isArray, isEmpty } from "lodash-es";
+import { useCool } from "/@/cool";
+import AsyncValidator from "../../utils/async-validator";
+
+export default defineComponent({
+	name: "cl-form",
+
+	props: {
+		// 表单数据对象
+		modelValue: {
+			type: Object,
+			default: () => {
+				return {};
+			},
+		},
+		// 表单验证规则
+		rules: Object,
+		// 是否带有边框
+		border: Boolean,
+		// 是否禁用
+		disabled: Boolean,
+		// 水平布局
+		justify: String as PropType<"start" | "center" | "end">,
+		// 消息提示方式
+		tips: {
+			type: String as PropType<"toast" | "inner" | "none">,
+			default: "toast",
+		},
+		// 标签的宽度
+		labelWidth: {
+			type: [String, Number],
+			default: 150,
+		},
+		// 标签的位置
+		labelPosition: {
+			type: String,
+			default: "left",
+		},
+		// 是否在 rules 属性改变后立即触发一次验证
+		validateOnRuleChange: {
+			type: Boolean,
+			default: false,
+		},
+		// 是否滚动到错误项
+		scrollToError: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	emits: ["update:modelValue", "change", "reset", "clear"],
+
+	setup(props, { emit }) {
+		const { proxy }: any = getCurrentInstance();
+		const { refs, setRefs } = useCool();
+
+		// 校验关键字
+		const fields = ref<string[]>([]);
+
+		// 表单值
+		const form = ref<any>({});
+
+		// 旧值
+		const _form = cloneDeep(props.modelValue);
+
+		watch(
+			() => props.modelValue,
+			(val: any) => {
+				form.value = val;
+			},
+			{
+				immediate: true,
+				deep: true,
+			},
+		);
+
+		// 规则
+		const rules = ref<any>({});
+
+		// 设置规则
+		function setRules(value: any) {
+			rules.value = value || {};
+		}
+
+		// 监听规则变化
+		watch(() => props.rules, setRules, {
+			immediate: true,
+			deep: true,
+		});
+
+		// 添加校验关键字
+		function addField(value: string, rule?: any) {
+			const item: string | unknown = fields.value.find((e: string) => e == value);
+
+			if (!item && value) {
+				fields.value.push(value);
+
+				// 添加规则
+				if (rule) {
+					rules.value[value] = rule;
+				}
+			}
+		}
+
+		// 移除校验关键字
+		function removeField(value: string) {
+			fields.value.splice(fields.value.indexOf(value), 1);
+		}
+
+		// 校验表单
+		function validate(callback: Function) {
+			if (!props.disabled) {
+				validateField(fields.value, (valid: boolean, errors: any[], fields: any) => {
+					if (callback) {
+						callback(valid, errors);
+					}
+
+					if (!valid) {
+						const { field, message } = errors[0];
+
+						if (props.scrollToError) {
+							proxy.__children.forEach((e: any) => {
+								e.scrollTo(field);
+							});
+						}
+
+						switch (props.tips) {
+							case "toast":
+								refs.toast.open({
+									message,
+									icon: "cl-icon-toast-warning",
+								});
+								break;
+							case "inner":
+								proxy.__children.forEach((e: any) => {
+									e.onError(errors);
+								});
+								break;
+						}
+					}
+				});
+			}
+		}
+
+		// 根据字段校验表单
+		function validateField(value: string[] | string, callback: Function) {
+			if (!isEmpty(value)) {
+				const r: any = {};
+
+				fields.value.forEach((e) => {
+					if (rules.value[e]) {
+						r[e] = rules.value[e];
+					}
+				});
+
+				//@ts-ignore
+				const validator = new AsyncValidator(r);
+				const values: any = isArray(value) ? value : [value];
+				const data: any = {};
+
+				values.forEach((e: string) => {
+					let d = form.value;
+
+					if (e) {
+						if (e.includes(".")) {
+							e.split(".").forEach((e) => {
+								d = d[e];
+							});
+						} else {
+							d = d[e];
+						}
+
+						data[e] = d;
+					}
+				});
+
+				validator.validate(data, (errors: any[]) => {
+					if (callback) {
+						callback(!errors, errors);
+					}
+				});
+			} else {
+				callback(true, []);
+			}
+		}
+
+		// 重置表单
+		function reset() {
+			form.value = cloneDeep(_form);
+			emit("update:modelValue", form.value);
+			emit("reset");
+			clearValidate();
+		}
+
+		// 清空表单
+		function clear() {
+			form.value = {};
+			emit("update:modelValue", form.value);
+			emit("clear");
+			clearValidate();
+		}
+
+		// 移除表单校验结果
+		function clearValidate() {
+			(proxy.__children || []).forEach((e: any) => {
+				e.clearValidate();
+			});
+		}
+
+		return {
+			refs,
+			setRefs,
+			form,
+			rules,
+			setRules,
+			validate,
+			validateField,
+			reset,
+			clear,
+			clearValidate,
+			addField,
+			removeField,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-grid-item/cl-grid-item.vue b/uni_modules/cool-ui/components/cl-grid-item/cl-grid-item.vue
new file mode 100644
index 0000000..66f5dc4
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-grid-item/cl-grid-item.vue
@@ -0,0 +1,28 @@
+<template>
+	<view class="cl-grid-item" :style="{ width }">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { getParent } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-grid-item",
+
+	setup() {
+		// cl-grid
+		const parent = getParent("cl-grid", ["column"]);
+
+		// 宽度
+		const width = computed(() => {
+			return 100 / (parent.value?.column || 0) + "%";
+		});
+
+		return {
+			width,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-grid/cl-grid.vue b/uni_modules/cool-ui/components/cl-grid/cl-grid.vue
new file mode 100644
index 0000000..c67d35e
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-grid/cl-grid.vue
@@ -0,0 +1,31 @@
+<template>
+	<view
+		class="cl-grid"
+		:class="[
+			`cl-grid__column-${column}`,
+			{
+				'is-border': border,
+			},
+		]"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "cl-grid",
+
+	props: {
+		// 列的数量
+		column: {
+			type: Number,
+			default: 3,
+		},
+		// 是否带边框
+		border: Boolean,
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-guide/cl-guide.vue b/uni_modules/cool-ui/components/cl-guide/cl-guide.vue
new file mode 100644
index 0000000..5d6e21d
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-guide/cl-guide.vue
@@ -0,0 +1,321 @@
+<template>
+	<view class="cl-guide">
+		<slot></slot>
+
+		<!-- 遮罩层 -->
+		<view
+			class="cl-guide__mask"
+			:style="{
+				'mix-blend-mode': mode,
+			}"
+			v-if="visible"
+		>
+			<!-- 显示区域 -->
+			<!-- @ts-ignore -->
+			<view
+				class="cl-guide__display"
+				:style="[display.style, step.style] as any"
+				@tap="onTap"
+			></view>
+
+			<!-- 工具 -->
+			<view class="cl-guide__tools" :class="[step.justify]" :style="tools.style" v-if="step">
+				<slot name="tools" :step="step" :current="current">
+					<!-- 图片 -->
+					<image
+						class="cl-guide__image"
+						:src="step.image.url"
+						:style="[step.image.style] as any"
+						v-if="step.image"
+					/>
+
+					<!-- 内容 -->
+					<view class="cl-guide__content" v-if="step.content">
+						{{ step.content }}
+					</view>
+
+					<!-- 按钮组 -->
+					<view class="cl-guide__op is-left">
+						<!-- 上一步按钮 -->
+						<button @tap="toPrev" v-if="isPrev && step.showPrev">
+							{{ step.prevText || "上一步" }}
+						</button>
+						<!-- 下一步按钮 -->
+						<button @tap="toNext" v-if="isNext && step.showNext">
+							{{ step.nextText || "下一步" }}
+						</button>
+						<!-- 跳过按钮 -->
+						<button @tap="toSkip" v-if="step.showSkip">
+							{{ step.skipText || "跳过" }}
+						</button>
+						<!-- 完成按钮 -->
+						<button @tap="toDone" v-if="!isNext">
+							{{ step.doneText || "完成" }}
+						</button>
+					</view>
+				</slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import {
+	computed,
+	defineComponent,
+	getCurrentInstance,
+	nextTick,
+	reactive,
+	ref,
+	watch,
+	type PropType,
+} from "vue";
+
+export default defineComponent({
+	name: "cl-guide",
+
+	props: {
+		// 当前步骤序号
+		modelValue: {
+			type: Number,
+			default: 0,
+		},
+		// 选项
+		mode: {
+			type: String as PropType<"hard-light" | "darken">,
+			default: "hard-light",
+		},
+	},
+
+	setup(props, { emit }) {
+		const { windowHeight } = uni.getSystemInfoSync();
+		const { proxy }: any = getCurrentInstance();
+
+		// 序号
+		const current = ref(0);
+
+		watch(
+			() => props.modelValue,
+			(val: number) => {
+				current.value = val;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 是否可见
+		const visible = ref(false);
+
+		// 步骤列表
+		const steps = ref<any[]>([]);
+
+		// 显示样式
+		const display = reactive({
+			style: {},
+		});
+
+		// 工具按钮
+		const tools = reactive({
+			style: {},
+		});
+
+		// 当前步骤信息
+		const step = computed(() => {
+			const d = steps.value[current.value];
+
+			if (d) {
+				if (d.showPrev === undefined) {
+					d.showPrev = true;
+				}
+
+				if (d.showNext === undefined) {
+					d.showNext = true;
+				}
+			}
+
+			return d;
+		});
+
+		// 是否有上一个
+		const isPrev = computed(() => current.value > 0);
+
+		// 是否有下一个
+		const isNext = computed(() => current.value < steps.value.length - 1);
+
+		// 设置数据
+		function defineSteps(arr: any[]) {
+			steps.value = arr;
+		}
+
+		// 开始
+		function start(index: number) {
+			visible.value = true;
+
+			nextTick(() => {
+				current.value = index || 0;
+				init();
+			});
+		}
+
+		// 关闭
+		function close() {
+			visible.value = false;
+		}
+
+		// 重置
+		function reset() {
+			current.value = 0;
+		}
+
+		// 初始化
+		function init() {
+			return Promise.all(
+				steps.value.map((e) => {
+					return new Promise((resolve) => {
+						uni.createSelectorQuery()
+							.select(e.selector)
+							.boundingClientRect((res) => {
+								e.rect = res;
+								resolve(e);
+							})
+							.exec();
+					});
+				}),
+			).then(() => {
+				updateStyle();
+			});
+		}
+
+		// 更新显示区域样式,工具栏样式
+		function updateStyle() {
+			let { height, width, left, top } = step.value.rect || {};
+
+			display.style = {
+				height: height + "px",
+				width: width + "px",
+				marginLeft: left + "px",
+				marginTop: top + "px",
+				"background-color": props.mode == "hard-light" ? "gray" : "#fff",
+			};
+
+			nextTick(() => {
+				uni.createSelectorQuery()
+					.in(proxy)
+					.select(".cl-guide__tools")
+					.boundingClientRect((res: any) => {
+						let _top = top + height;
+
+						if (top + height + res.height > windowHeight) {
+							_top = top - res.height - 10;
+						}
+
+						tools.style = {
+							top: _top + "px",
+						};
+					})
+					.exec();
+			});
+		}
+
+		// 上一步
+		async function toPrev() {
+			let prev = () => {
+				if (isPrev.value) {
+					current.value -= 1;
+					onChange();
+				}
+			};
+
+			if (step.value.onPrev) {
+				await step.value.onPrev({
+					prev,
+					next: toNext,
+					skip: toSkip,
+					done: toDone,
+					current: current.value,
+					step: step.value,
+				});
+			} else {
+				prev();
+			}
+		}
+
+		// 下一步
+		async function toNext() {
+			let next = () => {
+				if (isNext.value) {
+					current.value += 1;
+					onChange();
+				}
+			};
+
+			if (step.value.onNext) {
+				await step.value.onNext({
+					next,
+					prev: toPrev,
+					skip: toSkip,
+					done: toDone,
+					current: current.value,
+					step: step.value,
+				});
+			} else {
+				next();
+			}
+		}
+
+		// 跳过
+		function toSkip() {
+			close();
+			emit("skip", current.value);
+		}
+
+		// 完成
+		function toDone() {
+			close();
+			emit("done", step.value);
+		}
+
+		// 点击
+		function onTap() {
+			if (step.value.onClick) {
+				step.value.onClick({
+					next: toNext,
+					prev: toPrev,
+					skip: toSkip,
+					done: toDone,
+					current: current.value,
+					step: step.value,
+				});
+			}
+		}
+
+		// 切换
+		function onChange() {
+			updateStyle();
+			emit("change", current.value);
+		}
+
+		return {
+			current,
+			visible,
+			steps,
+			step,
+			display,
+			tools,
+			isPrev,
+			isNext,
+			defineSteps,
+			start,
+			close,
+			reset,
+			toPrev,
+			toNext,
+			toSkip,
+			toDone,
+			onTap,
+			onChange,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-icon/cl-icon.vue b/uni_modules/cool-ui/components/cl-icon/cl-icon.vue
new file mode 100644
index 0000000..e10305a
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-icon/cl-icon.vue
@@ -0,0 +1,39 @@
+<template>
+	<text
+		:class="['cl-icon', className || `cl-icon-${name}`, `is-${color}`]"
+		:style="[
+			baseStyle,
+			{
+				fontSize: parseRpx(size),
+				color,
+			},
+		]"
+	></text>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { useStyle } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-icon",
+	props: {
+		// 图标名称
+		name: String,
+		// 自定义图标名称
+		className: String,
+		// 图标大小
+		size: {
+			type: [String, Number],
+			default: 30,
+		},
+		// 图标颜色
+		color: String,
+	},
+	setup() {
+		return {
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-image/cl-image.vue b/uni_modules/cool-ui/components/cl-image/cl-image.vue
new file mode 100644
index 0000000..82c2304
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-image/cl-image.vue
@@ -0,0 +1,178 @@
+<template>
+	<view
+		class="cl-image"
+		:style="[imgStyle, baseStyle]"
+		:class="[
+			{
+				'is-round': round,
+				'is-error': !src || isError,
+			},
+		]"
+		@tap="onPreview"
+	>
+		<view class="cl-image__placeholder" v-if="!src">
+			<slot name="placeholder">
+				<text class="icon cl-icon-image"></text>
+			</slot>
+		</view>
+
+		<view class="cl-image__error" v-else-if="isError">
+			<slot name="error">
+				<text class="icon cl-icon-image-error"></text>
+			</slot>
+		</view>
+
+		<template v-else>
+			<view class="cl-image__loading" v-if="isLoading">
+				<cl-loading />
+			</view>
+
+			<image
+				class="cl-image__target"
+				:src="src"
+				:mode="mode"
+				:lazy-load="lazyLoad"
+				:webp="webp"
+				:show-menu-by-longpress="showMenuByLongpress"
+				@error="handleError"
+				@load="handleLoad"
+			/>
+
+			<slot></slot>
+		</template>
+	</view>
+</template>
+
+<script lang="ts">
+import { type PropType, computed, defineComponent, ref, watch } from "vue";
+import { isNumber, isArray, isString, isNaN } from "lodash-es";
+import { parseRpx } from "/@/cool/utils";
+import { useStyle } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-image",
+
+	props: {
+		// 图片地址
+		src: String,
+		// 图片裁剪、缩放的模式
+		mode: {
+			type: String,
+			default: "aspectFill",
+		},
+		// 图片大小
+		size: {
+			type: [String, Number, Array],
+			default: "100%",
+		},
+		// 是否圆角
+		round: Boolean,
+		// 当前预览值
+		previewCurrent: String,
+		// 预览列表
+		previewList: Array as PropType<string[]>,
+		// 懒加载
+		lazyLoad: Boolean,
+		fadeShow: {
+			type: Boolean,
+			default: true,
+		},
+		webp: Boolean,
+		showMenuByLongpress: Boolean,
+	},
+
+	setup(props, { emit }) {
+		// 是否加载失败
+		const isError = ref(false);
+
+		// 是否加载中
+		const isLoading = ref(false);
+
+		// 样式
+		const imgStyle = computed(() => {
+			const [height, width] = size.value;
+
+			let minWidth = "0";
+			let minHeight = "0";
+
+			// 不是有效高
+			if (isNaN(parseInt(height))) {
+				minHeight = width;
+			}
+
+			// 不是有效宽
+			if (isNaN(parseInt(width))) {
+				minWidth = height;
+			}
+
+			return {
+				height,
+				width,
+				minWidth,
+				minHeight,
+			};
+		});
+
+		// 尺寸
+		const size = computed(() => {
+			let size: any = ["100%", "100%"];
+
+			if (isString(props.size) || isNumber(props.size)) {
+				size = [props.size, props.size];
+			} else if (isArray(props.size)) {
+				size = props.size;
+			}
+
+			return size.map(parseRpx);
+		});
+
+		// 加载失败
+		function handleError(e: Event) {
+			isError.value = true;
+			isLoading.value = false;
+			emit("error", e);
+		}
+
+		// 加载成功
+		function handleLoad(e: Event) {
+			isError.value = false;
+			isLoading.value = false;
+			emit("load", e);
+		}
+
+		// 点击是否预览图片
+		function onPreview(e: Event) {
+			if (props.previewList) {
+				uni.previewImage({
+					urls: props.previewList || [],
+					current: props.previewCurrent || props.src,
+				});
+
+				e.stopPropagation();
+			}
+		}
+
+		watch(
+			() => props.src,
+			(val) => {
+				isLoading.value = !!val;
+				isError.value = false;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		return {
+			isError,
+			isLoading,
+			size,
+			imgStyle,
+			handleError,
+			handleLoad,
+			onPreview,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-input-number/cl-input-number.vue b/uni_modules/cool-ui/components/cl-input-number/cl-input-number.vue
new file mode 100644
index 0000000..65c5a31
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-input-number/cl-input-number.vue
@@ -0,0 +1,206 @@
+<template>
+	<view
+		class="cl-input-number"
+		:class="{ 'is-disabled': isDisabled, 'disabled-plus': !isPlus, 'disabled-minus': !isMinus }"
+	>
+		<!-- 减 -->
+		<view class="cl-input-number__minus" @tap="onMinus">
+			<text class="cl-icon-minus"></text>
+		</view>
+
+		<!-- 值 -->
+		<view class="cl-input-number__value" @tap="onFocus">
+			<text class="unit" v-if="unit">{{ unit }}</text>
+			<text class="num">{{ value }}</text>
+			<text class="unit" v-if="unit">{{ unit }}</text>
+
+			<input
+				:type="inputType"
+				v-model="value"
+				:disabled="isDisabled"
+				:focus="isFocus"
+				:style="[inputStyle]"
+				@blur="onBlur"
+			/>
+		</view>
+
+		<!-- 加 -->
+		<view class="cl-input-number__plus" @tap="onPlus">
+			<text class="cl-icon-plus"></text>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType, type StyleValue } from "vue";
+import { useForm } from "../../hooks";
+import { isDecimal, parseRpx } from "/@/cool/utils";
+import { isString } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-input-number",
+
+	props: {
+		// 绑定值
+		modelValue: [String, Number],
+		// 步进
+		step: {
+			type: Number,
+			default: 1,
+		},
+		// 最大值
+		max: {
+			type: Number,
+			default: 100,
+		},
+		// 最小值
+		min: {
+			type: Number,
+			default: 0,
+		},
+		// 数值精度
+		precision: Number,
+		// 是否禁用
+		disabled: Boolean,
+		// 单位
+		unit: String,
+		// 输入框样式
+		inputStyle: {
+			type: Object as PropType<StyleValue>,
+			default() {
+				return {};
+			},
+		},
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		const { disabled } = useForm();
+
+		// 绑定值
+		const value = ref(0);
+
+		watch(() => props.modelValue, check, {
+			immediate: true,
+		});
+
+		// 监听最大最小值变化
+		watch(() => props.max, update);
+		watch(() => props.min, update);
+
+		// 输入框类型
+		const inputType = computed(() => {
+			return props.precision ? "digit" : "number";
+		});
+
+		// 是否禁用
+		const isDisabled = computed(() => disabled.value || props.disabled);
+
+		// 可以加
+		const isPlus = computed(() => {
+			return props.max === undefined ? true : value.value < props.max;
+		});
+
+		// 可以减
+		const isMinus = computed(() => {
+			return props.min === undefined ? true : value.value > props.min;
+		});
+
+		// 验证值
+		function check(val?: any) {
+			if (val === undefined) {
+				val = value.value;
+			}
+
+			// 是否字符
+			if (isString(val)) {
+				val = Number(val);
+			}
+
+			// 是否小数
+			if (isDecimal(val)) {
+				val = Number(val.toFixed(props.precision || 0));
+			}
+
+			// 最小
+			if (val < props.min) {
+				val = props.min;
+			}
+
+			// 最大
+			if (val > props.max) {
+				val = props.max;
+			}
+
+			// 最小不能超过最大
+			if (props.min > props.max) {
+				val = props.max;
+			}
+
+			value.value = val;
+		}
+
+		// 更新值
+		function update() {
+			check();
+			emit("update:modelValue", value.value);
+			emit("change", value.value);
+		}
+
+		// 加
+		function onPlus() {
+			if (!isDisabled.value) {
+				value.value += props.step;
+
+				if (value.value > props.max) {
+					value.value = props.max;
+				}
+
+				update();
+			}
+		}
+
+		// 减
+		function onMinus() {
+			if (!isDisabled.value) {
+				value.value -= props.step;
+
+				if (value.value < props.min) {
+					value.value = props.min;
+				}
+
+				update();
+			}
+		}
+
+		// 是否显示输入框
+		const isFocus = ref(false);
+
+		// 聚焦
+		function onFocus() {
+			isFocus.value = true;
+		}
+
+		// 失焦
+		function onBlur() {
+			isFocus.value = false;
+			update();
+		}
+
+		return {
+			value,
+			isDisabled,
+			isPlus,
+			isMinus,
+			inputType,
+			onPlus,
+			onMinus,
+			onBlur,
+			onFocus,
+			isFocus,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-input/cl-input.vue b/uni_modules/cool-ui/components/cl-input/cl-input.vue
new file mode 100644
index 0000000..444eb0a
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-input/cl-input.vue
@@ -0,0 +1,238 @@
+<template>
+	<view
+		class="cl-input"
+		:class="[
+			{
+				'is-round': round,
+				'is-border': border,
+				'is-disabled': isDisabled,
+				'is-focus': isFocus,
+			},
+		]"
+		:style="[baseStyle]"
+		@click="click"
+	>
+		<!-- 只读 -->
+		<view class="cl-input__readonly" v-if="readonly"></view>
+
+		<!-- 前 -->
+		<view class="cl-input__prepend" v-if="$slots.prepend">
+			<slot name="prepend"></slot>
+		</view>
+
+		<view class="cl-input__wrap">
+			<input
+				class="cl-input__inner"
+				v-model="value"
+				:type="type"
+				:password="password"
+				:placeholder="placeholder"
+				:disabled="isDisabled"
+				:focus="focus"
+				:placeholder-style="placeholderStyle"
+				:placeholder-class="placeholderClass"
+				:maxlength="maxlength"
+				:cursor-spacing="cursorSpacing"
+				:confirm-type="confirmType"
+				:confirm-hold="confirmHold"
+				:adjust-position="adjustPosition"
+				:holdKeyboard="holdKeyboard"
+				@input="onInput"
+				@focus="onFocus"
+				@blur="onBlur"
+				@confirm="onConfirm"
+				@keyboardheightchange="onKeyboardheightchange"
+			/>
+
+			<!-- 清空 -->
+			<view class="cl-input__clear" v-show="isFocus && clearable" @tap="clear">
+				<text class="cl-icon-close-border"></text>
+			</view>
+		</view>
+
+		<!-- 后 -->
+		<view class="cl-input__append" v-if="$slots.append">
+			<slot name="append"></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+import type { PropType } from "vue";
+import { useForm, useStyle, useTap } from "../../hooks";
+import { keys } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-input",
+
+	props: {
+		modelValue: {
+			type: String,
+			default: "",
+		},
+		type: {
+			type: String as PropType<
+				"text" | "number" | "idcard" | "digit" | "tel" | "safe-password" | "nickname"
+			>,
+			default: "text",
+		},
+		password: Boolean,
+		placeholder: {
+			type: String,
+			default: "请填写",
+		},
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+		placeholderStyle: Object,
+		placeholderClass: String,
+		readonly: Boolean,
+		disabled: Boolean,
+		round: Boolean,
+		border: {
+			type: Boolean,
+			default: true,
+		},
+		focus: Boolean,
+		maxlength: {
+			type: [Number, String],
+			default: 140,
+		},
+		cursorSpacing: {
+			type: Number,
+			default: 0,
+		},
+		confirmType: {
+			type: String,
+			default: "done",
+		},
+		confirmHold: Boolean,
+		adjustPosition: {
+			type: Boolean,
+			default: true,
+		},
+		holdKeyboard: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup(props, { emit }) {
+		const { tap } = useTap(emit);
+
+		const form = useForm();
+
+		// 绑定值
+		const value = ref("");
+
+		watch(
+			() => props.modelValue,
+			(val: string) => {
+				value.value = val;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 是否聚焦
+		const isFocus = ref(props.focus);
+
+		// 是否禁用
+		const isDisabled = computed(() => {
+			return form.disabled.value || props.disabled;
+		});
+
+		// 占位符样式
+		const placeholderStyle = computed(() => {
+			const d: any = {
+				lineHeight: 1,
+				color: "#a8abb2",
+				...props.placeholderStyle,
+			};
+
+			return keys(d)
+				.map((k) => `${k}:${d[k]};`)
+				.join("");
+		});
+
+		// 输入
+		function onInput() {
+			emit("update:modelValue", value.value);
+			emit("change", value.value);
+
+			isFocus.value = Boolean(value.value);
+		}
+
+		// 聚焦
+		function onFocus(e: any) {
+			emit("focus", e);
+
+			if (value.value) {
+				isFocus.value = true;
+			}
+		}
+
+		// 失焦
+		function onBlur(e: any) {
+			emit("blur", e);
+
+			setTimeout(() => {
+				isFocus.value = false;
+			}, 0);
+		}
+
+		// 按下确认键
+		function onConfirm(e: any) {
+			emit("confirm", e);
+			search();
+		}
+
+		// 按下搜索键
+		function search() {
+			emit("search", value.value);
+		}
+
+		// 清空
+		function clear() {
+			value.value = "";
+			emit("update:modelValue", "");
+			emit("change", "");
+			emit("clear");
+		}
+
+		// 键盘高度变化
+		function onKeyboardheightchange(e: any) {
+			emit("keyboardheightchange", e);
+		}
+
+		// 点击
+		function click(e: any) {
+			if (!isDisabled.value) {
+				tap(e);
+			}
+		}
+
+		return {
+			value,
+			isDisabled,
+			isFocus,
+			click,
+			onInput,
+			onFocus,
+			onBlur,
+			onConfirm,
+			search,
+			clear,
+			onKeyboardheightchange,
+			placeholderStyle,
+			...useStyle({
+				padding: "0 20rpx",
+				fontSize: 26,
+			}),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-list-index/cl-list-index.vue b/uni_modules/cool-ui/components/cl-list-index/cl-list-index.vue
new file mode 100644
index 0000000..bc42c4f
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-list-index/cl-list-index.vue
@@ -0,0 +1,455 @@
+<template>
+	<view class="cl-list-index">
+		<!-- 搜索栏 -->
+		<view class="cl-list-index__search" v-if="searchBar">
+			<cl-input
+				v-model="keyWord"
+				:border="false"
+				round
+				:placeholder="placeholder"
+				background-color="#f6f7fa"
+				clearable
+			>
+				<template #prepend>
+					<text class="cl-icon-search"></text>
+				</template>
+			</cl-input>
+		</view>
+
+		<view class="cl-list-index__container">
+			<!-- 滚动视图 -->
+			<scroll-view
+				class="cl-list-index__scroller"
+				scroll-y
+				enable-back-to-top
+				scroll-with-animation
+				:scroll-into-view="`index-${label}`"
+				@scroll="onScroll"
+			>
+				<!-- 追加内容到头部 -->
+				<slot name="prepend"></slot>
+
+				<!-- 分组数据 -->
+				<view
+					class="group"
+					v-for="(item, index) in flist"
+					:key="index"
+					:id="`index-${item.label}`"
+				>
+					<!-- 关键字 -->
+					<view
+						class="header"
+						:class="{
+							'is-active': curr?.label == item.label,
+						}"
+					>
+						<slot name="header" :item="item" :isActive="curr?.label == item.label">
+							<text>{{ item.label }}</text>
+						</slot>
+					</view>
+
+					<!-- 数据列表 -->
+					<view class="container">
+						<view v-for="(item2, index2) in item.children" :key="index2">
+							<slot
+								name="item"
+								:item="item2"
+								:index="index2"
+								:group="item"
+								:isActive="curr?.label == item.label"
+							>
+								<view
+									class="item"
+									:class="{
+										'is-disabled': item2.disabled,
+									}"
+									@tap="onSelect(item2)"
+								>
+									<cl-checkbox
+										:model-value="isChecked(item2)"
+										:disabled="item2.disabled"
+										round
+										:margin="[0, 10, 0, 0]"
+										v-if="selectable"
+									/>
+
+									<view class="avatar">
+										<cl-avatar :src="item2[dict.avatar]"></cl-avatar>
+									</view>
+
+									<view class="text">
+										{{ item2[dict.name] }}
+									</view>
+								</view>
+							</slot>
+						</view>
+					</view>
+				</view>
+
+				<!-- 追加内容到尾部 -->
+				<slot name="append"></slot>
+			</scroll-view>
+		</view>
+
+		<!-- 索引栏 -->
+		<view class="cl-list-index__bar" v-if="indexBar">
+			<view class="list" @touchmove.stop.prevent="barMove" @touchend="barEnd">
+				<view
+					class="block"
+					:class="{
+						'is-active': curr?.label == item.label,
+					}"
+					v-for="(item, index) in flist"
+					:key="index"
+					:id="`${index}`"
+					@touchstart.stop.prevent="toRow(item)"
+				>
+					<text>{{ item.label }}</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 索引关键字 -->
+		<view class="cl-list-index__alert" v-show="alert && curr">{{ curr?.label }}</view>
+	</view>
+</template>
+
+<script lang="ts">
+import {
+	computed,
+	defineComponent,
+	getCurrentInstance,
+	nextTick,
+	reactive,
+	ref,
+	watch,
+	type PropType,
+} from "vue";
+import py from "js-pinyin";
+import { groupBy, isEmpty } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-list-index",
+
+	props: {
+		// 数据列表
+		data: {
+			type: Array as PropType<ClListIndex.Group>,
+			required: true,
+			default: () => [],
+		},
+		// 字典
+		dict: Object,
+		// 是否可选
+		selectable: Boolean,
+		// 已选列表
+		selection: {
+			type: Array,
+			default: () => [],
+		},
+		// 是否分组
+		isGroup: {
+			type: Boolean,
+			default: true,
+		},
+		// 显示序号栏
+		indexBar: {
+			type: Boolean,
+			default: true,
+		},
+		// 显示搜索栏
+		searchBar: {
+			type: Boolean,
+			default: true,
+		},
+		// 搜索占位内容
+		placeholder: {
+			type: String,
+			default: "搜索关键字",
+		},
+		// 延迟
+		delay: Number,
+	},
+
+	emits: ["select", "selection-change", "update:selection"],
+
+	setup(props, { emit }) {
+		const { proxy }: any = getCurrentInstance();
+
+		// 列表
+		const list = ref<ClListIndex.Group>([]);
+
+		// 已选列表
+		const selection = ref<any[]>([]);
+
+		// 字典
+		const dict = reactive<ClListIndex.Dict>({
+			id: "id",
+			avatar: "avatar",
+			name: "name",
+			...props.dict,
+		});
+
+		// 关键字
+		const keyWord = ref("");
+
+		// 标签
+		const label = ref("");
+
+		// 提示框
+		const alert = ref(false);
+
+		// 当前选择
+		const curr = ref<any>({});
+
+		// 条
+		const bar = reactive({
+			top: 0,
+			itemH: 0,
+		});
+
+		// 每项距离顶部的高度
+		const tops = ref<any[]>([]);
+
+		// 过滤列表
+		const flist = computed<any[]>(() => {
+			function match(e: any) {
+				return e
+					? (e[dict.name] || "").toLowerCase().includes(keyWord.value.toLowerCase())
+					: false;
+			}
+
+			return list.value
+				.filter((e) => e.children && e.children.find(match))
+				.map((e) => {
+					return {
+						...e,
+						children: e.children.filter(match),
+					};
+				});
+		});
+
+		// 监听滚动
+		function onScroll(e: { detail: { scrollTop: number } }) {
+			// 对比每个高度计算
+			let num =
+				tops.value.filter((top) => e.detail.scrollTop >= top - (props.searchBar ? 60 : 0))
+					.length - 1;
+
+			if (num < 0) {
+				num = 0;
+			}
+
+			// 设置当前
+			curr.value = list.value[num];
+		}
+
+		// 定位到某行
+		function toRow(item: any) {
+			alert.value = true;
+			curr.value = item;
+		}
+
+		// 选择行
+		function onSelect(item: any) {
+			if (item.disabled) {
+				return false;
+			}
+
+			if (props.selectable) {
+				const index = selection.value.findIndex((e) => e[dict.id] == item[dict.id]);
+
+				if (index < 0) {
+					selection.value.push(item);
+				} else {
+					selection.value.splice(index, 1);
+				}
+
+				emit("selection-change", selection.value);
+				emit("update:selection", selection.value);
+			} else {
+				emit("select", item);
+			}
+		}
+
+		// 移动
+		function barMove(e: TouchEvent) {
+			const max = list.value.length;
+
+			let index = parseInt(String((e.touches[0].clientY - bar.top) / bar.itemH));
+
+			if (index >= max) {
+				index = max - 1;
+			}
+
+			if (index < 0) {
+				index = 0;
+			}
+
+			curr.value = list.value[index];
+		}
+
+		// 离开
+		function barEnd() {
+			if (curr.value) {
+				label.value = curr.value.label;
+			}
+
+			alert.value = false;
+		}
+
+		// 整理布局
+		function doLayout() {
+			nextTick(() => {
+				setTimeout(() => {
+					// 获取索引栏大小
+					uni.createSelectorQuery()
+						.in(proxy)
+						.select(".cl-list-index__bar .list")
+						.boundingClientRect((res: any) => {
+							if (res) {
+								bar.top = res.top;
+								bar.itemH = res.height / list.value.length;
+							}
+						})
+						.exec();
+
+					// 获取当前距离顶部的高度
+					uni.createSelectorQuery()
+						.in(proxy)
+						.select(".cl-list-index")
+						.boundingClientRect((res: any) => {
+							// 获取每项距离顶部的高度
+							uni.createSelectorQuery()
+								.in(proxy)
+								.selectAll(".header")
+								.fields(
+									{
+										rect: true,
+										size: true,
+									},
+									() => {},
+								)
+								.exec((d) => {
+									tops.value = d[0].map(
+										(e: { top: number; height: number }) => e.top - res.top,
+									);
+								});
+						})
+						.exec();
+				}, props.delay || 0);
+			});
+		}
+
+		// 是否选中
+		function isChecked(item: any) {
+			return Boolean(selection.value.find((e) => e[dict.id] == item[dict.id]));
+		}
+
+		// 更新行数据
+		function updateRow(id: string | number, value: any) {
+			list.value.forEach((a) => {
+				if (a.children) {
+					const d = a.children.find((e) => e[dict.id] == id);
+
+					if (d) {
+						Object.assign(d, value);
+					}
+				}
+			});
+		}
+
+		// 刷新
+		function refresh() {
+			if (isEmpty(props.data)) {
+				list.value = [];
+				return false;
+			}
+
+			// 是否分组
+			if (!props.isGroup) {
+				list.value = props.data;
+				return false;
+			}
+
+			// 传入列表数据
+			const data = props.data.map((e: any) => {
+				return {
+					f: py.getCamelChars(e[dict.name] || "*")[0],
+					...e,
+				};
+			});
+
+			// 数据分组
+			const group = [];
+			const g = groupBy(data, "f");
+
+			for (const i in g) {
+				group.push({
+					label: i,
+					children: g[i],
+				});
+			}
+
+			list.value = group.sort((a, b) => {
+				const n1 = a.label.toUpperCase();
+				const n2 = b.label.toUpperCase();
+
+				if (n1 < n2) {
+					return -1;
+				}
+
+				if (n1 > n2) {
+					return 1;
+				}
+
+				return 0;
+			});
+
+			// 重做
+			doLayout();
+		}
+
+		// 监听列表数据变化
+		watch(() => props.data, refresh, {
+			immediate: true,
+		});
+
+		// 监听选择数据变化
+		watch(
+			() => props.selection,
+			(val) => {
+				selection.value = [...val];
+
+				// 更新列表数据
+				selection.value.forEach((e) => {
+					updateRow(e[dict.id], e);
+				});
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		return {
+			dict,
+			list,
+			keyWord,
+			label,
+			alert,
+			curr,
+			bar,
+			flist,
+			refresh,
+			doLayout,
+			barEnd,
+			barMove,
+			toRow,
+			onScroll,
+			onSelect,
+			isChecked,
+			updateRow,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-list-item/cl-list-item.vue b/uni_modules/cool-ui/components/cl-list-item/cl-list-item.vue
new file mode 100644
index 0000000..bd5432f
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-list-item/cl-list-item.vue
@@ -0,0 +1,258 @@
+<template>
+	<view
+		class="cl-list-item"
+		:class="[itemClass]"
+		:style="[baseStyle]"
+		@touchstart="onTouchStart"
+		@touchmove="onTouchMove"
+		@touchend="onTouchEnd"
+		@click="tap"
+	>
+		<view
+			class="cl-list-item__swiper"
+			:style="{
+				transform,
+			}"
+		>
+			<view class="cl-list-item__container">
+				<view class="cl-list-item__icon" v-if="$slots.icon">
+					<slot name="icon"></slot>
+				</view>
+
+				<text class="cl-list-item__label" v-if="label && label != 'true'">{{ label }}</text>
+
+				<view class="cl-list-item__content" :class="contentClass">
+					<slot></slot>
+				</view>
+
+				<view class="cl-list-item__append">
+					<slot name="append">
+						<text v-if="arrowIcon" class="cl-icon-arrow-right"></text>
+					</slot>
+				</view>
+			</view>
+
+			<template v-if="swipe">
+				<view :class="[`cl-list-item__menu-${swipe}`]">
+					<slot name="menu"></slot>
+				</view>
+			</template>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, getCurrentInstance, onMounted, reactive, watch } from "vue";
+import { type PropType } from "vue";
+import { isBoolean } from "lodash-es";
+import { useTap, useStyle } from "../../hooks";
+import { getParent } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-list-item",
+
+	props: {
+		// 标签内容
+		label: String,
+		// 类型
+		type: String as PropType<"primary" | "success" | "error" | "warning" | "info">,
+		// 水平排序
+		justify: String as PropType<"start" | "end" | "center">,
+		// 是否滑动
+		swipe: String as PropType<"left" | "right">,
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否带有下边框
+		border: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否显示右侧箭头
+		arrowIcon: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	setup(props, { slots, emit }) {
+		const instance = getCurrentInstance();
+
+		// <cl-list />
+		const parent = getParent("cl-list", ["justify", "border", "disabled"]);
+
+		// 是否禁用
+		const isDisabled = computed(() => {
+			return isBoolean(props.disabled) ? props.disabled : parent.value?.disabled;
+		});
+
+		// 样式
+		const itemClass = computed(() => {
+			return [
+				{
+					"is-disabled": isDisabled.value,
+					"is-append": !!slots.append,
+					"is-swipe": !!props.swipe,
+					"is-border": isBoolean(props.border) ? props.border : parent.value?.border,
+				},
+			];
+		});
+
+		// 内容样式
+		const contentClass = computed(() => {
+			const list: string[] = [];
+
+			if (props.type) {
+				list.push(`is-color-${props.type}`);
+			}
+
+			return [
+				`is-color-${props.type}`,
+				`is-justify-${props.justify || parent.value?.justify || "end"}`,
+			];
+		});
+
+		// 触摸
+		const touch = reactive({
+			start: 0,
+			end: 0,
+			x: 0,
+			maxX: 0,
+			direction: "left",
+			lock: true,
+		});
+
+		// 滑动菜单
+		const menu = reactive({
+			width: 0,
+		});
+
+		// 横向位置移动
+		const transform = computed(() => {
+			return props.swipe ? `translateX(${touch.x}px)` : "none";
+		});
+
+		// 滑动开始
+		function onTouchStart(e: TouchEvent) {
+			if (props.swipe) {
+				touch.start = e.touches[0].pageX;
+				touch.lock = false;
+			}
+		}
+
+		// 滑动中
+		function onTouchMove(e: TouchEvent) {
+			const { start, end, lock, maxX } = touch;
+
+			if (!lock) {
+				// 滑动距离
+				const offsetX = e.touches[0].pageX - start;
+
+				// 移动方向
+				touch.direction = offsetX > 0 ? "right" : "left";
+
+				// 偏移距离
+				let x = end + offsetX;
+
+				if (props.swipe == "left") {
+					if (x > maxX) {
+						x = maxX;
+					}
+
+					if (x < 0) {
+						x = 0;
+					}
+				}
+
+				if (props.swipe == "right") {
+					if (x < maxX) {
+						x = maxX;
+					}
+
+					if (x > 0) {
+						x = 0;
+					}
+				}
+
+				touch.x = x;
+			}
+		}
+
+		// 滑动结束
+		function onTouchEnd() {
+			const { direction, x, end, lock, maxX } = touch;
+			const sw = menu.width / 2 > 50 ? 50 : menu.width / 2;
+
+			if (!lock) {
+				if (Math.abs(x - end) > sw) {
+					if (direction === props.swipe) {
+						touch.x = 0;
+					} else {
+						touch.x = maxX;
+					}
+
+					touch.end = touch.x;
+				} else {
+					touch.x = end === 0 ? 0 : maxX;
+				}
+
+				touch.lock = true;
+			}
+		}
+
+		// 设置菜单宽度
+		function setMenu() {
+			if (props.swipe) {
+				const query = uni.createSelectorQuery().in(instance?.proxy);
+
+				query
+					.select(`.cl-list-item__menu-${props.swipe}`)
+					.boundingClientRect((data) => {
+						if (data) {
+							menu.width = data.width || 0;
+							touch.maxX = menu.width * (props.swipe === "right" ? -1 : 1);
+						}
+					})
+					.exec();
+			}
+		}
+
+		// 滑动后还原位置的方法
+		function restore(cb: () => void) {
+			touch.start = 0;
+			touch.end = 0;
+			touch.lock = true;
+			touch.x = 0;
+
+			if (cb) {
+				setTimeout(() => {
+					cb();
+				}, 300);
+			}
+		}
+
+		// 重新设置滑动菜单
+		watch(() => props.swipe, setMenu);
+
+		onMounted(() => {
+			setMenu();
+		});
+
+		return {
+			itemClass,
+			contentClass,
+			touch,
+			menu,
+			transform,
+			restore,
+			onTouchStart,
+			onTouchMove,
+			onTouchEnd,
+			...useTap(emit),
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-list/cl-list.vue b/uni_modules/cool-ui/components/cl-list/cl-list.vue
new file mode 100644
index 0000000..942700b
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-list/cl-list.vue
@@ -0,0 +1,33 @@
+<template>
+	<view class="cl-list" :style="[baseStyle]">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { type PropType } from "vue";
+import { useStyle } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-list",
+
+	props: {
+		// 水平布局方式
+		justify: String as PropType<"start" | "end" | "center">,
+		// 是否禁用
+		disabled: Boolean,
+		// 是否带有下边框
+		border: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	setup() {
+		return {
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-loading-mask/cl-loading-mask.vue b/uni_modules/cool-ui/components/cl-loading-mask/cl-loading-mask.vue
new file mode 100644
index 0000000..9177e4e
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-loading-mask/cl-loading-mask.vue
@@ -0,0 +1,64 @@
+<template>
+	<view class="cl-loading-mask__wrap">
+		<view
+			class="cl-loading-mask"
+			:class="[
+				{
+					'is-fullscreen': fullscreen,
+					'is-show': loading,
+					'is-border': border,
+				},
+			]"
+			:style="{
+				background: modal && !border ? background : 'transparent',
+				color,
+			}"
+		>
+			<view class="cl-loading-mask__content" v-show="loading">
+				<view class="cl-loading-mask__border">
+					<cl-loading
+						:theme="loadingTheme"
+						:color="border ? '#ffffff' : color"
+						:size="60"
+					/>
+					<text v-if="text" class="cl-loading-mask__text">{{ text }}</text>
+				</view>
+			</view>
+		</view>
+
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "cl-loading-mask",
+
+	props: {
+		// 加载时文本
+		text: String,
+		// 是否加载中
+		loading: Boolean,
+		// 加载图标主题
+		loadingTheme: String,
+		// 是否全屏显示
+		fullscreen: Boolean,
+		// 加载图标颜色
+		color: String,
+		// 是否显示静态库
+		modal: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否带边框
+		border: Boolean,
+		// 背景颜色
+		background: {
+			type: String,
+			default: "rgba(255, 255, 255, 0.7)",
+		},
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-loading/cl-loading.vue b/uni_modules/cool-ui/components/cl-loading/cl-loading.vue
new file mode 100644
index 0000000..f18acbb
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-loading/cl-loading.vue
@@ -0,0 +1,29 @@
+<template>
+	<cl-icon :class-name="`cl-loading cl-icon-loading-${theme}`" :color="color" :size="size" />
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+export default defineComponent({
+	name: "cl-loading",
+
+	props: {
+		// 图标颜色
+		color: {
+			type: String,
+			default: "primary",
+		},
+		// 主题
+		theme: {
+			type: String as PropType<"spin" | "snow" | "dot">,
+			default: "spin",
+		},
+		// 图标大小
+		size: {
+			type: [String, Number],
+			default: 50,
+		},
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-loadmore/cl-loadmore.vue b/uni_modules/cool-ui/components/cl-loadmore/cl-loadmore.vue
new file mode 100644
index 0000000..179ad67
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-loadmore/cl-loadmore.vue
@@ -0,0 +1,79 @@
+<template>
+	<view class="cl-loadmore__wrap">
+		<cl-divider
+			:background-color="backgroundColor"
+			:color="color"
+			:width="divider ? '400rpx' : '0rpx'"
+		>
+			<view class="cl-loadmore">
+				<cl-loading
+					:color="iconColor"
+					:theme="loadingTheme"
+					:size="40"
+					v-if="!finish && loading"
+				/>
+				<text
+					class="cl-loadmore__text"
+					:style="{
+						color,
+					}"
+					v-if="message"
+					>{{ message }}</text
+				>
+			</view>
+		</cl-divider>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+
+export default defineComponent({
+	name: "cl-loadmore",
+
+	props: {
+		// 是否加载中
+		loading: Boolean,
+		// 是否加载完成
+		finish: Boolean,
+		// 是否显示分割符
+		divider: {
+			type: Boolean,
+			default: true,
+		},
+		// 字体颜色
+		color: String,
+		// 图标颜色
+		iconColor: String,
+		// 背景颜色
+		backgroundColor: String,
+		// 普通状态下显示内容
+		text: {
+			type: String,
+			default: "上拉加载更多",
+		},
+		// 加载完成显示内容
+		finishText: {
+			type: String,
+			default: "没有更多了",
+		},
+		// 加载中显示内容
+		loadingText: {
+			type: String,
+			default: "加载中",
+		},
+		// 加载图标主题
+		loadingTheme: String,
+	},
+
+	setup(props) {
+		const message = computed(() => {
+			return props.finish ? props.finishText : props.loading ? props.loadingText : props.text;
+		});
+
+		return {
+			message,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-noticebar/cl-noticebar.vue b/uni_modules/cool-ui/components/cl-noticebar/cl-noticebar.vue
new file mode 100644
index 0000000..5969570
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-noticebar/cl-noticebar.vue
@@ -0,0 +1,220 @@
+<template>
+	<view
+		class="cl-noticebar"
+		:class="[
+			{
+				'is-scrollable': scrollable,
+			},
+		]"
+		:style="{
+			color,
+			backgroundColor,
+		}"
+		v-if="visible"
+	>
+		<cl-icon
+			name="close-border"
+			:size="34"
+			:margin="[0, 10, 0, 0]"
+			@tap="close"
+			v-if="closeable"
+		/>
+
+		<slot name="icon">
+			<cl-icon :class-name="icon" :size="34" :margin="[0, 10, 0, 0]" v-if="icon" />
+		</slot>
+
+		<view class="cl-noticebar__box">
+			<view
+				class="cl-noticebar__scroller"
+				:class="[`is-${direction}`]"
+				:style="{
+					height: parseRpx(height),
+					top: scroll.top + 'px',
+					left: scroll.left + 'px',
+					transition,
+					transform: `translateX(-${scroll.translateX}px)`,
+				}"
+			>
+				<view class="cl-noticebar__item" v-for="(item, index) in list" :key="index">
+					<text class="cl-noticebar__text">{{ item }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import {
+	defineComponent,
+	onMounted,
+	onUnmounted,
+	reactive,
+	ref,
+	computed,
+	getCurrentInstance,
+	type PropType,
+} from "vue";
+import { isArray } from "lodash-es";
+import { parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-noticebar",
+
+	props: {
+		// 文本内容
+		text: {
+			type: [String, Array],
+			default: "",
+			required: true,
+		},
+		// 方向
+		direction: {
+			type: String as PropType<"horizontal" | "vertical">,
+			default: "horizontal",
+		},
+		// 字体颜色
+		color: String,
+		// 背景颜色
+		backgroundColor: String,
+		// 能否滚动
+		scrollable: Boolean,
+		// 滚动时长
+		duration: {
+			type: Number,
+			default: 10,
+		},
+		// 能否关闭
+		closeable: Boolean,
+		// 左侧图标
+		icon: String,
+		// 高度
+		height: {
+			type: [String, Number],
+			default: 40,
+		},
+	},
+
+	emits: ["close"],
+
+	setup(props, { emit }) {
+		const { proxy }: any = getCurrentInstance();
+
+		// 是否可见
+		const visible = ref(true);
+
+		// 滚动配置
+		const scroll = reactive({
+			left: 0,
+			top: 0,
+			translateX: 0,
+			duration: 0,
+		});
+
+		// 计时器
+		let timer: any = null;
+
+		// 文案列表
+		const list = computed(() => {
+			return isArray(props.text) ? props.text : [props.text];
+		});
+
+		// 动画过度
+		const transition = computed(() => {
+			if (props.direction == "horizontal") {
+				return `transform ${scroll.duration}s linear`;
+			} else {
+				return `top 0.3s`;
+			}
+		});
+
+		// 刷新
+		function refresh() {
+			if (props.scrollable) {
+				// 清除定时器
+				clear();
+
+				// 获取盒子大小
+				uni.createSelectorQuery()
+					.in(proxy)
+					.select(`.cl-noticebar__box`)
+					.boundingClientRect((box: any) => {
+						// 获取文本大小
+						uni.createSelectorQuery()
+							.in(proxy)
+							.select(`.cl-noticebar__text`)
+							.boundingClientRect((text: any) => {
+								const duration = props.duration * 1000;
+
+								// 水平滑动
+								if (props.direction == "horizontal") {
+									const fn = () => {
+										scroll.duration = props.duration;
+										scroll.left = box.width;
+										scroll.translateX = text.width + scroll.left;
+
+										timer = setTimeout(() => {
+											scroll.translateX = 0;
+											scroll.duration = 0;
+
+											setTimeout(fn, 500);
+										}, duration);
+									};
+
+									fn();
+								}
+								// 垂直滑动
+								else {
+									timer = setInterval(() => {
+										if (
+											Math.abs(scroll.top) >=
+											box.height * (list.value.length - 1)
+										) {
+											scroll.top = 0;
+										} else {
+											scroll.top -= box.height;
+										}
+									}, duration);
+								}
+							})
+							.exec();
+					})
+					.exec();
+			}
+		}
+
+		// 关闭
+		function close() {
+			clear();
+			visible.value = false;
+			emit("close");
+		}
+
+		// 清空
+		function clear() {
+			clearInterval(timer);
+			clearTimeout(timer);
+			timer = null;
+		}
+
+		onMounted(() => {
+			refresh();
+		});
+
+		onUnmounted(() => {
+			clear();
+		});
+
+		return {
+			visible,
+			scroll,
+			list,
+			transition,
+			refresh,
+			close,
+			clear,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-page/cl-page.vue b/uni_modules/cool-ui/components/cl-page/cl-page.vue
new file mode 100644
index 0000000..32704b2
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-page/cl-page.vue
@@ -0,0 +1,231 @@
+<template>
+	<view
+		class="cl-page"
+		:class="[
+			`theme-${app.theme.name}`,
+			{
+				'is-fullscreen': fullscreen,
+			},
+		]"
+		:style="{
+			padding: parseRpx(padding),
+			height,
+		}"
+	>
+		<!-- 加载框 -->
+		<cl-loading-mask
+			fullscreen
+			:loading="loader.loading"
+			:text="loader.text"
+			:border="loader.border"
+		/>
+
+		<!-- 提示 -->
+		<cl-toast :ref="setRefs('toast')" />
+
+		<!-- 确认框 -->
+		<cl-confirm :ref="setRefs('confirm')" />
+
+		<!-- 状态栏 -->
+		<!-- #ifndef MP-ALIPAY -->
+		<cl-status-bar v-if="statusBar" :background-color="statusBarBackground" />
+		<!-- #endif -->
+
+		<!-- 内容插槽 -->
+		<slot></slot>
+
+		<!-- 底部安全区域 -->
+		<view class="safe-area-bottom" v-if="!fullscreen"></view>
+	</view>
+
+	<!-- 背景色 -->
+	<view
+		class="cl-page__bg"
+		:style="{
+			background,
+		}"
+	></view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, reactive, getCurrentInstance, onMounted } from "vue";
+import { useApp, useCool } from "/@/cool";
+import { parseRpx } from "/@/cool/utils";
+import { isString } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-page",
+
+	props: {
+		// 是否全屏显示，高度100%
+		fullscreen: Boolean,
+		// 內间距
+		padding: {
+			type: [Number, String],
+			default: 0,
+		},
+		// 是否显示状态栏
+		statusBar: {
+			type: Boolean,
+			default: true,
+		},
+		// 状态栏背景色
+		statusBarBackground: String,
+		// 页面背景色
+		backgroundColor: String,
+	},
+
+	setup(props) {
+		const { refs, setRefs, router } = useCool();
+		const app = useApp();
+		const info = router.info();
+		const {
+			statusBarHeight = 0,
+			screenHeight,
+			windowHeight,
+			safeAreaInsets,
+		} = uni.getSystemInfoSync();
+
+		const { proxy }: any = getCurrentInstance();
+
+		// 是否显示导航栏
+		const statusBar = info?.isCustomNavbar ? props.statusBar : false;
+
+		// 背景色
+		const background = computed(() => {
+			return (
+				props.backgroundColor ||
+				router.info()?.style?.backgroundColor ||
+				router.globalStyle.backgroundColor ||
+				"#ffffff"
+			);
+		});
+
+		// 全屏高
+		const height = computed(() => {
+			if (!props.fullscreen) {
+				return "auto";
+			}
+
+			let h = 0;
+
+			// #ifdef H5
+			h = windowHeight;
+			// #endif
+
+			// #ifndef H5
+			h = screenHeight - statusBarHeight;
+
+			if (!info?.isCustomNavbar) {
+				h -= 44;
+			}
+			// #endif
+
+			return h - (safeAreaInsets?.bottom || 0) + "px";
+		});
+
+		// 加载框配置
+		const loader = reactive({
+			loading: false,
+			border: false,
+			text: "加载中",
+		});
+
+		// 显示加载框
+		function showLoading(options?: ClLoading.MaskOptions) {
+			loader.loading = true;
+
+			if (isString(options)) {
+				loader.text = options;
+			} else {
+				Object.assign(loader, options);
+			}
+		}
+
+		// 隐藏加载框
+		function hideLoading() {
+			loader.loading = false;
+		}
+
+		// 提示框
+		function showToast(options: ClToast.Options) {
+			refs.toast?.open(options);
+		}
+
+		// 确认框
+		function showConfirm(options: ClConfirm.Options) {
+			refs.confirm?.open(options);
+		}
+
+		// 提示框
+		function showTips(message: string, callback?: () => void) {
+			refs.confirm?.open({
+				title: "提示",
+				message,
+				showCancelButton: false,
+				callback,
+			} as ClConfirm.Options);
+		}
+
+		// 扩展
+		const page = router.currentPage();
+
+		if (page) {
+			page["cl-page"] = {
+				loaded: false,
+				showLoading,
+				hideLoading,
+				showToast,
+				showConfirm,
+				showTips,
+			};
+
+			onMounted(() => {
+				page["cl-page"].loaded = true;
+			});
+		}
+
+		// 滚动事件
+		proxy.$root.scrollTo = (top: number) => {
+			// 减去自定义导航栏高度
+			top -= info?.isCustomNavbar ? statusBarHeight : 0;
+
+			// 减去间距
+			if (props.padding) {
+				const [t] = parseRpx(props.padding).split(" ");
+				top -= uni.upx2px(parseInt(t));
+			}
+
+			uni.createSelectorQuery()
+				.in(proxy)
+				.select(".cl-page")
+				.boundingClientRect((a) => {
+					uni.createSelectorQuery()
+						.in(proxy)
+						.select(".safe-area-bottom")
+						.boundingClientRect((b) => {
+							const scrollTop = top + (a?.height || 0) - (b?.bottom || 0);
+
+							uni.pageScrollTo({
+								scrollTop,
+								duration: 100,
+							});
+						})
+						.exec();
+				})
+				.exec();
+		};
+
+		return {
+			app,
+			background,
+			height,
+			refs,
+			setRefs,
+			loader,
+			parseRpx,
+			statusBar,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-pay/ali.png b/uni_modules/cool-ui/components/cl-pay/ali.png
new file mode 100644
index 0000000..94baa08
Binary files /dev/null and b/uni_modules/cool-ui/components/cl-pay/ali.png differ
diff --git a/uni_modules/cool-ui/components/cl-pay/cl-pay.vue b/uni_modules/cool-ui/components/cl-pay/cl-pay.vue
new file mode 100644
index 0000000..ff472e1
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-pay/cl-pay.vue
@@ -0,0 +1,86 @@
+<template>
+    <cl-popup v-model="visible" direction="bottom" :padding="0">
+        <view class="cl-pay">
+            <view class="cl-pay__title">选择支付方式</view>
+
+            <!-- 选择方式 -->
+            <view class="cl-pay__container">
+                <template v-for="(item, index) in methods">
+                    <view class="cl-pay__item" :key="index" v-if="!item.hidden" @tap="choose(item)">
+                        <image class="cl-pay__icon" :src="item.icon" mode="aspectFit" />
+                        <text class="cl-pay__label">{{ item.label }}</text>
+                    </view>
+                </template>
+            </view>
+
+            <view class="cl-pay__footer" @tap="close"> 取消支付 </view>
+        </view>
+    </cl-popup>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue"
+import IconWx from "./wx.png"
+import IconAli from "./ali.png"
+
+export default defineComponent({
+    name: "cl-pay",
+
+    setup(_, { emit }) {
+        // 是否可见
+        const visible = ref(false)
+
+        // 回掉
+        let cb: any = null
+
+        // 支付方式
+        const methods = ref<ClPay.Item[]>([
+            {
+                label: "微信支付",
+                value: "wxpay",
+                icon: IconWx
+            },
+            {
+                label: "支付宝支付",
+                value: "alipay",
+                icon: IconAli
+            }
+        ])
+
+        // 打开
+        function open(options?: ClPay.Options) {
+            const { list, callback } = options || {}
+
+            if (list) {
+                methods.value = list
+            }
+
+            cb = callback
+            visible.value = true
+        }
+
+        // 关闭
+        function close() {
+            visible.value = false
+        }
+
+        // 选择
+        function choose(item: ClPay.Item) {
+            close()
+            emit("choose", item)
+
+            if (cb) {
+                cb(item)
+            }
+        }
+
+        return {
+            visible,
+            methods,
+            open,
+            close,
+            choose
+        }
+    }
+})
+</script>
diff --git a/uni_modules/cool-ui/components/cl-pay/wx.png b/uni_modules/cool-ui/components/cl-pay/wx.png
new file mode 100644
index 0000000..99aab12
Binary files /dev/null and b/uni_modules/cool-ui/components/cl-pay/wx.png differ
diff --git a/uni_modules/cool-ui/components/cl-popup/cl-popup.vue b/uni_modules/cool-ui/components/cl-popup/cl-popup.vue
new file mode 100644
index 0000000..432a1d2
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-popup/cl-popup.vue
@@ -0,0 +1,295 @@
+<template>
+	<view
+		v-if="visible"
+		:class="[
+			'cl-popup__wrapper',
+			`cl-popup__wrapper--${direction}`,
+			`is-${status ? 'open' : 'close'}`,
+			{
+				'is-modal': modal,
+			},
+		]"
+		:style="{
+			zIndex,
+		}"
+		@touchmove.stop.prevent
+	>
+		<!-- 遮罩层 -->
+		<view
+			class="cl-popup__modal"
+			:style="{
+				background: modalBackground,
+			}"
+			@tap="modalClose"
+			v-if="modal"
+		></view>
+
+		<!-- 内容 -->
+		<view
+			class="cl-popup"
+			:style="{ height, width, backgroundColor, borderRadius: parseRpx(borderRadius) }"
+		>
+			<view class="cl-popup__header" v-if="title && showHeader">
+				<slot name="header">{{ title }}</slot>
+			</view>
+
+			<view class="cl-popup__container" :style="{ padding: parseRpx(padding), paddingTop }">
+				<slot></slot>
+			</view>
+
+			<view class="cl-popup__close" v-if="status && showCloseBtn" @tap="close">
+				<text class="cl-icon-close"></text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+import { parseRpx } from "/@/cool/utils";
+import { router } from "/@/cool";
+
+const { statusBarHeight = 0 } = uni.getSystemInfoSync();
+
+let id = 1;
+
+export default defineComponent({
+	name: "cl-popup",
+
+	props: {
+		// 是否可见
+		modelValue: Boolean,
+		// 标题
+		title: String,
+		// 是否显示头部
+		showHeader: {
+			type: Boolean,
+			default: true,
+		},
+		// 弹出方向
+		direction: {
+			type: String as PropType<"top" | "right" | "bottom" | "center" | "left">,
+			default: "center",
+		},
+		// 弹出框宽度
+		size: {
+			type: [String, Number],
+			default: "auto",
+		},
+		// 內间距
+		padding: {
+			type: [String, Number],
+			default: 32,
+		},
+		// 弹出框圆角
+		borderRadius: [Number, Array, String],
+		// 显示关闭按钮
+		showCloseBtn: Boolean,
+		// 背景色
+		backgroundColor: {
+			type: String,
+			default: "#fff",
+		},
+		// 是否显示遮罩层
+		modal: {
+			type: Boolean,
+			default: true,
+		},
+		// 遮罩层背景色
+		modalBackground: {
+			type: String,
+			default: "rgba(0, 0, 0, 0.4)",
+		},
+		// 点击遮罩层是否关闭
+		closeOnClickModal: {
+			type: Boolean,
+			default: true,
+		},
+		// 层级
+		zIndex: {
+			type: Number,
+			default: 600,
+		},
+	},
+
+	emits: ["update:modelValue", "open", "opened", "close", "closed"],
+
+	setup(props, { emit }) {
+		// 是否可见
+		const visible = ref(false);
+
+		// 是否已打开
+		const isOpened = ref(false);
+
+		// 是否已关闭
+		const isClosed = ref(true);
+
+		// 动画状态
+		const status = ref(false);
+
+		// 层级
+		const zIndex = ref(0);
+
+		// 计时器
+		let timer: any;
+
+		// 是否聚焦
+		const isFocus = computed(() => {
+			// #ifdef MP
+			return isOpened.value;
+			// #endif
+
+			// #ifndef MP
+			return true;
+			// #endif
+		});
+
+		// 高
+		const height = computed(() => {
+			switch (props.direction) {
+				case "top":
+				case "bottom":
+					return parseRpx(props.size);
+				case "left":
+				case "right":
+					return "100%";
+			}
+		});
+
+		// 宽
+		const width = computed(() => {
+			switch (props.direction) {
+				case "top":
+				case "bottom":
+					return "100%";
+				case "left":
+				case "right":
+				case "center":
+					return parseRpx(props.size);
+			}
+		});
+
+		// 顶部距离
+		const paddingTop = computed(() => {
+			if (["left", "right", "top"].includes(props.direction)) {
+				let h = 0;
+
+				if (router.info()?.isCustomNavbar) {
+					h += statusBarHeight;
+				} else {
+					// #ifdef H5
+					h += 44 + statusBarHeight;
+					// #endif
+				}
+
+				let [t] = parseRpx(props.padding).split(" ");
+
+				if (t == "0rpx") {
+					t = "0px";
+				}
+
+				return `calc(${h}px + ${t})`;
+			} else {
+				return 1;
+			}
+		});
+
+		// 打开
+		function open() {
+			// 层级
+			zIndex.value = props.zIndex + id++;
+
+			if (!visible.value) {
+				// 显示内容
+				visible.value = true;
+
+				// 未打开
+				isClosed.value = false;
+
+				emit("update:modelValue", true);
+				emit("open");
+
+				clearTimeout(timer);
+
+				timer = setTimeout(() => {
+					// 开始动画
+					status.value = true;
+
+					// 等待动画结束
+					timer = setTimeout(() => {
+						// 已打开
+						isOpened.value = true;
+						emit("opened");
+					}, 350);
+				}, 50);
+			}
+		}
+
+		// 关闭
+		function close() {
+			if (status.value) {
+				const done = () => {
+					isOpened.value = false;
+
+					// 关闭动画
+					status.value = false;
+					emit("close");
+
+					clearTimeout(timer);
+
+					timer = setTimeout(() => {
+						// 隐藏内容
+						visible.value = false;
+						emit("update:modelValue", false);
+
+						// 已关闭
+						isClosed.value = true;
+						emit("closed");
+					}, 300);
+				};
+
+				done();
+			}
+		}
+
+		// 遮罩层关闭
+		function modalClose() {
+			if (!props.closeOnClickModal) {
+				return false;
+			}
+
+			close();
+		}
+
+		watch(
+			() => props.modelValue,
+			(val: boolean) => {
+				if (val) {
+					open();
+				} else {
+					close();
+				}
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		return {
+			visible,
+			isOpened,
+			isClosed,
+			isFocus,
+			status,
+			height,
+			width,
+			paddingTop,
+			zIndex,
+			parseRpx,
+			open,
+			close,
+			modalClose,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-progress/cl-progress.vue b/uni_modules/cool-ui/components/cl-progress/cl-progress.vue
new file mode 100644
index 0000000..60dfed3
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-progress/cl-progress.vue
@@ -0,0 +1,101 @@
+<template>
+	<view class="cl-progress">
+		<view class="cl-progress-bar" v-if="type === 'line'">
+			<view
+				class="cl-progress-bar__outer"
+				:style="{ height: parseRpx(strokeWidth), backgroundColor: unColor }"
+			>
+				<view
+					class="cl-progress-bar__inner"
+					:style="{
+						backgroundColor,
+						width,
+					}"
+				></view>
+			</view>
+		</view>
+
+		<slot name="text">
+			<view class="cl-progress__text" v-if="showText">
+				<template v-if="!status">{{ value }}%</template>
+				<text class="cl-progress__icon" v-else :class="icon"></text>
+			</view>
+		</slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+import { parseRpx } from "/@/cool/utils";
+import { getCurrentColor } from "../../utils";
+
+export default defineComponent({
+	name: "cl-progress",
+
+	props: {
+		// 绑定值
+		value: {
+			type: Number,
+			default: 0,
+			required: true,
+		},
+		// 类型
+		type: {
+			type: String,
+			default: "line",
+		},
+		// 线条宽度
+		strokeWidth: {
+			type: Number,
+			default: 12,
+		},
+		// 是否显示文本
+		showText: {
+			type: Boolean,
+			default: true,
+		},
+		// 线条颜色, 支持多色
+		color: {
+			type: [String, Array] as PropType<string | string[]>,
+			default: "",
+		},
+		// 未选中颜色
+		unColor: {
+			type: String,
+			default: "#ebeef5",
+		},
+		// 状态
+		status: Boolean,
+		// 尾部图标
+		icon: String,
+	},
+
+	setup(props) {
+		// 宽度
+		const width = computed(() => {
+			if (props.value > 100) {
+				return "100%";
+			} else if (props.value < 0) {
+				return 0;
+			} else {
+				return `${props.value}%`;
+			}
+		});
+
+		// 背景颜色
+		const backgroundColor = computed(() => {
+			return getCurrentColor({
+				value: props.value,
+				color: props.color,
+				max: 100,
+			});
+		});
+
+		return {
+			parseRpx,
+			width,
+			backgroundColor,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-radio-group/cl-radio-group.vue b/uni_modules/cool-ui/components/cl-radio-group/cl-radio-group.vue
new file mode 100644
index 0000000..71d8ee6
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-radio-group/cl-radio-group.vue
@@ -0,0 +1,48 @@
+<template>
+	<view
+		class="cl-radio-group"
+		:class="{
+			'is-fill': fill,
+		}"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "cl-radio-group",
+
+	props: {
+		// 绑定值
+		modelValue: null,
+		// 是否禁用
+		disabled: Boolean,
+		// 是否边框样式
+		border: Boolean,
+		// 是否宽度填充
+		fill: Boolean,
+		// 是否只显示文字
+		text: Boolean,
+		// 是否圆角
+		round: Boolean,
+		// 图标大小
+		size: [String, Number],
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(_, { emit }) {
+		function change(label: any) {
+			emit("update:modelValue", label);
+			emit("change", label);
+		}
+
+		return {
+			change,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-radio/cl-radio.vue b/uni_modules/cool-ui/components/cl-radio/cl-radio.vue
new file mode 100644
index 0000000..626a54b
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-radio/cl-radio.vue
@@ -0,0 +1,149 @@
+<template>
+	<view class="cl-radio" :class="[classList]" :style="[baseStyle]" @tap.stop="change">
+		<slot name="icon" :checked="checked">
+			<view
+				class="cl-radio__input"
+				:style="{
+					height: size,
+					width: size,
+				}"
+			>
+				<text v-if="checked"></text>
+			</view>
+		</slot>
+
+		<view class="cl-radio__label">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+import { useForm, useStyle } from "../../hooks";
+import { isBoolean } from "lodash-es";
+import { getParent, parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-radio",
+
+	props: {
+		// 绑定值
+		modelValue: [String, Number],
+		// 标识
+		label: [String, Number, Boolean],
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否边框样式
+		border: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否宽度填充
+		fill: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否只显示文字
+		text: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否圆角
+		round: {
+			type: Boolean,
+			default: null,
+		},
+		// 图标大小
+		size: [String, Number],
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		const { disabled } = useForm();
+
+		// cl-radio-group
+		const parent = getParent("cl-radio-group", [
+			"modelValue",
+			"disabled",
+			"border",
+			"fill",
+			"size",
+			"text",
+			"round",
+			"change",
+		]);
+
+		// 是否选中
+		const checked = ref(false);
+
+		// 监听绑定值变化
+		watch(
+			() => (parent.value ? parent.value.modelValue : props.modelValue),
+			(val: any) => {
+				checked.value = val === props.label;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 是否禁用
+		const isDisabled = computed(() => {
+			return (
+				disabled.value ||
+				(isBoolean(props.disabled) ? props.disabled : parent.value?.disabled)
+			);
+		});
+
+		// 大小
+		const size = computed(() => {
+			return parseRpx(props.size || parent.value?.size);
+		});
+
+		// 样式
+		const classList = computed(() => {
+			const d = {
+				"is-disabled": isDisabled.value,
+				"is-checked": checked.value,
+			};
+
+			["border", "fill", "text", "round"].forEach((k) => {
+				// @ts-ignore
+				d[`is-${k}`] = isBoolean(props[k]) ? props[k] : parent.value?.[k];
+			});
+
+			return d;
+		});
+
+		// 值改变
+		function change() {
+			if (isDisabled.value) {
+				return false;
+			}
+
+			checked.value = true;
+
+			// 更新 <cl-checkbox-group />
+			if (parent.value) {
+				parent.value.change(props.label);
+			} else {
+				emit("update:modelValue", props.label);
+				emit("change", props.label);
+			}
+		}
+
+		return {
+			size,
+			checked,
+			classList,
+			change,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-rate/cl-rate.vue b/uni_modules/cool-ui/components/cl-rate/cl-rate.vue
new file mode 100644
index 0000000..07db621
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-rate/cl-rate.vue
@@ -0,0 +1,138 @@
+<template>
+	<view class="cl-rate">
+		<view class="cl-rate__icon" v-for="(item, index) in list" :key="index" @tap="onTap(index)">
+			<cl-icon :class-name="icon" :size="size" :color="voidColor"></cl-icon>
+
+			<view
+				class="cl-rate__icon-active"
+				:style="{
+					width: item.width,
+				}"
+			>
+				<cl-icon :class-name="icon" :size="size" :color="item.color"></cl-icon>
+			</view>
+		</view>
+
+		<view class="cl-rate__text" v-if="showText">
+			{{ text }}
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+import { useForm } from "../../hooks";
+import { getCurrentColor } from "../../utils";
+import { isEmpty } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-rate",
+
+	props: {
+		// 绑定值
+		modelValue: {
+			type: Number,
+			default: 0,
+		},
+		// 评分图标
+		icon: {
+			type: String,
+			default: "cl-icon-favor-fill",
+		},
+		// 选中颜色，Array下为多色
+		color: {
+			type: [String, Array] as PropType<string | string[]>,
+			default: "",
+		},
+		// 空的颜色
+		voidColor: {
+			type: String,
+			default: "#C6D1DE",
+		},
+		// 图标大小
+		size: {
+			type: [Number, String],
+			default: 40,
+		},
+		// 最大值
+		max: {
+			type: Number,
+			default: 5,
+		},
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 显示文本
+		showText: {
+			type: Boolean,
+			default: null,
+		},
+		// 文本组
+		texts: {
+			type: Array,
+			default: () => [],
+		},
+	},
+
+	setup(props, { emit }) {
+		const { disabled } = useForm();
+
+		// 绑定值
+		const value = ref(0);
+
+		watch(
+			() => props.modelValue,
+			(val) => {
+				value.value = Number(val);
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 文本内容
+		const text = computed(() => {
+			return isEmpty(props.texts) ? value.value : props.texts[Math.ceil(value.value) - 1];
+		});
+
+		// 列表
+		const list = computed(() => {
+			return new Array(props.max).fill(1).map((_, i) => {
+				const int: number = parseInt(String(value.value));
+				const dec: number = value.value - int;
+
+				// 处理宽度和颜色
+				return {
+					width: (value.value > i ? (int > i ? 100 : dec * 100) : 0) + "%",
+					color: getCurrentColor({
+						value: value.value,
+						color: props.color,
+						max: props.max,
+					}),
+				};
+			});
+		});
+
+		// 点击
+		function onTap(index: number) {
+			if (disabled.value || props.disabled) {
+				return false;
+			}
+
+			value.value = index + 1;
+
+			emit("update:modelValue", value.value);
+			emit("change", value.value);
+		}
+
+		return {
+			value,
+			list,
+			text,
+			onTap,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-row/cl-row.vue b/uni_modules/cool-ui/components/cl-row/cl-row.vue
new file mode 100644
index 0000000..2cfe563
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-row/cl-row.vue
@@ -0,0 +1,79 @@
+<template>
+	<view
+		class="cl-row"
+		:class="[
+			`cl-row--${type}`,
+			`is-justify-${justify}`,
+			`is-align-${align}`,
+			{
+				'is-wrap': wrap,
+			},
+		]"
+		:style="[
+			baseStyle,
+			{
+				height: parseRpx(height),
+				width: parseRpx(width),
+				margin,
+				border,
+			},
+		]"
+		@click="tap"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+import { useStyle, useTap } from "../../hooks";
+import { parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-row",
+
+	props: {
+		// 类型
+		type: String,
+		// 是否换行
+		wrap: Boolean,
+		// 带边框
+		border: String,
+		// 列间距
+		gutter: {
+			type: Number,
+			default: 0,
+		},
+		// 高度
+		height: [String, Number],
+		// 宽度
+		width: [String, Number],
+		// 外间距
+		margin: [String, Number, Array],
+		// 水平对齐
+		justify: {
+			type: String as PropType<"start" | "center" | "end" | "space-between" | "space-around">,
+			default: "start",
+		},
+		// 垂直对齐
+		align: {
+			type: String as PropType<"top" | "center" | "bottom">,
+			default: "center",
+		},
+	},
+
+	setup(props, { emit }) {
+		const { tap } = useTap(emit);
+
+		const margin = computed(() => {
+			return props.margin ? parseRpx(props.margin) : `0 -${props.gutter / 2}rpx`;
+		});
+
+		return {
+			margin,
+			tap,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-scroller/cl-scroller.vue b/uni_modules/cool-ui/components/cl-scroller/cl-scroller.vue
new file mode 100644
index 0000000..a320b2c
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-scroller/cl-scroller.vue
@@ -0,0 +1,261 @@
+<template>
+	<view class="cl-scroller__wrap">
+		<view
+			class="cl-scroller__loading"
+			:style="{
+				transform,
+				transition,
+			}"
+		>
+			<slot name="loading" :text="text" :status="status" :move="touch.move">
+				<cl-loading :size="40" v-if="status == 'loading'"></cl-loading>
+				<cl-text :size="26" :margin="[0, 0, 0, 14]" :value="text"></cl-text>
+			</slot>
+		</view>
+
+		<view
+			class="cl-scroller"
+			:style="{
+				transform,
+				transition,
+			}"
+			@touchmove="onTouchMove"
+			@touchstart="onTouchStart"
+			@touchend="onTouchEnd"
+		>
+			<scroll-view
+				class="cl-scroller__view"
+				scroll-y
+				:lower-top="bottom"
+				:scroll-top="scrollTop2"
+				:scroll-into-view="scrollIntoView"
+				:scroll-with-animation="scrollWithAnimation"
+				:enable-back-to-top="enableBackToTop"
+				:show-scrollbar="showScrollbar"
+				:enable-flex="enableFlex"
+				@scroll="onScroll"
+				@scrolltolower="up"
+			>
+				<slot></slot>
+			</scroll-view>
+		</view>
+
+		<!-- 回到顶部 -->
+		<view
+			class="cl-scroller__back-top"
+			:class="[
+				{
+					fadeIn: backTopButtonFadeIn,
+				},
+			]"
+			@tap="backTop"
+			v-if="showBackTopButton"
+		>
+			<cl-icon name="top" color="#666"></cl-icon>
+			<text class="cl-scroller__back-top-text">顶部</text>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, getCurrentInstance, reactive, ref, watch } from "vue";
+
+export default defineComponent({
+	props: {
+		// 距离顶部多少px触发
+		top: {
+			type: Number,
+			default: 80,
+		},
+		// 距离底部多少px触发
+		bottom: {
+			type: Number,
+			default: 100,
+		},
+		// 正在刷新文案
+		loadingText: {
+			type: String,
+			default: "正在刷新",
+		},
+		// 下拉刷新文案
+		pullingText: {
+			type: String,
+			default: "下拉刷新",
+		},
+		// 释放刷新文案
+		releaseText: {
+			type: String,
+			default: "释放刷新",
+		},
+		// 滚动条距离顶部位置
+		scrollTop: Number,
+		// 滚动到对应元素id
+		scrollIntoView: String,
+		// 滚动是否动画
+		scrollWithAnimation: {
+			type: Boolean,
+			default: true,
+		},
+		// 点击回顶部
+		enableBackToTop: Boolean,
+		// 是否显示返回顶部按钮
+		showBackTopButton: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否显示滚动条
+		showScrollbar: Boolean,
+		// 开启 flex 布局
+		enableFlex: Boolean,
+		// 开启刷新
+		refresherEnabled: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	emits: ["down", "up", "scroll"],
+
+	setup(props, { emit }) {
+		const { proxy }: any = getCurrentInstance();
+
+		// 按下
+		const touch = reactive({
+			start: 0,
+			move: 0,
+		});
+
+		// 滚动距离
+		const scrollTop2 = ref(0);
+
+		watch(
+			() => props.scrollTop,
+			(val) => {
+				scrollTop2.value = val || 0;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 回到顶部
+		const backTopButtonFadeIn = ref(false);
+
+		// 状态
+		const status = ref("end");
+
+		// 过渡效果
+		const transform = computed(() => {
+			return touch.move ? `translate3d(0, ${touch.move}px, 0)` : "";
+		});
+
+		// 动画
+		const transition = computed(() => {
+			return ["end", "loading"].includes(status.value) ? "transform 0.3s" : "";
+		});
+
+		// 是否可释放
+		const isReleasable = computed(() => touch.move >= props.top);
+
+		//文案
+		const text = computed(() => {
+			switch (status.value) {
+				case "pulling":
+					return isReleasable.value ? props.releaseText : props.pullingText;
+				case "loading":
+					return props.loadingText;
+				default:
+					return props.pullingText;
+			}
+		});
+
+		// 滚动开始
+		function onTouchStart(e: TouchEvent) {
+			if (status.value == "end" && props.refresherEnabled) {
+				touch.start = e.changedTouches[0].clientY;
+				status.value = "pulling";
+			}
+		}
+
+		// 滚动中
+		function onTouchMove(e: TouchEvent) {
+			if (status.value == "pulling" && scrollTop2.value <= 10) {
+				let offset = e.changedTouches[0].clientY - touch.start;
+
+				if (offset <= 200) {
+					touch.move = offset;
+				}
+			}
+		}
+
+		// 滚动结束
+		function onTouchEnd() {
+			if (isReleasable.value) {
+				down();
+			} else {
+				end();
+			}
+		}
+
+		// 滚动监听
+		function onScroll(e: any) {
+			backTopButtonFadeIn.value = e.detail.scrollTop >= 200;
+			emit("scroll", e);
+		}
+
+		// 下拉刷新
+		function down() {
+			uni.createSelectorQuery()
+				.in(proxy)
+				.select(".cl-scroller__loading")
+				.fields({ size: true }, (d: any) => {
+					status.value = "loading";
+					touch.move = d.height || 0;
+					emit("down");
+				})
+				.exec();
+		}
+
+		// 上拉加载
+		function up() {
+			emit("up");
+		}
+
+		// 收起，结束
+		function end() {
+			status.value = "end";
+			touch.move = 0;
+		}
+
+		// 滚动到
+		function scrollTo(top: number) {
+			scrollTop2.value = top;
+		}
+
+		// 回到顶部
+		function backTop() {
+			scrollTop2.value = Math.random();
+		}
+
+		return {
+			touch,
+			scrollTop2,
+			backTopButtonFadeIn,
+			status,
+			transform,
+			transition,
+			isReleasable,
+			text,
+			onScroll,
+			onTouchStart,
+			onTouchMove,
+			onTouchEnd,
+			down,
+			up,
+			end,
+			scrollTo,
+			backTop,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-search/cl-search.vue b/uni_modules/cool-ui/components/cl-search/cl-search.vue
new file mode 100644
index 0000000..c58f040
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-search/cl-search.vue
@@ -0,0 +1,207 @@
+<template>
+	<view
+		class="cl-search"
+		:style="{
+			padding: parseRpx(padding),
+		}"
+	>
+		<view class="cl-search__prepend" v-if="$slots.prepend">
+			<slot name="prepend"></slot>
+		</view>
+
+		<view
+			class="cl-search__input"
+			:style="{
+				height: parseRpx(height),
+			}"
+		>
+			<view class="cl-search__inner">
+				<cl-input
+					v-model="value"
+					:height="height"
+					:type="type"
+					:placeholder="placeholder"
+					:disabled="disabled"
+					:clearable="clearable"
+					:focus="isFocus"
+					:placeholder-style="placeholderStyle"
+					:placeholder-class="placeholderClass"
+					:maxlength="maxlength"
+					:cursor-spacing="cursorSpacing"
+					:confirm-type="confirmType"
+					:confirm-hold="confirmHold"
+					:adjust-position="adjustPosition"
+					:holdKeyboard="holdKeyboard"
+					round
+					@change="onChange"
+					@focus="onFocus"
+					@blur="onBlur"
+					@confirm="onConfirm"
+					@clear="onClear"
+					@keyboardheightchange="onKeyboardheightchange"
+				>
+					<template #prepend>
+						<text class="cl-icon-search"></text>
+					</template>
+				</cl-input>
+			</view>
+
+			<view class="cl-search__btn">
+				<cl-button
+					type="primary"
+					round
+					:border="false"
+					@tap="search"
+					v-if="showSearchButton"
+				>
+					{{ searchButtonText }}
+				</cl-button>
+			</view>
+		</view>
+		<view class="cl-search__append" v-if="$slots.append">
+			<slot name="append"></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch, type PropType } from "vue";
+import { parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-search",
+
+	props: {
+		modelValue: {
+			type: String,
+			default: "",
+		},
+		type: {
+			type: String as PropType<
+				"text" | "number" | "idcard" | "digit" | "tel" | "safe-password" | "nickname"
+			>,
+			default: "text",
+		},
+		padding: {
+			type: [String, Number],
+			default: "15rpx 20rpx",
+		},
+		height: Number,
+		password: Boolean,
+		placeholder: String,
+		placeholderStyle: String,
+		placeholderClass: String,
+		disabled: Boolean,
+		focus: Boolean,
+		clearable: {
+			type: Boolean,
+			default: true,
+		},
+		maxlength: {
+			type: Number,
+			default: 140,
+		},
+		cursorSpacing: {
+			type: Number,
+			default: 0,
+		},
+		confirmType: {
+			type: String,
+			default: "done",
+		},
+		confirmHold: Boolean,
+		adjustPosition: {
+			type: Boolean,
+			default: true,
+		},
+		holdKeyboard: {
+			type: Boolean,
+			default: false,
+		},
+		searchIcon: {
+			type: String,
+			default: "cl-icon-search",
+		},
+		showSearchButton: {
+			type: Boolean,
+			default: true,
+		},
+		searchButtonText: {
+			type: String,
+			default: "搜索",
+		},
+	},
+
+	emits: ["update:modelValue", "focus", "blur", "confirm", "keyboardheightchange", "search"],
+
+	setup(props, { emit }) {
+		// 绑定值
+		const value = ref("");
+
+		watch(
+			() => props.modelValue,
+			(val: string) => {
+				value.value = val;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 是否聚焦
+		const isFocus = ref(false);
+
+		watch(
+			() => props.focus,
+			(val) => {
+				isFocus.value = val;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		function onChange(e: any) {
+			emit("update:modelValue", e);
+		}
+
+		function onFocus(e: any) {
+			emit("focus", e);
+		}
+
+		function onBlur(e: any) {
+			emit("blur", e);
+		}
+
+		function onConfirm(e: any) {
+			emit("confirm", e);
+			search();
+		}
+
+		function onClear() {
+			search();
+		}
+
+		function onKeyboardheightchange(e: any) {
+			emit("keyboardheightchange", e);
+		}
+
+		function search() {
+			emit("search", value.value);
+		}
+
+		return {
+			value,
+			isFocus,
+			onChange,
+			onFocus,
+			onBlur,
+			onConfirm,
+			onClear,
+			onKeyboardheightchange,
+			search,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-select-city/cl-select-city.vue b/uni_modules/cool-ui/components/cl-select-city/cl-select-city.vue
new file mode 100644
index 0000000..77a191f
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-select-city/cl-select-city.vue
@@ -0,0 +1,305 @@
+<template>
+	<view class="cl-select-city" @tap="open">
+		<slot :value="modelValue" :label="text" :selection="selection">
+			<cl-select-inner
+				:height="height"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				:border="border"
+				:round="round"
+				:backgroundColor="backgroundColor"
+				:borderRadius="borderRadius"
+				:padding="padding"
+				:text="text"
+			/>
+		</slot>
+	</view>
+
+	<!-- 弹出框 -->
+	<cl-select-popup
+		:ref="setRefs('popup')"
+		:title="title"
+		:show-picker="false"
+		:show-footer="false"
+		scroller-height="70vh"
+	>
+		<template #list>
+			<view class="cl-select-city__wrap">
+				<view class="cl-select-city__tabs">
+					<cl-tag
+						v-for="(item, index) in tabs"
+						:key="index"
+						round
+						:type="active == index ? 'primary' : 'info'"
+						:margin="[0, 20, 20, 0]"
+						@tap="toActive(index)"
+					>
+						{{ item?.[labelKey] || "请选择" }}
+					</cl-tag>
+				</view>
+
+				<view class="cl-select-city__list">
+					<swiper :current="active" @change="onActiveChange">
+						<swiper-item v-for="(item, index) in list" :key="cache.list[index]">
+							<cl-list-index
+								:data="item"
+								:search-bar="false"
+								:dict="{ id: valueKey }"
+								:delay="500"
+							>
+								<template #item="{ item }">
+									<view
+										class="cl-select-city__item"
+										:class="{
+											'is-active': item[valueKey] == value[index],
+										}"
+										@tap="select(item, index)"
+									>
+										<text class="cl-icon-toast-success" />
+										<text>{{ item[labelKey] }}</text>
+									</view>
+								</template>
+							</cl-list-index>
+						</swiper-item>
+					</swiper>
+				</view>
+			</view>
+		</template>
+
+		<template #confirm></template>
+	</cl-select-popup>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, nextTick, reactive, ref, watch, type PropType } from "vue";
+import { useRefs } from "/@/cool";
+import { cloneDeep, isEmpty } from "lodash-es";
+import { Props } from "../cl-select-inner/config";
+import { uuid } from "/@/cool/utils";
+
+import CityPca from "../../data/city-pca.json";
+// 省市区其他数据来源 https://github.com/modood/Administrative-divisions-of-China
+
+interface Item {
+	name: string;
+	code: String;
+	children?: Item[];
+	[key: string]: any;
+}
+
+export default defineComponent({
+	name: "cl-select-city",
+
+	props: {
+		...Props,
+
+		data: {
+			type: Array as PropType<Item[]>,
+			default: CityPca,
+		},
+
+		// 绑定值
+		modelValue: Array as PropType<any[]>,
+		// 标题
+		title: {
+			type: String,
+			default: "请选择所在地区",
+		},
+		// 显示关键字
+		labelKey: {
+			type: String,
+			default: "name",
+		},
+		// 值关键字
+		valueKey: {
+			type: String,
+			default: "name",
+		},
+		// 占位文本
+		placeholder: {
+			type: String,
+			default: "请选择所在地区",
+		},
+		// 分隔符
+		separator: {
+			type: String,
+			default: " - ",
+		},
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		const { refs, setRefs } = useRefs();
+
+		// picker 绑定值
+		const value = ref<any[]>([]);
+
+		// 第几个块
+		const active = ref(0);
+
+		// 各个列表
+		const list = computed<Item[][]>(() => {
+			let arr = props.data;
+
+			const ots = value.value.map((a) => {
+				const d = arr.find((b) => b[props.valueKey] == a);
+
+				if (d) {
+					arr = d.children || [];
+					return arr;
+				} else {
+					return [];
+				}
+			});
+
+			return [props.data, ...ots].filter((e) => !isEmpty(e));
+		});
+
+		// 选项卡
+		const tabs = computed(() => {
+			return value.value.map((a, i) => {
+				return list.value[i].find((b) => b[props.valueKey] == a)!;
+			});
+		});
+
+		// 已选
+		const selection = ref<Item[]>([]);
+
+		// 显示文本
+		const text = computed(() => {
+			return selection.value.map((e) => e?.[props.labelKey]).join(props.separator);
+		});
+
+		// 设置值
+		function setData(val?: any[]) {
+			value.value = cloneDeep(val || props.modelValue || []);
+
+			// 默认值
+			if (isEmpty(value.value) || value.value.find((e) => !e)) {
+				value.value = [""];
+				active.value = 0;
+			}
+
+			// 设置已选
+			selection.value = tabs.value.filter(Boolean).map((e) => {
+				return {
+					...e,
+					children: undefined,
+				};
+			});
+		}
+
+		// 缓存，重新渲染 list-index
+		const cache = reactive({
+			list: [] as string[],
+
+			create() {
+				cache.list = value.value.map(uuid);
+			},
+
+			update() {
+				value.value.forEach((e, i) => {
+					if (!e) {
+						cache.list.splice(i, 99);
+						cache.list[i] = uuid();
+					}
+				});
+			},
+		});
+
+		// 打开
+		function open() {
+			// 打开弹窗
+			refs.popup.open();
+
+			// 设置值
+			setData();
+
+			// 创建缓存
+			cache.create();
+		}
+
+		// 关闭
+		function close() {
+			refs.popup.close();
+		}
+
+		// 保存
+		function confirm() {
+			emit("update:modelValue", value.value);
+			emit("change", value.value);
+			close();
+		}
+
+		// 选择
+		function select(item: Item, index: number) {
+			// 编辑值，清空后几个
+			if (value.value[index]) {
+				value.value.splice(index, 99);
+			}
+
+			// 设置值
+			value.value[index] = item[props.valueKey];
+
+			// 当前选择块
+			const d = list.value[index].find((e) => e[props.valueKey] == value.value[index]);
+
+			if (isEmpty(d?.children)) {
+				// 最后一个直接完成
+				confirm();
+			} else {
+				// 添加一块
+				value.value.push("");
+
+				// 更新缓存
+				cache.update();
+
+				// swiper 滚动
+				nextTick(() => {
+					active.value += 1;
+				});
+			}
+		}
+
+		// 监听块滚动
+		function onActiveChange(e: { detail: { current: number } }) {
+			// 设置序号
+			active.value = e.detail.current;
+		}
+
+		// 滚动到指定块
+		function toActive(index?: number) {
+			if (index !== undefined) {
+				active.value = index;
+			} else {
+				active.value = value.value.length;
+			}
+		}
+
+		// 监听值
+		watch(() => props.modelValue, setData, {
+			immediate: true,
+			deep: true,
+		});
+
+		return {
+			refs,
+			setRefs,
+			list,
+			value,
+			cache,
+			text,
+			tabs,
+			selection,
+			confirm,
+			open,
+			close,
+			select,
+			onActiveChange,
+			active,
+			toActive,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-select-date/cl-select-date.vue b/uni_modules/cool-ui/components/cl-select-date/cl-select-date.vue
new file mode 100644
index 0000000..5603176
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-select-date/cl-select-date.vue
@@ -0,0 +1,280 @@
+<template>
+	<view class="cl-select-date" @tap="open">
+		<slot :value="modelValue" :label="modelValue">
+			<cl-select-inner
+				:height="height"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				:border="border"
+				:round="round"
+				:backgroundColor="backgroundColor"
+				:borderRadius="borderRadius"
+				arrowIcon="cl-icon-time"
+				:padding="padding"
+				:text="text"
+			/>
+		</slot>
+	</view>
+
+	<!-- 弹出框 -->
+	<cl-select-popup :ref="setRefs('popup')" :title="title" :show-picker="false">
+		<template #list>
+			<view class="cl-select-date__wrap">
+				<picker-view :value="value" class="cl-select-date__picker" @change="onChange">
+					<picker-view-column v-for="(c, ci) in columns" :key="ci">
+						<view
+							class="cl-select-date__picker-item"
+							v-for="(item, index) in c.list"
+							:key="index"
+						>
+							{{ item }}{{ c.unit }}
+						</view>
+					</picker-view-column>
+				</picker-view>
+			</view>
+		</template>
+
+		<template #confirm>
+			<cl-button type="primary" size="large" round fill @tap="confirm">选择</cl-button>
+		</template>
+	</cl-select-popup>
+</template>
+
+<script lang="ts">
+import { range } from "lodash-es";
+import dayjs from "dayjs";
+import { type PropType, computed, defineComponent, ref, nextTick } from "vue";
+import { useRefs } from "/@/cool";
+import { Props } from "../cl-select-inner/config";
+
+export default defineComponent({
+	name: "cl-select-date",
+
+	props: {
+		...Props,
+		// 绑定值
+		modelValue: String,
+		// 标题
+		title: {
+			type: String,
+			default: "选择日期",
+		},
+		// 开始年
+		startYear: {
+			type: Number,
+			default: 2000,
+		},
+		// 模式
+		mode: {
+			type: Array as PropType<("year" | "month" | "date" | "hour" | "minute" | "second")[]>,
+			default: ["year", "month", "date", "hour", "minute", "second"],
+		},
+		// 格式化值
+		format: {
+			type: String,
+			default: "YYYY-MM-DD HH:mm:ss",
+		},
+		// 格式化显示内容
+		displayFormat: Function,
+		// 开始时间
+		start: String,
+		// 结束时间
+		end: String,
+		// 占位文本
+		placeholder: {
+			type: String,
+			default: "请选择时间",
+		},
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		const { refs, setRefs } = useRefs();
+
+		// 选中日期
+		const date = ref();
+
+		// picker 绑定值
+		const value = ref<number[]>([]);
+
+		// 显示文本
+		const text = computed(() => {
+			return props.displayFormat ? props.displayFormat(props.modelValue) : props.modelValue;
+		});
+
+		// 列数据
+		const columns = computed(() => {
+			const years = range(props.startYear, props.startYear + 50);
+			const months = range(1, 13);
+
+			// 当前月多少天
+			const ed = getDate(date.value).endOf("month").date();
+			const days = range(1, ed + 1);
+
+			const hours = range(24);
+			const minutes = range(60);
+			const seconds = range(60);
+
+			// 格式化
+			const d = {
+				year: {
+					list: years,
+					unit: "年",
+				},
+				month: {
+					list: months,
+					unit: "月",
+				},
+				date: {
+					list: days,
+					unit: "日",
+				},
+				hour: {
+					list: hours,
+					unit: "时",
+				},
+				minute: {
+					list: minutes,
+					unit: "分",
+				},
+				second: {
+					list: seconds,
+					unit: "秒",
+				},
+			};
+
+			return props.mode.map((k) => d[k]);
+		});
+
+		// 获取时间
+		function getDate(val: string) {
+			let a = dayjs();
+
+			if (val) {
+				let b = val.split(/\D+/g);
+
+				props.mode.forEach((k, i) => {
+					let v = Number(b[i]);
+
+					if (k == "month") {
+						v -= 1;
+					}
+
+					a = a.set(k, v);
+				});
+			}
+
+			return a;
+		}
+
+		// 设置值
+		function setDate(val?: string, isChange = true) {
+			date.value = val || undefined;
+
+			// 日期
+			const d = getDate(date.value);
+
+			// 取下标
+			const arr = props.mode.map((k, i) => {
+				let v = d[k]?.();
+
+				if (k == "month") {
+					v += 1;
+				}
+
+				return columns.value[i].list.findIndex((e) => e == v);
+			});
+
+			// 清空，避免 value 重复不刷新
+			value.value = props.mode.map(() => 0);
+
+			nextTick(() => {
+				value.value = arr;
+
+				// 触发监听
+				if (isChange) {
+					onChange({ detail: { value: arr } });
+				}
+			});
+		}
+
+		// 监听选择
+		function onChange(e: { detail: { value: number[] } }) {
+			value.value = e.detail.value;
+
+			let d = dayjs();
+
+			// 设置值
+			props.mode.forEach((k, i) => {
+				let v = value.value[i];
+
+				if (k == "year") {
+					v += props.startYear;
+				}
+
+				if (k == "date") {
+					v += 1;
+
+					const ed = d.endOf("month").date();
+
+					if (v > ed) {
+						v = ed;
+					}
+				}
+
+				d = d.set(k, v);
+			});
+
+			date.value = d.format(props.format);
+
+			// 小于开始时间
+			if (props.start) {
+				if (d.isBefore(dayjs(getDate(props.start)))) {
+					setDate(props.start, false);
+				}
+			}
+
+			// 大于结束时间
+			if (props.end) {
+				if (d.isAfter(dayjs(getDate(props.end)))) {
+					setDate(props.end, false);
+				}
+			}
+		}
+
+		// 保存
+		function confirm() {
+			emit("update:modelValue", date.value);
+			emit("change", date.value);
+			close();
+		}
+
+		// 打开
+		function open() {
+			setDate(props.modelValue);
+			refs.popup.open();
+		}
+
+		// 关闭
+		function close() {
+			refs.popup.close();
+		}
+
+		return {
+			date,
+			columns,
+			value,
+			text,
+			getDate,
+			setDate,
+			confirm,
+			onChange,
+			refs,
+			setRefs,
+			open,
+			close,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-select-inner/cl-select-inner.vue b/uni_modules/cool-ui/components/cl-select-inner/cl-select-inner.vue
new file mode 100644
index 0000000..672f72c
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-select-inner/cl-select-inner.vue
@@ -0,0 +1,53 @@
+<template>
+	<view
+		class="cl-select-inner"
+		:class="[
+			{
+				'is-disabled': isDisabled,
+				'is-round': round,
+				'is-border': border,
+			},
+		]"
+		:style="[baseStyle]"
+	>
+		<slot>
+			<view class="cl-select-inner__value">
+				{{ text }}
+				<text class="cl-select-inner__placeholder" v-if="!text">
+					{{ placeholder }}
+				</text>
+			</view>
+
+			<text class="cl-select-inner__icon" :class="[arrowIcon]" v-if="arrowIcon"></text>
+		</slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import { useForm, useStyle } from "../../hooks";
+import { Props } from "./config";
+
+export default defineComponent({
+	props: {
+		...Props,
+
+		// 显示文本
+		text: String,
+	},
+
+	setup(props) {
+		const { disabled } = useForm();
+
+		// 是否禁用
+		const isDisabled = computed(() => disabled.value || props.disabled);
+
+		return {
+			isDisabled,
+			...useStyle({
+				padding: "0 20rpx",
+			}),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-select-inner/config.ts b/uni_modules/cool-ui/components/cl-select-inner/config.ts
new file mode 100644
index 0000000..f14f2f5
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-select-inner/config.ts
@@ -0,0 +1,35 @@
+export const Props = {
+	// 组件高
+	height: [String, Number],
+	// 占位文本
+	placeholder: {
+		type: String,
+		default: "请选择",
+	},
+	// 是否禁用
+	disabled: {
+		type: Boolean,
+		default: null,
+	},
+	// 是否带有边框
+	border: {
+		type: Boolean,
+		default: true,
+	},
+	// 是否圆角
+	round: {
+		type: Boolean,
+		default: null,
+	},
+	// 图标
+	arrowIcon: {
+		type: String,
+		default: "cl-icon-arrow-bottom",
+	},
+	// 背景色
+	backgroundColor: String,
+	// 圆角边框
+	borderRadius: [String, Number, Array],
+	// 内间距
+	padding: [String, Number, Array],
+};
diff --git a/uni_modules/cool-ui/components/cl-select-popup/cl-select-popup.vue b/uni_modules/cool-ui/components/cl-select-popup/cl-select-popup.vue
new file mode 100644
index 0000000..e9e305e
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-select-popup/cl-select-popup.vue
@@ -0,0 +1,298 @@
+<template>
+	<view class="cl-select-popup" @tap="open" v-if="showPicker">
+		<slot :label="text" :value="checked">
+			<cl-select-inner
+				:height="height"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				:border="border"
+				:round="round"
+				:backgroundColor="backgroundColor"
+				:borderRadius="borderRadius"
+				:arrowIcon="arrowIcon"
+				:padding="padding"
+				:text="text"
+			/>
+		</slot>
+	</view>
+
+	<!-- 弹出框 -->
+	<cl-popup
+		:ref="setRefs('popup')"
+		:padding="0"
+		:title="title"
+		direction="bottom"
+		border-radius="24rpx 24rpx 0 0"
+		show-close-btn
+		@opened="onOpened"
+		@close="onClose"
+		@closed="onClosed"
+	>
+		<view class="cl-select-popup__wrap">
+			<scroll-view
+				class="cl-select-popup__container"
+				:ref="setRefs('scroller')"
+				scroll-y
+				:scroll-into-view="scroller.view"
+				:style="{
+					height: parseRpx(scrollerHeight),
+					maxHeight: parseRpx(scrollerHeight || scrollerMaxHeight),
+				}"
+			>
+				<slot name="list">
+					<view class="cl-select-popup__list">
+						<view
+							class="cl-select-popup__item"
+							v-for="(item, index) in options"
+							:key="index"
+							:class="{
+								'is-active': isActive(item.value),
+							}"
+							:id="`item-${item.value}`"
+							@tap="check(item.value)"
+						>
+							<slot
+								name="item"
+								:item="item"
+								:active="isActive(item.value)"
+								:selection="selection"
+							>
+								{{ item.label }}
+
+								<text class="is-check cl-icon-check"></text>
+							</slot>
+						</view>
+					</view>
+
+					<!-- 空态 -->
+					<view class="cl-select-popup__empty" v-show="options.length == 0">
+						<cl-empty :fixed="false" />
+					</view>
+				</slot>
+			</scroll-view>
+
+			<view class="cl-select-popup__footer" v-if="showFooter">
+				<slot name="confirm">
+					<cl-button
+						round
+						fill
+						type="primary"
+						size="large"
+						:disabled="required ? selection.length == 0 : false"
+						@tap="confirm"
+					>
+						确定
+					</cl-button>
+				</slot>
+			</view>
+		</view>
+	</cl-popup>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, type PropType, watch, computed, nextTick, reactive } from "vue";
+import { isArray, isEmpty, last } from "lodash-es";
+import { useRefs } from "/@/cool";
+import { parseRpx } from "/@/cool/utils";
+import { Props } from "../cl-select-inner/config";
+
+interface Item {
+	label: string;
+	value: any;
+	[key: string]: any;
+}
+
+export default defineComponent({
+	name: "cl-select-popup",
+
+	props: {
+		...Props,
+
+		// 绑定值
+		modelValue: [String, Number, Array],
+		// 标题
+		title: String,
+		// 滚动高度
+		scrollerHeight: [String, Number],
+		// 最大滚动高度
+		scrollerMaxHeight: {
+			type: [String, Number],
+			default: 600,
+		},
+		// 选项列表
+		options: {
+			type: Array as PropType<Item[]>,
+			default: () => [],
+		},
+		// 是否多选
+		multiple: Boolean,
+		// 是否显示选择器
+		showPicker: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否显示底部
+		showFooter: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否必填
+		required: Boolean,
+	},
+
+	emits: ["update:modelValue", "change", "confirm", "opened", "close", "closed"],
+
+	setup(props, { emit }) {
+		const { refs, setRefs } = useRefs();
+
+		// 已选
+		const checked = ref<any[]>([]);
+
+		// 选中项
+		const selection = ref<any[]>([]);
+
+		// 显示的文本内容
+		const text = computed(() => {
+			return checked.value
+				.map((e) => props.options.find((a) => a.value == e)?.label)
+				.join("、");
+		});
+
+		// 滚动条
+		const scroller = reactive({
+			stop: null as (() => void) | null,
+			view: "",
+
+			clear() {
+				scroller.stop?.();
+				scroller.view = "";
+			},
+
+			watch() {
+				scroller.stop = watch(
+					() => [checked.value, props.options],
+					() => {
+						if (!isEmpty(checked.value) && !isEmpty(props.options)) {
+							nextTick(() => {
+								scroller.view = `item-${last(checked.value)}`;
+								scroller.stop?.();
+							});
+						}
+					},
+					{
+						immediate: true,
+						deep: true,
+					},
+				);
+			},
+		});
+
+		// 打开
+		function open() {
+			// 打开弹出
+			refs.popup?.open();
+
+			// 监听是否滚动
+			scroller.watch();
+
+			// 设置选中值
+			selection.value = [...checked.value];
+		}
+
+		// 打开完成事件
+		function onOpened() {
+			emit("opened");
+		}
+
+		// 关闭
+		function close() {
+			refs.popup?.close();
+		}
+
+		// 关闭事件
+		function onClose() {
+			scroller.clear();
+			emit("close");
+		}
+
+		// 关闭完成事件
+		function onClosed() {
+			emit("closed");
+		}
+
+		// 选中
+		function check(value: any) {
+			const i = selection.value.indexOf(value);
+
+			if (props.multiple) {
+				if (i >= 0) {
+					selection.value.splice(i, 1);
+				} else {
+					selection.value.push(value);
+				}
+			} else {
+				if (i >= 0) {
+					selection.value = [];
+				} else {
+					selection.value = [value];
+				}
+			}
+		}
+
+		// 确认
+		function confirm() {
+			const v = props.multiple ? selection.value : selection.value[0];
+
+			emit("update:modelValue", v);
+			emit("change", v);
+			emit("confirm", v);
+			close();
+		}
+
+		// 是否选中
+		function isActive(value: any) {
+			return selection.value.includes(value);
+		}
+
+		// 监听值
+		watch(
+			() => props.modelValue,
+			(value) => {
+				if (isArray(value)) {
+					checked.value = [...value] || [];
+				} else {
+					if (value === undefined) {
+						checked.value = [];
+					} else {
+						checked.value = [value];
+					}
+				}
+
+				selection.value = checked.value;
+			},
+			{
+				deep: true,
+				immediate: true,
+			},
+		);
+
+		return {
+			refs,
+			setRefs,
+			checked,
+			selection,
+			text,
+			scroller,
+			open,
+			onOpened,
+			close,
+			onClose,
+			onClosed,
+			confirm,
+			check,
+			isActive,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-select-region/cl-select-region.vue b/uni_modules/cool-ui/components/cl-select-region/cl-select-region.vue
new file mode 100644
index 0000000..1a6704c
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-select-region/cl-select-region.vue
@@ -0,0 +1,145 @@
+<template>
+	<view class="cl-select-region">
+		<cl-select
+			mode="multiSelector"
+			:model-value="value"
+			:options="list"
+			:label-key="labelKey"
+			:value-key="valueKey"
+			:separator="separator"
+			:disabled="disabled"
+			:border="border"
+			set-options-is-parse-value
+			@column-change="onColumnChange"
+			@change="onChange"
+		/>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from "vue";
+import { isEmpty } from "lodash-es";
+import CityPca from "../../data/city-pca.json";
+
+let cities: any[] = CityPca;
+
+export default defineComponent({
+	name: "cl-select-region",
+
+	props: {
+		// 绑定值
+		modelValue: Array,
+		// 城市数据接口
+		api: String,
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否带有边框
+		border: {
+			type: Boolean,
+			default: true,
+		},
+		// 显示关键字
+		labelKey: {
+			type: String,
+			default: "name",
+		},
+		// 值关键字
+		valueKey: {
+			type: String,
+			default: "code",
+		},
+		// 分隔符
+		separator: {
+			type: String,
+			default: " - ",
+		},
+	},
+
+	setup(props, { emit }) {
+		const list = ref<any[]>([[], [], []]);
+
+		// 绑定值
+		const value = ref<any[]>([]);
+
+		// 监听值改变
+		function onChange(arr: any[]) {
+			value.value = arr;
+			emit("update:modelValue", arr);
+			emit("change", arr);
+		}
+
+		// 监听更新
+		function onUpdate() {
+			const [x, y, z]: any = props.modelValue;
+			value.value = [x, y, z];
+
+			let a = 0;
+			let b = 0;
+
+			if (!x) {
+				a = 0;
+				b = 0;
+			} else {
+				a = cities.findIndex((e) => e[props.valueKey] == x);
+
+				if (a >= 0) {
+					b = cities[a].children.findIndex((e: any) => e[props.valueKey] == y);
+				}
+			}
+
+			updateList([a, b]);
+		}
+
+		// 监听列变化
+		function onColumnChange({ selects }: any) {
+			updateList(selects.map((e: any) => (e < 0 ? 0 : e)));
+		}
+
+		// 更新列表值
+		function updateList([a = 0, b = 0]: any) {
+			if (a < 0) {
+				a = 0;
+			}
+			if (b < 0) {
+				b = 0;
+			}
+
+			list.value = [cities, cities[a].children, cities[a].children[b].children];
+		}
+
+		watch(
+			() => props.modelValue,
+			() => {
+				if (!isEmpty(cities)) {
+					onUpdate();
+				} else {
+					if (props.api) {
+						uni.request({
+							url: props.api,
+							success(res: any) {
+								cities = res.data;
+								onUpdate();
+							},
+						});
+					}
+				}
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		return {
+			list,
+			value,
+			onChange,
+			onUpdate,
+			onColumnChange,
+			updateList,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-select/cl-select.vue b/uni_modules/cool-ui/components/cl-select/cl-select.vue
new file mode 100644
index 0000000..fb7b6f1
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-select/cl-select.vue
@@ -0,0 +1,236 @@
+<template>
+	<picker
+		class="cl-select__wrap"
+		:mode="mode"
+		:value="index"
+		:range="options"
+		:range-key="rangeKey"
+		:disabled="disabled"
+		:end="end"
+		:start="start"
+		:fields="fields"
+		@change="onChange"
+		@columnchange="onColumnChange"
+		@cancel="onCancel"
+	>
+		<slot :label="text" :value="index">
+			<cl-select-inner
+				:height="height"
+				:placeholder="placeholder"
+				:disabled="disabled"
+				:border="border"
+				:round="round"
+				:backgroundColor="backgroundColor"
+				:borderRadius="borderRadius"
+				:arrowIcon="arrowIcon"
+				:padding="padding"
+				:text="text"
+			/>
+		</slot>
+	</picker>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+import { parseRpx } from "/@/cool/utils";
+import { isArray, isEmpty } from "lodash-es";
+import { Props } from "../cl-select-inner/config";
+
+export default defineComponent({
+	name: "cl-select",
+
+	props: {
+		// 绑定值
+		modelValue: null,
+		// 模式
+		mode: {
+			type: String as PropType<"selector" | "multiSelector" | "region" | "time" | "date">,
+			default: "selector",
+		},
+		// 选项列表
+		options: {
+			type: Array as PropType<{ label: string; value: any }[]>,
+			default: () => [],
+		},
+		labelKey: {
+			type: String,
+			default: "label",
+		},
+		valueKey: {
+			type: String,
+			default: "value",
+		},
+		separator: {
+			type: String,
+			default: "/",
+		},
+		fields: {
+			type: String as PropType<"year" | "month" | "day">,
+			default: "day",
+		},
+		// 开始时间
+		start: String,
+		// 结束时间
+		end: String,
+		// 默认选中第一个
+		defaultFirstOption: {
+			type: Boolean,
+			default: true,
+		},
+		// 设置选项列表时是否解析值
+		setOptionsIsParseValue: Boolean,
+		...Props,
+	},
+
+	emits: ["update:modelValue", "confirm", "change", "column-change", "cancel"],
+
+	setup(props, { emit }) {
+		// 选中下标
+		const index = ref<any>();
+
+		// 文本
+		const text = ref("");
+
+		// key
+		const rangeKey = computed(() => (props.mode == "region" ? "" : props.labelKey));
+
+		// 解析值
+		function parse(val: any) {
+			// 取下标
+			index.value = (() => {
+				switch (props.mode) {
+					// 返回下标
+					case "selector":
+						return props.options.findIndex(
+							(e: any) => String(e[props.valueKey]) == String(val),
+						);
+					// 返回数组
+					case "multiSelector":
+						return (isArray(val) ? val : [val]).map((v, i) => {
+							//@ts-ignore
+							return props.options[i].findIndex(
+								(e: any) => String(e[props.valueKey]) == String(v),
+							);
+						});
+					default:
+						return val;
+				}
+			})();
+
+			// 取文本值
+			text.value = (() => {
+				switch (props.mode) {
+					case "selector":
+						return props.options[index.value]
+							? //@ts-ignore
+							  props.options[index.value][props.labelKey]
+							: "";
+					case "multiSelector":
+						return index.value
+							.filter((v: any) => v >= 0)
+							.map(
+								(v: any, i: number) =>
+									//@ts-ignore
+									props.options[i][v][props.labelKey],
+							)
+							.join(props.separator);
+					case "region":
+						console.warn("请使用 cl-select-region 代替");
+					default:
+						return index.value;
+				}
+			})();
+		}
+
+		// 监听值
+		function onChange({ detail }: any) {
+			if (detail.value < 0 || detail.value === undefined) {
+				return false;
+			}
+
+			// 返回的完整数据
+			let data: any = null;
+
+			// 返回的唯一数据
+			let value: any = null;
+
+			switch (props.mode) {
+				case "selector":
+					data = props.options[detail.value];
+					value = data ? data[props.valueKey] : null;
+					break;
+				case "multiSelector":
+					data = detail.value
+						.map((v: any) => (v < 0 ? 0 : v))
+						.map(
+							(v: any, i: number) =>
+								//@ts-ignore
+								props.options[i][v],
+						);
+					value = data.map((e: any) => e[props.valueKey]);
+					break;
+				default:
+					value = detail.value;
+			}
+
+			emit("update:modelValue", value);
+			emit("confirm", data);
+			emit("change", value);
+		}
+
+		// 监听列
+		function onColumnChange({ detail }: any) {
+			index.value = index.value.map((v: any, i: number) =>
+				i < detail.column ? v : i === detail.column ? detail.value : 0,
+			);
+
+			emit("column-change", { ...detail, selects: index.value });
+		}
+
+		// 取消
+		function onCancel() {
+			emit("cancel");
+		}
+
+		watch(() => props.modelValue, parse, {
+			immediate: true,
+		});
+
+		watch(
+			() => props.options,
+			(arr: any[]) => {
+				// 避免重复设置 options 异常问题
+				if (!props.setOptionsIsParseValue) {
+					parse(props.modelValue);
+				}
+
+				// 为空时，默认返回列表第一个
+				if (!isEmpty(arr) && props.defaultFirstOption) {
+					if (
+						index.value === undefined ||
+						index.value < 0 ||
+						index.value === "" ||
+						index.value === null
+					) {
+						emit("update:modelValue", arr[0][props.valueKey]);
+					}
+				}
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		return {
+			index,
+			text,
+			rangeKey,
+			parse,
+			onChange,
+			onColumnChange,
+			onCancel,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-service/cl-service.vue b/uni_modules/cool-ui/components/cl-service/cl-service.vue
new file mode 100644
index 0000000..8ff5bb2
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-service/cl-service.vue
@@ -0,0 +1,77 @@
+<template>
+	<cl-loading-mask
+		:loading="mask.loading && loading"
+		:modal="mask.modal"
+		:color="mask.color"
+		:text="mask.text"
+		:fullscreen="mask.fullscreen"
+		:background="mask.background"
+		:loading-theme="mask.loadingTheme"
+	>
+		<slot :data="data" :loading="loading"></slot>
+	</cl-loading-mask>
+</template>
+
+<script lang="ts">
+import { ref, onMounted, defineComponent, computed } from "vue";
+
+export default defineComponent({
+	name: "cl-service",
+
+	props: {
+		service: null,
+		mask: {
+			type: Object,
+			default() {
+				return {};
+			},
+		},
+		immediate: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	setup(props) {
+		// 数据
+		const data = ref();
+
+		// 加载中
+		const loading = ref(false);
+
+		// 遮罩层
+		const mask = computed(() => {
+			return Object.assign(
+				{
+					loading: true,
+					modal: true,
+					fullscreen: false,
+				},
+				props.mask || {}
+			);
+		});
+
+		// 请求
+		async function get() {
+			loading.value = true;
+			const res = await props.service;
+			loading.value = false;
+
+			return (data.value = res);
+		}
+
+		onMounted(() => {
+			if (props.immediate) {
+				get();
+			}
+		});
+
+		return {
+			mask,
+			loading,
+			data,
+			get,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-share-popup/cl-share-popup.vue b/uni_modules/cool-ui/components/cl-share-popup/cl-share-popup.vue
new file mode 100644
index 0000000..ddfbf61
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-share-popup/cl-share-popup.vue
@@ -0,0 +1,72 @@
+<template>
+    <cl-popup v-model="visible" direction="bottom" :padding="0" :z-index="1000">
+        <view class="cl-share-popup">
+            <cl-share
+                :qq="conf.qq"
+                :wx="conf.wx"
+                :text="conf.text"
+                :type="conf.type"
+                :title="conf.title"
+                :summary="conf.summary"
+                :href="conf.href"
+                :image-url="conf.imageUrl"
+                :mediaUrl="conf.mediaUrl"
+                :mini-program="conf.miniProgram"
+                @success="onSuccess"
+                @fail="onFail"
+                @choose="close"
+            ></cl-share>
+        </view>
+    </cl-popup>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref } from "vue"
+
+export default defineComponent({
+    name: "cl-share-popup",
+
+    setup() {
+        // 是否显示
+        const visible = ref(false)
+
+        // 配置
+        const conf = reactive<any>({})
+
+        // 打开
+        function open(options: ClShare.Options) {
+            Object.assign(conf, { qq: true, wx: true, type: 0 }, options)
+            visible.value = true
+        }
+
+        // 关闭
+        function close() {
+            visible.value = false
+        }
+
+        // 分享成功
+        function onSuccess() {
+            if (conf.success) {
+                conf.success()
+            }
+        }
+
+        // 分享失败
+        function onFail(err: any) {
+            if (conf.fail) {
+                console.error("分享失败", err)
+                conf.fail(err)
+            }
+        }
+
+        return {
+            visible,
+            conf,
+            open,
+            close,
+            onSuccess,
+            onFail
+        }
+    }
+})
+</script>
diff --git a/uni_modules/cool-ui/components/cl-share/alipay.png b/uni_modules/cool-ui/components/cl-share/alipay.png
new file mode 100644
index 0000000..94baa08
Binary files /dev/null and b/uni_modules/cool-ui/components/cl-share/alipay.png differ
diff --git a/uni_modules/cool-ui/components/cl-share/cl-share.vue b/uni_modules/cool-ui/components/cl-share/cl-share.vue
new file mode 100644
index 0000000..3d991ed
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-share/cl-share.vue
@@ -0,0 +1,130 @@
+<template>
+    <view class="cl-share">
+        <view class="cl-share__title">{{ text }}</view>
+
+        <view class="cl-share__container">
+            <!-- #ifdef APP -->
+            <button class="item" @tap="shareQQ" v-if="qq">
+                <image src="./qq.png" mode="aspectFit" />
+                <text>QQ好友</text>
+            </button>
+
+            <button class="item" @tap="shareWx('WXSceneTimeline')" v-if="wx">
+                <image src="./wx2.png" mode="aspectFit" />
+                <text>朋友圈</text>
+            </button>
+            <!-- #endif -->
+
+            <button class="item" open-type="share" @tap="shareWx('WXSceneSession')" v-if="wx">
+                <image src="./wx.png" mode="aspectFit" />
+                <text>微信好友</text>
+            </button>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+    name: "cl-share",
+
+    props: {
+        type: {
+            type: null,
+            default: 0
+        },
+        imageUrl: String,
+        title: String,
+        summary: String,
+        href: String,
+        mediaUrl: String,
+        miniProgram: Object,
+        text: {
+            type: String,
+            default: "分享至"
+        },
+        qq: {
+            type: Boolean,
+            default: true
+        },
+        wx: {
+            type: Boolean,
+            default: true
+        }
+    },
+
+    emits: ["choose", "success", "error"],
+
+    setup(props, { emit }) {
+        function share() {
+            uni.shareWithSystem({
+                type: props.type,
+                href: props.href,
+                summary: props.summary,
+                imageUrl: props.imageUrl,
+                success: () => {
+                    emit("success")
+                },
+                fail: (err: any) => {
+                    emit("error", err)
+                }
+            })
+        }
+
+        function shareWx(scene: any) {
+            choose("wx")
+
+            uni.share({
+                provider: "weixin",
+                type: props.type,
+                title: props.title,
+                scene,
+                summary: props.summary,
+                href: props.href,
+                imageUrl: props.imageUrl,
+                mediaUrl: props.mediaUrl,
+                miniProgram: props.miniProgram,
+                success: () => {
+                    emit("success")
+                },
+                fail: (err) => {
+                    console.error(err)
+                    share()
+                }
+            })
+        }
+
+        function shareQQ() {
+            choose("qq")
+
+            uni.share({
+                provider: "qq",
+                type: props.type,
+                title: props.title,
+                summary: props.summary,
+                href: props.href,
+                imageUrl: props.imageUrl,
+                mediaUrl: props.mediaUrl,
+                miniProgram: props.miniProgram,
+                success: () => {
+                    emit("success")
+                },
+                fail: () => {
+                    share()
+                }
+            })
+        }
+
+        function choose(name: string) {
+            emit("choose", name)
+        }
+
+        return {
+            shareWx,
+            shareQQ,
+            share
+        }
+    }
+})
+</script>
diff --git a/uni_modules/cool-ui/components/cl-share/qq.png b/uni_modules/cool-ui/components/cl-share/qq.png
new file mode 100644
index 0000000..f115924
Binary files /dev/null and b/uni_modules/cool-ui/components/cl-share/qq.png differ
diff --git a/uni_modules/cool-ui/components/cl-share/wx.png b/uni_modules/cool-ui/components/cl-share/wx.png
new file mode 100644
index 0000000..99aab12
Binary files /dev/null and b/uni_modules/cool-ui/components/cl-share/wx.png differ
diff --git a/uni_modules/cool-ui/components/cl-share/wx2.png b/uni_modules/cool-ui/components/cl-share/wx2.png
new file mode 100644
index 0000000..61072c7
Binary files /dev/null and b/uni_modules/cool-ui/components/cl-share/wx2.png differ
diff --git a/uni_modules/cool-ui/components/cl-skeleton/cl-skeleton.vue b/uni_modules/cool-ui/components/cl-skeleton/cl-skeleton.vue
new file mode 100644
index 0000000..2b0030a
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-skeleton/cl-skeleton.vue
@@ -0,0 +1,39 @@
+<template>
+	<view
+		class="cl-skeleton"
+		:class="{
+			'is-loading': loading,
+		}"
+		:style="[baseStyle, loading && loadingStyle]"
+	>
+		<view class="cl-skeleton__inner" v-show="!loading">
+			<slot></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { type PropType, type StyleValue, defineComponent } from "vue";
+import { useStyle } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-skeleton",
+
+	props: {
+		loading: {
+			type: Boolean,
+			default: true,
+		},
+		loadingStyle: {
+			type: Object as PropType<StyleValue>,
+			default: () => ({}),
+		},
+	},
+
+	setup() {
+		return {
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-slider/cl-slider.vue b/uni_modules/cool-ui/components/cl-slider/cl-slider.vue
new file mode 100644
index 0000000..f50fec0
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-slider/cl-slider.vue
@@ -0,0 +1,110 @@
+<template>
+	<view class="cl-slider">
+		<slider
+			:value="value"
+			:min="min"
+			:max="max"
+			:step="step"
+			:active-color="activeColor"
+			:background-color="backgroundColor"
+			:block-size="blockSize"
+			:block-color="blockColor"
+			:show-value="showValue"
+			:disabled="disabled"
+			@change="onChange"
+			@changing="onChanging"
+		/>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref, watch } from "vue";
+
+export default defineComponent({
+	name: "cl-slider",
+
+	props: {
+		// 绑定值
+		modelValue: {
+			type: Number,
+		},
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 最小值
+		min: {
+			type: Number,
+			default: 0,
+		},
+		// 最大值
+		max: {
+			type: Number,
+			default: 100,
+		},
+		// 步长
+		step: {
+			type: Number,
+			default: 1,
+		},
+		// 滑块左侧已选择部分的线条颜色
+		activeColor: {
+			type: String,
+			default: "#409eff",
+		},
+		// 滑块右侧背景条的颜色
+		backgroundColor: {
+			type: String,
+			default: "#e9e9e9",
+		},
+		// 滑块的大小
+		blockSize: {
+			type: Number,
+			default: 15,
+		},
+		// 滑块颜色
+		blockColor: {
+			type: String,
+			default: "#ffffff",
+		},
+		// 是否显示当前值
+		showValue: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	emits: ["update:modelValue", "change", "changing"],
+
+	setup(props, { emit }) {
+		const value = ref(0);
+
+		watch(
+			() => props.modelValue,
+			(val) => {
+				value.value = val as number;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		function onChange(e: any) {
+			emit("update:modelValue", e.detail.value);
+			emit("change", e);
+		}
+
+		function onChanging(e: any) {
+			emit("update:modelValue", e.detail.value);
+			emit("changing", e);
+		}
+
+		return {
+			value,
+			onChange,
+			onChanging,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-status-bar/cl-status-bar.vue b/uni_modules/cool-ui/components/cl-status-bar/cl-status-bar.vue
new file mode 100644
index 0000000..5865297
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-status-bar/cl-status-bar.vue
@@ -0,0 +1,64 @@
+<template>
+	<view
+		class="cl-status-bar__wrap"
+		:class="[
+			{
+				'is-sticky': sticky,
+			},
+		]"
+		:style="{
+			height,
+		}"
+	>
+		<view
+			class="cl-status-bar"
+			:style="{
+				backgroundColor,
+			}"
+		></view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useCool } from "/@/cool";
+
+export default defineComponent({
+	name: "cl-status-bar",
+
+	props: {
+		// 背景颜色
+		backgroundColor: String,
+		// 是否吸顶
+		sticky: {
+			type: Boolean,
+			default: true,
+		},
+	},
+
+	setup(props) {
+		const { statusBarHeight } = uni.getSystemInfoSync();
+		const { router } = useCool();
+
+		// 状态栏高度
+		const height = computed(() => {
+			return `${statusBarHeight}px`;
+		});
+
+		// 背景色
+		const backgroundColor = computed(() => {
+			return (
+				props.backgroundColor ||
+				router.info()?.style?.navigationBarBackgroundColor ||
+				router.globalStyle?.navigationBarBackgroundColor ||
+				"#ffffff"
+			);
+		});
+
+		return {
+			height,
+			backgroundColor,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-sticky/cl-sticky.vue b/uni_modules/cool-ui/components/cl-sticky/cl-sticky.vue
new file mode 100644
index 0000000..081f04f
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-sticky/cl-sticky.vue
@@ -0,0 +1,69 @@
+<template>
+	<view
+		class="cl-sticky"
+		:class="[{ 'is-flex': isFlex }]"
+		:style="{ zIndex, top: stickyTop, backgroundColor }"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useCool } from "/@/cool";
+
+const { statusBarHeight } = uni.getSystemInfoSync();
+
+export default defineComponent({
+	name: "cl-sticky",
+
+	props: {
+		zIndex: {
+			type: Number,
+			default: 100,
+		},
+		top: {
+			type: Number,
+			default: 0,
+		},
+		statusBar: {
+			type: Boolean,
+			default: true,
+		},
+		isFlex: Boolean,
+		backgroundColor: String,
+	},
+
+	setup(props) {
+		const { router } = useCool();
+
+		// 吸顶高度
+		const stickyTop = computed(() => {
+			// 状态栏高度
+			const t1 = `${props.statusBar ? statusBarHeight : 0}px`;
+
+			// 标题栏高度
+			// #ifdef H5
+			// @ts-ignore
+			const t2 = "44px";
+			// #endif
+			// #ifndef H5
+			// @ts-ignore
+			const t2 = "0px";
+			// #endif
+
+			// 自定义高度
+			const top = uni.upx2px(props.top) + "px";
+
+			// 计算后距离顶部高度
+			const arr = [top, ...(router.info()?.isCustomNavbar ? [t1] : [t2])];
+
+			return `calc(${arr.join(" + ")})`;
+		});
+
+		return {
+			stickyTop,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-switch/cl-switch.vue b/uni_modules/cool-ui/components/cl-switch/cl-switch.vue
new file mode 100644
index 0000000..521e05b
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-switch/cl-switch.vue
@@ -0,0 +1,64 @@
+<template>
+	<switch
+		class="cl-switch"
+		:checked="checked"
+		:disabled="isDisabled"
+		:color="color"
+		@change="onChange"
+	/>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent } from "vue";
+import { useForm } from "../../hooks";
+
+export default defineComponent({
+	props: {
+		// 绑定值
+		modelValue: [Boolean, String, Number],
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 打开时的值
+		activeValue: {
+			type: [Boolean, String, Number],
+			default: true,
+		},
+		// 关闭时的值
+		inactiveValue: {
+			type: [Boolean, String, Number],
+			default: false,
+		},
+		// 打开时的背景色
+		color: String,
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		const { disabled } = useForm();
+
+		// 是否选中
+		const checked = computed(() => props.modelValue === props.activeValue);
+
+		// 是否禁用
+		const isDisabled = computed(() => disabled.value || props.disabled);
+
+		// 监听变化
+		function onChange(e: any) {
+			const v = e.detail.value ? props.activeValue : props.inactiveValue;
+
+			emit("update:modelValue", v);
+			emit("change", v);
+		}
+
+		return {
+			checked,
+			isDisabled,
+			onChange,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-tabs/cl-tabs.vue b/uni_modules/cool-ui/components/cl-tabs/cl-tabs.vue
new file mode 100644
index 0000000..ffb692f
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-tabs/cl-tabs.vue
@@ -0,0 +1,367 @@
+<template>
+	<view
+		class="cl-tabs"
+		:class="[
+			{
+				'is-content': $slots.default,
+				'is-fill': fill,
+				'is-border': border,
+				'is-dropdown': showDropdown,
+				'is-checkable': checkable,
+			},
+		]"
+		:style="{
+			backgroundColor: backgroundColor,
+		}"
+	>
+		<view class="cl-tabs__header">
+			<scroll-view
+				class="cl-tabs__bar"
+				scroll-with-animation
+				scroll-x
+				:scroll-left="scrollLeft"
+				:style="{
+					height: parseRpx(height),
+				}"
+			>
+				<view
+					class="cl-tabs__bar-box"
+					:style="{
+						'justify-content': justify,
+					}"
+				>
+					<view
+						class="cl-tabs__bar-item"
+						v-for="(item, index) in tabs"
+						:key="index"
+						:style="{
+							color: current === item.value ? color : unColor,
+							padding: `0 ${gutter}rpx`,
+						}"
+						:class="{
+							'is-active': current === item.value,
+						}"
+						@tap="change(index)"
+					>
+						<!-- 前缀图标 -->
+						<text
+							v-if="item.prefixIcon"
+							class="cl-tabs__icon is-prefix"
+							:class="[item.prefixIcon]"
+						></text>
+
+						<!-- 文本内容 -->
+						<text class="cl-tabs__label">{{ item.label }}</text>
+
+						<!-- 后缀图标 -->
+						<text
+							v-if="item.suffixIcon"
+							class="cl-tabs__icon is-suffix"
+							:class="[item.suffixIcon]"
+						></text>
+					</view>
+
+					<!-- 选中样式 -->
+					<view
+						class="cl-tabs__line"
+						v-if="lineLeft > 0 && showLine"
+						:style="{
+							'background-color': color,
+							left: lineLeft + 'px',
+						}"
+					></view>
+				</view>
+			</scroll-view>
+
+			<!-- 下拉图标 -->
+			<view class="cl-tabs__dropdown" @tap="openDropdown" v-if="showDropdown">
+				<cl-icon :name="`${dropdown.visible ? 'arrow-top' : 'arrow-bottom'}`"></cl-icon>
+			</view>
+
+			<!-- 下拉列表 -->
+			<view
+				class="cl-tabs__dropdown-box"
+				:style="{
+					maxHeight: dropdown.visible ? dropdown.height : '0',
+				}"
+			>
+				<slot name="dropdown"></slot>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import {
+	type PropType,
+	computed,
+	defineComponent,
+	getCurrentInstance,
+	nextTick,
+	onMounted,
+	reactive,
+	ref,
+	watch,
+} from "vue";
+import { parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-tabs",
+
+	props: {
+		// 绑定值
+		modelValue: [String, Number],
+		// 高度
+		height: {
+			type: [String, Number],
+			default: 80,
+		},
+		// 标签列表
+		list: {
+			type: Array as PropType<{ label: string; value: any; [key: string]: any }[]>,
+			default: [],
+		},
+		// 是否循环显示
+		loop: {
+			type: Boolean,
+			default: true,
+		},
+		// 标签是否填充
+		fill: Boolean,
+		// 水平布局
+		justify: {
+			type: String as PropType<"start" | "center" | "end">,
+			default: "start",
+		},
+		// 是否带有下边框
+		border: {
+			type: Boolean,
+			default: true,
+		},
+		// 标签间隔
+		gutter: {
+			type: Number,
+			default: 30,
+		},
+		// 选中颜色
+		color: {
+			type: String,
+			default: "",
+		},
+		// 未选中颜色
+		unColor: {
+			type: String,
+			default: "",
+		},
+		// 背景色
+		backgroundColor: {
+			type: String,
+			default: "#fff",
+		},
+		// 是否显示下拉按钮
+		showDropdown: Boolean,
+		// 显示下划线
+		showLine: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否可选
+		checkable: Boolean,
+		// 是否禁用
+		disabled: Boolean,
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		const { proxy }: any = getCurrentInstance();
+
+		// 当前选中
+		const current = ref<number | string>();
+
+		// 下划线左位移
+		const lineLeft = ref(0);
+
+		// 左滚动距离
+		const scrollLeft = ref(0);
+
+		// 左位移
+		const offsetLeft = ref(0);
+
+		// 宽度
+		const width = ref(375);
+
+		// 列表
+		const tabs = computed(() => props.list);
+
+		// 刷新
+		function refresh() {
+			nextTick(() => {
+				// 获取选项卡宽度
+				uni.createSelectorQuery()
+					// #ifndef MP-ALIPAY
+					.in(proxy)
+					// #endif
+					.select(".cl-tabs")
+					.boundingClientRect((d: any) => {
+						offsetLeft.value = d.left;
+						width.value = d.width;
+						getRect();
+					})
+					.exec();
+			});
+		}
+
+		// 下拉
+		const dropdown = reactive({
+			visible: false,
+			height: "200rpx",
+			timer: null as any,
+		});
+
+		// 打开下拉框
+		function openDropdown() {
+			dropdown.visible = !dropdown.visible;
+
+			// 清除计时器
+			clearTimeout(dropdown.timer);
+
+			if (dropdown.visible) {
+				const fn = () => {
+					uni.createSelectorQuery()
+						// #ifndef MP-ALIPAY
+						.in(proxy)
+						// #endif
+						.select(".cl-tabs__dropdown-box")
+						.boundingClientRect((res) => {
+							dropdown.height = res.height + "px";
+						})
+						.exec();
+				};
+
+				// 获取下拉区域高度
+				dropdown.timer = setTimeout(fn, 300);
+			}
+		}
+
+		// 关闭下拉框
+		function closeDropdown() {
+			dropdown.visible = false;
+		}
+
+		// 改变
+		async function change(index: number) {
+			if (props.disabled) {
+				return false;
+			}
+
+			let { value } = tabs.value[index];
+
+			if (props.checkable) {
+				if (value == current.value) {
+					value = undefined;
+				}
+			}
+
+			emit("update:modelValue", value);
+			emit("change", value);
+			current.value = value;
+		}
+
+		// 获取下标
+		function getIndex() {
+			return tabs.value.findIndex((e) => e.value == current.value);
+		}
+
+		// 上一个
+		function prev() {
+			let index = getIndex();
+
+			change(index <= 0 ? (props.loop ? tabs.value.length - 1 : 0) : index - 1);
+		}
+
+		// 下一个
+		function next() {
+			let index = getIndex();
+
+			change(
+				index >= tabs.value.length - 1
+					? props.loop
+						? 0
+						: tabs.value.length - 1
+					: index + 1,
+			);
+		}
+
+		const rect = ref<any>();
+
+		// 大小
+		function getRect() {
+			nextTick(() => {
+				uni.createSelectorQuery()
+					.in(proxy)
+					.selectAll(".cl-tabs__bar-item")
+					.fields({ rect: true, size: true }, () => {})
+					.exec((d) => {
+						rect.value = d[0];
+						onOffset();
+					});
+			});
+		}
+
+		// 间距
+		function onOffset() {
+			if (rect.value) {
+				nextTick(() => {
+					let item = rect.value[getIndex()];
+
+					if (item) {
+						let x = item.left - (width.value - item.width) / 2 - offsetLeft.value;
+
+						if (x < 0) {
+							x = 0;
+						}
+
+						scrollLeft.value = x;
+						lineLeft.value =
+							item.left + item.width / 2 - uni.upx2px(16) - offsetLeft.value;
+					}
+				});
+			}
+		}
+
+		// 监听绑定值
+		watch(
+			() => props.modelValue,
+			(val: any) => {
+				current.value = val;
+				onOffset();
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 监听列表改变
+		watch(() => props.list, refresh);
+
+		onMounted(() => {
+			refresh();
+		});
+
+		return {
+			current,
+			scrollLeft,
+			lineLeft,
+			tabs,
+			dropdown,
+			change,
+			prev,
+			next,
+			openDropdown,
+			closeDropdown,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-tag/cl-tag.vue b/uni_modules/cool-ui/components/cl-tag/cl-tag.vue
new file mode 100644
index 0000000..759c05e
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-tag/cl-tag.vue
@@ -0,0 +1,80 @@
+<template>
+	<view
+		class="cl-tag"
+		:class="[
+			`cl-tag--${type}`,
+			`cl-tag--${size}`,
+			{
+				'is-plain': plain,
+				'is-round': round,
+			},
+		]"
+		:style="[
+			baseStyle,
+			{
+				backgroundColor: color,
+			},
+		]"
+		@click="tap"
+		v-if="visible"
+	>
+		<slot></slot>
+		<text class="cl-tag__close cl-icon-close" v-if="closable" @tap.stop="close"></text>
+	</view>
+</template>
+
+<script lang="ts">
+import { type PropType, defineComponent, ref } from "vue";
+import { useStyle, useTap } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-tag",
+
+	props: {
+		// 类型
+		type: {
+			type: String as PropType<"primary" | "success" | "error" | "warning" | "info">,
+			default: "primary",
+		},
+		// 朴素样式
+		plain: Boolean,
+		// 标签大小
+		size: {
+			type: String as PropType<"default" | "small" | "larget">,
+			default: "default",
+		},
+		// 颜色
+		color: String,
+		// 是否可关闭
+		closable: Boolean,
+		// 圆角
+		round: Boolean,
+	},
+
+	setup(_, { emit }) {
+		const { tap } = useTap(emit);
+
+		// 是否可见
+		const visible = ref(true);
+
+		// 打开
+		function open() {
+			visible.value = true;
+		}
+
+		// 关闭
+		function close() {
+			visible.value = false;
+			emit("close");
+		}
+
+		return {
+			visible,
+			tap,
+			open,
+			close,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-text/cl-text.vue b/uni_modules/cool-ui/components/cl-text/cl-text.vue
new file mode 100644
index 0000000..42dbb98
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-text/cl-text.vue
@@ -0,0 +1,167 @@
+<template>
+	<view
+		class="cl-text"
+		:class="[
+			`is-${type}`,
+			`is-color-${color}`,
+			{
+				'is-bold': bold,
+				'is-block': block,
+				'is-line-through': lineThrough,
+				'is-underline': underline,
+				'is-ellipsis': ellipsis > 0,
+				'is-copy': copy,
+			},
+		]"
+		:style="[
+			baseStyle,
+			{
+				color,
+				textAlign: align,
+				lineHeight: lineHeight,
+				fontSize: parseRpx(size),
+				letterSpacing: parseRpx(letterSpacing),
+			},
+		]"
+		@click="tap"
+	>
+		<!-- 前缀图标 -->
+		<text class="cl-text__prefix-icon" :class="prefixIcon" v-if="prefixIcon"> </text>
+
+		<!-- 价格 -->
+		<text class="cl-text__symbol--price" v-if="type == 'price'">￥</text>
+
+		<!-- 文本 -->
+		<view
+			class="cl-text__value"
+			:style="{
+				'-webkit-line-clamp': ellipsis,
+			}"
+		>
+			<slot>{{ text.value }}</slot>
+		</view>
+
+		<!-- 小数 -->
+		<text class="cl-text__precision" v-if="type == 'price' && precision"
+			>.{{ text.precision }}</text
+		>
+
+		<!-- 后缀图标 -->
+		<text class="cl-text__suffix-icon" :class="suffixIcon" v-if="suffixIcon"> </text>
+	</view>
+</template>
+
+<script lang="ts">
+import { type PropType, computed, defineComponent } from "vue";
+import { useStyle, useTap } from "../../hooks";
+import { parseRpx } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-text",
+
+	props: {
+		// 内容
+		value: {
+			type: [String, Number],
+			default: "",
+		},
+		// 类型
+		type: {
+			type: String as PropType<"text" | "price" | "phone">,
+			default: "text",
+		},
+		// 手机号是否加密
+		encrypt: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否粗体
+		bold: Boolean,
+		// 是否块状
+		block: Boolean,
+		// 文本超出省略
+		ellipsis: {
+			type: Number,
+			default: 0,
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: "#444",
+		},
+		// 字体大小
+		size: [String, Number],
+		// 文字对齐
+		align: {
+			type: String as PropType<
+				"start" | "end" | "left" | "right" | "center" | "justify" | "match-parent"
+			>,
+			default: "left",
+		},
+		// 价格小数点
+		precision: {
+			type: Boolean,
+			default: true,
+		},
+		// 穿过文本下的一条线
+		lineThrough: Boolean,
+		// 行高
+		lineHeight: {
+			type: [String, Number],
+			default: 1,
+		},
+		// 文本下的一条线
+		underline: Boolean,
+		// 文本水平间隔
+		letterSpacing: {
+			type: [String, Number],
+			default: 0,
+		},
+		// 顶部图标
+		prefixIcon: String,
+		// 尾部图标
+		suffixIcon: String,
+		// 是否能复制
+		copy: Boolean,
+	},
+
+	setup(props, { emit }) {
+		const { tap } = useTap(emit);
+
+		const text = computed(() => {
+			if (props.type == "price") {
+				const [value, precision = "00"] = parseFloat(String(props.value) || "0")
+					.toFixed(2)
+					.split(".");
+
+				if (props.precision) {
+					return {
+						value,
+						precision,
+					};
+				} else {
+					return {
+						value,
+					};
+				}
+			} else if (props.type == "phone") {
+				const str = String(props.value);
+
+				return {
+					value: props.encrypt ? str.substr(0, 3) + "****" + str.substr(7) : str,
+				};
+			} else {
+				return {
+					value: props.value,
+				};
+			}
+		});
+
+		return {
+			text,
+			tap,
+			...useStyle(),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-textarea/cl-textarea.vue b/uni_modules/cool-ui/components/cl-textarea/cl-textarea.vue
new file mode 100644
index 0000000..277d5a7
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-textarea/cl-textarea.vue
@@ -0,0 +1,201 @@
+<template>
+	<view
+		class="cl-textarea"
+		:class="[
+			{
+				'is-disabled': isDisabled,
+				'is-count': count,
+				'is-border': border,
+			},
+		]"
+		:style="[baseStyle]"
+	>
+		<textarea
+			class="cl-textarea__inner"
+			v-model="value"
+			:placeholder="placeholder"
+			:disabled="isDisabled"
+			:auto-focus="autoFocus"
+			:focus="focus"
+			:auto-height="autoHeight"
+			:fixed="fixed"
+			:placeholder-style="placeholderStyle"
+			:cursor-spacing="cursorSpacing"
+			:cursor="cursor"
+			:show-confirm-bar="showConfirmBar"
+			:selection-start="selectionStart"
+			:selection-end="selectionEnd"
+			:adjust-position="adjustPosition"
+			:disable-default-padding="disableDefaultPadding"
+			:hold-keyboard="holdKeyboard"
+			:maxlength="maxlength"
+			@focus="onFocus"
+			@blur="onBlur"
+			@linechange="onLinechange"
+			@input="onInput"
+			@confirm="onConfirm"
+			@keyboardheightchange="onKeyboardheightchange"
+		/>
+
+		<!-- #ifndef MP-ALIPAY -->
+		<text class="cl-textarea__count" v-if="count"
+			>{{ value?.length || 0 }}/{{ maxlength }}</text
+		>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch } from "vue";
+import { useForm, useStyle } from "../../hooks";
+import { keys } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-textarea",
+
+	props: {
+		// 绑定值
+		modelValue: {
+			type: String,
+			default: "",
+		},
+		// 是否显示统计字数
+		placeholder: {
+			type: String,
+			default: "请填写",
+		},
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 带边框
+		border: {
+			type: Boolean,
+			default: true,
+		},
+		// 统计数字
+		count: Boolean,
+		// 自动聚焦
+		autoFocus: Boolean,
+		// 获取焦点
+		focus: Boolean,
+		placeholderStyle: Object,
+		autoHeight: Boolean,
+		fixed: Boolean,
+		cursorSpacing: {
+			type: Number,
+			default: 0,
+		},
+		cursor: Number,
+		showConfirmBar: {
+			type: Boolean,
+			default: true,
+		},
+		selectionStart: {
+			type: Number,
+			default: -1,
+		},
+		selectionEnd: {
+			type: Number,
+			default: -1,
+		},
+		adjustPosition: {
+			type: Boolean,
+			default: true,
+		},
+		disableDefaultPadding: {
+			type: Boolean,
+			default: true,
+		},
+		holdKeyboard: Boolean,
+		maxlength: {
+			type: Number,
+			default: 150,
+		},
+	},
+
+	emits: [
+		"update:modelValue",
+		"change",
+		"clear",
+		"focus",
+		"blur",
+		"linechange",
+		"confirm",
+		"keyboardheightchange",
+	],
+
+	setup(props, { emit }) {
+		const { disabled } = useForm();
+
+		// 绑定值
+		const value = ref("");
+
+		watch(
+			() => props.modelValue,
+			(val) => {
+				value.value = val;
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 是否禁用
+		const isDisabled = computed(() => disabled.value || props.disabled);
+
+		// 占位符样式
+		const placeholderStyle = computed(() => {
+			const d: any = {
+				lineHeight: 1.2,
+				color: "#a8abb2",
+				...props.placeholderStyle,
+			};
+
+			return keys(d)
+				.map((k) => `${k}:${d[k]};`)
+				.join("");
+		});
+
+		function onFocus(e: any) {
+			emit("focus", e);
+		}
+
+		function onBlur(e: any) {
+			emit("blur", e);
+		}
+
+		function onLinechange(e: any) {
+			emit("linechange", e);
+		}
+
+		function onInput(e: any) {
+			emit("update:modelValue", e.detail.value);
+		}
+
+		function onConfirm(e: any) {
+			emit("confirm", e);
+		}
+
+		function onKeyboardheightchange(e: any) {
+			emit("keyboardheightchange", e);
+		}
+
+		return {
+			value,
+			isDisabled,
+			placeholderStyle,
+			onFocus,
+			onBlur,
+			onLinechange,
+			onInput,
+			onConfirm,
+			onKeyboardheightchange,
+			...useStyle({
+				height: 150,
+			}),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-timeline-item/cl-timeline-item.vue b/uni_modules/cool-ui/components/cl-timeline-item/cl-timeline-item.vue
new file mode 100644
index 0000000..d2f3010
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-timeline-item/cl-timeline-item.vue
@@ -0,0 +1,89 @@
+<template>
+	<view
+		class="cl-timeline-item"
+		:class="[
+			{
+				'is-line': showLine,
+			},
+		]"
+	>
+		<view
+			class="cl-timeline-item__timestamp"
+			:style="{
+				width: `${parent?.timestampWidth}rpx`,
+			}"
+		>
+			<slot name="timestamp">
+				<text class="cl-timeline-item__date">{{ timestampText[0] }}</text>
+				<text class="cl-timeline-item__time">{{ timestampText[1] }}</text>
+			</slot>
+		</view>
+
+		<view class="cl-timeline-item__node">
+			<view class="cl-timeline-item__node-box">
+				<slot name="icon">
+					<text
+						v-if="icon"
+						class="cl-timeline-item__icon"
+						:class="[icon]"
+						:style="{ color }"
+					></text>
+
+					<text
+						v-else
+						class="cl-timeline-item__dot"
+						:style="{
+							'background-color': color || '#999',
+						}"
+					></text>
+				</slot>
+			</view>
+		</view>
+
+		<view class="cl-timeline-item__content" select>
+			<slot name="content">
+				<text selectable user-select>{{ content }}</text>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed } from "vue";
+import { getParent } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-timeline",
+
+	props: {
+		// 时间
+		timestamp: String,
+		// 内容
+		content: String,
+		// 是否显示竖线
+		showLine: Boolean,
+		// 图标
+		icon: String,
+		// 图标颜色
+		color: {
+			type: String,
+			default: "#999",
+		},
+	},
+
+	setup(props) {
+		// cl-timeline
+		const parent = getParent("cl-timeline", ["timestampWidth"]);
+
+		// 时间
+		const timestampText = computed(() => {
+			return (props.timestamp || "").split(" ");
+		});
+
+		return {
+			timestampText,
+			parent,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-timeline/cl-timeline.vue b/uni_modules/cool-ui/components/cl-timeline/cl-timeline.vue
new file mode 100644
index 0000000..ca33efe
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-timeline/cl-timeline.vue
@@ -0,0 +1,21 @@
+<template>
+	<view class="cl-timeline">
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+	name: "cl-timeline",
+
+	props: {
+		// 左侧时间宽度
+		timestampWidth: {
+			type: Number,
+			default: 150,
+		},
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-toast/cl-toast.vue b/uni_modules/cool-ui/components/cl-toast/cl-toast.vue
new file mode 100644
index 0000000..f2687ad
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-toast/cl-toast.vue
@@ -0,0 +1,144 @@
+<template>
+	<view class="cl-toast__wrap">
+		<template v-for="item in list" :key="item.id">
+			<cl-popup
+				v-model="item.visible"
+				:padding="0"
+				:modal="false"
+				:direction="item.position"
+				background-color="transparent"
+			>
+				<view
+					class="cl-toast"
+					:class="{
+						'is-icon': item.image || item.icon,
+					}"
+				>
+					<view class="cl-toast__icon" v-if="item.image || item.icon">
+						<image
+							:src="item.image.url"
+							:mode="item.image.mode || 'aspectFill'"
+							:style="item.image.style"
+							v-if="item.image"
+						/>
+						<text :class="item.icon" v-else></text>
+					</view>
+
+					<slot>
+						<text class="cl-toast__content">{{ item.message }}</text>
+					</slot>
+				</view>
+			</cl-popup>
+		</template>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+import { isFunction, last, has } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-toast",
+
+	setup() {
+		let id = 0;
+
+		// 列表
+		const list = ref<any[]>([]);
+
+		// 打开
+		function open(d: ClToast.Options) {
+			// 默认
+			const options = {
+				id: id++,
+				visible: false,
+				closed: false,
+				icon: "",
+				image: null,
+				message: "",
+				duration: 2000,
+				type: "",
+				position: "center",
+				clear: false,
+			};
+
+			// 合并
+			if (has(d, "message")) {
+				Object.assign(options, d);
+			} else {
+				options.message = String(d);
+			}
+
+			switch (options.type) {
+				case "success":
+					options.icon = "cl-icon-check-border";
+					break;
+
+				case "warning":
+					options.icon = "cl-icon-warning-border";
+					break;
+
+				case "info":
+					options.icon = "cl-icon-help-border";
+					break;
+
+				case "error":
+					options.icon = "cl-icon-close-border";
+					break;
+			}
+
+			// 是否清除之前的
+			if (options.clear) {
+				list.value = [options];
+			} else {
+				list.value.push(options);
+			}
+
+			// 有图标默认居中显示
+			if (options.image || options.icon) {
+				options.position = "center";
+			}
+
+			setTimeout(() => {
+				create(last(list.value));
+			}, 50);
+		}
+
+		// 关闭
+		function close(item: any) {
+			// 清空计时器
+			clearTimeout(item.timer);
+			item.visible = false;
+
+			// 关闭回调
+			if (isFunction(item.onClose)) {
+				item.onClose();
+			}
+
+			setTimeout(() => {
+				item.closed = true;
+			}, 300);
+		}
+
+		// 创建
+		function create(item: any) {
+			const { duration } = item || {};
+
+			if (duration > 0) {
+				item.visible = true;
+
+				item.timer = setTimeout(() => {
+					close(item);
+				}, duration);
+			}
+		}
+
+		return {
+			list,
+			open,
+			close,
+			create,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-topbar/cl-topbar.vue b/uni_modules/cool-ui/components/cl-topbar/cl-topbar.vue
new file mode 100644
index 0000000..187f872
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-topbar/cl-topbar.vue
@@ -0,0 +1,139 @@
+<template>
+	<view
+		class="cl-topbar"
+		:class="{
+			'is-border': border,
+			'is-fixed': fixed,
+			'is-ios': isIos,
+			'with-mp': withMp,
+		}"
+		:style="{
+			backgroundColor,
+			color,
+			zIndex,
+			paddingTop,
+		}"
+	>
+		<view
+			class="cl-topbar__content"
+			:style="{
+				color,
+			}"
+		>
+			<slot>
+				<view class="cl-topbar__text" @tap="tapTitle">
+					<text class="cl-topbar__title" v-if="title">{{ title }}</text>
+					<text class="cl-topbar__description" v-if="description">{{ description }}</text>
+				</view>
+			</slot>
+		</view>
+
+		<view class="cl-topbar__prepend">
+			<view class="cl-topbar__icon" v-if="showBack" @tap="back">
+				<text class="cl-icon-home" v-if="isFirst"></text>
+				<text class="cl-icon-arrow-left" v-else></text>
+			</view>
+
+			<slot name="prepend"></slot>
+		</view>
+
+		<view class="cl-topbar__append">
+			<slot name="append"></slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref } from "vue";
+import { router } from "/@/cool";
+import { isIos } from "/@/cool/utils";
+
+const { statusBarHeight } = uni.getSystemInfoSync();
+
+export default defineComponent({
+	name: "cl-topbar",
+
+	props: {
+		// 标题
+		title: String,
+		// 描述
+		description: String,
+		// 是否显示下边框
+		border: {
+			type: Boolean,
+			default: true,
+		},
+		// 是否固定
+		fixed: Boolean,
+		// 是否兼容小程序
+		withMp: Boolean,
+		// 是否显示返回按钮
+		showBack: {
+			type: Boolean,
+			default: true,
+		},
+		// 背景色
+		backgroundColor: {
+			type: String,
+			default: "#fff",
+		},
+		// 字体颜色
+		color: {
+			type: String,
+			default: "#000",
+		},
+		// 返回页面路径
+		backPath: String,
+		// 层级
+		zIndex: {
+			type: Number,
+			default: 99,
+		},
+	},
+
+	setup(props, { emit }) {
+		// 是否页面栈的第一个
+		const isFirst = ref(false);
+
+		// 顶部内边距
+		const paddingTop = computed(() => {
+			return props.fixed ? `${statusBarHeight}px` : 0;
+		});
+
+		// 返回
+		function back() {
+			if (isFirst.value) {
+				//  H5页面刷新或者分享页时，页面栈长度只有1。此时逐个验证返回的页面路径
+				if (props.backPath) {
+					router.push({
+						path: props.backPath,
+						mode: "reLaunch",
+					});
+				} else {
+					router.home();
+				}
+			} else {
+				router.back();
+			}
+		}
+
+		// 点击标题
+		function tapTitle(e: any) {
+			emit("title", e);
+		}
+
+		onMounted(() => {
+			const pages = getCurrentPages();
+			isFirst.value = pages.length == 1;
+		});
+
+		return {
+			isFirst,
+			paddingTop,
+			back,
+			tapTitle,
+			isIos,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-tree-item/cl-tree-item.vue b/uni_modules/cool-ui/components/cl-tree-item/cl-tree-item.vue
new file mode 100644
index 0000000..287216b
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-tree-item/cl-tree-item.vue
@@ -0,0 +1,238 @@
+<template>
+    <view
+        class="cl-tree-item"
+        :class="{
+            'is-expand': data.isExpand,
+            'is-checked': isChecked
+        }"
+        :style="itemStyle"
+    >
+        <view class="cl-tree-item__content" :style="childStyle" @tap="toTap">
+            <view class="cl-tree-item__expand" @tap.stop="toExpand()" v-if="!isLeaf">
+                <text class="icon-caret cl-icon-caret-bottom"></text>
+            </view>
+
+            <view class="cl-tree-item__label">
+                <slot name="item" :data="data" :level="level">
+                    {{ label }}
+                </slot>
+            </view>
+
+            <text class="cl-tree-item__check cl-icon-check"></text>
+        </view>
+
+        <view
+            class="cl-tree-item__children"
+            :style="{
+                maxHeight: maxHeight
+            }"
+            v-if="isExpand"
+        >
+            <cl-tree-item
+                v-for="(item, index) in children"
+                :data="item"
+                :siblings="children"
+                :key="index"
+                :level="level + 1"
+            >
+                <!-- <template #item="{ data, level }">
+					<slot name="item" :data="data" :level="level"> </slot>
+				</template> -->
+            </cl-tree-item>
+        </view>
+    </view>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, nextTick, ref, watch } from "vue"
+import type { PropType } from "vue"
+import { getParent, parseRpx } from "/@/cool/utils"
+import { isEmpty } from "lodash-es"
+
+export default defineComponent({
+    name: "cl-tree-item",
+
+    props: {
+        data: {
+            type: Object as PropType<ClTree.Item>,
+            default: () => {
+                return {}
+            }
+        },
+        siblings: {
+            type: Array as PropType<ClTree.Item[]>,
+            default: () => []
+        },
+        level: {
+            type: Number,
+            default: 0
+        }
+    },
+
+    setup(props) {
+        // cl-tree
+        const parent = getParent("cl-tree", [
+            "value",
+            "updateValue",
+            "data",
+            "keys",
+            "getKey",
+            "rowHeight",
+            "checkStrictly",
+            "accordion",
+            "noChildren"
+        ])
+
+        // 是否展开
+        const isExpand = ref(props.data.isExpand || false)
+
+        // 最大高度
+        const maxHeight = ref()
+
+        // 样式
+        const itemStyle = computed(() => {
+            return {
+                paddingLeft: (props.level ? 26 : 0) + "rpx"
+            }
+        })
+
+        // 子集样式
+        const childStyle = computed(() => {
+            return {
+                marginLeft: parent.value?.noChildren ? 0 : isLeaf.value ? "32rpx" : "0",
+                height: parseRpx(parent.value?.rowHeight)
+            }
+        })
+
+        // 是否叶子节点
+        const isLeaf = computed(() => isEmpty(getKey("children")))
+
+        // 是否选中
+        const isChecked = computed(() => parent.value?.value.includes(getKey("value")))
+
+        // 文本
+        const label = computed(() => getKey("label"))
+
+        // 子集
+        const children = computed(() => getKey("children"))
+
+        // 获取高度
+        function getHeight() {
+            let n = 0
+
+            function deep(arr: any[]) {
+                arr.forEach((e) => {
+                    n += 1
+                    if (e.isExpand && getKey("children", e)) {
+                        deep(getKey("children", e))
+                    }
+                })
+            }
+
+            deep(getKey("children") || [])
+
+            return n * (parent.value?.rowHeight || 50) + "rpx"
+        }
+
+        // 展开
+        let timer: any
+
+        async function toExpand(invert: boolean = true) {
+            if (getKey("children")) {
+                if (invert) {
+                    props.data.isExpand = !props.data.isExpand
+                }
+
+                clearTimeout(timer)
+
+                if (props.data.isExpand) {
+                    isExpand.value = true
+
+                    // 1 设置0
+                    maxHeight.value = "0"
+
+                    await nextTick()
+
+                    setTimeout(() => {
+                        // 2 获取高度
+                        maxHeight.value = getHeight()
+
+                        timer = setTimeout(() => {
+                            // 3 清除高度
+                            maxHeight.value = undefined
+
+                            // 是否每次只打开一个同级树节点展开
+                            if (parent.value?.accordion) {
+                                props.siblings.forEach((e) => {
+                                    if (getKey("value", e) !== getKey("value")) {
+                                        e.isExpand = false
+                                    }
+                                })
+                            }
+                        }, 300)
+                    }, 50)
+                } else {
+                    // 1 获取高度
+                    maxHeight.value = getHeight()
+
+                    await nextTick()
+
+                    setTimeout(() => {
+                        // 2 设置0
+                        maxHeight.value = "0rpx"
+
+                        timer = setTimeout(() => {
+                            isExpand.value = false
+                        }, 300)
+                    }, 50)
+                }
+            }
+        }
+
+        // 选择
+        function toCheck() {
+            parent.value?.updateValue(getKey("value"))
+        }
+
+        // 获取key
+        function getKey(key: string, value?: ClTree.Item) {
+            if (!value) {
+                value = props.data
+            }
+            return parent.value?.getKey?.(key, value)
+        }
+
+        // 点击
+        function toTap() {
+            if (isLeaf.value || parent.value?.checkStrictly) {
+                toCheck()
+            } else {
+                toExpand()
+            }
+        }
+
+        watch(
+            () => props.data.isExpand,
+            (val) => {
+                if (!val) {
+                    toExpand(false)
+                }
+            }
+        )
+
+        return {
+            isExpand,
+            maxHeight,
+            itemStyle,
+            childStyle,
+            isLeaf,
+            isChecked,
+            label,
+            children,
+            toExpand,
+            getKey,
+            toTap
+        }
+    }
+})
+</script>
diff --git a/uni_modules/cool-ui/components/cl-tree-select/cl-tree-select.vue b/uni_modules/cool-ui/components/cl-tree-select/cl-tree-select.vue
new file mode 100644
index 0000000..571ba83
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-tree-select/cl-tree-select.vue
@@ -0,0 +1,114 @@
+<template>
+	<cl-select-popup
+		ref="popup"
+		title="选择节点"
+		:max-height="maxHeight"
+		:show-picker="showPicker"
+		@close="onClose"
+	>
+		<template #list>
+			<view class="cl-tree-select">
+				<cl-tree
+					v-if="visible"
+					v-model="value"
+					:data="data"
+					:row-height="rowHeight"
+					:check-strictly="checkStrictly"
+					:default-expand-all="defaultExpandAll"
+					:auto-expand="autoExpand"
+					:accordion="accordion"
+					:multiple="multiple"
+					:keys="keys"
+				/>
+			</view>
+		</template>
+
+		<template #confirm>
+			<cl-button round fill type="primary" size="large" :disabled="!isChecked" @tap="save"
+				>确定</cl-button
+			>
+		</template>
+	</cl-select-popup>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref } from "vue";
+import { TreeProps, useTree } from "../cl-tree/helper";
+import { parseRpx } from "/@/cool/utils";
+import { cloneDeep, isEmpty } from "lodash-es";
+
+export default defineComponent({
+	name: "cl-tree-select",
+
+	props: {
+		maxHeight: {
+			type: [String, Number],
+			default: 800,
+		},
+		showPicker: {
+			type: Boolean,
+			default: true,
+		},
+		...TreeProps,
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		const { label } = useTree({ props });
+
+		// 选择弹框
+		const popup = ref();
+
+		// 是否可见
+		const visible = ref(false);
+
+		// 绑定值
+		const value = ref();
+
+		// 是否选择了
+		const isChecked = computed(() => {
+			return !(props.multiple
+				? isEmpty(value.value)
+				: value.value === undefined || value.value === null || value.value === "");
+		});
+
+		// 打开
+		function open() {
+			visible.value = true;
+			value.value = cloneDeep(props.modelValue);
+			popup.value?.open();
+		}
+
+		// 关闭
+		function close() {
+			popup.value?.close();
+		}
+
+		// 关闭事件
+		function onClose() {
+			visible.value = false;
+		}
+
+		// 保存
+		function save() {
+			emit("update:modelValue", value.value);
+			emit("change", value.value);
+			close();
+		}
+
+		return {
+			popup,
+			visible,
+			value,
+			label,
+			open,
+			close,
+			save,
+			onClose,
+			parseRpx,
+			isChecked,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-tree/cl-tree.vue b/uni_modules/cool-ui/components/cl-tree/cl-tree.vue
new file mode 100644
index 0000000..539197e
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-tree/cl-tree.vue
@@ -0,0 +1,30 @@
+<template>
+	<view class="cl-tree">
+		<cl-tree-item v-for="(item, index) in data" :key="index" :data="item" :siblings="data">
+			<!-- <template #item="{ data, level }">
+				<slot name="item" :data="data" :level="level"></slot>
+			</template> -->
+		</cl-tree-item>
+	</view>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import { TreeProps, useTree } from "./helper";
+
+export default defineComponent({
+	name: "cl-tree",
+
+	props: {
+		...TreeProps,
+	},
+
+	emits: ["update:modelValue", "change"],
+
+	setup(props, { emit }) {
+		return {
+			...useTree({ props, emit }),
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-tree/helper.ts b/uni_modules/cool-ui/components/cl-tree/helper.ts
new file mode 100644
index 0000000..76d6e3b
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-tree/helper.ts
@@ -0,0 +1,158 @@
+import { computed, ref, watch } from "vue"
+import type { PropType } from "vue"
+import { deepMerge } from "/@/cool/utils"
+import { cloneDeep } from "lodash-es"
+
+export const TreeProps = {
+    // 绑定值
+    modelValue: [String, Number, Array],
+    // 数据
+    data: {
+        type: Array as PropType<ClTree.Item[]>,
+        default: () => []
+    },
+    // 是否多选
+    multiple: Boolean,
+    // 每一行的高度
+    rowHeight: {
+        type: Number,
+        default: 64
+    },
+    // 是否每项都能选择
+    checkStrictly: Boolean,
+    // 是否默认全部展开
+    defaultExpandAll: Boolean,
+    // 默认值是否自动展开
+    autoExpand: {
+        type: Boolean,
+        default: true
+    },
+    // 是否每次只打开一个同级树节点展开
+    accordion: Boolean,
+    // 关键字
+    keys: Object as PropType<ClTree.Keys>
+}
+
+export function useTree({ props, emit }: any) {
+    // 绑定值
+    const value = ref<any[]>([])
+
+    watch(
+        () => props.modelValue,
+        (val) => {
+            value.value = props.multiple ? val : [val]
+        },
+        {
+            immediate: true
+        }
+    )
+
+    // 更新值
+    function updateValue(val: any) {
+        if (props.multiple) {
+            const i = value.value.indexOf(val)
+
+            if (i >= 0) {
+                value.value.splice(i, 1)
+            } else {
+                value.value.push(val)
+            }
+        } else {
+            value.value = [val]
+        }
+
+        const v = props.multiple ? value.value : value.value[0]
+
+        emit("update:modelValue", v)
+        emit("change", v)
+    }
+
+    // 关键字
+    const keys = computed(() => {
+        return deepMerge({ label: "label", value: "value", children: "children" }, props.keys)
+    })
+
+    // 获取key
+    function getKey(key: string, value: ClTree.Item) {
+        return value[keys.value[key]]
+    }
+
+    // 显示内容
+    const label = computed(() => {
+        const t: string[] = []
+
+        function deep(arr: ClTree.Item[]) {
+            arr.forEach((e) => {
+                if (value.value.includes(getKey("value", e))) {
+                    t.push(getKey("label", e))
+                }
+
+                if (getKey("children", e)) {
+                    deep(getKey("children", e))
+                }
+            })
+        }
+
+        deep(props.data)
+
+        return t.join("、")
+    })
+
+    // 数据
+    const data = ref<ClTree.Item[]>([])
+
+    // 没有子集
+    const noChildren = computed(() => {
+        return !data.value.find((e) => e.children)
+    })
+
+    // 格式化数据
+    function getData(val: any[]) {
+        const d = cloneDeep(val)
+
+        function deep(arr: ClTree.Item[], p?: ClTree.Item) {
+            arr.forEach((e) => {
+                // 默认值展开
+                if (props.autoExpand && value.value.includes(getKey("value", e))) {
+                    if (p) {
+                        p.isExpand = true
+                    }
+                }
+
+                if (getKey("children", e)) {
+                    // 默认全部展开
+                    if (props.defaultExpandAll) {
+                        e.isExpand = true
+                    }
+
+                    deep(getKey("children", e), e)
+
+                    if (e?.isExpand) {
+                        if (p) {
+                            p.isExpand = true
+                        }
+                    }
+                }
+            })
+        }
+
+        deep(d)
+
+        data.value = d
+    }
+
+    // 监听数据
+    watch(() => props.data, getData, {
+        immediate: true
+    })
+
+    return {
+        value,
+        updateValue,
+        keys,
+        getKey,
+        label,
+        data,
+        noChildren
+    }
+}
diff --git a/uni_modules/cool-ui/components/cl-upload/cl-upload.vue b/uni_modules/cool-ui/components/cl-upload/cl-upload.vue
new file mode 100644
index 0000000..ef0c416
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-upload/cl-upload.vue
@@ -0,0 +1,345 @@
+<template>
+	<view
+		class="cl-upload-list"
+		:class="[
+			{
+				'is-disabled': isDisabled,
+			},
+		]"
+	>
+		<!-- 上传列表 -->
+		<view
+			class="cl-upload"
+			v-for="(item, index) in list"
+			:key="item.uid"
+			:style="{
+				height: parseRpx(size[0]),
+				width: parseRpx(size[1]),
+			}"
+			@tap="choose(index)"
+		>
+			<!-- 图片 -->
+			<image class="cl-upload__target" v-show="item.url" :src="item.url" :mode="imageMode" />
+
+			<!-- 移除 -->
+			<text
+				class="cl-upload__remove cl-icon-toast-error"
+				@tap.stop="remove(index)"
+				v-if="!isDisabled"
+			></text>
+
+			<!-- 进度 -->
+			<view class="cl-upload__progress" v-if="item.progress < 100">
+				<cl-progress :value="item.progress" :show-text="false"></cl-progress>
+			</view>
+		</view>
+
+		<!-- 添加按钮 -->
+		<view
+			class="cl-upload"
+			:style="{
+				height: parseRpx(size[0]),
+				width: parseRpx(size[1]),
+			}"
+			@tap="choose()"
+			v-if="isAppend"
+		>
+			<slot>
+				<view class="cl-upload__demo">
+					<text class="cl-icon-camera-fill"></text>
+					<text class="text" v-if="text">{{ text }}</text>
+				</view>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script lang="ts">
+import { type PropType, computed, defineComponent, ref, watch } from "vue";
+import { parseRpx, uuid } from "/@/cool/utils";
+import { isArray } from "lodash-es";
+import { upload } from "/@/cool";
+import { useForm } from "../../hooks";
+
+export default defineComponent({
+	name: "cl-upload",
+
+	props: {
+		// 绑定值
+		modelValue: [String, Array],
+		// 文本
+		text: {
+			type: String,
+			default: "上传/拍摄",
+		},
+		// 压缩方式
+		sizeType: {
+			type: [String, Array] as PropType<string[] | string>,
+			default: () => ["original", "compressed"],
+		},
+		// 选择方式
+		sourceType: {
+			type: Array as PropType<string[]>,
+			default: () => ["album", "camera"],
+		},
+		// 大小
+		size: {
+			type: Array,
+			default: () => [200, 200],
+		},
+		// 裁剪模式
+		imageMode: {
+			type: String,
+			default: "aspectFill",
+		},
+		// 是否多选
+		multiple: Boolean,
+		// 最大允许上传个数
+		limit: {
+			type: Number,
+			default: 9,
+		},
+		// 上传的地址
+		action: String,
+		// 设置上传的请求头部
+		headers: Object,
+		// 上传时附带的额外参数
+		data: Object,
+		// 上传的文件字段名
+		name: {
+			type: String,
+			default: "file",
+		},
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: null,
+		},
+		// 是否自动上传
+		autoUpload: {
+			type: Boolean,
+			default: true,
+		},
+
+		// 演示下测试使用
+		test: Boolean,
+	},
+
+	emits: [
+		"update:modelValue",
+		"change",
+		"exceed",
+		"success",
+		"error",
+		"upload",
+		"remove",
+		"progress",
+	],
+
+	setup(props, { emit }) {
+		const { disabled } = useForm();
+
+		// 图片列表
+		const list = ref<any[]>([]);
+
+		// 下标
+		const index = ref();
+
+		// 是否禁用
+		const isDisabled = computed(() => disabled.value || props.disabled);
+
+		// 监听值
+		watch(
+			() => props.modelValue,
+			(val: any) => {
+				if (val) {
+					const _list = list.value;
+					const arr: string[] = isArray(val) ? val : val.split(",");
+
+					list.value = arr
+						.map((e: string) => {
+							const d = _list.find((a) => a.url == e);
+
+							return {
+								uid: d ? d.uid : uuid(),
+								url: e,
+								progress: 100,
+							};
+						})
+						.filter((e) => e.url);
+				}
+			},
+			{
+				immediate: true,
+			},
+		);
+
+		// 能否追加
+		const isAppend = computed(() => {
+			const n = list.value.length;
+
+			if (isDisabled.value) {
+				return n == 0;
+			} else {
+				return n < (props.multiple ? props.limit : 1);
+			}
+		});
+
+		// 选择
+		function choose(i?: number) {
+			if (isDisabled.value) {
+				return false;
+			}
+
+			index.value = i;
+
+			// 可选数量
+			const count = index.value === undefined ? props.limit - list.value.length : 1;
+
+			// 可选数量验证
+			if (count <= 0) {
+				emit("exceed", list.value);
+				return false;
+			}
+
+			uni.chooseImage({
+				sizeType: props.sizeType,
+				sourceType: props.sourceType,
+				count,
+				success(res: any) {
+					// 文件信息
+					res.tempFiles.forEach(async (file: any) => {
+						// 预览
+						const uid = append(file.path);
+
+						// 成功
+						function done(url: string) {
+							if (url) {
+								update(uid, { url, progress: 100 });
+								emit("success", url, file);
+							} else {
+								fail();
+							}
+						}
+
+						// 失败
+						function fail(message: string | any = "图片地址错误") {
+							emit("error", message);
+							remove(list.value.findIndex((e) => e.uid == uid));
+						}
+
+						if (props.test) {
+							return done(file.path);
+						}
+
+						if (props.action) {
+							const task = uni.uploadFile({
+								url: props.action || "",
+								filePath: file.path,
+								name: props.name,
+								header: props.headers,
+								formData: props.data,
+								success: (res: any) => {
+									const { data } = JSON.parse(res.data);
+									done(data);
+								},
+								fail,
+							});
+
+							task.onProgressUpdate((res) => {
+								emit("progress", res);
+							});
+						} else {
+							if (props.autoUpload) {
+								// 自动上传
+								upload(file, {
+									onProgressUpdate: ({ progress }: any) => {
+										update(uid, { progress });
+									},
+								})
+									.then(done)
+									.catch(fail);
+							} else {
+								// 自定义上传
+								emit("upload", { file, done, fail, update, uid });
+							}
+						}
+					});
+				},
+			});
+		}
+
+		// 添加
+		function append(url: string) {
+			let d: any = {};
+
+			if (index.value !== undefined) {
+				d = list.value[index.value];
+				d.progress = 0;
+				d.url = url;
+			} else {
+				d = {
+					uid: uuid(),
+					url,
+					progress: 0,
+				};
+
+				list.value.push(d);
+			}
+
+			return d.uid;
+		}
+
+		// 更新
+		function update(uid: string, data?: any) {
+			const d = list.value.find((e) => e.uid == uid);
+
+			if (d) {
+				Object.assign(d, data);
+
+				if (d.progress == 100) {
+					change();
+				}
+			}
+		}
+
+		// 移除
+		function remove(index: number) {
+			if (disabled.value) {
+				return false;
+			}
+
+			list.value.splice(index, 1);
+			emit("remove", index);
+			change();
+		}
+
+		// 检测是否上传完成
+		function check() {
+			return list.value.find((e) => e.progress != 100);
+		}
+
+		// 完成
+		function change() {
+			if (!check()) {
+				const v = props.multiple ? list.value.map((e) => e.url) : list.value[0]?.url;
+
+				emit("update:modelValue", v);
+				emit("change", v);
+			}
+		}
+
+		return {
+			isDisabled,
+			list,
+			index,
+			isAppend,
+			check,
+			choose,
+			update,
+			remove,
+			parseRpx,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-video/cl-video.vue b/uni_modules/cool-ui/components/cl-video/cl-video.vue
new file mode 100644
index 0000000..063d8b3
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-video/cl-video.vue
@@ -0,0 +1,208 @@
+<template>
+    <video
+        class="cl-video"
+        id="video"
+        :src="src"
+        :autoplay="autoplay"
+        :loop="loop"
+        :muted="muted"
+        :initial-time="initialTime"
+        :duration="duration"
+        :controls="controls"
+        :danmu-list="danmuList"
+        :danmu-btn="danmuBtn"
+        :enable-danmu="enableDanmu"
+        :page-gesture="pageGesture"
+        :direction="direction"
+        :show-progress="showProgress"
+        :show-fullscreen-btn="showFullscreenBtn"
+        :show-play-btn="showPlayBtn"
+        :show-center-play-btn="showCenterPlayBtn"
+        :show-loading="showLoading"
+        :enable-progress-gesture="enableProgressGesture"
+        :object-fit="objectFit"
+        :poster="poster"
+        :show-mute-btn="showMuteBtn"
+        :title="title"
+        :play-btn-position="playBtnPosition"
+        :enable-play-gesture="enablePlayGesture"
+        :auto-pause-if-navigate="autoPauseIfNavigate"
+        :auto-pause-if-open-native="autoPauseIfOpenNative"
+        :vslide-gesture="vslideGesture"
+        :vslide-gesture-in-fullscreen="vslideGestureInFullscreen"
+        :ad-unit-id="adUnitId"
+        :poster-for-crawler="posterForCrawler"
+        @play="onPlay"
+        @pause="onPause"
+        @ended="onEnded"
+        @timeupdate="onTimeUpdate"
+        @waiting="onWaiting"
+        @error="onError2"
+        @progress="onProgress"
+        @loadedmetadata="onLoadedMetaData"
+        @fullscreenclick="onFullScreenClick"
+        @controlstoggle="onControlStoggle"
+    ></video>
+</template>
+
+<script lang="ts">
+import { defineComponent, getCurrentInstance, watch } from "vue"
+
+export default defineComponent({
+    name: "cl-video",
+
+    props: {
+        src: String,
+        autoplay: Boolean,
+        loop: Boolean,
+        muted: Boolean,
+        initialTime: Number,
+        duration: Number,
+        controls: {
+            type: Boolean,
+            default: true
+        },
+        danmuList: [Object, Array],
+        danmuBtn: Boolean,
+        enableDanmu: Boolean,
+        pageGesture: Boolean,
+        direction: Number,
+        showProgress: {
+            type: Boolean,
+            default: true
+        },
+        showPlayBtn: {
+            type: Boolean,
+            default: true
+        },
+        showCenterPlayBtn: {
+            type: Boolean,
+            default: true
+        },
+        showLoading: {
+            type: Boolean,
+            default: true
+        },
+        showFullscreenBtn: {
+            type: Boolean,
+            default: true
+        },
+        enableProgressGesture: {
+            type: Boolean,
+            default: true
+        },
+        objectFit: {
+            type: String,
+            default: "contain"
+        },
+        poster: String,
+        showMuteBtn: Boolean,
+        title: String,
+        playBtnPosition: {
+            type: String,
+            default: "bottom"
+        },
+        enablePlayGesture: Boolean,
+        autoPauseIfNavigate: {
+            type: Boolean,
+            default: true
+        },
+        autoPauseIfOpenNative: {
+            type: Boolean,
+            default: true
+        },
+        vslideGesture: Boolean,
+        vslideGestureInFullscreen: {
+            type: Boolean,
+            default: true
+        },
+        adUnitId: String,
+        posterForCrawler: String
+    },
+
+    setup(props, { emit }) {
+        const { proxy }: any = getCurrentInstance()
+
+        // 视频对象
+        let ctx: any = null
+
+        watch(
+            () => props.src,
+            () => {
+                ctx = uni.createVideoContext("video", proxy)
+            },
+            {
+                immediate: true
+            }
+        )
+
+        function play() {
+            ctx.play()
+        }
+
+        function pause() {
+            ctx.pause()
+        }
+
+        function stop() {
+            ctx.stop()
+        }
+
+        function onPlay(e: any) {
+            emit("play", e)
+        }
+
+        function onPause(e: any) {
+            emit("pause", e)
+        }
+
+        function onEnded(e: any) {
+            emit("ended", e)
+        }
+
+        function onTimeUpdate(e: any) {
+            emit("timeupdate", e)
+        }
+
+        function onWaiting(e: any) {
+            emit("waiting", e)
+        }
+
+        function onError2(e: any) {
+            emit("error", e)
+        }
+
+        function onProgress(e: any) {
+            emit("progress", e)
+        }
+
+        function onLoadedMetaData(e: any) {
+            emit("loadedmetadata", e)
+        }
+
+        function onFullScreenClick(e: any) {
+            emit("fullscreenclick", e)
+        }
+
+        function onControlStoggle(e: any) {
+            emit("controlstoggle", e)
+        }
+
+        return {
+            play,
+            pause,
+            stop,
+            onPlay,
+            onPause,
+            onEnded,
+            onTimeUpdate,
+            onWaiting,
+            onError2,
+            onProgress,
+            onLoadedMetaData,
+            onFullScreenClick,
+            onControlStoggle
+        }
+    }
+})
+</script>
diff --git a/uni_modules/cool-ui/components/cl-waterfall-column/cl-waterfall-column.vue b/uni_modules/cool-ui/components/cl-waterfall-column/cl-waterfall-column.vue
new file mode 100644
index 0000000..1fe16bd
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-waterfall-column/cl-waterfall-column.vue
@@ -0,0 +1,53 @@
+<template>
+	<view
+		class="cl-waterfall-column"
+		:style="{
+			margin,
+			width,
+		}"
+	>
+		<slot></slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { getCurrentInstance, computed, defineComponent, nextTick } from "vue";
+import { getParent } from "/@/cool/utils";
+
+export default defineComponent({
+	name: "cl-waterfall-column",
+
+	setup() {
+		const { proxy }: any = getCurrentInstance();
+
+		// cl-waterfall
+		const parent = getParent("cl-waterfall", ["column", "gutter"], ["getRect"]);
+
+		// 宽度
+		const width = computed(
+			() => `calc(${100 / parent.value.column}% - ${parent.value.gutter}rpx)`,
+		);
+
+		// 间距
+		const margin = computed(() => `0 ${parent.value.gutter / 2}rpx`);
+
+		function getRect() {
+			return new Promise((resolve) => {
+				nextTick(() => {
+					uni.createSelectorQuery()
+						.in(proxy)
+						.select(`.cl-waterfall-column`)
+						.boundingClientRect(resolve)
+						.exec();
+				});
+			});
+		}
+
+		return {
+			width,
+			margin,
+			getRect,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/components/cl-waterfall/cl-waterfall.vue b/uni_modules/cool-ui/components/cl-waterfall/cl-waterfall.vue
new file mode 100644
index 0000000..e6a46c6
--- /dev/null
+++ b/uni_modules/cool-ui/components/cl-waterfall/cl-waterfall.vue
@@ -0,0 +1,225 @@
+<template>
+	<view class="cl-waterfall" v-if="visible">
+		<!-- 纵向 -->
+		<template v-if="direction === 'vertical'">
+			<view class="cl-waterfall__item" v-for="(item, index) in list" :key="index">
+				<slot :item="item" :index="index"></slot>
+			</view>
+		</template>
+
+		<!-- 横向 -->
+		<template v-else-if="direction === 'horizontal'">
+			<slot :list="list"></slot>
+		</template>
+
+		<!-- 空态 -->
+		<slot name="empty" v-if="showEmpty">
+			<cl-empty />
+		</slot>
+	</view>
+</template>
+
+<script lang="ts">
+import { type PropType, computed, defineComponent, ref, nextTick, getCurrentInstance } from "vue";
+import { flatMap, isEmpty } from "lodash-es";
+import { parseRpx } from "/@/cool/utils";
+import { onShow } from "@dcloudio/uni-app";
+
+export default defineComponent({
+	name: "cl-waterfall",
+
+	props: {
+		// 列的数量
+		column: {
+			type: Number,
+			default: 2,
+		},
+		// 列间隔
+		gutter: {
+			type: Number,
+			default: 20,
+		},
+		// 布局方向
+		direction: {
+			type: String as PropType<"horizontal" | "vertical">,
+			default: "horizontal",
+		},
+		// 匹配值
+		nodeKey: {
+			type: String,
+			default: "id",
+		},
+	},
+
+	setup(props) {
+		const { proxy }: any = getCurrentInstance();
+
+		const visible = ref(true);
+
+		// 列表
+		const list = ref<any[]>([]);
+
+		// 每次追加的数据
+		let data: any[] = [];
+
+		// 列数量
+		const columnCount = computed(() => (props.direction == "vertical" ? props.column : "none"));
+
+		// 列间距
+		const columnGap = computed(() =>
+			props.direction == "vertical" ? parseRpx(props.gutter) : "none",
+		);
+
+		// 是否空
+		const showEmpty = computed(() => {
+			return list.value.filter((e) => !isEmpty(e)).length == 0;
+		});
+
+		// 刷新列表
+		function refresh(data: any[]) {
+			visible.value = false;
+
+			nextTick(() => {
+				visible.value = true;
+
+				switch (props.direction) {
+					case "horizontal":
+						list.value = new Array(props.column).fill(1).map(() => []);
+
+						// 等待 cl-waterfall-column 渲染完成后追加数据
+						nextTick(() => {
+							append(data);
+						});
+						break;
+					case "vertical":
+						list.value = data;
+						break;
+				}
+			});
+		}
+
+		// 计算高度，一个个往列表追加
+		async function append(arr: any[]) {
+			data = arr;
+
+			for (let i = 0; i < arr.length; i++) {
+				const next = async () => {
+					const rects = await getRect();
+
+					// 获取不到的时候阻断掉
+					if (isEmpty(rects) && i !== 0) {
+						return false;
+					}
+
+					// 获取 cl-waterfall-column 的高度，比较后在最小的列中塞入
+					return Promise.all(rects).then((res) => {
+						let colsHeight = res.map((e) => e.height);
+
+						let minH = Math.min(...colsHeight);
+						let index = colsHeight.indexOf(minH);
+
+						if (index < 0) {
+							index = 0;
+						}
+
+						list.value[index]?.push(arr[i]);
+
+						return true;
+					});
+				};
+
+				await next();
+			}
+		}
+
+		// 更新单条数据，根据nodeKey来匹配
+		function update(id: string | number, data: any) {
+			const next = (e: any) => {
+				const d = e[props.nodeKey] === id;
+
+				if (d) {
+					Object.assign(e, data);
+				}
+
+				return Boolean(d);
+			};
+
+			switch (props.direction) {
+				case "horizontal":
+					list.value.find((col) => {
+						return col.find(next);
+					});
+					break;
+				case "vertical":
+					list.value.find(next);
+					break;
+			}
+		}
+
+		// 清空列表
+		function clear() {
+			list.value = [];
+		}
+
+		// 获取列
+		function getRect(): Promise<any> {
+			return new Promise((resolve) => {
+				// #ifdef MP
+				let timer: any = null;
+
+				function fn() {
+					const children: any[] = proxy.$children;
+
+					if (isEmpty(children)) {
+						timer = setTimeout(() => {
+							fn();
+						}, 50);
+					} else {
+						clearTimeout(timer);
+						const arr = children.filter((e) => e.getRect).map((e) => e.getRect());
+						resolve(arr);
+					}
+				}
+
+				fn();
+				// #endif
+
+				// #ifndef MP
+				nextTick(() => {
+					uni.createSelectorQuery()
+						.in(proxy.$root)
+						.selectAll(`.cl-waterfall-column`)
+						.boundingClientRect(resolve)
+						.exec();
+				});
+				// #endif
+			});
+		}
+
+		// 重新布局，在加载中切换页面导致计算错误，返回页面时 onShow 重新计算
+		function doLayout() {
+			// 列空的时候 重新追加数据
+			if (isEmpty(flatMap(list.value)) && !isEmpty(data)) {
+				append(data);
+			}
+		}
+
+		onShow(() => {
+			doLayout();
+		});
+
+		return {
+			visible,
+			list,
+			columnCount,
+			columnGap,
+			refresh,
+			append,
+			update,
+			clear,
+			showEmpty,
+			doLayout,
+		};
+	},
+});
+</script>
diff --git a/uni_modules/cool-ui/config.ts b/uni_modules/cool-ui/config.ts
new file mode 100644
index 0000000..8272466
--- /dev/null
+++ b/uni_modules/cool-ui/config.ts
@@ -0,0 +1,7 @@
+import type { ModuleConfig } from "/@/cool";
+
+export default (): ModuleConfig => {
+	return {
+		description: "ui库",
+	};
+};
diff --git a/uni_modules/cool-ui/data/city-pca.json b/uni_modules/cool-ui/data/city-pca.json
new file mode 100644
index 0000000..e92ae4b
--- /dev/null
+++ b/uni_modules/cool-ui/data/city-pca.json
@@ -0,0 +1 @@
+[{"code":"11","name":"北京市","children":[{"code":"1101","name":"市辖区","children":[{"code":"110101","name":"东城区"},{"code":"110102","name":"西城区"},{"code":"110105","name":"朝阳区"},{"code":"110106","name":"丰台区"},{"code":"110107","name":"石景山区"},{"code":"110108","name":"海淀区"},{"code":"110109","name":"门头沟区"},{"code":"110111","name":"房山区"},{"code":"110112","name":"通州区"},{"code":"110113","name":"顺义区"},{"code":"110114","name":"昌平区"},{"code":"110115","name":"大兴区"},{"code":"110116","name":"怀柔区"},{"code":"110117","name":"平谷区"},{"code":"110118","name":"密云区"},{"code":"110119","name":"延庆区"}]}]},{"code":"12","name":"天津市","children":[{"code":"1201","name":"市辖区","children":[{"code":"120101","name":"和平区"},{"code":"120102","name":"河东区"},{"code":"120103","name":"河西区"},{"code":"120104","name":"南开区"},{"code":"120105","name":"河北区"},{"code":"120106","name":"红桥区"},{"code":"120110","name":"东丽区"},{"code":"120111","name":"西青区"},{"code":"120112","name":"津南区"},{"code":"120113","name":"北辰区"},{"code":"120114","name":"武清区"},{"code":"120115","name":"宝坻区"},{"code":"120116","name":"滨海新区"},{"code":"120117","name":"宁河区"},{"code":"120118","name":"静海区"},{"code":"120119","name":"蓟州区"}]}]},{"code":"13","name":"河北省","children":[{"code":"1301","name":"石家庄市","children":[{"code":"130102","name":"长安区"},{"code":"130104","name":"桥西区"},{"code":"130105","name":"新华区"},{"code":"130107","name":"井陉矿区"},{"code":"130108","name":"裕华区"},{"code":"130109","name":"藁城区"},{"code":"130110","name":"鹿泉区"},{"code":"130111","name":"栾城区"},{"code":"130121","name":"井陉县"},{"code":"130123","name":"正定县"},{"code":"130125","name":"行唐县"},{"code":"130126","name":"灵寿县"},{"code":"130127","name":"高邑县"},{"code":"130128","name":"深泽县"},{"code":"130129","name":"赞皇县"},{"code":"130130","name":"无极县"},{"code":"130131","name":"平山县"},{"code":"130132","name":"元氏县"},{"code":"130133","name":"赵县"},{"code":"130171","name":"石家庄高新技术产业开发区"},{"code":"130172","name":"石家庄循环化工园区"},{"code":"130181","name":"辛集市"},{"code":"130183","name":"晋州市"},{"code":"130184","name":"新乐市"}]},{"code":"1302","name":"唐山市","children":[{"code":"130202","name":"路南区"},{"code":"130203","name":"路北区"},{"code":"130204","name":"古冶区"},{"code":"130205","name":"开平区"},{"code":"130207","name":"丰南区"},{"code":"130208","name":"丰润区"},{"code":"130209","name":"曹妃甸区"},{"code":"130224","name":"滦南县"},{"code":"130225","name":"乐亭县"},{"code":"130227","name":"迁西县"},{"code":"130229","name":"玉田县"},{"code":"130271","name":"河北唐山芦台经济开发区"},{"code":"130272","name":"唐山市汉沽管理区"},{"code":"130273","name":"唐山高新技术产业开发区"},{"code":"130274","name":"河北唐山海港经济开发区"},{"code":"130281","name":"遵化市"},{"code":"130283","name":"迁安市"},{"code":"130284","name":"滦州市"}]},{"code":"1303","name":"秦皇岛市","children":[{"code":"130302","name":"海港区"},{"code":"130303","name":"山海关区"},{"code":"130304","name":"北戴河区"},{"code":"130306","name":"抚宁区"},{"code":"130321","name":"青龙满族自治县"},{"code":"130322","name":"昌黎县"},{"code":"130324","name":"卢龙县"},{"code":"130371","name":"秦皇岛市经济技术开发区"},{"code":"130372","name":"北戴河新区"}]},{"code":"1304","name":"邯郸市","children":[{"code":"130402","name":"邯山区"},{"code":"130403","name":"丛台区"},{"code":"130404","name":"复兴区"},{"code":"130406","name":"峰峰矿区"},{"code":"130407","name":"肥乡区"},{"code":"130408","name":"永年区"},{"code":"130423","name":"临漳县"},{"code":"130424","name":"成安县"},{"code":"130425","name":"大名县"},{"code":"130426","name":"涉县"},{"code":"130427","name":"磁县"},{"code":"130430","name":"邱县"},{"code":"130431","name":"鸡泽县"},{"code":"130432","name":"广平县"},{"code":"130433","name":"馆陶县"},{"code":"130434","name":"魏县"},{"code":"130435","name":"曲周县"},{"code":"130471","name":"邯郸经济技术开发区"},{"code":"130473","name":"邯郸冀南新区"},{"code":"130481","name":"武安市"}]},{"code":"1305","name":"邢台市","children":[{"code":"130502","name":"襄都区"},{"code":"130503","name":"信都区"},{"code":"130505","name":"任泽区"},{"code":"130506","name":"南和区"},{"code":"130522","name":"临城县"},{"code":"130523","name":"内丘县"},{"code":"130524","name":"柏乡县"},{"code":"130525","name":"隆尧县"},{"code":"130528","name":"宁晋县"},{"code":"130529","name":"巨鹿县"},{"code":"130530","name":"新河县"},{"code":"130531","name":"广宗县"},{"code":"130532","name":"平乡县"},{"code":"130533","name":"威县"},{"code":"130534","name":"清河县"},{"code":"130535","name":"临西县"},{"code":"130571","name":"河北邢台经济开发区"},{"code":"130581","name":"南宫市"},{"code":"130582","name":"沙河市"}]},{"code":"1306","name":"保定市","children":[{"code":"130602","name":"竞秀区"},{"code":"130606","name":"莲池区"},{"code":"130607","name":"满城区"},{"code":"130608","name":"清苑区"},{"code":"130609","name":"徐水区"},{"code":"130623","name":"涞水县"},{"code":"130624","name":"阜平县"},{"code":"130626","name":"定兴县"},{"code":"130627","name":"唐县"},{"code":"130628","name":"高阳县"},{"code":"130629","name":"容城县"},{"code":"130630","name":"涞源县"},{"code":"130631","name":"望都县"},{"code":"130632","name":"安新县"},{"code":"130633","name":"易县"},{"code":"130634","name":"曲阳县"},{"code":"130635","name":"蠡县"},{"code":"130636","name":"顺平县"},{"code":"130637","name":"博野县"},{"code":"130638","name":"雄县"},{"code":"130671","name":"保定高新技术产业开发区"},{"code":"130672","name":"保定白沟新城"},{"code":"130681","name":"涿州市"},{"code":"130682","name":"定州市"},{"code":"130683","name":"安国市"},{"code":"130684","name":"高碑店市"}]},{"code":"1307","name":"张家口市","children":[{"code":"130702","name":"桥东区"},{"code":"130703","name":"桥西区"},{"code":"130705","name":"宣化区"},{"code":"130706","name":"下花园区"},{"code":"130708","name":"万全区"},{"code":"130709","name":"崇礼区"},{"code":"130722","name":"张北县"},{"code":"130723","name":"康保县"},{"code":"130724","name":"沽源县"},{"code":"130725","name":"尚义县"},{"code":"130726","name":"蔚县"},{"code":"130727","name":"阳原县"},{"code":"130728","name":"怀安县"},{"code":"130730","name":"怀来县"},{"code":"130731","name":"涿鹿县"},{"code":"130732","name":"赤城县"},{"code":"130771","name":"张家口经济开发区"},{"code":"130772","name":"张家口市察北管理区"},{"code":"130773","name":"张家口市塞北管理区"}]},{"code":"1308","name":"承德市","children":[{"code":"130802","name":"双桥区"},{"code":"130803","name":"双滦区"},{"code":"130804","name":"鹰手营子矿区"},{"code":"130821","name":"承德县"},{"code":"130822","name":"兴隆县"},{"code":"130824","name":"滦平县"},{"code":"130825","name":"隆化县"},{"code":"130826","name":"丰宁满族自治县"},{"code":"130827","name":"宽城满族自治县"},{"code":"130828","name":"围场满族蒙古族自治县"},{"code":"130871","name":"承德高新技术产业开发区"},{"code":"130881","name":"平泉市"}]},{"code":"1309","name":"沧州市","children":[{"code":"130902","name":"新华区"},{"code":"130903","name":"运河区"},{"code":"130921","name":"沧县"},{"code":"130922","name":"青县"},{"code":"130923","name":"东光县"},{"code":"130924","name":"海兴县"},{"code":"130925","name":"盐山县"},{"code":"130926","name":"肃宁县"},{"code":"130927","name":"南皮县"},{"code":"130928","name":"吴桥县"},{"code":"130929","name":"献县"},{"code":"130930","name":"孟村回族自治县"},{"code":"130971","name":"河北沧州经济开发区"},{"code":"130972","name":"沧州高新技术产业开发区"},{"code":"130973","name":"沧州渤海新区"},{"code":"130981","name":"泊头市"},{"code":"130982","name":"任丘市"},{"code":"130983","name":"黄骅市"},{"code":"130984","name":"河间市"}]},{"code":"1310","name":"廊坊市","children":[{"code":"131002","name":"安次区"},{"code":"131003","name":"广阳区"},{"code":"131022","name":"固安县"},{"code":"131023","name":"永清县"},{"code":"131024","name":"香河县"},{"code":"131025","name":"大城县"},{"code":"131026","name":"文安县"},{"code":"131028","name":"大厂回族自治县"},{"code":"131071","name":"廊坊经济技术开发区"},{"code":"131081","name":"霸州市"},{"code":"131082","name":"三河市"}]},{"code":"1311","name":"衡水市","children":[{"code":"131102","name":"桃城区"},{"code":"131103","name":"冀州区"},{"code":"131121","name":"枣强县"},{"code":"131122","name":"武邑县"},{"code":"131123","name":"武强县"},{"code":"131124","name":"饶阳县"},{"code":"131125","name":"安平县"},{"code":"131126","name":"故城县"},{"code":"131127","name":"景县"},{"code":"131128","name":"阜城县"},{"code":"131171","name":"河北衡水高新技术产业开发区"},{"code":"131172","name":"衡水滨湖新区"},{"code":"131182","name":"深州市"}]}]},{"code":"14","name":"山西省","children":[{"code":"1401","name":"太原市","children":[{"code":"140105","name":"小店区"},{"code":"140106","name":"迎泽区"},{"code":"140107","name":"杏花岭区"},{"code":"140108","name":"尖草坪区"},{"code":"140109","name":"万柏林区"},{"code":"140110","name":"晋源区"},{"code":"140121","name":"清徐县"},{"code":"140122","name":"阳曲县"},{"code":"140123","name":"娄烦县"},{"code":"140171","name":"山西转型综合改革示范区"},{"code":"140181","name":"古交市"}]},{"code":"1402","name":"大同市","children":[{"code":"140212","name":"新荣区"},{"code":"140213","name":"平城区"},{"code":"140214","name":"云冈区"},{"code":"140215","name":"云州区"},{"code":"140221","name":"阳高县"},{"code":"140222","name":"天镇县"},{"code":"140223","name":"广灵县"},{"code":"140224","name":"灵丘县"},{"code":"140225","name":"浑源县"},{"code":"140226","name":"左云县"},{"code":"140271","name":"山西大同经济开发区"}]},{"code":"1403","name":"阳泉市","children":[{"code":"140302","name":"城区"},{"code":"140303","name":"矿区"},{"code":"140311","name":"郊区"},{"code":"140321","name":"平定县"},{"code":"140322","name":"盂县"}]},{"code":"1404","name":"长治市","children":[{"code":"140403","name":"潞州区"},{"code":"140404","name":"上党区"},{"code":"140405","name":"屯留区"},{"code":"140406","name":"潞城区"},{"code":"140423","name":"襄垣县"},{"code":"140425","name":"平顺县"},{"code":"140426","name":"黎城县"},{"code":"140427","name":"壶关县"},{"code":"140428","name":"长子县"},{"code":"140429","name":"武乡县"},{"code":"140430","name":"沁县"},{"code":"140431","name":"沁源县"},{"code":"140471","name":"山西长治高新技术产业园区"}]},{"code":"1405","name":"晋城市","children":[{"code":"140502","name":"城区"},{"code":"140521","name":"沁水县"},{"code":"140522","name":"阳城县"},{"code":"140524","name":"陵川县"},{"code":"140525","name":"泽州县"},{"code":"140581","name":"高平市"}]},{"code":"1406","name":"朔州市","children":[{"code":"140602","name":"朔城区"},{"code":"140603","name":"平鲁区"},{"code":"140621","name":"山阴县"},{"code":"140622","name":"应县"},{"code":"140623","name":"右玉县"},{"code":"140671","name":"山西朔州经济开发区"},{"code":"140681","name":"怀仁市"}]},{"code":"1407","name":"晋中市","children":[{"code":"140702","name":"榆次区"},{"code":"140703","name":"太谷区"},{"code":"140721","name":"榆社县"},{"code":"140722","name":"左权县"},{"code":"140723","name":"和顺县"},{"code":"140724","name":"昔阳县"},{"code":"140725","name":"寿阳县"},{"code":"140727","name":"祁县"},{"code":"140728","name":"平遥县"},{"code":"140729","name":"灵石县"},{"code":"140781","name":"介休市"}]},{"code":"1408","name":"运城市","children":[{"code":"140802","name":"盐湖区"},{"code":"140821","name":"临猗县"},{"code":"140822","name":"万荣县"},{"code":"140823","name":"闻喜县"},{"code":"140824","name":"稷山县"},{"code":"140825","name":"新绛县"},{"code":"140826","name":"绛县"},{"code":"140827","name":"垣曲县"},{"code":"140828","name":"夏县"},{"code":"140829","name":"平陆县"},{"code":"140830","name":"芮城县"},{"code":"140881","name":"永济市"},{"code":"140882","name":"河津市"}]},{"code":"1409","name":"忻州市","children":[{"code":"140902","name":"忻府区"},{"code":"140921","name":"定襄县"},{"code":"140922","name":"五台县"},{"code":"140923","name":"代县"},{"code":"140924","name":"繁峙县"},{"code":"140925","name":"宁武县"},{"code":"140926","name":"静乐县"},{"code":"140927","name":"神池县"},{"code":"140928","name":"五寨县"},{"code":"140929","name":"岢岚县"},{"code":"140930","name":"河曲县"},{"code":"140931","name":"保德县"},{"code":"140932","name":"偏关县"},{"code":"140971","name":"五台山风景名胜区"},{"code":"140981","name":"原平市"}]},{"code":"1410","name":"临汾市","children":[{"code":"141002","name":"尧都区"},{"code":"141021","name":"曲沃县"},{"code":"141022","name":"翼城县"},{"code":"141023","name":"襄汾县"},{"code":"141024","name":"洪洞县"},{"code":"141025","name":"古县"},{"code":"141026","name":"安泽县"},{"code":"141027","name":"浮山县"},{"code":"141028","name":"吉县"},{"code":"141029","name":"乡宁县"},{"code":"141030","name":"大宁县"},{"code":"141031","name":"隰县"},{"code":"141032","name":"永和县"},{"code":"141033","name":"蒲县"},{"code":"141034","name":"汾西县"},{"code":"141081","name":"侯马市"},{"code":"141082","name":"霍州市"}]},{"code":"1411","name":"吕梁市","children":[{"code":"141102","name":"离石区"},{"code":"141121","name":"文水县"},{"code":"141122","name":"交城县"},{"code":"141123","name":"兴县"},{"code":"141124","name":"临县"},{"code":"141125","name":"柳林县"},{"code":"141126","name":"石楼县"},{"code":"141127","name":"岚县"},{"code":"141128","name":"方山县"},{"code":"141129","name":"中阳县"},{"code":"141130","name":"交口县"},{"code":"141181","name":"孝义市"},{"code":"141182","name":"汾阳市"}]}]},{"code":"15","name":"内蒙古自治区","children":[{"code":"1501","name":"呼和浩特市","children":[{"code":"150102","name":"新城区"},{"code":"150103","name":"回民区"},{"code":"150104","name":"玉泉区"},{"code":"150105","name":"赛罕区"},{"code":"150121","name":"土默特左旗"},{"code":"150122","name":"托克托县"},{"code":"150123","name":"和林格尔县"},{"code":"150124","name":"清水河县"},{"code":"150125","name":"武川县"},{"code":"150172","name":"呼和浩特经济技术开发区"}]},{"code":"1502","name":"包头市","children":[{"code":"150202","name":"东河区"},{"code":"150203","name":"昆都仑区"},{"code":"150204","name":"青山区"},{"code":"150205","name":"石拐区"},{"code":"150206","name":"白云鄂博矿区"},{"code":"150207","name":"九原区"},{"code":"150221","name":"土默特右旗"},{"code":"150222","name":"固阳县"},{"code":"150223","name":"达尔罕茂明安联合旗"},{"code":"150271","name":"包头稀土高新技术产业开发区"}]},{"code":"1503","name":"乌海市","children":[{"code":"150302","name":"海勃湾区"},{"code":"150303","name":"海南区"},{"code":"150304","name":"乌达区"}]},{"code":"1504","name":"赤峰市","children":[{"code":"150402","name":"红山区"},{"code":"150403","name":"元宝山区"},{"code":"150404","name":"松山区"},{"code":"150421","name":"阿鲁科尔沁旗"},{"code":"150422","name":"巴林左旗"},{"code":"150423","name":"巴林右旗"},{"code":"150424","name":"林西县"},{"code":"150425","name":"克什克腾旗"},{"code":"150426","name":"翁牛特旗"},{"code":"150428","name":"喀喇沁旗"},{"code":"150429","name":"宁城县"},{"code":"150430","name":"敖汉旗"}]},{"code":"1505","name":"通辽市","children":[{"code":"150502","name":"科尔沁区"},{"code":"150521","name":"科尔沁左翼中旗"},{"code":"150522","name":"科尔沁左翼后旗"},{"code":"150523","name":"开鲁县"},{"code":"150524","name":"库伦旗"},{"code":"150525","name":"奈曼旗"},{"code":"150526","name":"扎鲁特旗"},{"code":"150571","name":"通辽经济技术开发区"},{"code":"150581","name":"霍林郭勒市"}]},{"code":"1506","name":"鄂尔多斯市","children":[{"code":"150602","name":"东胜区"},{"code":"150603","name":"康巴什区"},{"code":"150621","name":"达拉特旗"},{"code":"150622","name":"准格尔旗"},{"code":"150623","name":"鄂托克前旗"},{"code":"150624","name":"鄂托克旗"},{"code":"150625","name":"杭锦旗"},{"code":"150626","name":"乌审旗"},{"code":"150627","name":"伊金霍洛旗"}]},{"code":"1507","name":"呼伦贝尔市","children":[{"code":"150702","name":"海拉尔区"},{"code":"150703","name":"扎赉诺尔区"},{"code":"150721","name":"阿荣旗"},{"code":"150722","name":"莫力达瓦达斡尔族自治旗"},{"code":"150723","name":"鄂伦春自治旗"},{"code":"150724","name":"鄂温克族自治旗"},{"code":"150725","name":"陈巴尔虎旗"},{"code":"150726","name":"新巴尔虎左旗"},{"code":"150727","name":"新巴尔虎右旗"},{"code":"150781","name":"满洲里市"},{"code":"150782","name":"牙克石市"},{"code":"150783","name":"扎兰屯市"},{"code":"150784","name":"额尔古纳市"},{"code":"150785","name":"根河市"}]},{"code":"1508","name":"巴彦淖尔市","children":[{"code":"150802","name":"临河区"},{"code":"150821","name":"五原县"},{"code":"150822","name":"磴口县"},{"code":"150823","name":"乌拉特前旗"},{"code":"150824","name":"乌拉特中旗"},{"code":"150825","name":"乌拉特后旗"},{"code":"150826","name":"杭锦后旗"}]},{"code":"1509","name":"乌兰察布市","children":[{"code":"150902","name":"集宁区"},{"code":"150921","name":"卓资县"},{"code":"150922","name":"化德县"},{"code":"150923","name":"商都县"},{"code":"150924","name":"兴和县"},{"code":"150925","name":"凉城县"},{"code":"150926","name":"察哈尔右翼前旗"},{"code":"150927","name":"察哈尔右翼中旗"},{"code":"150928","name":"察哈尔右翼后旗"},{"code":"150929","name":"四子王旗"},{"code":"150981","name":"丰镇市"}]},{"code":"1522","name":"兴安盟","children":[{"code":"152201","name":"乌兰浩特市"},{"code":"152202","name":"阿尔山市"},{"code":"152221","name":"科尔沁右翼前旗"},{"code":"152222","name":"科尔沁右翼中旗"},{"code":"152223","name":"扎赉特旗"},{"code":"152224","name":"突泉县"}]},{"code":"1525","name":"锡林郭勒盟","children":[{"code":"152501","name":"二连浩特市"},{"code":"152502","name":"锡林浩特市"},{"code":"152522","name":"阿巴嘎旗"},{"code":"152523","name":"苏尼特左旗"},{"code":"152524","name":"苏尼特右旗"},{"code":"152525","name":"东乌珠穆沁旗"},{"code":"152526","name":"西乌珠穆沁旗"},{"code":"152527","name":"太仆寺旗"},{"code":"152528","name":"镶黄旗"},{"code":"152529","name":"正镶白旗"},{"code":"152530","name":"正蓝旗"},{"code":"152531","name":"多伦县"},{"code":"152571","name":"乌拉盖管委会"}]},{"code":"1529","name":"阿拉善盟","children":[{"code":"152921","name":"阿拉善左旗"},{"code":"152922","name":"阿拉善右旗"},{"code":"152923","name":"额济纳旗"},{"code":"152971","name":"内蒙古阿拉善高新技术产业开发区"}]}]},{"code":"21","name":"辽宁省","children":[{"code":"2101","name":"沈阳市","children":[{"code":"210102","name":"和平区"},{"code":"210103","name":"沈河区"},{"code":"210104","name":"大东区"},{"code":"210105","name":"皇姑区"},{"code":"210106","name":"铁西区"},{"code":"210111","name":"苏家屯区"},{"code":"210112","name":"浑南区"},{"code":"210113","name":"沈北新区"},{"code":"210114","name":"于洪区"},{"code":"210115","name":"辽中区"},{"code":"210123","name":"康平县"},{"code":"210124","name":"法库县"},{"code":"210181","name":"新民市"}]},{"code":"2102","name":"大连市","children":[{"code":"210202","name":"中山区"},{"code":"210203","name":"西岗区"},{"code":"210204","name":"沙河口区"},{"code":"210211","name":"甘井子区"},{"code":"210212","name":"旅顺口区"},{"code":"210213","name":"金州区"},{"code":"210214","name":"普兰店区"},{"code":"210224","name":"长海县"},{"code":"210281","name":"瓦房店市"},{"code":"210283","name":"庄河市"}]},{"code":"2103","name":"鞍山市","children":[{"code":"210302","name":"铁东区"},{"code":"210303","name":"铁西区"},{"code":"210304","name":"立山区"},{"code":"210311","name":"千山区"},{"code":"210321","name":"台安县"},{"code":"210323","name":"岫岩满族自治县"},{"code":"210381","name":"海城市"}]},{"code":"2104","name":"抚顺市","children":[{"code":"210402","name":"新抚区"},{"code":"210403","name":"东洲区"},{"code":"210404","name":"望花区"},{"code":"210411","name":"顺城区"},{"code":"210421","name":"抚顺县"},{"code":"210422","name":"新宾满族自治县"},{"code":"210423","name":"清原满族自治县"}]},{"code":"2105","name":"本溪市","children":[{"code":"210502","name":"平山区"},{"code":"210503","name":"溪湖区"},{"code":"210504","name":"明山区"},{"code":"210505","name":"南芬区"},{"code":"210521","name":"本溪满族自治县"},{"code":"210522","name":"桓仁满族自治县"}]},{"code":"2106","name":"丹东市","children":[{"code":"210602","name":"元宝区"},{"code":"210603","name":"振兴区"},{"code":"210604","name":"振安区"},{"code":"210624","name":"宽甸满族自治县"},{"code":"210681","name":"东港市"},{"code":"210682","name":"凤城市"}]},{"code":"2107","name":"锦州市","children":[{"code":"210702","name":"古塔区"},{"code":"210703","name":"凌河区"},{"code":"210711","name":"太和区"},{"code":"210726","name":"黑山县"},{"code":"210727","name":"义县"},{"code":"210781","name":"凌海市"},{"code":"210782","name":"北镇市"}]},{"code":"2108","name":"营口市","children":[{"code":"210802","name":"站前区"},{"code":"210803","name":"西市区"},{"code":"210804","name":"鲅鱼圈区"},{"code":"210811","name":"老边区"},{"code":"210881","name":"盖州市"},{"code":"210882","name":"大石桥市"}]},{"code":"2109","name":"阜新市","children":[{"code":"210902","name":"海州区"},{"code":"210903","name":"新邱区"},{"code":"210904","name":"太平区"},{"code":"210905","name":"清河门区"},{"code":"210911","name":"细河区"},{"code":"210921","name":"阜新蒙古族自治县"},{"code":"210922","name":"彰武县"}]},{"code":"2110","name":"辽阳市","children":[{"code":"211002","name":"白塔区"},{"code":"211003","name":"文圣区"},{"code":"211004","name":"宏伟区"},{"code":"211005","name":"弓长岭区"},{"code":"211011","name":"太子河区"},{"code":"211021","name":"辽阳县"},{"code":"211081","name":"灯塔市"}]},{"code":"2111","name":"盘锦市","children":[{"code":"211102","name":"双台子区"},{"code":"211103","name":"兴隆台区"},{"code":"211104","name":"大洼区"},{"code":"211122","name":"盘山县"}]},{"code":"2112","name":"铁岭市","children":[{"code":"211202","name":"银州区"},{"code":"211204","name":"清河区"},{"code":"211221","name":"铁岭县"},{"code":"211223","name":"西丰县"},{"code":"211224","name":"昌图县"},{"code":"211281","name":"调兵山市"},{"code":"211282","name":"开原市"}]},{"code":"2113","name":"朝阳市","children":[{"code":"211302","name":"双塔区"},{"code":"211303","name":"龙城区"},{"code":"211321","name":"朝阳县"},{"code":"211322","name":"建平县"},{"code":"211324","name":"喀喇沁左翼蒙古族自治县"},{"code":"211381","name":"北票市"},{"code":"211382","name":"凌源市"}]},{"code":"2114","name":"葫芦岛市","children":[{"code":"211402","name":"连山区"},{"code":"211403","name":"龙港区"},{"code":"211404","name":"南票区"},{"code":"211421","name":"绥中县"},{"code":"211422","name":"建昌县"},{"code":"211481","name":"兴城市"}]}]},{"code":"22","name":"吉林省","children":[{"code":"2201","name":"长春市","children":[{"code":"220102","name":"南关区"},{"code":"220103","name":"宽城区"},{"code":"220104","name":"朝阳区"},{"code":"220105","name":"二道区"},{"code":"220106","name":"绿园区"},{"code":"220112","name":"双阳区"},{"code":"220113","name":"九台区"},{"code":"220122","name":"农安县"},{"code":"220171","name":"长春经济技术开发区"},{"code":"220172","name":"长春净月高新技术产业开发区"},{"code":"220173","name":"长春高新技术产业开发区"},{"code":"220174","name":"长春汽车经济技术开发区"},{"code":"220182","name":"榆树市"},{"code":"220183","name":"德惠市"},{"code":"220184","name":"公主岭市"}]},{"code":"2202","name":"吉林市","children":[{"code":"220202","name":"昌邑区"},{"code":"220203","name":"龙潭区"},{"code":"220204","name":"船营区"},{"code":"220211","name":"丰满区"},{"code":"220221","name":"永吉县"},{"code":"220271","name":"吉林经济开发区"},{"code":"220272","name":"吉林高新技术产业开发区"},{"code":"220273","name":"吉林中国新加坡食品区"},{"code":"220281","name":"蛟河市"},{"code":"220282","name":"桦甸市"},{"code":"220283","name":"舒兰市"},{"code":"220284","name":"磐石市"}]},{"code":"2203","name":"四平市","children":[{"code":"220302","name":"铁西区"},{"code":"220303","name":"铁东区"},{"code":"220322","name":"梨树县"},{"code":"220323","name":"伊通满族自治县"},{"code":"220382","name":"双辽市"}]},{"code":"2204","name":"辽源市","children":[{"code":"220402","name":"龙山区"},{"code":"220403","name":"西安区"},{"code":"220421","name":"东丰县"},{"code":"220422","name":"东辽县"}]},{"code":"2205","name":"通化市","children":[{"code":"220502","name":"东昌区"},{"code":"220503","name":"二道江区"},{"code":"220521","name":"通化县"},{"code":"220523","name":"辉南县"},{"code":"220524","name":"柳河县"},{"code":"220581","name":"梅河口市"},{"code":"220582","name":"集安市"}]},{"code":"2206","name":"白山市","children":[{"code":"220602","name":"浑江区"},{"code":"220605","name":"江源区"},{"code":"220621","name":"抚松县"},{"code":"220622","name":"靖宇县"},{"code":"220623","name":"长白朝鲜族自治县"},{"code":"220681","name":"临江市"}]},{"code":"2207","name":"松原市","children":[{"code":"220702","name":"宁江区"},{"code":"220721","name":"前郭尔罗斯蒙古族自治县"},{"code":"220722","name":"长岭县"},{"code":"220723","name":"乾安县"},{"code":"220771","name":"吉林松原经济开发区"},{"code":"220781","name":"扶余市"}]},{"code":"2208","name":"白城市","children":[{"code":"220802","name":"洮北区"},{"code":"220821","name":"镇赉县"},{"code":"220822","name":"通榆县"},{"code":"220871","name":"吉林白城经济开发区"},{"code":"220881","name":"洮南市"},{"code":"220882","name":"大安市"}]},{"code":"2224","name":"延边朝鲜族自治州","children":[{"code":"222401","name":"延吉市"},{"code":"222402","name":"图们市"},{"code":"222403","name":"敦化市"},{"code":"222404","name":"珲春市"},{"code":"222405","name":"龙井市"},{"code":"222406","name":"和龙市"},{"code":"222424","name":"汪清县"},{"code":"222426","name":"安图县"}]}]},{"code":"23","name":"黑龙江省","children":[{"code":"2301","name":"哈尔滨市","children":[{"code":"230102","name":"道里区"},{"code":"230103","name":"南岗区"},{"code":"230104","name":"道外区"},{"code":"230108","name":"平房区"},{"code":"230109","name":"松北区"},{"code":"230110","name":"香坊区"},{"code":"230111","name":"呼兰区"},{"code":"230112","name":"阿城区"},{"code":"230113","name":"双城区"},{"code":"230123","name":"依兰县"},{"code":"230124","name":"方正县"},{"code":"230125","name":"宾县"},{"code":"230126","name":"巴彦县"},{"code":"230127","name":"木兰县"},{"code":"230128","name":"通河县"},{"code":"230129","name":"延寿县"},{"code":"230183","name":"尚志市"},{"code":"230184","name":"五常市"}]},{"code":"2302","name":"齐齐哈尔市","children":[{"code":"230202","name":"龙沙区"},{"code":"230203","name":"建华区"},{"code":"230204","name":"铁锋区"},{"code":"230205","name":"昂昂溪区"},{"code":"230206","name":"富拉尔基区"},{"code":"230207","name":"碾子山区"},{"code":"230208","name":"梅里斯达斡尔族区"},{"code":"230221","name":"龙江县"},{"code":"230223","name":"依安县"},{"code":"230224","name":"泰来县"},{"code":"230225","name":"甘南县"},{"code":"230227","name":"富裕县"},{"code":"230229","name":"克山县"},{"code":"230230","name":"克东县"},{"code":"230231","name":"拜泉县"},{"code":"230281","name":"讷河市"}]},{"code":"2303","name":"鸡西市","children":[{"code":"230302","name":"鸡冠区"},{"code":"230303","name":"恒山区"},{"code":"230304","name":"滴道区"},{"code":"230305","name":"梨树区"},{"code":"230306","name":"城子河区"},{"code":"230307","name":"麻山区"},{"code":"230321","name":"鸡东县"},{"code":"230381","name":"虎林市"},{"code":"230382","name":"密山市"}]},{"code":"2304","name":"鹤岗市","children":[{"code":"230402","name":"向阳区"},{"code":"230403","name":"工农区"},{"code":"230404","name":"南山区"},{"code":"230405","name":"兴安区"},{"code":"230406","name":"东山区"},{"code":"230407","name":"兴山区"},{"code":"230421","name":"萝北县"},{"code":"230422","name":"绥滨县"}]},{"code":"2305","name":"双鸭山市","children":[{"code":"230502","name":"尖山区"},{"code":"230503","name":"岭东区"},{"code":"230505","name":"四方台区"},{"code":"230506","name":"宝山区"},{"code":"230521","name":"集贤县"},{"code":"230522","name":"友谊县"},{"code":"230523","name":"宝清县"},{"code":"230524","name":"饶河县"}]},{"code":"2306","name":"大庆市","children":[{"code":"230602","name":"萨尔图区"},{"code":"230603","name":"龙凤区"},{"code":"230604","name":"让胡路区"},{"code":"230605","name":"红岗区"},{"code":"230606","name":"大同区"},{"code":"230621","name":"肇州县"},{"code":"230622","name":"肇源县"},{"code":"230623","name":"林甸县"},{"code":"230624","name":"杜尔伯特蒙古族自治县"},{"code":"230671","name":"大庆高新技术产业开发区"}]},{"code":"2307","name":"伊春市","children":[{"code":"230717","name":"伊美区"},{"code":"230718","name":"乌翠区"},{"code":"230719","name":"友好区"},{"code":"230722","name":"嘉荫县"},{"code":"230723","name":"汤旺县"},{"code":"230724","name":"丰林县"},{"code":"230725","name":"大箐山县"},{"code":"230726","name":"南岔县"},{"code":"230751","name":"金林区"},{"code":"230781","name":"铁力市"}]},{"code":"2308","name":"佳木斯市","children":[{"code":"230803","name":"向阳区"},{"code":"230804","name":"前进区"},{"code":"230805","name":"东风区"},{"code":"230811","name":"郊区"},{"code":"230822","name":"桦南县"},{"code":"230826","name":"桦川县"},{"code":"230828","name":"汤原县"},{"code":"230881","name":"同江市"},{"code":"230882","name":"富锦市"},{"code":"230883","name":"抚远市"}]},{"code":"2309","name":"七台河市","children":[{"code":"230902","name":"新兴区"},{"code":"230903","name":"桃山区"},{"code":"230904","name":"茄子河区"},{"code":"230921","name":"勃利县"}]},{"code":"2310","name":"牡丹江市","children":[{"code":"231002","name":"东安区"},{"code":"231003","name":"阳明区"},{"code":"231004","name":"爱民区"},{"code":"231005","name":"西安区"},{"code":"231025","name":"林口县"},{"code":"231071","name":"牡丹江经济技术开发区"},{"code":"231081","name":"绥芬河市"},{"code":"231083","name":"海林市"},{"code":"231084","name":"宁安市"},{"code":"231085","name":"穆棱市"},{"code":"231086","name":"东宁市"}]},{"code":"2311","name":"黑河市","children":[{"code":"231102","name":"爱辉区"},{"code":"231123","name":"逊克县"},{"code":"231124","name":"孙吴县"},{"code":"231181","name":"北安市"},{"code":"231182","name":"五大连池市"},{"code":"231183","name":"嫩江市"}]},{"code":"2312","name":"绥化市","children":[{"code":"231202","name":"北林区"},{"code":"231221","name":"望奎县"},{"code":"231222","name":"兰西县"},{"code":"231223","name":"青冈县"},{"code":"231224","name":"庆安县"},{"code":"231225","name":"明水县"},{"code":"231226","name":"绥棱县"},{"code":"231281","name":"安达市"},{"code":"231282","name":"肇东市"},{"code":"231283","name":"海伦市"}]},{"code":"2327","name":"大兴安岭地区","children":[{"code":"232701","name":"漠河市"},{"code":"232721","name":"呼玛县"},{"code":"232722","name":"塔河县"},{"code":"232761","name":"加格达奇区"},{"code":"232762","name":"松岭区"},{"code":"232763","name":"新林区"},{"code":"232764","name":"呼中区"}]}]},{"code":"31","name":"上海市","children":[{"code":"3101","name":"市辖区","children":[{"code":"310101","name":"黄浦区"},{"code":"310104","name":"徐汇区"},{"code":"310105","name":"长宁区"},{"code":"310106","name":"静安区"},{"code":"310107","name":"普陀区"},{"code":"310109","name":"虹口区"},{"code":"310110","name":"杨浦区"},{"code":"310112","name":"闵行区"},{"code":"310113","name":"宝山区"},{"code":"310114","name":"嘉定区"},{"code":"310115","name":"浦东新区"},{"code":"310116","name":"金山区"},{"code":"310117","name":"松江区"},{"code":"310118","name":"青浦区"},{"code":"310120","name":"奉贤区"},{"code":"310151","name":"崇明区"}]}]},{"code":"32","name":"江苏省","children":[{"code":"3201","name":"南京市","children":[{"code":"320102","name":"玄武区"},{"code":"320104","name":"秦淮区"},{"code":"320105","name":"建邺区"},{"code":"320106","name":"鼓楼区"},{"code":"320111","name":"浦口区"},{"code":"320113","name":"栖霞区"},{"code":"320114","name":"雨花台区"},{"code":"320115","name":"江宁区"},{"code":"320116","name":"六合区"},{"code":"320117","name":"溧水区"},{"code":"320118","name":"高淳区"}]},{"code":"3202","name":"无锡市","children":[{"code":"320205","name":"锡山区"},{"code":"320206","name":"惠山区"},{"code":"320211","name":"滨湖区"},{"code":"320213","name":"梁溪区"},{"code":"320214","name":"新吴区"},{"code":"320281","name":"江阴市"},{"code":"320282","name":"宜兴市"}]},{"code":"3203","name":"徐州市","children":[{"code":"320302","name":"鼓楼区"},{"code":"320303","name":"云龙区"},{"code":"320305","name":"贾汪区"},{"code":"320311","name":"泉山区"},{"code":"320312","name":"铜山区"},{"code":"320321","name":"丰县"},{"code":"320322","name":"沛县"},{"code":"320324","name":"睢宁县"},{"code":"320371","name":"徐州经济技术开发区"},{"code":"320381","name":"新沂市"},{"code":"320382","name":"邳州市"}]},{"code":"3204","name":"常州市","children":[{"code":"320402","name":"天宁区"},{"code":"320404","name":"钟楼区"},{"code":"320411","name":"新北区"},{"code":"320412","name":"武进区"},{"code":"320413","name":"金坛区"},{"code":"320481","name":"溧阳市"}]},{"code":"3205","name":"苏州市","children":[{"code":"320505","name":"虎丘区"},{"code":"320506","name":"吴中区"},{"code":"320507","name":"相城区"},{"code":"320508","name":"姑苏区"},{"code":"320509","name":"吴江区"},{"code":"320571","name":"苏州工业园区"},{"code":"320581","name":"常熟市"},{"code":"320582","name":"张家港市"},{"code":"320583","name":"昆山市"},{"code":"320585","name":"太仓市"}]},{"code":"3206","name":"南通市","children":[{"code":"320612","name":"通州区"},{"code":"320613","name":"崇川区"},{"code":"320614","name":"海门区"},{"code":"320623","name":"如东县"},{"code":"320671","name":"南通经济技术开发区"},{"code":"320681","name":"启东市"},{"code":"320682","name":"如皋市"},{"code":"320685","name":"海安市"}]},{"code":"3207","name":"连云港市","children":[{"code":"320703","name":"连云区"},{"code":"320706","name":"海州区"},{"code":"320707","name":"赣榆区"},{"code":"320722","name":"东海县"},{"code":"320723","name":"灌云县"},{"code":"320724","name":"灌南县"},{"code":"320771","name":"连云港经济技术开发区"},{"code":"320772","name":"连云港高新技术产业开发区"}]},{"code":"3208","name":"淮安市","children":[{"code":"320803","name":"淮安区"},{"code":"320804","name":"淮阴区"},{"code":"320812","name":"清江浦区"},{"code":"320813","name":"洪泽区"},{"code":"320826","name":"涟水县"},{"code":"320830","name":"盱眙县"},{"code":"320831","name":"金湖县"},{"code":"320871","name":"淮安经济技术开发区"}]},{"code":"3209","name":"盐城市","children":[{"code":"320902","name":"亭湖区"},{"code":"320903","name":"盐都区"},{"code":"320904","name":"大丰区"},{"code":"320921","name":"响水县"},{"code":"320922","name":"滨海县"},{"code":"320923","name":"阜宁县"},{"code":"320924","name":"射阳县"},{"code":"320925","name":"建湖县"},{"code":"320971","name":"盐城经济技术开发区"},{"code":"320981","name":"东台市"}]},{"code":"3210","name":"扬州市","children":[{"code":"321002","name":"广陵区"},{"code":"321003","name":"邗江区"},{"code":"321012","name":"江都区"},{"code":"321023","name":"宝应县"},{"code":"321071","name":"扬州经济技术开发区"},{"code":"321081","name":"仪征市"},{"code":"321084","name":"高邮市"}]},{"code":"3211","name":"镇江市","children":[{"code":"321102","name":"京口区"},{"code":"321111","name":"润州区"},{"code":"321112","name":"丹徒区"},{"code":"321171","name":"镇江新区"},{"code":"321181","name":"丹阳市"},{"code":"321182","name":"扬中市"},{"code":"321183","name":"句容市"}]},{"code":"3212","name":"泰州市","children":[{"code":"321202","name":"海陵区"},{"code":"321203","name":"高港区"},{"code":"321204","name":"姜堰区"},{"code":"321271","name":"泰州医药高新技术产业开发区"},{"code":"321281","name":"兴化市"},{"code":"321282","name":"靖江市"},{"code":"321283","name":"泰兴市"}]},{"code":"3213","name":"宿迁市","children":[{"code":"321302","name":"宿城区"},{"code":"321311","name":"宿豫区"},{"code":"321322","name":"沭阳县"},{"code":"321323","name":"泗阳县"},{"code":"321324","name":"泗洪县"},{"code":"321371","name":"宿迁经济技术开发区"}]}]},{"code":"33","name":"浙江省","children":[{"code":"3301","name":"杭州市","children":[{"code":"330102","name":"上城区"},{"code":"330105","name":"拱墅区"},{"code":"330106","name":"西湖区"},{"code":"330108","name":"滨江区"},{"code":"330109","name":"萧山区"},{"code":"330110","name":"余杭区"},{"code":"330111","name":"富阳区"},{"code":"330112","name":"临安区"},{"code":"330113","name":"临平区"},{"code":"330114","name":"钱塘区"},{"code":"330122","name":"桐庐县"},{"code":"330127","name":"淳安县"},{"code":"330182","name":"建德市"}]},{"code":"3302","name":"宁波市","children":[{"code":"330203","name":"海曙区"},{"code":"330205","name":"江北区"},{"code":"330206","name":"北仑区"},{"code":"330211","name":"镇海区"},{"code":"330212","name":"鄞州区"},{"code":"330213","name":"奉化区"},{"code":"330225","name":"象山县"},{"code":"330226","name":"宁海县"},{"code":"330281","name":"余姚市"},{"code":"330282","name":"慈溪市"}]},{"code":"3303","name":"温州市","children":[{"code":"330302","name":"鹿城区"},{"code":"330303","name":"龙湾区"},{"code":"330304","name":"瓯海区"},{"code":"330305","name":"洞头区"},{"code":"330324","name":"永嘉县"},{"code":"330326","name":"平阳县"},{"code":"330327","name":"苍南县"},{"code":"330328","name":"文成县"},{"code":"330329","name":"泰顺县"},{"code":"330371","name":"温州经济技术开发区"},{"code":"330381","name":"瑞安市"},{"code":"330382","name":"乐清市"},{"code":"330383","name":"龙港市"}]},{"code":"3304","name":"嘉兴市","children":[{"code":"330402","name":"南湖区"},{"code":"330411","name":"秀洲区"},{"code":"330421","name":"嘉善县"},{"code":"330424","name":"海盐县"},{"code":"330481","name":"海宁市"},{"code":"330482","name":"平湖市"},{"code":"330483","name":"桐乡市"}]},{"code":"3305","name":"湖州市","children":[{"code":"330502","name":"吴兴区"},{"code":"330503","name":"南浔区"},{"code":"330521","name":"德清县"},{"code":"330522","name":"长兴县"},{"code":"330523","name":"安吉县"}]},{"code":"3306","name":"绍兴市","children":[{"code":"330602","name":"越城区"},{"code":"330603","name":"柯桥区"},{"code":"330604","name":"上虞区"},{"code":"330624","name":"新昌县"},{"code":"330681","name":"诸暨市"},{"code":"330683","name":"嵊州市"}]},{"code":"3307","name":"金华市","children":[{"code":"330702","name":"婺城区"},{"code":"330703","name":"金东区"},{"code":"330723","name":"武义县"},{"code":"330726","name":"浦江县"},{"code":"330727","name":"磐安县"},{"code":"330781","name":"兰溪市"},{"code":"330782","name":"义乌市"},{"code":"330783","name":"东阳市"},{"code":"330784","name":"永康市"}]},{"code":"3308","name":"衢州市","children":[{"code":"330802","name":"柯城区"},{"code":"330803","name":"衢江区"},{"code":"330822","name":"常山县"},{"code":"330824","name":"开化县"},{"code":"330825","name":"龙游县"},{"code":"330881","name":"江山市"}]},{"code":"3309","name":"舟山市","children":[{"code":"330902","name":"定海区"},{"code":"330903","name":"普陀区"},{"code":"330921","name":"岱山县"},{"code":"330922","name":"嵊泗县"}]},{"code":"3310","name":"台州市","children":[{"code":"331002","name":"椒江区"},{"code":"331003","name":"黄岩区"},{"code":"331004","name":"路桥区"},{"code":"331022","name":"三门县"},{"code":"331023","name":"天台县"},{"code":"331024","name":"仙居县"},{"code":"331081","name":"温岭市"},{"code":"331082","name":"临海市"},{"code":"331083","name":"玉环市"}]},{"code":"3311","name":"丽水市","children":[{"code":"331102","name":"莲都区"},{"code":"331121","name":"青田县"},{"code":"331122","name":"缙云县"},{"code":"331123","name":"遂昌县"},{"code":"331124","name":"松阳县"},{"code":"331125","name":"云和县"},{"code":"331126","name":"庆元县"},{"code":"331127","name":"景宁畲族自治县"},{"code":"331181","name":"龙泉市"}]}]},{"code":"34","name":"安徽省","children":[{"code":"3401","name":"合肥市","children":[{"code":"340102","name":"瑶海区"},{"code":"340103","name":"庐阳区"},{"code":"340104","name":"蜀山区"},{"code":"340111","name":"包河区"},{"code":"340121","name":"长丰县"},{"code":"340122","name":"肥东县"},{"code":"340123","name":"肥西县"},{"code":"340124","name":"庐江县"},{"code":"340171","name":"合肥高新技术产业开发区"},{"code":"340172","name":"合肥经济技术开发区"},{"code":"340173","name":"合肥新站高新技术产业开发区"},{"code":"340181","name":"巢湖市"}]},{"code":"3402","name":"芜湖市","children":[{"code":"340202","name":"镜湖区"},{"code":"340207","name":"鸠江区"},{"code":"340209","name":"弋江区"},{"code":"340210","name":"湾沚区"},{"code":"340212","name":"繁昌区"},{"code":"340223","name":"南陵县"},{"code":"340271","name":"芜湖经济技术开发区"},{"code":"340272","name":"安徽芜湖三山经济开发区"},{"code":"340281","name":"无为市"}]},{"code":"3403","name":"蚌埠市","children":[{"code":"340302","name":"龙子湖区"},{"code":"340303","name":"蚌山区"},{"code":"340304","name":"禹会区"},{"code":"340311","name":"淮上区"},{"code":"340321","name":"怀远县"},{"code":"340322","name":"五河县"},{"code":"340323","name":"固镇县"},{"code":"340371","name":"蚌埠市高新技术开发区"},{"code":"340372","name":"蚌埠市经济开发区"}]},{"code":"3404","name":"淮南市","children":[{"code":"340402","name":"大通区"},{"code":"340403","name":"田家庵区"},{"code":"340404","name":"谢家集区"},{"code":"340405","name":"八公山区"},{"code":"340406","name":"潘集区"},{"code":"340421","name":"凤台县"},{"code":"340422","name":"寿县"}]},{"code":"3405","name":"马鞍山市","children":[{"code":"340503","name":"花山区"},{"code":"340504","name":"雨山区"},{"code":"340506","name":"博望区"},{"code":"340521","name":"当涂县"},{"code":"340522","name":"含山县"},{"code":"340523","name":"和县"}]},{"code":"3406","name":"淮北市","children":[{"code":"340602","name":"杜集区"},{"code":"340603","name":"相山区"},{"code":"340604","name":"烈山区"},{"code":"340621","name":"濉溪县"}]},{"code":"3407","name":"铜陵市","children":[{"code":"340705","name":"铜官区"},{"code":"340706","name":"义安区"},{"code":"340711","name":"郊区"},{"code":"340722","name":"枞阳县"}]},{"code":"3408","name":"安庆市","children":[{"code":"340802","name":"迎江区"},{"code":"340803","name":"大观区"},{"code":"340811","name":"宜秀区"},{"code":"340822","name":"怀宁县"},{"code":"340825","name":"太湖县"},{"code":"340826","name":"宿松县"},{"code":"340827","name":"望江县"},{"code":"340828","name":"岳西县"},{"code":"340871","name":"安徽安庆经济开发区"},{"code":"340881","name":"桐城市"},{"code":"340882","name":"潜山市"}]},{"code":"3410","name":"黄山市","children":[{"code":"341002","name":"屯溪区"},{"code":"341003","name":"黄山区"},{"code":"341004","name":"徽州区"},{"code":"341021","name":"歙县"},{"code":"341022","name":"休宁县"},{"code":"341023","name":"黟县"},{"code":"341024","name":"祁门县"}]},{"code":"3411","name":"滁州市","children":[{"code":"341102","name":"琅琊区"},{"code":"341103","name":"南谯区"},{"code":"341122","name":"来安县"},{"code":"341124","name":"全椒县"},{"code":"341125","name":"定远县"},{"code":"341126","name":"凤阳县"},{"code":"341171","name":"中新苏滁高新技术产业开发区"},{"code":"341172","name":"滁州经济技术开发区"},{"code":"341181","name":"天长市"},{"code":"341182","name":"明光市"}]},{"code":"3412","name":"阜阳市","children":[{"code":"341202","name":"颍州区"},{"code":"341203","name":"颍东区"},{"code":"341204","name":"颍泉区"},{"code":"341221","name":"临泉县"},{"code":"341222","name":"太和县"},{"code":"341225","name":"阜南县"},{"code":"341226","name":"颍上县"},{"code":"341271","name":"阜阳合肥现代产业园区"},{"code":"341272","name":"阜阳经济技术开发区"},{"code":"341282","name":"界首市"}]},{"code":"3413","name":"宿州市","children":[{"code":"341302","name":"埇桥区"},{"code":"341321","name":"砀山县"},{"code":"341322","name":"萧县"},{"code":"341323","name":"灵璧县"},{"code":"341324","name":"泗县"},{"code":"341371","name":"宿州马鞍山现代产业园区"},{"code":"341372","name":"宿州经济技术开发区"}]},{"code":"3415","name":"六安市","children":[{"code":"341502","name":"金安区"},{"code":"341503","name":"裕安区"},{"code":"341504","name":"叶集区"},{"code":"341522","name":"霍邱县"},{"code":"341523","name":"舒城县"},{"code":"341524","name":"金寨县"},{"code":"341525","name":"霍山县"}]},{"code":"3416","name":"亳州市","children":[{"code":"341602","name":"谯城区"},{"code":"341621","name":"涡阳县"},{"code":"341622","name":"蒙城县"},{"code":"341623","name":"利辛县"}]},{"code":"3417","name":"池州市","children":[{"code":"341702","name":"贵池区"},{"code":"341721","name":"东至县"},{"code":"341722","name":"石台县"},{"code":"341723","name":"青阳县"}]},{"code":"3418","name":"宣城市","children":[{"code":"341802","name":"宣州区"},{"code":"341821","name":"郎溪县"},{"code":"341823","name":"泾县"},{"code":"341824","name":"绩溪县"},{"code":"341825","name":"旌德县"},{"code":"341871","name":"宣城市经济开发区"},{"code":"341881","name":"宁国市"},{"code":"341882","name":"广德市"}]}]},{"code":"35","name":"福建省","children":[{"code":"3501","name":"福州市","children":[{"code":"350102","name":"鼓楼区"},{"code":"350103","name":"台江区"},{"code":"350104","name":"仓山区"},{"code":"350105","name":"马尾区"},{"code":"350111","name":"晋安区"},{"code":"350112","name":"长乐区"},{"code":"350121","name":"闽侯县"},{"code":"350122","name":"连江县"},{"code":"350123","name":"罗源县"},{"code":"350124","name":"闽清县"},{"code":"350125","name":"永泰县"},{"code":"350128","name":"平潭县"},{"code":"350181","name":"福清市"}]},{"code":"3502","name":"厦门市","children":[{"code":"350203","name":"思明区"},{"code":"350205","name":"海沧区"},{"code":"350206","name":"湖里区"},{"code":"350211","name":"集美区"},{"code":"350212","name":"同安区"},{"code":"350213","name":"翔安区"}]},{"code":"3503","name":"莆田市","children":[{"code":"350302","name":"城厢区"},{"code":"350303","name":"涵江区"},{"code":"350304","name":"荔城区"},{"code":"350305","name":"秀屿区"},{"code":"350322","name":"仙游县"}]},{"code":"3504","name":"三明市","children":[{"code":"350404","name":"三元区"},{"code":"350405","name":"沙县区"},{"code":"350421","name":"明溪县"},{"code":"350423","name":"清流县"},{"code":"350424","name":"宁化县"},{"code":"350425","name":"大田县"},{"code":"350426","name":"尤溪县"},{"code":"350428","name":"将乐县"},{"code":"350429","name":"泰宁县"},{"code":"350430","name":"建宁县"},{"code":"350481","name":"永安市"}]},{"code":"3505","name":"泉州市","children":[{"code":"350502","name":"鲤城区"},{"code":"350503","name":"丰泽区"},{"code":"350504","name":"洛江区"},{"code":"350505","name":"泉港区"},{"code":"350521","name":"惠安县"},{"code":"350524","name":"安溪县"},{"code":"350525","name":"永春县"},{"code":"350526","name":"德化县"},{"code":"350527","name":"金门县"},{"code":"350581","name":"石狮市"},{"code":"350582","name":"晋江市"},{"code":"350583","name":"南安市"}]},{"code":"3506","name":"漳州市","children":[{"code":"350602","name":"芗城区"},{"code":"350603","name":"龙文区"},{"code":"350604","name":"龙海区"},{"code":"350605","name":"长泰区"},{"code":"350622","name":"云霄县"},{"code":"350623","name":"漳浦县"},{"code":"350624","name":"诏安县"},{"code":"350626","name":"东山县"},{"code":"350627","name":"南靖县"},{"code":"350628","name":"平和县"},{"code":"350629","name":"华安县"}]},{"code":"3507","name":"南平市","children":[{"code":"350702","name":"延平区"},{"code":"350703","name":"建阳区"},{"code":"350721","name":"顺昌县"},{"code":"350722","name":"浦城县"},{"code":"350723","name":"光泽县"},{"code":"350724","name":"松溪县"},{"code":"350725","name":"政和县"},{"code":"350781","name":"邵武市"},{"code":"350782","name":"武夷山市"},{"code":"350783","name":"建瓯市"}]},{"code":"3508","name":"龙岩市","children":[{"code":"350802","name":"新罗区"},{"code":"350803","name":"永定区"},{"code":"350821","name":"长汀县"},{"code":"350823","name":"上杭县"},{"code":"350824","name":"武平县"},{"code":"350825","name":"连城县"},{"code":"350881","name":"漳平市"}]},{"code":"3509","name":"宁德市","children":[{"code":"350902","name":"蕉城区"},{"code":"350921","name":"霞浦县"},{"code":"350922","name":"古田县"},{"code":"350923","name":"屏南县"},{"code":"350924","name":"寿宁县"},{"code":"350925","name":"周宁县"},{"code":"350926","name":"柘荣县"},{"code":"350981","name":"福安市"},{"code":"350982","name":"福鼎市"}]}]},{"code":"36","name":"江西省","children":[{"code":"3601","name":"南昌市","children":[{"code":"360102","name":"东湖区"},{"code":"360103","name":"西湖区"},{"code":"360104","name":"青云谱区"},{"code":"360111","name":"青山湖区"},{"code":"360112","name":"新建区"},{"code":"360113","name":"红谷滩区"},{"code":"360121","name":"南昌县"},{"code":"360123","name":"安义县"},{"code":"360124","name":"进贤县"}]},{"code":"3602","name":"景德镇市","children":[{"code":"360202","name":"昌江区"},{"code":"360203","name":"珠山区"},{"code":"360222","name":"浮梁县"},{"code":"360281","name":"乐平市"}]},{"code":"3603","name":"萍乡市","children":[{"code":"360302","name":"安源区"},{"code":"360313","name":"湘东区"},{"code":"360321","name":"莲花县"},{"code":"360322","name":"上栗县"},{"code":"360323","name":"芦溪县"}]},{"code":"3604","name":"九江市","children":[{"code":"360402","name":"濂溪区"},{"code":"360403","name":"浔阳区"},{"code":"360404","name":"柴桑区"},{"code":"360423","name":"武宁县"},{"code":"360424","name":"修水县"},{"code":"360425","name":"永修县"},{"code":"360426","name":"德安县"},{"code":"360428","name":"都昌县"},{"code":"360429","name":"湖口县"},{"code":"360430","name":"彭泽县"},{"code":"360481","name":"瑞昌市"},{"code":"360482","name":"共青城市"},{"code":"360483","name":"庐山市"}]},{"code":"3605","name":"新余市","children":[{"code":"360502","name":"渝水区"},{"code":"360521","name":"分宜县"}]},{"code":"3606","name":"鹰潭市","children":[{"code":"360602","name":"月湖区"},{"code":"360603","name":"余江区"},{"code":"360681","name":"贵溪市"}]},{"code":"3607","name":"赣州市","children":[{"code":"360702","name":"章贡区"},{"code":"360703","name":"南康区"},{"code":"360704","name":"赣县区"},{"code":"360722","name":"信丰县"},{"code":"360723","name":"大余县"},{"code":"360724","name":"上犹县"},{"code":"360725","name":"崇义县"},{"code":"360726","name":"安远县"},{"code":"360728","name":"定南县"},{"code":"360729","name":"全南县"},{"code":"360730","name":"宁都县"},{"code":"360731","name":"于都县"},{"code":"360732","name":"兴国县"},{"code":"360733","name":"会昌县"},{"code":"360734","name":"寻乌县"},{"code":"360735","name":"石城县"},{"code":"360781","name":"瑞金市"},{"code":"360783","name":"龙南市"}]},{"code":"3608","name":"吉安市","children":[{"code":"360802","name":"吉州区"},{"code":"360803","name":"青原区"},{"code":"360821","name":"吉安县"},{"code":"360822","name":"吉水县"},{"code":"360823","name":"峡江县"},{"code":"360824","name":"新干县"},{"code":"360825","name":"永丰县"},{"code":"360826","name":"泰和县"},{"code":"360827","name":"遂川县"},{"code":"360828","name":"万安县"},{"code":"360829","name":"安福县"},{"code":"360830","name":"永新县"},{"code":"360881","name":"井冈山市"}]},{"code":"3609","name":"宜春市","children":[{"code":"360902","name":"袁州区"},{"code":"360921","name":"奉新县"},{"code":"360922","name":"万载县"},{"code":"360923","name":"上高县"},{"code":"360924","name":"宜丰县"},{"code":"360925","name":"靖安县"},{"code":"360926","name":"铜鼓县"},{"code":"360981","name":"丰城市"},{"code":"360982","name":"樟树市"},{"code":"360983","name":"高安市"}]},{"code":"3610","name":"抚州市","children":[{"code":"361002","name":"临川区"},{"code":"361003","name":"东乡区"},{"code":"361021","name":"南城县"},{"code":"361022","name":"黎川县"},{"code":"361023","name":"南丰县"},{"code":"361024","name":"崇仁县"},{"code":"361025","name":"乐安县"},{"code":"361026","name":"宜黄县"},{"code":"361027","name":"金溪县"},{"code":"361028","name":"资溪县"},{"code":"361030","name":"广昌县"}]},{"code":"3611","name":"上饶市","children":[{"code":"361102","name":"信州区"},{"code":"361103","name":"广丰区"},{"code":"361104","name":"广信区"},{"code":"361123","name":"玉山县"},{"code":"361124","name":"铅山县"},{"code":"361125","name":"横峰县"},{"code":"361126","name":"弋阳县"},{"code":"361127","name":"余干县"},{"code":"361128","name":"鄱阳县"},{"code":"361129","name":"万年县"},{"code":"361130","name":"婺源县"},{"code":"361181","name":"德兴市"}]}]},{"code":"37","name":"山东省","children":[{"code":"3701","name":"济南市","children":[{"code":"370102","name":"历下区"},{"code":"370103","name":"市中区"},{"code":"370104","name":"槐荫区"},{"code":"370105","name":"天桥区"},{"code":"370112","name":"历城区"},{"code":"370113","name":"长清区"},{"code":"370114","name":"章丘区"},{"code":"370115","name":"济阳区"},{"code":"370116","name":"莱芜区"},{"code":"370117","name":"钢城区"},{"code":"370124","name":"平阴县"},{"code":"370126","name":"商河县"},{"code":"370171","name":"济南高新技术产业开发区"}]},{"code":"3702","name":"青岛市","children":[{"code":"370202","name":"市南区"},{"code":"370203","name":"市北区"},{"code":"370211","name":"黄岛区"},{"code":"370212","name":"崂山区"},{"code":"370213","name":"李沧区"},{"code":"370214","name":"城阳区"},{"code":"370215","name":"即墨区"},{"code":"370271","name":"青岛高新技术产业开发区"},{"code":"370281","name":"胶州市"},{"code":"370283","name":"平度市"},{"code":"370285","name":"莱西市"}]},{"code":"3703","name":"淄博市","children":[{"code":"370302","name":"淄川区"},{"code":"370303","name":"张店区"},{"code":"370304","name":"博山区"},{"code":"370305","name":"临淄区"},{"code":"370306","name":"周村区"},{"code":"370321","name":"桓台县"},{"code":"370322","name":"高青县"},{"code":"370323","name":"沂源县"}]},{"code":"3704","name":"枣庄市","children":[{"code":"370402","name":"市中区"},{"code":"370403","name":"薛城区"},{"code":"370404","name":"峄城区"},{"code":"370405","name":"台儿庄区"},{"code":"370406","name":"山亭区"},{"code":"370481","name":"滕州市"}]},{"code":"3705","name":"东营市","children":[{"code":"370502","name":"东营区"},{"code":"370503","name":"河口区"},{"code":"370505","name":"垦利区"},{"code":"370522","name":"利津县"},{"code":"370523","name":"广饶县"},{"code":"370571","name":"东营经济技术开发区"},{"code":"370572","name":"东营港经济开发区"}]},{"code":"3706","name":"烟台市","children":[{"code":"370602","name":"芝罘区"},{"code":"370611","name":"福山区"},{"code":"370612","name":"牟平区"},{"code":"370613","name":"莱山区"},{"code":"370614","name":"蓬莱区"},{"code":"370671","name":"烟台高新技术产业开发区"},{"code":"370672","name":"烟台经济技术开发区"},{"code":"370681","name":"龙口市"},{"code":"370682","name":"莱阳市"},{"code":"370683","name":"莱州市"},{"code":"370685","name":"招远市"},{"code":"370686","name":"栖霞市"},{"code":"370687","name":"海阳市"}]},{"code":"3707","name":"潍坊市","children":[{"code":"370702","name":"潍城区"},{"code":"370703","name":"寒亭区"},{"code":"370704","name":"坊子区"},{"code":"370705","name":"奎文区"},{"code":"370724","name":"临朐县"},{"code":"370725","name":"昌乐县"},{"code":"370772","name":"潍坊滨海经济技术开发区"},{"code":"370781","name":"青州市"},{"code":"370782","name":"诸城市"},{"code":"370783","name":"寿光市"},{"code":"370784","name":"安丘市"},{"code":"370785","name":"高密市"},{"code":"370786","name":"昌邑市"}]},{"code":"3708","name":"济宁市","children":[{"code":"370811","name":"任城区"},{"code":"370812","name":"兖州区"},{"code":"370826","name":"微山县"},{"code":"370827","name":"鱼台县"},{"code":"370828","name":"金乡县"},{"code":"370829","name":"嘉祥县"},{"code":"370830","name":"汶上县"},{"code":"370831","name":"泗水县"},{"code":"370832","name":"梁山县"},{"code":"370871","name":"济宁高新技术产业开发区"},{"code":"370881","name":"曲阜市"},{"code":"370883","name":"邹城市"}]},{"code":"3709","name":"泰安市","children":[{"code":"370902","name":"泰山区"},{"code":"370911","name":"岱岳区"},{"code":"370921","name":"宁阳县"},{"code":"370923","name":"东平县"},{"code":"370982","name":"新泰市"},{"code":"370983","name":"肥城市"}]},{"code":"3710","name":"威海市","children":[{"code":"371002","name":"环翠区"},{"code":"371003","name":"文登区"},{"code":"371071","name":"威海火炬高技术产业开发区"},{"code":"371072","name":"威海经济技术开发区"},{"code":"371073","name":"威海临港经济技术开发区"},{"code":"371082","name":"荣成市"},{"code":"371083","name":"乳山市"}]},{"code":"3711","name":"日照市","children":[{"code":"371102","name":"东港区"},{"code":"371103","name":"岚山区"},{"code":"371121","name":"五莲县"},{"code":"371122","name":"莒县"},{"code":"371171","name":"日照经济技术开发区"}]},{"code":"3713","name":"临沂市","children":[{"code":"371302","name":"兰山区"},{"code":"371311","name":"罗庄区"},{"code":"371312","name":"河东区"},{"code":"371321","name":"沂南县"},{"code":"371322","name":"郯城县"},{"code":"371323","name":"沂水县"},{"code":"371324","name":"兰陵县"},{"code":"371325","name":"费县"},{"code":"371326","name":"平邑县"},{"code":"371327","name":"莒南县"},{"code":"371328","name":"蒙阴县"},{"code":"371329","name":"临沭县"},{"code":"371371","name":"临沂高新技术产业开发区"}]},{"code":"3714","name":"德州市","children":[{"code":"371402","name":"德城区"},{"code":"371403","name":"陵城区"},{"code":"371422","name":"宁津县"},{"code":"371423","name":"庆云县"},{"code":"371424","name":"临邑县"},{"code":"371425","name":"齐河县"},{"code":"371426","name":"平原县"},{"code":"371427","name":"夏津县"},{"code":"371428","name":"武城县"},{"code":"371471","name":"德州经济技术开发区"},{"code":"371472","name":"德州运河经济开发区"},{"code":"371481","name":"乐陵市"},{"code":"371482","name":"禹城市"}]},{"code":"3715","name":"聊城市","children":[{"code":"371502","name":"东昌府区"},{"code":"371503","name":"茌平区"},{"code":"371521","name":"阳谷县"},{"code":"371522","name":"莘县"},{"code":"371524","name":"东阿县"},{"code":"371525","name":"冠县"},{"code":"371526","name":"高唐县"},{"code":"371581","name":"临清市"}]},{"code":"3716","name":"滨州市","children":[{"code":"371602","name":"滨城区"},{"code":"371603","name":"沾化区"},{"code":"371621","name":"惠民县"},{"code":"371622","name":"阳信县"},{"code":"371623","name":"无棣县"},{"code":"371625","name":"博兴县"},{"code":"371681","name":"邹平市"}]},{"code":"3717","name":"菏泽市","children":[{"code":"371702","name":"牡丹区"},{"code":"371703","name":"定陶区"},{"code":"371721","name":"曹县"},{"code":"371722","name":"单县"},{"code":"371723","name":"成武县"},{"code":"371724","name":"巨野县"},{"code":"371725","name":"郓城县"},{"code":"371726","name":"鄄城县"},{"code":"371728","name":"东明县"},{"code":"371771","name":"菏泽经济技术开发区"},{"code":"371772","name":"菏泽高新技术开发区"}]}]},{"code":"41","name":"河南省","children":[{"code":"4101","name":"郑州市","children":[{"code":"410102","name":"中原区"},{"code":"410103","name":"二七区"},{"code":"410104","name":"管城回族区"},{"code":"410105","name":"金水区"},{"code":"410106","name":"上街区"},{"code":"410108","name":"惠济区"},{"code":"410122","name":"中牟县"},{"code":"410171","name":"郑州经济技术开发区"},{"code":"410172","name":"郑州高新技术产业开发区"},{"code":"410173","name":"郑州航空港经济综合实验区"},{"code":"410181","name":"巩义市"},{"code":"410182","name":"荥阳市"},{"code":"410183","name":"新密市"},{"code":"410184","name":"新郑市"},{"code":"410185","name":"登封市"}]},{"code":"4102","name":"开封市","children":[{"code":"410202","name":"龙亭区"},{"code":"410203","name":"顺河回族区"},{"code":"410204","name":"鼓楼区"},{"code":"410205","name":"禹王台区"},{"code":"410212","name":"祥符区"},{"code":"410221","name":"杞县"},{"code":"410222","name":"通许县"},{"code":"410223","name":"尉氏县"},{"code":"410225","name":"兰考县"}]},{"code":"4103","name":"洛阳市","children":[{"code":"410302","name":"老城区"},{"code":"410303","name":"西工区"},{"code":"410304","name":"瀍河回族区"},{"code":"410305","name":"涧西区"},{"code":"410307","name":"偃师区"},{"code":"410308","name":"孟津区"},{"code":"410311","name":"洛龙区"},{"code":"410323","name":"新安县"},{"code":"410324","name":"栾川县"},{"code":"410325","name":"嵩县"},{"code":"410326","name":"汝阳县"},{"code":"410327","name":"宜阳县"},{"code":"410328","name":"洛宁县"},{"code":"410329","name":"伊川县"},{"code":"410371","name":"洛阳高新技术产业开发区"}]},{"code":"4104","name":"平顶山市","children":[{"code":"410402","name":"新华区"},{"code":"410403","name":"卫东区"},{"code":"410404","name":"石龙区"},{"code":"410411","name":"湛河区"},{"code":"410421","name":"宝丰县"},{"code":"410422","name":"叶县"},{"code":"410423","name":"鲁山县"},{"code":"410425","name":"郏县"},{"code":"410471","name":"平顶山高新技术产业开发区"},{"code":"410472","name":"平顶山市城乡一体化示范区"},{"code":"410481","name":"舞钢市"},{"code":"410482","name":"汝州市"}]},{"code":"4105","name":"安阳市","children":[{"code":"410502","name":"文峰区"},{"code":"410503","name":"北关区"},{"code":"410505","name":"殷都区"},{"code":"410506","name":"龙安区"},{"code":"410522","name":"安阳县"},{"code":"410523","name":"汤阴县"},{"code":"410526","name":"滑县"},{"code":"410527","name":"内黄县"},{"code":"410571","name":"安阳高新技术产业开发区"},{"code":"410581","name":"林州市"}]},{"code":"4106","name":"鹤壁市","children":[{"code":"410602","name":"鹤山区"},{"code":"410603","name":"山城区"},{"code":"410611","name":"淇滨区"},{"code":"410621","name":"浚县"},{"code":"410622","name":"淇县"},{"code":"410671","name":"鹤壁经济技术开发区"}]},{"code":"4107","name":"新乡市","children":[{"code":"410702","name":"红旗区"},{"code":"410703","name":"卫滨区"},{"code":"410704","name":"凤泉区"},{"code":"410711","name":"牧野区"},{"code":"410721","name":"新乡县"},{"code":"410724","name":"获嘉县"},{"code":"410725","name":"原阳县"},{"code":"410726","name":"延津县"},{"code":"410727","name":"封丘县"},{"code":"410771","name":"新乡高新技术产业开发区"},{"code":"410772","name":"新乡经济技术开发区"},{"code":"410773","name":"新乡市平原城乡一体化示范区"},{"code":"410781","name":"卫辉市"},{"code":"410782","name":"辉县市"},{"code":"410783","name":"长垣市"}]},{"code":"4108","name":"焦作市","children":[{"code":"410802","name":"解放区"},{"code":"410803","name":"中站区"},{"code":"410804","name":"马村区"},{"code":"410811","name":"山阳区"},{"code":"410821","name":"修武县"},{"code":"410822","name":"博爱县"},{"code":"410823","name":"武陟县"},{"code":"410825","name":"温县"},{"code":"410871","name":"焦作城乡一体化示范区"},{"code":"410882","name":"沁阳市"},{"code":"410883","name":"孟州市"}]},{"code":"4109","name":"濮阳市","children":[{"code":"410902","name":"华龙区"},{"code":"410922","name":"清丰县"},{"code":"410923","name":"南乐县"},{"code":"410926","name":"范县"},{"code":"410927","name":"台前县"},{"code":"410928","name":"濮阳县"},{"code":"410971","name":"河南濮阳工业园区"},{"code":"410972","name":"濮阳经济技术开发区"}]},{"code":"4110","name":"许昌市","children":[{"code":"411002","name":"魏都区"},{"code":"411003","name":"建安区"},{"code":"411024","name":"鄢陵县"},{"code":"411025","name":"襄城县"},{"code":"411071","name":"许昌经济技术开发区"},{"code":"411081","name":"禹州市"},{"code":"411082","name":"长葛市"}]},{"code":"4111","name":"漯河市","children":[{"code":"411102","name":"源汇区"},{"code":"411103","name":"郾城区"},{"code":"411104","name":"召陵区"},{"code":"411121","name":"舞阳县"},{"code":"411122","name":"临颍县"},{"code":"411171","name":"漯河经济技术开发区"}]},{"code":"4112","name":"三门峡市","children":[{"code":"411202","name":"湖滨区"},{"code":"411203","name":"陕州区"},{"code":"411221","name":"渑池县"},{"code":"411224","name":"卢氏县"},{"code":"411271","name":"河南三门峡经济开发区"},{"code":"411281","name":"义马市"},{"code":"411282","name":"灵宝市"}]},{"code":"4113","name":"南阳市","children":[{"code":"411302","name":"宛城区"},{"code":"411303","name":"卧龙区"},{"code":"411321","name":"南召县"},{"code":"411322","name":"方城县"},{"code":"411323","name":"西峡县"},{"code":"411324","name":"镇平县"},{"code":"411325","name":"内乡县"},{"code":"411326","name":"淅川县"},{"code":"411327","name":"社旗县"},{"code":"411328","name":"唐河县"},{"code":"411329","name":"新野县"},{"code":"411330","name":"桐柏县"},{"code":"411371","name":"南阳高新技术产业开发区"},{"code":"411372","name":"南阳市城乡一体化示范区"},{"code":"411381","name":"邓州市"}]},{"code":"4114","name":"商丘市","children":[{"code":"411402","name":"梁园区"},{"code":"411403","name":"睢阳区"},{"code":"411421","name":"民权县"},{"code":"411422","name":"睢县"},{"code":"411423","name":"宁陵县"},{"code":"411424","name":"柘城县"},{"code":"411425","name":"虞城县"},{"code":"411426","name":"夏邑县"},{"code":"411471","name":"豫东综合物流产业聚集区"},{"code":"411472","name":"河南商丘经济开发区"},{"code":"411481","name":"永城市"}]},{"code":"4115","name":"信阳市","children":[{"code":"411502","name":"浉河区"},{"code":"411503","name":"平桥区"},{"code":"411521","name":"罗山县"},{"code":"411522","name":"光山县"},{"code":"411523","name":"新县"},{"code":"411524","name":"商城县"},{"code":"411525","name":"固始县"},{"code":"411526","name":"潢川县"},{"code":"411527","name":"淮滨县"},{"code":"411528","name":"息县"},{"code":"411571","name":"信阳高新技术产业开发区"}]},{"code":"4116","name":"周口市","children":[{"code":"411602","name":"川汇区"},{"code":"411603","name":"淮阳区"},{"code":"411621","name":"扶沟县"},{"code":"411622","name":"西华县"},{"code":"411623","name":"商水县"},{"code":"411624","name":"沈丘县"},{"code":"411625","name":"郸城县"},{"code":"411627","name":"太康县"},{"code":"411628","name":"鹿邑县"},{"code":"411671","name":"河南周口经济开发区"},{"code":"411681","name":"项城市"}]},{"code":"4117","name":"驻马店市","children":[{"code":"411702","name":"驿城区"},{"code":"411721","name":"西平县"},{"code":"411722","name":"上蔡县"},{"code":"411723","name":"平舆县"},{"code":"411724","name":"正阳县"},{"code":"411725","name":"确山县"},{"code":"411726","name":"泌阳县"},{"code":"411727","name":"汝南县"},{"code":"411728","name":"遂平县"},{"code":"411729","name":"新蔡县"},{"code":"411771","name":"河南驻马店经济开发区"}]},{"code":"4190","name":"省直辖县级行政区划","children":[{"code":"419001","name":"济源市"}]}]},{"code":"42","name":"湖北省","children":[{"code":"4201","name":"武汉市","children":[{"code":"420102","name":"江岸区"},{"code":"420103","name":"江汉区"},{"code":"420104","name":"硚口区"},{"code":"420105","name":"汉阳区"},{"code":"420106","name":"武昌区"},{"code":"420107","name":"青山区"},{"code":"420111","name":"洪山区"},{"code":"420112","name":"东西湖区"},{"code":"420113","name":"汉南区"},{"code":"420114","name":"蔡甸区"},{"code":"420115","name":"江夏区"},{"code":"420116","name":"黄陂区"},{"code":"420117","name":"新洲区"}]},{"code":"4202","name":"黄石市","children":[{"code":"420202","name":"黄石港区"},{"code":"420203","name":"西塞山区"},{"code":"420204","name":"下陆区"},{"code":"420205","name":"铁山区"},{"code":"420222","name":"阳新县"},{"code":"420281","name":"大冶市"}]},{"code":"4203","name":"十堰市","children":[{"code":"420302","name":"茅箭区"},{"code":"420303","name":"张湾区"},{"code":"420304","name":"郧阳区"},{"code":"420322","name":"郧西县"},{"code":"420323","name":"竹山县"},{"code":"420324","name":"竹溪县"},{"code":"420325","name":"房县"},{"code":"420381","name":"丹江口市"}]},{"code":"4205","name":"宜昌市","children":[{"code":"420502","name":"西陵区"},{"code":"420503","name":"伍家岗区"},{"code":"420504","name":"点军区"},{"code":"420505","name":"猇亭区"},{"code":"420506","name":"夷陵区"},{"code":"420525","name":"远安县"},{"code":"420526","name":"兴山县"},{"code":"420527","name":"秭归县"},{"code":"420528","name":"长阳土家族自治县"},{"code":"420529","name":"五峰土家族自治县"},{"code":"420581","name":"宜都市"},{"code":"420582","name":"当阳市"},{"code":"420583","name":"枝江市"}]},{"code":"4206","name":"襄阳市","children":[{"code":"420602","name":"襄城区"},{"code":"420606","name":"樊城区"},{"code":"420607","name":"襄州区"},{"code":"420624","name":"南漳县"},{"code":"420625","name":"谷城县"},{"code":"420626","name":"保康县"},{"code":"420682","name":"老河口市"},{"code":"420683","name":"枣阳市"},{"code":"420684","name":"宜城市"}]},{"code":"4207","name":"鄂州市","children":[{"code":"420702","name":"梁子湖区"},{"code":"420703","name":"华容区"},{"code":"420704","name":"鄂城区"}]},{"code":"4208","name":"荆门市","children":[{"code":"420802","name":"东宝区"},{"code":"420804","name":"掇刀区"},{"code":"420822","name":"沙洋县"},{"code":"420881","name":"钟祥市"},{"code":"420882","name":"京山市"}]},{"code":"4209","name":"孝感市","children":[{"code":"420902","name":"孝南区"},{"code":"420921","name":"孝昌县"},{"code":"420922","name":"大悟县"},{"code":"420923","name":"云梦县"},{"code":"420981","name":"应城市"},{"code":"420982","name":"安陆市"},{"code":"420984","name":"汉川市"}]},{"code":"4210","name":"荆州市","children":[{"code":"421002","name":"沙市区"},{"code":"421003","name":"荆州区"},{"code":"421022","name":"公安县"},{"code":"421024","name":"江陵县"},{"code":"421071","name":"荆州经济技术开发区"},{"code":"421081","name":"石首市"},{"code":"421083","name":"洪湖市"},{"code":"421087","name":"松滋市"},{"code":"421088","name":"监利市"}]},{"code":"4211","name":"黄冈市","children":[{"code":"421102","name":"黄州区"},{"code":"421121","name":"团风县"},{"code":"421122","name":"红安县"},{"code":"421123","name":"罗田县"},{"code":"421124","name":"英山县"},{"code":"421125","name":"浠水县"},{"code":"421126","name":"蕲春县"},{"code":"421127","name":"黄梅县"},{"code":"421171","name":"龙感湖管理区"},{"code":"421181","name":"麻城市"},{"code":"421182","name":"武穴市"}]},{"code":"4212","name":"咸宁市","children":[{"code":"421202","name":"咸安区"},{"code":"421221","name":"嘉鱼县"},{"code":"421222","name":"通城县"},{"code":"421223","name":"崇阳县"},{"code":"421224","name":"通山县"},{"code":"421281","name":"赤壁市"}]},{"code":"4213","name":"随州市","children":[{"code":"421303","name":"曾都区"},{"code":"421321","name":"随县"},{"code":"421381","name":"广水市"}]},{"code":"4228","name":"恩施土家族苗族自治州","children":[{"code":"422801","name":"恩施市"},{"code":"422802","name":"利川市"},{"code":"422822","name":"建始县"},{"code":"422823","name":"巴东县"},{"code":"422825","name":"宣恩县"},{"code":"422826","name":"咸丰县"},{"code":"422827","name":"来凤县"},{"code":"422828","name":"鹤峰县"}]},{"code":"4290","name":"省直辖县级行政区划","children":[{"code":"429004","name":"仙桃市"},{"code":"429005","name":"潜江市"},{"code":"429006","name":"天门市"},{"code":"429021","name":"神农架林区"}]}]},{"code":"43","name":"湖南省","children":[{"code":"4301","name":"长沙市","children":[{"code":"430102","name":"芙蓉区"},{"code":"430103","name":"天心区"},{"code":"430104","name":"岳麓区"},{"code":"430105","name":"开福区"},{"code":"430111","name":"雨花区"},{"code":"430112","name":"望城区"},{"code":"430121","name":"长沙县"},{"code":"430181","name":"浏阳市"},{"code":"430182","name":"宁乡市"}]},{"code":"4302","name":"株洲市","children":[{"code":"430202","name":"荷塘区"},{"code":"430203","name":"芦淞区"},{"code":"430204","name":"石峰区"},{"code":"430211","name":"天元区"},{"code":"430212","name":"渌口区"},{"code":"430223","name":"攸县"},{"code":"430224","name":"茶陵县"},{"code":"430225","name":"炎陵县"},{"code":"430271","name":"云龙示范区"},{"code":"430281","name":"醴陵市"}]},{"code":"4303","name":"湘潭市","children":[{"code":"430302","name":"雨湖区"},{"code":"430304","name":"岳塘区"},{"code":"430321","name":"湘潭县"},{"code":"430371","name":"湖南湘潭高新技术产业园区"},{"code":"430372","name":"湘潭昭山示范区"},{"code":"430373","name":"湘潭九华示范区"},{"code":"430381","name":"湘乡市"},{"code":"430382","name":"韶山市"}]},{"code":"4304","name":"衡阳市","children":[{"code":"430405","name":"珠晖区"},{"code":"430406","name":"雁峰区"},{"code":"430407","name":"石鼓区"},{"code":"430408","name":"蒸湘区"},{"code":"430412","name":"南岳区"},{"code":"430421","name":"衡阳县"},{"code":"430422","name":"衡南县"},{"code":"430423","name":"衡山县"},{"code":"430424","name":"衡东县"},{"code":"430426","name":"祁东县"},{"code":"430471","name":"衡阳综合保税区"},{"code":"430472","name":"湖南衡阳高新技术产业园区"},{"code":"430473","name":"湖南衡阳松木经济开发区"},{"code":"430481","name":"耒阳市"},{"code":"430482","name":"常宁市"}]},{"code":"4305","name":"邵阳市","children":[{"code":"430502","name":"双清区"},{"code":"430503","name":"大祥区"},{"code":"430511","name":"北塔区"},{"code":"430522","name":"新邵县"},{"code":"430523","name":"邵阳县"},{"code":"430524","name":"隆回县"},{"code":"430525","name":"洞口县"},{"code":"430527","name":"绥宁县"},{"code":"430528","name":"新宁县"},{"code":"430529","name":"城步苗族自治县"},{"code":"430581","name":"武冈市"},{"code":"430582","name":"邵东市"}]},{"code":"4306","name":"岳阳市","children":[{"code":"430602","name":"岳阳楼区"},{"code":"430603","name":"云溪区"},{"code":"430611","name":"君山区"},{"code":"430621","name":"岳阳县"},{"code":"430623","name":"华容县"},{"code":"430624","name":"湘阴县"},{"code":"430626","name":"平江县"},{"code":"430671","name":"岳阳市屈原管理区"},{"code":"430681","name":"汨罗市"},{"code":"430682","name":"临湘市"}]},{"code":"4307","name":"常德市","children":[{"code":"430702","name":"武陵区"},{"code":"430703","name":"鼎城区"},{"code":"430721","name":"安乡县"},{"code":"430722","name":"汉寿县"},{"code":"430723","name":"澧县"},{"code":"430724","name":"临澧县"},{"code":"430725","name":"桃源县"},{"code":"430726","name":"石门县"},{"code":"430771","name":"常德市西洞庭管理区"},{"code":"430781","name":"津市市"}]},{"code":"4308","name":"张家界市","children":[{"code":"430802","name":"永定区"},{"code":"430811","name":"武陵源区"},{"code":"430821","name":"慈利县"},{"code":"430822","name":"桑植县"}]},{"code":"4309","name":"益阳市","children":[{"code":"430902","name":"资阳区"},{"code":"430903","name":"赫山区"},{"code":"430921","name":"南县"},{"code":"430922","name":"桃江县"},{"code":"430923","name":"安化县"},{"code":"430971","name":"益阳市大通湖管理区"},{"code":"430972","name":"湖南益阳高新技术产业园区"},{"code":"430981","name":"沅江市"}]},{"code":"4310","name":"郴州市","children":[{"code":"431002","name":"北湖区"},{"code":"431003","name":"苏仙区"},{"code":"431021","name":"桂阳县"},{"code":"431022","name":"宜章县"},{"code":"431023","name":"永兴县"},{"code":"431024","name":"嘉禾县"},{"code":"431025","name":"临武县"},{"code":"431026","name":"汝城县"},{"code":"431027","name":"桂东县"},{"code":"431028","name":"安仁县"},{"code":"431081","name":"资兴市"}]},{"code":"4311","name":"永州市","children":[{"code":"431102","name":"零陵区"},{"code":"431103","name":"冷水滩区"},{"code":"431122","name":"东安县"},{"code":"431123","name":"双牌县"},{"code":"431124","name":"道县"},{"code":"431125","name":"江永县"},{"code":"431126","name":"宁远县"},{"code":"431127","name":"蓝山县"},{"code":"431128","name":"新田县"},{"code":"431129","name":"江华瑶族自治县"},{"code":"431171","name":"永州经济技术开发区"},{"code":"431173","name":"永州市回龙圩管理区"},{"code":"431181","name":"祁阳市"}]},{"code":"4312","name":"怀化市","children":[{"code":"431202","name":"鹤城区"},{"code":"431221","name":"中方县"},{"code":"431222","name":"沅陵县"},{"code":"431223","name":"辰溪县"},{"code":"431224","name":"溆浦县"},{"code":"431225","name":"会同县"},{"code":"431226","name":"麻阳苗族自治县"},{"code":"431227","name":"新晃侗族自治县"},{"code":"431228","name":"芷江侗族自治县"},{"code":"431229","name":"靖州苗族侗族自治县"},{"code":"431230","name":"通道侗族自治县"},{"code":"431271","name":"怀化市洪江管理区"},{"code":"431281","name":"洪江市"}]},{"code":"4313","name":"娄底市","children":[{"code":"431302","name":"娄星区"},{"code":"431321","name":"双峰县"},{"code":"431322","name":"新化县"},{"code":"431381","name":"冷水江市"},{"code":"431382","name":"涟源市"}]},{"code":"4331","name":"湘西土家族苗族自治州","children":[{"code":"433101","name":"吉首市"},{"code":"433122","name":"泸溪县"},{"code":"433123","name":"凤凰县"},{"code":"433124","name":"花垣县"},{"code":"433125","name":"保靖县"},{"code":"433126","name":"古丈县"},{"code":"433127","name":"永顺县"},{"code":"433130","name":"龙山县"}]}]},{"code":"44","name":"广东省","children":[{"code":"4401","name":"广州市","children":[{"code":"440103","name":"荔湾区"},{"code":"440104","name":"越秀区"},{"code":"440105","name":"海珠区"},{"code":"440106","name":"天河区"},{"code":"440111","name":"白云区"},{"code":"440112","name":"黄埔区"},{"code":"440113","name":"番禺区"},{"code":"440114","name":"花都区"},{"code":"440115","name":"南沙区"},{"code":"440117","name":"从化区"},{"code":"440118","name":"增城区"}]},{"code":"4402","name":"韶关市","children":[{"code":"440203","name":"武江区"},{"code":"440204","name":"浈江区"},{"code":"440205","name":"曲江区"},{"code":"440222","name":"始兴县"},{"code":"440224","name":"仁化县"},{"code":"440229","name":"翁源县"},{"code":"440232","name":"乳源瑶族自治县"},{"code":"440233","name":"新丰县"},{"code":"440281","name":"乐昌市"},{"code":"440282","name":"南雄市"}]},{"code":"4403","name":"深圳市","children":[{"code":"440303","name":"罗湖区"},{"code":"440304","name":"福田区"},{"code":"440305","name":"南山区"},{"code":"440306","name":"宝安区"},{"code":"440307","name":"龙岗区"},{"code":"440308","name":"盐田区"},{"code":"440309","name":"龙华区"},{"code":"440310","name":"坪山区"},{"code":"440311","name":"光明区"}]},{"code":"4404","name":"珠海市","children":[{"code":"440402","name":"香洲区"},{"code":"440403","name":"斗门区"},{"code":"440404","name":"金湾区"}]},{"code":"4405","name":"汕头市","children":[{"code":"440507","name":"龙湖区"},{"code":"440511","name":"金平区"},{"code":"440512","name":"濠江区"},{"code":"440513","name":"潮阳区"},{"code":"440514","name":"潮南区"},{"code":"440515","name":"澄海区"},{"code":"440523","name":"南澳县"}]},{"code":"4406","name":"佛山市","children":[{"code":"440604","name":"禅城区"},{"code":"440605","name":"南海区"},{"code":"440606","name":"顺德区"},{"code":"440607","name":"三水区"},{"code":"440608","name":"高明区"}]},{"code":"4407","name":"江门市","children":[{"code":"440703","name":"蓬江区"},{"code":"440704","name":"江海区"},{"code":"440705","name":"新会区"},{"code":"440781","name":"台山市"},{"code":"440783","name":"开平市"},{"code":"440784","name":"鹤山市"},{"code":"440785","name":"恩平市"}]},{"code":"4408","name":"湛江市","children":[{"code":"440802","name":"赤坎区"},{"code":"440803","name":"霞山区"},{"code":"440804","name":"坡头区"},{"code":"440811","name":"麻章区"},{"code":"440823","name":"遂溪县"},{"code":"440825","name":"徐闻县"},{"code":"440881","name":"廉江市"},{"code":"440882","name":"雷州市"},{"code":"440883","name":"吴川市"}]},{"code":"4409","name":"茂名市","children":[{"code":"440902","name":"茂南区"},{"code":"440904","name":"电白区"},{"code":"440981","name":"高州市"},{"code":"440982","name":"化州市"},{"code":"440983","name":"信宜市"}]},{"code":"4412","name":"肇庆市","children":[{"code":"441202","name":"端州区"},{"code":"441203","name":"鼎湖区"},{"code":"441204","name":"高要区"},{"code":"441223","name":"广宁县"},{"code":"441224","name":"怀集县"},{"code":"441225","name":"封开县"},{"code":"441226","name":"德庆县"},{"code":"441284","name":"四会市"}]},{"code":"4413","name":"惠州市","children":[{"code":"441302","name":"惠城区"},{"code":"441303","name":"惠阳区"},{"code":"441322","name":"博罗县"},{"code":"441323","name":"惠东县"},{"code":"441324","name":"龙门县"}]},{"code":"4414","name":"梅州市","children":[{"code":"441402","name":"梅江区"},{"code":"441403","name":"梅县区"},{"code":"441422","name":"大埔县"},{"code":"441423","name":"丰顺县"},{"code":"441424","name":"五华县"},{"code":"441426","name":"平远县"},{"code":"441427","name":"蕉岭县"},{"code":"441481","name":"兴宁市"}]},{"code":"4415","name":"汕尾市","children":[{"code":"441502","name":"城区"},{"code":"441521","name":"海丰县"},{"code":"441523","name":"陆河县"},{"code":"441581","name":"陆丰市"}]},{"code":"4416","name":"河源市","children":[{"code":"441602","name":"源城区"},{"code":"441621","name":"紫金县"},{"code":"441622","name":"龙川县"},{"code":"441623","name":"连平县"},{"code":"441624","name":"和平县"},{"code":"441625","name":"东源县"}]},{"code":"4417","name":"阳江市","children":[{"code":"441702","name":"江城区"},{"code":"441704","name":"阳东区"},{"code":"441721","name":"阳西县"},{"code":"441781","name":"阳春市"}]},{"code":"4418","name":"清远市","children":[{"code":"441802","name":"清城区"},{"code":"441803","name":"清新区"},{"code":"441821","name":"佛冈县"},{"code":"441823","name":"阳山县"},{"code":"441825","name":"连山壮族瑶族自治县"},{"code":"441826","name":"连南瑶族自治县"},{"code":"441881","name":"英德市"},{"code":"441882","name":"连州市"}]},{"code":"4419","name":"东莞市","children":[{"code":"441900003","name":"东城街道"},{"code":"441900004","name":"南城街道"},{"code":"441900005","name":"万江街道"},{"code":"441900006","name":"莞城街道"},{"code":"441900101","name":"石碣镇"},{"code":"441900102","name":"石龙镇"},{"code":"441900103","name":"茶山镇"},{"code":"441900104","name":"石排镇"},{"code":"441900105","name":"企石镇"},{"code":"441900106","name":"横沥镇"},{"code":"441900107","name":"桥头镇"},{"code":"441900108","name":"谢岗镇"},{"code":"441900109","name":"东坑镇"},{"code":"441900110","name":"常平镇"},{"code":"441900111","name":"寮步镇"},{"code":"441900112","name":"樟木头镇"},{"code":"441900113","name":"大朗镇"},{"code":"441900114","name":"黄江镇"},{"code":"441900115","name":"清溪镇"},{"code":"441900116","name":"塘厦镇"},{"code":"441900117","name":"凤岗镇"},{"code":"441900118","name":"大岭山镇"},{"code":"441900119","name":"长安镇"},{"code":"441900121","name":"虎门镇"},{"code":"441900122","name":"厚街镇"},{"code":"441900123","name":"沙田镇"},{"code":"441900124","name":"道滘镇"},{"code":"441900125","name":"洪梅镇"},{"code":"441900126","name":"麻涌镇"},{"code":"441900127","name":"望牛墩镇"},{"code":"441900128","name":"中堂镇"},{"code":"441900129","name":"高埗镇"},{"code":"441900401","name":"松山湖"},{"code":"441900402","name":"东莞港"},{"code":"441900403","name":"东莞生态园"},{"code":"441900404","name":"东莞滨海湾新区"}]},{"code":"4420","name":"中山市","children":[{"code":"442000001","name":"石岐街道"},{"code":"442000002","name":"东区街道"},{"code":"442000003","name":"中山港街道"},{"code":"442000004","name":"西区街道"},{"code":"442000005","name":"南区街道"},{"code":"442000006","name":"五桂山街道"},{"code":"442000007","name":"民众街道"},{"code":"442000008","name":"南朗街道"},{"code":"442000101","name":"黄圃镇"},{"code":"442000103","name":"东凤镇"},{"code":"442000105","name":"古镇镇"},{"code":"442000106","name":"沙溪镇"},{"code":"442000107","name":"坦洲镇"},{"code":"442000108","name":"港口镇"},{"code":"442000109","name":"三角镇"},{"code":"442000110","name":"横栏镇"},{"code":"442000111","name":"南头镇"},{"code":"442000112","name":"阜沙镇"},{"code":"442000114","name":"三乡镇"},{"code":"442000115","name":"板芙镇"},{"code":"442000116","name":"大涌镇"},{"code":"442000117","name":"神湾镇"},{"code":"442000118","name":"小榄镇"}]},{"code":"4451","name":"潮州市","children":[{"code":"445102","name":"湘桥区"},{"code":"445103","name":"潮安区"},{"code":"445122","name":"饶平县"}]},{"code":"4452","name":"揭阳市","children":[{"code":"445202","name":"榕城区"},{"code":"445203","name":"揭东区"},{"code":"445222","name":"揭西县"},{"code":"445224","name":"惠来县"},{"code":"445281","name":"普宁市"}]},{"code":"4453","name":"云浮市","children":[{"code":"445302","name":"云城区"},{"code":"445303","name":"云安区"},{"code":"445321","name":"新兴县"},{"code":"445322","name":"郁南县"},{"code":"445381","name":"罗定市"}]}]},{"code":"45","name":"广西壮族自治区","children":[{"code":"4501","name":"南宁市","children":[{"code":"450102","name":"兴宁区"},{"code":"450103","name":"青秀区"},{"code":"450105","name":"江南区"},{"code":"450107","name":"西乡塘区"},{"code":"450108","name":"良庆区"},{"code":"450109","name":"邕宁区"},{"code":"450110","name":"武鸣区"},{"code":"450123","name":"隆安县"},{"code":"450124","name":"马山县"},{"code":"450125","name":"上林县"},{"code":"450126","name":"宾阳县"},{"code":"450181","name":"横州市"}]},{"code":"4502","name":"柳州市","children":[{"code":"450202","name":"城中区"},{"code":"450203","name":"鱼峰区"},{"code":"450204","name":"柳南区"},{"code":"450205","name":"柳北区"},{"code":"450206","name":"柳江区"},{"code":"450222","name":"柳城县"},{"code":"450223","name":"鹿寨县"},{"code":"450224","name":"融安县"},{"code":"450225","name":"融水苗族自治县"},{"code":"450226","name":"三江侗族自治县"}]},{"code":"4503","name":"桂林市","children":[{"code":"450302","name":"秀峰区"},{"code":"450303","name":"叠彩区"},{"code":"450304","name":"象山区"},{"code":"450305","name":"七星区"},{"code":"450311","name":"雁山区"},{"code":"450312","name":"临桂区"},{"code":"450321","name":"阳朔县"},{"code":"450323","name":"灵川县"},{"code":"450324","name":"全州县"},{"code":"450325","name":"兴安县"},{"code":"450326","name":"永福县"},{"code":"450327","name":"灌阳县"},{"code":"450328","name":"龙胜各族自治县"},{"code":"450329","name":"资源县"},{"code":"450330","name":"平乐县"},{"code":"450332","name":"恭城瑶族自治县"},{"code":"450381","name":"荔浦市"}]},{"code":"4504","name":"梧州市","children":[{"code":"450403","name":"万秀区"},{"code":"450405","name":"长洲区"},{"code":"450406","name":"龙圩区"},{"code":"450421","name":"苍梧县"},{"code":"450422","name":"藤县"},{"code":"450423","name":"蒙山县"},{"code":"450481","name":"岑溪市"}]},{"code":"4505","name":"北海市","children":[{"code":"450502","name":"海城区"},{"code":"450503","name":"银海区"},{"code":"450512","name":"铁山港区"},{"code":"450521","name":"合浦县"}]},{"code":"4506","name":"防城港市","children":[{"code":"450602","name":"港口区"},{"code":"450603","name":"防城区"},{"code":"450621","name":"上思县"},{"code":"450681","name":"东兴市"}]},{"code":"4507","name":"钦州市","children":[{"code":"450702","name":"钦南区"},{"code":"450703","name":"钦北区"},{"code":"450721","name":"灵山县"},{"code":"450722","name":"浦北县"}]},{"code":"4508","name":"贵港市","children":[{"code":"450802","name":"港北区"},{"code":"450803","name":"港南区"},{"code":"450804","name":"覃塘区"},{"code":"450821","name":"平南县"},{"code":"450881","name":"桂平市"}]},{"code":"4509","name":"玉林市","children":[{"code":"450902","name":"玉州区"},{"code":"450903","name":"福绵区"},{"code":"450921","name":"容县"},{"code":"450922","name":"陆川县"},{"code":"450923","name":"博白县"},{"code":"450924","name":"兴业县"},{"code":"450981","name":"北流市"}]},{"code":"4510","name":"百色市","children":[{"code":"451002","name":"右江区"},{"code":"451003","name":"田阳区"},{"code":"451022","name":"田东县"},{"code":"451024","name":"德保县"},{"code":"451026","name":"那坡县"},{"code":"451027","name":"凌云县"},{"code":"451028","name":"乐业县"},{"code":"451029","name":"田林县"},{"code":"451030","name":"西林县"},{"code":"451031","name":"隆林各族自治县"},{"code":"451081","name":"靖西市"},{"code":"451082","name":"平果市"}]},{"code":"4511","name":"贺州市","children":[{"code":"451102","name":"八步区"},{"code":"451103","name":"平桂区"},{"code":"451121","name":"昭平县"},{"code":"451122","name":"钟山县"},{"code":"451123","name":"富川瑶族自治县"}]},{"code":"4512","name":"河池市","children":[{"code":"451202","name":"金城江区"},{"code":"451203","name":"宜州区"},{"code":"451221","name":"南丹县"},{"code":"451222","name":"天峨县"},{"code":"451223","name":"凤山县"},{"code":"451224","name":"东兰县"},{"code":"451225","name":"罗城仫佬族自治县"},{"code":"451226","name":"环江毛南族自治县"},{"code":"451227","name":"巴马瑶族自治县"},{"code":"451228","name":"都安瑶族自治县"},{"code":"451229","name":"大化瑶族自治县"}]},{"code":"4513","name":"来宾市","children":[{"code":"451302","name":"兴宾区"},{"code":"451321","name":"忻城县"},{"code":"451322","name":"象州县"},{"code":"451323","name":"武宣县"},{"code":"451324","name":"金秀瑶族自治县"},{"code":"451381","name":"合山市"}]},{"code":"4514","name":"崇左市","children":[{"code":"451402","name":"江州区"},{"code":"451421","name":"扶绥县"},{"code":"451422","name":"宁明县"},{"code":"451423","name":"龙州县"},{"code":"451424","name":"大新县"},{"code":"451425","name":"天等县"},{"code":"451481","name":"凭祥市"}]}]},{"code":"46","name":"海南省","children":[{"code":"4601","name":"海口市","children":[{"code":"460105","name":"秀英区"},{"code":"460106","name":"龙华区"},{"code":"460107","name":"琼山区"},{"code":"460108","name":"美兰区"}]},{"code":"4602","name":"三亚市","children":[{"code":"460202","name":"海棠区"},{"code":"460203","name":"吉阳区"},{"code":"460204","name":"天涯区"},{"code":"460205","name":"崖州区"}]},{"code":"4603","name":"三沙市","children":[{"code":"460321","name":"西沙群岛"},{"code":"460322","name":"南沙群岛"},{"code":"460323","name":"中沙群岛的岛礁及其海域"}]},{"code":"4604","name":"儋州市","children":[{"code":"460400100","name":"那大镇"},{"code":"460400101","name":"和庆镇"},{"code":"460400102","name":"南丰镇"},{"code":"460400103","name":"大成镇"},{"code":"460400104","name":"雅星镇"},{"code":"460400105","name":"兰洋镇"},{"code":"460400106","name":"光村镇"},{"code":"460400107","name":"木棠镇"},{"code":"460400108","name":"海头镇"},{"code":"460400109","name":"峨蔓镇"},{"code":"460400111","name":"王五镇"},{"code":"460400112","name":"白马井镇"},{"code":"460400113","name":"中和镇"},{"code":"460400114","name":"排浦镇"},{"code":"460400115","name":"东成镇"},{"code":"460400116","name":"新州镇"},{"code":"460400499","name":"洋浦经济开发区"},{"code":"460400500","name":"华南热作学院"}]},{"code":"4690","name":"省直辖县级行政区划","children":[{"code":"469001","name":"五指山市"},{"code":"469002","name":"琼海市"},{"code":"469005","name":"文昌市"},{"code":"469006","name":"万宁市"},{"code":"469007","name":"东方市"},{"code":"469021","name":"定安县"},{"code":"469022","name":"屯昌县"},{"code":"469023","name":"澄迈县"},{"code":"469024","name":"临高县"},{"code":"469025","name":"白沙黎族自治县"},{"code":"469026","name":"昌江黎族自治县"},{"code":"469027","name":"乐东黎族自治县"},{"code":"469028","name":"陵水黎族自治县"},{"code":"469029","name":"保亭黎族苗族自治县"},{"code":"469030","name":"琼中黎族苗族自治县"}]}]},{"code":"50","name":"重庆市","children":[{"code":"5001","name":"市辖区","children":[{"code":"500101","name":"万州区"},{"code":"500102","name":"涪陵区"},{"code":"500103","name":"渝中区"},{"code":"500104","name":"大渡口区"},{"code":"500105","name":"江北区"},{"code":"500106","name":"沙坪坝区"},{"code":"500107","name":"九龙坡区"},{"code":"500108","name":"南岸区"},{"code":"500109","name":"北碚区"},{"code":"500110","name":"綦江区"},{"code":"500111","name":"大足区"},{"code":"500112","name":"渝北区"},{"code":"500113","name":"巴南区"},{"code":"500114","name":"黔江区"},{"code":"500115","name":"长寿区"},{"code":"500116","name":"江津区"},{"code":"500117","name":"合川区"},{"code":"500118","name":"永川区"},{"code":"500119","name":"南川区"},{"code":"500120","name":"璧山区"},{"code":"500151","name":"铜梁区"},{"code":"500152","name":"潼南区"},{"code":"500153","name":"荣昌区"},{"code":"500154","name":"开州区"},{"code":"500155","name":"梁平区"},{"code":"500156","name":"武隆区"}]},{"code":"5002","name":"县","children":[{"code":"500229","name":"城口县"},{"code":"500230","name":"丰都县"},{"code":"500231","name":"垫江县"},{"code":"500233","name":"忠县"},{"code":"500235","name":"云阳县"},{"code":"500236","name":"奉节县"},{"code":"500237","name":"巫山县"},{"code":"500238","name":"巫溪县"},{"code":"500240","name":"石柱土家族自治县"},{"code":"500241","name":"秀山土家族苗族自治县"},{"code":"500242","name":"酉阳土家族苗族自治县"},{"code":"500243","name":"彭水苗族土家族自治县"}]}]},{"code":"51","name":"四川省","children":[{"code":"5101","name":"成都市","children":[{"code":"510104","name":"锦江区"},{"code":"510105","name":"青羊区"},{"code":"510106","name":"金牛区"},{"code":"510107","name":"武侯区"},{"code":"510108","name":"成华区"},{"code":"510112","name":"龙泉驿区"},{"code":"510113","name":"青白江区"},{"code":"510114","name":"新都区"},{"code":"510115","name":"温江区"},{"code":"510116","name":"双流区"},{"code":"510117","name":"郫都区"},{"code":"510118","name":"新津区"},{"code":"510121","name":"金堂县"},{"code":"510129","name":"大邑县"},{"code":"510131","name":"蒲江县"},{"code":"510181","name":"都江堰市"},{"code":"510182","name":"彭州市"},{"code":"510183","name":"邛崃市"},{"code":"510184","name":"崇州市"},{"code":"510185","name":"简阳市"}]},{"code":"5103","name":"自贡市","children":[{"code":"510302","name":"自流井区"},{"code":"510303","name":"贡井区"},{"code":"510304","name":"大安区"},{"code":"510311","name":"沿滩区"},{"code":"510321","name":"荣县"},{"code":"510322","name":"富顺县"}]},{"code":"5104","name":"攀枝花市","children":[{"code":"510402","name":"东区"},{"code":"510403","name":"西区"},{"code":"510411","name":"仁和区"},{"code":"510421","name":"米易县"},{"code":"510422","name":"盐边县"}]},{"code":"5105","name":"泸州市","children":[{"code":"510502","name":"江阳区"},{"code":"510503","name":"纳溪区"},{"code":"510504","name":"龙马潭区"},{"code":"510521","name":"泸县"},{"code":"510522","name":"合江县"},{"code":"510524","name":"叙永县"},{"code":"510525","name":"古蔺县"}]},{"code":"5106","name":"德阳市","children":[{"code":"510603","name":"旌阳区"},{"code":"510604","name":"罗江区"},{"code":"510623","name":"中江县"},{"code":"510681","name":"广汉市"},{"code":"510682","name":"什邡市"},{"code":"510683","name":"绵竹市"}]},{"code":"5107","name":"绵阳市","children":[{"code":"510703","name":"涪城区"},{"code":"510704","name":"游仙区"},{"code":"510705","name":"安州区"},{"code":"510722","name":"三台县"},{"code":"510723","name":"盐亭县"},{"code":"510725","name":"梓潼县"},{"code":"510726","name":"北川羌族自治县"},{"code":"510727","name":"平武县"},{"code":"510781","name":"江油市"}]},{"code":"5108","name":"广元市","children":[{"code":"510802","name":"利州区"},{"code":"510811","name":"昭化区"},{"code":"510812","name":"朝天区"},{"code":"510821","name":"旺苍县"},{"code":"510822","name":"青川县"},{"code":"510823","name":"剑阁县"},{"code":"510824","name":"苍溪县"}]},{"code":"5109","name":"遂宁市","children":[{"code":"510903","name":"船山区"},{"code":"510904","name":"安居区"},{"code":"510921","name":"蓬溪县"},{"code":"510923","name":"大英县"},{"code":"510981","name":"射洪市"}]},{"code":"5110","name":"内江市","children":[{"code":"511002","name":"市中区"},{"code":"511011","name":"东兴区"},{"code":"511024","name":"威远县"},{"code":"511025","name":"资中县"},{"code":"511071","name":"内江经济开发区"},{"code":"511083","name":"隆昌市"}]},{"code":"5111","name":"乐山市","children":[{"code":"511102","name":"市中区"},{"code":"511111","name":"沙湾区"},{"code":"511112","name":"五通桥区"},{"code":"511113","name":"金口河区"},{"code":"511123","name":"犍为县"},{"code":"511124","name":"井研县"},{"code":"511126","name":"夹江县"},{"code":"511129","name":"沐川县"},{"code":"511132","name":"峨边彝族自治县"},{"code":"511133","name":"马边彝族自治县"},{"code":"511181","name":"峨眉山市"}]},{"code":"5113","name":"南充市","children":[{"code":"511302","name":"顺庆区"},{"code":"511303","name":"高坪区"},{"code":"511304","name":"嘉陵区"},{"code":"511321","name":"南部县"},{"code":"511322","name":"营山县"},{"code":"511323","name":"蓬安县"},{"code":"511324","name":"仪陇县"},{"code":"511325","name":"西充县"},{"code":"511381","name":"阆中市"}]},{"code":"5114","name":"眉山市","children":[{"code":"511402","name":"东坡区"},{"code":"511403","name":"彭山区"},{"code":"511421","name":"仁寿县"},{"code":"511423","name":"洪雅县"},{"code":"511424","name":"丹棱县"},{"code":"511425","name":"青神县"}]},{"code":"5115","name":"宜宾市","children":[{"code":"511502","name":"翠屏区"},{"code":"511503","name":"南溪区"},{"code":"511504","name":"叙州区"},{"code":"511523","name":"江安县"},{"code":"511524","name":"长宁县"},{"code":"511525","name":"高县"},{"code":"511526","name":"珙县"},{"code":"511527","name":"筠连县"},{"code":"511528","name":"兴文县"},{"code":"511529","name":"屏山县"}]},{"code":"5116","name":"广安市","children":[{"code":"511602","name":"广安区"},{"code":"511603","name":"前锋区"},{"code":"511621","name":"岳池县"},{"code":"511622","name":"武胜县"},{"code":"511623","name":"邻水县"},{"code":"511681","name":"华蓥市"}]},{"code":"5117","name":"达州市","children":[{"code":"511702","name":"通川区"},{"code":"511703","name":"达川区"},{"code":"511722","name":"宣汉县"},{"code":"511723","name":"开江县"},{"code":"511724","name":"大竹县"},{"code":"511725","name":"渠县"},{"code":"511771","name":"达州经济开发区"},{"code":"511781","name":"万源市"}]},{"code":"5118","name":"雅安市","children":[{"code":"511802","name":"雨城区"},{"code":"511803","name":"名山区"},{"code":"511822","name":"荥经县"},{"code":"511823","name":"汉源县"},{"code":"511824","name":"石棉县"},{"code":"511825","name":"天全县"},{"code":"511826","name":"芦山县"},{"code":"511827","name":"宝兴县"}]},{"code":"5119","name":"巴中市","children":[{"code":"511902","name":"巴州区"},{"code":"511903","name":"恩阳区"},{"code":"511921","name":"通江县"},{"code":"511922","name":"南江县"},{"code":"511923","name":"平昌县"},{"code":"511971","name":"巴中经济开发区"}]},{"code":"5120","name":"资阳市","children":[{"code":"512002","name":"雁江区"},{"code":"512021","name":"安岳县"},{"code":"512022","name":"乐至县"}]},{"code":"5132","name":"阿坝藏族羌族自治州","children":[{"code":"513201","name":"马尔康市"},{"code":"513221","name":"汶川县"},{"code":"513222","name":"理县"},{"code":"513223","name":"茂县"},{"code":"513224","name":"松潘县"},{"code":"513225","name":"九寨沟县"},{"code":"513226","name":"金川县"},{"code":"513227","name":"小金县"},{"code":"513228","name":"黑水县"},{"code":"513230","name":"壤塘县"},{"code":"513231","name":"阿坝县"},{"code":"513232","name":"若尔盖县"},{"code":"513233","name":"红原县"}]},{"code":"5133","name":"甘孜藏族自治州","children":[{"code":"513301","name":"康定市"},{"code":"513322","name":"泸定县"},{"code":"513323","name":"丹巴县"},{"code":"513324","name":"九龙县"},{"code":"513325","name":"雅江县"},{"code":"513326","name":"道孚县"},{"code":"513327","name":"炉霍县"},{"code":"513328","name":"甘孜县"},{"code":"513329","name":"新龙县"},{"code":"513330","name":"德格县"},{"code":"513331","name":"白玉县"},{"code":"513332","name":"石渠县"},{"code":"513333","name":"色达县"},{"code":"513334","name":"理塘县"},{"code":"513335","name":"巴塘县"},{"code":"513336","name":"乡城县"},{"code":"513337","name":"稻城县"},{"code":"513338","name":"得荣县"}]},{"code":"5134","name":"凉山彝族自治州","children":[{"code":"513401","name":"西昌市"},{"code":"513402","name":"会理市"},{"code":"513422","name":"木里藏族自治县"},{"code":"513423","name":"盐源县"},{"code":"513424","name":"德昌县"},{"code":"513426","name":"会东县"},{"code":"513427","name":"宁南县"},{"code":"513428","name":"普格县"},{"code":"513429","name":"布拖县"},{"code":"513430","name":"金阳县"},{"code":"513431","name":"昭觉县"},{"code":"513432","name":"喜德县"},{"code":"513433","name":"冕宁县"},{"code":"513434","name":"越西县"},{"code":"513435","name":"甘洛县"},{"code":"513436","name":"美姑县"},{"code":"513437","name":"雷波县"}]}]},{"code":"52","name":"贵州省","children":[{"code":"5201","name":"贵阳市","children":[{"code":"520102","name":"南明区"},{"code":"520103","name":"云岩区"},{"code":"520111","name":"花溪区"},{"code":"520112","name":"乌当区"},{"code":"520113","name":"白云区"},{"code":"520115","name":"观山湖区"},{"code":"520121","name":"开阳县"},{"code":"520122","name":"息烽县"},{"code":"520123","name":"修文县"},{"code":"520181","name":"清镇市"}]},{"code":"5202","name":"六盘水市","children":[{"code":"520201","name":"钟山区"},{"code":"520203","name":"六枝特区"},{"code":"520204","name":"水城区"},{"code":"520281","name":"盘州市"}]},{"code":"5203","name":"遵义市","children":[{"code":"520302","name":"红花岗区"},{"code":"520303","name":"汇川区"},{"code":"520304","name":"播州区"},{"code":"520322","name":"桐梓县"},{"code":"520323","name":"绥阳县"},{"code":"520324","name":"正安县"},{"code":"520325","name":"道真仡佬族苗族自治县"},{"code":"520326","name":"务川仡佬族苗族自治县"},{"code":"520327","name":"凤冈县"},{"code":"520328","name":"湄潭县"},{"code":"520329","name":"余庆县"},{"code":"520330","name":"习水县"},{"code":"520381","name":"赤水市"},{"code":"520382","name":"仁怀市"}]},{"code":"5204","name":"安顺市","children":[{"code":"520402","name":"西秀区"},{"code":"520403","name":"平坝区"},{"code":"520422","name":"普定县"},{"code":"520423","name":"镇宁布依族苗族自治县"},{"code":"520424","name":"关岭布依族苗族自治县"},{"code":"520425","name":"紫云苗族布依族自治县"}]},{"code":"5205","name":"毕节市","children":[{"code":"520502","name":"七星关区"},{"code":"520521","name":"大方县"},{"code":"520523","name":"金沙县"},{"code":"520524","name":"织金县"},{"code":"520525","name":"纳雍县"},{"code":"520526","name":"威宁彝族回族苗族自治县"},{"code":"520527","name":"赫章县"},{"code":"520581","name":"黔西市"}]},{"code":"5206","name":"铜仁市","children":[{"code":"520602","name":"碧江区"},{"code":"520603","name":"万山区"},{"code":"520621","name":"江口县"},{"code":"520622","name":"玉屏侗族自治县"},{"code":"520623","name":"石阡县"},{"code":"520624","name":"思南县"},{"code":"520625","name":"印江土家族苗族自治县"},{"code":"520626","name":"德江县"},{"code":"520627","name":"沿河土家族自治县"},{"code":"520628","name":"松桃苗族自治县"}]},{"code":"5223","name":"黔西南布依族苗族自治州","children":[{"code":"522301","name":"兴义市"},{"code":"522302","name":"兴仁市"},{"code":"522323","name":"普安县"},{"code":"522324","name":"晴隆县"},{"code":"522325","name":"贞丰县"},{"code":"522326","name":"望谟县"},{"code":"522327","name":"册亨县"},{"code":"522328","name":"安龙县"}]},{"code":"5226","name":"黔东南苗族侗族自治州","children":[{"code":"522601","name":"凯里市"},{"code":"522622","name":"黄平县"},{"code":"522623","name":"施秉县"},{"code":"522624","name":"三穗县"},{"code":"522625","name":"镇远县"},{"code":"522626","name":"岑巩县"},{"code":"522627","name":"天柱县"},{"code":"522628","name":"锦屏县"},{"code":"522629","name":"剑河县"},{"code":"522630","name":"台江县"},{"code":"522631","name":"黎平县"},{"code":"522632","name":"榕江县"},{"code":"522633","name":"从江县"},{"code":"522634","name":"雷山县"},{"code":"522635","name":"麻江县"},{"code":"522636","name":"丹寨县"}]},{"code":"5227","name":"黔南布依族苗族自治州","children":[{"code":"522701","name":"都匀市"},{"code":"522702","name":"福泉市"},{"code":"522722","name":"荔波县"},{"code":"522723","name":"贵定县"},{"code":"522725","name":"瓮安县"},{"code":"522726","name":"独山县"},{"code":"522727","name":"平塘县"},{"code":"522728","name":"罗甸县"},{"code":"522729","name":"长顺县"},{"code":"522730","name":"龙里县"},{"code":"522731","name":"惠水县"},{"code":"522732","name":"三都水族自治县"}]}]},{"code":"53","name":"云南省","children":[{"code":"5301","name":"昆明市","children":[{"code":"530102","name":"五华区"},{"code":"530103","name":"盘龙区"},{"code":"530111","name":"官渡区"},{"code":"530112","name":"西山区"},{"code":"530113","name":"东川区"},{"code":"530114","name":"呈贡区"},{"code":"530115","name":"晋宁区"},{"code":"530124","name":"富民县"},{"code":"530125","name":"宜良县"},{"code":"530126","name":"石林彝族自治县"},{"code":"530127","name":"嵩明县"},{"code":"530128","name":"禄劝彝族苗族自治县"},{"code":"530129","name":"寻甸回族彝族自治县"},{"code":"530181","name":"安宁市"}]},{"code":"5303","name":"曲靖市","children":[{"code":"530302","name":"麒麟区"},{"code":"530303","name":"沾益区"},{"code":"530304","name":"马龙区"},{"code":"530322","name":"陆良县"},{"code":"530323","name":"师宗县"},{"code":"530324","name":"罗平县"},{"code":"530325","name":"富源县"},{"code":"530326","name":"会泽县"},{"code":"530381","name":"宣威市"}]},{"code":"5304","name":"玉溪市","children":[{"code":"530402","name":"红塔区"},{"code":"530403","name":"江川区"},{"code":"530423","name":"通海县"},{"code":"530424","name":"华宁县"},{"code":"530425","name":"易门县"},{"code":"530426","name":"峨山彝族自治县"},{"code":"530427","name":"新平彝族傣族自治县"},{"code":"530428","name":"元江哈尼族彝族傣族自治县"},{"code":"530481","name":"澄江市"}]},{"code":"5305","name":"保山市","children":[{"code":"530502","name":"隆阳区"},{"code":"530521","name":"施甸县"},{"code":"530523","name":"龙陵县"},{"code":"530524","name":"昌宁县"},{"code":"530581","name":"腾冲市"}]},{"code":"5306","name":"昭通市","children":[{"code":"530602","name":"昭阳区"},{"code":"530621","name":"鲁甸县"},{"code":"530622","name":"巧家县"},{"code":"530623","name":"盐津县"},{"code":"530624","name":"大关县"},{"code":"530625","name":"永善县"},{"code":"530626","name":"绥江县"},{"code":"530627","name":"镇雄县"},{"code":"530628","name":"彝良县"},{"code":"530629","name":"威信县"},{"code":"530681","name":"水富市"}]},{"code":"5307","name":"丽江市","children":[{"code":"530702","name":"古城区"},{"code":"530721","name":"玉龙纳西族自治县"},{"code":"530722","name":"永胜县"},{"code":"530723","name":"华坪县"},{"code":"530724","name":"宁蒗彝族自治县"}]},{"code":"5308","name":"普洱市","children":[{"code":"530802","name":"思茅区"},{"code":"530821","name":"宁洱哈尼族彝族自治县"},{"code":"530822","name":"墨江哈尼族自治县"},{"code":"530823","name":"景东彝族自治县"},{"code":"530824","name":"景谷傣族彝族自治县"},{"code":"530825","name":"镇沅彝族哈尼族拉祜族自治县"},{"code":"530826","name":"江城哈尼族彝族自治县"},{"code":"530827","name":"孟连傣族拉祜族佤族自治县"},{"code":"530828","name":"澜沧拉祜族自治县"},{"code":"530829","name":"西盟佤族自治县"}]},{"code":"5309","name":"临沧市","children":[{"code":"530902","name":"临翔区"},{"code":"530921","name":"凤庆县"},{"code":"530922","name":"云县"},{"code":"530923","name":"永德县"},{"code":"530924","name":"镇康县"},{"code":"530925","name":"双江拉祜族佤族布朗族傣族自治县"},{"code":"530926","name":"耿马傣族佤族自治县"},{"code":"530927","name":"沧源佤族自治县"}]},{"code":"5323","name":"楚雄彝族自治州","children":[{"code":"532301","name":"楚雄市"},{"code":"532302","name":"禄丰市"},{"code":"532322","name":"双柏县"},{"code":"532323","name":"牟定县"},{"code":"532324","name":"南华县"},{"code":"532325","name":"姚安县"},{"code":"532326","name":"大姚县"},{"code":"532327","name":"永仁县"},{"code":"532328","name":"元谋县"},{"code":"532329","name":"武定县"}]},{"code":"5325","name":"红河哈尼族彝族自治州","children":[{"code":"532501","name":"个旧市"},{"code":"532502","name":"开远市"},{"code":"532503","name":"蒙自市"},{"code":"532504","name":"弥勒市"},{"code":"532523","name":"屏边苗族自治县"},{"code":"532524","name":"建水县"},{"code":"532525","name":"石屏县"},{"code":"532527","name":"泸西县"},{"code":"532528","name":"元阳县"},{"code":"532529","name":"红河县"},{"code":"532530","name":"金平苗族瑶族傣族自治县"},{"code":"532531","name":"绿春县"},{"code":"532532","name":"河口瑶族自治县"}]},{"code":"5326","name":"文山壮族苗族自治州","children":[{"code":"532601","name":"文山市"},{"code":"532622","name":"砚山县"},{"code":"532623","name":"西畴县"},{"code":"532624","name":"麻栗坡县"},{"code":"532625","name":"马关县"},{"code":"532626","name":"丘北县"},{"code":"532627","name":"广南县"},{"code":"532628","name":"富宁县"}]},{"code":"5328","name":"西双版纳傣族自治州","children":[{"code":"532801","name":"景洪市"},{"code":"532822","name":"勐海县"},{"code":"532823","name":"勐腊县"}]},{"code":"5329","name":"大理白族自治州","children":[{"code":"532901","name":"大理市"},{"code":"532922","name":"漾濞彝族自治县"},{"code":"532923","name":"祥云县"},{"code":"532924","name":"宾川县"},{"code":"532925","name":"弥渡县"},{"code":"532926","name":"南涧彝族自治县"},{"code":"532927","name":"巍山彝族回族自治县"},{"code":"532928","name":"永平县"},{"code":"532929","name":"云龙县"},{"code":"532930","name":"洱源县"},{"code":"532931","name":"剑川县"},{"code":"532932","name":"鹤庆县"}]},{"code":"5331","name":"德宏傣族景颇族自治州","children":[{"code":"533102","name":"瑞丽市"},{"code":"533103","name":"芒市"},{"code":"533122","name":"梁河县"},{"code":"533123","name":"盈江县"},{"code":"533124","name":"陇川县"}]},{"code":"5333","name":"怒江傈僳族自治州","children":[{"code":"533301","name":"泸水市"},{"code":"533323","name":"福贡县"},{"code":"533324","name":"贡山独龙族怒族自治县"},{"code":"533325","name":"兰坪白族普米族自治县"}]},{"code":"5334","name":"迪庆藏族自治州","children":[{"code":"533401","name":"香格里拉市"},{"code":"533422","name":"德钦县"},{"code":"533423","name":"维西傈僳族自治县"}]}]},{"code":"54","name":"西藏自治区","children":[{"code":"5401","name":"拉萨市","children":[{"code":"540102","name":"城关区"},{"code":"540103","name":"堆龙德庆区"},{"code":"540104","name":"达孜区"},{"code":"540121","name":"林周县"},{"code":"540122","name":"当雄县"},{"code":"540123","name":"尼木县"},{"code":"540124","name":"曲水县"},{"code":"540127","name":"墨竹工卡县"},{"code":"540171","name":"格尔木藏青工业园区"},{"code":"540172","name":"拉萨经济技术开发区"},{"code":"540173","name":"西藏文化旅游创意园区"},{"code":"540174","name":"达孜工业园区"}]},{"code":"5402","name":"日喀则市","children":[{"code":"540202","name":"桑珠孜区"},{"code":"540221","name":"南木林县"},{"code":"540222","name":"江孜县"},{"code":"540223","name":"定日县"},{"code":"540224","name":"萨迦县"},{"code":"540225","name":"拉孜县"},{"code":"540226","name":"昂仁县"},{"code":"540227","name":"谢通门县"},{"code":"540228","name":"白朗县"},{"code":"540229","name":"仁布县"},{"code":"540230","name":"康马县"},{"code":"540231","name":"定结县"},{"code":"540232","name":"仲巴县"},{"code":"540233","name":"亚东县"},{"code":"540234","name":"吉隆县"},{"code":"540235","name":"聂拉木县"},{"code":"540236","name":"萨嘎县"},{"code":"540237","name":"岗巴县"}]},{"code":"5403","name":"昌都市","children":[{"code":"540302","name":"卡若区"},{"code":"540321","name":"江达县"},{"code":"540322","name":"贡觉县"},{"code":"540323","name":"类乌齐县"},{"code":"540324","name":"丁青县"},{"code":"540325","name":"察雅县"},{"code":"540326","name":"八宿县"},{"code":"540327","name":"左贡县"},{"code":"540328","name":"芒康县"},{"code":"540329","name":"洛隆县"},{"code":"540330","name":"边坝县"}]},{"code":"5404","name":"林芝市","children":[{"code":"540402","name":"巴宜区"},{"code":"540421","name":"工布江达县"},{"code":"540422","name":"米林县"},{"code":"540423","name":"墨脱县"},{"code":"540424","name":"波密县"},{"code":"540425","name":"察隅县"},{"code":"540426","name":"朗县"}]},{"code":"5405","name":"山南市","children":[{"code":"540502","name":"乃东区"},{"code":"540521","name":"扎囊县"},{"code":"540522","name":"贡嘎县"},{"code":"540523","name":"桑日县"},{"code":"540524","name":"琼结县"},{"code":"540525","name":"曲松县"},{"code":"540526","name":"措美县"},{"code":"540527","name":"洛扎县"},{"code":"540528","name":"加查县"},{"code":"540529","name":"隆子县"},{"code":"540530","name":"错那县"},{"code":"540531","name":"浪卡子县"}]},{"code":"5406","name":"那曲市","children":[{"code":"540602","name":"色尼区"},{"code":"540621","name":"嘉黎县"},{"code":"540622","name":"比如县"},{"code":"540623","name":"聂荣县"},{"code":"540624","name":"安多县"},{"code":"540625","name":"申扎县"},{"code":"540626","name":"索县"},{"code":"540627","name":"班戈县"},{"code":"540628","name":"巴青县"},{"code":"540629","name":"尼玛县"},{"code":"540630","name":"双湖县"}]},{"code":"5425","name":"阿里地区","children":[{"code":"542521","name":"普兰县"},{"code":"542522","name":"札达县"},{"code":"542523","name":"噶尔县"},{"code":"542524","name":"日土县"},{"code":"542525","name":"革吉县"},{"code":"542526","name":"改则县"},{"code":"542527","name":"措勤县"}]}]},{"code":"61","name":"陕西省","children":[{"code":"6101","name":"西安市","children":[{"code":"610102","name":"新城区"},{"code":"610103","name":"碑林区"},{"code":"610104","name":"莲湖区"},{"code":"610111","name":"灞桥区"},{"code":"610112","name":"未央区"},{"code":"610113","name":"雁塔区"},{"code":"610114","name":"阎良区"},{"code":"610115","name":"临潼区"},{"code":"610116","name":"长安区"},{"code":"610117","name":"高陵区"},{"code":"610118","name":"鄠邑区"},{"code":"610122","name":"蓝田县"},{"code":"610124","name":"周至县"}]},{"code":"6102","name":"铜川市","children":[{"code":"610202","name":"王益区"},{"code":"610203","name":"印台区"},{"code":"610204","name":"耀州区"},{"code":"610222","name":"宜君县"}]},{"code":"6103","name":"宝鸡市","children":[{"code":"610302","name":"渭滨区"},{"code":"610303","name":"金台区"},{"code":"610304","name":"陈仓区"},{"code":"610305","name":"凤翔区"},{"code":"610323","name":"岐山县"},{"code":"610324","name":"扶风县"},{"code":"610326","name":"眉县"},{"code":"610327","name":"陇县"},{"code":"610328","name":"千阳县"},{"code":"610329","name":"麟游县"},{"code":"610330","name":"凤县"},{"code":"610331","name":"太白县"}]},{"code":"6104","name":"咸阳市","children":[{"code":"610402","name":"秦都区"},{"code":"610403","name":"杨陵区"},{"code":"610404","name":"渭城区"},{"code":"610422","name":"三原县"},{"code":"610423","name":"泾阳县"},{"code":"610424","name":"乾县"},{"code":"610425","name":"礼泉县"},{"code":"610426","name":"永寿县"},{"code":"610428","name":"长武县"},{"code":"610429","name":"旬邑县"},{"code":"610430","name":"淳化县"},{"code":"610431","name":"武功县"},{"code":"610481","name":"兴平市"},{"code":"610482","name":"彬州市"}]},{"code":"6105","name":"渭南市","children":[{"code":"610502","name":"临渭区"},{"code":"610503","name":"华州区"},{"code":"610522","name":"潼关县"},{"code":"610523","name":"大荔县"},{"code":"610524","name":"合阳县"},{"code":"610525","name":"澄城县"},{"code":"610526","name":"蒲城县"},{"code":"610527","name":"白水县"},{"code":"610528","name":"富平县"},{"code":"610581","name":"韩城市"},{"code":"610582","name":"华阴市"}]},{"code":"6106","name":"延安市","children":[{"code":"610602","name":"宝塔区"},{"code":"610603","name":"安塞区"},{"code":"610621","name":"延长县"},{"code":"610622","name":"延川县"},{"code":"610625","name":"志丹县"},{"code":"610626","name":"吴起县"},{"code":"610627","name":"甘泉县"},{"code":"610628","name":"富县"},{"code":"610629","name":"洛川县"},{"code":"610630","name":"宜川县"},{"code":"610631","name":"黄龙县"},{"code":"610632","name":"黄陵县"},{"code":"610681","name":"子长市"}]},{"code":"6107","name":"汉中市","children":[{"code":"610702","name":"汉台区"},{"code":"610703","name":"南郑区"},{"code":"610722","name":"城固县"},{"code":"610723","name":"洋县"},{"code":"610724","name":"西乡县"},{"code":"610725","name":"勉县"},{"code":"610726","name":"宁强县"},{"code":"610727","name":"略阳县"},{"code":"610728","name":"镇巴县"},{"code":"610729","name":"留坝县"},{"code":"610730","name":"佛坪县"}]},{"code":"6108","name":"榆林市","children":[{"code":"610802","name":"榆阳区"},{"code":"610803","name":"横山区"},{"code":"610822","name":"府谷县"},{"code":"610824","name":"靖边县"},{"code":"610825","name":"定边县"},{"code":"610826","name":"绥德县"},{"code":"610827","name":"米脂县"},{"code":"610828","name":"佳县"},{"code":"610829","name":"吴堡县"},{"code":"610830","name":"清涧县"},{"code":"610831","name":"子洲县"},{"code":"610881","name":"神木市"}]},{"code":"6109","name":"安康市","children":[{"code":"610902","name":"汉滨区"},{"code":"610921","name":"汉阴县"},{"code":"610922","name":"石泉县"},{"code":"610923","name":"宁陕县"},{"code":"610924","name":"紫阳县"},{"code":"610925","name":"岚皋县"},{"code":"610926","name":"平利县"},{"code":"610927","name":"镇坪县"},{"code":"610929","name":"白河县"},{"code":"610981","name":"旬阳市"}]},{"code":"6110","name":"商洛市","children":[{"code":"611002","name":"商州区"},{"code":"611021","name":"洛南县"},{"code":"611022","name":"丹凤县"},{"code":"611023","name":"商南县"},{"code":"611024","name":"山阳县"},{"code":"611025","name":"镇安县"},{"code":"611026","name":"柞水县"}]}]},{"code":"62","name":"甘肃省","children":[{"code":"6201","name":"兰州市","children":[{"code":"620102","name":"城关区"},{"code":"620103","name":"七里河区"},{"code":"620104","name":"西固区"},{"code":"620105","name":"安宁区"},{"code":"620111","name":"红古区"},{"code":"620121","name":"永登县"},{"code":"620122","name":"皋兰县"},{"code":"620123","name":"榆中县"},{"code":"620171","name":"兰州新区"}]},{"code":"6202","name":"嘉峪关市","children":[{"code":"620201001","name":"雄关街道"},{"code":"620201002","name":"钢城街道"},{"code":"620201100","name":"新城镇"},{"code":"620201101","name":"峪泉镇"},{"code":"620201102","name":"文殊镇"}]},{"code":"6203","name":"金昌市","children":[{"code":"620302","name":"金川区"},{"code":"620321","name":"永昌县"}]},{"code":"6204","name":"白银市","children":[{"code":"620402","name":"白银区"},{"code":"620403","name":"平川区"},{"code":"620421","name":"靖远县"},{"code":"620422","name":"会宁县"},{"code":"620423","name":"景泰县"}]},{"code":"6205","name":"天水市","children":[{"code":"620502","name":"秦州区"},{"code":"620503","name":"麦积区"},{"code":"620521","name":"清水县"},{"code":"620522","name":"秦安县"},{"code":"620523","name":"甘谷县"},{"code":"620524","name":"武山县"},{"code":"620525","name":"张家川回族自治县"}]},{"code":"6206","name":"武威市","children":[{"code":"620602","name":"凉州区"},{"code":"620621","name":"民勤县"},{"code":"620622","name":"古浪县"},{"code":"620623","name":"天祝藏族自治县"}]},{"code":"6207","name":"张掖市","children":[{"code":"620702","name":"甘州区"},{"code":"620721","name":"肃南裕固族自治县"},{"code":"620722","name":"民乐县"},{"code":"620723","name":"临泽县"},{"code":"620724","name":"高台县"},{"code":"620725","name":"山丹县"}]},{"code":"6208","name":"平凉市","children":[{"code":"620802","name":"崆峒区"},{"code":"620821","name":"泾川县"},{"code":"620822","name":"灵台县"},{"code":"620823","name":"崇信县"},{"code":"620825","name":"庄浪县"},{"code":"620826","name":"静宁县"},{"code":"620881","name":"华亭市"}]},{"code":"6209","name":"酒泉市","children":[{"code":"620902","name":"肃州区"},{"code":"620921","name":"金塔县"},{"code":"620922","name":"瓜州县"},{"code":"620923","name":"肃北蒙古族自治县"},{"code":"620924","name":"阿克塞哈萨克族自治县"},{"code":"620981","name":"玉门市"},{"code":"620982","name":"敦煌市"}]},{"code":"6210","name":"庆阳市","children":[{"code":"621002","name":"西峰区"},{"code":"621021","name":"庆城县"},{"code":"621022","name":"环县"},{"code":"621023","name":"华池县"},{"code":"621024","name":"合水县"},{"code":"621025","name":"正宁县"},{"code":"621026","name":"宁县"},{"code":"621027","name":"镇原县"}]},{"code":"6211","name":"定西市","children":[{"code":"621102","name":"安定区"},{"code":"621121","name":"通渭县"},{"code":"621122","name":"陇西县"},{"code":"621123","name":"渭源县"},{"code":"621124","name":"临洮县"},{"code":"621125","name":"漳县"},{"code":"621126","name":"岷县"}]},{"code":"6212","name":"陇南市","children":[{"code":"621202","name":"武都区"},{"code":"621221","name":"成县"},{"code":"621222","name":"文县"},{"code":"621223","name":"宕昌县"},{"code":"621224","name":"康县"},{"code":"621225","name":"西和县"},{"code":"621226","name":"礼县"},{"code":"621227","name":"徽县"},{"code":"621228","name":"两当县"}]},{"code":"6229","name":"临夏回族自治州","children":[{"code":"622901","name":"临夏市"},{"code":"622921","name":"临夏县"},{"code":"622922","name":"康乐县"},{"code":"622923","name":"永靖县"},{"code":"622924","name":"广河县"},{"code":"622925","name":"和政县"},{"code":"622926","name":"东乡族自治县"},{"code":"622927","name":"积石山保安族东乡族撒拉族自治县"}]},{"code":"6230","name":"甘南藏族自治州","children":[{"code":"623001","name":"合作市"},{"code":"623021","name":"临潭县"},{"code":"623022","name":"卓尼县"},{"code":"623023","name":"舟曲县"},{"code":"623024","name":"迭部县"},{"code":"623025","name":"玛曲县"},{"code":"623026","name":"碌曲县"},{"code":"623027","name":"夏河县"}]}]},{"code":"63","name":"青海省","children":[{"code":"6301","name":"西宁市","children":[{"code":"630102","name":"城东区"},{"code":"630103","name":"城中区"},{"code":"630104","name":"城西区"},{"code":"630105","name":"城北区"},{"code":"630106","name":"湟中区"},{"code":"630121","name":"大通回族土族自治县"},{"code":"630123","name":"湟源县"}]},{"code":"6302","name":"海东市","children":[{"code":"630202","name":"乐都区"},{"code":"630203","name":"平安区"},{"code":"630222","name":"民和回族土族自治县"},{"code":"630223","name":"互助土族自治县"},{"code":"630224","name":"化隆回族自治县"},{"code":"630225","name":"循化撒拉族自治县"}]},{"code":"6322","name":"海北藏族自治州","children":[{"code":"632221","name":"门源回族自治县"},{"code":"632222","name":"祁连县"},{"code":"632223","name":"海晏县"},{"code":"632224","name":"刚察县"}]},{"code":"6323","name":"黄南藏族自治州","children":[{"code":"632301","name":"同仁市"},{"code":"632322","name":"尖扎县"},{"code":"632323","name":"泽库县"},{"code":"632324","name":"河南蒙古族自治县"}]},{"code":"6325","name":"海南藏族自治州","children":[{"code":"632521","name":"共和县"},{"code":"632522","name":"同德县"},{"code":"632523","name":"贵德县"},{"code":"632524","name":"兴海县"},{"code":"632525","name":"贵南县"}]},{"code":"6326","name":"果洛藏族自治州","children":[{"code":"632621","name":"玛沁县"},{"code":"632622","name":"班玛县"},{"code":"632623","name":"甘德县"},{"code":"632624","name":"达日县"},{"code":"632625","name":"久治县"},{"code":"632626","name":"玛多县"}]},{"code":"6327","name":"玉树藏族自治州","children":[{"code":"632701","name":"玉树市"},{"code":"632722","name":"杂多县"},{"code":"632723","name":"称多县"},{"code":"632724","name":"治多县"},{"code":"632725","name":"囊谦县"},{"code":"632726","name":"曲麻莱县"}]},{"code":"6328","name":"海西蒙古族藏族自治州","children":[{"code":"632801","name":"格尔木市"},{"code":"632802","name":"德令哈市"},{"code":"632803","name":"茫崖市"},{"code":"632821","name":"乌兰县"},{"code":"632822","name":"都兰县"},{"code":"632823","name":"天峻县"},{"code":"632857","name":"大柴旦行政委员会"}]}]},{"code":"64","name":"宁夏回族自治区","children":[{"code":"6401","name":"银川市","children":[{"code":"640104","name":"兴庆区"},{"code":"640105","name":"西夏区"},{"code":"640106","name":"金凤区"},{"code":"640121","name":"永宁县"},{"code":"640122","name":"贺兰县"},{"code":"640181","name":"灵武市"}]},{"code":"6402","name":"石嘴山市","children":[{"code":"640202","name":"大武口区"},{"code":"640205","name":"惠农区"},{"code":"640221","name":"平罗县"}]},{"code":"6403","name":"吴忠市","children":[{"code":"640302","name":"利通区"},{"code":"640303","name":"红寺堡区"},{"code":"640323","name":"盐池县"},{"code":"640324","name":"同心县"},{"code":"640381","name":"青铜峡市"}]},{"code":"6404","name":"固原市","children":[{"code":"640402","name":"原州区"},{"code":"640422","name":"西吉县"},{"code":"640423","name":"隆德县"},{"code":"640424","name":"泾源县"},{"code":"640425","name":"彭阳县"}]},{"code":"6405","name":"中卫市","children":[{"code":"640502","name":"沙坡头区"},{"code":"640521","name":"中宁县"},{"code":"640522","name":"海原县"}]}]},{"code":"65","name":"新疆维吾尔自治区","children":[{"code":"6501","name":"乌鲁木齐市","children":[{"code":"650102","name":"天山区"},{"code":"650103","name":"沙依巴克区"},{"code":"650104","name":"新市区"},{"code":"650105","name":"水磨沟区"},{"code":"650106","name":"头屯河区"},{"code":"650107","name":"达坂城区"},{"code":"650109","name":"米东区"},{"code":"650121","name":"乌鲁木齐县"}]},{"code":"6502","name":"克拉玛依市","children":[{"code":"650202","name":"独山子区"},{"code":"650203","name":"克拉玛依区"},{"code":"650204","name":"白碱滩区"},{"code":"650205","name":"乌尔禾区"}]},{"code":"6504","name":"吐鲁番市","children":[{"code":"650402","name":"高昌区"},{"code":"650421","name":"鄯善县"},{"code":"650422","name":"托克逊县"}]},{"code":"6505","name":"哈密市","children":[{"code":"650502","name":"伊州区"},{"code":"650521","name":"巴里坤哈萨克自治县"},{"code":"650522","name":"伊吾县"}]},{"code":"6523","name":"昌吉回族自治州","children":[{"code":"652301","name":"昌吉市"},{"code":"652302","name":"阜康市"},{"code":"652323","name":"呼图壁县"},{"code":"652324","name":"玛纳斯县"},{"code":"652325","name":"奇台县"},{"code":"652327","name":"吉木萨尔县"},{"code":"652328","name":"木垒哈萨克自治县"}]},{"code":"6527","name":"博尔塔拉蒙古自治州","children":[{"code":"652701","name":"博乐市"},{"code":"652702","name":"阿拉山口市"},{"code":"652722","name":"精河县"},{"code":"652723","name":"温泉县"}]},{"code":"6528","name":"巴音郭楞蒙古自治州","children":[{"code":"652801","name":"库尔勒市"},{"code":"652822","name":"轮台县"},{"code":"652823","name":"尉犁县"},{"code":"652824","name":"若羌县"},{"code":"652825","name":"且末县"},{"code":"652826","name":"焉耆回族自治县"},{"code":"652827","name":"和静县"},{"code":"652828","name":"和硕县"},{"code":"652829","name":"博湖县"},{"code":"652871","name":"库尔勒经济技术开发区"}]},{"code":"6529","name":"阿克苏地区","children":[{"code":"652901","name":"阿克苏市"},{"code":"652902","name":"库车市"},{"code":"652922","name":"温宿县"},{"code":"652924","name":"沙雅县"},{"code":"652925","name":"新和县"},{"code":"652926","name":"拜城县"},{"code":"652927","name":"乌什县"},{"code":"652928","name":"阿瓦提县"},{"code":"652929","name":"柯坪县"}]},{"code":"6530","name":"克孜勒苏柯尔克孜自治州","children":[{"code":"653001","name":"阿图什市"},{"code":"653022","name":"阿克陶县"},{"code":"653023","name":"阿合奇县"},{"code":"653024","name":"乌恰县"}]},{"code":"6531","name":"喀什地区","children":[{"code":"653101","name":"喀什市"},{"code":"653121","name":"疏附县"},{"code":"653122","name":"疏勒县"},{"code":"653123","name":"英吉沙县"},{"code":"653124","name":"泽普县"},{"code":"653125","name":"莎车县"},{"code":"653126","name":"叶城县"},{"code":"653127","name":"麦盖提县"},{"code":"653128","name":"岳普湖县"},{"code":"653129","name":"伽师县"},{"code":"653130","name":"巴楚县"},{"code":"653131","name":"塔什库尔干塔吉克自治县"}]},{"code":"6532","name":"和田地区","children":[{"code":"653201","name":"和田市"},{"code":"653221","name":"和田县"},{"code":"653222","name":"墨玉县"},{"code":"653223","name":"皮山县"},{"code":"653224","name":"洛浦县"},{"code":"653225","name":"策勒县"},{"code":"653226","name":"于田县"},{"code":"653227","name":"民丰县"}]},{"code":"6540","name":"伊犁哈萨克自治州","children":[{"code":"654002","name":"伊宁市"},{"code":"654003","name":"奎屯市"},{"code":"654004","name":"霍尔果斯市"},{"code":"654021","name":"伊宁县"},{"code":"654022","name":"察布查尔锡伯自治县"},{"code":"654023","name":"霍城县"},{"code":"654024","name":"巩留县"},{"code":"654025","name":"新源县"},{"code":"654026","name":"昭苏县"},{"code":"654027","name":"特克斯县"},{"code":"654028","name":"尼勒克县"}]},{"code":"6542","name":"塔城地区","children":[{"code":"654201","name":"塔城市"},{"code":"654202","name":"乌苏市"},{"code":"654203","name":"沙湾市"},{"code":"654221","name":"额敏县"},{"code":"654224","name":"托里县"},{"code":"654225","name":"裕民县"},{"code":"654226","name":"和布克赛尔蒙古自治县"}]},{"code":"6543","name":"阿勒泰地区","children":[{"code":"654301","name":"阿勒泰市"},{"code":"654321","name":"布尔津县"},{"code":"654322","name":"富蕴县"},{"code":"654323","name":"福海县"},{"code":"654324","name":"哈巴河县"},{"code":"654325","name":"青河县"},{"code":"654326","name":"吉木乃县"}]},{"code":"6590","name":"自治区直辖县级行政区划","children":[{"code":"659001","name":"石河子市"},{"code":"659002","name":"阿拉尔市"},{"code":"659003","name":"图木舒克市"},{"code":"659004","name":"五家渠市"},{"code":"659005","name":"北屯市"},{"code":"659006","name":"铁门关市"},{"code":"659007","name":"双河市"},{"code":"659008","name":"可克达拉市"},{"code":"659009","name":"昆玉市"},{"code":"659010","name":"胡杨河市"},{"code":"659011","name":"新星市"}]}]}]
\ No newline at end of file
diff --git a/uni_modules/cool-ui/hooks/index.ts b/uni_modules/cool-ui/hooks/index.ts
new file mode 100644
index 0000000..f975fd0
--- /dev/null
+++ b/uni_modules/cool-ui/hooks/index.ts
@@ -0,0 +1,31 @@
+import { computed } from "vue";
+import { getParent } from "/@/cool/utils";
+
+// 点击
+export function useTap(emit: (event: any, ...args: any[]) => void) {
+	function tap(e?: any) {
+		// #ifdef MP-WEIXIN
+		emit("click", e);
+		// #endif
+
+		// #ifdef MP-ALIPAY || H5
+		emit("tap", e);
+		// #endif
+	}
+
+	return {
+		tap,
+	};
+}
+
+// 表单
+export function useForm() {
+	const form = getParent("cl-form", ["disabled"]);
+	const disabled = computed(() => form.value?.disabled);
+
+	return {
+		disabled,
+	};
+}
+
+export * from "./style";
diff --git a/uni_modules/cool-ui/hooks/style.ts b/uni_modules/cool-ui/hooks/style.ts
new file mode 100644
index 0000000..0d28130
--- /dev/null
+++ b/uni_modules/cool-ui/hooks/style.ts
@@ -0,0 +1,80 @@
+import { computed, getCurrentInstance, type StyleValue } from "vue";
+import { parseRpx } from "/@/cool/utils";
+import { fromPairs } from "lodash-es";
+
+const styles = [
+	{
+		key: "padding",
+		rpx: true,
+	},
+	{
+		key: "margin",
+		rpx: true,
+	},
+	{
+		key: "height",
+		rpx: true,
+	},
+	{
+		key: "width",
+		rpx: true,
+	},
+	{
+		key: "font-size",
+		rpx: true,
+	},
+	{
+		key: "border-radius",
+		alias: ["radius"],
+		rpx: true,
+	},
+	{
+		key: "background-color",
+	},
+	{
+		key: "background",
+	},
+	{
+		key: "custom-style",
+	},
+];
+
+export function useStyle(data: StyleValue = {}) {
+	// 当前组件实例
+	const instance = getCurrentInstance();
+
+	// 基础样式
+	const baseStyle = computed(() => {
+		return fromPairs(
+			styles
+				.map((e) => {
+					// keys
+					const keys = [e.key, ...(e.alias || [])];
+
+					// val
+					const val = keys
+						.map((k) => {
+							// 标签值
+							const a = instance?.proxy?.$attrs[k];
+
+							// 默认值
+							const b = (data as any)[k];
+
+							// 判定值
+							return a !== undefined ? a : b;
+						})
+						.find((e) => e !== undefined);
+
+					// 是否需要 rpx 解析
+					return [e.key, e.rpx ? parseRpx(val) : val];
+				})
+				// 过滤空值
+				.filter((e) => e[1] !== undefined),
+		);
+	});
+
+	return {
+		baseStyle,
+		parseRpx,
+	};
+}
diff --git a/uni_modules/cool-ui/index.scss b/uni_modules/cool-ui/index.scss
new file mode 100644
index 0000000..2f888d7
--- /dev/null
+++ b/uni_modules/cool-ui/index.scss
@@ -0,0 +1,2 @@
+@import "./static/iconfont/index.scss";
+@import "./static/css/index.scss";
diff --git a/uni_modules/cool-ui/index.ts b/uni_modules/cool-ui/index.ts
new file mode 100644
index 0000000..fe68ff7
--- /dev/null
+++ b/uni_modules/cool-ui/index.ts
@@ -0,0 +1,23 @@
+import { router } from "/@/cool";
+
+export function useUi(): Ui.Page {
+	const ui: any = {
+		get loaded() {
+			return router.currentPage()?.["cl-page"]?.loaded;
+		},
+	};
+
+	const keys = ["showLoading", "hideLoading", "showToast", "showTips", "showConfirm"];
+
+	keys.forEach((k) => {
+		ui[k] = (...args: any[]) => {
+			const d = router.currentPage()?.["cl-page"];
+
+			if (d) {
+				d[k]?.(...args);
+			}
+		};
+	});
+
+	return ui;
+}
diff --git a/uni_modules/cool-ui/readme.md b/uni_modules/cool-ui/readme.md
new file mode 100644
index 0000000..cdef211
--- /dev/null
+++ b/uni_modules/cool-ui/readme.md
@@ -0,0 +1,3 @@
+# cool-ui
+
+文档请参考：[cool-ui](https://cool-js.com/uni/introduce.htm)
diff --git a/uni_modules/cool-ui/static/css/action-sheet.scss b/uni_modules/cool-ui/static/css/action-sheet.scss
new file mode 100644
index 0000000..38a5697
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/action-sheet.scss
@@ -0,0 +1,50 @@
+.cl-action-sheet {
+	position: relative;
+
+	.cl-popup__container {
+		background-color: #fff;
+		border-radius: 32rpx 32rpx 0 0;
+		overflow: hidden;
+	}
+
+	&__title {
+		display: flex;
+		align-items: center;
+		font-size: 24rpx;
+		padding: 0 46rpx;
+		height: 90rpx;
+		background-color: $cl-color-bg;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 30rpx;
+		line-height: 1.4;
+		font-size: 28rpx;
+		border-bottom: $cl-border-width solid $cl-color-bg;
+		background-color: #fff;
+		border-radius: 0;
+
+		&:last-child {
+			border-bottom: 0;
+		}
+
+		&.is-disabled {
+			color: $cl-color-disabled;
+		}
+
+		&:not(.is-disabled):active {
+			background-color: $cl-color-active;
+		}
+
+		&--cancel {
+			border-top: 10rpx solid $cl-color-bg;
+		}
+
+		&:after {
+			border: 0;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/avatar.scss b/uni_modules/cool-ui/static/css/avatar.scss
new file mode 100644
index 0000000..22c6e2e
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/avatar.scss
@@ -0,0 +1,70 @@
+.cl-avatar {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	font-size: $cl-font-size;
+	overflow: hidden;
+	box-sizing: border-box;
+
+	&--circle {
+		border-radius: 100%;
+	}
+
+	&--square {
+		border-radius: 10rpx;
+	}
+
+	&__placeholder {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background-color: $cl-color-disabled;
+		color: #fff;
+	}
+
+	&__error {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		background-color: $cl-color-placeholder;
+		color: #fff;
+	}
+
+	&__target,
+	&__placeholder,
+	&__error {
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.cl-avatar-group {
+	display: inline-flex;
+
+	.cl-avatar {
+		border: $cl-border-width solid rgba(255, 255, 255, 0.2);
+		position: relative;
+	}
+
+	.cl-avatar + .cl-avatar,
+	cl-avatar + cl-avatar {
+		margin-left: -20rpx;
+	}
+
+	&__more {
+		background-color: $cl-color-primary;
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+
+		&::before {
+			content: "+";
+			position: relative;
+			top: -2rpx;
+			right: 2rpx;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/badge.scss b/uni_modules/cool-ui/static/css/badge.scss
new file mode 100644
index 0000000..df7f4b6
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/badge.scss
@@ -0,0 +1,58 @@
+.cl-badge {
+	position: relative;
+	vertical-align: middle;
+	display: inline-block;
+	z-index: 9;
+
+	&__content {
+		display: inline-flex;
+		height: 24rpx;
+		min-width: 12rpx;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+		white-space: nowrap;
+		font-size: 16rpx;
+		font-weight: bold;
+		color: #fff;
+		position: absolute;
+		top: -12rpx;
+		right: -12rpx;
+		border: 2rpx solid rgba(255, 255, 255, 0.8);
+		border-radius: 32rpx;
+		padding: 0 6rpx;
+	}
+
+	&.is-dot {
+		.cl-badge__content {
+			height: 14rpx;
+			width: 14rpx;
+			padding: 0;
+			border-radius: 50%;
+			top: -7rpx;
+			right: -7rpx;
+		}
+	}
+
+	@mixin set-color($type, $color) {
+		&--#{$type} {
+			.cl-badge__content {
+				background-color: $color;
+			}
+
+			&.is-plain {
+				.cl-badge__content {
+					background-color: #fff;
+					color: $color;
+					border: $cl-border-width solid currentColor;
+				}
+			}
+		}
+	}
+
+	@include set-color(primary, $cl-color-primary);
+	@include set-color(success, $cl-color-success);
+	@include set-color(error, $cl-color-error);
+	@include set-color(warning, $cl-color-warning);
+	@include set-color(info, $cl-color-info);
+}
diff --git a/uni_modules/cool-ui/static/css/banner.scss b/uni_modules/cool-ui/static/css/banner.scss
new file mode 100644
index 0000000..6cd817d
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/banner.scss
@@ -0,0 +1,147 @@
+.cl-banner {
+	position: relative;
+
+	uni-swiper,
+	swiper,
+	swiper-item {
+		height: 100%;
+	}
+
+	.cl-banner-item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		width: 100%;
+
+		& > view,
+		scoped-slots-default {
+			height: 100%;
+			width: 100%;
+		}
+
+		&__image {
+			height: 100%;
+			width: 100%;
+			border-radius: 12rpx;
+		}
+
+		&__video {
+			height: 100%;
+			width: 100%;
+		}
+	}
+
+	&--card {
+		.cl-banner-item {
+			width: 100%;
+			transform: scale(0.95, 0.9);
+			transition: all 0.2s ease-in 0s;
+
+			&.is-active {
+				transform: none;
+				transition: all 0.2s ease-in 0s;
+			}
+		}
+	}
+
+	&--chain {
+		.cl-banner-item {
+			width: calc(100% - 20rpx);
+			margin: 0 10rpx;
+		}
+	}
+
+	&--dot-round {
+		.wx-swiper-dot,
+		.a-swiper-dot,
+		.uni-swiper-dot {
+			background-color: #ddd;
+			opacity: 0.6;
+			width: 12rpx;
+			height: 12rpx;
+			border-radius: 12rpx;
+			margin: 0 6rpx;
+			border-width: 0;
+		}
+
+		.wx-swiper-dot-active,
+		.a-swiper-dot-active,
+		.uni-swiper-dot-active {
+			background-color: #fff;
+			opacity: 1;
+			width: 26rpx;
+		}
+	}
+
+	&--dot-circle {
+		.wx-swiper-dot,
+		.a-swiper-dot,
+		.uni-swiper-dot {
+			background-color: #ddd;
+			opacity: 0.5;
+			width: 10rpx;
+			height: 10rpx;
+			border-radius: 14rpx;
+			margin: 0 2rpx;
+			border-color: transparent;
+			border-width: 2px;
+			border-style: solid;
+		}
+
+		.wx-swiper-dot-active,
+		.a-swiper-dot-active,
+		.uni-swiper-dot-active {
+			opacity: 1;
+			border-color: $cl-color-primary;
+		}
+	}
+
+	&--dot-square {
+		.wx-swiper-dot,
+		.a-swiper-dot,
+		.uni-swiper-dot {
+			background-color: #ddd;
+			height: 12rpx;
+			width: 14rpx;
+			margin: 0 2rpx;
+			border-radius: 0;
+		}
+
+		.wx-swiper-dot-active,
+		.a-swiper-dot-active,
+		.uni-swiper-dot-active {
+			background-color: $cl-color-primary;
+			width: 30rpx;
+		}
+	}
+
+	&__btn {
+		button {
+			position: absolute;
+			top: calc(50% - 30rpx);
+			height: 60rpx;
+			width: 60rpx;
+			border-radius: 60rpx;
+			border: 0;
+			line-height: 60rpx;
+			padding: 0;
+			margin: 0;
+			background-color: rgba(0, 0, 0, 0.4);
+			color: #ddd;
+			font-size: 32rpx;
+
+			&::after {
+				border: 0;
+			}
+		}
+
+		&-prev {
+			left: 20rpx;
+		}
+
+		&-next {
+			right: 20rpx;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/button.scss b/uni_modules/cool-ui/static/css/button.scss
new file mode 100644
index 0000000..d48dccd
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/button.scss
@@ -0,0 +1,140 @@
+// Mixins
+@mixin button-color($type, $color) {
+	&.cl-button--#{$type} {
+		background-color: $color;
+		border-color: $color;
+
+		.cl-button__text,
+		.cl-button__icon,
+		.cl-loading {
+			color: #fff;
+		}
+
+		&.is-plain {
+			background-color: #fff;
+
+			.cl-button__text,
+			.cl-button__icon {
+				color: rgba($color, 0.8);
+			}
+			&.is-border {
+				border-color: rgba($color, 0.8);
+			}
+		}
+
+		&[disabled],
+		&.is-disabled {
+			background-color: $color;
+		}
+
+		&.button-hover {
+			&:not(.is-loading) {
+				background-color: rgba($color, 0.8);
+				&.is-plain {
+					.cl-button__text,
+					.cl-button__icon {
+						color: #fff;
+					}
+				}
+			}
+		}
+	}
+}
+
+// Styles
+.cl-button {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	box-sizing: border-box;
+	white-space: nowrap;
+	margin: 0;
+	background-color: #fff;
+	overflow: visible;
+	vertical-align: middle;
+	font-size: $cl-font-size;
+	border-radius: $cl-button-radius;
+	height: $cl-height;
+	padding: $cl-button-padding;
+
+	&__text {
+		line-height: 1;
+		letter-spacing: 1rpx;
+	}
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		height: 100%;
+		line-height: 1;
+		margin-right: 10rpx;
+
+		image {
+			height: 50rpx;
+			width: 50rpx;
+		}
+	}
+
+	&::after {
+		display: none;
+		border-width: 0;
+	}
+
+	&.button-hover {
+		background-color: #f6f7fa;
+	}
+
+	&--large {
+		height: 80rpx;
+		padding: 0rpx 38rpx;
+		font-size: 30rpx;
+	}
+
+	&--small {
+		font-size: 24rpx;
+		height: 48rpx;
+		padding: 0rpx 22rpx;
+		border-radius: 8rpx;
+	}
+
+	&.is-border {
+		border: $cl-border-width solid $cl-border-color;
+	}
+
+	&.is-round {
+		border-radius: $cl-height !important;
+	}
+
+	&.is-loading {
+		opacity: 0.5;
+
+		.cl-loading {
+			margin-right: 12rpx;
+		}
+	}
+
+	&.is-fill {
+		width: 100%;
+	}
+
+	&.is-disabled {
+		opacity: 0.5;
+	}
+
+	&.is-bold {
+		font-weight: bold;
+	}
+
+	// Colors
+	@include button-color(primary, $cl-color-primary);
+	@include button-color(success, $cl-color-success);
+	@include button-color(error, $cl-color-error);
+	@include button-color(warning, $cl-color-warning);
+	@include button-color(info, $cl-color-info);
+}
+
+// Adjacent selectors
+.cl-button + .cl-button,
+cl-button + cl-button {
+	margin-left: 20rpx;
+}
diff --git a/uni_modules/cool-ui/static/css/captcha.scss b/uni_modules/cool-ui/static/css/captcha.scss
new file mode 100644
index 0000000..7221c13
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/captcha.scss
@@ -0,0 +1,58 @@
+.cl-captcha {
+	position: relative;
+	width: 100%;
+	overflow: hidden;
+
+	&__input {
+		position: absolute;
+		left: -100%;
+		height: 100%;
+		width: 200%;
+		opacity: 0;
+	}
+
+	&__code {
+		display: flex;
+		width: 100%;
+	}
+
+	&__item {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex: 1;
+		border-radius: 10rpx;
+	}
+
+	&__value {
+		font-size: 40rpx;
+		font-weight: 500;
+	}
+
+	&__cursor {
+		height: 40rpx;
+		width: 4rpx;
+		background-color: #000;
+		animation: flash 1s infinite ease;
+	}
+
+	&.is-border {
+		.cl-captcha__item {
+			border: 2rpx solid $cl-color-primary;
+		}
+	}
+
+	@keyframes flash {
+		0% {
+			opacity: 0.2;
+		}
+
+		50% {
+			opacity: 0.5;
+		}
+
+		100% {
+			opacity: 0.2;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/card.scss b/uni_modules/cool-ui/static/css/card.scss
new file mode 100644
index 0000000..3e36c28
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/card.scss
@@ -0,0 +1,49 @@
+.cl-card {
+	border-radius: 16rpx;
+	margin-bottom: 20rpx;
+
+	&__header {
+		display: flex;
+		align-items: center;
+		height: 80rpx;
+		border-bottom: $cl-border-width solid #f6f7fa;
+		position: relative;
+		padding: 0 20rpx;
+	}
+
+	&__loading {
+		position: absolute;
+		right: 20rpx;
+		line-height: 0;
+	}
+
+	&__more {
+		display: flex;
+		align-items: center;
+		position: absolute;
+		right: 20rpx;
+		color: $cl-color-info;
+
+		.text {
+			font-size: 24rpx;
+			margin-right: 4rpx;
+		}
+
+		.cl-icon-arrow-right {
+			font-size: 30rpx;
+			line-height: 1;
+		}
+	}
+
+	&__container {
+		padding: 20rpx;
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		height: 90rpx;
+		padding: 0 20rpx;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/checkbox.scss b/uni_modules/cool-ui/static/css/checkbox.scss
new file mode 100644
index 0000000..4bb4626
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/checkbox.scss
@@ -0,0 +1,118 @@
+.cl-checkbox {
+	display: inline-flex;
+	align-items: center;
+	height: $cl-height;
+	margin-right: 60rpx;
+	position: relative;
+
+	&__input {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		position: relative;
+		box-sizing: border-box;
+		border: $cl-border-width solid $cl-border-color;
+		border-radius: $cl-border-radius;
+		height: $cl-checkbox-size;
+		width: $cl-checkbox-size;
+
+		text {
+			font-size: 24rpx;
+			position: absolute;
+		}
+	}
+
+	&__label {
+		line-height: 1;
+		font-size: 28rpx;
+		margin-left: 16rpx;
+		flex: 1;
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+	}
+
+	&.is-checked {
+		.cl-checkbox__input {
+			background-color: $cl-color-primary;
+			border-color: $cl-color-primary;
+			color: #fff;
+		}
+
+		&.is-text {
+			.cl-checkbox__label {
+				color: $cl-color-primary;
+			}
+		}
+	}
+
+	&.is-disabled {
+		.cl-checkbox__input {
+			background-color: $cl-color-disabled-bg;
+			border-color: transparent;
+			color: $cl-color-disabled;
+		}
+
+		.cl-checkbox__label {
+			color: $cl-color-disabled;
+		}
+	}
+
+	&.is-text {
+		.cl-checkbox__input {
+			display: none;
+		}
+
+		.cl-checkbox__label {
+			margin-left: 0;
+		}
+	}
+
+	&.is-border {
+		border-radius: $cl-border-radius;
+		padding: 0 20rpx;
+		margin: 0 20rpx 20rpx 0;
+		border: $cl-border-width solid $cl-border-color;
+		box-sizing: border-box;
+		line-height: normal;
+
+		&.is-checked {
+			color: $cl-color-primary;
+			border-color: $cl-color-primary;
+
+			.cl-checkbox__label {
+				color: $cl-color-primary;
+			}
+		}
+	}
+
+	&.is-fill {
+		margin-right: 0;
+		width: 100%;
+	}
+
+	&.is-round {
+		border-radius: $cl-checkbox-size;
+
+		.cl-checkbox__input {
+			border-radius: 100%;
+		}
+	}
+}
+
+/* #ifdef MP */
+cl-checkbox {
+	display: inline-flex;
+}
+
+.cl-checkbox-group {
+	&.is-fill {
+		cl-checkbox {
+			display: inline;
+		}
+	}
+}
+/* #endif */
diff --git a/uni_modules/cool-ui/static/css/col.scss b/uni_modules/cool-ui/static/css/col.scss
new file mode 100644
index 0000000..d07c421
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/col.scss
@@ -0,0 +1,48 @@
+@use "sass:math";
+
+.cl-col {
+	width: 100%;
+	box-sizing: border-box;
+
+	&::before {
+		content: "";
+		display: block;
+	}
+}
+
+[class*="cl-col-"] {
+	float: left;
+	box-sizing: border-box;
+}
+
+.cl-col-0 {
+	display: none;
+	width: 0%;
+}
+
+@for $i from 1 through 24 {
+	.cl-col-push-#{$i},
+	.cl-col-pull-#{$i} {
+		position: relative;
+	}
+}
+
+@for $i from 1 through 24 {
+	$w: math.div(100%, 24);
+
+	.cl-col-#{$i} {
+		width: $w * $i;
+	}
+
+	.cl-col-offset-#{$i} {
+		margin-left: $w * $i;
+	}
+
+	.cl-col-pull-#{$i} {
+		right: $w * $i;
+	}
+
+	.cl-col-push-#{$i} {
+		left: $w * $i;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/column.scss b/uni_modules/cool-ui/static/css/column.scss
new file mode 100644
index 0000000..249ba9e
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/column.scss
@@ -0,0 +1,29 @@
+.cl-column {
+	display: flex;
+	flex-direction: column;
+	position: relative;
+
+	&.is-justify-center {
+		justify-content: center;
+	}
+
+	&.is-justify-end {
+		justify-content: flex-end;
+	}
+
+	&.is-justify-space-between {
+		justify-content: space-between;
+	}
+
+	&.is-justify-space-around {
+		justify-content: space-around;
+	}
+
+	&.is-align-middle {
+		align-items: center;
+	}
+
+	&.is-align-bottom {
+		align-items: flex-end;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/common.scss b/uni_modules/cool-ui/static/css/common.scss
new file mode 100644
index 0000000..45632ae
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/common.scss
@@ -0,0 +1,8 @@
+:export {
+	primaryColor: $cl-color-primary;
+	successColor: $cl-color-success;
+	warningColor: $cl-color-warning;
+	errorColor: $cl-color-error;
+	infoColor: $cl-color-info;
+	disabledColor: $cl-color-disabled;
+}
diff --git a/uni_modules/cool-ui/static/css/confirm.scss b/uni_modules/cool-ui/static/css/confirm.scss
new file mode 100644
index 0000000..ba4075a
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/confirm.scss
@@ -0,0 +1,63 @@
+.cl-confirm {
+	position: relative;
+
+	&__message {
+		word-break: break-all;
+	}
+
+	&__header {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		.cl-icon-toast-error,
+		.cl-icon-toast-success,
+		.cl-icon-toast-warning {
+			color: #fff;
+			height: 36rpx;
+			width: 36rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 100%;
+			margin-right: 10rpx;
+			font-size: 24rpx;
+			line-height: 1;
+		}
+
+		.cl-icon-toast-error {
+			background-color: $cl-color-error;
+		}
+
+		.cl-icon-toast-success {
+			background-color: $cl-color-success;
+		}
+
+		.cl-icon-toast-warning {
+			background-color: $cl-color-warning;
+		}
+	}
+
+	&__title {
+		font-size: 32rpx;
+		font-weight: bold;
+	}
+
+	&__footer {
+		display: flex;
+		justify-content: center;
+		flex: 1;
+		margin: 0 -10rpx;
+		padding-bottom: 40rpx;
+
+		&-item {
+			position: relative;
+			flex: 1;
+			margin: 0 10rpx;
+		}
+	}
+
+	.cl-dialog__footer {
+		padding-bottom: 0 !important;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/countdown.scss b/uni_modules/cool-ui/static/css/countdown.scss
new file mode 100644
index 0000000..2c0a101
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/countdown.scss
@@ -0,0 +1,13 @@
+.cl-countdown {
+	display: inline-flex;
+	align-items: center;
+
+	&__item {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__tips {
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/dialog.scss b/uni_modules/cool-ui/static/css/dialog.scss
new file mode 100644
index 0000000..8ccacc1
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/dialog.scss
@@ -0,0 +1,49 @@
+.cl-dialog__wrapper {
+	.cl-dialog {
+		position: relative;
+
+		&__header {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			position: relative;
+			height: 90rpx;
+			font-size: 32rpx;
+			font-weight: 500;
+		}
+
+		&__container {
+			position: relative;
+			padding: 0 40rpx 40rpx 40rpx;
+			font-size: 28rpx;
+
+			&:first-child {
+				padding-top: 40rpx;
+			}
+		}
+
+		&__footer {
+			display: flex;
+			justify-content: flex-end;
+			padding: 0 40rpx 40rpx 40rpx;
+		}
+
+		&__close {
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			height: 50rpx;
+			width: 50rpx;
+			position: absolute;
+			bottom: -80rpx;
+			left: calc(50% - 25rpx);
+			color: $cl-border-color;
+			border-radius: 50rpx;
+			border: 1px solid currentColor;
+
+			text {
+				font-size: 32rpx;
+			}
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/divider.scss b/uni_modules/cool-ui/static/css/divider.scss
new file mode 100644
index 0000000..8049636
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/divider.scss
@@ -0,0 +1,28 @@
+.cl-divider {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 80rpx;
+	width: 100%;
+	position: relative;
+	text-align: center;
+	box-sizing: border-box;
+
+	&__line {
+		position: absolute;
+		height: 1rpx;
+		top: 50%;
+		left: 50%;
+		transform: scaleY(0.5) translateX(-50%) translateZ(0);
+	}
+
+	&__text {
+		position: absolute;
+		left: 50%;
+		padding: 0 30rpx;
+		color: $cl-color-info;
+		font-size: 26rpx;
+		transform: translateX(-50%);
+		background-color: $cl-color-bg;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/empty.scss b/uni_modules/cool-ui/static/css/empty.scss
new file mode 100644
index 0000000..1970aa3
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/empty.scss
@@ -0,0 +1,31 @@
+.cl-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	pointer-events: none;
+
+	&__icon {
+		height: 160rpx;
+		margin-bottom: 20rpx;
+	}
+
+	&__text {
+		font-size: 26rpx;
+		color: $cl-color-info;
+		letter-spacing: 1rpx;
+	}
+
+	&__container {
+		pointer-events: all;
+		margin-top: 60rpx;
+	}
+
+	&.is-fixed {
+		position: fixed;
+		left: 0;
+		top: 0;
+		height: 100%;
+		width: 100%;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/filter-bar.scss b/uni_modules/cool-ui/static/css/filter-bar.scss
new file mode 100644
index 0000000..43df24c
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/filter-bar.scss
@@ -0,0 +1,225 @@
+.cl-filter-bar__wrap {
+	.cl-filter-bar__mask {
+		position: fixed;
+		left: 0;
+		top: 0;
+		height: 100%;
+		width: 100%;
+		background-color: rgba(0, 0, 0, 0.5);
+		opacity: 0;
+		pointer-events: none;
+		transition: all 0.3s ease-in-out;
+		z-index: $cl-zIndex;
+	}
+
+	&.is-expand {
+		.cl-filter-bar__mask {
+			opacity: 1;
+			pointer-events: auto;
+		}
+	}
+}
+
+.cl-filter-bar {
+	display: flex;
+	align-items: center;
+	font-size: 26rpx;
+	background-color: #fff;
+	box-sizing: border-box;
+	position: relative;
+}
+
+cl-filter-item {
+	flex: 1;
+}
+
+.cl-filter-item {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	flex: 1;
+	height: 80rpx;
+	width: 100%;
+	background-color: #fff;
+	color: #727272;
+	padding: 0 20rpx;
+	box-sizing: border-box;
+
+	&__label {
+		margin-right: 4rpx;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	&__order {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		width: 32rpx;
+
+		&-asc,
+		&-desc {
+			margin: 2rpx 0;
+			width: 0;
+			height: 0;
+			border: 5px solid transparent;
+			border-radius: 6rpx;
+		}
+
+		&-asc {
+			border-bottom-color: #ccc;
+		}
+
+		&-desc {
+			border-top-color: #ccc;
+		}
+
+		&.is-asc {
+			.cl-filter-item__order-asc {
+				border-bottom-color: $cl-color-primary;
+			}
+		}
+
+		&.is-desc {
+			.cl-filter-item__order-desc {
+				border-top-color: $cl-color-primary;
+			}
+		}
+	}
+
+	&__dropdown {
+		&-icon {
+			display: block;
+			transition: transform 0.3s;
+			font-size: 32rpx;
+		}
+
+		&-box {
+			position: absolute;
+			top: 80rpx;
+			left: 0;
+			max-height: 0;
+			width: 100%;
+			background-color: #fff;
+			transition: max-height 0.3s;
+			overflow: hidden;
+
+			&__label {
+				flex: 1;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+
+			&__empty {
+				text-align: center;
+				margin: 50rpx;
+				color: #999;
+			}
+
+			&__btn {
+				padding: 20rpx 30rpx;
+			}
+
+			&__list {
+				max-height: 500rpx;
+			}
+
+			&.theme-default {
+				.cl-filter-item__dropdown-box {
+					&__item {
+						display: flex;
+						align-items: center;
+						height: 80rpx;
+						padding: 0 40rpx;
+
+						.cl-icon-check {
+							display: none;
+						}
+
+						&.is-checked {
+							color: $cl-color-primary;
+
+							.cl-icon-check {
+								display: block;
+							}
+						}
+
+						&.is-disabled {
+							color: $cl-color-disabled;
+						}
+					}
+				}
+			}
+
+			&.theme-grid {
+				.cl-filter-item__dropdown-box {
+					&__list {
+						display: flex;
+						flex-wrap: wrap;
+						box-sizing: border-box;
+						padding: 0 20rpx;
+					}
+
+					&__item {
+						display: inline-flex;
+						align-items: center;
+						text-align: center;
+						height: 70rpx;
+						background-color: #f6f7fa;
+						border-radius: 10rpx;
+						margin: 10rpx;
+						padding: 0 10rpx;
+						box-sizing: border-box;
+
+						.cl-icon-check {
+							display: none;
+						}
+
+						&.is-checked {
+							color: $cl-color-primary;
+							background-color: rgba($cl-color-primary, 0.1);
+							font-weight: bold;
+						}
+
+						&.is-disabled {
+							color: $cl-color-disabled;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	&.is-expand {
+		.cl-filter-item__dropdown-icon {
+			transform: rotate(180deg);
+		}
+
+		.cl-filter-item {
+			&__dropdown-icon,
+			&__label {
+				color: $cl-color-primary;
+			}
+
+			&__dropdown-box {
+				max-height: 596rpx;
+				transition: max-height 0.3s;
+			}
+		}
+	}
+
+	&.is-only {
+		position: relative;
+		z-index: 9;
+	}
+
+	&.is-switch {
+		color: $cl-color-primary;
+	}
+
+	&.is-disabled {
+		color: $cl-color-disabled;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/footer.scss b/uni_modules/cool-ui/static/css/footer.scss
new file mode 100644
index 0000000..6d5d581
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/footer.scss
@@ -0,0 +1,38 @@
+.cl-footer {
+	width: 100%;
+	position: relative;
+
+	&__placeholder {
+		transition: height 0.3s;
+	}
+
+	&__inner {
+		& > :deep(cl-button) {
+			width: 100%;
+		}
+
+		&.is-flex {
+			display: flex;
+		}
+	}
+
+	&.is-border {
+		&::before {
+			content: "";
+			display: block;
+			height: $cl-border-width;
+			width: 100%;
+			background-color: $cl-color-bg;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+	}
+
+	&.is-fixed {
+		padding-bottom: env(safe-area-inset-bottom);
+		position: fixed;
+		left: 0;
+		bottom: 0;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/form.scss b/uni_modules/cool-ui/static/css/form.scss
new file mode 100644
index 0000000..ec1418b
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/form.scss
@@ -0,0 +1,86 @@
+.cl-form {
+	.cl-form-item {
+		display: flex;
+		margin-bottom: 32rpx;
+		position: relative;
+		font-size: 28rpx;
+
+		&.is-required {
+			.cl-form-item__label::after {
+				content: "*";
+				color: $cl-color-error;
+				margin-left: 6rpx;
+			}
+		}
+
+		&__container {
+			display: flex;
+			align-items: center;
+			flex: 1;
+		}
+
+		&__label {
+			height: $cl-height;
+			line-height: $cl-height;
+			flex-shrink: 0;
+			margin-right: 20rpx;
+		}
+
+		&__content {
+			flex: 1;
+
+			&.is-justify--left {
+				text-align: left;
+			}
+
+			&.is-justify--center {
+				text-align: center;
+			}
+
+			&.is-justify--end {
+				text-align: right;
+			}
+		}
+
+		&__message {
+			display: block;
+			color: $cl-color-error;
+			font-size: 24rpx;
+			text-align: right;
+			margin-top: 6rpx;
+		}
+
+		&__append {
+			display: flex;
+			align-items: center;
+			margin-left: 20rpx;
+		}
+
+		&.is-top {
+			flex-direction: column;
+
+			.cl-form-item__label {
+				margin-right: 0;
+				margin-bottom: 10rpx;
+			}
+		}
+
+		&.is-left {
+			.cl-form-item__label {
+				text-align: left;
+			}
+		}
+
+		&.is-right {
+			.cl-form-item__label {
+				text-align: right;
+			}
+		}
+	}
+
+	&--border {
+		.cl-form-item {
+			border-bottom: $cl-border-width solid #eeeeee;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/grid.scss b/uni_modules/cool-ui/static/css/grid.scss
new file mode 100644
index 0000000..1053249
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/grid.scss
@@ -0,0 +1,49 @@
+.cl-grid {
+	box-sizing: border-box;
+
+	&::after,
+	&::before {
+		content: "";
+		display: table;
+	}
+
+	&::after {
+		clear: both;
+	}
+
+	&-item {
+		float: left;
+		box-sizing: border-box;
+		position: relative;
+	}
+
+	.is-border {
+		border: 2rpx solid $cl-color-default;
+		border-bottom: 0;
+		border-right: 0;
+
+		.cl-grid-item {
+			&::before,
+			&::after {
+				content: "";
+				position: absolute;
+				display: block;
+				background-color: $cl-color-default;
+			}
+
+			&::before {
+				bottom: 0;
+				left: 0;
+				height: 2rpx;
+				width: 100%;
+			}
+
+			&::after {
+				right: 0;
+				top: 0;
+				height: 100%;
+				width: 2rpx;
+			}
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/guide.scss b/uni_modules/cool-ui/static/css/guide.scss
new file mode 100644
index 0000000..627f6b2
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/guide.scss
@@ -0,0 +1,72 @@
+.cl-guide {
+	position: relative;
+	height: 100%;
+
+	&__mask {
+		background-color: rgba(0, 0, 0, 0.5);
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		z-index: 9999;
+	}
+
+	&__display {
+		opacity: 1;
+	}
+
+	&__content {
+		display: inline-block;
+		background-color: #fff;
+		border-radius: 6rpx;
+		margin: 20rpx;
+		padding: 20rpx;
+		color: #000;
+		font-size: 28rpx;
+	}
+
+	&__op {
+		margin: 0 20rpx;
+
+		button {
+			display: inline-block;
+			font-size: 26rpx;
+			font-weight: 500;
+			margin-right: 20rpx;
+			height: 60rpx;
+			line-height: 60rpx;
+			padding: 0 20rpx;
+			border-radius: 6rpx;
+
+			&:last-child {
+				margin-right: 0;
+			}
+		}
+	}
+
+	&__image {
+		margin: 20rpx;
+	}
+
+	&__tools {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		position: absolute;
+		width: 100%;
+		transition: all 0.3s;
+
+		&.start {
+			align-items: flex-start;
+		}
+
+		&.center {
+			align-items: center;
+		}
+
+		&.end {
+			align-items: flex-end;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/icon.scss b/uni_modules/cool-ui/static/css/icon.scss
new file mode 100644
index 0000000..e8e7fdd
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/icon.scss
@@ -0,0 +1,25 @@
+cl-icon,
+.cl-icon {
+	display: inline-flex;
+	align-items: center;
+
+	&.is-primary {
+		color: $cl-color-primary;
+	}
+
+	&.is-success {
+		color: $cl-color-success;
+	}
+
+	&.is-warning {
+		color: $cl-color-warning;
+	}
+
+	&.is-error {
+		color: $cl-color-error;
+	}
+
+	&.is-info {
+		color: $cl-color-info;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/image.scss b/uni_modules/cool-ui/static/css/image.scss
new file mode 100644
index 0000000..4ad1639
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/image.scss
@@ -0,0 +1,64 @@
+.cl-image {
+	flex-shrink: 0;
+	position: relative;
+	font-size: $cl-font-size;
+	overflow: hidden;
+
+	&__target {
+		display: inline-block;
+		height: 100%;
+		width: 100%;
+		max-height: 100%;
+		max-width: 100%;
+		border-radius: inherit;
+	}
+
+	&__loading,
+	&__placeholder {
+		position: absolute;
+		left: 0;
+		top: 0;
+	}
+
+	&__loading,
+	&__placeholder,
+	&__error {
+		height: 100%;
+		width: 100%;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		.icon {
+			font-size: 50rpx;
+			color: $cl-color-info;
+		}
+	}
+
+	&__loading {
+		background-color: #f6f7fa;
+	}
+
+	&__error {
+		text-align: center;
+		color: $cl-color-info;
+		border-radius: inherit;
+
+		.text {
+			font-size: 24rpx;
+		}
+	}
+
+	&.is-round {
+		.cl-image__placeholder,
+		.cl-image__error,
+		.cl-image__target {
+			border-radius: 100%;
+		}
+	}
+
+	&.is-error {
+		background-color: #f6f7fa;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/index.scss b/uni_modules/cool-ui/static/css/index.scss
new file mode 100644
index 0000000..2e2550e
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/index.scss
@@ -0,0 +1,60 @@
+@import "./action-sheet.scss";
+@import "./avatar.scss";
+@import "./badge.scss";
+@import "./banner.scss";
+@import "./button.scss";
+@import "./captcha.scss";
+@import "./card.scss";
+@import "./checkbox.scss";
+@import "./col.scss";
+@import "./column.scss";
+@import "./confirm.scss";
+@import "./countdown.scss";
+@import "./dialog.scss";
+@import "./divider.scss";
+@import "./empty.scss";
+@import "./filter-bar.scss";
+@import "./footer.scss";
+@import "./form.scss";
+@import "./grid.scss";
+@import "./guide.scss";
+@import "./icon.scss";
+@import "./image.scss";
+@import "./input-number.scss";
+@import "./input.scss";
+@import "./list-index.scss";
+@import "./list.scss";
+@import "./loading-mask.scss";
+@import "./loading.scss";
+@import "./loadmore.scss";
+@import "./noticebar.scss";
+@import "./page.scss";
+@import "./popup.scss";
+@import "./progress.scss";
+@import "./pay.scss";
+@import "./radio.scss";
+@import "./rate.scss";
+@import "./row.scss";
+@import "./skeleton.scss";
+@import "./scroller.scss";
+@import "./search.scss";
+@import "./select-city.scss";
+@import "./select-date.scss";
+@import "./select-inner.scss";
+@import "./select-popup.scss";
+@import "./select.scss";
+@import "./share.scss";
+@import "./sticky.scss";
+@import "./status-bar.scss";
+@import "./switch.scss";
+@import "./tabs.scss";
+@import "./tag.scss";
+@import "./text.scss";
+@import "./textarea.scss";
+@import "./timeline.scss";
+@import "./toast.scss";
+@import "./topbar.scss";
+@import "./tree.scss";
+@import "./upload.scss";
+@import "./video.scss";
+@import "./waterfall.scss";
diff --git a/uni_modules/cool-ui/static/css/input-number.scss b/uni_modules/cool-ui/static/css/input-number.scss
new file mode 100644
index 0000000..74104d5
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/input-number.scss
@@ -0,0 +1,93 @@
+.cl-input-number {
+	display: inline-flex;
+	align-items: center;
+	height: $cl-input-number-size;
+	line-height: 1;
+
+	&__plus,
+	&__minus {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: $cl-input-number-size;
+		width: $cl-input-number-size;
+		border-radius: $cl-input-number-size;
+		background-color: #f1f7ff;
+
+		text {
+			font-size: 28rpx;
+			font-weight: bold;
+		}
+
+		&:active {
+			opacity: 0.8;
+		}
+	}
+
+	&__plus {
+		background-color: $cl-color-primary;
+		color: #fff;
+	}
+
+	&__value {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		font-size: 28rpx;
+		text-align: center;
+		color: $cl-color-primary;
+		position: relative;
+		margin: 0 20rpx;
+
+		input {
+			height: 100%;
+			width: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			font-size: inherit;
+			background-color: #fff;
+		}
+
+		.unit {
+			font-size: 20rpx;
+			position: relative;
+			z-index: 9;
+
+			&:nth-child(1) {
+				opacity: 0;
+			}
+		}
+
+		.num {
+			margin: 0 20rpx;
+			visibility: hidden;
+		}
+	}
+
+	&.is-disabled {
+		.cl-input-number__plus,
+		.cl-input-number__minus {
+			background-color: $cl-color-disabled-bg;
+			color: $cl-color-disabled;
+		}
+		.cl-input-number__value {
+			color: $cl-color-disabled;
+		}
+	}
+
+	&.disabled-plus {
+		.cl-input-number__plus {
+			background-color: $cl-color-disabled-bg;
+			color: $cl-color-disabled;
+		}
+	}
+
+	&.disabled-minus {
+		.cl-input-number__minus {
+			background-color: $cl-color-disabled-bg;
+			color: $cl-color-disabled;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/input.scss b/uni_modules/cool-ui/static/css/input.scss
new file mode 100644
index 0000000..d323159
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/input.scss
@@ -0,0 +1,123 @@
+.cl-input {
+	display: flex;
+	height: $cl-height;
+	width: 100%;
+	vertical-align: middle;
+	position: relative;
+	border-radius: $cl-border-radius;
+	box-sizing: border-box;
+	transition: border-color 0.2s;
+	padding: 0 20rpx;
+	background-color: #fff;
+	font-size: $cl-font-size;
+
+	&--focus {
+		border-color: rgba($cl-color-primary, 0.7);
+	}
+
+	&__wrap {
+		display: flex;
+		align-items: center;
+		flex: 1;
+		height: 100%;
+		position: relative;
+	}
+
+	&__inner {
+		height: 100%;
+		flex: 1;
+		border: 0;
+		padding: 0;
+		outline: none;
+		background-color: transparent;
+		font-size: inherit;
+	}
+
+	&__prepend,
+	&__append {
+		display: flex;
+		align-items: center;
+	}
+
+	&__prepend {
+		margin-right: 20rpx;
+	}
+
+	&__append {
+		margin-left: 20rpx;
+	}
+
+	&__icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		font-size: 34rpx;
+		color: #999;
+		cursor: pointer;
+	}
+
+	&__clear {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: $cl-color-placeholder;
+		margin-left: 20rpx;
+		height: 100%;
+		font-size: 28rpx;
+		position: relative;
+		z-index: 9;
+	}
+
+	&__readonly {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		width: 100%;
+		z-index: 2;
+	}
+
+	&:not(.is-disabled) {
+		-webkit-box-shadow: 0 0 0 1000px transparent inset;
+	}
+
+	&--prefix,
+	&--suffix {
+		flex-shrink: 0;
+	}
+
+	&--prefix {
+		.cl-input__icon {
+			margin-right: 20rpx;
+		}
+	}
+
+	&--suffix {
+		.cl-input__icon {
+			margin-left: 20rpx;
+		}
+	}
+
+	&.is-border {
+		border: $cl-border-width solid $cl-border-color;
+	}
+
+	&.is-disabled {
+		background-color: $cl-color-disabled-bg;
+
+		.cl-input__inner {
+			color: $cl-color-disabled;
+		}
+	}
+
+	&.is-round {
+		border-radius: 100rpx;
+	}
+}
+
+.cl-form-item--error {
+	input {
+		border-color: $cl-color-error;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/list-index.scss b/uni_modules/cool-ui/static/css/list-index.scss
new file mode 100644
index 0000000..e10f79a
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/list-index.scss
@@ -0,0 +1,133 @@
+.cl-list-index {
+	position: relative;
+	height: 100%;
+
+	&__search {
+		display: flex;
+		align-items: center;
+		background-color: #fff;
+		box-sizing: border-box;
+		padding: 0 30rpx;
+		height: 100rpx;
+
+		cl-input {
+			flex: 1;
+		}
+	}
+
+	&__container {
+		height: calc(100% - 100rpx);
+
+		&:first-child {
+			height: 100%;
+		}
+	}
+
+	&__scroller {
+		height: 100%;
+
+		.group {
+			.header {
+				display: flex;
+				align-items: center;
+				height: 50rpx;
+				padding: 0 30rpx;
+				font-size: 26rpx;
+				position: sticky;
+				top: 0;
+				z-index: 9;
+				background-color: $cl-color-bg;
+				line-height: 1;
+
+				&.is-active {
+					text {
+						color: $cl-color-primary;
+					}
+				}
+			}
+
+			.container {
+				background-color: #fff;
+			}
+
+			.item {
+				display: flex;
+				align-items: center;
+				min-height: 80rpx;
+				font-size: 26rpx;
+				box-sizing: border-box;
+				padding: 20rpx 30rpx;
+
+				&:last-child {
+					border-bottom: 0;
+				}
+
+				&:active {
+					background-color: $cl-color-active;
+				}
+
+				&.is-disabled {
+					opacity: 0.5;
+				}
+
+				.avatar {
+					height: 80rpx;
+					flex-shrink: 0;
+				}
+
+				.text {
+					margin: 0 30rpx;
+				}
+			}
+		}
+	}
+
+	&__alert {
+		position: absolute;
+		top: 0;
+		right: 80rpx;
+		bottom: 0;
+		margin: auto;
+		background: rgba(0, 0, 0, 0.5);
+		width: 100rpx;
+		height: 100rpx;
+		border-radius: 10rpx;
+		color: #fff;
+		line-height: 100rpx;
+		text-align: center;
+		font-size: 48rpx;
+		z-index: 100;
+	}
+
+	&__bar {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		position: absolute;
+		right: 20rpx;
+		top: 0;
+		height: 100%;
+		font-size: 24rpx;
+		z-index: 20;
+
+		.block {
+			padding: 5rpx 10rpx;
+
+			text {
+				display: inline-flex;
+				align-items: center;
+				justify-content: center;
+				height: 30rpx;
+				width: 30rpx;
+				border-radius: 30rpx;
+			}
+
+			&.is-active {
+				text {
+					background-color: $cl-color-primary;
+					color: #fff;
+				}
+			}
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/list.scss b/uni_modules/cool-ui/static/css/list.scss
new file mode 100644
index 0000000..4433086
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/list.scss
@@ -0,0 +1,184 @@
+.cl-list {
+	margin-bottom: 20rpx;
+	overflow: hidden;
+	position: relative;
+
+	&-item {
+		display: flex;
+		align-items: center;
+		position: relative;
+		background-color: #fff;
+
+		&.is-append {
+			.cl-list__content {
+				margin-right: 20rpx;
+			}
+		}
+
+		&.is-disabled {
+			background-color: $cl-color-disabled-bg;
+			color: $cl-color-disabled;
+
+			&:after {
+				display: block;
+				content: "";
+				position: absolute;
+				left: 0;
+				top: 0;
+				height: 100%;
+				width: 100%;
+			}
+		}
+
+		&.is-border {
+			border-bottom: $cl-border-width solid #f6f7fa;
+		}
+
+		&.is-swipe {
+			overflow: hidden;
+		}
+
+		&__icon,
+		&__label,
+		&__append {
+			flex-shrink: 0;
+			line-height: 1;
+		}
+
+		&__label,
+		&__content,
+		&__append {
+			display: flex;
+			align-items: center;
+			min-height: 80rpx;
+			font-size: 26rpx;
+		}
+
+		&__swiper {
+			display: flex;
+			align-items: center;
+			transition: all 0.3s;
+			width: 100%;
+		}
+
+		&__container {
+			display: flex;
+			align-items: center;
+			width: 100%;
+			padding: 0 $cl-padding;
+			box-sizing: border-box;
+		}
+
+		&__icon {
+			margin-right: 20rpx;
+
+			& > image {
+				display: block;
+				height: 46rpx;
+				width: 46rpx;
+			}
+
+			& > text {
+				font-size: 46rpx;
+			}
+		}
+
+		&__label {
+			padding: 0 20rpx 0 0;
+			font-size: 28rpx;
+		}
+
+		&__content {
+			padding: 10rpx 0;
+			flex: 1;
+
+			&.is-justify-center {
+				justify-content: center;
+
+				picker {
+					text-align: center;
+				}
+			}
+
+			&.is-justify-end {
+				justify-content: flex-end;
+
+				picker {
+					text-align: end;
+				}
+			}
+
+			&.is-justify-space-between {
+				justify-content: space-between;
+			}
+
+			&.is-justify-space-around {
+				justify-content: space-around;
+			}
+
+			&.is-color-primary {
+				color: $cl-color-primary;
+			}
+
+			&.is-color-success {
+				color: $cl-color-success;
+			}
+
+			&.is-color-warning {
+				color: $cl-color-warning;
+			}
+
+			&.is-color-error {
+				color: $cl-color-error;
+			}
+		}
+
+		&__append {
+			[class^="cl-icon-"] {
+				font-size: 30rpx;
+				margin-left: 10rpx;
+			}
+		}
+
+		&__menu-left {
+			height: 100%;
+			transform: translateX(-100%);
+			position: absolute;
+			transition: left 0.3s;
+		}
+
+		&__menu-right {
+			height: 100%;
+			transform: translateX(100%);
+			position: absolute;
+			right: -1rpx;
+			transition: left 0.3s;
+		}
+
+		&__menu-left,
+		&__menu-right {
+			cl-button {
+				margin: 0;
+			}
+
+			.cl-button {
+				height: 100% !important;
+				border-radius: 0 !important;
+				margin: 0;
+				padding: 0 40rpx;
+			}
+
+			/* #ifdef MP */
+			& > view {
+				height: 100%;
+			}
+			/* #endif */
+		}
+	}
+}
+
+cl-list {
+	&:last-child {
+		margin-bottom: 0;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/loading-mask.scss b/uni_modules/cool-ui/static/css/loading-mask.scss
new file mode 100644
index 0000000..e7c4a60
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/loading-mask.scss
@@ -0,0 +1,69 @@
+.cl-loading-mask__wrap {
+	position: relative;
+
+	.cl-loading-mask {
+		position: absolute;
+		z-index: $cl-zIndex;
+		margin: 0;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		opacity: 0;
+		transition: opacity 0.3s;
+		pointer-events: none;
+
+		&.is-show {
+			opacity: 1;
+			pointer-events: auto;
+		}
+
+		&.is-fullscreen {
+			position: fixed;
+		}
+
+		&__content {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			width: 100%;
+		}
+
+		&__text {
+			font-size: 26rpx;
+			margin-top: 16rpx;
+			letter-spacing: 1rpx;
+			color: $cl-color-primary;
+		}
+
+		&__border {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+		}
+
+		&.is-border {
+			.cl-loading-mask__border {
+				background-color: rgba(0, 0, 0, 0.5);
+				border-radius: 20rpx;
+				width: 200rpx;
+				padding: 40rpx 20rpx;
+			}
+
+			.cl-loading-mask__text {
+				color: #fff;
+				margin-top: 30rpx;
+				text-align: center;
+			}
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/loading.scss b/uni_modules/cool-ui/static/css/loading.scss
new file mode 100644
index 0000000..42394cc
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/loading.scss
@@ -0,0 +1,16 @@
+.cl-loading {
+	animation: loading-rotate 1.2s linear infinite;
+
+	@keyframes loading-rotate {
+		0% {
+			transform: rotate(0);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+}
+
+cl-loading {
+	line-height: 0;
+}
diff --git a/uni_modules/cool-ui/static/css/loadmore.scss b/uni_modules/cool-ui/static/css/loadmore.scss
new file mode 100644
index 0000000..60046b5
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/loadmore.scss
@@ -0,0 +1,12 @@
+.cl-loadmore__wrap {
+	.cl-loadmore {
+		display: flex;
+		align-items: center;
+
+		&__text {
+			font-size: 26rpx;
+			color: $cl-color-info;
+			margin-left: 14rpx;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/noticebar.scss b/uni_modules/cool-ui/static/css/noticebar.scss
new file mode 100644
index 0000000..604f482
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/noticebar.scss
@@ -0,0 +1,54 @@
+.cl-noticebar {
+	display: flex;
+	align-items: center;
+
+	&__box {
+		flex: 1;
+		overflow: hidden;
+	}
+
+	.cl-icon {
+		/* #ifdef MP */
+		position: relative;
+		top: 2rpx;
+		/* #endif */
+	}
+
+	&__scroller {
+		position: relative;
+
+		&.is-vertical {
+			transition: top 0.3s;
+			flex-direction: column;
+
+			.cl-noticebar__text {
+				display: block;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+			}
+		}
+
+		&.is-horizontal {
+			display: flex;
+			align-items: center;
+		}
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+
+	&__text {
+		font-size: 26rpx;
+		line-height: 1;
+	}
+
+	&.is-scrollable {
+		.cl-noticebar__text {
+			white-space: nowrap;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/page.scss b/uni_modules/cool-ui/static/css/page.scss
new file mode 100644
index 0000000..b4ffbfc
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/page.scss
@@ -0,0 +1,24 @@
+.cl-page {
+	box-sizing: border-box;
+	position: relative;
+	z-index: 2;
+
+	.safe-area-bottom {
+		height: env(safe-area-inset-bottom);
+	}
+
+	&__loading {
+		position: relative;
+		z-index: 9999;
+	}
+
+	&__bg {
+		position: fixed;
+		left: 0;
+		top: 0;
+		height: 100%;
+		width: 100%;
+		background-color: $cl-color-bg;
+		z-index: -1;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/pay.scss b/uni_modules/cool-ui/static/css/pay.scss
new file mode 100644
index 0000000..7616ab2
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/pay.scss
@@ -0,0 +1,43 @@
+.cl-pay {
+	&__title {
+		font-size: 32rpx;
+		text-align: center;
+		padding-top: 30rpx;
+	}
+
+	&__container {
+		display: flex;
+	}
+
+	&__item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		height: 300rpx;
+
+		&:active {
+			opacity: 0.8;
+		}
+	}
+
+	&__icon {
+		height: 100rpx;
+		width: 100rpx;
+	}
+
+	&__label {
+		font-size: 26rpx;
+		margin-top: 20rpx;
+	}
+
+	&__footer {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100rpx;
+		border-top: 4rpx solid #f6f7fa;
+		font-size: 28rpx;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/popup.scss b/uni_modules/cool-ui/static/css/popup.scss
new file mode 100644
index 0000000..d631195
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/popup.scss
@@ -0,0 +1,120 @@
+.cl-popup__wrapper {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	opacity: 0;
+	transition: all 0.3s;
+	pointer-events: none;
+
+	&.is-open {
+		pointer-events: auto;
+		opacity: 1;
+
+		.cl-popup {
+			transition: all 0.4s;
+			transform: translate(0, 0);
+		}
+	}
+
+	&::after {
+		content: "";
+		display: inline-block;
+		height: 100%;
+		width: 0;
+		vertical-align: middle;
+	}
+
+	.cl-popup__modal {
+		height: 100%;
+		width: 100%;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+	}
+
+	.cl-popup {
+		background-color: #fff;
+		position: absolute;
+		transition: all 0.3s;
+		box-sizing: border-box;
+
+		&__header {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			line-height: 1;
+			font-size: 30rpx;
+			height: 90rpx;
+			letter-spacing: 1rpx;
+			font-weight: 500;
+		}
+
+		&__container {
+			height: 100%;
+			box-sizing: border-box;
+		}
+
+		&__close {
+			position: absolute;
+			top: 26rpx;
+			right: 26rpx;
+			font-size: 38rpx;
+			line-height: 1;
+		}
+	}
+
+	&--left {
+		.cl-popup {
+			transform: translateX(-100%);
+			top: 0;
+			left: 0;
+		}
+	}
+
+	&--right {
+		.cl-popup {
+			transform: translateX(100%);
+			right: 0;
+			top: 0;
+		}
+	}
+
+	&--top {
+		.cl-popup {
+			transform: translateY(-100%);
+			left: 0;
+			top: 0;
+		}
+	}
+
+	&--bottom {
+		.cl-popup {
+			transform: translateY(100%);
+			left: 0;
+			bottom: 0;
+		}
+	}
+
+	&--center {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		.cl-popup {
+			transform: scale(1.3);
+		}
+	}
+
+	&--left,
+	&--right,
+	&--bottom {
+		.cl-popup {
+			padding-bottom: env(safe-area-inset-bottom);
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/progress.scss b/uni_modules/cool-ui/static/css/progress.scss
new file mode 100644
index 0000000..ed22720
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/progress.scss
@@ -0,0 +1,74 @@
+.cl-progress {
+	display: flex;
+	align-items: center;
+	min-height: 34rpx;
+
+	&-bar {
+		box-sizing: border-box;
+		flex: 1;
+
+		&__outer {
+			border-radius: 50rpx;
+			overflow: hidden;
+			position: relative;
+		}
+
+		&__inner {
+			position: absolute;
+			left: 0;
+			top: 0;
+			height: 100%;
+			background-color: $cl-color-primary;
+			text-align: right;
+			border-radius: 50rpx;
+			line-height: 1;
+			white-space: nowrap;
+			transition: width 0.6s ease;
+		}
+	}
+
+	&__text {
+		display: inline-block;
+		height: 34rpx;
+		width: 100rpx;
+		line-height: 34rpx;
+		color: #606266;
+		font-size: 24rpx;
+		text-align: left;
+		margin-left: 10rpx;
+	}
+
+	&__icon {
+		font-size: 30rpx;
+	}
+
+	&.is-success {
+		.cl-progress-bar__inner {
+			background-color: $cl-color-success;
+		}
+
+		.cl-progress__text {
+			color: $cl-color-success;
+		}
+	}
+
+	&.is-warning {
+		.cl-progress-bar__inner {
+			background-color: $cl-color-warning;
+		}
+
+		.cl-progress__text {
+			color: $cl-color-warning;
+		}
+	}
+
+	&.is-error {
+		.cl-progress-bar__inner {
+			background-color: $cl-color-error;
+		}
+
+		.cl-progress__text {
+			color: $cl-color-error;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/radio.scss b/uni_modules/cool-ui/static/css/radio.scss
new file mode 100644
index 0000000..45e81f0
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/radio.scss
@@ -0,0 +1,124 @@
+.cl-radio {
+	display: inline-flex;
+	align-items: center;
+	height: $cl-height;
+	margin-right: 60rpx;
+	position: relative;
+
+	&__input {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: #fff;
+		box-sizing: border-box;
+		position: relative;
+		background-color: #fff;
+		border: $cl-border-width solid $cl-border-color;
+		height: $cl-radio-size;
+		width: $cl-radio-size;
+		border-radius: $cl-radio-size;
+
+		text {
+			display: inline-block;
+			position: absolute;
+			border-radius: 20rpx;
+			height: 14rpx;
+			width: 14rpx;
+		}
+	}
+
+	&__label {
+		line-height: 1;
+		font-size: 28rpx;
+		margin-left: 16rpx;
+		flex: 1;
+		display: -webkit-box;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		-webkit-box-orient: vertical;
+		-webkit-line-clamp: 1;
+	}
+
+	&.is-checked {
+		.cl-radio__input {
+			background-color: $cl-color-primary;
+			border: $cl-color-primary;
+
+			text {
+				background-color: #fff;
+			}
+		}
+
+		&.is-text {
+			.cl-radio__label {
+				color: $cl-color-primary;
+			}
+		}
+	}
+
+	&.is-disabled {
+		.cl-radio__input {
+			background-color: $cl-color-disabled-bg;
+			color: $cl-color-disabled;
+
+			text {
+				background-color: $cl-color-disabled;
+			}
+		}
+
+		.cl-radio__label {
+			color: $cl-color-disabled;
+		}
+	}
+
+	&.is-text {
+		.cl-radio__input {
+			display: none;
+		}
+
+		.cl-radio__label {
+			margin-left: 0;
+		}
+	}
+
+	&.is-border {
+		border-radius: 10rpx;
+		padding: 0 20rpx;
+		margin: 0 20rpx 20rpx 0;
+		border: $cl-border-width solid $cl-border-color;
+		box-sizing: border-box;
+		line-height: normal;
+
+		&.is-checked {
+			border-color: $cl-color-primary;
+			color: $cl-color-primary;
+
+			.cl-radio__label {
+				color: $cl-color-primary;
+			}
+		}
+	}
+
+	&.is-round {
+		border-radius: $cl-radio-size;
+	}
+
+	&.is-fill {
+		margin-right: 0;
+		width: 100%;
+	}
+}
+
+/* #ifdef MP */
+cl-radio {
+	display: inline-flex;
+}
+
+.cl-radio-group {
+	&.is-fill {
+		cl-radio {
+			display: inline;
+		}
+	}
+}
+/* #endif */
diff --git a/uni_modules/cool-ui/static/css/rate.scss b/uni_modules/cool-ui/static/css/rate.scss
new file mode 100644
index 0000000..eabf42d
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/rate.scss
@@ -0,0 +1,22 @@
+.cl-rate {
+	display: inline-flex;
+	align-items: center;
+
+	&__icon {
+		position: relative;
+		margin-right: 10rpx;
+		color: $cl-color-primary;
+	}
+
+	&__icon-active {
+		position: absolute;
+		top: 0;
+		left: 0;
+		overflow: hidden;
+	}
+
+	&__text {
+		font-size: 26rpx;
+		margin-left: 10rpx;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/row.scss b/uni_modules/cool-ui/static/css/row.scss
new file mode 100644
index 0000000..107fd57
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/row.scss
@@ -0,0 +1,59 @@
+.cl-row {
+	position: relative;
+	box-sizing: border-box;
+
+	&::after,
+	&::before {
+		content: "";
+		display: table;
+	}
+
+	&::after {
+		clear: both;
+	}
+
+	&--flex {
+		display: flex;
+
+		&::after,
+		&::before {
+			display: none;
+		}
+	}
+
+	&.is-justify-start {
+		justify-content: flex-start;
+	}
+
+	&.is-justify-center {
+		justify-content: center;
+	}
+
+	&.is-justify-end {
+		justify-content: flex-end;
+	}
+
+	&.is-justify-space-between {
+		justify-content: space-between;
+	}
+
+	&.is-justify-space-around {
+		justify-content: space-around;
+	}
+
+	&.is-align-top {
+		align-items: flex-start;
+	}
+
+	&.is-align-center {
+		align-items: center;
+	}
+
+	&.is-align-bottom {
+		align-items: flex-end;
+	}
+
+	&.is-wrap {
+		flex-wrap: wrap;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/scroller.scss b/uni_modules/cool-ui/static/css/scroller.scss
new file mode 100644
index 0000000..0bd1a9d
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/scroller.scss
@@ -0,0 +1,54 @@
+.cl-scroller__wrap {
+	position: relative;
+	height: 100%;
+	overflow: hidden;
+}
+
+.cl-scroller {
+	height: 100%;
+
+	&__loading {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		position: absolute;
+		left: 0;
+		bottom: 100%;
+		min-height: 100rpx;
+	}
+
+	&__view {
+		height: 100%;
+	}
+
+	&__back-top {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		position: absolute;
+		right: 30rpx;
+		bottom: 100rpx;
+		background-color: rgba(255, 255, 255, 0.8);
+		border: $cl-border-width solid #ddd;
+		height: 80rpx;
+		width: 80rpx;
+		border-radius: 80rpx;
+		transform: translateX(160rpx);
+		transition: all 0.3s;
+		opacity: 0;
+		z-index: 99;
+
+		&.fadeIn {
+			transform: translateX(0);
+			opacity: 1;
+		}
+
+		&-text {
+			font-size: 20rpx;
+			color: #444;
+			margin-top: -4rpx;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/search.scss b/uni_modules/cool-ui/static/css/search.scss
new file mode 100644
index 0000000..8dcfe5f
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/search.scss
@@ -0,0 +1,53 @@
+.cl-search {
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+
+	&__input {
+		display: flex;
+		align-items: center;
+		flex: 1;
+		position: relative;
+		background-color: #fff;
+		border: $cl-border-width solid #dcdfe6;
+		border-radius: 100rpx;
+
+		cl-input,
+		.cl-input {
+			flex: 1;
+			border: 0;
+		}
+	}
+
+	&__inner {
+		height: 100%;
+		flex: 1;
+
+		.cl-icon-search {
+			font-size: 30rpx;
+		}
+	}
+
+	&__btn {
+		.cl-button {
+			height: 56rpx;
+			margin: 0 4rpx 0 0;
+			padding: 0 34rpx;
+		}
+	}
+
+	&__prepend,
+	&__append {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	&__prepend {
+		margin-right: 20rpx;
+	}
+
+	&__append {
+		margin-left: 20rpx;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/select-city.scss b/uni_modules/cool-ui/static/css/select-city.scss
new file mode 100644
index 0000000..1ffa099
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/select-city.scss
@@ -0,0 +1,49 @@
+.cl-select-city {
+	&__wrap {
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+	}
+
+	&__tabs {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 0 30rpx;
+	}
+
+	&__list {
+		border-top: 1rpx solid $cl-color-bg;
+		border-bottom: 1rpx solid $cl-color-bg;
+		box-sizing: border-box;
+		flex: 1;
+
+		swiper {
+			height: 100%;
+
+			swiper-item {
+				height: 100%;
+			}
+		}
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		padding: 0 30rpx;
+		height: 80rpx;
+		font-size: 26rpx;
+
+		.cl-icon-toast-success {
+			display: none;
+		}
+
+		&.is-active {
+			color: $cl-color-primary;
+
+			.cl-icon-toast-success {
+				display: inline-block;
+				margin-right: 16rpx;
+			}
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/select-date.scss b/uni_modules/cool-ui/static/css/select-date.scss
new file mode 100644
index 0000000..9fce69a
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/select-date.scss
@@ -0,0 +1,12 @@
+.cl-select-date {
+	&__picker {
+		height: 500rpx;
+
+		&-item {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 28rpx;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/select-inner.scss b/uni_modules/cool-ui/static/css/select-inner.scss
new file mode 100644
index 0000000..d293a1f
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/select-inner.scss
@@ -0,0 +1,53 @@
+.cl-select-inner {
+	display: flex;
+	align-items: center;
+	height: $cl-height;
+	width: 100%;
+	background-color: #fff;
+	box-sizing: border-box;
+	position: relative;
+	font-size: $cl-font-size;
+
+	&__wrap {
+		width: 100%;
+	}
+
+	&__value {
+		flex: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		line-height: 1;
+	}
+
+	&__icon {
+		color: $cl-color-placeholder;
+		font-size: 32rpx !important;
+
+		&:last-child {
+			margin-left: 20rpx;
+		}
+	}
+
+	&__placeholder {
+		color: $cl-color-placeholder;
+	}
+
+	&.is-disabled {
+		background-color: $cl-color-disabled-bg;
+		color: $cl-color-disabled;
+
+		.cl-select__placeholder {
+			color: $cl-color-disabled;
+		}
+	}
+
+	&.is-border {
+		border: $cl-border-width solid $cl-border-color;
+		border-radius: $cl-border-radius;
+	}
+
+	&.is-round {
+		border-radius: $cl-height;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/select-popup.scss b/uni_modules/cool-ui/static/css/select-popup.scss
new file mode 100644
index 0000000..9729d19
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/select-popup.scss
@@ -0,0 +1,38 @@
+.cl-select-popup {
+	&__list {
+		padding: 10rpx 30rpx;
+	}
+
+	&__item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		font-size: 28rpx;
+		height: 90rpx;
+		border-bottom: $cl-border-width solid #eee;
+
+		.is-check {
+			display: none;
+		}
+
+		&:last-child {
+			border-bottom: 0;
+		}
+
+		&.is-active {
+			color: $cl-color-primary;
+
+			.is-check {
+				display: inline-block;
+			}
+		}
+	}
+
+	&__empty {
+		padding: 30rpx 0 60rpx 0;
+	}
+
+	&__footer {
+		padding: 30rpx;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/select.scss b/uni_modules/cool-ui/static/css/select.scss
new file mode 100644
index 0000000..78c57c8
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/select.scss
@@ -0,0 +1,3 @@
+.cl-select-region {
+	width: 100%;
+}
diff --git a/uni_modules/cool-ui/static/css/share.scss b/uni_modules/cool-ui/static/css/share.scss
new file mode 100644
index 0000000..0c5bb7d
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/share.scss
@@ -0,0 +1,55 @@
+.cl-share {
+	position: relative;
+
+	&__title {
+		font-size: 32rpx;
+		text-align: center;
+		padding-top: 30rpx;
+	}
+
+	&__container {
+		display: flex;
+
+		.item {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			background-color: transparent;
+			padding: 0;
+			margin: 0;
+			border: 0;
+			height: 200rpx;
+			line-height: normal;
+
+			&::after {
+				border: 0;
+			}
+
+			image {
+				height: 100rpx;
+				width: 100rpx;
+			}
+
+			text {
+				font-size: 26rpx;
+				margin-top: 20rpx;
+			}
+
+			&:active {
+				opacity: 0.8;
+			}
+		}
+	}
+}
+
+.cl-share-popup {
+	.cl-share {
+		border-radius: 0;
+
+		.item {
+			height: 300rpx;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/skeleton.scss b/uni_modules/cool-ui/static/css/skeleton.scss
new file mode 100644
index 0000000..273a09c
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/skeleton.scss
@@ -0,0 +1,23 @@
+.cl-skeleton {
+	&__inner {
+		height: 100%;
+		width: 100%;
+	}
+
+	&.is-loading {
+		border-radius: $cl-border-radius;
+		background: linear-gradient(90deg, #f0f2f5 25%, #e6e8eb 37%, #f0f2f5 63%);
+		background-size: 400% 100%;
+		animation: cl-skeleton-loading 1.4s ease infinite;
+	}
+}
+
+@keyframes cl-skeleton-loading {
+	0% {
+		background-position: 100% 50%;
+	}
+
+	to {
+		background-position: 0 50%;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/status-bar.scss b/uni_modules/cool-ui/static/css/status-bar.scss
new file mode 100644
index 0000000..412bfc3
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/status-bar.scss
@@ -0,0 +1,15 @@
+.cl-status-bar {
+	position: fixed;
+	top: 0;
+	left: 0;
+	height: inherit;
+	width: 100%;
+}
+
+.cl-status-bar__wrap {
+	&.is-sticky {
+		position: sticky;
+		top: 0;
+		z-index: 999;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/steps.scss b/uni_modules/cool-ui/static/css/steps.scss
new file mode 100644
index 0000000..1c1f40c
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/steps.scss
@@ -0,0 +1,61 @@
+.cl-steps {
+	padding: 20rpx 0;
+	box-sizing: border-box;
+
+	&::after,
+	&::before {
+		content: "";
+		display: table;
+	}
+
+	&::after {
+		clear: both;
+	}
+}
+
+.cl-step {
+	width: 25%;
+	float: left;
+	box-sizing: border-box;
+	position: relative;
+
+	&:not(.is-last)::after {
+		content: "";
+		display: block;
+		height: 6rpx;
+		width: calc(100% - 36rpx);
+		position: absolute;
+		top: calc(50% - 3rpx);
+		left: calc(50% + 18rpx);
+		background-color: #dfdfdf;
+		border-radius: 6rpx;
+	}
+
+	&__title {
+		font-size: 24rpx;
+	}
+
+	&__value {
+		display: inline-block;
+		height: 20rpx;
+		width: 20rpx;
+		border-radius: 50rpx;
+		background-color: #dfdfdf;
+		margin: 20rpx 0;
+		justify-content: space-between;
+	}
+
+	&__description {
+		font-size: 24rpx;
+	}
+
+	&.is-active {
+		.cl-step__value {
+			background-color: $uni-color-primary;
+		}
+
+		&:after {
+			background-color: $uni-color-primary;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/sticky.scss b/uni_modules/cool-ui/static/css/sticky.scss
new file mode 100644
index 0000000..563930d
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/sticky.scss
@@ -0,0 +1,16 @@
+.cl-sticky {
+	position: -webkit-sticky;
+	position: sticky;
+	top: 0;
+	z-index: 99;
+	width: 100%;
+
+	&.is-flex {
+		display: flex;
+		align-items: center;
+	}
+
+	&.is-white {
+		background-color: #fff;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/switch.scss b/uni_modules/cool-ui/static/css/switch.scss
new file mode 100644
index 0000000..0af2a91
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/switch.scss
@@ -0,0 +1,25 @@
+.cl-switch {
+	position: relative;
+
+	.uni-switch-input {
+		margin-right: 0;
+	}
+
+	.uni-switch-wrapper {
+		.uni-switch-input {
+			&.uni-switch-input-checked {
+				background-color: $cl-color-primary;
+				border-color: $cl-color-primary;
+			}
+		}
+	}
+}
+
+.wx-switch-input {
+	background-color: $cl-color-primary !important;
+	border-color: $cl-border-color !important;
+
+	&-checked {
+		border-color: $cl-color-primary !important;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/tabs.scss b/uni_modules/cool-ui/static/css/tabs.scss
new file mode 100644
index 0000000..61d3cf5
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/tabs.scss
@@ -0,0 +1,127 @@
+.cl-tabs {
+	width: 100%;
+
+	&__header {
+		display: flex;
+		position: relative;
+	}
+
+	&__bar {
+		white-space: nowrap;
+		box-sizing: border-box;
+		flex: 1;
+
+		.uni-scroll-view::-webkit-scrollbar {
+			display: none;
+		}
+
+		&-box {
+			display: inline-flex;
+			position: relative;
+			height: 100%;
+			width: 100%;
+		}
+
+		&-item {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+			font-size: 28rpx;
+			box-sizing: border-box;
+
+			.cl-tabs__icon {
+				font-size: 30rpx;
+
+				&.is-prefix {
+					margin-right: 10rpx;
+				}
+
+				&.is--suffix {
+					margin-left: 10rpx;
+				}
+			}
+
+			.cl-tabs__label {
+				white-space: nowrap;
+			}
+
+			&.is-active {
+				color: $cl-color-primary;
+			}
+		}
+	}
+
+	&__dropdown {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 100rpx;
+		background-color: transparent;
+
+		&-box {
+			position: absolute;
+			top: 80rpx;
+			left: 0;
+			width: 100%;
+			box-sizing: border-box;
+			background-color: #fff;
+			overflow: hidden;
+			transition: all 0.3s;
+			z-index: 99;
+		}
+	}
+
+	&__line {
+		height: 4rpx;
+		width: 16px;
+		position: absolute;
+		bottom: 2rpx;
+		border-radius: 20rpx;
+		transition: all 0.5s;
+		background-color: $cl-color-primary;
+	}
+
+	&.is-content {
+		height: 100%;
+	}
+
+	&.is-fill {
+		.cl-tabs__bar-item {
+			flex: 1;
+		}
+	}
+
+	&.is-border {
+		.cl-tabs__header {
+			border-bottom: $cl-border-width solid #eee;
+		}
+	}
+
+	&.is-dropdown {
+		.cl-tabs__bar {
+			width: calc(100% - 100rpx);
+		}
+	}
+
+	&.is-checkable {
+		.cl-tabs__label {
+			background-color: rgba($cl-color-primary, 0.05);
+			color: $cl-color-primary;
+			padding: 8rpx 20rpx;
+			border-radius: 8rpx;
+		}
+
+		.cl-tabs__bar-item {
+			padding: 0 !important;
+			margin-right: 20rpx;
+
+			&.is-active {
+				.cl-tabs__label {
+					background-color: $cl-color-primary;
+					color: #fff;
+				}
+			}
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/tag.scss b/uni_modules/cool-ui/static/css/tag.scss
new file mode 100644
index 0000000..7f202bb
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/tag.scss
@@ -0,0 +1,67 @@
+@mixin color($color) {
+	background-color: $color;
+
+	&.is-plain {
+		color: $color;
+		border-collapse: $color;
+		background-color: #fff;
+	}
+}
+
+.cl-tag {
+	border-radius: 6rpx;
+	color: #fff;
+	display: inline-flex;
+	align-items: center;
+	line-height: 1;
+
+	&__close {
+		margin-left: 10rpx;
+		position: relative;
+		top: 1rpx;
+	}
+
+	&--default {
+		padding: 12rpx 20rpx;
+		font-size: 24rpx;
+	}
+
+	&--small {
+		padding: 8rpx 14rpx;
+		font-size: 22rpx;
+	}
+
+	&--large {
+		padding: 16rpx 24rpx;
+		font-size: 26rpx;
+	}
+
+	&.is-round {
+		border-radius: 50rpx;
+	}
+
+	&.is-plain {
+		border-width: $cl-border-width;
+		border-style: solid;
+	}
+
+	&--primary {
+		@include color($cl-color-primary);
+	}
+
+	&--success {
+		@include color($cl-color-success);
+	}
+
+	&--warning {
+		@include color($cl-color-warning);
+	}
+
+	&--error {
+		@include color($cl-color-error);
+	}
+
+	&--info {
+		@include color($cl-color-info);
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/text.scss b/uni_modules/cool-ui/static/css/text.scss
new file mode 100644
index 0000000..4da2868
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/text.scss
@@ -0,0 +1,89 @@
+cl-text {
+	line-height: 1;
+}
+
+.cl-text {
+	display: inline-flex;
+	align-items: center;
+	white-space: normal;
+	word-break: break-all;
+	word-wrap: break-word;
+	font-size: $cl-font-size;
+
+	&.is-bold {
+		font-weight: 500;
+	}
+
+	&.is-block {
+		display: block;
+	}
+
+	&.is-line-through {
+		text-decoration: line-through;
+	}
+
+	&.is-underline {
+		.cl-text__value {
+			text-decoration: underline;
+		}
+	}
+
+	&.is-ellipsis {
+		.cl-text__value {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+		}
+	}
+
+	&.is-copy {
+		user-select: text;
+	}
+
+	&.is-price {
+		align-items: baseline;
+	}
+
+	&.is-color-primary {
+		color: $cl-color-primary !important;
+	}
+
+	&.is-color-success {
+		color: $cl-color-success !important;
+	}
+
+	&.is-color-error {
+		color: $cl-color-error !important;
+	}
+
+	&.is-color-warning {
+		color: $cl-color-warning !important;
+	}
+
+	&.is-color-info {
+		color: $cl-color-info !important;
+	}
+
+	&__value {
+		display: inline;
+	}
+
+	&__symbol--price,
+	&__precision {
+		font-size: 24rpx;
+	}
+
+	&__prefix-icon {
+		margin-right: 10rpx;
+	}
+
+	&__suffix-icon {
+		margin-left: 10rpx;
+	}
+
+	&__prefix-icon,
+	&__suffix-icon {
+		font-size: 30rpx;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/textarea.scss b/uni_modules/cool-ui/static/css/textarea.scss
new file mode 100644
index 0000000..d7e93c0
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/textarea.scss
@@ -0,0 +1,33 @@
+.cl-textarea {
+	position: relative;
+	width: 100%;
+	background-color: #ffffff;
+	border-radius: $cl-border-radius;
+	padding: 10rpx $cl-padding;
+	box-sizing: border-box;
+
+	&__inner {
+		height: 100%;
+		width: 100%;
+		font-size: $cl-font-size;
+		line-height: 1.2;
+	}
+
+	&.is-disabled {
+		background-color: $cl-color-disabled-bg;
+		color: $cl-color-disabled;
+	}
+
+	&__count {
+		position: absolute;
+		right: 10rpx;
+		bottom: 10rpx;
+		font-size: 24rpx;
+		letter-spacing: 1rpx;
+		color: $cl-color-info;
+	}
+
+	&.is-border {
+		border: $cl-border-width solid $cl-border-color;
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/timeline.scss b/uni_modules/cool-ui/static/css/timeline.scss
new file mode 100644
index 0000000..e665b9d
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/timeline.scss
@@ -0,0 +1,89 @@
+.cl-timeline {
+	&-item {
+		display: flex;
+		width: 100%;
+		position: relative;
+
+		&__timestamp {
+			font-size: 24rpx;
+			margin: 0 20rpx;
+			text-align: center;
+		}
+
+		&__date {
+			display: block;
+			font-size: 24rpx;
+			text-align: right;
+		}
+
+		&__time {
+			display: block;
+			font-size: 22rpx;
+			text-align: right;
+			color: #666;
+		}
+
+		&__node {
+			display: flex;
+			justify-content: center;
+			position: relative;
+			width: 52rpx;
+			color: #ccc;
+
+			&::after {
+				content: "";
+				display: block;
+				height: calc(100% - 32rpx);
+				width: 4rpx;
+				background-image: linear-gradient(
+					to bottom,
+					currentColor 0%,
+					currentColor 80%,
+					transparent 50%
+				);
+				background-size: 4rpx 18rpx;
+				background-repeat: y-repeat;
+				transform: scaleX(1);
+				position: absolute;
+				top: 32rpx;
+				border-radius: 10rpx;
+			}
+
+			&-box {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				height: 32rpx;
+				width: 32rpx;
+			}
+		}
+
+		&__dot {
+			display: block;
+			height: 16rpx;
+			width: 16rpx;
+			z-index: 9;
+			border-radius: 18rpx;
+		}
+
+		&__icon {
+			font-size: 40rpx;
+			z-index: 2;
+			position: relative;
+		}
+
+		&__content {
+			font-size: 24rpx;
+			flex: 1;
+			margin: 0 20rpx;
+			position: relative;
+			padding-bottom: 60rpx;
+		}
+
+		&.is-line {
+			.cl-timeline-item__node::after {
+				display: none;
+			}
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/toast.scss b/uni_modules/cool-ui/static/css/toast.scss
new file mode 100644
index 0000000..3d8ef3f
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/toast.scss
@@ -0,0 +1,60 @@
+.cl-toast {
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border-radius: 26rpx;
+	padding: 40rpx;
+	max-width: 80%;
+	background-color: rgba(50, 50, 50, 0.9);
+	color: #ffffff;
+	line-height: 1;
+
+	&__icon {
+		margin-bottom: 20rpx;
+
+		text {
+			font-size: 60rpx;
+		}
+
+		image {
+			display: block;
+			height: 60rpx;
+			width: 60rpx;
+		}
+	}
+
+	&__content {
+		font-size: 28rpx;
+		text-align: center;
+	}
+
+	&.is-icon {
+		min-width: 110rpx;
+	}
+}
+
+.cl-toast__wrap {
+	.cl-popup {
+		width: 100% !important;
+
+		&__wrapper {
+			pointer-events: none !important;
+
+			&--top {
+				top: 100rpx;
+				top: calc(env(safe-area-inset-top) + 100rpx);
+			}
+
+			&--bottom {
+				bottom: 100rpx;
+				bottom: calc(env(safe-area-inset-bottom) + 100rpx);
+			}
+		}
+
+		&__container {
+			text-align: center;
+			width: 100%;
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/topbar.scss b/uni_modules/cool-ui/static/css/topbar.scss
new file mode 100644
index 0000000..8adb627
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/topbar.scss
@@ -0,0 +1,99 @@
+.cl-topbar {
+	display: flex;
+	align-items: center;
+	height: $cl-topbar-height;
+	width: 100%;
+	position: relative;
+	box-sizing: border-box;
+
+	&__content {
+		width: 100%;
+	}
+
+	&__text {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+
+		text {
+			width: 500rpx;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+	}
+
+	&__title {
+		font-size: 14px;
+
+		&:last-child {
+			font-size: 16px;
+		}
+	}
+
+	&__description {
+		font-size: 12px;
+		color: #999;
+		line-height: 1;
+	}
+
+	&__prepend,
+	&__append {
+		display: flex;
+		align-items: center;
+		height: $cl-topbar-height;
+		position: absolute;
+
+		/* #ifdef MP */
+		& > view {
+			display: flex;
+		}
+		/* #endif */
+	}
+
+	&__prepend {
+		left: 0;
+	}
+
+	&__append {
+		right: 0;
+	}
+
+	&__icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		height: 100%;
+		width: 80rpx;
+		font-size: 22px;
+
+		&:active {
+			opacity: 0.8;
+		}
+	}
+
+	&.is-fixed {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+	}
+
+	&.is-border {
+		border-bottom: $cl-border-width solid #f6f7fa;
+	}
+
+	&.is-ios {
+		.cl-topbar__title {
+			font-weight: bold;
+		}
+	}
+
+	&.with-mp {
+		/* #ifdef MP */
+		padding-right: 180rpx;
+		/* #endif */
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/tree.scss b/uni_modules/cool-ui/static/css/tree.scss
new file mode 100644
index 0000000..5b9ff60
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/tree.scss
@@ -0,0 +1,66 @@
+.cl-tree {
+	&-item {
+		&__content {
+			display: flex;
+			align-items: center;
+			height: 100%;
+			position: relative;
+			border-radius: $cl-border-radius;
+			padding: 0 10rpx;
+			box-sizing: border-box;
+
+			&:active {
+				background-color: $cl-color-active;
+			}
+		}
+
+		&__expand {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			height: 100%;
+
+			.icon-caret {
+				display: inline-block;
+				transform: rotate(-90deg);
+				transition: transform 0.3s;
+			}
+		}
+
+		&__label {
+			font-size: $cl-font-size;
+			flex: 1;
+			position: relative;
+			padding: 0 50rpx 0 4rpx;
+		}
+
+		&__check {
+			display: none;
+		}
+
+		&__children {
+			overflow: hidden;
+			transition: all 0.3s;
+		}
+
+		&.is-expand {
+			& > .cl-tree-item__content .icon-caret {
+				transform: rotate(0deg);
+			}
+		}
+
+		&.is-checked {
+			& > .cl-tree-item__content {
+				color: $cl-color-primary;
+
+				.cl-tree-item__check {
+					display: block;
+				}
+			}
+		}
+	}
+}
+
+.cl-tree-select {
+	padding: 10rpx;
+}
diff --git a/uni_modules/cool-ui/static/css/upload.scss b/uni_modules/cool-ui/static/css/upload.scss
new file mode 100644
index 0000000..2d9aa92
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/upload.scss
@@ -0,0 +1,88 @@
+.cl-upload-list {
+	display: flex;
+	flex-wrap: wrap;
+	margin-bottom: -20rpx;
+
+	.cl-upload {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: $cl-upload-radius;
+		border-width: $cl-border-width;
+		border-style: dashed;
+		border-color: $cl-border-color;
+		box-sizing: border-box;
+		position: relative;
+		margin-right: 20rpx;
+		margin-bottom: 20rpx;
+
+		&__add {
+			font-size: 50rpx;
+			color: #8c939d;
+		}
+
+		&__target {
+			height: 100%;
+			width: 100%;
+			border-radius: $cl-upload-radius;
+		}
+
+		&__remove {
+			position: absolute;
+			right: 0;
+			top: 0;
+			color: $cl-color-error;
+			z-index: 1;
+			line-height: normal;
+			font-size: 30rpx;
+			padding: 10rpx;
+		}
+
+		&__progress {
+			position: absolute;
+			left: 10rpx;
+			bottom: 6rpx;
+			width: calc(100% - 10rpx);
+			z-index: 2;
+		}
+
+		&__demo {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			color: $cl-color-placeholder;
+
+			.cl-icon-camera-fill {
+				font-size: 70rpx;
+			}
+
+			.text {
+				font-size: 24rpx;
+				line-height: normal;
+				margin-top: 10rpx;
+			}
+		}
+	}
+
+	&:not(.is-disabled) {
+		.cl-upload {
+			&:active {
+				border-color: $cl-color-primary;
+				&__add {
+					color: $cl-color-primary;
+				}
+			}
+		}
+	}
+
+	&.is-disabled {
+		.cl-upload {
+			background-color: $cl-color-disabled-bg;
+
+			&__add {
+				transform: rotate(45deg);
+			}
+		}
+	}
+}
diff --git a/uni_modules/cool-ui/static/css/video.scss b/uni_modules/cool-ui/static/css/video.scss
new file mode 100644
index 0000000..30f7bb3
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/video.scss
@@ -0,0 +1,4 @@
+.cl-video {
+	height: 100%;
+	width: 100%;
+}
diff --git a/uni_modules/cool-ui/static/css/waterfall.scss b/uni_modules/cool-ui/static/css/waterfall.scss
new file mode 100644
index 0000000..95c7bcf
--- /dev/null
+++ b/uni_modules/cool-ui/static/css/waterfall.scss
@@ -0,0 +1,15 @@
+.cl-waterfall {
+	width: 100%;
+	box-sizing: border-box;
+
+	&::after {
+		content: "";
+		display: block;
+		clear: both;
+	}
+
+	&-column {
+		float: left;
+		break-inside: avoid;
+	}
+}
diff --git a/uni_modules/cool-ui/static/iconfont/font.ttf b/uni_modules/cool-ui/static/iconfont/font.ttf
new file mode 100644
index 0000000..f2d39e6
Binary files /dev/null and b/uni_modules/cool-ui/static/iconfont/font.ttf differ
diff --git a/uni_modules/cool-ui/static/iconfont/font.woff b/uni_modules/cool-ui/static/iconfont/font.woff
new file mode 100644
index 0000000..ea87e7a
Binary files /dev/null and b/uni_modules/cool-ui/static/iconfont/font.woff differ
diff --git a/uni_modules/cool-ui/static/iconfont/font.woff2 b/uni_modules/cool-ui/static/iconfont/font.woff2
new file mode 100644
index 0000000..ce6eedf
Binary files /dev/null and b/uni_modules/cool-ui/static/iconfont/font.woff2 differ
diff --git a/uni_modules/cool-ui/static/iconfont/index.scss b/uni_modules/cool-ui/static/iconfont/index.scss
new file mode 100644
index 0000000..bf20d81
--- /dev/null
+++ b/uni_modules/cool-ui/static/iconfont/index.scss
@@ -0,0 +1,434 @@
+@font-face {
+	font-family: "cl-iconfont"; /* Project id 1725188 */
+	src:
+		url("uni_modules/cool-ui/static/iconfont/font.woff2") format("woff2"),
+		url("uni_modules/cool-ui/static/iconfont/font.woff") format("woff"),
+		url("uni_modules/cool-ui/static/iconfont/font.ttf") format("truetype");
+}
+
+[class*="cl-icon-"] {
+	font-family: "cl-iconfont";
+	font-size: inherit;
+	font-style: normal;
+	line-height: 1;
+}
+
+.cl-icon-loading-dot:before {
+	content: "\e903";
+}
+
+.cl-icon-loading-spin:before {
+	content: "\e90b";
+}
+
+.cl-icon-loading-snow:before {
+	content: "\e901";
+}
+
+.cl-icon-app:before {
+	content: "\e905";
+}
+
+.cl-icon-payment:before {
+	content: "\e906";
+}
+
+.cl-icon-face-auth:before {
+	content: "\e907";
+}
+
+.cl-icon-folder:before {
+	content: "\e908";
+}
+
+.cl-icon-bill:before {
+	content: "\e90a";
+}
+
+.cl-icon-phone:before {
+	content: "\e904";
+}
+
+.cl-icon-amount-fill:before {
+	content: "\e8f9";
+}
+
+.cl-icon-wallet-fill:before {
+	content: "\e8fa";
+}
+
+.cl-icon-doc-fill:before {
+	content: "\e8fb";
+}
+
+.cl-icon-good-fill:before {
+	content: "\e8f8";
+}
+
+.cl-icon-camera-fill:before {
+	content: "\e8fc";
+}
+
+.cl-icon-mail-fill:before {
+	content: "\e8fd";
+}
+
+.cl-icon-bank-card-fill:before {
+	content: "\e8fe";
+}
+
+.cl-icon-relay-fill:before {
+	content: "\e8f7";
+}
+
+.cl-icon-comment-fill:before {
+	content: "\e634";
+}
+
+.cl-icon-share:before {
+	content: "\e8f3";
+}
+
+.cl-icon-link:before {
+	content: "\e8f4";
+}
+
+.cl-icon-back:before {
+	content: "\e8f5";
+}
+
+.cl-icon-enter:before {
+	content: "\e8f6";
+}
+
+.cl-icon-top:before {
+	content: "\e8ea";
+}
+
+.cl-icon-upgrade:before {
+	content: "\e8eb";
+}
+
+.cl-icon-rise:before {
+	content: "\e8ec";
+}
+
+.cl-icon-decline:before {
+	content: "\e8ed";
+}
+
+.cl-icon-active:before {
+	content: "\e8ee";
+}
+
+.cl-icon-shrink:before {
+	content: "\e8f1";
+}
+
+.cl-icon-cropper:before {
+	content: "\e8f2";
+}
+
+.cl-icon-fullscreen:before {
+	content: "\e8ef";
+}
+
+.cl-icon-enlarge:before {
+	content: "\e8f0";
+}
+
+.cl-icon-chart-pie:before {
+	content: "\e8e6";
+}
+
+.cl-icon-arrow-double-left:before {
+	content: "\e8e7";
+}
+
+.cl-icon-arrow-double-right:before {
+	content: "\e8e8";
+}
+
+.cl-icon-like-fill:before {
+	content: "\e8df";
+}
+
+.cl-icon-like:before {
+	content: "\e8e0";
+}
+
+.cl-icon-my:before {
+	content: "\e8e1";
+}
+
+.cl-icon-eye-open:before {
+	content: "\e8dc";
+}
+
+.cl-icon-friend:before {
+	content: "\e8e2";
+}
+
+.cl-icon-eye-close:before {
+	content: "\e8de";
+}
+
+.cl-icon-cloud-download:before {
+	content: "\e8db";
+}
+
+.cl-icon-cloud-upload:before {
+	content: "\e8da";
+}
+
+.cl-icon-set:before {
+	content: "\e8e4";
+}
+
+.cl-icon-chart-bar:before {
+	content: "\e8d8";
+}
+
+.cl-icon-clock-fill:before {
+	content: "\e8cc";
+}
+
+.cl-icon-favor-fill:before {
+	content: "\e8ce";
+}
+
+.cl-icon-help-fill:before {
+	content: "\e8cf";
+}
+
+.cl-icon-history-fill:before {
+	content: "\e8d0";
+}
+
+.cl-icon-smile-fill:before {
+	content: "\e8d1";
+}
+
+.cl-icon-map-fill:before {
+	content: "\e8d3";
+}
+
+.cl-icon-prompt-fill:before {
+	content: "\e8d4";
+}
+
+.cl-icon-meh-fill:before {
+	content: "\e8d5";
+}
+
+.cl-icon-cry-fill:before {
+	content: "\e8d6";
+}
+
+.cl-icon-success-fill:before {
+	content: "\e8d2";
+}
+
+.cl-icon-delete-fill:before {
+	content: "\e8d7";
+}
+
+.cl-icon-stop:before {
+	content: "\e8c4";
+}
+
+.cl-icon-play:before {
+	content: "\e8c5";
+}
+
+.cl-icon-more:before {
+	content: "\e8c6";
+}
+
+.cl-icon-back-top:before {
+	content: "\e8bb";
+}
+
+.cl-icon-map:before {
+	content: "\e8c7";
+}
+
+.cl-icon-keyboard-9:before {
+	content: "\e8c8";
+}
+
+.cl-icon-keyboard-26:before {
+	content: "\e8c9";
+}
+
+.cl-icon-calendar:before {
+	content: "\e8bd";
+}
+
+.cl-icon-customer-service:before {
+	content: "\e8be";
+}
+
+.cl-icon-edit:before {
+	content: "\e8ca";
+}
+
+.cl-icon-scan:before {
+	content: "\e8bf";
+}
+
+.cl-icon-pay:before {
+	content: "\e8c0";
+}
+
+.cl-icon-image:before {
+	content: "\e610";
+}
+
+.cl-icon-image-error:before {
+	content: "\e612";
+}
+
+.cl-icon-warning-border:before {
+	content: "\e8b3";
+}
+
+.cl-icon-time:before {
+	content: "\e8b5";
+}
+
+.cl-icon-meh:before {
+	content: "\e8b6";
+}
+
+.cl-icon-cry:before {
+	content: "\e8b7";
+}
+
+.cl-icon-smile:before {
+	content: "\e8b8";
+}
+
+.cl-icon-refresh:before {
+	content: "\e8ad";
+}
+
+.cl-icon-plus-border:before {
+	content: "\e8ae";
+}
+
+.cl-icon-minus-border:before {
+	content: "\e8af";
+}
+
+.cl-icon-check-border:before {
+	content: "\e8b0";
+}
+
+.cl-icon-close-border:before {
+	content: "\e8b1";
+}
+
+.cl-icon-help-border:before {
+	content: "\e8b2";
+}
+
+.cl-icon-caret-bottom:before {
+	content: "\e797";
+}
+
+.cl-icon-caret-top:before {
+	content: "\e798";
+}
+
+.cl-icon-notification:before {
+	content: "\e808";
+}
+
+.cl-icon-notification-fill:before {
+	content: "\e807";
+}
+
+.cl-icon-arrow-bottom:before {
+	content: "\e661";
+}
+
+.cl-icon-arrow-top:before {
+	content: "\e6de";
+}
+
+.cl-icon-toast-warning:before {
+	content: "\e62b";
+}
+
+.cl-icon-toast-waiting:before {
+	content: "\e62a";
+}
+
+.cl-icon-toast-success:before {
+	content: "\e642";
+}
+
+.cl-icon-toast-error:before {
+	content: "\e644";
+}
+
+.cl-icon-arrow-left:before {
+	content: "\e7ed";
+}
+
+.cl-icon-arrow-right:before {
+	content: "\e806";
+}
+
+.cl-icon-plus:before {
+	content: "\e809";
+}
+
+.cl-icon-minus:before {
+	content: "\e80a";
+}
+
+.cl-icon-check:before {
+	content: "\e645";
+}
+
+.cl-icon-close:before {
+	content: "\e646";
+}
+
+.cl-icon-search:before {
+	content: "\e65c";
+}
+
+.cl-icon-exit:before {
+	content: "\e713";
+}
+
+.cl-icon-qrcode:before {
+	content: "\e643";
+}
+
+.cl-icon-home::before {
+	content: "\e8ff";
+}
+
+.cl-icon-order-received::before {
+	content: "\ec7d";
+}
+
+.cl-icon-order-paid::before {
+	content: "\ec7e";
+}
+
+.cl-icon-order-not-shipped::before {
+	content: "\ec7f";
+}
+
+.cl-icon-order-refund::before {
+	content: "\ec80";
+}
+
+.cl-icon-msg::before {
+	content: "\ec81";
+}
diff --git a/uni_modules/cool-ui/theme.scss b/uni_modules/cool-ui/theme.scss
new file mode 100644
index 0000000..525b378
--- /dev/null
+++ b/uni_modules/cool-ui/theme.scss
@@ -0,0 +1,38 @@
+// 颜色
+$cl-color-primary: #2b2e3d;
+$cl-color-default: #dcdfe6;
+$cl-color-success: #67c23a;
+$cl-color-warning: #e6a23c;
+$cl-color-error: #f56c6c;
+$cl-color-info: #909399;
+$cl-color-disabled: #c0c4cc;
+$cl-color-disabled-bg: #f5f7fa;
+$cl-color-active: #f7f7f7;
+$cl-color-bg: #f6f7fa;
+$cl-color-placeholder: #a8abb2;
+
+// 通用
+$cl-topbar-height: 44px;
+$cl-border-color: #dcdfe6;
+$cl-border-width: 1px;
+$cl-border-radius: 8rpx;
+$cl-font-size: 26rpx;
+$cl-height: 64rpx;
+$cl-zIndex: 500;
+$cl-padding: 20rpx;
+
+// 按钮
+$cl-button-padding: 0rpx 30rpx;
+$cl-button-radius: 12rpx;
+
+// 多选框
+$cl-checkbox-size: 34rpx;
+
+// 单选框
+$cl-radio-size: 34rpx;
+
+// 计数器
+$cl-input-number-size: 42rpx;
+
+// 上传
+$cl-upload-radius: 12rpx;
diff --git a/uni_modules/cool-ui/types/action-sheet.d.ts b/uni_modules/cool-ui/types/action-sheet.d.ts
new file mode 100644
index 0000000..8c9a1ce
--- /dev/null
+++ b/uni_modules/cool-ui/types/action-sheet.d.ts
@@ -0,0 +1,38 @@
+declare namespace ClActionSheet {
+	interface Item {
+		label: string;
+		color?: string;
+		size?: string;
+		icon?: string;
+		disabled?: boolean;
+		openType?:
+			| "feedback"
+			| "share"
+			| "getUserInfo"
+			| "contact"
+			| "getPhoneNumber"
+			| "launchApp"
+			| "openSetting"
+			| "getAuthorize"
+			| "contactShare"
+			| "lifestyle"
+			| "openGroupProfile"
+			| string;
+	}
+
+	type Action = number | "cancel";
+
+	interface Options {
+		title?: string;
+		list: Item[];
+		showCancel?: boolean;
+		cancelText?: string;
+		closeOnClickModal?: boolean;
+		beforeClose?(action: Action, done: Function): void;
+		callback?(action: Action): void;
+	}
+
+	interface Ref {
+		open(options: Options): void;
+	}
+}
diff --git a/uni_modules/cool-ui/types/confirm.d.ts b/uni_modules/cool-ui/types/confirm.d.ts
new file mode 100644
index 0000000..f0d0f86
--- /dev/null
+++ b/uni_modules/cool-ui/types/confirm.d.ts
@@ -0,0 +1,25 @@
+declare namespace ClConfirm {
+	type Action = "confirm" | "close" | "cancel";
+
+	interface Options {
+		title?: string;
+		message?: string;
+		width?: string;
+		type?: "success" | "warning" | "error";
+		showCancelButton?: boolean;
+		cancelButtonText?: string;
+		showConfirmButton?: boolean;
+		confirmButtonText?: string;
+		closeOnClickModal?: boolean;
+		beforeClose?(
+			action: Action,
+			fn: { done(): void; showLoading(): void; hideLoading(): void }
+		): void;
+		callback?(action: Action): void;
+		duration?: number;
+	}
+
+	interface Ref {
+		open(options: Options): void;
+	}
+}
diff --git a/uni_modules/cool-ui/types/form.d.ts b/uni_modules/cool-ui/types/form.d.ts
new file mode 100644
index 0000000..2d8dae0
--- /dev/null
+++ b/uni_modules/cool-ui/types/form.d.ts
@@ -0,0 +1,12 @@
+declare namespace ClForm {
+	type Cb = (valid: boolean, errors: Array<{ field: string; message: string }>) => void;
+
+	interface Ref {
+		setRules(value: any): void;
+		validate(cb: Cb): void;
+		validateField(props: string | string[], cb: Cb): void;
+		clearValidate(): void;
+		reset(): void;
+		clear(): void;
+	}
+}
diff --git a/uni_modules/cool-ui/types/index.d.ts b/uni_modules/cool-ui/types/index.d.ts
new file mode 100644
index 0000000..8056e90
--- /dev/null
+++ b/uni_modules/cool-ui/types/index.d.ts
@@ -0,0 +1,18 @@
+/// <reference path="./action-sheet.d.ts" />
+/// <reference path="./confirm.d.ts" />
+/// <reference path="./toast.d.ts" />
+/// <reference path="./page.d.ts" />
+/// <reference path="./share.d.ts" />
+/// <reference path="./pay.d.ts" />
+/// <reference path="./list-index.d.ts" />
+/// <reference path="./form.d.ts" />
+/// <reference path="./waterfall.d.ts" />
+/// <reference path="./timeline.d.ts" />
+
+declare namespace Ui {
+	type Page = ClPage;
+	type ActionSheet = ClActionSheet.Ref;
+	type Confirm = ClConfirm.Ref;
+	type Pay = ClPay.Ref;
+	type Toast = ClToast.Ref;
+}
diff --git a/uni_modules/cool-ui/types/list-index.d.ts b/uni_modules/cool-ui/types/list-index.d.ts
new file mode 100644
index 0000000..613df65
--- /dev/null
+++ b/uni_modules/cool-ui/types/list-index.d.ts
@@ -0,0 +1,19 @@
+declare namespace ClListIndex {
+	interface Item {
+		name: string;
+		avatar: string;
+		[key: string]: any;
+	}
+
+	type Group = {
+		label: string;
+		children: Item[];
+		[key: string]: any;
+	}[];
+
+	interface Dict {
+		id: string;
+		avatar: string;
+		name: string;
+	}
+}
diff --git a/uni_modules/cool-ui/types/loading.d.ts b/uni_modules/cool-ui/types/loading.d.ts
new file mode 100644
index 0000000..eb37a93
--- /dev/null
+++ b/uni_modules/cool-ui/types/loading.d.ts
@@ -0,0 +1,8 @@
+declare namespace ClLoading {
+	type MaskOptions =
+		| string
+		| {
+				border?: boolean;
+				text: string;
+		  };
+}
diff --git a/uni_modules/cool-ui/types/page.d.ts b/uni_modules/cool-ui/types/page.d.ts
new file mode 100644
index 0000000..e0a53b6
--- /dev/null
+++ b/uni_modules/cool-ui/types/page.d.ts
@@ -0,0 +1,8 @@
+declare interface ClPage {
+	loaded: boolean;
+	showLoading(options?: ClLoading.MaskOptions): void;
+	hideLoading(): void;
+	showToast(options: ClToast.Options): void;
+	showConfirm(options: ClConfirm.Options): void;
+	showTips(message: string, callback?: () => void): void;
+}
diff --git a/uni_modules/cool-ui/types/pay.d.ts b/uni_modules/cool-ui/types/pay.d.ts
new file mode 100644
index 0000000..5d6366e
--- /dev/null
+++ b/uni_modules/cool-ui/types/pay.d.ts
@@ -0,0 +1,18 @@
+declare namespace ClPay {
+	interface Item {
+		label: string;
+		value: any;
+		icon: string;
+		hidden?: boolean;
+	}
+
+	interface Options {
+		list?: Item[];
+		callback?(item: Item): void;
+	}
+
+	interface Ref {
+		open(options: Options): void;
+		close(): void;
+	}
+}
diff --git a/uni_modules/cool-ui/types/share.d.ts b/uni_modules/cool-ui/types/share.d.ts
new file mode 100644
index 0000000..28c30fa
--- /dev/null
+++ b/uni_modules/cool-ui/types/share.d.ts
@@ -0,0 +1,25 @@
+declare namespace ClShare {
+	enum Type {
+		"图文" = 0,
+		"纯文字" = 1,
+		"纯图片" = 2,
+		"音乐" = 3,
+		"视频" = 4,
+		"小程序" = 5,
+	}
+
+	interface Options {
+		type: Type | string;
+		imageUrl: string;
+		title: string;
+		summary: string;
+		href: string;
+		mediaUrl: string;
+		miniProgram: any;
+		text: string;
+		wx: boolean;
+		qq: boolean;
+		success(): void;
+		fail(err: any): void;
+	}
+}
diff --git a/uni_modules/cool-ui/types/timeline.d.ts b/uni_modules/cool-ui/types/timeline.d.ts
new file mode 100644
index 0000000..fbf193e
--- /dev/null
+++ b/uni_modules/cool-ui/types/timeline.d.ts
@@ -0,0 +1,10 @@
+declare namespace ClTimeline {
+	interface Item {
+		timestamp: string;
+		content: string;
+		icon?: string;
+		color?: string;
+		showLine?: boolean;
+		[key: string]: any;
+	}
+}
diff --git a/uni_modules/cool-ui/types/toast.d.ts b/uni_modules/cool-ui/types/toast.d.ts
new file mode 100644
index 0000000..4c1f3b0
--- /dev/null
+++ b/uni_modules/cool-ui/types/toast.d.ts
@@ -0,0 +1,24 @@
+declare namespace ClToast {
+	type Options =
+		| string
+		| {
+				icon?: string;
+				image?: {
+					url: string;
+					mode?: string;
+					style?: {
+						[key: string]: any;
+					};
+				};
+				message: string;
+				clear?: boolean;
+				duration?: number;
+				type?: "success" | "error" | "warning" | "info";
+				position?: "bottom" | "top" | "center";
+				onClose?(): void;
+		  };
+
+	interface Ref {
+		open(options: Options): void;
+	}
+}
diff --git a/uni_modules/cool-ui/types/tree.d.ts b/uni_modules/cool-ui/types/tree.d.ts
new file mode 100644
index 0000000..01c44e6
--- /dev/null
+++ b/uni_modules/cool-ui/types/tree.d.ts
@@ -0,0 +1,15 @@
+declare namespace ClTree {
+	interface Item {
+		label: string;
+		value?: string;
+		isExpand: boolean;
+		children?: any[];
+		[key: string]: any;
+	}
+
+	interface Keys {
+		label?: string;
+		value?: string;
+		children?: string;
+	}
+}
diff --git a/uni_modules/cool-ui/types/waterfall.d.ts b/uni_modules/cool-ui/types/waterfall.d.ts
new file mode 100644
index 0000000..090d459
--- /dev/null
+++ b/uni_modules/cool-ui/types/waterfall.d.ts
@@ -0,0 +1,8 @@
+declare namespace ClWaterfall {
+	interface Ref {
+		append(list: any[]): void;
+		refresh(list: any[]): void;
+		clear(): void;
+		update(id: string | number, data: any): void;
+	}
+}
diff --git a/uni_modules/cool-ui/utils/async-validator.ts b/uni_modules/cool-ui/utils/async-validator.ts
new file mode 100644
index 0000000..84a779b
--- /dev/null
+++ b/uni_modules/cool-ui/utils/async-validator.ts
@@ -0,0 +1,1409 @@
+// @ts-nocheck
+function _extends() {
+	_extends =
+		Object.assign ||
+		function (target) {
+			for (var i = 1; i < arguments.length; i++) {
+				var source = arguments[i];
+
+				for (var key in source) {
+					if (Object.prototype.hasOwnProperty.call(source, key)) {
+						target[key] = source[key];
+					}
+				}
+			}
+
+			return target;
+		};
+
+	return _extends.apply(this, arguments);
+}
+
+/* eslint no-console:0 */
+var formatRegExp = /%[sdj%]/g;
+var warning = function warning() {}; // don't print warning message when in production env or node runtime
+
+if (
+	typeof process !== "undefined" &&
+	process.env &&
+	process.env.NODE_ENV !== "production" &&
+	typeof window !== "undefined" &&
+	typeof document !== "undefined"
+) {
+	warning = function warning(type, errors) {
+		if (typeof console !== "undefined" && console.warn) {
+			if (
+				errors.every(function (e) {
+					return typeof e === "string";
+				})
+			) {
+				console.warn(type, errors);
+			}
+		}
+	};
+}
+
+function convertFieldsError(errors) {
+	if (!errors || !errors.length) return null;
+	var fields = {};
+	errors.forEach(function (error) {
+		var field = error.field;
+		fields[field] = fields[field] || [];
+		fields[field].push(error);
+	});
+	return fields;
+}
+function format() {
+	for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+		args[_key] = arguments[_key];
+	}
+
+	var i = 1;
+	var f = args[0];
+	var len = args.length;
+
+	if (typeof f === "function") {
+		return f.apply(null, args.slice(1));
+	}
+
+	if (typeof f === "string") {
+		var str = String(f).replace(formatRegExp, function (x) {
+			if (x === "%%") {
+				return "%";
+			}
+
+			if (i >= len) {
+				return x;
+			}
+
+			switch (x) {
+				case "%s":
+					return String(args[i++]);
+
+				case "%d":
+					return Number(args[i++]);
+
+				case "%j":
+					try {
+						return JSON.stringify(args[i++]);
+					} catch (_) {
+						return "[Circular]";
+					}
+
+					break;
+
+				default:
+					return x;
+			}
+		});
+
+		for (var arg = args[i]; i < len; arg = args[++i]) {
+			str += " " + arg;
+		}
+
+		return str;
+	}
+
+	return f;
+}
+
+function isNativeStringType(type) {
+	return (
+		type === "string" ||
+		type === "url" ||
+		type === "hex" ||
+		type === "email" ||
+		type === "pattern"
+	);
+}
+
+function isEmptyValue(value, type) {
+	if (value === undefined || value === null) {
+		return true;
+	}
+
+	if (type === "array" && Array.isArray(value) && !value.length) {
+		return true;
+	}
+
+	if (isNativeStringType(type) && typeof value === "string" && !value) {
+		return true;
+	}
+
+	return false;
+}
+
+function asyncParallelArray(arr, func, callback) {
+	var results = [];
+	var total = 0;
+	var arrLength = arr.length;
+
+	function count(errors) {
+		results.push.apply(results, errors);
+		total++;
+
+		if (total === arrLength) {
+			callback(results);
+		}
+	}
+
+	arr.forEach(function (a) {
+		func(a, count);
+	});
+}
+
+function asyncSerialArray(arr, func, callback) {
+	var index = 0;
+	var arrLength = arr.length;
+
+	function next(errors) {
+		if (errors && errors.length) {
+			callback(errors);
+			return;
+		}
+
+		var original = index;
+		index = index + 1;
+
+		if (original < arrLength) {
+			func(arr[original], next);
+		} else {
+			callback([]);
+		}
+	}
+
+	next([]);
+}
+
+function flattenObjArr(objArr) {
+	var ret = [];
+	Object.keys(objArr).forEach(function (k) {
+		ret.push.apply(ret, objArr[k]);
+	});
+	return ret;
+}
+
+function asyncMap(objArr, option, func, callback) {
+	if (option.first) {
+		var _pending = new Promise(function (resolve, reject) {
+			var next = function next(errors) {
+				callback(errors);
+				return errors.length
+					? reject({
+							errors: errors,
+							fields: convertFieldsError(errors),
+					  })
+					: resolve();
+			};
+
+			var flattenArr = flattenObjArr(objArr);
+			asyncSerialArray(flattenArr, func, next);
+		});
+
+		_pending["catch"](function (e) {
+			return e;
+		});
+
+		return _pending;
+	}
+
+	var firstFields = option.firstFields || [];
+
+	if (firstFields === true) {
+		firstFields = Object.keys(objArr);
+	}
+
+	var objArrKeys = Object.keys(objArr);
+	var objArrLength = objArrKeys.length;
+	var total = 0;
+	var results = [];
+	var pending = new Promise(function (resolve, reject) {
+		var next = function next(errors) {
+			results.push.apply(results, errors);
+			total++;
+
+			if (total === objArrLength) {
+				callback(results);
+				return results.length
+					? reject({
+							errors: results,
+							fields: convertFieldsError(results),
+					  })
+					: resolve();
+			}
+		};
+
+		objArrKeys.forEach(function (key) {
+			var arr = objArr[key];
+
+			if (firstFields.indexOf(key) !== -1) {
+				asyncSerialArray(arr, func, next);
+			} else {
+				asyncParallelArray(arr, func, next);
+			}
+		});
+	});
+	pending["catch"](function (e) {
+		return e;
+	});
+	return pending;
+}
+function complementError(rule) {
+	return function (oe) {
+		if (oe && oe.message) {
+			oe.field = oe.field || rule.fullField;
+			return oe;
+		}
+
+		return {
+			message: typeof oe === "function" ? oe() : oe,
+			field: oe.field || rule.fullField,
+		};
+	};
+}
+function deepMerge(target, source) {
+	if (source) {
+		for (var s in source) {
+			if (source.hasOwnProperty(s)) {
+				var value = source[s];
+
+				if (typeof value === "object" && typeof target[s] === "object") {
+					target[s] = _extends({}, target[s], {}, value);
+				} else {
+					target[s] = value;
+				}
+			}
+		}
+	}
+
+	return target;
+}
+
+/**
+ *  Rule for validating required fields.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function required(rule, value, source, errors, options, type) {
+	if (
+		rule.required &&
+		(!source.hasOwnProperty(rule.field) || isEmptyValue(value, type || rule.type))
+	) {
+		errors.push(format(options.messages.required, rule.fullField));
+	}
+}
+
+/**
+ *  Rule for validating whitespace.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function whitespace(rule, value, source, errors, options) {
+	if (/^\s+$/.test(value) || value === "") {
+		errors.push(format(options.messages.whitespace, rule.fullField));
+	}
+}
+
+/* eslint max-len:0 */
+
+var pattern = {
+	// http://emailregex.com/
+	email: /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,
+	url: new RegExp(
+		"^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-*)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$",
+		"i"
+	),
+	hex: /^#?([a-f0-9]{6}|[a-f0-9]{3})$/i,
+};
+var types = {
+	integer: function integer(value) {
+		return types.number(value) && parseInt(value, 10) === value;
+	},
+	float: function float(value) {
+		return types.number(value) && !types.integer(value);
+	},
+	array: function array(value) {
+		return Array.isArray(value);
+	},
+	regexp: function regexp(value) {
+		if (value instanceof RegExp) {
+			return true;
+		}
+
+		try {
+			return !!new RegExp(value);
+		} catch (e) {
+			return false;
+		}
+	},
+	date: function date(value) {
+		return (
+			typeof value.getTime === "function" &&
+			typeof value.getMonth === "function" &&
+			typeof value.getYear === "function"
+		);
+	},
+	number: function number(value) {
+		if (isNaN(value)) {
+			return false;
+		}
+
+		return typeof value === "number";
+	},
+	object: function object(value) {
+		return typeof value === "object" && !types.array(value);
+	},
+	method: function method(value) {
+		return typeof value === "function";
+	},
+	email: function email(value) {
+		return typeof value === "string" && !!value.match(pattern.email) && value.length < 255;
+	},
+	url: function url(value) {
+		return typeof value === "string" && !!value.match(pattern.url);
+	},
+	hex: function hex(value) {
+		return typeof value === "string" && !!value.match(pattern.hex);
+	},
+};
+/**
+ *  Rule for validating the type of a value.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function type(rule, value, source, errors, options) {
+	if (rule.required && value === undefined) {
+		required(rule, value, source, errors, options);
+		return;
+	}
+
+	var custom = [
+		"integer",
+		"float",
+		"array",
+		"regexp",
+		"object",
+		"method",
+		"email",
+		"number",
+		"date",
+		"url",
+		"hex",
+	];
+	var ruleType = rule.type;
+
+	if (custom.indexOf(ruleType) > -1) {
+		if (!types[ruleType](value)) {
+			errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+		} // straight typeof check
+	} else if (ruleType && typeof value !== rule.type) {
+		errors.push(format(options.messages.types[ruleType], rule.fullField, rule.type));
+	}
+}
+
+/**
+ *  Rule for validating minimum and maximum allowed values.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function range(rule, value, source, errors, options) {
+	var len = typeof rule.len === "number";
+	var min = typeof rule.min === "number";
+	var max = typeof rule.max === "number"; // 正则匹配码点范围从U+010000一直到U+10FFFF的文字（补充平面Supplementary Plane）
+
+	var spRegexp = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+	var val = value;
+	var key = null;
+	var num = typeof value === "number";
+	var str = typeof value === "string";
+	var arr = Array.isArray(value);
+
+	if (num) {
+		key = "number";
+	} else if (str) {
+		key = "string";
+	} else if (arr) {
+		key = "array";
+	} // if the value is not of a supported type for range validation
+	// the validation rule rule should use the
+	// type property to also test for a particular type
+
+	if (!key) {
+		return false;
+	}
+
+	if (arr) {
+		val = value.length;
+	}
+
+	if (str) {
+		// 处理码点大于U+010000的文字length属性不准确的bug，如"𠮷𠮷𠮷".lenght !== 3
+		val = value.replace(spRegexp, "_").length;
+	}
+
+	if (len) {
+		if (val !== rule.len) {
+			errors.push(format(options.messages[key].len, rule.fullField, rule.len));
+		}
+	} else if (min && !max && val < rule.min) {
+		errors.push(format(options.messages[key].min, rule.fullField, rule.min));
+	} else if (max && !min && val > rule.max) {
+		errors.push(format(options.messages[key].max, rule.fullField, rule.max));
+	} else if (min && max && (val < rule.min || val > rule.max)) {
+		errors.push(format(options.messages[key].range, rule.fullField, rule.min, rule.max));
+	}
+}
+
+var ENUM = "enum";
+/**
+ *  Rule for validating a value exists in an enumerable list.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function enumerable(rule, value, source, errors, options) {
+	rule[ENUM] = Array.isArray(rule[ENUM]) ? rule[ENUM] : [];
+
+	if (rule[ENUM].indexOf(value) === -1) {
+		errors.push(format(options.messages[ENUM], rule.fullField, rule[ENUM].join(", ")));
+	}
+}
+
+/**
+ *  Rule for validating a regular expression pattern.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param source The source object being validated.
+ *  @param errors An array of errors that this rule may add
+ *  validation errors to.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function pattern$1(rule, value, source, errors, options) {
+	if (rule.pattern) {
+		if (rule.pattern instanceof RegExp) {
+			// if a RegExp instance is passed, reset `lastIndex` in case its `global`
+			// flag is accidentally set to `true`, which in a validation scenario
+			// is not necessary and the result might be misleading
+			rule.pattern.lastIndex = 0;
+
+			if (!rule.pattern.test(value)) {
+				errors.push(
+					format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern)
+				);
+			}
+		} else if (typeof rule.pattern === "string") {
+			var _pattern = new RegExp(rule.pattern);
+
+			if (!_pattern.test(value)) {
+				errors.push(
+					format(options.messages.pattern.mismatch, rule.fullField, value, rule.pattern)
+				);
+			}
+		}
+	}
+}
+
+var rules = {
+	required: required,
+	whitespace: whitespace,
+	type: type,
+	range: range,
+	enum: enumerable,
+	pattern: pattern$1,
+};
+
+/**
+ *  Performs validation for string types.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function string(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value, "string") && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, "string");
+
+		if (!isEmptyValue(value, "string")) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+			rules.pattern(rule, value, source, errors, options);
+
+			if (rule.whitespace === true) {
+				rules.whitespace(rule, value, source, errors, options);
+			}
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a function.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function method(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function number(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (value === "") {
+			value = undefined;
+		}
+
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a boolean.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function _boolean(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates the regular expression type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function regexp(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value)) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number is an integer.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function integer(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a number is a floating point number.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function floatFn(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates an array.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function array(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value, "array") && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, "array");
+
+		if (!isEmptyValue(value, "array")) {
+			rules.type(rule, value, source, errors, options);
+			rules.range(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates an object.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function object(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+var ENUM$1 = "enum";
+/**
+ *  Validates an enumerable list.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function enumerable$1(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (value !== undefined) {
+			rules[ENUM$1](rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Validates a regular expression pattern.
+ *
+ *  Performs validation when a rule only contains
+ *  a pattern property but is not declared as a string type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function pattern$2(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value, "string") && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value, "string")) {
+			rules.pattern(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+function date(rule, value, callback, source, options) {
+	// console.log('integer rule called %j', rule);
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field)); // console.log('validate on %s value', value);
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+
+		if (!isEmptyValue(value)) {
+			var dateObject;
+
+			if (typeof value === "number") {
+				dateObject = new Date(value);
+			} else {
+				dateObject = value;
+			}
+
+			rules.type(rule, dateObject, source, errors, options);
+
+			if (dateObject) {
+				rules.range(rule, dateObject.getTime(), source, errors, options);
+			}
+		}
+	}
+
+	callback(errors);
+}
+
+function required$1(rule, value, callback, source, options) {
+	var errors = [];
+	var type = Array.isArray(value) ? "array" : typeof value;
+	rules.required(rule, value, source, errors, options, type);
+	callback(errors);
+}
+
+function type$1(rule, value, callback, source, options) {
+	var ruleType = rule.type;
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value, ruleType) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options, ruleType);
+
+		if (!isEmptyValue(value, ruleType)) {
+			rules.type(rule, value, source, errors, options);
+		}
+	}
+
+	callback(errors);
+}
+
+/**
+ *  Performs validation for any type.
+ *
+ *  @param rule The validation rule.
+ *  @param value The value of the field on the source object.
+ *  @param callback The callback function.
+ *  @param source The source object being validated.
+ *  @param options The validation options.
+ *  @param options.messages The validation messages.
+ */
+
+function any(rule, value, callback, source, options) {
+	var errors = [];
+	var validate = rule.required || (!rule.required && source.hasOwnProperty(rule.field));
+
+	if (validate) {
+		if (isEmptyValue(value) && !rule.required) {
+			return callback();
+		}
+
+		rules.required(rule, value, source, errors, options);
+	}
+
+	callback(errors);
+}
+
+var validators = {
+	string: string,
+	method: method,
+	number: number,
+	boolean: _boolean,
+	regexp: regexp,
+	integer: integer,
+	float: floatFn,
+	array: array,
+	object: object,
+	enum: enumerable$1,
+	pattern: pattern$2,
+	date: date,
+	url: type$1,
+	hex: type$1,
+	email: type$1,
+	required: required$1,
+	any: any,
+};
+
+function newMessages() {
+	return {
+		default: "Validation error on field %s",
+		required: "%s is required",
+		enum: "%s must be one of %s",
+		whitespace: "%s cannot be empty",
+		date: {
+			format: "%s date %s is invalid for format %s",
+			parse: "%s date could not be parsed, %s is invalid ",
+			invalid: "%s date %s is invalid",
+		},
+		types: {
+			string: "%s is not a %s",
+			method: "%s is not a %s (function)",
+			array: "%s is not an %s",
+			object: "%s is not an %s",
+			number: "%s is not a %s",
+			date: "%s is not a %s",
+			boolean: "%s is not a %s",
+			integer: "%s is not an %s",
+			float: "%s is not a %s",
+			regexp: "%s is not a valid %s",
+			email: "%s is not a valid %s",
+			url: "%s is not a valid %s",
+			hex: "%s is not a valid %s",
+		},
+		string: {
+			len: "%s must be exactly %s characters",
+			min: "%s must be at least %s characters",
+			max: "%s cannot be longer than %s characters",
+			range: "%s must be between %s and %s characters",
+		},
+		number: {
+			len: "%s must equal %s",
+			min: "%s cannot be less than %s",
+			max: "%s cannot be greater than %s",
+			range: "%s must be between %s and %s",
+		},
+		array: {
+			len: "%s must be exactly %s in length",
+			min: "%s cannot be less than %s in length",
+			max: "%s cannot be greater than %s in length",
+			range: "%s must be between %s and %s in length",
+		},
+		pattern: {
+			mismatch: "%s value %s does not match pattern %s",
+		},
+		clone: function clone() {
+			var cloned = JSON.parse(JSON.stringify(this));
+			cloned.clone = this.clone;
+			return cloned;
+		},
+	};
+}
+var messages = newMessages();
+
+/**
+ *  Encapsulates a validation schema.
+ *
+ *  @param descriptor An object declaring validation rules
+ *  for this schema.
+ */
+
+function Schema(descriptor) {
+	this.rules = null;
+	this._messages = messages;
+	this.define(descriptor);
+}
+
+Schema.prototype = {
+	messages: function messages(_messages) {
+		if (_messages) {
+			this._messages = deepMerge(newMessages(), _messages);
+		}
+
+		return this._messages;
+	},
+	define: function define(rules) {
+		if (!rules) {
+			throw new Error("Cannot configure a schema with no rules");
+		}
+
+		if (typeof rules !== "object" || Array.isArray(rules)) {
+			throw new Error("Rules must be an object");
+		}
+
+		this.rules = {};
+		var z;
+		var item;
+
+		for (z in rules) {
+			if (rules.hasOwnProperty(z)) {
+				item = rules[z];
+				this.rules[z] = Array.isArray(item) ? item : [item];
+			}
+		}
+	},
+	validate: function validate(source_, o, oc) {
+		var _this = this;
+
+		if (o === void 0) {
+			o = {};
+		}
+
+		if (oc === void 0) {
+			oc = function oc() {};
+		}
+
+		var source = source_;
+		var options = o;
+		var callback = oc;
+
+		if (typeof options === "function") {
+			callback = options;
+			options = {};
+		}
+
+		if (!this.rules || Object.keys(this.rules).length === 0) {
+			if (callback) {
+				callback();
+			}
+
+			return Promise.resolve();
+		}
+
+		function complete(results) {
+			var i;
+			var errors = [];
+			var fields = {};
+
+			function add(e) {
+				if (Array.isArray(e)) {
+					var _errors;
+
+					errors = (_errors = errors).concat.apply(_errors, e);
+				} else {
+					errors.push(e);
+				}
+			}
+
+			for (i = 0; i < results.length; i++) {
+				add(results[i]);
+			}
+
+			if (!errors.length) {
+				errors = null;
+				fields = null;
+			} else {
+				fields = convertFieldsError(errors);
+			}
+
+			callback(errors, fields);
+		}
+
+		if (options.messages) {
+			var messages$1 = this.messages();
+
+			if (messages$1 === messages) {
+				messages$1 = newMessages();
+			}
+
+			deepMerge(messages$1, options.messages);
+			options.messages = messages$1;
+		} else {
+			options.messages = this.messages();
+		}
+
+		var arr;
+		var value;
+		var series = {};
+		var keys = options.keys || Object.keys(this.rules);
+		keys.forEach(function (z) {
+			arr = _this.rules[z];
+			value = source[z];
+			arr.forEach(function (r) {
+				var rule = r;
+
+				if (typeof rule.transform === "function") {
+					if (source === source_) {
+						source = _extends({}, source);
+					}
+
+					value = source[z] = rule.transform(value);
+				}
+
+				if (typeof rule === "function") {
+					rule = {
+						validator: rule,
+					};
+				} else {
+					rule = _extends({}, rule);
+				}
+
+				rule.validator = _this.getValidationMethod(rule);
+				rule.field = z;
+				rule.fullField = rule.fullField || z;
+				rule.type = _this.getType(rule);
+
+				if (!rule.validator) {
+					return;
+				}
+
+				series[z] = series[z] || [];
+				series[z].push({
+					rule: rule,
+					value: value,
+					source: source,
+					field: z,
+				});
+			});
+		});
+		var errorFields = {};
+		return asyncMap(
+			series,
+			options,
+			function (data, doIt) {
+				var rule = data.rule;
+				var deep =
+					(rule.type === "object" || rule.type === "array") &&
+					(typeof rule.fields === "object" || typeof rule.defaultField === "object");
+				deep = deep && (rule.required || (!rule.required && data.value));
+				rule.field = data.field;
+
+				function addFullfield(key, schema) {
+					return _extends({}, schema, {
+						fullField: rule.fullField + "." + key,
+					});
+				}
+
+				function cb(e) {
+					if (e === void 0) {
+						e = [];
+					}
+
+					var errors = e;
+
+					if (!Array.isArray(errors)) {
+						errors = [errors];
+					}
+
+					if (!options.suppressWarning && errors.length) {
+						Schema.warning("async-validator:", errors);
+					}
+
+					if (errors.length && rule.message) {
+						errors = [].concat(rule.message);
+					}
+
+					errors = errors.map(complementError(rule));
+
+					if (options.first && errors.length) {
+						errorFields[rule.field] = 1;
+						return doIt(errors);
+					}
+
+					if (!deep) {
+						doIt(errors);
+					} else {
+						// if rule is required but the target object
+						// does not exist fail at the rule level and don't
+						// go deeper
+						if (rule.required && !data.value) {
+							if (rule.message) {
+								errors = [].concat(rule.message).map(complementError(rule));
+							} else if (options.error) {
+								errors = [
+									options.error(
+										rule,
+										format(options.messages.required, rule.field)
+									),
+								];
+							} else {
+								errors = [];
+							}
+
+							return doIt(errors);
+						}
+
+						var fieldsSchema = {};
+
+						if (rule.defaultField) {
+							for (var k in data.value) {
+								if (data.value.hasOwnProperty(k)) {
+									fieldsSchema[k] = rule.defaultField;
+								}
+							}
+						}
+
+						fieldsSchema = _extends({}, fieldsSchema, {}, data.rule.fields);
+
+						for (var f in fieldsSchema) {
+							if (fieldsSchema.hasOwnProperty(f)) {
+								var fieldSchema = Array.isArray(fieldsSchema[f])
+									? fieldsSchema[f]
+									: [fieldsSchema[f]];
+								fieldsSchema[f] = fieldSchema.map(addFullfield.bind(null, f));
+							}
+						}
+
+						var schema = new Schema(fieldsSchema);
+						schema.messages(options.messages);
+
+						if (data.rule.options) {
+							data.rule.options.messages = options.messages;
+							data.rule.options.error = options.error;
+						}
+
+						schema.validate(data.value, data.rule.options || options, function (errs) {
+							var finalErrors = [];
+
+							if (errors && errors.length) {
+								finalErrors.push.apply(finalErrors, errors);
+							}
+
+							if (errs && errs.length) {
+								finalErrors.push.apply(finalErrors, errs);
+							}
+
+							doIt(finalErrors.length ? finalErrors : null);
+						});
+					}
+				}
+
+				var res;
+
+				if (rule.asyncValidator) {
+					res = rule.asyncValidator(rule, data.value, cb, data.source, options);
+				} else if (rule.validator) {
+					res = rule.validator(rule, data.value, cb, data.source, options);
+
+					if (res === true) {
+						cb();
+					} else if (res === false) {
+						cb(rule.message || rule.field + " fails");
+					} else if (res instanceof Array) {
+						cb(res);
+					} else if (res instanceof Error) {
+						cb(res.message);
+					}
+				}
+
+				if (res && res.then) {
+					res.then(
+						function () {
+							return cb();
+						},
+						function (e) {
+							return cb(e);
+						}
+					);
+				}
+			},
+			function (results) {
+				complete(results);
+			}
+		);
+	},
+	getType: function getType(rule) {
+		if (rule.type === undefined && rule.pattern instanceof RegExp) {
+			rule.type = "pattern";
+		}
+
+		if (
+			typeof rule.validator !== "function" &&
+			rule.type &&
+			!validators.hasOwnProperty(rule.type)
+		) {
+			throw new Error(format("Unknown rule type %s", rule.type));
+		}
+
+		return rule.type || "string";
+	},
+	getValidationMethod: function getValidationMethod(rule) {
+		if (typeof rule.validator === "function") {
+			return rule.validator;
+		}
+
+		var keys = Object.keys(rule);
+		var messageIndex = keys.indexOf("message");
+
+		if (messageIndex !== -1) {
+			keys.splice(messageIndex, 1);
+		}
+
+		if (keys.length === 1 && keys[0] === "required") {
+			return validators.required;
+		}
+
+		return validators[this.getType(rule)] || false;
+	},
+};
+
+Schema.register = function register(type, validator) {
+	if (typeof validator !== "function") {
+		throw new Error("Cannot register a validator by type, validator is not a function");
+	}
+
+	validators[type] = validator;
+};
+
+Schema.warning = warning;
+Schema.messages = messages;
+
+export default Schema;
+//# sourceMappingURL=index.js.map
diff --git a/uni_modules/cool-ui/utils/index.ts b/uni_modules/cool-ui/utils/index.ts
new file mode 100644
index 0000000..3cac5bf
--- /dev/null
+++ b/uni_modules/cool-ui/utils/index.ts
@@ -0,0 +1,36 @@
+import { isString } from "lodash-es";
+
+// 获取当前颜色
+export function getCurrentColor({
+	color,
+	max,
+	value,
+}: {
+	color: string | string[];
+	max: number;
+	value: number;
+}) {
+	if (isString(color)) {
+		return color;
+	} else {
+		const colorArray = color
+			.map((item, index) => {
+				if (isString(item)) {
+					return {
+						color: item,
+						value: (index + 1) * (max / color.length),
+					};
+				}
+				return item;
+			})
+			.sort((a, b) => a.value - b.value);
+
+		for (let i = 0; i < colorArray.length; i++) {
+			if (colorArray[i].value >= value) {
+				return colorArray[i].color;
+			}
+		}
+
+		return colorArray[colorArray.length - 1].color;
+	}
+}
diff --git a/uni_modules/mp-html/README.md b/uni_modules/mp-html/README.md
new file mode 100644
index 0000000..dcfcc2c
--- /dev/null
+++ b/uni_modules/mp-html/README.md
@@ -0,0 +1,193 @@
+## 为减小组件包的大小，默认组件包中不包含编辑、latex 公式等扩展功能，需要使用扩展功能的请参考下方的 插件扩展 栏的说明
+
+## 功能介绍
+- 全端支持（含 `v3、NVUE`）
+- 支持丰富的标签（包括 `table`、`video`、`svg` 等）
+- 支持丰富的事件效果（自动预览图片、链接处理等）
+- 支持设置占位图（加载中、出错时、预览时）
+- 支持锚点跳转、长按复制等丰富功能
+- 支持大部分 *html* 实体
+- 丰富的插件（关键词搜索、内容编辑、`latex` 公式等）
+- 效率高、容错性强且轻量化
+
+查看 [功能介绍](https://jin-yufeng.gitee.io/mp-html/#/overview/feature) 了解更多
+
+## 使用方法
+- `uni_modules` 方式  
+  1. 点击右上角的 `使用 HBuilder X 导入插件` 按钮直接导入项目或点击 `下载插件 ZIP` 按钮下载插件包并解压到项目的 `uni_modules/mp-html` 目录下  
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <!-- 不需要引入，可直接使用 -->
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     export default {
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+  3. 需要更新版本时在 `HBuilder X` 中右键 `uni_modules/mp-html` 目录选择 `从插件市场更新` 即可  
+
+- 源码方式  
+  1. 从 [github](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 或 [gitee](https://gitee.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 下载源码  
+     插件市场的 **非 uni_modules 版本** 无法更新，不建议从插件市场获取  
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     import mpHtml from '@/components/mp-html/mp-html'
+     export default {
+       // HBuilderX 2.5.5+ 可以通过 easycom 自动引入
+       components: {
+         mpHtml
+       },
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+
+- npm 方式  
+  1. 在项目根目录下执行  
+     ```bash
+     npm install mp-html
+     ```
+  2. 在需要使用页面的 `(n)vue` 文件中添加  
+     ```html
+     <mp-html :content="html" />
+     ```
+     ```javascript
+     import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
+     export default {
+       // 不可省略
+       components: {
+         mpHtml
+       },
+       data() {
+         return {
+           html: '<div>Hello World!</div>'
+         }
+       }
+     }
+     ```
+  3. 需要更新版本时执行以下命令即可  
+     ```bash
+     npm update mp-html
+     ```
+  
+  使用 *cli* 方式运行的项目，通过 *npm* 方式引入时，需要在 *vue.config.js* 中配置 *transpileDependencies*，详情可见 [#330](https://github.com/jin-yufeng/mp-html/issues/330#issuecomment-913617687)  
+  如果在 **nvue** 中使用还要将 `dist/uni-app/static` 目录下的内容拷贝到项目的 `static` 目录下，否则无法运行  
+
+查看 [快速开始](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart) 了解更多
+
+## 组件属性
+
+| 属性 | 类型 | 默认值 | 说明 |
+|:---:|:---:|:---:|---|
+| container-style | String |  | 容器的样式（[2.1.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v210)） |
+| content | String |  | 用于渲染的 html 字符串 |
+| copy-link | Boolean | true | 是否允许外部链接被点击时自动复制 |
+| domain | String |  | 主域名（用于链接拼接） |
+| error-img | String |  | 图片出错时的占位图链接 |
+| lazy-load | Boolean | false | 是否开启图片懒加载 |
+| loading-img | String |  | 图片加载过程中的占位图链接 |
+| pause-video | Boolean | true | 是否在播放一个视频时自动暂停其他视频 |
+| preview-img | Boolean | true | 是否允许图片被点击时自动预览 |
+| scroll-table | Boolean | false | 是否给每个表格添加一个滚动层使其能单独横向滚动 |
+| selectable | Boolean | false | 是否开启文本长按复制 |
+| set-title | Boolean | true | 是否将 title 标签的内容设置到页面标题 |
+| show-img-menu | Boolean | true | 是否允许图片被长按时显示菜单 |
+| tag-style | Object |  | 设置标签的默认样式 |
+| use-anchor | Boolean | false | 是否使用锚点链接 |
+
+查看 [属性](https://jin-yufeng.gitee.io/mp-html/#/basic/prop) 了解更多
+
+## 组件事件
+
+| 名称 | 触发时机 |
+|:---:|---|
+| load | dom 树加载完毕时 |
+| ready | 图片加载完毕时 |
+| error | 发生渲染错误时 |
+| imgtap | 图片被点击时 |
+| linktap | 链接被点击时 |
+| play | 音视频播放时 |
+
+查看 [事件](https://jin-yufeng.gitee.io/mp-html/#/basic/event) 了解更多
+
+## api
+组件实例上提供了一些 `api` 方法可供调用
+
+| 名称 | 作用 |
+|:---:|---|
+| in | 将锚点跳转的范围限定在一个 scroll-view 内 |
+| navigateTo | 锚点跳转 |
+| getText | 获取文本内容 |
+| getRect | 获取富文本内容的位置和大小 |
+| setContent | 设置富文本内容 |
+| imgList | 获取所有图片的数组 |
+| pauseMedia | 暂停播放音视频（[2.2.2+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v222)） |
+| setPlaybackRate | 设置音视频播放速率（[2.4.0+](https://jin-yufeng.gitee.io/mp-html/#/changelog/changelog#v240)） |
+
+查看 [api](https://jin-yufeng.gitee.io/mp-html/#/advanced/api) 了解更多
+
+## 插件扩展  
+除基本功能外，本组件还提供了丰富的扩展，可按照需要选用
+
+| 名称 | 作用 |
+|:---:|---|
+| audio | 音乐播放器 |
+| editable | 富文本 **编辑**（[示例项目](https://mp-html.oss-cn-hangzhou.aliyuncs.com/editable.zip)） |
+| emoji | 解析 emoji |
+| highlight | 代码块高亮显示 |
+| markdown | 渲染 markdown |
+| search | 关键词搜索 |
+| style | 匹配 style 标签中的样式 |
+| txv-video | 使用腾讯视频 |
+| img-cache | 图片缓存 by [@PentaTea](https://github.com/PentaTea) |
+| latex | 渲染 latex 公式 by [@Zeng-J](https://github.com/Zeng-J) |
+
+从插件市场导入的包中 **不含有** 扩展插件，使用插件需通过微信小程序 `富文本插件` 获取或参考以下方法进行打包：  
+1. 获取完整组件包  
+   ```bash
+   npm install mp-html
+   ```
+2. 编辑 `tools/config.js` 中的 `plugins` 项，选择需要的插件  
+3. 生成新的组件包  
+   在 `node_modules/mp-html` 目录下执行  
+   ```bash
+   npm install
+   npm run build:uni-app
+   ```
+4. 拷贝 `dist/uni-app` 中的内容到项目根目录  
+
+查看 [插件](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin) 了解更多
+
+## 关于 nvue
+`nvue` 使用原生渲染，不支持部分 `css` 样式，为实现和 `html` 相同的效果，组件内部通过 `web-view` 进行渲染，性能上差于原生，根据 `weex` 官方建议，`web` 标签仅应用在非常规的降级场景。因此，如果通过原生的方式（如 `richtext`）能够满足需要，则不建议使用本组件，如果有较多的富文本内容，则可以直接使用 `vue` 页面  
+由于渲染方式与其他端不同，有以下限制：  
+1. 不支持 `lazy-load` 属性
+2. 视频不支持全屏播放
+3. 如果在 `flex-direction: row` 的容器中使用，需要给组件设置宽度或设置 `flex: 1` 占满剩余宽度
+
+纯 `nvue` 模式下，[此问题](https://ask.dcloud.net.cn/question/119678) 修复前，不支持通过 `uni_modules` 引入，需要本地引入（将 [dist/uni-app](https://github.com/jin-yufeng/mp-html/tree/master/dist/uni-app) 中的内容拷贝到项目根目录下）  
+
+## 立即体验
+![富文本插件](https://mp-html.oss-cn-hangzhou.aliyuncs.com/qrcode.jpg)
+
+## 问题反馈
+遇到问题时，请先查阅 [常见问题](https://jin-yufeng.gitee.io/mp-html/#/question/faq) 和 [issue](https://github.com/jin-yufeng/mp-html/issues) 中是否已有相同的问题  
+可通过 [issue](https://github.com/jin-yufeng/mp-html/issues/new/choose) 、插件问答或发送邮件到 [mp_html@126.com](mailto:mp_html@126.com) 提问，不建议在评论区提问（不方便回复）  
+提问请严格按照 [issue 模板](https://github.com/jin-yufeng/mp-html/issues/new/choose) ，描述清楚使用环境、`html` 内容或可复现的 `demo` 项目以及复现方式，对于 **描述不清**、**无法复现** 或重复的问题将不予回复  
+
+欢迎加入 `QQ` 交流群：  
+群1（已满）：`699734691`  
+群2：`778239129`  
+
+查看 [问题反馈](https://jin-yufeng.gitee.io/mp-html/#/question/feedback) 了解更多
diff --git a/uni_modules/mp-html/changelog.md b/uni_modules/mp-html/changelog.md
new file mode 100644
index 0000000..537357c
--- /dev/null
+++ b/uni_modules/mp-html/changelog.md
@@ -0,0 +1,138 @@
+## v2.4.3（2024-01-21）
+1. `A` 增加 [card](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#card) 插件 [详细](https://github.com/jin-yufeng/mp-html/pull/533) by [@whoooami](https://github.com/whoooami)
+2. `F` 修复了 `svg` 中包含 `foreignobject` 可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/523)
+3. `F` 修复了合并单元格的表格部分情况下显示不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/561)
+4. `F` 修复了 `img` 标签设置 `object-fit` 无效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/567)
+5. `F` 修复了 `latex` 插件公式会换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/540) 
+6. `F` 修复了 `editable` 和 `audio` 插件共用时点击 `audio` 无法编辑的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/529) by [@whoooami](https://github.com/whoooami)
+7. `F` 修复了微信小程序部分情况下图片会报错 `replace of undefined` 的问题
+8. `F` 修复了快手小程序图片不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/571)
+## v2.4.2（2023-05-14）
+1. `A` `editable` 插件支持修改文字颜色 [详细](https://github.com/jin-yufeng/mp-html/issues/254)
+2. `F` 修复了 `svg` 中有 `style` 不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/505)
+3. `F` 修复了使用旧版编译器可能报错 `Bad attr nodes` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/472)
+4. `F` 修复了 `app` 端可能出现无法读取 `lazyLoad` 的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/513)
+5. `F` 修复了 `editable` 插件在点击换图时未拼接 `domain` 的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/497) by [@TwoKe945](https://github.com/TwoKe945)
+6. `F` 修复了 `latex` 插件部分情况下不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/515) 
+7. `F` 修复了 `editable` 插件点击音视频时其他标签框不消失的问题
+## v2.4.1（2022-12-25）
+1. `F` 修复了没有图片时 `ready` 事件可能不触发的问题
+2. `F` 修复了加载过程中可能出现 `Root label not found` 错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/470)
+3. `F` 修复了 `audio` 插件退出页面可能会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/457)
+4. `F` 修复了 `vue3` 运行到 `app` 在 `HBuilder X 3.6.10` 以上报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/480)
+5. `F` 修复了 `nvue` 端链接中包含 `%22` 时可能无法显示的问题
+6. `F` 修复了 `vue3` 使用 `highlight` 插件可能报错的问题
+## v2.4.0（2022-08-27）
+1. `A` 增加了 [setPlaybackRate](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#setPlaybackRate) 的 `api`，可以设置音视频的播放速率 [详细](https://github.com/jin-yufeng/mp-html/issues/452)
+2. `A` 示例小程序代码开源 [详细](https://github.com/jin-yufeng/mp-html-demo)
+3. `U` 优化 `ready` 事件触发时机，未设置懒加载的情况下基本可以准确触发 [详细](https://github.com/jin-yufeng/mp-html/issues/195)
+4. `U` `highlight` 插件在编辑状态下不进行高亮处理，便于编辑
+5. `F` 修复了 `flex` 布局下图片大小可能不正确的问题
+6. `F` 修复了 `selectable` 属性没有设置 `force` 也可能出现渲染异常的问题
+7. `F` 修复了表格中的图片大小可能不正确的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/448)
+8. `F` 修复了含有合并单元格的表格可能无法设置竖直对齐的问题
+9. `F` 修复了 `editable` 插件在 `scroll-view` 中使用时工具条位置可能不正确的问题
+10. `F` 修复了 `vue3` 使用 [search](advanced/plugin#search) 插件可能导致错误换行的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/449)
+## v2.3.2（2022-08-13）
+1. `A` 增加 [latex](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#latex) 插件，可以渲染数学公式 [详细](https://github.com/jin-yufeng/mp-html/pull/447) by [@Zeng-J](https://github.com/Zeng-J)
+2. `U` 优化根节点下有很多标签的长内容渲染速度
+3. `U` `highlight` 插件适配 `lang-xxx` 格式
+4. `F` 修复了 `table` 标签设置 `border` 属性后可能无法修改边框样式的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/439) by [@zouxingjie](https://github.com/zouxingjie)
+5. `F` 修复了 `editable` 插件输入连续空格无效的问题
+6. `F` 修复了 `vue3` 图片设置 `inline` 会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/438)
+7. `F` 修复了 `vue3` 使用 `table` 可能报错的问题
+## v2.3.1（2022-05-20）
+1. `U` `app` 端支持使用本地图片
+2. `U` 优化了微信小程序 `selectable` 属性在 `ios` 端的处理 [详细](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable)
+3. `F` 修复了 `editable` 插件不在顶部时 `tooltip` 位置可能错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/430)
+4. `F` 修复了 `vue3` 运行到微信小程序可能报错丢失内容的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/414)
+5. `F` 修复了 `vue3` 部分标签可能被错误换行的问题
+6. `F` 修复了 `editable` 插件 `app` 端插入视频无法预览的问题
+## v2.3.0（2022-04-01）
+1. `A` 增加了 `play` 事件，音视频播放时触发，可用于与页面其他音视频进行互斥播放 [详细](basic/event#play)
+2. `U` `show-img-menu` 属性支持控制预览时是否长按弹出菜单
+3. `U` 优化 `wxs` 处理，提高渲染性能 [详细](https://developers.weixin.qq.com/community/develop/article/doc/0006cc2b204740f601bd43fa25a413)  
+4. `U` `video` 标签支持 `object-fit` 属性
+5. `U` 增加支持一些常用实体编码 [详细](https://github.com/jin-yufeng/mp-html/issues/418)
+6. `F` 修复了图片仅设置高度可能不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/410)
+7. `F` 修复了 `video` 标签高度设置为 `auto` 不显示的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/411)
+8. `F` 修复了使用 `grid` 布局时可能样式错误的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/413)
+9. `F` 修复了含有合并单元格的表格部分情况下显示异常的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/417)
+10. `F` 修复了 `editable` 插件连续插入内容时顺序不正确的问题
+11. `F` 修复了 `uni-app` 包 `vue3` 使用 `audio` 插件报错的问题
+12. `F` 修复了 `uni-app` 包 `highlight` 插件使用自定义的 `prism.min.js` 报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/416)
+## v2.2.2（2022-02-26）
+1. `A` 增加了 [pauseMedia](https://jin-yufeng.gitee.io/mp-html/#/advanced/api#pauseMedia) 的 `api`，可用于暂停播放音视频 [详细](https://github.com/jin-yufeng/mp-html/issues/317)
+2. `U` 优化了长内容的加载速度  
+3. `U` 适配 `vue3` [#389](https://github.com/jin-yufeng/mp-html/issues/389)、[#398](https://github.com/jin-yufeng/mp-html/pull/398) by [@zhouhuafei](https://github.com/zhouhuafei)、[#400](https://github.com/jin-yufeng/mp-html/issues/400)
+4. `F` 修复了小程序端图片高度设置为百分比时可能不显示的问题
+5. `F` 修复了 `highlight` 插件部分情况下可能显示不完整的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/403)
+## v2.2.1（2021-12-24）
+1. `A` `editable` 插件增加上下移动标签功能
+2. `U` `editable` 插件支持在文本中间光标处插入内容
+3. `F` 修复了 `nvue` 端设置 `margin` 后可能导致高度不正确的问题
+4. `F` 修复了 `highlight` 插件使用压缩版的 `prism.css` 可能导致背景失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/367)
+5. `F` 修复了编辑状态下使用 `emoji` 插件内容为空时可能报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/371)
+6. `F` 修复了使用 `editable` 插件后将 `selectable` 属性设置为 `force` 不生效的问题
+## v2.2.0（2021-10-12）
+1. `A` 增加 `customElements` 配置项，便于添加自定义功能性标签 [详细](https://github.com/jin-yufeng/mp-html/issues/350)
+2. `A` `editable` 插件增加切换音视频自动播放状态的功能 [详细](https://github.com/jin-yufeng/mp-html/pull/341) by [@leeseett](https://github.com/leeseett)
+3. `A` `editable` 插件删除媒体标签时触发 `remove` 事件，便于删除已上传的文件
+4. `U` `editable` 插件 `insertImg` 方法支持同时插入多张图片 [详细](https://github.com/jin-yufeng/mp-html/issues/342)
+5. `U` `editable` 插入图片和音视频时支持拼接 `domian` 主域名
+6. `F` 修复了内部链接参数中包含 `://` 时被认为是外部链接的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/356)
+7. `F` 修复了部分 `svg` 标签名或属性名大小写不正确时不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/351)
+8. `F` 修复了 `nvue` 页面运行到非 `app` 平台时可能样式错误的问题
+## v2.1.5（2021-08-13）
+1. `A` 增加支持标签的 `dir` 属性
+2. `F` 修复了 `ruby` 标签文字与拼音没有居中对齐的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/325)
+3. `F` 修复了音视频标签内有 `a` 标签时可能无法播放的问题
+4. `F` 修复了 `externStyle` 中的 `class` 名包含下划线或数字时可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326)
+5. `F` 修复了 `h5` 端引入 `externStyle` 可能不生效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/326)
+## v2.1.4（2021-07-14）
+1. `F` 修复了 `rt` 标签无法设置样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/318)
+2. `F` 修复了表格中有单元格同时合并行和列时可能显示不正确的问题
+3. `F` 修复了 `app` 端无法关闭图片长按菜单的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/322)
+4. `F` 修复了 `editable` 插件只能添加图片链接不能修改的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/312) by [@leeseett](https://github.com/leeseett)
+## v2.1.3（2021-06-12）
+1. `A` `editable` 插件增加 `insertTable` 方法
+2. `U` `editable` 插件支持编辑表格中的空白单元格 [详细](https://github.com/jin-yufeng/mp-html/issues/310)
+3. `F` 修复了 `externStyle` 中使用伪类可能失效的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/298)
+4. `F` 修复了多个组件同时使用时 `tag-style` 属性时可能互相影响的问题 [详细](https://github.com/jin-yufeng/mp-html/pull/305) by [@woodguoyu](https://github.com/woodguoyu)
+5. `F` 修复了包含 `linearGradient` 的 `svg` 可能无法显示的问题
+6. `F` 修复了编译到头条小程序时可能报错的问题
+7. `F` 修复了 `nvue` 端不触发 `click` 事件的问题
+8. `F` 修复了 `editable` 插件尾部插入时无法撤销的问题
+9. `F` 修复了 `editable` 插件的 `insertHtml` 方法只能在末尾插入的问题
+10. `F` 修复了 `editable` 插件插入音频不显示的问题
+## v2.1.2（2021-04-24）
+1. `A` 增加了 [img-cache](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#img-cache) 插件，可以在 `app` 端缓存图片 [详细](https://github.com/jin-yufeng/mp-html/issues/292) by [@PentaTea](https://github.com/PentaTea)
+2. `U` 支持通过 `container-style` 属性设置 `white-space` 来保留连续空格和换行符 [详细](https://jin-yufeng.gitee.io/mp-html/#/question/faq#space)
+3. `U` 代码风格符合 [standard](https://standardjs.com) 标准
+4. `U` `editable` 插件编辑状态下支持预览视频 [详细](https://github.com/jin-yufeng/mp-html/issues/286)
+5. `F` 修复了 `svg` 标签内嵌 `svg` 时无法显示的问题
+6. `F` 修复了编译到支付宝和头条小程序时部分区域不可复制的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/291)
+## v2.1.1（2021-04-09）
+1. 修复了对 `p` 标签设置 `tag-style` 可能不生效的问题
+2. 修复了 `svg` 标签中的文本无法显示的问题
+3. 修复了使用 `editable` 插件编辑表格时可能报错的问题
+4. 修复了使用 `highlight` 插件运行到头条小程序时可能没有样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/280)
+5. 修复了使用 `editable` 插件 `editable` 属性为 `false` 时会报错的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/284)
+6. 修复了 `style` 插件连续子选择器失效的问题
+7. 修复了 `editable` 插件无法修改图片和字体大小的问题
+## v2.1.0.2（2021-03-21）
+修复了 `nvue` 端使用可能报错的问题
+## v2.1.0（2021-03-20）
+1. `A` 增加了 [container-style](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#container-style) 属性 [详细](https://gitee.com/jin-yufeng/mp-html/pulls/1)
+2. `A` 增加支持 `strike` 标签
+3. `A` `editable` 插件增加 `placeholder` 属性 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable)
+4. `A` `editable` 插件增加 `insertHtml` 方法 [详细](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#editable)
+5. `U` 外部样式支持标签名选择器 [详细](https://jin-yufeng.gitee.io/mp-html/#/overview/quickstart#setting)
+6. `F` 修复了 `nvue` 端部分情况下可能不显示的问题
+## v2.0.5（2021-03-12）
+1. `U` [linktap](https://jin-yufeng.gitee.io/mp-html/#/basic/event#linktap) 事件增加返回内部文本内容 `innerText` [详细](https://github.com/jin-yufeng/mp-html/issues/271)
+2. `U` [selectable](https://jin-yufeng.gitee.io/mp-html/#/basic/prop#selectable) 属性设置为 `force` 时能够在微信 `iOS` 端生效（文本块会变成 `inline-block`） [详细](https://github.com/jin-yufeng/mp-html/issues/267)
+3. `F` 修复了部分情况下竖向无法滚动的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/182)
+4. `F` 修复了多次修改富文本数据时部分内容可能不显示的问题
+5. `F` 修复了 [腾讯视频](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#txv-video) 插件可能无法播放的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/265)
+6. `F` 修复了 [highlight](https://jin-yufeng.gitee.io/mp-html/#/advanced/plugin#highlight) 插件没有设置高亮语言时没有应用默认样式的问题 [详细](https://github.com/jin-yufeng/mp-html/issues/276) by [@fuzui](https://github.com/fuzui)
diff --git a/uni_modules/mp-html/components/mp-html/mp-html.vue b/uni_modules/mp-html/components/mp-html/mp-html.vue
new file mode 100644
index 0000000..ec70115
--- /dev/null
+++ b/uni_modules/mp-html/components/mp-html/mp-html.vue
@@ -0,0 +1,498 @@
+<template>
+  <view id="_root" :class="(selectable?'_select ':'')+'_root'" :style="containerStyle">
+    <slot v-if="!nodes[0]" />
+    <!-- #ifndef APP-PLUS-NVUE -->
+    <node v-else :childs="nodes" :opts="[lazyLoad,loadingImg,errorImg,showImgMenu,selectable]" name="span" />
+    <!-- #endif -->
+    <!-- #ifdef APP-PLUS-NVUE -->
+    <web-view ref="web" src="/static/app-plus/mp-html/local.html" :style="'margin-top:-2px;height:' + height + 'px'" @onPostMessage="_onMessage" />
+    <!-- #endif -->
+  </view>
+</template>
+
+<script>
+/**
+ * mp-html v2.4.3
+ * @description 富文本组件
+ * @tutorial https://github.com/jin-yufeng/mp-html
+ * @property {String} container-style 容器的样式
+ * @property {String} content 用于渲染的 html 字符串
+ * @property {Boolean} copy-link 是否允许外部链接被点击时自动复制
+ * @property {String} domain 主域名，用于拼接链接
+ * @property {String} error-img 图片出错时的占位图链接
+ * @property {Boolean} lazy-load 是否开启图片懒加载
+ * @property {string} loading-img 图片加载过程中的占位图链接
+ * @property {Boolean} pause-video 是否在播放一个视频时自动暂停其他视频
+ * @property {Boolean} preview-img 是否允许图片被点击时自动预览
+ * @property {Boolean} scroll-table 是否给每个表格添加一个滚动层使其能单独横向滚动
+ * @property {Boolean | String} selectable 是否开启长按复制
+ * @property {Boolean} set-title 是否将 title 标签的内容设置到页面标题
+ * @property {Boolean} show-img-menu 是否允许图片被长按时显示菜单
+ * @property {Object} tag-style 标签的默认样式
+ * @property {Boolean | Number} use-anchor 是否使用锚点链接
+ * @event {Function} load dom 结构加载完毕时触发
+ * @event {Function} ready 所有图片加载完毕时触发
+ * @event {Function} imgtap 图片被点击时触发
+ * @event {Function} linktap 链接被点击时触发
+ * @event {Function} play 音视频播放时触发
+ * @event {Function} error 媒体加载出错时触发
+ */
+// #ifndef APP-PLUS-NVUE
+import node from './node/node'
+// #endif
+import Parser from './parser'
+const plugins=[]
+// #ifdef APP-PLUS-NVUE
+const dom = weex.requireModule('dom')
+// #endif
+export default {
+  name: 'mp-html',
+  data () {
+    return {
+      nodes: [],
+      // #ifdef APP-PLUS-NVUE
+      height: 3
+      // #endif
+    }
+  },
+  props: {
+    containerStyle: {
+      type: String,
+      default: ''
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    copyLink: {
+      type: [Boolean, String],
+      default: true
+    },
+    domain: String,
+    errorImg: {
+      type: String,
+      default: ''
+    },
+    lazyLoad: {
+      type: [Boolean, String],
+      default: false
+    },
+    loadingImg: {
+      type: String,
+      default: ''
+    },
+    pauseVideo: {
+      type: [Boolean, String],
+      default: true
+    },
+    previewImg: {
+      type: [Boolean, String],
+      default: true
+    },
+    scrollTable: [Boolean, String],
+    selectable: [Boolean, String],
+    setTitle: {
+      type: [Boolean, String],
+      default: true
+    },
+    showImgMenu: {
+      type: [Boolean, String],
+      default: true
+    },
+    tagStyle: Object,
+    useAnchor: [Boolean, Number]
+  },
+  // #ifdef VUE3
+  emits: ['load', 'ready', 'imgtap', 'linktap', 'play', 'error'],
+  // #endif
+  // #ifndef APP-PLUS-NVUE
+  components: {
+    node
+  },
+  // #endif
+  watch: {
+    content (content) {
+      this.setContent(content)
+    }
+  },
+  created () {
+    this.plugins = []
+    for (let i = plugins.length; i--;) {
+      this.plugins.push(new plugins[i](this))
+    }
+  },
+  mounted () {
+    if (this.content && !this.nodes.length) {
+      this.setContent(this.content)
+    }
+  },
+  beforeDestroy () {
+    this._hook('onDetached')
+  },
+  methods: {
+    /**
+     * @description 将锚点跳转的范围限定在一个 scroll-view 内
+     * @param {Object} page scroll-view 所在页面的示例
+     * @param {String} selector scroll-view 的选择器
+     * @param {String} scrollTop scroll-view scroll-top 属性绑定的变量名
+     */
+    in (page, selector, scrollTop) {
+      // #ifndef APP-PLUS-NVUE
+      if (page && selector && scrollTop) {
+        this._in = {
+          page,
+          selector,
+          scrollTop
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 锚点跳转
+     * @param {String} id 要跳转的锚点 id
+     * @param {Number} offset 跳转位置的偏移量
+     * @returns {Promise}
+     */
+    navigateTo (id, offset) {
+      return new Promise((resolve, reject) => {
+        if (!this.useAnchor) {
+          reject(Error('Anchor is disabled'))
+          return
+        }
+        offset = offset || parseInt(this.useAnchor) || 0
+        // #ifdef APP-PLUS-NVUE
+        if (!id) {
+          dom.scrollToElement(this.$refs.web, {
+            offset
+          })
+          resolve()
+        } else {
+          this._navigateTo = {
+            resolve,
+            reject,
+            offset
+          }
+          this.$refs.web.evalJs('uni.postMessage({data:{action:"getOffset",offset:(document.getElementById(' + id + ')||{}).offsetTop}})')
+        }
+        // #endif
+        // #ifndef APP-PLUS-NVUE
+        let deep = ' '
+        // #ifdef MP-WEIXIN || MP-QQ || MP-TOUTIAO
+        deep = '>>>'
+        // #endif
+        const selector = uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this._in ? this._in.page : this)
+          // #endif
+          .select((this._in ? this._in.selector : '._root') + (id ? `${deep}#${id}` : '')).boundingClientRect()
+        if (this._in) {
+          selector.select(this._in.selector).scrollOffset()
+            .select(this._in.selector).boundingClientRect()
+        } else {
+          // 获取 scroll-view 的位置和滚动距离
+          selector.selectViewport().scrollOffset() // 获取窗口的滚动距离
+        }
+        selector.exec(res => {
+          if (!res[0]) {
+            reject(Error('Label not found'))
+            return
+          }
+          const scrollTop = res[1].scrollTop + res[0].top - (res[2] ? res[2].top : 0) + offset
+          if (this._in) {
+            // scroll-view 跳转
+            this._in.page[this._in.scrollTop] = scrollTop
+          } else {
+            // 页面跳转
+            uni.pageScrollTo({
+              scrollTop,
+              duration: 300
+            })
+          }
+          resolve()
+        })
+        // #endif
+      })
+    },
+
+    /**
+     * @description 获取文本内容
+     * @return {String}
+     */
+    getText (nodes) {
+      let text = '';
+      (function traversal (nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+          const node = nodes[i]
+          if (node.type === 'text') {
+            text += node.text.replace(/&amp;/g, '&')
+          } else if (node.name === 'br') {
+            text += '\n'
+          } else {
+            // 块级标签前后加换行
+            const isBlock = node.name === 'p' || node.name === 'div' || node.name === 'tr' || node.name === 'li' || (node.name[0] === 'h' && node.name[1] > '0' && node.name[1] < '7')
+            if (isBlock && text && text[text.length - 1] !== '\n') {
+              text += '\n'
+            }
+            // 递归获取子节点的文本
+            if (node.children) {
+              traversal(node.children)
+            }
+            if (isBlock && text[text.length - 1] !== '\n') {
+              text += '\n'
+            } else if (node.name === 'td' || node.name === 'th') {
+              text += '\t'
+            }
+          }
+        }
+      })(nodes || this.nodes)
+      return text
+    },
+
+    /**
+     * @description 获取内容大小和位置
+     * @return {Promise}
+     */
+    getRect () {
+      return new Promise((resolve, reject) => {
+        uni.createSelectorQuery()
+          // #ifndef MP-ALIPAY
+          .in(this)
+          // #endif
+          .select('#_root').boundingClientRect().exec(res => res[0] ? resolve(res[0]) : reject(Error('Root label not found')))
+      })
+    },
+
+    /**
+     * @description 暂停播放媒体
+     */
+    pauseMedia () {
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].pause()
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].pause()'
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置媒体播放速率
+     * @param {Number} rate 播放速率
+     */
+    setPlaybackRate (rate) {
+      this.playbackRate = rate
+      for (let i = (this._videos || []).length; i--;) {
+        this._videos[i].playbackRate(rate)
+      }
+      // #ifdef APP-PLUS
+      const command = 'for(var e=document.getElementsByTagName("video"),i=e.length;i--;)e[i].playbackRate=' + rate
+      // #ifndef APP-PLUS-NVUE
+      let page = this.$parent
+      while (!page.$scope) page = page.$parent
+      page.$scope.$getAppWebview().evalJS(command)
+      // #endif
+      // #ifdef APP-PLUS-NVUE
+      this.$refs.web.evalJs(command)
+      // #endif
+      // #endif
+    },
+
+    /**
+     * @description 设置内容
+     * @param {String} content html 内容
+     * @param {Boolean} append 是否在尾部追加
+     */
+    setContent (content, append) {
+      if (!append || !this.imgList) {
+        this.imgList = []
+      }
+      const nodes = new Parser(this).parse(content)
+      // #ifdef APP-PLUS-NVUE
+      if (this._ready) {
+        this._set(nodes, append)
+      }
+      // #endif
+      this.$set(this, 'nodes', append ? (this.nodes || []).concat(nodes) : nodes)
+
+      // #ifndef APP-PLUS-NVUE
+      this._videos = []
+      this.$nextTick(() => {
+        this._hook('onLoad')
+        this.$emit('load')
+      })
+
+      if (this.lazyLoad || this.imgList._unloadimgs < this.imgList.length / 2) {
+        // 设置懒加载，每 350ms 获取高度，不变则认为加载完毕
+        let height = 0
+        const callback = rect => {
+          if (!rect || !rect.height) rect = {}
+          // 350ms 总高度无变化就触发 ready 事件
+          if (rect.height === height) {
+            this.$emit('ready', rect)
+          } else {
+            height = rect.height
+            setTimeout(() => {
+              this.getRect().then(callback).catch(callback)
+            }, 350)
+          }
+        }
+        this.getRect().then(callback).catch(callback)
+      } else {
+        // 未设置懒加载，等待所有图片加载完毕
+        if (!this.imgList._unloadimgs) {
+          this.getRect().then(rect => {
+            this.$emit('ready', rect)
+          }).catch(() => {
+            this.$emit('ready', {})
+          })
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 调用插件钩子函数
+     */
+    _hook (name) {
+      for (let i = plugins.length; i--;) {
+        if (this.plugins[i][name]) {
+          this.plugins[i][name]()
+        }
+      }
+    },
+
+    // #ifdef APP-PLUS-NVUE
+    /**
+     * @description 设置内容
+     */
+    _set (nodes, append) {
+      this.$refs.web.evalJs('setContent(' + JSON.stringify(nodes).replace(/%22/g, '') + ',' + JSON.stringify([this.containerStyle.replace(/(?:margin|padding)[^;]+/g, ''), this.errorImg, this.loadingImg, this.pauseVideo, this.scrollTable, this.selectable]) + ',' + append + ')')
+    },
+
+    /**
+     * @description 接收到 web-view 消息
+     */
+    _onMessage (e) {
+      const message = e.detail.data[0]
+      switch (message.action) {
+        // web-view 初始化完毕
+        case 'onJSBridgeReady':
+          this._ready = true
+          if (this.nodes) {
+            this._set(this.nodes)
+          }
+          break
+        // 内容 dom 加载完毕
+        case 'onLoad':
+          this.height = message.height
+          this._hook('onLoad')
+          this.$emit('load')
+          break
+        // 所有图片加载完毕
+        case 'onReady':
+          this.getRect().then(res => {
+            this.$emit('ready', res)
+          }).catch(() => {
+            this.$emit('ready', {})
+          })
+          break
+        // 总高度发生变化
+        case 'onHeightChange':
+          this.height = message.height
+          break
+        // 图片点击
+        case 'onImgTap':
+          this.$emit('imgtap', message.attrs)
+          if (this.previewImg) {
+            uni.previewImage({
+              current: parseInt(message.attrs.i),
+              urls: this.imgList
+            })
+          }
+          break
+        // 链接点击
+        case 'onLinkTap': {
+          const href = message.attrs.href
+          this.$emit('linktap', message.attrs)
+          if (href) {
+            // 锚点跳转
+            if (href[0] === '#') {
+              if (this.useAnchor) {
+                dom.scrollToElement(this.$refs.web, {
+                  offset: message.offset
+                })
+              }
+            } else if (href.includes('://')) {
+              // 打开外链
+              if (this.copyLink) {
+                plus.runtime.openWeb(href)
+              }
+            } else {
+              uni.navigateTo({
+                url: href,
+                fail () {
+                  uni.switchTab({
+                    url: href
+                  })
+                }
+              })
+            }
+          }
+          break
+        }
+        case 'onPlay':
+          this.$emit('play')
+          break
+        // 获取到锚点的偏移量
+        case 'getOffset':
+          if (typeof message.offset === 'number') {
+            dom.scrollToElement(this.$refs.web, {
+              offset: message.offset + this._navigateTo.offset
+            })
+            this._navigateTo.resolve()
+          } else {
+            this._navigateTo.reject(Error('Label not found'))
+          }
+          break
+        // 点击
+        case 'onClick':
+          this.$emit('tap')
+          this.$emit('click')
+          break
+        // 出错
+        case 'onError':
+          this.$emit('error', {
+            source: message.source,
+            attrs: message.attrs
+          })
+      }
+    }
+    // #endif
+  }
+}
+</script>
+
+<style>
+/* #ifndef APP-PLUS-NVUE */
+/* 根节点样式 */
+._root {
+  padding: 1px 0;
+  overflow-x: auto;
+  overflow-y: hidden;
+  -webkit-overflow-scrolling: touch;
+}
+
+/* 长按复制 */
+._select {
+  user-select: text;
+}
+/* #endif */
+</style>
diff --git a/uni_modules/mp-html/components/mp-html/node/node.vue b/uni_modules/mp-html/components/mp-html/node/node.vue
new file mode 100644
index 0000000..c5ef094
--- /dev/null
+++ b/uni_modules/mp-html/components/mp-html/node/node.vue
@@ -0,0 +1,579 @@
+<template>
+  <view :id="attrs.id" :class="'_block _'+name+' '+attrs.class" :style="attrs.style">
+    <block v-for="(n, i) in childs" v-bind:key="i">
+      <!-- 图片 -->
+      <!-- 占位图 -->
+      <image v-if="n.name==='img'&&!n.t&&((opts[1]&&!ctrl[i])||ctrl[i]<0)" class="_img" :style="n.attrs.style" :src="ctrl[i]<0?opts[2]:opts[1]" mode="widthFix" />
+      <!-- 显示图片 -->
+      <!-- #ifdef H5 || (APP-PLUS && VUE2) -->
+      <img v-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || (APP-PLUS && VUE2) -->
+      <!-- 表格中的图片，使用 rich-text 防止大小不正确 -->
+      <rich-text v-if="n.name==='img'&&n.t" :style="'display:'+n.t" :nodes="[{attrs:{style:n.attrs.style||'',src:n.attrs.src},name:'img'}]" :data-i="i" @tap.stop="imgTap" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || APP-PLUS || MP-KUAISHOU -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;height:1px;'+n.attrs.style" :src="n.attrs.src" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||'scaleToFill'))" :lazy-load="opts[0]" :webp="n.webp" :show-menu-by-longpress="opts[3]&&!n.attrs.ignore" :image-menu-prevent="!opts[3]||n.attrs.ignore" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- #ifdef MP-KUAISHOU -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+n.attrs.style" :src="n.attrs.src" :lazy-load="opts[0]" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap"></image>
+      <!-- #endif -->
+      <!-- #ifdef APP-PLUS && VUE3 -->
+      <image v-else-if="n.name==='img'" :id="n.attrs.id" :class="'_img '+n.attrs.class" :style="(ctrl[i]===-1?'display:none;':'')+'width:'+(ctrl[i]||1)+'px;'+n.attrs.style" :src="n.attrs.src||(ctrl.load?n.attrs['data-src']:'')" :mode="!n.h?'widthFix':(!n.w?'heightFix':(n.m||''))" :data-i="i" @load="imgLoad" @error="mediaError" @tap.stop="imgTap" @longpress="imgLongTap" />
+      <!-- #endif -->
+      <!-- 文本 -->
+      <!-- #ifdef MP-WEIXIN -->
+      <text v-else-if="n.text" :user-select="opts[4]=='force'&&isiOS" decode>{{n.text}}</text>
+      <!-- #endif -->
+      <!-- #ifndef MP-WEIXIN || MP-BAIDU || MP-ALIPAY || MP-TOUTIAO -->
+      <text v-else-if="n.text" decode>{{n.text}}</text>
+      <!-- #endif -->
+      <text v-else-if="n.name==='br'">\n</text>
+      <!-- 链接 -->
+      <view v-else-if="n.name==='a'" :id="n.attrs.id" :class="(n.attrs.href?'_a ':'')+n.attrs.class" hover-class="_hover" :style="'display:inline;'+n.attrs.style" :data-i="i" @tap.stop="linkTap">
+        <node name="span" :childs="n.children" :opts="opts" style="display:inherit" />
+      </view>
+      <!-- 视频 -->
+      <!-- #ifdef APP-PLUS -->
+      <view v-else-if="n.html" :id="n.attrs.id" :class="'_video '+n.attrs.class" :style="n.attrs.style" v-html="n.html" @vplay.stop="play" />
+      <!-- #endif -->
+      <!-- #ifndef APP-PLUS -->
+      <video v-else-if="n.name==='video'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :autoplay="n.attrs.autoplay" :controls="n.attrs.controls" :loop="n.attrs.loop" :muted="n.attrs.muted" :object-fit="n.attrs['object-fit']" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <!-- #ifdef H5 || APP-PLUS -->
+      <iframe v-else-if="n.name==='iframe'" :style="n.attrs.style" :allowfullscreen="n.attrs.allowfullscreen" :frameborder="n.attrs.frameborder" :src="n.attrs.src" />
+      <embed v-else-if="n.name==='embed'" :style="n.attrs.style" :src="n.attrs.src" />
+      <!-- #endif -->
+      <!-- #ifndef MP-TOUTIAO || ((H5 || APP-PLUS) && VUE3) -->
+      <!-- 音频 -->
+      <audio v-else-if="n.name==='audio'" :id="n.attrs.id" :class="n.attrs.class" :style="n.attrs.style" :author="n.attrs.author" :controls="n.attrs.controls" :loop="n.attrs.loop" :name="n.attrs.name" :poster="n.attrs.poster" :src="n.src[ctrl[i]||0]" :data-i="i" @play="play" @error="mediaError" />
+      <!-- #endif -->
+      <view v-else-if="(n.name==='table'&&n.c)||n.name==='li'" :id="n.attrs.id" :class="'_'+n.name+' '+n.attrs.class" :style="n.attrs.style">
+        <node v-if="n.name==='li'" :childs="n.children" :opts="opts" />
+        <view v-else v-for="(tbody, x) in n.children" v-bind:key="x" :class="'_'+tbody.name+' '+tbody.attrs.class" :style="tbody.attrs.style">
+          <node v-if="tbody.name==='td'||tbody.name==='th'" :childs="tbody.children" :opts="opts" />
+          <block v-else v-for="(tr, y) in tbody.children" v-bind:key="y">
+            <view v-if="tr.name==='td'||tr.name==='th'" :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <node :childs="tr.children" :opts="opts" />
+            </view>
+            <view v-else :class="'_'+tr.name+' '+tr.attrs.class" :style="tr.attrs.style">
+              <view v-for="(td, z) in tr.children" v-bind:key="z" :class="'_'+td.name+' '+td.attrs.class" :style="td.attrs.style">
+                <node :childs="td.children" :opts="opts" />
+              </view>
+            </view>
+          </block>
+        </view>
+      </view>
+      
+      <!-- 富文本 -->
+      <!-- #ifdef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!n.c&&!handler.isInline(n.name, n.attrs.style)" :id="n.attrs.id" :style="n.f" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- #ifndef H5 || ((MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE2) -->
+      <rich-text v-else-if="!n.c" :id="n.attrs.id" :style="'display:inline;'+n.f" :preview="false" :selectable="opts[4]" :user-select="opts[4]" :nodes="[n]" />
+      <!-- #endif -->
+      <!-- 继续递归 -->
+      <view v-else-if="n.c===2" :id="n.attrs.id" :class="'_block _'+n.name+' '+n.attrs.class" :style="n.f+';'+n.attrs.style">
+        <node v-for="(n2, j) in n.children" v-bind:key="j" :style="n2.f" :name="n2.name" :attrs="n2.attrs" :childs="n2.children" :opts="opts" />
+      </view>
+      <node v-else :style="n.f" :name="n.name" :attrs="n.attrs" :childs="n.children" :opts="opts" />
+    </block>
+  </view>
+</template>
+<script module="handler" lang="wxs">
+// 行内标签列表
+var inlineTags = {
+  abbr: true,
+  b: true,
+  big: true,
+  code: true,
+  del: true,
+  em: true,
+  i: true,
+  ins: true,
+  label: true,
+  q: true,
+  small: true,
+  span: true,
+  strong: true,
+  sub: true,
+  sup: true
+}
+/**
+ * @description 判断是否为行内标签
+ */
+module.exports = {
+  isInline: function (tagName, style) {
+    return inlineTags[tagName] || (style || '').indexOf('display:inline') !== -1
+  }
+}
+</script>
+<script>
+
+import node from './node'
+export default {
+  name: 'node',
+  options: {
+    // #ifdef MP-WEIXIN
+    virtualHost: true,
+    // #endif
+    // #ifdef MP-TOUTIAO
+    addGlobalClass: false
+    // #endif
+  },
+  data () {
+    return {
+      ctrl: {},
+      // #ifdef MP-WEIXIN
+      isiOS: uni.getSystemInfoSync().system.includes('iOS')
+      // #endif
+    }
+  },
+  props: {
+    name: String,
+    attrs: {
+      type: Object,
+      default () {
+        return {}
+      }
+    },
+    childs: Array,
+    opts: Array
+  },
+  components: {
+
+    // #ifndef (H5 || APP-PLUS) && VUE3
+    node
+    // #endif
+  },
+  mounted () {
+    this.$nextTick(() => {
+      for (this.root = this.$parent; this.root.$options.name !== 'mp-html'; this.root = this.root.$parent);
+    })
+    // #ifdef H5 || APP-PLUS
+    if (this.opts[0]) {
+      let i
+      for (i = this.childs.length; i--;) {
+        if (this.childs[i].name === 'img') break
+      }
+      if (i !== -1) {
+        this.observer = uni.createIntersectionObserver(this).relativeToViewport({
+          top: 500,
+          bottom: 500
+        })
+        this.observer.observe('._img', res => {
+          if (res.intersectionRatio) {
+            this.$set(this.ctrl, 'load', 1)
+            this.observer.disconnect()
+          }
+        })
+      }
+    }
+    // #endif
+  },
+  beforeDestroy () {
+    // #ifdef H5 || APP-PLUS
+    if (this.observer) {
+      this.observer.disconnect()
+    }
+    // #endif
+  },
+  methods:{
+    // #ifdef MP-WEIXIN
+    toJSON () { return this },
+    // #endif
+    /**
+     * @description 播放视频事件
+     * @param {Event} e
+     */
+    play (e) {
+      this.root.$emit('play')
+      // #ifndef APP-PLUS
+      if (this.root.pauseVideo) {
+        let flag = false
+        const id = e.target.id
+        for (let i = this.root._videos.length; i--;) {
+          if (this.root._videos[i].id === id) {
+            flag = true
+          } else {
+            this.root._videos[i].pause() // 自动暂停其他视频
+          }
+        }
+        // 将自己加入列表
+        if (!flag) {
+          const ctx = uni.createVideoContext(id
+            // #ifndef MP-BAIDU
+            , this
+            // #endif
+          )
+          ctx.id = id
+          if (this.root.playbackRate) {
+            ctx.playbackRate(this.root.playbackRate)
+          }
+          this.root._videos.push(ctx)
+        }
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片点击事件
+     * @param {Event} e
+     */
+    imgTap (e) {
+      const node = this.childs[e.currentTarget.dataset.i]
+      if (node.a) {
+        this.linkTap(node.a)
+        return
+      }
+      if (node.attrs.ignore) return
+      // #ifdef H5 || APP-PLUS
+      node.attrs.src = node.attrs.src || node.attrs['data-src']
+      // #endif
+      this.root.$emit('imgtap', node.attrs)
+      // 自动预览图片
+      if (this.root.previewImg) {
+        uni.previewImage({
+          // #ifdef MP-WEIXIN
+          showmenu: this.root.showImgMenu,
+          // #endif
+          // #ifdef MP-ALIPAY
+          enablesavephoto: this.root.showImgMenu,
+          enableShowPhotoDownload: this.root.showImgMenu,
+          // #endif
+          current: parseInt(node.attrs.i),
+          urls: this.root.imgList
+        })
+      }
+    },
+
+    /**
+     * @description 图片长按
+     */
+    imgLongTap (e) {
+      // #ifdef APP-PLUS
+      const attrs = this.childs[e.currentTarget.dataset.i].attrs
+      if (this.opts[3] && !attrs.ignore) {
+        uni.showActionSheet({
+          itemList: ['保存图片'],
+          success: () => {
+            const save = path => {
+              uni.saveImageToPhotosAlbum({
+                filePath: path,
+                success () {
+                  uni.showToast({
+                    title: '保存成功'
+                  })
+                }
+              })
+            }
+            if (this.root.imgList[attrs.i].startsWith('http')) {
+              uni.downloadFile({
+                url: this.root.imgList[attrs.i],
+                success: res => save(res.tempFilePath)
+              })
+            } else {
+              save(this.root.imgList[attrs.i])
+            }
+          }
+        })
+      }
+      // #endif
+    },
+
+    /**
+     * @description 图片加载完成事件
+     * @param {Event} e
+     */
+    imgLoad (e) {
+      const i = e.currentTarget.dataset.i
+      /* #ifndef H5 || (APP-PLUS && VUE2) */
+      if (!this.childs[i].w) {
+        // 设置原宽度
+        this.$set(this.ctrl, i, e.detail.width)
+      } else /* #endif */ if ((this.opts[1] && !this.ctrl[i]) || this.ctrl[i] === -1) {
+        // 加载完毕，取消加载中占位图
+        this.$set(this.ctrl, i, 1)
+      }
+      this.checkReady()
+    },
+
+    /**
+     * @description 检查是否所有图片加载完毕
+     */
+    checkReady () {
+      if (this.root && !this.root.lazyLoad) {
+        this.root._unloadimgs -= 1
+        if (!this.root._unloadimgs) {
+          setTimeout(() => {
+            this.root.getRect().then(rect => {
+              this.root.$emit('ready', rect)
+            }).catch(() => {
+              this.root.$emit('ready', {})
+            })
+          }, 350)
+        }
+      }
+    },
+
+    /**
+     * @description 链接点击事件
+     * @param {Event} e
+     */
+    linkTap (e) {
+      const node = e.currentTarget ? this.childs[e.currentTarget.dataset.i] : {}
+      const attrs = node.attrs || e
+      const href = attrs.href
+      this.root.$emit('linktap', Object.assign({
+        innerText: this.root.getText(node.children || []) // 链接内的文本内容
+      }, attrs))
+      if (href) {
+        if (href[0] === '#') {
+          // 跳转锚点
+          this.root.navigateTo(href.substring(1)).catch(() => { })
+        } else if (href.split('?')[0].includes('://')) {
+          // 复制外部链接
+          if (this.root.copyLink) {
+            // #ifdef H5
+            window.open(href)
+            // #endif
+            // #ifdef MP
+            uni.setClipboardData({
+              data: href,
+              success: () =>
+                uni.showToast({
+                  title: '链接已复制'
+                })
+            })
+            // #endif
+            // #ifdef APP-PLUS
+            plus.runtime.openWeb(href)
+            // #endif
+          }
+        } else {
+          // 跳转页面
+          uni.navigateTo({
+            url: href,
+            fail () {
+              uni.switchTab({
+                url: href,
+                fail () { }
+              })
+            }
+          })
+        }
+      }
+    },
+
+    /**
+     * @description 错误事件
+     * @param {Event} e
+     */
+    mediaError (e) {
+      const i = e.currentTarget.dataset.i
+      const node = this.childs[i]
+      // 加载其他源
+      if (node.name === 'video' || node.name === 'audio') {
+        let index = (this.ctrl[i] || 0) + 1
+        if (index > node.src.length) {
+          index = 0
+        }
+        if (index < node.src.length) {
+          this.$set(this.ctrl, i, index)
+          return
+        }
+      } else if (node.name === 'img') {
+        // #ifdef H5 && VUE3
+        if (this.opts[0] && !this.ctrl.load) return
+        // #endif
+        // 显示错误占位图
+        if (this.opts[2]) {
+          this.$set(this.ctrl, i, -1)
+        }
+        this.checkReady()
+      }
+      if (this.root) {
+        this.root.$emit('error', {
+          source: node.name,
+          attrs: node.attrs,
+          // #ifndef H5 && VUE3
+          errMsg: e.detail.errMsg
+          // #endif
+        })
+      }
+    }
+  }
+}
+</script>
+<style>
+/* a 标签默认效果 */
+._a {
+  padding: 1.5px 0 1.5px 0;
+  color: #366092;
+  word-break: break-all;
+}
+
+/* a 标签点击态效果 */
+._hover {
+  text-decoration: underline;
+  opacity: 0.7;
+}
+
+/* 图片默认效果 */
+._img {
+  max-width: 100%;
+  -webkit-touch-callout: none;
+}
+
+/* 内部样式 */
+
+._block {
+  display: block;
+}
+
+._b,
+._strong {
+  font-weight: bold;
+}
+
+._code {
+  font-family: monospace;
+}
+
+._del {
+  text-decoration: line-through;
+}
+
+._em,
+._i {
+  font-style: italic;
+}
+
+._h1 {
+  font-size: 2em;
+}
+
+._h2 {
+  font-size: 1.5em;
+}
+
+._h3 {
+  font-size: 1.17em;
+}
+
+._h5 {
+  font-size: 0.83em;
+}
+
+._h6 {
+  font-size: 0.67em;
+}
+
+._h1,
+._h2,
+._h3,
+._h4,
+._h5,
+._h6 {
+  display: block;
+  font-weight: bold;
+}
+
+._image {
+  height: 1px;
+}
+
+._ins {
+  text-decoration: underline;
+}
+
+._li {
+  display: list-item;
+}
+
+._ol {
+  list-style-type: decimal;
+}
+
+._ol,
+._ul {
+  display: block;
+  padding-left: 40px;
+  margin: 1em 0;
+}
+
+._q::before {
+  content: '"';
+}
+
+._q::after {
+  content: '"';
+}
+
+._sub {
+  font-size: smaller;
+  vertical-align: sub;
+}
+
+._sup {
+  font-size: smaller;
+  vertical-align: super;
+}
+
+._thead,
+._tbody,
+._tfoot {
+  display: table-row-group;
+}
+
+._tr {
+  display: table-row;
+}
+
+._td,
+._th {
+  display: table-cell;
+  vertical-align: middle;
+}
+
+._th {
+  font-weight: bold;
+  text-align: center;
+}
+
+._ul {
+  list-style-type: disc;
+}
+
+._ul ._ul {
+  margin: 0;
+  list-style-type: circle;
+}
+
+._ul ._ul ._ul {
+  list-style-type: square;
+}
+
+._abbr,
+._b,
+._code,
+._del,
+._em,
+._i,
+._ins,
+._label,
+._q,
+._span,
+._strong,
+._sub,
+._sup {
+  display: inline;
+}
+
+/* #ifdef APP-PLUS */
+._video {
+  width: 300px;
+  height: 225px;
+}
+/* #endif */
+</style>
\ No newline at end of file
diff --git a/uni_modules/mp-html/components/mp-html/parser.js b/uni_modules/mp-html/components/mp-html/parser.js
new file mode 100644
index 0000000..e756165
--- /dev/null
+++ b/uni_modules/mp-html/components/mp-html/parser.js
@@ -0,0 +1,1372 @@
+/**
+ * @fileoverview html 解析器
+ */
+
+// 配置
+const config = {
+  // 信任的标签（保持标签名不变）
+  trustTags: makeMap('a,abbr,ad,audio,b,blockquote,br,code,col,colgroup,dd,del,dl,dt,div,em,fieldset,h1,h2,h3,h4,h5,h6,hr,i,img,ins,label,legend,li,ol,p,q,ruby,rt,source,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,tr,title,ul,video'),
+
+  // 块级标签（转为 div，其他的非信任标签转为 span）
+  blockTags: makeMap('address,article,aside,body,caption,center,cite,footer,header,html,nav,pre,section'),
+
+  // #ifdef (MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE3
+  // 行内标签
+  inlineTags: makeMap('abbr,b,big,code,del,em,i,ins,label,q,small,span,strong,sub,sup'),
+  // #endif
+
+  // 要移除的标签
+  ignoreTags: makeMap('area,base,canvas,embed,frame,head,iframe,input,link,map,meta,param,rp,script,source,style,textarea,title,track,wbr'),
+
+  // 自闭合的标签
+  voidTags: makeMap('area,base,br,col,circle,ellipse,embed,frame,hr,img,input,line,link,meta,param,path,polygon,rect,source,track,use,wbr'),
+
+  // html 实体
+  entities: {
+    lt: '<',
+    gt: '>',
+    quot: '"',
+    apos: "'",
+    ensp: '\u2002',
+    emsp: '\u2003',
+    nbsp: '\xA0',
+    semi: ';',
+    ndash: '–',
+    mdash: '—',
+    middot: '·',
+    lsquo: '‘',
+    rsquo: '’',
+    ldquo: '“',
+    rdquo: '”',
+    bull: '•',
+    hellip: '…',
+    larr: '←',
+    uarr: '↑',
+    rarr: '→',
+    darr: '↓'
+  },
+
+  // 默认的标签样式
+  tagStyle: {
+    // #ifndef APP-PLUS-NVUE
+    address: 'font-style:italic',
+    big: 'display:inline;font-size:1.2em',
+    caption: 'display:table-caption;text-align:center',
+    center: 'text-align:center',
+    cite: 'font-style:italic',
+    dd: 'margin-left:40px',
+    mark: 'background-color:yellow',
+    pre: 'font-family:monospace;white-space:pre',
+    s: 'text-decoration:line-through',
+    small: 'display:inline;font-size:0.8em',
+    strike: 'text-decoration:line-through',
+    u: 'text-decoration:underline'
+    // #endif
+  },
+
+  // svg 大小写对照表
+  svgDict: {
+    animatetransform: 'animateTransform',
+    lineargradient: 'linearGradient',
+    viewbox: 'viewBox',
+    attributename: 'attributeName',
+    repeatcount: 'repeatCount',
+    repeatdur: 'repeatDur',
+    foreignobject: 'foreignObject'
+  }
+}
+const tagSelector={}
+const {
+  windowWidth,
+  // #ifdef MP-WEIXIN
+  system
+  // #endif
+} = uni.getSystemInfoSync()
+const blankChar = makeMap(' ,\r,\n,\t,\f')
+let idIndex = 0
+
+// #ifdef H5 || APP-PLUS
+config.ignoreTags.iframe = undefined
+config.trustTags.iframe = true
+config.ignoreTags.embed = undefined
+config.trustTags.embed = true
+// #endif
+// #ifdef APP-PLUS-NVUE
+config.ignoreTags.source = undefined
+config.ignoreTags.style = undefined
+// #endif
+
+/**
+ * @description 创建 map
+ * @param {String} str 逗号分隔
+ */
+function makeMap (str) {
+  const map = Object.create(null)
+  const list = str.split(',')
+  for (let i = list.length; i--;) {
+    map[list[i]] = true
+  }
+  return map
+}
+
+/**
+ * @description 解码 html 实体
+ * @param {String} str 要解码的字符串
+ * @param {Boolean} amp 要不要解码 &amp;
+ * @returns {String} 解码后的字符串
+ */
+function decodeEntity (str, amp) {
+  let i = str.indexOf('&')
+  while (i !== -1) {
+    const j = str.indexOf(';', i + 3)
+    let code
+    if (j === -1) break
+    if (str[i + 1] === '#') {
+      // &#123; 形式的实体
+      code = parseInt((str[i + 2] === 'x' ? '0' : '') + str.substring(i + 2, j))
+      if (!isNaN(code)) {
+        str = str.substr(0, i) + String.fromCharCode(code) + str.substr(j + 1)
+      }
+    } else {
+      // &nbsp; 形式的实体
+      code = str.substring(i + 1, j)
+      if (config.entities[code] || (code === 'amp' && amp)) {
+        str = str.substr(0, i) + (config.entities[code] || '&') + str.substr(j + 1)
+      }
+    }
+    i = str.indexOf('&', i + 1)
+  }
+  return str
+}
+
+/**
+ * @description 合并多个块级标签，加快长内容渲染
+ * @param {Array} nodes 要合并的标签数组
+ */
+function mergeNodes (nodes) {
+  let i = nodes.length - 1
+  for (let j = i; j >= -1; j--) {
+    if (j === -1 || nodes[j].c || !nodes[j].name || (nodes[j].name !== 'div' && nodes[j].name !== 'p' && nodes[j].name[0] !== 'h') || (nodes[j].attrs.style || '').includes('inline')) {
+      if (i - j >= 5) {
+        nodes.splice(j + 1, i - j, {
+          name: 'div',
+          attrs: {},
+          children: nodes.slice(j + 1, i + 1)
+        })
+      }
+      i = j - 1
+    }
+  }
+}
+
+/**
+ * @description html 解析器
+ * @param {Object} vm 组件实例
+ */
+function Parser (vm) {
+  this.options = vm || {}
+  this.tagStyle = Object.assign({}, config.tagStyle, this.options.tagStyle)
+  this.imgList = vm.imgList || []
+  this.imgList._unloadimgs = 0
+  this.plugins = vm.plugins || []
+  this.attrs = Object.create(null)
+  this.stack = []
+  this.nodes = []
+  this.pre = (this.options.containerStyle || '').includes('white-space') && this.options.containerStyle.includes('pre') ? 2 : 0
+}
+
+/**
+ * @description 执行解析
+ * @param {String} content 要解析的文本
+ */
+Parser.prototype.parse = function (content) {
+  // 插件处理
+  for (let i = this.plugins.length; i--;) {
+    if (this.plugins[i].onUpdate) {
+      content = this.plugins[i].onUpdate(content, config) || content
+    }
+  }
+
+  new Lexer(this).parse(content)
+  // 出栈未闭合的标签
+  while (this.stack.length) {
+    this.popNode()
+  }
+  if (this.nodes.length > 50) {
+    mergeNodes(this.nodes)
+  }
+  return this.nodes
+}
+
+/**
+ * @description 将标签暴露出来（不被 rich-text 包含）
+ */
+Parser.prototype.expose = function () {
+  // #ifndef APP-PLUS-NVUE
+  for (let i = this.stack.length; i--;) {
+    const item = this.stack[i]
+    if (item.c || item.name === 'a' || item.name === 'video' || item.name === 'audio') return
+    item.c = 1
+  }
+  // #endif
+}
+
+/**
+ * @description 处理插件
+ * @param {Object} node 要处理的标签
+ * @returns {Boolean} 是否要移除此标签
+ */
+Parser.prototype.hook = function (node) {
+  for (let i = this.plugins.length; i--;) {
+    if (this.plugins[i].onParse && this.plugins[i].onParse(node, this) === false) {
+      return false
+    }
+  }
+  return true
+}
+
+/**
+ * @description 将链接拼接上主域名
+ * @param {String} url 需要拼接的链接
+ * @returns {String} 拼接后的链接
+ */
+Parser.prototype.getUrl = function (url) {
+  const domain = this.options.domain
+  if (url[0] === '/') {
+    if (url[1] === '/') {
+      // // 开头的补充协议名
+      url = (domain ? domain.split('://')[0] : 'http') + ':' + url
+    } else if (domain) {
+      // 否则补充整个域名
+      url = domain + url
+    } /* #ifdef APP-PLUS */ else {
+      url = plus.io.convertLocalFileSystemURL(url)
+    } /* #endif */
+  } else if (!url.includes('data:') && !url.includes('://')) {
+    if (domain) {
+      url = domain + '/' + url
+    } /* #ifdef APP-PLUS */ else {
+      url = plus.io.convertLocalFileSystemURL(url)
+    } /* #endif */
+  }
+  return url
+}
+
+/**
+ * @description 解析样式表
+ * @param {Object} node 标签
+ * @returns {Object}
+ */
+Parser.prototype.parseStyle = function (node) {
+  const attrs = node.attrs
+  const list = (this.tagStyle[node.name] || '').split(';').concat((attrs.style || '').split(';'))
+  const styleObj = {}
+  let tmp = ''
+
+  if (attrs.id && !this.xml) {
+    // 暴露锚点
+    if (this.options.useAnchor) {
+      this.expose()
+    } else if (node.name !== 'img' && node.name !== 'a' && node.name !== 'video' && node.name !== 'audio') {
+      attrs.id = undefined
+    }
+  }
+
+  // 转换 width 和 height 属性
+  if (attrs.width) {
+    styleObj.width = parseFloat(attrs.width) + (attrs.width.includes('%') ? '%' : 'px')
+    attrs.width = undefined
+  }
+  if (attrs.height) {
+    styleObj.height = parseFloat(attrs.height) + (attrs.height.includes('%') ? '%' : 'px')
+    attrs.height = undefined
+  }
+
+  for (let i = 0, len = list.length; i < len; i++) {
+    const info = list[i].split(':')
+    if (info.length < 2) continue
+    const key = info.shift().trim().toLowerCase()
+    let value = info.join(':').trim()
+    if ((value[0] === '-' && value.lastIndexOf('-') > 0) || value.includes('safe')) {
+      // 兼容性的 css 不压缩
+      tmp += `;${key}:${value}`
+    } else if (!styleObj[key] || value.includes('import') || !styleObj[key].includes('import')) {
+      // 重复的样式进行覆盖
+      if (value.includes('url')) {
+        // 填充链接
+        let j = value.indexOf('(') + 1
+        if (j) {
+          while (value[j] === '"' || value[j] === "'" || blankChar[value[j]]) {
+            j++
+          }
+          value = value.substr(0, j) + this.getUrl(value.substr(j))
+        }
+      } else if (value.includes('rpx')) {
+        // 转换 rpx（rich-text 内部不支持 rpx）
+        value = value.replace(/[0-9.]+\s*rpx/g, $ => parseFloat($) * windowWidth / 750 + 'px')
+      }
+      styleObj[key] = value
+    }
+  }
+
+  node.attrs.style = tmp
+  return styleObj
+}
+
+/**
+ * @description 解析到标签名
+ * @param {String} name 标签名
+ * @private
+ */
+Parser.prototype.onTagName = function (name) {
+  this.tagName = this.xml ? name : name.toLowerCase()
+  if (this.tagName === 'svg') {
+    this.xml = (this.xml || 0) + 1 // svg 标签内大小写敏感
+    config.ignoreTags.style = undefined // svg 标签内 style 可用
+  }
+}
+
+/**
+ * @description 解析到属性名
+ * @param {String} name 属性名
+ * @private
+ */
+Parser.prototype.onAttrName = function (name) {
+  name = this.xml ? name : name.toLowerCase()
+  if (name.substr(0, 5) === 'data-') {
+    if (name === 'data-src' && !this.attrs.src) {
+      // data-src 自动转为 src
+      this.attrName = 'src'
+    } else if (this.tagName === 'img' || this.tagName === 'a') {
+      // a 和 img 标签保留 data- 的属性，可以在 imgtap 和 linktap 事件中使用
+      this.attrName = name
+    } else {
+      // 剩余的移除以减小大小
+      this.attrName = undefined
+    }
+  } else {
+    this.attrName = name
+    this.attrs[name] = 'T' // boolean 型属性缺省设置
+  }
+}
+
+/**
+ * @description 解析到属性值
+ * @param {String} val 属性值
+ * @private
+ */
+Parser.prototype.onAttrVal = function (val) {
+  const name = this.attrName || ''
+  if (name === 'style' || name === 'href') {
+    // 部分属性进行实体解码
+    this.attrs[name] = decodeEntity(val, true)
+  } else if (name.includes('src')) {
+    // 拼接主域名
+    this.attrs[name] = this.getUrl(decodeEntity(val, true))
+  } else if (name) {
+    this.attrs[name] = val
+  }
+}
+
+/**
+ * @description 解析到标签开始
+ * @param {Boolean} selfClose 是否有自闭合标识 />
+ * @private
+ */
+Parser.prototype.onOpenTag = function (selfClose) {
+  // 拼装 node
+  const node = Object.create(null)
+  node.name = this.tagName
+  node.attrs = this.attrs
+  // 避免因为自动 diff 使得 type 被设置为 null 导致部分内容不显示
+  if (this.options.nodes.length) {
+    node.type = 'node'
+  }
+  this.attrs = Object.create(null)
+
+  const attrs = node.attrs
+  const parent = this.stack[this.stack.length - 1]
+  const siblings = parent ? parent.children : this.nodes
+  const close = this.xml ? selfClose : config.voidTags[node.name]
+
+  // 替换标签名选择器
+  if (tagSelector[node.name]) {
+    attrs.class = tagSelector[node.name] + (attrs.class ? ' ' + attrs.class : '')
+  }
+
+  // 转换 embed 标签
+  if (node.name === 'embed') {
+    // #ifndef H5 || APP-PLUS
+    const src = attrs.src || ''
+    // 按照后缀名和 type 将 embed 转为 video 或 audio
+    if (src.includes('.mp4') || src.includes('.3gp') || src.includes('.m3u8') || (attrs.type || '').includes('video')) {
+      node.name = 'video'
+    } else if (src.includes('.mp3') || src.includes('.wav') || src.includes('.aac') || src.includes('.m4a') || (attrs.type || '').includes('audio')) {
+      node.name = 'audio'
+    }
+    if (attrs.autostart) {
+      attrs.autoplay = 'T'
+    }
+    attrs.controls = 'T'
+    // #endif
+    // #ifdef H5 || APP-PLUS
+    this.expose()
+    // #endif
+  }
+
+  // #ifndef APP-PLUS-NVUE
+  // 处理音视频
+  if (node.name === 'video' || node.name === 'audio') {
+    // 设置 id 以便获取 context
+    if (node.name === 'video' && !attrs.id) {
+      attrs.id = 'v' + idIndex++
+    }
+    // 没有设置 controls 也没有设置 autoplay 的自动设置 controls
+    if (!attrs.controls && !attrs.autoplay) {
+      attrs.controls = 'T'
+    }
+    // 用数组存储所有可用的 source
+    node.src = []
+    if (attrs.src) {
+      node.src.push(attrs.src)
+      attrs.src = undefined
+    }
+    this.expose()
+  }
+  // #endif
+
+  // 处理自闭合标签
+  if (close) {
+    if (!this.hook(node) || config.ignoreTags[node.name]) {
+      // 通过 base 标签设置主域名
+      if (node.name === 'base' && !this.options.domain) {
+        this.options.domain = attrs.href
+      } /* #ifndef APP-PLUS-NVUE */ else if (node.name === 'source' && parent && (parent.name === 'video' || parent.name === 'audio') && attrs.src) {
+        // 设置 source 标签（仅父节点为 video 或 audio 时有效）
+        parent.src.push(attrs.src)
+      } /* #endif */
+      return
+    }
+
+    // 解析 style
+    const styleObj = this.parseStyle(node)
+
+    // 处理图片
+    if (node.name === 'img') {
+      if (attrs.src) {
+        // 标记 webp
+        if (attrs.src.includes('webp')) {
+          node.webp = 'T'
+        }
+        // data url 图片如果没有设置 original-src 默认为不可预览的小图片
+        if (attrs.src.includes('data:') && !attrs['original-src']) {
+          attrs.ignore = 'T'
+        }
+        if (!attrs.ignore || node.webp || attrs.src.includes('cloud://')) {
+          for (let i = this.stack.length; i--;) {
+            const item = this.stack[i]
+            if (item.name === 'a') {
+              node.a = item.attrs
+            }
+            if (item.name === 'table' && !node.webp && !attrs.src.includes('cloud://')) {
+              if (!styleObj.display || styleObj.display.includes('inline')) {
+                node.t = 'inline-block'
+              } else {
+                node.t = styleObj.display
+              }
+              styleObj.display = undefined
+            }
+            // #ifndef H5 || APP-PLUS
+            const style = item.attrs.style || ''
+            if (style.includes('flex:') && !style.includes('flex:0') && !style.includes('flex: 0') && (!styleObj.width || parseInt(styleObj.width) > 100)) {
+              styleObj.width = '100% !important'
+              styleObj.height = ''
+              for (let j = i + 1; j < this.stack.length; j++) {
+                this.stack[j].attrs.style = (this.stack[j].attrs.style || '').replace('inline-', '')
+              }
+            } else if (style.includes('flex') && styleObj.width === '100%') {
+              for (let j = i + 1; j < this.stack.length; j++) {
+                const style = this.stack[j].attrs.style || ''
+                if (!style.includes(';width') && !style.includes(' width') && style.indexOf('width') !== 0) {
+                  styleObj.width = ''
+                  break
+                }
+              }
+            } else if (style.includes('inline-block')) {
+              if (styleObj.width && styleObj.width[styleObj.width.length - 1] === '%') {
+                item.attrs.style += ';max-width:' + styleObj.width
+                styleObj.width = ''
+              } else {
+                item.attrs.style += ';max-width:100%'
+              }
+            }
+            // #endif
+            item.c = 1
+          }
+          attrs.i = this.imgList.length.toString()
+          let src = attrs['original-src'] || attrs.src
+          // #ifndef H5 || MP-ALIPAY || APP-PLUS || MP-360
+          if (this.imgList.includes(src)) {
+            // 如果有重复的链接则对域名进行随机大小写变换避免预览时错位
+            let i = src.indexOf('://')
+            if (i !== -1) {
+              i += 3
+              let newSrc = src.substr(0, i)
+              for (; i < src.length; i++) {
+                if (src[i] === '/') break
+                newSrc += Math.random() > 0.5 ? src[i].toUpperCase() : src[i]
+              }
+              newSrc += src.substr(i)
+              src = newSrc
+            }
+          }
+          // #endif
+          this.imgList.push(src)
+          if (!node.t) {
+            this.imgList._unloadimgs += 1
+          }
+          // #ifdef H5 || APP-PLUS
+          if (this.options.lazyLoad) {
+            attrs['data-src'] = attrs.src
+            attrs.src = undefined
+          }
+          // #endif
+        }
+      }
+      if (styleObj.display === 'inline') {
+        styleObj.display = ''
+      }
+      // #ifndef APP-PLUS-NVUE
+      if (attrs.ignore) {
+        styleObj['max-width'] = styleObj['max-width'] || '100%'
+        attrs.style += ';-webkit-touch-callout:none'
+      }
+      // #endif
+      // 设置的宽度超出屏幕，为避免变形，高度转为自动
+      if (parseInt(styleObj.width) > windowWidth) {
+        styleObj.height = undefined
+      }
+      // 记录是否设置了宽高
+      if (!isNaN(parseInt(styleObj.width))) {
+        node.w = 'T'
+      }
+      if (!isNaN(parseInt(styleObj.height)) && (!styleObj.height.includes('%') || (parent && (parent.attrs.style || '').includes('height')))) {
+        node.h = 'T'
+      }
+      if (node.w && node.h && styleObj['object-fit']) {
+        if (styleObj['object-fit'] === 'contain') {
+          node.m = 'aspectFit'
+        } else if (styleObj['object-fit'] === 'cover') {
+          node.m = 'aspectFill'
+        }
+      }
+    } else if (node.name === 'svg') {
+      siblings.push(node)
+      this.stack.push(node)
+      this.popNode()
+      return
+    }
+    for (const key in styleObj) {
+      if (styleObj[key]) {
+        attrs.style += `;${key}:${styleObj[key].replace(' !important', '')}`
+      }
+    }
+    attrs.style = attrs.style.substr(1) || undefined
+    // #ifdef (MP-WEIXIN || MP-QQ) && VUE3
+    if (!attrs.style) {
+      delete attrs.style
+    }
+    // #endif
+  } else {
+    if ((node.name === 'pre' || ((attrs.style || '').includes('white-space') && attrs.style.includes('pre'))) && this.pre !== 2) {
+      this.pre = node.pre = 1
+    }
+    node.children = []
+    this.stack.push(node)
+  }
+
+  // 加入节点树
+  siblings.push(node)
+}
+
+/**
+ * @description 解析到标签结束
+ * @param {String} name 标签名
+ * @private
+ */
+Parser.prototype.onCloseTag = function (name) {
+  // 依次出栈到匹配为止
+  name = this.xml ? name : name.toLowerCase()
+  let i
+  for (i = this.stack.length; i--;) {
+    if (this.stack[i].name === name) break
+  }
+  if (i !== -1) {
+    while (this.stack.length > i) {
+      this.popNode()
+    }
+  } else if (name === 'p' || name === 'br') {
+    const siblings = this.stack.length ? this.stack[this.stack.length - 1].children : this.nodes
+    siblings.push({
+      name,
+      attrs: {
+        class: tagSelector[name] || '',
+        style: this.tagStyle[name] || ''
+      }
+    })
+  }
+}
+
+/**
+ * @description 处理标签出栈
+ * @private
+ */
+Parser.prototype.popNode = function () {
+  const node = this.stack.pop()
+  let attrs = node.attrs
+  const children = node.children
+  const parent = this.stack[this.stack.length - 1]
+  const siblings = parent ? parent.children : this.nodes
+
+  if (!this.hook(node) || config.ignoreTags[node.name]) {
+    // 获取标题
+    if (node.name === 'title' && children.length && children[0].type === 'text' && this.options.setTitle) {
+      uni.setNavigationBarTitle({
+        title: children[0].text
+      })
+    }
+    siblings.pop()
+    return
+  }
+
+  if (node.pre && this.pre !== 2) {
+    // 是否合并空白符标识
+    this.pre = node.pre = undefined
+    for (let i = this.stack.length; i--;) {
+      if (this.stack[i].pre) {
+        this.pre = 1
+      }
+    }
+  }
+
+  const styleObj = {}
+
+  // 转换 svg
+  if (node.name === 'svg') {
+    if (this.xml > 1) {
+      // 多层 svg 嵌套
+      this.xml--
+      return
+    }
+    // #ifdef APP-PLUS-NVUE
+    (function traversal (node) {
+      if (node.name) {
+        // 调整 svg 的大小写
+        node.name = config.svgDict[node.name] || node.name
+        for (const item in node.attrs) {
+          if (config.svgDict[item]) {
+            node.attrs[config.svgDict[item]] = node.attrs[item]
+            node.attrs[item] = undefined
+          }
+        }
+        for (let i = 0; i < (node.children || []).length; i++) {
+          traversal(node.children[i])
+        }
+      }
+    })(node)
+    // #endif
+    // #ifndef APP-PLUS-NVUE
+    let src = ''
+    const style = attrs.style
+    attrs.style = ''
+    attrs.xmlns = 'http://www.w3.org/2000/svg';
+    (function traversal (node) {
+      if (node.type === 'text') {
+        src += node.text
+        return
+      }
+      const name = config.svgDict[node.name] || node.name
+      if (name === 'foreignObject') {
+        for (const child of (node.children || [])) {
+          if (child.attrs && !child.attrs.xmlns) {
+            child.attrs.xmlns = 'http://www.w3.org/1999/xhtml'
+            break
+          }
+        }
+      }
+      src += '<' + name
+      for (const item in node.attrs) {
+        const val = node.attrs[item]
+        if (val) {
+          src += ` ${config.svgDict[item] || item}="${val}"`
+        }
+      }
+      if (!node.children) {
+        src += '/>'
+      } else {
+        src += '>'
+        for (let i = 0; i < node.children.length; i++) {
+          traversal(node.children[i])
+        }
+        src += '</' + name + '>'
+      }
+    })(node)
+    node.name = 'img'
+    node.attrs = {
+      src: 'data:image/svg+xml;utf8,' + src.replace(/#/g, '%23'),
+      style,
+      ignore: 'T'
+    }
+    node.children = undefined
+    // #endif
+    this.xml = false
+    config.ignoreTags.style = true
+    return
+  }
+
+  // #ifndef APP-PLUS-NVUE
+  // 转换 align 属性
+  if (attrs.align) {
+    if (node.name === 'table') {
+      if (attrs.align === 'center') {
+        styleObj['margin-inline-start'] = styleObj['margin-inline-end'] = 'auto'
+      } else {
+        styleObj.float = attrs.align
+      }
+    } else {
+      styleObj['text-align'] = attrs.align
+    }
+    attrs.align = undefined
+  }
+
+  // 转换 dir 属性
+  if (attrs.dir) {
+    styleObj.direction = attrs.dir
+    attrs.dir = undefined
+  }
+
+  // 转换 font 标签的属性
+  if (node.name === 'font') {
+    if (attrs.color) {
+      styleObj.color = attrs.color
+      attrs.color = undefined
+    }
+    if (attrs.face) {
+      styleObj['font-family'] = attrs.face
+      attrs.face = undefined
+    }
+    if (attrs.size) {
+      let size = parseInt(attrs.size)
+      if (!isNaN(size)) {
+        if (size < 1) {
+          size = 1
+        } else if (size > 7) {
+          size = 7
+        }
+        styleObj['font-size'] = ['x-small', 'small', 'medium', 'large', 'x-large', 'xx-large', 'xxx-large'][size - 1]
+      }
+      attrs.size = undefined
+    }
+  }
+  // #endif
+
+  // 一些编辑器的自带 class
+  if ((attrs.class || '').includes('align-center')) {
+    styleObj['text-align'] = 'center'
+  }
+
+  Object.assign(styleObj, this.parseStyle(node))
+
+  if (node.name !== 'table' && parseInt(styleObj.width) > windowWidth) {
+    styleObj['max-width'] = '100%'
+    styleObj['box-sizing'] = 'border-box'
+  }
+
+  // #ifndef APP-PLUS-NVUE
+  if (config.blockTags[node.name]) {
+    node.name = 'div'
+  } else if (!config.trustTags[node.name] && !this.xml) {
+    // 未知标签转为 span，避免无法显示
+    node.name = 'span'
+  }
+
+  if (node.name === 'a' || node.name === 'ad'
+    // #ifdef H5 || APP-PLUS
+    || node.name === 'iframe' // eslint-disable-line
+    // #endif
+  ) {
+    this.expose()
+  } else if (node.name === 'video') {
+    if ((styleObj.height || '').includes('auto')) {
+      styleObj.height = undefined
+    }
+    /* #ifdef APP-PLUS */
+    let str = '<video style="width:100%;height:100%"'
+    for (const item in attrs) {
+      if (attrs[item]) {
+        str += ' ' + item + '="' + attrs[item] + '"'
+      }
+    }
+    if (this.options.pauseVideo) {
+      str += ' onplay="this.dispatchEvent(new CustomEvent(\'vplay\',{bubbles:!0}));for(var e=document.getElementsByTagName(\'video\'),t=0;t<e.length;t++)e[t]!=this&&e[t].pause()"'
+    }
+    str += '>'
+    for (let i = 0; i < node.src.length; i++) {
+      str += '<source src="' + node.src[i] + '">'
+    }
+    str += '</video>'
+    node.html = str
+    /* #endif */
+  } else if ((node.name === 'ul' || node.name === 'ol') && node.c) {
+    // 列表处理
+    const types = {
+      a: 'lower-alpha',
+      A: 'upper-alpha',
+      i: 'lower-roman',
+      I: 'upper-roman'
+    }
+    if (types[attrs.type]) {
+      attrs.style += ';list-style-type:' + types[attrs.type]
+      attrs.type = undefined
+    }
+    for (let i = children.length; i--;) {
+      if (children[i].name === 'li') {
+        children[i].c = 1
+      }
+    }
+  } else if (node.name === 'table') {
+    // 表格处理
+    // cellpadding、cellspacing、border 这几个常用表格属性需要通过转换实现
+    let padding = parseFloat(attrs.cellpadding)
+    let spacing = parseFloat(attrs.cellspacing)
+    const border = parseFloat(attrs.border)
+    const bordercolor = styleObj['border-color']
+    const borderstyle = styleObj['border-style']
+    if (node.c) {
+      // padding 和 spacing 默认 2
+      if (isNaN(padding)) {
+        padding = 2
+      }
+      if (isNaN(spacing)) {
+        spacing = 2
+      }
+    }
+    if (border) {
+      attrs.style += `;border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'}`
+    }
+    if (node.flag && node.c) {
+      // 有 colspan 或 rowspan 且含有链接的表格通过 grid 布局实现
+      styleObj.display = 'grid'
+      if (styleObj['border-collapse'] === 'collapse') {
+        styleObj['border-collapse'] = undefined
+        spacing = 0
+      }
+      if (spacing) {
+        styleObj['grid-gap'] = spacing + 'px'
+        styleObj.padding = spacing + 'px'
+      } else if (border) {
+        // 无间隔的情况下避免边框重叠
+        attrs.style += ';border-left:0;border-top:0'
+      }
+
+      const width = [] // 表格的列宽
+      const trList = [] // tr 列表
+      const cells = [] // 保存新的单元格
+      const map = {}; // 被合并单元格占用的格子
+
+      (function traversal (nodes) {
+        for (let i = 0; i < nodes.length; i++) {
+          if (nodes[i].name === 'tr') {
+            trList.push(nodes[i])
+          } else if (nodes[i].name === 'colgroup') {
+            let colI = 1
+            for (const col of (nodes[i].children || [])) {
+              if (col.name === 'col') {
+                const style = col.attrs.style || ''
+                const start = style.indexOf('width') ? style.indexOf(';width') : 0
+                // 提取出宽度
+                if (start !== -1) {
+                  let end = style.indexOf(';', start + 6)
+                  if (end === -1) {
+                    end = style.length
+                  }
+                  width[colI] = style.substring(start ? start + 7 : 6, end)
+                }
+                colI += 1
+              }
+            }
+          } else {
+            traversal(nodes[i].children || [])
+          }
+        }
+      })(children)
+
+      for (let row = 1; row <= trList.length; row++) {
+        let col = 1
+        for (let j = 0; j < trList[row - 1].children.length; j++) {
+          const td = trList[row - 1].children[j]
+          if (td.name === 'td' || td.name === 'th') {
+            // 这个格子被上面的单元格占用，则列号++
+            while (map[row + '.' + col]) {
+              col++
+            }
+            let style = td.attrs.style || ''
+            let start = style.indexOf('width') ? style.indexOf(';width') : 0
+            // 提取出 td 的宽度
+            if (start !== -1) {
+              let end = style.indexOf(';', start + 6)
+              if (end === -1) {
+                end = style.length
+              }
+              if (!td.attrs.colspan) {
+                width[col] = style.substring(start ? start + 7 : 6, end)
+              }
+              style = style.substr(0, start) + style.substr(end)
+            }
+            // 设置竖直对齐
+            style += ';display:flex'
+            start = style.indexOf('vertical-align')
+            if (start !== -1) {
+              const val = style.substr(start + 15, 10)
+              if (val.includes('middle')) {
+                style += ';align-items:center'
+              } else if (val.includes('bottom')) {
+                style += ';align-items:flex-end'
+              }
+            } else {
+              style += ';align-items:center'
+            }
+            // 设置水平对齐
+            start = style.indexOf('text-align')
+            if (start !== -1) {
+              const val = style.substr(start + 11, 10)
+              if (val.includes('center')) {
+                style += ';justify-content: center'
+              } else if (val.includes('right')) {
+                style += ';justify-content: right'
+              }
+            }
+            style = (border ? `;border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'}` + (spacing ? '' : ';border-right:0;border-bottom:0') : '') + (padding ? `;padding:${padding}px` : '') + ';' + style
+            // 处理列合并
+            if (td.attrs.colspan) {
+              style += `;grid-column-start:${col};grid-column-end:${col + parseInt(td.attrs.colspan)}`
+              if (!td.attrs.rowspan) {
+                style += `;grid-row-start:${row};grid-row-end:${row + 1}`
+              }
+              col += parseInt(td.attrs.colspan) - 1
+            }
+            // 处理行合并
+            if (td.attrs.rowspan) {
+              style += `;grid-row-start:${row};grid-row-end:${row + parseInt(td.attrs.rowspan)}`
+              if (!td.attrs.colspan) {
+                style += `;grid-column-start:${col};grid-column-end:${col + 1}`
+              }
+              // 记录下方单元格被占用
+              for (let rowspan = 1; rowspan < td.attrs.rowspan; rowspan++) {
+                for (let colspan = 0; colspan < (td.attrs.colspan || 1); colspan++) {
+                  map[(row + rowspan) + '.' + (col - colspan)] = 1
+                }
+              }
+            }
+            if (style) {
+              td.attrs.style = style
+            }
+            cells.push(td)
+            col++
+          }
+        }
+        if (row === 1) {
+          let temp = ''
+          for (let i = 1; i < col; i++) {
+            temp += (width[i] ? width[i] : 'auto') + ' '
+          }
+          styleObj['grid-template-columns'] = temp
+        }
+      }
+      node.children = cells
+    } else {
+      // 没有使用合并单元格的表格通过 table 布局实现
+      if (node.c) {
+        styleObj.display = 'table'
+      }
+      if (!isNaN(spacing)) {
+        styleObj['border-spacing'] = spacing + 'px'
+      }
+      if (border || padding) {
+        // 遍历
+        (function traversal (nodes) {
+          for (let i = 0; i < nodes.length; i++) {
+            const td = nodes[i]
+            if (td.name === 'th' || td.name === 'td') {
+              if (border) {
+                td.attrs.style = `border:${border}px ${borderstyle || 'solid'} ${bordercolor || 'gray'};${td.attrs.style || ''}`
+              }
+              if (padding) {
+                td.attrs.style = `padding:${padding}px;${td.attrs.style || ''}`
+              }
+            } else if (td.children) {
+              traversal(td.children)
+            }
+          }
+        })(children)
+      }
+    }
+    // 给表格添加一个单独的横向滚动层
+    if (this.options.scrollTable && !(attrs.style || '').includes('inline')) {
+      const table = Object.assign({}, node)
+      node.name = 'div'
+      node.attrs = {
+        style: 'overflow:auto'
+      }
+      node.children = [table]
+      attrs = table.attrs
+    }
+  } else if ((node.name === 'td' || node.name === 'th') && (attrs.colspan || attrs.rowspan)) {
+    for (let i = this.stack.length; i--;) {
+      if (this.stack[i].name === 'table') {
+        this.stack[i].flag = 1 // 指示含有合并单元格
+        break
+      }
+    }
+  } else if (node.name === 'ruby') {
+    // 转换 ruby
+    node.name = 'span'
+    for (let i = 0; i < children.length - 1; i++) {
+      if (children[i].type === 'text' && children[i + 1].name === 'rt') {
+        children[i] = {
+          name: 'div',
+          attrs: {
+            style: 'display:inline-block;text-align:center'
+          },
+          children: [{
+            name: 'div',
+            attrs: {
+              style: 'font-size:50%;' + (children[i + 1].attrs.style || '')
+            },
+            children: children[i + 1].children
+          }, children[i]]
+        }
+        children.splice(i + 1, 1)
+      }
+    }
+  } else if (node.c) {
+    (function traversal (node) {
+      node.c = 2
+      for (let i = node.children.length; i--;) {
+        const child = node.children[i]
+        // #ifdef (MP-WEIXIN || MP-QQ || APP-PLUS || MP-360) && VUE3
+        if (child.name && (config.inlineTags[child.name] || ((child.attrs.style || '').includes('inline') && child.children)) && !child.c) {
+          traversal(child)
+        }
+        // #endif
+        if (!child.c || child.name === 'table') {
+          node.c = 1
+        }
+      }
+    })(node)
+  }
+
+  if ((styleObj.display || '').includes('flex') && !node.c) {
+    for (let i = children.length; i--;) {
+      const item = children[i]
+      if (item.f) {
+        item.attrs.style = (item.attrs.style || '') + item.f
+        item.f = undefined
+      }
+    }
+  }
+  // flex 布局时部分样式需要提取到 rich-text 外层
+  const flex = parent && ((parent.attrs.style || '').includes('flex') || (parent.attrs.style || '').includes('grid'))
+    // #ifdef MP-WEIXIN
+    // 检查基础库版本 virtualHost 是否可用
+    && !(node.c && wx.getNFCAdapter) // eslint-disable-line
+    // #endif
+    // #ifndef MP-WEIXIN || MP-QQ || MP-BAIDU || MP-TOUTIAO
+    && !node.c // eslint-disable-line
+  // #endif
+  if (flex) {
+    node.f = ';max-width:100%'
+  }
+
+  if (children.length >= 50 && node.c && !(styleObj.display || '').includes('flex')) {
+    mergeNodes(children)
+  }
+  // #endif
+
+  for (const key in styleObj) {
+    if (styleObj[key]) {
+      const val = `;${key}:${styleObj[key].replace(' !important', '')}`
+      /* #ifndef APP-PLUS-NVUE */
+      if (flex && ((key.includes('flex') && key !== 'flex-direction') || key === 'align-self' || key.includes('grid') || styleObj[key][0] === '-' || (key.includes('width') && val.includes('%')))) {
+        node.f += val
+        if (key === 'width') {
+          attrs.style += ';width:100%'
+        }
+      } else /* #endif */ {
+        attrs.style += val
+      }
+    }
+  }
+  attrs.style = attrs.style.substr(1) || undefined
+  // #ifdef (MP-WEIXIN || MP-QQ) && VUE3
+  for (const key in attrs) {
+    if (!attrs[key]) {
+      delete attrs[key]
+    }
+  }
+  // #endif
+}
+
+/**
+ * @description 解析到文本
+ * @param {String} text 文本内容
+ */
+Parser.prototype.onText = function (text) {
+  if (!this.pre) {
+    // 合并空白符
+    let trim = ''
+    let flag
+    for (let i = 0, len = text.length; i < len; i++) {
+      if (!blankChar[text[i]]) {
+        trim += text[i]
+      } else {
+        if (trim[trim.length - 1] !== ' ') {
+          trim += ' '
+        }
+        if (text[i] === '\n' && !flag) {
+          flag = true
+        }
+      }
+    }
+    // 去除含有换行符的空串
+    if (trim === ' ') {
+      if (flag) return
+      // #ifdef VUE3
+      else {
+        const parent = this.stack[this.stack.length - 1]
+        if (parent && parent.name[0] === 't') return
+      }
+      // #endif
+    }
+    text = trim
+  }
+  const node = Object.create(null)
+  node.type = 'text'
+  // #ifdef (MP-BAIDU || MP-ALIPAY || MP-TOUTIAO) && VUE3
+  node.attrs = {}
+  // #endif
+  node.text = decodeEntity(text)
+  if (this.hook(node)) {
+    // #ifdef MP-WEIXIN
+    if (this.options.selectable === 'force' && system.includes('iOS') && !uni.canIUse('rich-text.user-select')) {
+      this.expose()
+    }
+    // #endif
+    const siblings = this.stack.length ? this.stack[this.stack.length - 1].children : this.nodes
+    siblings.push(node)
+  }
+}
+
+/**
+ * @description html 词法分析器
+ * @param {Object} handler 高层处理器
+ */
+function Lexer (handler) {
+  this.handler = handler
+}
+
+/**
+ * @description 执行解析
+ * @param {String} content 要解析的文本
+ */
+Lexer.prototype.parse = function (content) {
+  this.content = content || ''
+  this.i = 0 // 标记解析位置
+  this.start = 0 // 标记一个单词的开始位置
+  this.state = this.text // 当前状态
+  for (let len = this.content.length; this.i !== -1 && this.i < len;) {
+    this.state()
+  }
+}
+
+/**
+ * @description 检查标签是否闭合
+ * @param {String} method 如果闭合要进行的操作
+ * @returns {Boolean} 是否闭合
+ * @private
+ */
+Lexer.prototype.checkClose = function (method) {
+  const selfClose = this.content[this.i] === '/'
+  if (this.content[this.i] === '>' || (selfClose && this.content[this.i + 1] === '>')) {
+    if (method) {
+      this.handler[method](this.content.substring(this.start, this.i))
+    }
+    this.i += selfClose ? 2 : 1
+    this.start = this.i
+    this.handler.onOpenTag(selfClose)
+    if (this.handler.tagName === 'script') {
+      this.i = this.content.indexOf('</', this.i)
+      if (this.i !== -1) {
+        this.i += 2
+        this.start = this.i
+      }
+      this.state = this.endTag
+    } else {
+      this.state = this.text
+    }
+    return true
+  }
+  return false
+}
+
+/**
+ * @description 文本状态
+ * @private
+ */
+Lexer.prototype.text = function () {
+  this.i = this.content.indexOf('<', this.i) // 查找最近的标签
+  if (this.i === -1) {
+    // 没有标签了
+    if (this.start < this.content.length) {
+      this.handler.onText(this.content.substring(this.start, this.content.length))
+    }
+    return
+  }
+  const c = this.content[this.i + 1]
+  if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) {
+    // 标签开头
+    if (this.start !== this.i) {
+      this.handler.onText(this.content.substring(this.start, this.i))
+    }
+    this.start = ++this.i
+    this.state = this.tagName
+  } else if (c === '/' || c === '!' || c === '?') {
+    if (this.start !== this.i) {
+      this.handler.onText(this.content.substring(this.start, this.i))
+    }
+    const next = this.content[this.i + 2]
+    if (c === '/' && ((next >= 'a' && next <= 'z') || (next >= 'A' && next <= 'Z'))) {
+      // 标签结尾
+      this.i += 2
+      this.start = this.i
+      this.state = this.endTag
+      return
+    }
+    // 处理注释
+    let end = '-->'
+    if (c !== '!' || this.content[this.i + 2] !== '-' || this.content[this.i + 3] !== '-') {
+      end = '>'
+    }
+    this.i = this.content.indexOf(end, this.i)
+    if (this.i !== -1) {
+      this.i += end.length
+      this.start = this.i
+    }
+  } else {
+    this.i++
+  }
+}
+
+/**
+ * @description 标签名状态
+ * @private
+ */
+Lexer.prototype.tagName = function () {
+  if (blankChar[this.content[this.i]]) {
+    // 解析到标签名
+    this.handler.onTagName(this.content.substring(this.start, this.i))
+    while (blankChar[this.content[++this.i]]);
+    if (this.i < this.content.length && !this.checkClose()) {
+      this.start = this.i
+      this.state = this.attrName
+    }
+  } else if (!this.checkClose('onTagName')) {
+    this.i++
+  }
+}
+
+/**
+ * @description 属性名状态
+ * @private
+ */
+Lexer.prototype.attrName = function () {
+  let c = this.content[this.i]
+  if (blankChar[c] || c === '=') {
+    // 解析到属性名
+    this.handler.onAttrName(this.content.substring(this.start, this.i))
+    let needVal = c === '='
+    const len = this.content.length
+    while (++this.i < len) {
+      c = this.content[this.i]
+      if (!blankChar[c]) {
+        if (this.checkClose()) return
+        if (needVal) {
+          // 等号后遇到第一个非空字符
+          this.start = this.i
+          this.state = this.attrVal
+          return
+        }
+        if (this.content[this.i] === '=') {
+          needVal = true
+        } else {
+          this.start = this.i
+          this.state = this.attrName
+          return
+        }
+      }
+    }
+  } else if (!this.checkClose('onAttrName')) {
+    this.i++
+  }
+}
+
+/**
+ * @description 属性值状态
+ * @private
+ */
+Lexer.prototype.attrVal = function () {
+  const c = this.content[this.i]
+  const len = this.content.length
+  if (c === '"' || c === "'") {
+    // 有冒号的属性
+    this.start = ++this.i
+    this.i = this.content.indexOf(c, this.i)
+    if (this.i === -1) return
+    this.handler.onAttrVal(this.content.substring(this.start, this.i))
+  } else {
+    // 没有冒号的属性
+    for (; this.i < len; this.i++) {
+      if (blankChar[this.content[this.i]]) {
+        this.handler.onAttrVal(this.content.substring(this.start, this.i))
+        break
+      } else if (this.checkClose('onAttrVal')) return
+    }
+  }
+  while (blankChar[this.content[++this.i]]);
+  if (this.i < len && !this.checkClose()) {
+    this.start = this.i
+    this.state = this.attrName
+  }
+}
+
+/**
+ * @description 结束标签状态
+ * @returns {String} 结束的标签名
+ * @private
+ */
+Lexer.prototype.endTag = function () {
+  const c = this.content[this.i]
+  if (blankChar[c] || c === '>' || c === '/') {
+    this.handler.onCloseTag(this.content.substring(this.start, this.i))
+    if (c !== '>') {
+      this.i = this.content.indexOf('>', this.i)
+      if (this.i === -1) return
+    }
+    this.start = ++this.i
+    this.state = this.text
+  } else {
+    this.i++
+  }
+}
+
+export default Parser
diff --git a/uni_modules/mp-html/package.json b/uni_modules/mp-html/package.json
new file mode 100644
index 0000000..168abcc
--- /dev/null
+++ b/uni_modules/mp-html/package.json
@@ -0,0 +1,76 @@
+{
+    "id": "mp-html",
+    "displayName": "mp-html 富文本组件【全端支持，支持编辑、latex等扩展】",
+    "version": "v2.4.3",
+    "description": "一个强大的富文本组件，高效轻量，功能丰富",
+    "keywords": [
+        "富文本",
+        "编辑器",
+        "html",
+        "rich-text",
+        "editor"
+    ],
+    "repository": "https://github.com/jin-yufeng/mp-html",
+    "dcloudext": {
+        "sale": {
+            "regular": {
+                "price": "0.00"
+            },
+            "sourcecode": {
+                "price": "0.00"
+            }
+        },
+        "contact": {
+            "qq": ""
+        },
+        "declaration": {
+            "ads": "无",
+            "data": "无",
+            "permissions": "无"
+        },
+        "npmurl": "https://www.npmjs.com/package/mp-html",
+        "type": "component-vue"
+    },
+    "uni_modules": {
+        "platforms": {
+            "cloud": {
+                "tcb": "y",
+                "aliyun": "y"
+            },
+            "client": {
+                "App": {
+                    "app-vue": "y",
+                    "app-nvue": "y"
+                },
+                "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",
+                    "百度": "y",
+                    "字节跳动": "y",
+                    "QQ": "y"
+                },
+                "快应用": {
+                    "华为": "y",
+                    "联盟": "y"
+                },
+                "Vue": {
+                    "vue2": "y",
+                    "vue3": "y"
+                }
+            }
+        }
+    }
+}
\ No newline at end of file
diff --git a/uni_modules/mp-html/static/app-plus/mp-html/js/handler.js b/uni_modules/mp-html/static/app-plus/mp-html/js/handler.js
new file mode 100644
index 0000000..1d986bd
--- /dev/null
+++ b/uni_modules/mp-html/static/app-plus/mp-html/js/handler.js
@@ -0,0 +1 @@
+"use strict";function t(t){for(var e=Object.create(null),n=t.attributes.length;n--;)e[t.attributes[n].name]=t.attributes[n].value;return e}function e(){a[1]&&(this.src=a[1],this.onerror=null),this.onclick=null,this.ontouchstart=null,uni.postMessage({data:{action:"onError",source:"img",attrs:t(this)}})}function n(){window.unloadimgs-=1,0===window.unloadimgs&&uni.postMessage({data:{action:"onReady"}})}function o(r,s,c){for(var d=0;d<r.length;d++)!function(d){var u=r[d],l=void 0;if(u.type&&"node"!==u.type)l=document.createTextNode(u.text.replace(/&amp;/g,"&"));else{var g=u.name;"svg"===g&&(c="http://www.w3.org/2000/svg"),"html"!==g&&"body"!==g||(g="div"),l=c?document.createElementNS(c,g):document.createElement(g);for(var p in u.attrs)l.setAttribute(p,u.attrs[p]);if(u.children&&o(u.children,l,c),"img"===g){if(window.unloadimgs+=1,l.onload=n,l.onerror=n,!l.src&&l.getAttribute("data-src")&&(l.src=l.getAttribute("data-src")),u.attrs.ignore||(l.onclick=function(e){e.stopPropagation(),uni.postMessage({data:{action:"onImgTap",attrs:t(this)}})}),a[2]){var h=new Image;h.src=l.src,l.src=a[2],h.onload=function(){l.src=this.src},h.onerror=function(){l.onerror()}}l.onerror=e}else if("a"===g)l.addEventListener("click",function(e){e.stopPropagation(),e.preventDefault();var n,o=this.getAttribute("href");o&&"#"===o[0]&&(n=(document.getElementById(o.substr(1))||{}).offsetTop),uni.postMessage({data:{action:"onLinkTap",attrs:t(this),offset:n}})},!0);else if("video"===g||"audio"===g)i.push(l),u.attrs.autoplay||u.attrs.controls||l.setAttribute("controls","true"),l.onplay=function(){if(uni.postMessage({data:{action:"onPlay"}}),a[3])for(var t=0;t<i.length;t++)i[t]!==this&&i[t].pause()},l.onerror=function(){uni.postMessage({data:{action:"onError",source:g,attrs:t(this)}})};else if("table"===g&&a[4]&&!l.style.cssText.includes("inline")){var f=document.createElement("div");f.style.overflow="auto",f.appendChild(l),l=f}else"svg"===g&&(c=void 0)}s.appendChild(l)}(d)}document.addEventListener("UniAppJSBridgeReady",function(){document.body.onclick=function(){return uni.postMessage({data:{action:"onClick"}})},uni.postMessage({data:{action:"onJSBridgeReady"}})});var a,i=[];window.setContent=function(t,e,n){var r=document.getElementById("content");e[0]&&(document.body.style.cssText=e[0]),e[5]||(r.style.userSelect="none"),n||(r.innerHTML="",i=[]),a=e,window.unloadimgs=0;var s=document.createDocumentFragment();o(t,s),r.appendChild(s);var c=r.scrollHeight;uni.postMessage({data:{action:"onLoad",height:c}}),window.unloadimgs||uni.postMessage({data:{action:"onReady",height:c}}),clearInterval(window.timer),window.timer=setInterval(function(){r.scrollHeight!==c&&(c=r.scrollHeight,uni.postMessage({data:{action:"onHeightChange",height:c}}))},350)},window.onunload=function(){clearInterval(window.timer)};
\ No newline at end of file
diff --git a/uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js b/uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js
new file mode 100644
index 0000000..b0c8445
--- /dev/null
+++ b/uni_modules/mp-html/static/app-plus/mp-html/js/uni.webview.min.js
@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(e=e||self).uni=n()}(this,(function(){"use strict";try{var e={};Object.defineProperty(e,"passive",{get:function(){!0}}),window.addEventListener("test-passive",null,e)}catch(e){}var n=Object.prototype.hasOwnProperty;function t(e,t){return n.call(e,t)}var i=[],a=function(e,n){var t={options:{timestamp:+new Date},name:e,arg:n};if(window.__dcloud_weex_postMessage||window.__dcloud_weex_){if("postMessage"===e){var a={data:[n]};return window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessage(a):window.__dcloud_weex_.postMessage(JSON.stringify(a))}var o={type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}};window.__dcloud_weex_postMessage?window.__dcloud_weex_postMessageToService(o):window.__dcloud_weex_.postMessageToService(JSON.stringify(o))}if(!window.plus)return window.parent.postMessage({type:"WEB_INVOKE_APPSERVICE",data:t,pageId:""},"*");if(0===i.length){var r=plus.webview.currentWebview();if(!r)throw new Error("plus.webview.currentWebview() is undefined");var d=r.parent(),s="";s=d?d.id:r.id,i.push(s)}if(plus.webview.getWebviewById("__uniapp__service"))plus.webview.postMessageToUniNView({type:"WEB_INVOKE_APPSERVICE",args:{data:t,webviewIds:i}},"__uniapp__service");else{var w=JSON.stringify(t);plus.webview.getLaunchWebview().evalJS('UniPlusBridge.subscribeHandler("'.concat("WEB_INVOKE_APPSERVICE",'",').concat(w,",").concat(JSON.stringify(i),");"))}},o={navigateTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("navigateTo",{url:encodeURI(n)})},navigateBack:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.delta;a("navigateBack",{delta:parseInt(n)||1})},switchTab:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("switchTab",{url:encodeURI(n)})},reLaunch:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("reLaunch",{url:encodeURI(n)})},redirectTo:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=e.url;a("redirectTo",{url:encodeURI(n)})},getEnv:function(e){window.plus?e({plus:!0}):e({h5:!0})},postMessage:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};a("postMessage",e.data||{})}},r=/uni-app/i.test(navigator.userAgent),d=/Html5Plus/i.test(navigator.userAgent),s=/complete|loaded|interactive/;var w=window.my&&navigator.userAgent.indexOf("AlipayClient")>-1;var u=window.swan&&window.swan.webView&&/swan/i.test(navigator.userAgent);var c=window.qq&&window.qq.miniProgram&&/QQ/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var g=window.tt&&window.tt.miniProgram&&/toutiaomicroapp/i.test(navigator.userAgent);var v=window.wx&&window.wx.miniProgram&&/micromessenger/i.test(navigator.userAgent)&&/miniProgram/i.test(navigator.userAgent);var p=window.qa&&/quickapp/i.test(navigator.userAgent);for(var l,_=function(){window.UniAppJSBridge=!0,document.dispatchEvent(new CustomEvent("UniAppJSBridgeReady",{bubbles:!0,cancelable:!0}))},f=[function(e){if(r||d)return window.__dcloud_weex_postMessage||window.__dcloud_weex_?document.addEventListener("DOMContentLoaded",e):window.plus&&s.test(document.readyState)?setTimeout(e,0):document.addEventListener("plusready",e),o},function(e){if(v)return window.WeixinJSBridge&&window.WeixinJSBridge.invoke?setTimeout(e,0):document.addEventListener("WeixinJSBridgeReady",e),window.wx.miniProgram},function(e){if(c)return window.QQJSBridge&&window.QQJSBridge.invoke?setTimeout(e,0):document.addEventListener("QQJSBridgeReady",e),window.qq.miniProgram},function(e){if(w){document.addEventListener("DOMContentLoaded",e);var n=window.my;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){if(u)return document.addEventListener("DOMContentLoaded",e),window.swan.webView},function(e){if(g)return document.addEventListener("DOMContentLoaded",e),window.tt.miniProgram},function(e){if(p){window.QaJSBridge&&window.QaJSBridge.invoke?setTimeout(e,0):document.addEventListener("QaJSBridgeReady",e);var n=window.qa;return{navigateTo:n.navigateTo,navigateBack:n.navigateBack,switchTab:n.switchTab,reLaunch:n.reLaunch,redirectTo:n.redirectTo,postMessage:n.postMessage,getEnv:n.getEnv}}},function(e){return document.addEventListener("DOMContentLoaded",e),o}],m=0;m<f.length&&!(l=f[m](_));m++);l||(l={});var E="undefined"!=typeof uni?uni:{};if(!E.navigateTo)for(var b in l)t(l,b)&&(E[b]=l[b]);return E.webView=l,E}));
\ No newline at end of file
diff --git a/uni_modules/mp-html/static/app-plus/mp-html/local.html b/uni_modules/mp-html/static/app-plus/mp-html/local.html
new file mode 100644
index 0000000..04355c9
--- /dev/null
+++ b/uni_modules/mp-html/static/app-plus/mp-html/local.html
@@ -0,0 +1 @@
+<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"><style>body,html{width:100%;height:100%;overflow-x:scroll;overflow-y:hidden}body{margin:0}video{width:300px;height:225px}img{max-width:100%;-webkit-touch-callout:none}</style></head><body><div id="content" style="overflow:hidden"></div><script type="text/javascript" src="./js/uni.webview.min.js"></script><script type="text/javascript" src="./js/handler.js"></script></body>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
new file mode 100644
index 0000000..1936b12
--- /dev/null
+++ b/vite.config.ts
@@ -0,0 +1,30 @@
+import uni from "@dcloudio/vite-plugin-uni"; // ！此依赖不能安装
+import path from "path";
+import { defineConfig } from "vite";
+import { cool } from "@cool-vue/vite-plugin";
+import { proxy } from "./config/proxy";
+
+function resolve(dir: string) {
+	return path.resolve(__dirname, dir);
+}
+
+// https://vitejs.dev/config
+
+export default defineConfig(() => {
+	return {
+		plugins: [uni(), cool({ type: "app", proxy })],
+		server: {
+			port: 9900,
+			proxy,
+			hmr: {
+				overlay: true,
+			},
+		},
+		resolve: {
+			alias: {
+				"/@": resolve("./"),
+				"/$": resolve("./uni_modules/"),
+			},
+		},
+	};
+});